From 98fd7e4bcdb68b3365ef5538c9b7c807257e8de2 Mon Sep 17 00:00:00 2001
From: Edwin van den Houdt <eho@respellion.nl>
Date: Thu, 2 Jul 2026 21:34:21 +0200
Subject: [PATCH] =?UTF-8?q?feat(cibg):=20WP-11=20=E2=80=94=20render=20"Mij?=
 =?UTF-8?q?n=20aanvragen"=20as=20the=20CIBG=20Aanvragen=20component?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- application-link switches to a `li[app-application-link]` attribute selector
  (native <li> child of the <ul> — axe-clean list) and drops the invented,
  dead `.application` / `.application-title` classes for the real vendored
  `.dashboard-block.applications li a` chain (h3.h3 / .subtitle / .status / .cta).
  Content stacks in a flex column; a non-navigating row mirrors the card surface
  from tokens. Re-enables a11y on the application-link/list stories.
- Dashboard "Mijn aanvragen" now renders through app-application-list +
  <li app-application-link> rows (was a keuzelijst), mapped by a new pure
  submittedRow() view helper (+ spec). Concepts stay the resumable melding.
- aanvraag-block is now concept-only (submitted mapping moved to aanvraag-view).

WP-11 grep gate clean. GREEN: lint, tokens, 181 tests, build, 136 axe stories.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 documentation.json                            | 397 +++++++++++++-----
 .../registratie/domain/aanvraag-view.spec.ts  |  30 ++
 src/app/registratie/domain/aanvraag-view.ts   |  44 ++
 .../aanvraag-block.component.ts               |  51 +--
 src/app/registratie/ui/dashboard.page.ts      |  17 +-
 .../application-link.component.ts             |  53 ++-
 .../application-link.stories.ts               |  10 +-
 .../application-list.stories.ts               |  11 +-
 8 files changed, 410 insertions(+), 203 deletions(-)
 create mode 100644 src/app/registratie/domain/aanvraag-view.spec.ts
 create mode 100644 src/app/registratie/domain/aanvraag-view.ts

diff --git a/documentation.json b/documentation.json
index 481290f..a7d7c55 100644
--- a/documentation.json
+++ b/documentation.json
@@ -205,6 +205,53 @@
                 "Aanvraag"
             ]
         },
+        {
+            "name": "AanvraagRow",
+            "id": "interface-AanvraagRow-709f25c5f5290c2ead0c51d4c8fcc6607c66946560c07a1d3ea16be67c7442feaeefd021ced4f77b685484dec39e1ff5e7b7122472530b51887f573a69576956",
+            "file": "src/app/registratie/domain/aanvraag-view.ts",
+            "deprecated": false,
+            "deprecationMessage": "",
+            "type": "interface",
+            "sourceCode": "import { Aanvraag, AanvraagType } from './aanvraag';\n\n/** View-model mapping for an aanvraag: type → label, and a submitted aanvraag →\n    the CIBG \"aanvragen\" row fields (heading/status/subtitle). Pure, no Angular —\n    the UI renders these, it does not derive them. */\n\nexport const TYPE_LABELS: Record<AanvraagType, string> = {\n  registratie: $localize`:@@aanvraagBlock.type.registratie:Inschrijving`,\n  herregistratie: $localize`:@@aanvraagBlock.type.herregistratie:Herregistratie`,\n  intake: $localize`:@@aanvraagBlock.type.intake:Herregistratie-intake`,\n};\n\nexport interface AanvraagRow {\n  heading: string;\n  /** Reference + submit-date line (the `.status` line of an aanvragen row). */\n  status: string;\n  /** Secondary note: manual-review notice or rejection reason. */\n  subtitle: string;\n}\n\nfunction formatNL(iso?: string): string {\n  return iso ? new Date(iso).toLocaleDateString('nl-NL', { day: 'numeric', month: 'long', year: 'numeric' }) : '';\n}\n\n/** Fields for a submitted aanvraag's row (Concept has no row — it renders as a\n    resumable melding, see aanvraag-block). */\nexport function submittedRow(a: Aanvraag): AanvraagRow {\n  const s = a.status;\n  const heading = TYPE_LABELS[a.type];\n  switch (s.tag) {\n    case 'Concept':\n      return { heading, status: '', subtitle: '' };\n    case 'InBehandeling':\n      return {\n        heading,\n        status: $localize`:@@aanvraagBlock.inBehandeling:Referentie ${s.referentie}:ref: · ingediend op ${formatNL(a.submittedAt)}:datum:`,\n        subtitle: s.manual ? $localize`:@@aanvraagBlock.manual:Uw aanvraag wordt handmatig beoordeeld in de backoffice.` : '',\n      };\n    case 'Goedgekeurd':\n      return { heading, status: $localize`:@@aanvraagBlock.goedgekeurd:Referentie ${s.referentie}:ref:`, subtitle: '' };\n    case 'Afgewezen':\n      return { heading, status: $localize`:@@aanvraagBlock.afgewezen:Referentie ${s.referentie}:ref:`, subtitle: s.reden };\n  }\n}\n",
+            "properties": [
+                {
+                    "name": "heading",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "string",
+                    "indexKey": "",
+                    "optional": false,
+                    "description": "",
+                    "line": 14
+                },
+                {
+                    "name": "status",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "string",
+                    "indexKey": "",
+                    "optional": false,
+                    "description": "<p>Reference + submit-date line (the <code>.status</code> line of an aanvragen row).</p>\n",
+                    "line": 16,
+                    "rawdescription": "\nReference + submit-date line (the `.status` line of an aanvragen row)."
+                },
+                {
+                    "name": "subtitle",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "string",
+                    "indexKey": "",
+                    "optional": false,
+                    "description": "<p>Secondary note: manual-review notice or rejection reason.</p>\n",
+                    "line": 18,
+                    "rawdescription": "\nSecondary note: manual-review notice or rejection reason."
+                }
+            ],
+            "indexSignatures": [],
+            "kind": 172,
+            "methods": [],
+            "extends": []
+        },
         {
             "name": "AanvraagStatusDto",
             "id": "interface-AanvraagStatusDto-134629d19fe3b5e6a76daeb4f10c282202eb1b8380b939c25450bb44b86fcb3df7a15e5ead886ad958b8bb7f158457387fb6c11872acdb4893c4933c2fdef07b",
@@ -10958,7 +11005,7 @@
     "components": [
         {
             "name": "AanvraagBlockComponent",
-            "id": "component-AanvraagBlockComponent-435c9a2cad5ba9d488a371453d36c03838e040797afaa9e56c719a7387dbb02923f1120c04171fca018937ef6540cfddb6ec58756ecb46dda201a5e8f8c3e2e8",
+            "id": "component-AanvraagBlockComponent-1ccaaa78db12437d5e4a16a428b09c17e65acf55cd86363d6337d04ec1bb9193c69920bdb9454d3bac8a454bbb54d0dafdd7288e24ab751b6e6ea56ded2612eb",
             "file": "src/app/registratie/ui/aanvraag-block/aanvraag-block.component.ts",
             "encapsulation": [],
             "entryComponents": [],
@@ -10968,9 +11015,9 @@
             "selector": "app-aanvraag-block",
             "styleUrls": [],
             "styles": [
-                "\n    :host{display:contents} /* see choice-link.component.ts (keeps <li> a direct <ul> child) */\n    .actions{display:flex;align-items:center;gap:var(--rhc-space-max-md);margin-block-start:var(--rhc-space-max-sm)}\n  "
+                "\n    .actions{display:flex;align-items:center;gap:var(--rhc-space-max-md);margin-block-start:var(--rhc-space-max-sm)}\n  "
             ],
-            "template": "@if (aanvraag().status.tag === 'Concept') {\n  <app-alert type=\"warning\">\n    <h3 class=\"h5\">{{ typeLabel() }}</h3>\n    <p>{{ conceptText() }}</p>\n    <div class=\"actions\">\n      @if (actions().includes('cancel')) {\n        <app-button variant=\"subtle\" (click)=\"cancel.emit()\" i18n=\"@@aanvraagBlock.verwijderen\">Verwijderen</app-button>\n      }\n      @if (actions().includes('resume')) {\n        <app-button (click)=\"resume.emit()\" i18n=\"@@aanvraagBlock.openen\">Aanvraag openen</app-button>\n      }\n    </div>\n  </app-alert>\n} @else {\n  <app-choice-link [heading]=\"typeLabel()\" [instructions]=\"instructions()\" />\n}\n",
+            "template": "@if (aanvraag().status.tag === 'Concept') {\n  <app-alert type=\"warning\">\n    <h3 class=\"h5\">{{ typeLabel() }}</h3>\n    <p>{{ conceptText() }}</p>\n    <div class=\"actions\">\n      @if (actions().includes('cancel')) {\n        <app-button variant=\"subtle\" (click)=\"cancel.emit()\" i18n=\"@@aanvraagBlock.verwijderen\">Verwijderen</app-button>\n      }\n      @if (actions().includes('resume')) {\n        <app-button (click)=\"resume.emit()\" i18n=\"@@aanvraagBlock.openen\">Aanvraag openen</app-button>\n      }\n    </div>\n  </app-alert>\n}\n",
             "templateUrl": [],
             "viewProviders": [],
             "hostDirectives": [],
@@ -10983,7 +11030,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 48,
+                    "line": 37,
                     "required": true
                 }
             ],
@@ -10996,7 +11043,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 51,
+                    "line": 40,
                     "required": false
                 },
                 {
@@ -11007,7 +11054,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 50,
+                    "line": 39,
                     "required": false
                 }
             ],
@@ -11021,7 +11068,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 54,
+                    "line": 43,
                     "modifierKind": [
                         124
                     ]
@@ -11035,7 +11082,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>The melding body for a Concept: wizard not finished + complete-before date.</p>\n",
-                    "line": 65,
+                    "line": 54,
                     "rawdescription": "\nThe melding body for a Concept: wizard not finished + complete-before date.",
                     "modifierKind": [
                         124
@@ -11050,49 +11097,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 58,
-                    "modifierKind": [
-                        123
-                    ]
-                },
-                {
-                    "name": "instructions",
-                    "defaultValue": "computed(() => {\n    const status = this.statusText();\n    const sub = this.subtitle();\n    return sub ? `${status} ${sub}` : status;\n  })",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "type": "unknown",
-                    "indexKey": "",
-                    "optional": false,
-                    "description": "",
-                    "line": 89,
-                    "modifierKind": [
-                        124
-                    ]
-                },
-                {
-                    "name": "statusText",
-                    "defaultValue": "computed(() => {\n    const s = this.aanvraag().status;\n    switch (s.tag) {\n      case 'Concept': return '';\n      case 'InBehandeling': return $localize`:@@aanvraagBlock.inBehandeling:Referentie ${s.referentie}:ref: · ingediend op ${formatNL(this.aanvraag().submittedAt)}:datum:`;\n      case 'Goedgekeurd': return $localize`:@@aanvraagBlock.goedgekeurd:Referentie ${s.referentie}:ref:`;\n      case 'Afgewezen': return $localize`:@@aanvraagBlock.afgewezen:Referentie ${s.referentie}:ref:`;\n    }\n  })",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "type": "unknown",
-                    "indexKey": "",
-                    "optional": false,
-                    "description": "",
-                    "line": 72,
-                    "modifierKind": [
-                        123
-                    ]
-                },
-                {
-                    "name": "subtitle",
-                    "defaultValue": "computed(() => {\n    const s = this.aanvraag().status;\n    if (s.tag === 'InBehandeling' && s.manual) return $localize`:@@aanvraagBlock.manual:Uw aanvraag wordt handmatig beoordeeld in de backoffice.`;\n    if (s.tag === 'Afgewezen') return s.reden;\n    return '';\n  })",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "type": "unknown",
-                    "indexKey": "",
-                    "optional": false,
-                    "description": "",
-                    "line": 82,
+                    "line": 47,
                     "modifierKind": [
                         123
                     ]
@@ -11106,7 +11111,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 53,
+                    "line": 42,
                     "modifierKind": [
                         124
                     ]
@@ -11126,19 +11131,15 @@
                 {
                     "name": "AlertComponent",
                     "type": "component"
-                },
-                {
-                    "name": "ChoiceLinkComponent",
-                    "type": "component"
                 }
             ],
-            "description": "<p>Organism: one application on the dashboard. A resumable Concept (&quot;lopende\naanvraag&quot;) renders as a CIBG &quot;melding&quot; (warning) with its actions — verwijderen\nas a link, aanvraag openen as a button; a submitted/resolved status renders as a\nplain keuzelijst card. Which actions show is driven by the pure\n<code>blockActions(status)</code>; the block only renders. NOTE: the caller places the two\nshapes differently — a Concept melding is a block element, the rest are <code>&lt;li&gt;</code>s\nthat must sit inside a keuzelijst <code>&lt;ul&gt;</code> (see dashboard.page.ts).</p>\n",
-            "rawdescription": "\nOrganism: one application on the dashboard. A resumable Concept (\"lopende\naanvraag\") renders as a CIBG \"melding\" (warning) with its actions — verwijderen\nas a link, aanvraag openen as a button; a submitted/resolved status renders as a\nplain keuzelijst card. Which actions show is driven by the pure\n`blockActions(status)`; the block only renders. NOTE: the caller places the two\nshapes differently — a Concept melding is a block element, the rest are `<li>`s\nthat must sit inside a keuzelijst `<ul>` (see dashboard.page.ts).",
+            "description": "<p>Organism: a resumable Concept (&quot;lopende aanvraag&quot;) on the dashboard, rendered as\na CIBG &quot;melding&quot; (warning) with its actions — verwijderen as a link, aanvraag\nopenen as a button. Which actions show is driven by the pure <code>blockActions(status)</code>;\nthe block only renders. Submitted/resolved aanvragen are NOT rendered here — they\nrender as CIBG &quot;aanvragen&quot; rows (see application-link + aanvraag-view).</p>\n",
+            "rawdescription": "\nOrganism: a resumable Concept (\"lopende aanvraag\") on the dashboard, rendered as\na CIBG \"melding\" (warning) with its actions — verwijderen as a link, aanvraag\nopenen as a button. Which actions show is driven by the pure `blockActions(status)`;\nthe block only renders. Submitted/resolved aanvragen are NOT rendered here — they\nrender as CIBG \"aanvragen\" rows (see application-link + aanvraag-view).",
             "type": "component",
-            "sourceCode": "import { Component, computed, input, output } from '@angular/core';\nimport { ButtonComponent } from '@shared/ui/button/button.component';\nimport { AlertComponent } from '@shared/ui/alert/alert.component';\nimport { ChoiceLinkComponent } from '@shared/ui/choice-link/choice-link.component';\nimport { Aanvraag, AanvraagType } from '@registratie/domain/aanvraag';\nimport { blockActions } from '@registratie/domain/block-actions';\n\nconst TYPE_LABELS: Record<AanvraagType, string> = {\n  registratie: $localize`:@@aanvraagBlock.type.registratie:Inschrijving`,\n  herregistratie: $localize`:@@aanvraagBlock.type.herregistratie:Herregistratie`,\n  intake: $localize`:@@aanvraagBlock.type.intake:Herregistratie-intake`,\n};\n\n/** Organism: one application on the dashboard. A resumable Concept (\"lopende\n    aanvraag\") renders as a CIBG \"melding\" (warning) with its actions — verwijderen\n    as a link, aanvraag openen as a button; a submitted/resolved status renders as a\n    plain keuzelijst card. Which actions show is driven by the pure\n    `blockActions(status)`; the block only renders. NOTE: the caller places the two\n    shapes differently — a Concept melding is a block element, the rest are `<li>`s\n    that must sit inside a keuzelijst `<ul>` (see dashboard.page.ts). */\n@Component({\n  selector: 'app-aanvraag-block',\n  imports: [ButtonComponent, AlertComponent, ChoiceLinkComponent],\n  styles: [`\n    :host{display:contents} /* see choice-link.component.ts (keeps <li> a direct <ul> child) */\n    .actions{display:flex;align-items:center;gap:var(--rhc-space-max-md);margin-block-start:var(--rhc-space-max-sm)}\n  `],\n  template: `\n    @if (aanvraag().status.tag === 'Concept') {\n      <app-alert type=\"warning\">\n        <h3 class=\"h5\">{{ typeLabel() }}</h3>\n        <p>{{ conceptText() }}</p>\n        <div class=\"actions\">\n          @if (actions().includes('cancel')) {\n            <app-button variant=\"subtle\" (click)=\"cancel.emit()\" i18n=\"@@aanvraagBlock.verwijderen\">Verwijderen</app-button>\n          }\n          @if (actions().includes('resume')) {\n            <app-button (click)=\"resume.emit()\" i18n=\"@@aanvraagBlock.openen\">Aanvraag openen</app-button>\n          }\n        </div>\n      </app-alert>\n    } @else {\n      <app-choice-link [heading]=\"typeLabel()\" [instructions]=\"instructions()\" />\n    }\n  `,\n})\nexport class AanvraagBlockComponent {\n  aanvraag = input.required<Aanvraag>();\n\n  resume = output<void>();\n  cancel = output<void>();\n\n  protected typeLabel = computed(() => TYPE_LABELS[this.aanvraag().type]);\n  protected actions = computed(() => blockActions(this.aanvraag().status));\n\n  // ponytail: display-only deadline derived as createdAt + 30 dagen; move to a\n  // server-sent `completeBefore` on the DTO when the expiry rule becomes real.\n  private deadline = computed(() => {\n    const d = new Date(this.aanvraag().createdAt);\n    d.setDate(d.getDate() + 30);\n    return d.toISOString();\n  });\n\n  /** The melding body for a Concept: wizard not finished + complete-before date. */\n  protected conceptText = computed(() => {\n    const s = this.aanvraag().status;\n    if (s.tag !== 'Concept') return '';\n    return $localize`:@@aanvraagBlock.conceptMelding:Deze aanvraag is nog niet volledig afgerond — u bent gebleven bij stap ${s.stepIndex + 1}:stap: van ${s.stepCount}:totaal:. Rond de aanvraag af vóór ${formatNL(this.deadline())}:datum:.`;\n  });\n\n  // Status-tag → the choice's description line (the UI's mapping, not a domain rule).\n  private statusText = computed(() => {\n    const s = this.aanvraag().status;\n    switch (s.tag) {\n      case 'Concept': return '';\n      case 'InBehandeling': return $localize`:@@aanvraagBlock.inBehandeling:Referentie ${s.referentie}:ref: · ingediend op ${formatNL(this.aanvraag().submittedAt)}:datum:`;\n      case 'Goedgekeurd': return $localize`:@@aanvraagBlock.goedgekeurd:Referentie ${s.referentie}:ref:`;\n      case 'Afgewezen': return $localize`:@@aanvraagBlock.afgewezen:Referentie ${s.referentie}:ref:`;\n    }\n  });\n  // Secondary note appended to the status line, when there's one to show.\n  private subtitle = computed(() => {\n    const s = this.aanvraag().status;\n    if (s.tag === 'InBehandeling' && s.manual) return $localize`:@@aanvraagBlock.manual:Uw aanvraag wordt handmatig beoordeeld in de backoffice.`;\n    if (s.tag === 'Afgewezen') return s.reden;\n    return '';\n  });\n  // The keuzelijst has one description paragraph — combine status + secondary note.\n  protected instructions = computed(() => {\n    const status = this.statusText();\n    const sub = this.subtitle();\n    return sub ? `${status} ${sub}` : status;\n  });\n}\n\nfunction formatNL(iso?: string): string {\n  return iso ? new Date(iso).toLocaleDateString('nl-NL', { day: 'numeric', month: 'long', year: 'numeric' }) : '';\n}\n",
+            "sourceCode": "import { Component, computed, input, output } from '@angular/core';\nimport { ButtonComponent } from '@shared/ui/button/button.component';\nimport { AlertComponent } from '@shared/ui/alert/alert.component';\nimport { Aanvraag } from '@registratie/domain/aanvraag';\nimport { TYPE_LABELS } from '@registratie/domain/aanvraag-view';\nimport { blockActions } from '@registratie/domain/block-actions';\n\n/** Organism: a resumable Concept (\"lopende aanvraag\") on the dashboard, rendered as\n    a CIBG \"melding\" (warning) with its actions — verwijderen as a link, aanvraag\n    openen as a button. Which actions show is driven by the pure `blockActions(status)`;\n    the block only renders. Submitted/resolved aanvragen are NOT rendered here — they\n    render as CIBG \"aanvragen\" rows (see application-link + aanvraag-view). */\n@Component({\n  selector: 'app-aanvraag-block',\n  imports: [ButtonComponent, AlertComponent],\n  styles: [`\n    .actions{display:flex;align-items:center;gap:var(--rhc-space-max-md);margin-block-start:var(--rhc-space-max-sm)}\n  `],\n  template: `\n    @if (aanvraag().status.tag === 'Concept') {\n      <app-alert type=\"warning\">\n        <h3 class=\"h5\">{{ typeLabel() }}</h3>\n        <p>{{ conceptText() }}</p>\n        <div class=\"actions\">\n          @if (actions().includes('cancel')) {\n            <app-button variant=\"subtle\" (click)=\"cancel.emit()\" i18n=\"@@aanvraagBlock.verwijderen\">Verwijderen</app-button>\n          }\n          @if (actions().includes('resume')) {\n            <app-button (click)=\"resume.emit()\" i18n=\"@@aanvraagBlock.openen\">Aanvraag openen</app-button>\n          }\n        </div>\n      </app-alert>\n    }\n  `,\n})\nexport class AanvraagBlockComponent {\n  aanvraag = input.required<Aanvraag>();\n\n  resume = output<void>();\n  cancel = output<void>();\n\n  protected typeLabel = computed(() => TYPE_LABELS[this.aanvraag().type]);\n  protected actions = computed(() => blockActions(this.aanvraag().status));\n\n  // ponytail: display-only deadline derived as createdAt + 30 dagen; move to a\n  // server-sent `completeBefore` on the DTO when the expiry rule becomes real.\n  private deadline = computed(() => {\n    const d = new Date(this.aanvraag().createdAt);\n    d.setDate(d.getDate() + 30);\n    return d.toISOString();\n  });\n\n  /** The melding body for a Concept: wizard not finished + complete-before date. */\n  protected conceptText = computed(() => {\n    const s = this.aanvraag().status;\n    if (s.tag !== 'Concept') return '';\n    return $localize`:@@aanvraagBlock.conceptMelding:Deze aanvraag is nog niet volledig afgerond — u bent gebleven bij stap ${s.stepIndex + 1}:stap: van ${s.stepCount}:totaal:. Rond de aanvraag af vóór ${formatNL(this.deadline())}:datum:.`;\n  });\n}\n\nfunction formatNL(iso?: string): string {\n  return iso ? new Date(iso).toLocaleDateString('nl-NL', { day: 'numeric', month: 'long', year: 'numeric' }) : '';\n}\n",
             "assetsDirs": [],
             "styleUrlsData": "",
-            "stylesData": "\n    :host{display:contents} /* see choice-link.component.ts (keeps <li> a direct <ul> child) */\n    .actions{display:flex;align-items:center;gap:var(--rhc-space-max-md);margin-block-start:var(--rhc-space-max-sm)}\n  \n",
+            "stylesData": "\n    .actions{display:flex;align-items:center;gap:var(--rhc-space-max-md);margin-block-start:var(--rhc-space-max-sm)}\n  \n",
             "extends": []
         },
         {
@@ -11357,19 +11358,19 @@
         },
         {
             "name": "ApplicationLinkComponent",
-            "id": "component-ApplicationLinkComponent-1896ed15a3724a6287cec05699d7af988fa32000e53d11c4d315a06410c896ce752bf13dccd48f7735085bd6a728a0219e7f2f925252d36b55897efdc0f51e8b",
+            "id": "component-ApplicationLinkComponent-c57499bf961fda4eff57864fe98727d623286c76c355343f1b3f67340f75ddab926239bd78ee83f952f7a942191a239ada35e74aea36ebe27f5053de6548c11d",
             "file": "src/app/shared/ui/application-link/application-link.component.ts",
             "encapsulation": [],
             "entryComponents": [],
             "inputs": [],
             "outputs": [],
             "providers": [],
-            "selector": "app-application-link",
+            "selector": "li[app-application-link]",
             "styleUrls": [],
             "styles": [
-                ":host{display:contents}"
+                "\n    /* The vendored .applications li a surface only styles <a>; mirror it from tokens\n       for a non-navigating (informational) row so the card looks consistent. */\n    .static-row{display:flex;background:var(--rhc-color-wit);border-block-end:.065rem solid var(--rhc-color-border-subtle);padding:.75rem 2rem .75rem 1rem}\n    .content{flex:1 1 auto;min-inline-size:0}\n    .cta{margin-inline-start:auto;align-self:center}\n  "
             ],
-            "template": "<li>\n  @if (to()) {\n    <a class=\"application\" [routerLink]=\"to()\"><ng-container [ngTemplateOutlet]=\"body\" /></a>\n  } @else if (clickable()) {\n    <a href=\"#\" class=\"application\" (click)=\"onActivate($event)\"><ng-container [ngTemplateOutlet]=\"body\" /></a>\n  } @else {\n    <div><ng-container [ngTemplateOutlet]=\"body\" /></div>\n  }\n  <ng-content select=\"[applicationActions]\" />\n</li>\n<ng-template #body>\n  <h3 class=\"application-title\">{{ heading() }}</h3>\n  @if (subtitle()) { <div class=\"subtitle\">{{ subtitle() }}</div> }\n  @if (status()) { <div class=\"status\">{{ status() }}</div> }\n  @if (cta()) { <div class=\"cta\">{{ cta() }}</div> }\n</ng-template>\n",
+            "template": "@if (to()) {\n  <a [routerLink]=\"to()\"><ng-container [ngTemplateOutlet]=\"body\" /></a>\n} @else if (clickable()) {\n  <a href=\"#\" (click)=\"onActivate($event)\"><ng-container [ngTemplateOutlet]=\"body\" /></a>\n} @else {\n  <div class=\"static-row\"><ng-container [ngTemplateOutlet]=\"body\" /></div>\n}\n<ng-content select=\"[applicationActions]\" />\n<ng-template #body>\n  <div class=\"content\">\n    <h3 class=\"h3\">{{ heading() }}</h3>\n    @if (subtitle()) { <div class=\"subtitle\">{{ subtitle() }}</div> }\n    @if (status()) { <div class=\"status\">{{ status() }}</div> }\n  </div>\n  @if (cta()) { <div class=\"cta\">{{ cta() }}</div> }\n</ng-template>\n",
             "templateUrl": [],
             "viewProviders": [],
             "hostDirectives": [],
@@ -11382,7 +11383,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Set when the row navigates imperatively (e.g. resume with query params) — the\nrow still renders as a clickable <code>&lt;a&gt;</code>, but <code>activate</code> decides what happens.</p>\n",
-                    "line": 45,
+                    "line": 52,
                     "rawdescription": "\nSet when the row navigates imperatively (e.g. resume with query params) — the\nrow still renders as a clickable `<a>`, but `activate` decides what happens.",
                     "required": false
                 },
@@ -11394,7 +11395,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 40,
+                    "line": 47,
                     "required": false
                 },
                 {
@@ -11405,7 +11406,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 37,
+                    "line": 44,
                     "required": true
                 },
                 {
@@ -11416,7 +11417,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 39,
+                    "line": 46,
                     "required": false
                 },
                 {
@@ -11427,7 +11428,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 38,
+                    "line": 45,
                     "required": false
                 },
                 {
@@ -11438,7 +11439,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Set for a plain routerLink navigation (e.g. the &quot;Wat wilt u doen?&quot; actions).</p>\n",
-                    "line": 42,
+                    "line": 49,
                     "rawdescription": "\nSet for a plain routerLink navigation (e.g. the \"Wat wilt u doen?\" actions).",
                     "required": false
                 }
@@ -11452,7 +11453,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 46,
+                    "line": 53,
                     "required": false
                 }
             ],
@@ -11473,7 +11474,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 48,
+                    "line": 55,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "modifierKind": [
@@ -11507,13 +11508,13 @@
                     "name": "NgTemplateOutlet"
                 }
             ],
-            "description": "<p>Molecule: one row in a CIBG Huisstijl &quot;aanvragen&quot; list — <code>&lt;li&gt;&lt;a class=&quot;application&quot;&gt;</code>\nwith a title, optional subtitle/status/cta (see application-list.component.ts).\nRenders a plain (non-interactive) row when there&#39;s nothing to navigate to — the\nchevron/hover styling only applies to the <code>&lt;a&gt;</code>. A <code>[applicationActions]</code> slot\nprojects a sibling action (e.g. &quot;Annuleren&quot;) after the anchor — a button can&#39;t\nnest inside the anchor itself.</p>\n",
-            "rawdescription": "\nMolecule: one row in a CIBG Huisstijl \"aanvragen\" list — `<li><a class=\"application\">`\nwith a title, optional subtitle/status/cta (see application-list.component.ts).\nRenders a plain (non-interactive) row when there's nothing to navigate to — the\nchevron/hover styling only applies to the `<a>`. A `[applicationActions]` slot\nprojects a sibling action (e.g. \"Annuleren\") after the anchor — a button can't\nnest inside the anchor itself.",
+            "description": "<p>Molecule: one row in a CIBG Huisstijl &quot;aanvragen&quot; list\n(designsystem.cibg.nl/componenten/aanvragen) — a white card-link styled by the\nvendored <code>.dashboard-block.applications li a</code> chain (bg, chevron, link-blue <code>h3</code>),\nwith an optional <code>.subtitle</code>/<code>.status</code>/<code>.cta</code>. Used on an <code>&lt;li&gt;</code> so the <code>&lt;ul&gt;</code>&#39;s\ndirect child is a native <code>&lt;li&gt;</code> (keeps the list axe-clean — a bare custom element\nbetween <code>&lt;ul&gt;</code> and its <code>&lt;li&gt;</code> trips axe&#39;s list rule regardless of <code>display:contents</code>).\nA non-navigating row renders a <code>&lt;div&gt;</code> (the vendored chain only styles <code>&lt;a&gt;</code>, so\nthat surface is mirrored from tokens). A <code>[applicationActions]</code> slot projects a\nsibling action after the anchor — a button can&#39;t nest inside the anchor itself.</p>\n",
+            "rawdescription": "\nMolecule: one row in a CIBG Huisstijl \"aanvragen\" list\n(designsystem.cibg.nl/componenten/aanvragen) — a white card-link styled by the\nvendored `.dashboard-block.applications li a` chain (bg, chevron, link-blue `h3`),\nwith an optional `.subtitle`/`.status`/`.cta`. Used on an `<li>` so the `<ul>`'s\ndirect child is a native `<li>` (keeps the list axe-clean — a bare custom element\nbetween `<ul>` and its `<li>` trips axe's list rule regardless of `display:contents`).\nA non-navigating row renders a `<div>` (the vendored chain only styles `<a>`, so\nthat surface is mirrored from tokens). A `[applicationActions]` slot projects a\nsibling action after the anchor — a button can't nest inside the anchor itself.",
             "type": "component",
-            "sourceCode": "import { Component, input, output } from '@angular/core';\nimport { NgTemplateOutlet } from '@angular/common';\nimport { RouterLink } from '@angular/router';\n\n/** Molecule: one row in a CIBG Huisstijl \"aanvragen\" list — `<li><a class=\"application\">`\n    with a title, optional subtitle/status/cta (see application-list.component.ts).\n    Renders a plain (non-interactive) row when there's nothing to navigate to — the\n    chevron/hover styling only applies to the `<a>`. A `[applicationActions]` slot\n    projects a sibling action (e.g. \"Annuleren\") after the anchor — a button can't\n    nest inside the anchor itself. */\n@Component({\n  selector: 'app-application-link',\n  imports: [RouterLink, NgTemplateOutlet],\n  // display:contents so the <li> becomes a real DOM/accessibility-tree child of the\n  // parent <ul> — a wrapper host between them can break list semantics for AT.\n  styles: [`:host{display:contents}`],\n  template: `\n    <li>\n      @if (to()) {\n        <a class=\"application\" [routerLink]=\"to()\"><ng-container [ngTemplateOutlet]=\"body\" /></a>\n      } @else if (clickable()) {\n        <a href=\"#\" class=\"application\" (click)=\"onActivate($event)\"><ng-container [ngTemplateOutlet]=\"body\" /></a>\n      } @else {\n        <div><ng-container [ngTemplateOutlet]=\"body\" /></div>\n      }\n      <ng-content select=\"[applicationActions]\" />\n    </li>\n    <ng-template #body>\n      <h3 class=\"application-title\">{{ heading() }}</h3>\n      @if (subtitle()) { <div class=\"subtitle\">{{ subtitle() }}</div> }\n      @if (status()) { <div class=\"status\">{{ status() }}</div> }\n      @if (cta()) { <div class=\"cta\">{{ cta() }}</div> }\n    </ng-template>\n  `,\n})\nexport class ApplicationLinkComponent {\n  heading = input.required<string>();\n  subtitle = input('');\n  status = input('');\n  cta = input('');\n  /** Set for a plain routerLink navigation (e.g. the \"Wat wilt u doen?\" actions). */\n  to = input('');\n  /** Set when the row navigates imperatively (e.g. resume with query params) — the\n      row still renders as a clickable `<a>`, but `activate` decides what happens. */\n  clickable = input(false);\n  activate = output<void>();\n\n  protected onActivate(ev: Event) {\n    ev.preventDefault(); // fragment href resolves against <base href>, not the route\n    this.activate.emit();\n  }\n}\n",
+            "sourceCode": "import { Component, input, output } from '@angular/core';\nimport { NgTemplateOutlet } from '@angular/common';\nimport { RouterLink } from '@angular/router';\n\n/** Molecule: one row in a CIBG Huisstijl \"aanvragen\" list\n    (designsystem.cibg.nl/componenten/aanvragen) — a white card-link styled by the\n    vendored `.dashboard-block.applications li a` chain (bg, chevron, link-blue `h3`),\n    with an optional `.subtitle`/`.status`/`.cta`. Used on an `<li>` so the `<ul>`'s\n    direct child is a native `<li>` (keeps the list axe-clean — a bare custom element\n    between `<ul>` and its `<li>` trips axe's list rule regardless of `display:contents`).\n    A non-navigating row renders a `<div>` (the vendored chain only styles `<a>`, so\n    that surface is mirrored from tokens). A `[applicationActions]` slot projects a\n    sibling action after the anchor — a button can't nest inside the anchor itself. */\n@Component({\n  selector: 'li[app-application-link]',\n  imports: [RouterLink, NgTemplateOutlet],\n  styles: [`\n    /* The vendored .applications li a surface only styles <a>; mirror it from tokens\n       for a non-navigating (informational) row so the card looks consistent. */\n    .static-row{display:flex;background:var(--rhc-color-wit);border-block-end:.065rem solid var(--rhc-color-border-subtle);padding:.75rem 2rem .75rem 1rem}\n    .content{flex:1 1 auto;min-inline-size:0}\n    .cta{margin-inline-start:auto;align-self:center}\n  `],\n  template: `\n    @if (to()) {\n      <a [routerLink]=\"to()\"><ng-container [ngTemplateOutlet]=\"body\" /></a>\n    } @else if (clickable()) {\n      <a href=\"#\" (click)=\"onActivate($event)\"><ng-container [ngTemplateOutlet]=\"body\" /></a>\n    } @else {\n      <div class=\"static-row\"><ng-container [ngTemplateOutlet]=\"body\" /></div>\n    }\n    <ng-content select=\"[applicationActions]\" />\n    <ng-template #body>\n      <div class=\"content\">\n        <h3 class=\"h3\">{{ heading() }}</h3>\n        @if (subtitle()) { <div class=\"subtitle\">{{ subtitle() }}</div> }\n        @if (status()) { <div class=\"status\">{{ status() }}</div> }\n      </div>\n      @if (cta()) { <div class=\"cta\">{{ cta() }}</div> }\n    </ng-template>\n  `,\n})\nexport class ApplicationLinkComponent {\n  heading = input.required<string>();\n  subtitle = input('');\n  status = input('');\n  cta = input('');\n  /** Set for a plain routerLink navigation (e.g. the \"Wat wilt u doen?\" actions). */\n  to = input('');\n  /** Set when the row navigates imperatively (e.g. resume with query params) — the\n      row still renders as a clickable `<a>`, but `activate` decides what happens. */\n  clickable = input(false);\n  activate = output<void>();\n\n  protected onActivate(ev: Event) {\n    ev.preventDefault(); // fragment href resolves against <base href>, not the route\n    this.activate.emit();\n  }\n}\n",
             "assetsDirs": [],
             "styleUrlsData": "",
-            "stylesData": ":host{display:contents}\n",
+            "stylesData": "\n    /* The vendored .applications li a surface only styles <a>; mirror it from tokens\n       for a non-navigating (informational) row so the card looks consistent. */\n    .static-row{display:flex;background:var(--rhc-color-wit);border-block-end:.065rem solid var(--rhc-color-border-subtle);padding:.75rem 2rem .75rem 1rem}\n    .content{flex:1 1 auto;min-inline-size:0}\n    .cta{margin-inline-start:auto;align-self:center}\n  \n",
             "extends": []
         },
         {
@@ -13257,7 +13258,7 @@
         },
         {
             "name": "DashboardPage",
-            "id": "component-DashboardPage-bbba994d5f2f5f15769970d79a345aa04ec549c71f1af80fa5ee9572e0831ae7090aa78fb23cb2bf1392d80aaff4b0e2e0775c4952628c19ed887d0536692ebe",
+            "id": "component-DashboardPage-9c0ed7dc5db9c7e1224bc86145c299e016a08204e46b6c7ccb393320f3c0fde4d84ed075b3bff5b7a365cf3713c0d5545e4f91fa8ec119094ff53259216e71de",
             "file": "src/app/registratie/ui/dashboard.page.ts",
             "encapsulation": [],
             "entryComponents": [],
@@ -13267,7 +13268,7 @@
             "selector": "app-dashboard-page",
             "styleUrls": [],
             "styles": [],
-            "template": "<app-page-shell i18n-heading=\"@@dashboard.heading\" heading=\"Mijn overzicht\" i18n-intro=\"@@dashboard.intro\" intro=\"Welkom in uw persoonlijke omgeving van het BIG-register. Hier ziet u uw registratie en regelt u uw zaken.\">\n    <div class=\"app-stack\">\n      @if (aanvragen().length) {\n        <section>\n          @for (a of concepten(); track a.id) {\n            <app-aanvraag-block animate.enter=\"app-item-enter\" animate.leave=\"app-item-leave\" [aanvraag]=\"a\" (resume)=\"resume(a)\" (cancel)=\"cancelAanvraag(a)\" />\n          }\n          @if (ingediend().length) {\n            <app-choice-list i18n-heading=\"@@dashboard.mijnAanvragen\" heading=\"Mijn aanvragen\" class=\"app-section\">\n              @for (a of ingediend(); track a.id) {\n                <app-aanvraag-block animate.enter=\"app-item-enter\" animate.leave=\"app-item-leave\" [aanvraag]=\"a\" />\n              }\n            </app-choice-list>\n          }\n        </section>\n      }\n\n      @if (store.pendingHerregistratie()) {\n        <app-alert type=\"info\" i18n=\"@@dashboard.pendingHerregistratie\">Uw herregistratie-aanvraag is in behandeling.</app-alert>\n      }\n\n      <app-async [data]=\"store.profile()\">\n        <ng-template appAsyncLoaded let-p>\n          @let tasks = tasksFor($any(p).registration);\n\n          <section>\n            @if (tasks.length) {\n              <app-task-list class=\"app-section\" i18n-listHeading=\"@@dashboard.watMoetIkRegelen\" listHeading=\"Wat moet ik regelen\" [tasks]=\"tasks\" />\n            } @else {\n              <app-heading [level]=\"2\" i18n=\"@@dashboard.watMoetIkRegelen\">Wat moet ik regelen</app-heading>\n              <p class=\"app-text-subtle\" i18n=\"@@dashboard.nietsOpenstaan\">U heeft op dit moment niets openstaan.</p>\n            }\n          </section>\n\n          <section>\n            <app-heading [level]=\"2\" i18n=\"@@dashboard.mijnRegistratie\">Mijn registratie</app-heading>\n            <div class=\"app-section\">\n              <app-registration-summary [reg]=\"$any(p).registration\" />\n            </div>\n            <app-data-block class=\"app-section\" i18n-heading=\"@@dashboard.persoonsgegevens\" heading=\"Persoonsgegevens (BRP)\">\n              <div app-data-row i18n-key=\"@@dashboard.straat\" key=\"Straat\" [value]=\"$any(p).person.adres.straat\"></div>\n              <div app-data-row i18n-key=\"@@dashboard.postcode\" key=\"Postcode\" [value]=\"$any(p).person.adres.postcode\"></div>\n              <div app-data-row i18n-key=\"@@dashboard.woonplaats\" key=\"Woonplaats\" [value]=\"$any(p).person.adres.woonplaats\"></div>\n            </app-data-block>\n          </section>\n        </ng-template>\n        <ng-template appAsyncLoading>\n          <app-skeleton height=\"2.5rem\" [count]=\"6\" />\n        </ng-template>\n      </app-async>\n\n      <section>\n        <app-heading [level]=\"2\" i18n=\"@@dashboard.specialismen\">Specialismen en aantekeningen</app-heading>\n        <div class=\"app-section\">\n          <app-async [data]=\"store.aantekeningen()\">\n            <ng-template appAsyncLoaded let-r>\n              <app-registration-table [rows]=\"$any(r)\" />\n            </ng-template>\n            <ng-template appAsyncLoading>\n              <app-skeleton height=\"2.5rem\" [count]=\"3\" />\n            </ng-template>\n            <ng-template appAsyncEmpty>\n              <p class=\"app-text-subtle\" i18n=\"@@dashboard.geenSpecialismen\">U heeft nog geen specialismen of aantekeningen.</p>\n            </ng-template>\n          </app-async>\n        </div>\n      </section>\n\n      <section>\n        <app-heading [level]=\"2\" i18n=\"@@dashboard.watWiltUDoen\">Wat wilt u doen?</app-heading>\n        <app-application-list class=\"app-section\">\n          @for (a of acties; track a.to) {\n            <app-application-link [heading]=\"a.titel\" [subtitle]=\"a.tekst\" [cta]=\"a.actie\" [to]=\"a.to\" />\n          }\n        </app-application-list>\n      </section>\n    </div>\n</app-page-shell>\n",
+            "template": "<app-page-shell i18n-heading=\"@@dashboard.heading\" heading=\"Mijn overzicht\" i18n-intro=\"@@dashboard.intro\" intro=\"Welkom in uw persoonlijke omgeving van het BIG-register. Hier ziet u uw registratie en regelt u uw zaken.\">\n    <div class=\"app-stack\">\n      @if (aanvragen().length) {\n        <section>\n          @for (a of concepten(); track a.id) {\n            <app-aanvraag-block animate.enter=\"app-item-enter\" animate.leave=\"app-item-leave\" [aanvraag]=\"a\" (resume)=\"resume(a)\" (cancel)=\"cancelAanvraag(a)\" />\n          }\n          @if (ingediend().length) {\n            <app-heading [level]=\"2\" class=\"app-section\" i18n=\"@@dashboard.mijnAanvragen\">Mijn aanvragen</app-heading>\n            <app-application-list>\n              @for (a of ingediend(); track a.id) {\n                @let row = submittedRow(a);\n                <li app-application-link animate.enter=\"app-item-enter\" animate.leave=\"app-item-leave\" [heading]=\"row.heading\" [status]=\"row.status\" [subtitle]=\"row.subtitle\"></li>\n              }\n            </app-application-list>\n          }\n        </section>\n      }\n\n      @if (store.pendingHerregistratie()) {\n        <app-alert type=\"info\" i18n=\"@@dashboard.pendingHerregistratie\">Uw herregistratie-aanvraag is in behandeling.</app-alert>\n      }\n\n      <app-async [data]=\"store.profile()\">\n        <ng-template appAsyncLoaded let-p>\n          @let tasks = tasksFor($any(p).registration);\n\n          <section>\n            @if (tasks.length) {\n              <app-task-list class=\"app-section\" i18n-listHeading=\"@@dashboard.watMoetIkRegelen\" listHeading=\"Wat moet ik regelen\" [tasks]=\"tasks\" />\n            } @else {\n              <app-heading [level]=\"2\" i18n=\"@@dashboard.watMoetIkRegelen\">Wat moet ik regelen</app-heading>\n              <p class=\"app-text-subtle\" i18n=\"@@dashboard.nietsOpenstaan\">U heeft op dit moment niets openstaan.</p>\n            }\n          </section>\n\n          <section>\n            <app-heading [level]=\"2\" i18n=\"@@dashboard.mijnRegistratie\">Mijn registratie</app-heading>\n            <div class=\"app-section\">\n              <app-registration-summary [reg]=\"$any(p).registration\" />\n            </div>\n            <app-data-block class=\"app-section\" i18n-heading=\"@@dashboard.persoonsgegevens\" heading=\"Persoonsgegevens (BRP)\">\n              <div app-data-row i18n-key=\"@@dashboard.straat\" key=\"Straat\" [value]=\"$any(p).person.adres.straat\"></div>\n              <div app-data-row i18n-key=\"@@dashboard.postcode\" key=\"Postcode\" [value]=\"$any(p).person.adres.postcode\"></div>\n              <div app-data-row i18n-key=\"@@dashboard.woonplaats\" key=\"Woonplaats\" [value]=\"$any(p).person.adres.woonplaats\"></div>\n            </app-data-block>\n          </section>\n        </ng-template>\n        <ng-template appAsyncLoading>\n          <app-skeleton height=\"2.5rem\" [count]=\"6\" />\n        </ng-template>\n      </app-async>\n\n      <section>\n        <app-heading [level]=\"2\" i18n=\"@@dashboard.specialismen\">Specialismen en aantekeningen</app-heading>\n        <div class=\"app-section\">\n          <app-async [data]=\"store.aantekeningen()\">\n            <ng-template appAsyncLoaded let-r>\n              <app-registration-table [rows]=\"$any(r)\" />\n            </ng-template>\n            <ng-template appAsyncLoading>\n              <app-skeleton height=\"2.5rem\" [count]=\"3\" />\n            </ng-template>\n            <ng-template appAsyncEmpty>\n              <p class=\"app-text-subtle\" i18n=\"@@dashboard.geenSpecialismen\">U heeft nog geen specialismen of aantekeningen.</p>\n            </ng-template>\n          </app-async>\n        </div>\n      </section>\n\n      <section>\n        <app-heading [level]=\"2\" i18n=\"@@dashboard.watWiltUDoen\">Wat wilt u doen?</app-heading>\n        <app-application-list class=\"app-section\">\n          @for (a of acties; track a.to) {\n            <li app-application-link [heading]=\"a.titel\" [subtitle]=\"a.tekst\" [cta]=\"a.actie\" [to]=\"a.to\"></li>\n          }\n        </app-application-list>\n      </section>\n    </div>\n</app-page-shell>\n",
             "templateUrl": [],
             "viewProviders": [],
             "hostDirectives": [],
@@ -13283,7 +13284,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>The user&#39;s applications, sorted Concept → In behandeling → resolved. Empty →\nthe&quot;Mijn aanvragen&quot; section is hidden (see template).</p>\n",
-                    "line": 127,
+                    "line": 132,
                     "rawdescription": "\nThe user's applications, sorted Concept → In behandeling → resolved. Empty →\nthe\"Mijn aanvragen\" section is hidden (see template).",
                     "modifierKind": [
                         124
@@ -13298,7 +13299,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Primary transactional actions, as an &quot;aanvragen&quot; list (see CIBG&#39;s\ncomponenten/aanvragen). The core portal sections live in the header nav now;\nthe teaching pages (concepts/brief) are only reachable from here.</p>\n",
-                    "line": 163,
+                    "line": 168,
                     "rawdescription": "\nPrimary transactional actions, as an \"aanvragen\" list (see CIBG's\ncomponenten/aanvragen). The core portal sections live in the header nav now;\nthe teaching pages (concepts/brief) are only reachable from here.",
                     "modifierKind": [
                         124,
@@ -13314,7 +13315,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 116,
+                    "line": 118,
                     "modifierKind": [
                         123
                     ]
@@ -13328,7 +13329,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>A Concept (&quot;lopende aanvraag&quot;) renders as a melding above the list; the rest\nas keuzelijst items — the two shapes need different HTML contexts.</p>\n",
-                    "line": 135,
+                    "line": 140,
                     "rawdescription": "\nA Concept (\"lopende aanvraag\") renders as a melding above the list; the rest\nas keuzelijst items — the two shapes need different HTML contexts.",
                     "modifierKind": [
                         124
@@ -13343,7 +13344,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "<p>Server-computed eligibility (rendered, not recomputed).</p>\n",
-                    "line": 151,
+                    "line": 156,
                     "rawdescription": "\nServer-computed eligibility (rendered, not recomputed).",
                     "modifierKind": [
                         123,
@@ -13359,7 +13360,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 136,
+                    "line": 141,
                     "modifierKind": [
                         124
                     ]
@@ -13373,7 +13374,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 138,
+                    "line": 143,
                     "modifierKind": [
                         123,
                         148
@@ -13388,7 +13389,7 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 117,
+                    "line": 119,
                     "modifierKind": [
                         123
                     ]
@@ -13402,7 +13403,22 @@
                     "indexKey": "",
                     "optional": false,
                     "description": "",
-                    "line": 115,
+                    "line": 117,
+                    "modifierKind": [
+                        124
+                    ]
+                },
+                {
+                    "name": "submittedRow",
+                    "defaultValue": "submittedRow",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "unknown",
+                    "indexKey": "",
+                    "optional": false,
+                    "description": "<p>Pure view mapping for a submitted aanvraag → CIBG aanvragen-row fields.</p>\n",
+                    "line": 122,
+                    "rawdescription": "\nPure view mapping for a submitted aanvraag → CIBG aanvragen-row fields.",
                     "modifierKind": [
                         124
                     ]
@@ -13424,7 +13440,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 146,
+                    "line": 151,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "modifierKind": [
@@ -13459,7 +13475,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 143,
+                    "line": 148,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "modifierKind": [
@@ -13494,7 +13510,7 @@
                     "optional": false,
                     "returnType": "any",
                     "typeParameters": [],
-                    "line": 156,
+                    "line": 161,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "modifierKind": [
@@ -13557,10 +13573,6 @@
                     "name": "ApplicationLinkComponent",
                     "type": "component"
                 },
-                {
-                    "name": "ChoiceListComponent",
-                    "type": "component"
-                },
                 {
                     "name": "ASYNC"
                 },
@@ -13580,7 +13592,7 @@
             "description": "<p>Page:&quot;Mijn overzicht&quot; — the portal home, following the NL Design System\n&quot;Mijn omgeving&quot; pattern (side nav +&quot;Wat moet ik regelen&quot; +&quot;Mijn zaken&quot;).</p>\n",
             "rawdescription": "\nPage:\"Mijn overzicht\" — the portal home, following the NL Design System\n\"Mijn omgeving\" pattern (side nav +\"Wat moet ik regelen\" +\"Mijn zaken\").",
             "type": "component",
-            "sourceCode": "import { Component, computed, inject } from '@angular/core';\nimport { Router } from '@angular/router';\nimport { PageShellComponent } from '@shared/layout/page-shell/page-shell.component';\nimport { HeadingComponent } from '@shared/ui/heading/heading.component';\nimport { AlertComponent } from '@shared/ui/alert/alert.component';\nimport { SkeletonComponent } from '@shared/ui/skeleton/skeleton.component';\nimport { DataRowComponent } from '@shared/ui/data-row/data-row.component';\nimport { DataBlockComponent } from '@shared/ui/data-block/data-block.component';\nimport { TaskListComponent } from '@shared/ui/task-list/task-list.component';\nimport { ApplicationListComponent } from '@shared/ui/application-list/application-list.component';\nimport { ApplicationLinkComponent } from '@shared/ui/application-link/application-link.component';\nimport { ChoiceListComponent } from '@shared/ui/choice-list/choice-list.component';\nimport { ASYNC } from '@shared/ui/async/async.component';\nimport { RegistrationSummaryComponent } from '@registratie/ui/registration-summary/registration-summary.component';\nimport { RegistrationTableComponent } from '@registratie/ui/registration-table/registration-table.component';\nimport { AanvraagBlockComponent } from '@registratie/ui/aanvraag-block/aanvraag-block.component';\nimport { BigProfileStore } from '@registratie/application/big-profile.store';\nimport { ApplicationsStore } from '@registratie/application/applications.store';\nimport { Registration } from '@registratie/domain/registration';\nimport { Aanvraag, AanvraagType } from '@registratie/domain/aanvraag';\nimport { tasksFromProfile } from '@registratie/domain/tasks';\n\n/** Page:\"Mijn overzicht\" — the portal home, following the NL Design System\n\"Mijn omgeving\" pattern (side nav +\"Wat moet ik regelen\" +\"Mijn zaken\"). */\n@Component({\n  selector: 'app-dashboard-page',\n  imports: [\n    PageShellComponent, HeadingComponent, AlertComponent, SkeletonComponent,\n    DataRowComponent, DataBlockComponent, TaskListComponent, ApplicationListComponent, ApplicationLinkComponent,\n    ChoiceListComponent, ...ASYNC,\n    RegistrationSummaryComponent, RegistrationTableComponent, AanvraagBlockComponent,\n  ],\n  template: `\n    <app-page-shell i18n-heading=\"@@dashboard.heading\" heading=\"Mijn overzicht\" i18n-intro=\"@@dashboard.intro\" intro=\"Welkom in uw persoonlijke omgeving van het BIG-register. Hier ziet u uw registratie en regelt u uw zaken.\">\n        <div class=\"app-stack\">\n          @if (aanvragen().length) {\n            <section>\n              @for (a of concepten(); track a.id) {\n                <app-aanvraag-block animate.enter=\"app-item-enter\" animate.leave=\"app-item-leave\" [aanvraag]=\"a\" (resume)=\"resume(a)\" (cancel)=\"cancelAanvraag(a)\" />\n              }\n              @if (ingediend().length) {\n                <app-choice-list i18n-heading=\"@@dashboard.mijnAanvragen\" heading=\"Mijn aanvragen\" class=\"app-section\">\n                  @for (a of ingediend(); track a.id) {\n                    <app-aanvraag-block animate.enter=\"app-item-enter\" animate.leave=\"app-item-leave\" [aanvraag]=\"a\" />\n                  }\n                </app-choice-list>\n              }\n            </section>\n          }\n\n          @if (store.pendingHerregistratie()) {\n            <app-alert type=\"info\" i18n=\"@@dashboard.pendingHerregistratie\">Uw herregistratie-aanvraag is in behandeling.</app-alert>\n          }\n\n          <app-async [data]=\"store.profile()\">\n            <ng-template appAsyncLoaded let-p>\n              @let tasks = tasksFor($any(p).registration);\n\n              <section>\n                @if (tasks.length) {\n                  <app-task-list class=\"app-section\" i18n-listHeading=\"@@dashboard.watMoetIkRegelen\" listHeading=\"Wat moet ik regelen\" [tasks]=\"tasks\" />\n                } @else {\n                  <app-heading [level]=\"2\" i18n=\"@@dashboard.watMoetIkRegelen\">Wat moet ik regelen</app-heading>\n                  <p class=\"app-text-subtle\" i18n=\"@@dashboard.nietsOpenstaan\">U heeft op dit moment niets openstaan.</p>\n                }\n              </section>\n\n              <section>\n                <app-heading [level]=\"2\" i18n=\"@@dashboard.mijnRegistratie\">Mijn registratie</app-heading>\n                <div class=\"app-section\">\n                  <app-registration-summary [reg]=\"$any(p).registration\" />\n                </div>\n                <app-data-block class=\"app-section\" i18n-heading=\"@@dashboard.persoonsgegevens\" heading=\"Persoonsgegevens (BRP)\">\n                  <div app-data-row i18n-key=\"@@dashboard.straat\" key=\"Straat\" [value]=\"$any(p).person.adres.straat\"></div>\n                  <div app-data-row i18n-key=\"@@dashboard.postcode\" key=\"Postcode\" [value]=\"$any(p).person.adres.postcode\"></div>\n                  <div app-data-row i18n-key=\"@@dashboard.woonplaats\" key=\"Woonplaats\" [value]=\"$any(p).person.adres.woonplaats\"></div>\n                </app-data-block>\n              </section>\n            </ng-template>\n            <ng-template appAsyncLoading>\n              <app-skeleton height=\"2.5rem\" [count]=\"6\" />\n            </ng-template>\n          </app-async>\n\n          <section>\n            <app-heading [level]=\"2\" i18n=\"@@dashboard.specialismen\">Specialismen en aantekeningen</app-heading>\n            <div class=\"app-section\">\n              <app-async [data]=\"store.aantekeningen()\">\n                <ng-template appAsyncLoaded let-r>\n                  <app-registration-table [rows]=\"$any(r)\" />\n                </ng-template>\n                <ng-template appAsyncLoading>\n                  <app-skeleton height=\"2.5rem\" [count]=\"3\" />\n                </ng-template>\n                <ng-template appAsyncEmpty>\n                  <p class=\"app-text-subtle\" i18n=\"@@dashboard.geenSpecialismen\">U heeft nog geen specialismen of aantekeningen.</p>\n                </ng-template>\n              </app-async>\n            </div>\n          </section>\n\n          <section>\n            <app-heading [level]=\"2\" i18n=\"@@dashboard.watWiltUDoen\">Wat wilt u doen?</app-heading>\n            <app-application-list class=\"app-section\">\n              @for (a of acties; track a.to) {\n                <app-application-link [heading]=\"a.titel\" [subtitle]=\"a.tekst\" [cta]=\"a.actie\" [to]=\"a.to\" />\n              }\n            </app-application-list>\n          </section>\n        </div>\n    </app-page-shell>\n  `,\n})\nexport class DashboardPage {\n  protected store = inject(BigProfileStore);\n  private apps = inject(ApplicationsStore);\n  private router = inject(Router);\n\n  constructor() {\n    // Re-fetch on each visit so server-computed auto-approval transitions show up\n    // (Concept → In behandeling → Goedgekeurd after the processing window).\n    this.apps.reload();\n  }\n\n  /** The user's applications, sorted Concept → In behandeling → resolved. Empty →\n      the\"Mijn aanvragen\" section is hidden (see template). */\n  protected aanvragen = computed<Aanvraag[]>(() => {\n    const rd = this.apps.applications();\n    if (rd.tag !== 'Success') return [];\n    const order: Record<Aanvraag['status']['tag'], number> = { Concept: 0, InBehandeling: 1, Goedgekeurd: 2, Afgewezen: 2 };\n    return rd.value.slice().sort((a, b) => order[a.status.tag] - order[b.status.tag]);\n  });\n  /** A Concept (\"lopende aanvraag\") renders as a melding above the list; the rest\n      as keuzelijst items — the two shapes need different HTML contexts. */\n  protected concepten = computed(() => this.aanvragen().filter((a) => a.status.tag === 'Concept'));\n  protected ingediend = computed(() => this.aanvragen().filter((a) => a.status.tag !== 'Concept'));\n\n  private readonly resumeRoutes: Record<AanvraagType, string> = {\n    registratie: '/registreren',\n    herregistratie: '/herregistratie',\n    intake: '/intake',\n  };\n  protected resume(a: Aanvraag) {\n    void this.router.navigate([this.resumeRoutes[a.type]], { queryParams: { aanvraag: a.id } });\n  }\n  protected cancelAanvraag(a: Aanvraag) {\n    void this.apps.cancel(a.id);\n  }\n\n  /** Server-computed eligibility (rendered, not recomputed). */\n  private readonly eligible = computed(() => {\n    const d = this.store.decisions();\n    return d.tag === 'Success' && d.value.eligibleForHerregistratie;\n  });\n\n  protected tasksFor(reg: Registration) {\n    return tasksFromProfile(reg, this.eligible());\n  }\n\n  /** Primary transactional actions, as an \"aanvragen\" list (see CIBG's\n      componenten/aanvragen). The core portal sections live in the header nav now;\n      the teaching pages (concepts/brief) are only reachable from here. */\n  protected readonly acties = [\n    { to: '/registreren', titel: $localize`:@@dashboard.actie.inschrijven.titel:Inschrijven`, tekst: $localize`:@@dashboard.actie.inschrijven.tekst:Schrijf u in in het BIG-register via de registratiewizard.`, actie: $localize`:@@dashboard.actie.inschrijven.actie:Start inschrijving` },\n    { to: '/herregistratie', titel: $localize`:@@dashboard.actie.herregistratie.titel:Herregistratie aanvragen`, tekst: $localize`:@@dashboard.actie.herregistratie.tekst:Verleng uw registratie voor de komende periode.`, actie: $localize`:@@dashboard.actie.herregistratie.actie:Vraag aan` },\n    { to: '/intake', titel: $localize`:@@dashboard.actie.intake.titel:Herregistratie-intake`, tekst: $localize`:@@dashboard.actie.intake.tekst:Vragenlijst met vertakkingen.`, actie: $localize`:@@dashboard.actie.intake.actie:Start intake` },\n    { to: '/registratie', titel: $localize`:@@dashboard.actie.wijzigen.titel:Gegevens wijzigen`, tekst: $localize`:@@dashboard.actie.wijzigen.tekst:Bekijk uw gegevens of geef een wijziging door.`, actie: $localize`:@@dashboard.actie.wijzigen.actie:Bekijk gegevens` },\n    { to: '/concepts', titel: $localize`:@@dashboard.actie.concepten.titel:Functionele patronen`, tekst: $localize`:@@dashboard.actie.concepten.tekst:Bekijk de FP/TEA-bouwstenen van deze POC.`, actie: $localize`:@@dashboard.actie.concepten.actie:Bekijk patronen` },\n    { to: '/brief', titel: $localize`:@@dashboard.actie.brief.titel:Brief opstellen`, tekst: $localize`:@@dashboard.actie.brief.tekst:Stel een brief samen uit vaste en vrije onderdelen.`, actie: $localize`:@@dashboard.actie.brief.actie:Start brief` },\n  ];\n}\n",
+            "sourceCode": "import { Component, computed, inject } from '@angular/core';\nimport { Router } from '@angular/router';\nimport { PageShellComponent } from '@shared/layout/page-shell/page-shell.component';\nimport { HeadingComponent } from '@shared/ui/heading/heading.component';\nimport { AlertComponent } from '@shared/ui/alert/alert.component';\nimport { SkeletonComponent } from '@shared/ui/skeleton/skeleton.component';\nimport { DataRowComponent } from '@shared/ui/data-row/data-row.component';\nimport { DataBlockComponent } from '@shared/ui/data-block/data-block.component';\nimport { TaskListComponent } from '@shared/ui/task-list/task-list.component';\nimport { ApplicationListComponent } from '@shared/ui/application-list/application-list.component';\nimport { ApplicationLinkComponent } from '@shared/ui/application-link/application-link.component';\nimport { ASYNC } from '@shared/ui/async/async.component';\nimport { RegistrationSummaryComponent } from '@registratie/ui/registration-summary/registration-summary.component';\nimport { RegistrationTableComponent } from '@registratie/ui/registration-table/registration-table.component';\nimport { AanvraagBlockComponent } from '@registratie/ui/aanvraag-block/aanvraag-block.component';\nimport { BigProfileStore } from '@registratie/application/big-profile.store';\nimport { ApplicationsStore } from '@registratie/application/applications.store';\nimport { Registration } from '@registratie/domain/registration';\nimport { Aanvraag, AanvraagType } from '@registratie/domain/aanvraag';\nimport { submittedRow } from '@registratie/domain/aanvraag-view';\nimport { tasksFromProfile } from '@registratie/domain/tasks';\n\n/** Page:\"Mijn overzicht\" — the portal home, following the NL Design System\n\"Mijn omgeving\" pattern (side nav +\"Wat moet ik regelen\" +\"Mijn zaken\"). */\n@Component({\n  selector: 'app-dashboard-page',\n  imports: [\n    PageShellComponent, HeadingComponent, AlertComponent, SkeletonComponent,\n    DataRowComponent, DataBlockComponent, TaskListComponent, ApplicationListComponent, ApplicationLinkComponent,\n    ...ASYNC,\n    RegistrationSummaryComponent, RegistrationTableComponent, AanvraagBlockComponent,\n  ],\n  template: `\n    <app-page-shell i18n-heading=\"@@dashboard.heading\" heading=\"Mijn overzicht\" i18n-intro=\"@@dashboard.intro\" intro=\"Welkom in uw persoonlijke omgeving van het BIG-register. Hier ziet u uw registratie en regelt u uw zaken.\">\n        <div class=\"app-stack\">\n          @if (aanvragen().length) {\n            <section>\n              @for (a of concepten(); track a.id) {\n                <app-aanvraag-block animate.enter=\"app-item-enter\" animate.leave=\"app-item-leave\" [aanvraag]=\"a\" (resume)=\"resume(a)\" (cancel)=\"cancelAanvraag(a)\" />\n              }\n              @if (ingediend().length) {\n                <app-heading [level]=\"2\" class=\"app-section\" i18n=\"@@dashboard.mijnAanvragen\">Mijn aanvragen</app-heading>\n                <app-application-list>\n                  @for (a of ingediend(); track a.id) {\n                    @let row = submittedRow(a);\n                    <li app-application-link animate.enter=\"app-item-enter\" animate.leave=\"app-item-leave\" [heading]=\"row.heading\" [status]=\"row.status\" [subtitle]=\"row.subtitle\"></li>\n                  }\n                </app-application-list>\n              }\n            </section>\n          }\n\n          @if (store.pendingHerregistratie()) {\n            <app-alert type=\"info\" i18n=\"@@dashboard.pendingHerregistratie\">Uw herregistratie-aanvraag is in behandeling.</app-alert>\n          }\n\n          <app-async [data]=\"store.profile()\">\n            <ng-template appAsyncLoaded let-p>\n              @let tasks = tasksFor($any(p).registration);\n\n              <section>\n                @if (tasks.length) {\n                  <app-task-list class=\"app-section\" i18n-listHeading=\"@@dashboard.watMoetIkRegelen\" listHeading=\"Wat moet ik regelen\" [tasks]=\"tasks\" />\n                } @else {\n                  <app-heading [level]=\"2\" i18n=\"@@dashboard.watMoetIkRegelen\">Wat moet ik regelen</app-heading>\n                  <p class=\"app-text-subtle\" i18n=\"@@dashboard.nietsOpenstaan\">U heeft op dit moment niets openstaan.</p>\n                }\n              </section>\n\n              <section>\n                <app-heading [level]=\"2\" i18n=\"@@dashboard.mijnRegistratie\">Mijn registratie</app-heading>\n                <div class=\"app-section\">\n                  <app-registration-summary [reg]=\"$any(p).registration\" />\n                </div>\n                <app-data-block class=\"app-section\" i18n-heading=\"@@dashboard.persoonsgegevens\" heading=\"Persoonsgegevens (BRP)\">\n                  <div app-data-row i18n-key=\"@@dashboard.straat\" key=\"Straat\" [value]=\"$any(p).person.adres.straat\"></div>\n                  <div app-data-row i18n-key=\"@@dashboard.postcode\" key=\"Postcode\" [value]=\"$any(p).person.adres.postcode\"></div>\n                  <div app-data-row i18n-key=\"@@dashboard.woonplaats\" key=\"Woonplaats\" [value]=\"$any(p).person.adres.woonplaats\"></div>\n                </app-data-block>\n              </section>\n            </ng-template>\n            <ng-template appAsyncLoading>\n              <app-skeleton height=\"2.5rem\" [count]=\"6\" />\n            </ng-template>\n          </app-async>\n\n          <section>\n            <app-heading [level]=\"2\" i18n=\"@@dashboard.specialismen\">Specialismen en aantekeningen</app-heading>\n            <div class=\"app-section\">\n              <app-async [data]=\"store.aantekeningen()\">\n                <ng-template appAsyncLoaded let-r>\n                  <app-registration-table [rows]=\"$any(r)\" />\n                </ng-template>\n                <ng-template appAsyncLoading>\n                  <app-skeleton height=\"2.5rem\" [count]=\"3\" />\n                </ng-template>\n                <ng-template appAsyncEmpty>\n                  <p class=\"app-text-subtle\" i18n=\"@@dashboard.geenSpecialismen\">U heeft nog geen specialismen of aantekeningen.</p>\n                </ng-template>\n              </app-async>\n            </div>\n          </section>\n\n          <section>\n            <app-heading [level]=\"2\" i18n=\"@@dashboard.watWiltUDoen\">Wat wilt u doen?</app-heading>\n            <app-application-list class=\"app-section\">\n              @for (a of acties; track a.to) {\n                <li app-application-link [heading]=\"a.titel\" [subtitle]=\"a.tekst\" [cta]=\"a.actie\" [to]=\"a.to\"></li>\n              }\n            </app-application-list>\n          </section>\n        </div>\n    </app-page-shell>\n  `,\n})\nexport class DashboardPage {\n  protected store = inject(BigProfileStore);\n  private apps = inject(ApplicationsStore);\n  private router = inject(Router);\n\n  /** Pure view mapping for a submitted aanvraag → CIBG aanvragen-row fields. */\n  protected submittedRow = submittedRow;\n\n  constructor() {\n    // Re-fetch on each visit so server-computed auto-approval transitions show up\n    // (Concept → In behandeling → Goedgekeurd after the processing window).\n    this.apps.reload();\n  }\n\n  /** The user's applications, sorted Concept → In behandeling → resolved. Empty →\n      the\"Mijn aanvragen\" section is hidden (see template). */\n  protected aanvragen = computed<Aanvraag[]>(() => {\n    const rd = this.apps.applications();\n    if (rd.tag !== 'Success') return [];\n    const order: Record<Aanvraag['status']['tag'], number> = { Concept: 0, InBehandeling: 1, Goedgekeurd: 2, Afgewezen: 2 };\n    return rd.value.slice().sort((a, b) => order[a.status.tag] - order[b.status.tag]);\n  });\n  /** A Concept (\"lopende aanvraag\") renders as a melding above the list; the rest\n      as keuzelijst items — the two shapes need different HTML contexts. */\n  protected concepten = computed(() => this.aanvragen().filter((a) => a.status.tag === 'Concept'));\n  protected ingediend = computed(() => this.aanvragen().filter((a) => a.status.tag !== 'Concept'));\n\n  private readonly resumeRoutes: Record<AanvraagType, string> = {\n    registratie: '/registreren',\n    herregistratie: '/herregistratie',\n    intake: '/intake',\n  };\n  protected resume(a: Aanvraag) {\n    void this.router.navigate([this.resumeRoutes[a.type]], { queryParams: { aanvraag: a.id } });\n  }\n  protected cancelAanvraag(a: Aanvraag) {\n    void this.apps.cancel(a.id);\n  }\n\n  /** Server-computed eligibility (rendered, not recomputed). */\n  private readonly eligible = computed(() => {\n    const d = this.store.decisions();\n    return d.tag === 'Success' && d.value.eligibleForHerregistratie;\n  });\n\n  protected tasksFor(reg: Registration) {\n    return tasksFromProfile(reg, this.eligible());\n  }\n\n  /** Primary transactional actions, as an \"aanvragen\" list (see CIBG's\n      componenten/aanvragen). The core portal sections live in the header nav now;\n      the teaching pages (concepts/brief) are only reachable from here. */\n  protected readonly acties = [\n    { to: '/registreren', titel: $localize`:@@dashboard.actie.inschrijven.titel:Inschrijven`, tekst: $localize`:@@dashboard.actie.inschrijven.tekst:Schrijf u in in het BIG-register via de registratiewizard.`, actie: $localize`:@@dashboard.actie.inschrijven.actie:Start inschrijving` },\n    { to: '/herregistratie', titel: $localize`:@@dashboard.actie.herregistratie.titel:Herregistratie aanvragen`, tekst: $localize`:@@dashboard.actie.herregistratie.tekst:Verleng uw registratie voor de komende periode.`, actie: $localize`:@@dashboard.actie.herregistratie.actie:Vraag aan` },\n    { to: '/intake', titel: $localize`:@@dashboard.actie.intake.titel:Herregistratie-intake`, tekst: $localize`:@@dashboard.actie.intake.tekst:Vragenlijst met vertakkingen.`, actie: $localize`:@@dashboard.actie.intake.actie:Start intake` },\n    { to: '/registratie', titel: $localize`:@@dashboard.actie.wijzigen.titel:Gegevens wijzigen`, tekst: $localize`:@@dashboard.actie.wijzigen.tekst:Bekijk uw gegevens of geef een wijziging door.`, actie: $localize`:@@dashboard.actie.wijzigen.actie:Bekijk gegevens` },\n    { to: '/concepts', titel: $localize`:@@dashboard.actie.concepten.titel:Functionele patronen`, tekst: $localize`:@@dashboard.actie.concepten.tekst:Bekijk de FP/TEA-bouwstenen van deze POC.`, actie: $localize`:@@dashboard.actie.concepten.actie:Bekijk patronen` },\n    { to: '/brief', titel: $localize`:@@dashboard.actie.brief.titel:Brief opstellen`, tekst: $localize`:@@dashboard.actie.brief.tekst:Stel een brief samen uit vaste en vrije onderdelen.`, actie: $localize`:@@dashboard.actie.brief.actie:Start brief` },\n  ];\n}\n",
             "assetsDirs": [],
             "styleUrlsData": "",
             "stylesData": "",
@@ -13590,7 +13602,7 @@
                 "deprecated": false,
                 "deprecationMessage": "",
                 "args": [],
-                "line": 117
+                "line": 122
             },
             "extends": []
         },
@@ -22460,11 +22472,13 @@
                 "name": "TYPE_LABELS",
                 "ctype": "miscellaneous",
                 "subtype": "variable",
-                "file": "src/app/registratie/ui/aanvraag-block/aanvraag-block.component.ts",
+                "file": "src/app/registratie/domain/aanvraag-view.ts",
                 "deprecated": false,
                 "deprecationMessage": "",
                 "type": "Record<AanvraagType, string>",
-                "defaultValue": "{\n  registratie: $localize`:@@aanvraagBlock.type.registratie:Inschrijving`,\n  herregistratie: $localize`:@@aanvraagBlock.type.herregistratie:Herregistratie`,\n  intake: $localize`:@@aanvraagBlock.type.intake:Herregistratie-intake`,\n}"
+                "defaultValue": "{\n  registratie: $localize`:@@aanvraagBlock.type.registratie:Inschrijving`,\n  herregistratie: $localize`:@@aanvraagBlock.type.herregistratie:Herregistratie`,\n  intake: $localize`:@@aanvraagBlock.type.intake:Herregistratie-intake`,\n}",
+                "rawdescription": "View-model mapping for an aanvraag: type → label, and a submitted aanvraag →\nthe CIBG \"aanvragen\" row fields (heading/status/subtitle). Pure, no Angular —\nthe UI renders these, it does not derive them.",
+                "description": "<p>View-model mapping for an aanvraag: type → label, and a submitted aanvraag →\nthe CIBG &quot;aanvragen&quot; row fields (heading/status/subtitle). Pure, no Angular —\nthe UI renders these, it does not derive them.</p>\n"
             },
             {
                 "name": "UPLOAD_ABORTED",
@@ -23748,6 +23762,37 @@
                     }
                 ]
             },
+            {
+                "name": "formatNL",
+                "file": "src/app/registratie/domain/aanvraag-view.ts",
+                "ctype": "miscellaneous",
+                "subtype": "function",
+                "deprecated": false,
+                "deprecationMessage": "",
+                "description": "",
+                "args": [
+                    {
+                        "name": "iso",
+                        "type": "string",
+                        "deprecated": false,
+                        "deprecationMessage": "",
+                        "optional": true
+                    }
+                ],
+                "returnType": "string",
+                "jsdoctags": [
+                    {
+                        "name": "iso",
+                        "type": "string",
+                        "deprecated": false,
+                        "deprecationMessage": "",
+                        "optional": true,
+                        "tagName": {
+                            "text": "param"
+                        }
+                    }
+                ]
+            },
             {
                 "name": "formatNL",
                 "file": "src/app/registratie/domain/tasks.ts",
@@ -27561,6 +27606,35 @@
                     }
                 ]
             },
+            {
+                "name": "submittedRow",
+                "file": "src/app/registratie/domain/aanvraag-view.ts",
+                "ctype": "miscellaneous",
+                "subtype": "function",
+                "deprecated": false,
+                "deprecationMessage": "",
+                "description": "<p>Fields for a submitted aanvraag&#39;s row (Concept has no row — it renders as a\nresumable melding, see aanvraag-block).</p>\n",
+                "args": [
+                    {
+                        "name": "a",
+                        "type": "Aanvraag",
+                        "deprecated": false,
+                        "deprecationMessage": ""
+                    }
+                ],
+                "returnType": "AanvraagRow",
+                "jsdoctags": [
+                    {
+                        "name": "a",
+                        "type": "Aanvraag",
+                        "deprecated": false,
+                        "deprecationMessage": "",
+                        "tagName": {
+                            "text": "param"
+                        }
+                    }
+                ]
+            },
             {
                 "name": "tasksFromProfile",
                 "file": "src/app/registratie/domain/tasks.ts",
@@ -29614,16 +29688,18 @@
                     "defaultValue": "$localize`:@@submit.failed:Het indienen is niet gelukt. Probeer het later opnieuw.`"
                 }
             ],
-            "src/app/registratie/ui/aanvraag-block/aanvraag-block.component.ts": [
+            "src/app/registratie/domain/aanvraag-view.ts": [
                 {
                     "name": "TYPE_LABELS",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
-                    "file": "src/app/registratie/ui/aanvraag-block/aanvraag-block.component.ts",
+                    "file": "src/app/registratie/domain/aanvraag-view.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "Record<AanvraagType, string>",
-                    "defaultValue": "{\n  registratie: $localize`:@@aanvraagBlock.type.registratie:Inschrijving`,\n  herregistratie: $localize`:@@aanvraagBlock.type.herregistratie:Herregistratie`,\n  intake: $localize`:@@aanvraagBlock.type.intake:Herregistratie-intake`,\n}"
+                    "defaultValue": "{\n  registratie: $localize`:@@aanvraagBlock.type.registratie:Inschrijving`,\n  herregistratie: $localize`:@@aanvraagBlock.type.herregistratie:Herregistratie`,\n  intake: $localize`:@@aanvraagBlock.type.intake:Herregistratie-intake`,\n}",
+                    "rawdescription": "View-model mapping for an aanvraag: type → label, and a submitted aanvraag →\nthe CIBG \"aanvragen\" row fields (heading/status/subtitle). Pure, no Angular —\nthe UI renders these, it does not derive them.",
+                    "description": "<p>View-model mapping for an aanvraag: type → label, and a submitted aanvraag →\nthe CIBG &quot;aanvragen&quot; row fields (heading/status/subtitle). Pure, no Angular —\nthe UI renders these, it does not derive them.</p>\n"
                 }
             ],
             "src/app/shared/infrastructure/scenario.ts": [
@@ -34238,6 +34314,68 @@
                     ]
                 }
             ],
+            "src/app/registratie/domain/aanvraag-view.ts": [
+                {
+                    "name": "formatNL",
+                    "file": "src/app/registratie/domain/aanvraag-view.ts",
+                    "ctype": "miscellaneous",
+                    "subtype": "function",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "description": "",
+                    "args": [
+                        {
+                            "name": "iso",
+                            "type": "string",
+                            "deprecated": false,
+                            "deprecationMessage": "",
+                            "optional": true
+                        }
+                    ],
+                    "returnType": "string",
+                    "jsdoctags": [
+                        {
+                            "name": "iso",
+                            "type": "string",
+                            "deprecated": false,
+                            "deprecationMessage": "",
+                            "optional": true,
+                            "tagName": {
+                                "text": "param"
+                            }
+                        }
+                    ]
+                },
+                {
+                    "name": "submittedRow",
+                    "file": "src/app/registratie/domain/aanvraag-view.ts",
+                    "ctype": "miscellaneous",
+                    "subtype": "function",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "description": "<p>Fields for a submitted aanvraag&#39;s row (Concept has no row — it renders as a\nresumable melding, see aanvraag-block).</p>\n",
+                    "args": [
+                        {
+                            "name": "a",
+                            "type": "Aanvraag",
+                            "deprecated": false,
+                            "deprecationMessage": ""
+                        }
+                    ],
+                    "returnType": "AanvraagRow",
+                    "jsdoctags": [
+                        {
+                            "name": "a",
+                            "type": "Aanvraag",
+                            "deprecated": false,
+                            "deprecationMessage": "",
+                            "tagName": {
+                                "text": "param"
+                            }
+                        }
+                    ]
+                }
+            ],
             "src/app/registratie/domain/tasks.ts": [
                 {
                     "name": "formatNL",
@@ -37766,6 +37904,45 @@
                 "coverageCount": "0/4",
                 "status": "low"
             },
+            {
+                "filePath": "src/app/registratie/domain/aanvraag-view.ts",
+                "type": "interface",
+                "linktype": "interface",
+                "name": "AanvraagRow",
+                "coveragePercent": 50,
+                "coverageCount": "2/4",
+                "status": "medium"
+            },
+            {
+                "filePath": "src/app/registratie/domain/aanvraag-view.ts",
+                "type": "function",
+                "linktype": "miscellaneous",
+                "linksubtype": "function",
+                "name": "formatNL",
+                "coveragePercent": 0,
+                "coverageCount": "0/1",
+                "status": "low"
+            },
+            {
+                "filePath": "src/app/registratie/domain/aanvraag-view.ts",
+                "type": "function",
+                "linktype": "miscellaneous",
+                "linksubtype": "function",
+                "name": "submittedRow",
+                "coveragePercent": 100,
+                "coverageCount": "1/1",
+                "status": "very-good"
+            },
+            {
+                "filePath": "src/app/registratie/domain/aanvraag-view.ts",
+                "type": "variable",
+                "linktype": "miscellaneous",
+                "linksubtype": "variable",
+                "name": "TYPE_LABELS",
+                "coveragePercent": 100,
+                "coverageCount": "1/1",
+                "status": "very-good"
+            },
             {
                 "filePath": "src/app/registratie/domain/aanvraag.ts",
                 "type": "interface",
@@ -38621,8 +38798,8 @@
                 "type": "component",
                 "linktype": "component",
                 "name": "AanvraagBlockComponent",
-                "coveragePercent": 18,
-                "coverageCount": "2/11",
+                "coveragePercent": 25,
+                "coverageCount": "2/8",
                 "status": "low"
             },
             {
@@ -38635,16 +38812,6 @@
                 "coverageCount": "0/1",
                 "status": "low"
             },
-            {
-                "filePath": "src/app/registratie/ui/aanvraag-block/aanvraag-block.component.ts",
-                "type": "variable",
-                "linktype": "miscellaneous",
-                "linksubtype": "variable",
-                "name": "TYPE_LABELS",
-                "coveragePercent": 0,
-                "coverageCount": "0/1",
-                "status": "low"
-            },
             {
                 "filePath": "src/app/registratie/ui/address-fields/address-fields.component.ts",
                 "type": "component",
@@ -38687,8 +38854,8 @@
                 "type": "component",
                 "linktype": "component",
                 "name": "DashboardPage",
-                "coveragePercent": 35,
-                "coverageCount": "5/14",
+                "coveragePercent": 40,
+                "coverageCount": "6/15",
                 "status": "medium"
             },
             {
diff --git a/src/app/registratie/domain/aanvraag-view.spec.ts b/src/app/registratie/domain/aanvraag-view.spec.ts
new file mode 100644
index 0000000..34bab9a
--- /dev/null
+++ b/src/app/registratie/domain/aanvraag-view.spec.ts
@@ -0,0 +1,30 @@
+import { describe, it, expect } from 'vitest';
+import { submittedRow, TYPE_LABELS } from './aanvraag-view';
+import { Aanvraag } from './aanvraag';
+
+const base = { id: '1', type: 'herregistratie' as const, documentIds: [], createdAt: '', updatedAt: '', submittedAt: '2024-05-12' };
+
+describe('submittedRow', () => {
+  it('InBehandeling: reference + submit date; manual note only when manual', () => {
+    const auto = submittedRow({ ...base, status: { tag: 'InBehandeling', referentie: 'R1', manual: false } } as Aanvraag);
+    expect(auto.heading).toBe(TYPE_LABELS.herregistratie);
+    expect(auto.status).toContain('R1');
+    expect(auto.status).toContain('12 mei 2024');
+    expect(auto.subtitle).toBe('');
+
+    const manual = submittedRow({ ...base, status: { tag: 'InBehandeling', referentie: 'R1', manual: true } } as Aanvraag);
+    expect(manual.subtitle).not.toBe('');
+  });
+
+  it('Afgewezen: reason becomes the subtitle', () => {
+    const row = submittedRow({ ...base, status: { tag: 'Afgewezen', referentie: 'R2', reden: 'Onvoldoende uren' } } as Aanvraag);
+    expect(row.status).toContain('R2');
+    expect(row.subtitle).toBe('Onvoldoende uren');
+  });
+
+  it('Goedgekeurd: reference only', () => {
+    const row = submittedRow({ ...base, status: { tag: 'Goedgekeurd', referentie: 'R3' } } as Aanvraag);
+    expect(row.status).toContain('R3');
+    expect(row.subtitle).toBe('');
+  });
+});
diff --git a/src/app/registratie/domain/aanvraag-view.ts b/src/app/registratie/domain/aanvraag-view.ts
new file mode 100644
index 0000000..e5f70d2
--- /dev/null
+++ b/src/app/registratie/domain/aanvraag-view.ts
@@ -0,0 +1,44 @@
+import { Aanvraag, AanvraagType } from './aanvraag';
+
+/** View-model mapping for an aanvraag: type → label, and a submitted aanvraag →
+    the CIBG "aanvragen" row fields (heading/status/subtitle). Pure, no Angular —
+    the UI renders these, it does not derive them. */
+
+export const TYPE_LABELS: Record<AanvraagType, string> = {
+  registratie: $localize`:@@aanvraagBlock.type.registratie:Inschrijving`,
+  herregistratie: $localize`:@@aanvraagBlock.type.herregistratie:Herregistratie`,
+  intake: $localize`:@@aanvraagBlock.type.intake:Herregistratie-intake`,
+};
+
+export interface AanvraagRow {
+  heading: string;
+  /** Reference + submit-date line (the `.status` line of an aanvragen row). */
+  status: string;
+  /** Secondary note: manual-review notice or rejection reason. */
+  subtitle: string;
+}
+
+function formatNL(iso?: string): string {
+  return iso ? new Date(iso).toLocaleDateString('nl-NL', { day: 'numeric', month: 'long', year: 'numeric' }) : '';
+}
+
+/** Fields for a submitted aanvraag's row (Concept has no row — it renders as a
+    resumable melding, see aanvraag-block). */
+export function submittedRow(a: Aanvraag): AanvraagRow {
+  const s = a.status;
+  const heading = TYPE_LABELS[a.type];
+  switch (s.tag) {
+    case 'Concept':
+      return { heading, status: '', subtitle: '' };
+    case 'InBehandeling':
+      return {
+        heading,
+        status: $localize`:@@aanvraagBlock.inBehandeling:Referentie ${s.referentie}:ref: · ingediend op ${formatNL(a.submittedAt)}:datum:`,
+        subtitle: s.manual ? $localize`:@@aanvraagBlock.manual:Uw aanvraag wordt handmatig beoordeeld in de backoffice.` : '',
+      };
+    case 'Goedgekeurd':
+      return { heading, status: $localize`:@@aanvraagBlock.goedgekeurd:Referentie ${s.referentie}:ref:`, subtitle: '' };
+    case 'Afgewezen':
+      return { heading, status: $localize`:@@aanvraagBlock.afgewezen:Referentie ${s.referentie}:ref:`, subtitle: s.reden };
+  }
+}
diff --git a/src/app/registratie/ui/aanvraag-block/aanvraag-block.component.ts b/src/app/registratie/ui/aanvraag-block/aanvraag-block.component.ts
index 0a840a8..4b7cd6c 100644
--- a/src/app/registratie/ui/aanvraag-block/aanvraag-block.component.ts
+++ b/src/app/registratie/ui/aanvraag-block/aanvraag-block.component.ts
@@ -1,28 +1,19 @@
 import { Component, computed, input, output } from '@angular/core';
 import { ButtonComponent } from '@shared/ui/button/button.component';
 import { AlertComponent } from '@shared/ui/alert/alert.component';
-import { ChoiceLinkComponent } from '@shared/ui/choice-link/choice-link.component';
-import { Aanvraag, AanvraagType } from '@registratie/domain/aanvraag';
+import { Aanvraag } from '@registratie/domain/aanvraag';
+import { TYPE_LABELS } from '@registratie/domain/aanvraag-view';
 import { blockActions } from '@registratie/domain/block-actions';
 
-const TYPE_LABELS: Record<AanvraagType, string> = {
-  registratie: $localize`:@@aanvraagBlock.type.registratie:Inschrijving`,
-  herregistratie: $localize`:@@aanvraagBlock.type.herregistratie:Herregistratie`,
-  intake: $localize`:@@aanvraagBlock.type.intake:Herregistratie-intake`,
-};
-
-/** Organism: one application on the dashboard. A resumable Concept ("lopende
-    aanvraag") renders as a CIBG "melding" (warning) with its actions — verwijderen
-    as a link, aanvraag openen as a button; a submitted/resolved status renders as a
-    plain keuzelijst card. Which actions show is driven by the pure
-    `blockActions(status)`; the block only renders. NOTE: the caller places the two
-    shapes differently — a Concept melding is a block element, the rest are `<li>`s
-    that must sit inside a keuzelijst `<ul>` (see dashboard.page.ts). */
+/** Organism: a resumable Concept ("lopende aanvraag") on the dashboard, rendered as
+    a CIBG "melding" (warning) with its actions — verwijderen as a link, aanvraag
+    openen as a button. Which actions show is driven by the pure `blockActions(status)`;
+    the block only renders. Submitted/resolved aanvragen are NOT rendered here — they
+    render as CIBG "aanvragen" rows (see application-link + aanvraag-view). */
 @Component({
   selector: 'app-aanvraag-block',
-  imports: [ButtonComponent, AlertComponent, ChoiceLinkComponent],
+  imports: [ButtonComponent, AlertComponent],
   styles: [`
-    :host{display:contents} /* see choice-link.component.ts (keeps <li> a direct <ul> child) */
     .actions{display:flex;align-items:center;gap:var(--rhc-space-max-md);margin-block-start:var(--rhc-space-max-sm)}
   `],
   template: `
@@ -39,8 +30,6 @@ const TYPE_LABELS: Record<AanvraagType, string> = {
           }
         </div>
       </app-alert>
-    } @else {
-      <app-choice-link [heading]="typeLabel()" [instructions]="instructions()" />
     }
   `,
 })
@@ -67,30 +56,6 @@ export class AanvraagBlockComponent {
     if (s.tag !== 'Concept') return '';
     return $localize`:@@aanvraagBlock.conceptMelding:Deze aanvraag is nog niet volledig afgerond — u bent gebleven bij stap ${s.stepIndex + 1}:stap: van ${s.stepCount}:totaal:. Rond de aanvraag af vóór ${formatNL(this.deadline())}:datum:.`;
   });
-
-  // Status-tag → the choice's description line (the UI's mapping, not a domain rule).
-  private statusText = computed(() => {
-    const s = this.aanvraag().status;
-    switch (s.tag) {
-      case 'Concept': return '';
-      case 'InBehandeling': return $localize`:@@aanvraagBlock.inBehandeling:Referentie ${s.referentie}:ref: · ingediend op ${formatNL(this.aanvraag().submittedAt)}:datum:`;
-      case 'Goedgekeurd': return $localize`:@@aanvraagBlock.goedgekeurd:Referentie ${s.referentie}:ref:`;
-      case 'Afgewezen': return $localize`:@@aanvraagBlock.afgewezen:Referentie ${s.referentie}:ref:`;
-    }
-  });
-  // Secondary note appended to the status line, when there's one to show.
-  private subtitle = computed(() => {
-    const s = this.aanvraag().status;
-    if (s.tag === 'InBehandeling' && s.manual) return $localize`:@@aanvraagBlock.manual:Uw aanvraag wordt handmatig beoordeeld in de backoffice.`;
-    if (s.tag === 'Afgewezen') return s.reden;
-    return '';
-  });
-  // The keuzelijst has one description paragraph — combine status + secondary note.
-  protected instructions = computed(() => {
-    const status = this.statusText();
-    const sub = this.subtitle();
-    return sub ? `${status} ${sub}` : status;
-  });
 }
 
 function formatNL(iso?: string): string {
diff --git a/src/app/registratie/ui/dashboard.page.ts b/src/app/registratie/ui/dashboard.page.ts
index 1b0b246..9f5c4c6 100644
--- a/src/app/registratie/ui/dashboard.page.ts
+++ b/src/app/registratie/ui/dashboard.page.ts
@@ -9,7 +9,6 @@ import { DataBlockComponent } from '@shared/ui/data-block/data-block.component';
 import { TaskListComponent } from '@shared/ui/task-list/task-list.component';
 import { ApplicationListComponent } from '@shared/ui/application-list/application-list.component';
 import { ApplicationLinkComponent } from '@shared/ui/application-link/application-link.component';
-import { ChoiceListComponent } from '@shared/ui/choice-list/choice-list.component';
 import { ASYNC } from '@shared/ui/async/async.component';
 import { RegistrationSummaryComponent } from '@registratie/ui/registration-summary/registration-summary.component';
 import { RegistrationTableComponent } from '@registratie/ui/registration-table/registration-table.component';
@@ -18,6 +17,7 @@ import { BigProfileStore } from '@registratie/application/big-profile.store';
 import { ApplicationsStore } from '@registratie/application/applications.store';
 import { Registration } from '@registratie/domain/registration';
 import { Aanvraag, AanvraagType } from '@registratie/domain/aanvraag';
+import { submittedRow } from '@registratie/domain/aanvraag-view';
 import { tasksFromProfile } from '@registratie/domain/tasks';
 
 /** Page:"Mijn overzicht" — the portal home, following the NL Design System
@@ -27,7 +27,7 @@ import { tasksFromProfile } from '@registratie/domain/tasks';
   imports: [
     PageShellComponent, HeadingComponent, AlertComponent, SkeletonComponent,
     DataRowComponent, DataBlockComponent, TaskListComponent, ApplicationListComponent, ApplicationLinkComponent,
-    ChoiceListComponent, ...ASYNC,
+    ...ASYNC,
     RegistrationSummaryComponent, RegistrationTableComponent, AanvraagBlockComponent,
   ],
   template: `
@@ -39,11 +39,13 @@ import { tasksFromProfile } from '@registratie/domain/tasks';
                 <app-aanvraag-block animate.enter="app-item-enter" animate.leave="app-item-leave" [aanvraag]="a" (resume)="resume(a)" (cancel)="cancelAanvraag(a)" />
               }
               @if (ingediend().length) {
-                <app-choice-list i18n-heading="@@dashboard.mijnAanvragen" heading="Mijn aanvragen" class="app-section">
+                <app-heading [level]="2" class="app-section" i18n="@@dashboard.mijnAanvragen">Mijn aanvragen</app-heading>
+                <app-application-list>
                   @for (a of ingediend(); track a.id) {
-                    <app-aanvraag-block animate.enter="app-item-enter" animate.leave="app-item-leave" [aanvraag]="a" />
+                    @let row = submittedRow(a);
+                    <li app-application-link animate.enter="app-item-enter" animate.leave="app-item-leave" [heading]="row.heading" [status]="row.status" [subtitle]="row.subtitle"></li>
                   }
-                </app-choice-list>
+                </app-application-list>
               }
             </section>
           }
@@ -103,7 +105,7 @@ import { tasksFromProfile } from '@registratie/domain/tasks';
             <app-heading [level]="2" i18n="@@dashboard.watWiltUDoen">Wat wilt u doen?</app-heading>
             <app-application-list class="app-section">
               @for (a of acties; track a.to) {
-                <app-application-link [heading]="a.titel" [subtitle]="a.tekst" [cta]="a.actie" [to]="a.to" />
+                <li app-application-link [heading]="a.titel" [subtitle]="a.tekst" [cta]="a.actie" [to]="a.to"></li>
               }
             </app-application-list>
           </section>
@@ -116,6 +118,9 @@ export class DashboardPage {
   private apps = inject(ApplicationsStore);
   private router = inject(Router);
 
+  /** Pure view mapping for a submitted aanvraag → CIBG aanvragen-row fields. */
+  protected submittedRow = submittedRow;
+
   constructor() {
     // Re-fetch on each visit so server-computed auto-approval transitions show up
     // (Concept → In behandeling → Goedgekeurd after the processing window).
diff --git a/src/app/shared/ui/application-link/application-link.component.ts b/src/app/shared/ui/application-link/application-link.component.ts
index af96faf..fbe0158 100644
--- a/src/app/shared/ui/application-link/application-link.component.ts
+++ b/src/app/shared/ui/application-link/application-link.component.ts
@@ -2,33 +2,40 @@ 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. */
+/** Molecule: one row in a CIBG Huisstijl "aanvragen" list
+    (designsystem.cibg.nl/componenten/aanvragen) — a white card-link styled by the
+    vendored `.dashboard-block.applications li a` chain (bg, chevron, link-blue `h3`),
+    with an optional `.subtitle`/`.status`/`.cta`. Used on an `<li>` so the `<ul>`'s
+    direct child is a native `<li>` (keeps the list axe-clean — a bare custom element
+    between `<ul>` and its `<li>` trips axe's list rule regardless of `display:contents`).
+    A non-navigating row renders a `<div>` (the vendored chain only styles `<a>`, so
+    that surface is mirrored from tokens). A `[applicationActions]` slot projects a
+    sibling action after the anchor — a button can't nest inside the anchor itself. */
 @Component({
-  selector: 'app-application-link',
+  selector: 'li[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}`],
+  styles: [`
+    /* The vendored .applications li a surface only styles <a>; mirror it from tokens
+       for a non-navigating (informational) row so the card looks consistent. */
+    .static-row{display:flex;background:var(--rhc-color-wit);border-block-end:.065rem solid var(--rhc-color-border-subtle);padding:.75rem 2rem .75rem 1rem}
+    .content{flex:1 1 auto;min-inline-size:0}
+    .cta{margin-inline-start:auto;align-self:center}
+  `],
   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>
+    @if (to()) {
+      <a [routerLink]="to()"><ng-container [ngTemplateOutlet]="body" /></a>
+    } @else if (clickable()) {
+      <a href="#" (click)="onActivate($event)"><ng-container [ngTemplateOutlet]="body" /></a>
+    } @else {
+      <div class="static-row"><ng-container [ngTemplateOutlet]="body" /></div>
+    }
+    <ng-content select="[applicationActions]" />
     <ng-template #body>
-      <h3 class="application-title">{{ heading() }}</h3>
-      @if (subtitle()) { <div class="subtitle">{{ subtitle() }}</div> }
-      @if (status()) { <div class="status">{{ status() }}</div> }
+      <div class="content">
+        <h3 class="h3">{{ heading() }}</h3>
+        @if (subtitle()) { <div class="subtitle">{{ subtitle() }}</div> }
+        @if (status()) { <div class="status">{{ status() }}</div> }
+      </div>
       @if (cta()) { <div class="cta">{{ cta() }}</div> }
     </ng-template>
   `,
diff --git a/src/app/shared/ui/application-link/application-link.stories.ts b/src/app/shared/ui/application-link/application-link.stories.ts
index 45838d4..b014880 100644
--- a/src/app/shared/ui/application-link/application-link.stories.ts
+++ b/src/app/shared/ui/application-link/application-link.stories.ts
@@ -9,15 +9,9 @@ const meta: Meta<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>`,
+    // Rows are <li>s in the "aanvragen" list — a real <ul> gives them their layout.
+    template: `<div class="dashboard-block applications"><ul class="list-unstyled"><li app-application-link [heading]="heading" [subtitle]="subtitle" [status]="status" [cta]="cta" [to]="to" [clickable]="clickable"></li></ul></div>`,
   }),
-  parameters: {
-    // Structural: app-application-link's host sits between the <ul> and its <li> —
-    // axe's list/listitem rule requires them adjacent regardless of `display:contents`.
-    // WP-11 (CIBG markup fidelity) reworks this markup; see docs/backlog/WP-11-markup-fidelity.md.
-    a11y: { disable: true },
-  },
 };
 export default meta;
 type Story = StoryObj<ApplicationLinkComponent>;
diff --git a/src/app/shared/ui/application-list/application-list.stories.ts b/src/app/shared/ui/application-list/application-list.stories.ts
index e5a641d..87d72ac 100644
--- a/src/app/shared/ui/application-list/application-list.stories.ts
+++ b/src/app/shared/ui/application-list/application-list.stories.ts
@@ -14,16 +14,11 @@ const meta: Meta<ApplicationListComponent> = {
   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" />
+        <li app-application-link heading="Inschrijving" status="Stap 2 van 3" cta="Verder gaan" clickable="true"></li>
+        <li app-application-link heading="Herregistratie" status="Referentie 2024-00123 · ingediend op 12 mei 2024"></li>
+        <li app-application-link heading="Inschrijven" subtitle="Schrijf u in in het BIG-register." to="/registreren"></li>
       </app-application-list>`,
   }),
-  parameters: {
-    // Structural: app-application-link's host sits between the <ul> and its <li> —
-    // fixed by the WP-11 markup rework. See docs/backlog/WP-11-markup-fidelity.md.
-    a11y: { disable: true },
-  },
 };
 export default meta;
 type Story = StoryObj<ApplicationListComponent>;