feat(cibg): WP-12 — CIBG Datablock for application data

Adopt the vendored CIBG Datablock (.data-block / .block-wrapper) as the way to
show application data:
- New app-data-block molecule (grey surface + white panel + projected rows,
  optional heading, stacked variant, aria-label) + stories.
- data-row switches to a `div[app-data-row]` attribute selector so the <dl>'s
  direct child is a native <div> (HTML5.1 dl > div > dt+dd). This makes the
  definition list axe-clean — a bare custom element between <dl> and its dt/dd
  trips axe's definition-list rule regardless of display:contents, a defect the
  dashboard shipped live. Re-enables a11y on the data-row / review-section /
  registration-summary stories (previously disabled pending this rework).
- review-section folds onto app-data-block (drops its hand-carried classes).
- registration-summary + dashboard "Persoonsgegevens (BRP)" drop app-card and
  render as datablocks; both wizards' review rows + the beroep row convert to
  the div selector.

GREEN: lint, check:tokens, 178 tests, build, build-storybook, 136 axe stories.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

src/app/herregistratie/ui/intake-wizard/intake-wizard.component.ts

@@ -88,21 +88,21 @@ import { IntakePolicyStore } from '@herregistratie/application/intake-policy.sto
           <app-review-section i18n-heading="@@intake.sectie.buitenland" heading="Buitenland"
             i18n-editAriaLabel="@@intake.buitenlandWijzigenAria" editAriaLabel="Wijzigen buitenland"
             (edit)="dispatch({ tag: 'GaNaarStap', cursor: 0 })">
-            <app-data-row i18n-key="@@intake.review.buitenNl" key="Buiten NL gewerkt" [value]="answers().buitenlandGewerkt ?? '—'" />
+            <div app-data-row i18n-key="@@intake.review.buitenNl" key="Buiten NL gewerkt" [value]="answers().buitenlandGewerkt ?? '—'"></div>
             @if (answers().buitenlandGewerkt === 'ja') {
-              <app-data-row i18n-key="@@intake.review.land" key="Land" [value]="answers().land ?? ''" />
+              <div app-data-row i18n-key="@@intake.review.land" key="Land" [value]="answers().land ?? ''"></div>
-              <app-data-row i18n-key="@@intake.review.buitenlandseUren" key="Buitenlandse uren" [value]="answers().buitenlandseUren ?? ''" />
+              <div app-data-row i18n-key="@@intake.review.buitenlandseUren" key="Buitenlandse uren" [value]="answers().buitenlandseUren ?? ''"></div>
             }
           </app-review-section>
           <app-review-section class="app-section" i18n-heading="@@intake.sectie.werk" heading="Werk in Nederland"
             i18n-editAriaLabel="@@intake.werkWijzigenAria" editAriaLabel="Wijzigen werk in Nederland"
             (edit)="dispatch({ tag: 'GaNaarStap', cursor: 1 })">
-            <app-data-row i18n-key="@@intake.review.urenNl" key="Uren NL" [value]="answers().uren ?? ''" />
+            <div app-data-row i18n-key="@@intake.review.urenNl" key="Uren NL" [value]="answers().uren ?? ''"></div>
             @if (scholingZichtbaar()) {
-              <app-data-row i18n-key="@@intake.review.scholing" key="Aanvullende scholing" [value]="answers().scholingGevolgd ?? ''" />
+              <div app-data-row i18n-key="@@intake.review.scholing" key="Aanvullende scholing" [value]="answers().scholingGevolgd ?? ''"></div>
             }
             @if (answers().scholingGevolgd === 'ja') {
-              <app-data-row i18n-key="@@intake.review.punten" key="Nascholingspunten" [value]="answers().punten ?? ''" />
+              <div app-data-row i18n-key="@@intake.review.punten" key="Nascholingspunten" [value]="answers().punten ?? ''"></div>
             }
           </app-review-section>
         }

src/app/registratie/ui/dashboard.page.ts

@@ -5,7 +5,7 @@ import { HeadingComponent } from '@shared/ui/heading/heading.component';
 import { AlertComponent } from '@shared/ui/alert/alert.component';
 import { SkeletonComponent } from '@shared/ui/skeleton/skeleton.component';
 import { DataRowComponent } from '@shared/ui/data-row/data-row.component';
-import { CardComponent } from '@shared/ui/card/card.component';
+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';
@@ -26,7 +26,7 @@ import { tasksFromProfile } from '@registratie/domain/tasks';
   selector: 'app-dashboard-page',
   imports: [
     PageShellComponent, HeadingComponent, AlertComponent, SkeletonComponent,
-    DataRowComponent, CardComponent, TaskListComponent, ApplicationListComponent, ApplicationLinkComponent,
+    DataRowComponent, DataBlockComponent, TaskListComponent, ApplicationListComponent, ApplicationLinkComponent,
     ChoiceListComponent, ...ASYNC,
     RegistrationSummaryComponent, RegistrationTableComponent, AanvraagBlockComponent,
   ],
@@ -70,13 +70,11 @@ import { tasksFromProfile } from '@registratie/domain/tasks';
                 <div class="app-section">
                   <app-registration-summary [reg]="$any(p).registration" />
                 </div>
-                <app-card class="app-section" i18n-heading="@@dashboard.persoonsgegevens" heading="Persoonsgegevens (BRP)">
+                <app-data-block class="app-section" i18n-heading="@@dashboard.persoonsgegevens" heading="Persoonsgegevens (BRP)">
-                  <dl class="row mb-0">
+                  <div app-data-row i18n-key="@@dashboard.straat" key="Straat" [value]="$any(p).person.adres.straat"></div>
-                    <app-data-row i18n-key="@@dashboard.straat" key="Straat" [value]="$any(p).person.adres.straat" />
+                  <div app-data-row i18n-key="@@dashboard.postcode" key="Postcode" [value]="$any(p).person.adres.postcode"></div>
-                    <app-data-row i18n-key="@@dashboard.postcode" key="Postcode" [value]="$any(p).person.adres.postcode" />
+                  <div app-data-row i18n-key="@@dashboard.woonplaats" key="Woonplaats" [value]="$any(p).person.adres.woonplaats"></div>
-                    <app-data-row i18n-key="@@dashboard.woonplaats" key="Woonplaats" [value]="$any(p).person.adres.woonplaats" />
+                </app-data-block>
-                  </dl>
-                </app-card>
               </section>
             </ng-template>
             <ng-template appAsyncLoading>

src/app/registratie/ui/registratie-wizard/registratie-wizard.component.ts

@@ -122,8 +122,8 @@ const NL_TAALVAARDIGHEID_VRAAG = 'nl-taalvaardigheid';
                         [ngModel]="draft().beroep ?? ''" (ngModelChange)="dispatch({ tag: 'DeclareerBeroep', beroep: $event })" />
                     </app-form-field>
                   } @else if (draft().beroep) {
-                    <dl class="row mb-0 app-section">
+                    <dl class="mb-0 app-section">
-                      <app-data-row i18n-key="@@regWizard.beroepAfgeleid" key="Beroep (afgeleid uit diploma)" [value]="draft().beroep ?? ''" />
+                      <div app-data-row i18n-key="@@regWizard.beroepAfgeleid" key="Beroep (afgeleid uit diploma)" [value]="draft().beroep ?? ''"></div>
                     </dl>
                   }
 
@@ -162,20 +162,20 @@ const NL_TAALVAARDIGHEID_VRAAG = 'nl-taalvaardigheid';
               <app-review-section i18n-heading="@@regWizard.sectie.adres" heading="Adres en correspondentie"
                 i18n-editAriaLabel="@@regWizard.adresWijzigenAria" editAriaLabel="Wijzigen adresgegevens"
                 (edit)="dispatch({ tag: 'GaNaarStap', cursor: 0 })">
-                <app-data-row i18n-key="@@regWizard.summary.adres" key="Adres" [value]="adresSamenvatting()" />
+                <div app-data-row i18n-key="@@regWizard.summary.adres" key="Adres" [value]="adresSamenvatting()"></div>
-                <app-data-row i18n-key="@@regWizard.summary.herkomstAdres" key="Herkomst adres" [value]="adresHerkomstLabel()" />
+                <div app-data-row i18n-key="@@regWizard.summary.herkomstAdres" key="Herkomst adres" [value]="adresHerkomstLabel()"></div>
-                <app-data-row i18n-key="@@regWizard.summary.correspondentie" key="Correspondentie" [value]="correspondentieLabel()" />
+                <div app-data-row i18n-key="@@regWizard.summary.correspondentie" key="Correspondentie" [value]="correspondentieLabel()"></div>
                 @if (draft().correspondentie === 'email') {
-                  <app-data-row i18n-key="@@regWizard.summary.email" key="E-mailadres" [value]="draft().email ?? ''" />
+                  <div app-data-row i18n-key="@@regWizard.summary.email" key="E-mailadres" [value]="draft().email ?? ''"></div>
                 }
               </app-review-section>
               <app-review-section class="app-section" i18n-heading="@@regWizard.sectie.beroep" heading="Beroep en diploma"
                 i18n-editAriaLabel="@@regWizard.diplomaWijzigenAria" editAriaLabel="Wijzigen beroep en diploma"
                 (edit)="dispatch({ tag: 'GaNaarStap', cursor: 1 })">
-                <app-data-row i18n-key="@@regWizard.summary.beroep" key="Beroep" [value]="draft().beroep ?? ''" />
+                <div app-data-row i18n-key="@@regWizard.summary.beroep" key="Beroep" [value]="draft().beroep ?? ''"></div>
-                <app-data-row i18n-key="@@regWizard.summary.herkomstDiploma" key="Herkomst diploma" [value]="diplomaHerkomstLabel()" />
+                <div app-data-row i18n-key="@@regWizard.summary.herkomstDiploma" key="Herkomst diploma" [value]="diplomaHerkomstLabel()"></div>
                 @for (item of samenvattingVragen(); track item.vraag) {
-                  <app-data-row [key]="item.vraag" [value]="item.antwoord" />
+                  <div app-data-row [key]="item.vraag" [value]="item.antwoord"></div>
                 }
               </app-review-section>
         }

src/app/registratie/ui/registration-summary/registration-summary.component.ts

@@ -4,38 +4,37 @@ import { Registration } from '@registratie/domain/registration';
 import { statusColor, statusLabel } from '@registratie/domain/registration.policy';
 import { DataRowComponent } from '@shared/ui/data-row/data-row.component';
 import { StatusBadgeComponent } from '@shared/ui/status-badge/status-badge.component';
-import { CardComponent } from '@shared/ui/card/card.component';
+import { DataBlockComponent } from '@shared/ui/data-block/data-block.component';
 
-/** Organism: registration summary card. Composes data-row molecules + status-badge atom. */
+/** Organism: registration summary in a CIBG Datablock. Composes data-row rows +
+    status-badge atom (no card wrapper — the datablock carries its own surface). */
 @Component({
   selector: 'app-registration-summary',
-  imports: [DatePipe, DataRowComponent, StatusBadgeComponent, CardComponent],
+  imports: [DatePipe, DataRowComponent, StatusBadgeComponent, DataBlockComponent],
   template: `
-    <app-card>
+    <app-data-block i18n-ariaLabel="@@summary.ariaLabel" ariaLabel="Registratiegegevens">
-      <dl class="row mb-0">
+      <div app-data-row i18n-key="@@summary.bigNummer" key="BIG-nummer" [value]="reg().bigNummer"></div>
-        <app-data-row i18n-key="@@summary.bigNummer" key="BIG-nummer" [value]="reg().bigNummer" />
+      <div app-data-row i18n-key="@@summary.naam" key="Naam" [value]="reg().naam"></div>
-        <app-data-row i18n-key="@@summary.naam" key="Naam" [value]="reg().naam" />
+      <div app-data-row i18n-key="@@summary.beroep" key="Beroep" [value]="reg().beroep"></div>
-        <app-data-row i18n-key="@@summary.beroep" key="Beroep" [value]="reg().beroep" />
+      <div app-data-row i18n-key="@@summary.status" key="Status">
-        <app-data-row i18n-key="@@summary.status" key="Status">
+        <app-status-badge [label]="label()" [color]="color()" />
-          <app-status-badge [label]="label()" [color]="color()" />
+      </div>
-        </app-data-row>
+      <div app-data-row i18n-key="@@summary.registratiedatum" key="Registratiedatum" [value]="reg().registratiedatum | date:'longDate'"></div>
-        <app-data-row i18n-key="@@summary.registratiedatum" key="Registratiedatum" [value]="reg().registratiedatum | date:'longDate'" />
+      <!-- Each status variant renders only the row its own data supports. -->
-        <!-- Each status variant renders only the row its own data supports. -->
+      @switch (reg().status.tag) {
-        @switch (reg().status.tag) {
+        @case ('Geregistreerd') {
-          @case ('Geregistreerd') {
+          <div app-data-row i18n-key="@@summary.uiterste" key="Uiterste herregistratie" [value]="$any(reg().status).herregistratieDatum | date:'longDate'"></div>
-            <app-data-row i18n-key="@@summary.uiterste" key="Uiterste herregistratie" [value]="$any(reg().status).herregistratieDatum | date:'longDate'" />
-          }
-          @case ('Geschorst') {
-            <app-data-row i18n-key="@@summary.geschorstTot" key="Geschorst tot" [value]="$any(reg().status).geschorstTot | date:'longDate'" />
-            <app-data-row i18n-key="@@summary.reden" key="Reden" [value]="$any(reg().status).reden" />
-          }
-          @case ('Doorgehaald') {
-            <app-data-row i18n-key="@@summary.doorgehaaldOp" key="Doorgehaald op" [value]="$any(reg().status).doorgehaaldOp | date:'longDate'" />
-            <app-data-row i18n-key="@@summary.reden" key="Reden" [value]="$any(reg().status).reden" />
-          }
         }
-      </dl>
+        @case ('Geschorst') {
-    </app-card>
+          <div app-data-row i18n-key="@@summary.geschorstTot" key="Geschorst tot" [value]="$any(reg().status).geschorstTot | date:'longDate'"></div>
+          <div app-data-row i18n-key="@@summary.reden" key="Reden" [value]="$any(reg().status).reden"></div>
+        }
+        @case ('Doorgehaald') {
+          <div app-data-row i18n-key="@@summary.doorgehaaldOp" key="Doorgehaald op" [value]="$any(reg().status).doorgehaaldOp | date:'longDate'"></div>
+          <div app-data-row i18n-key="@@summary.reden" key="Reden" [value]="$any(reg().status).reden"></div>
+        }
+      }
+    </app-data-block>
   `,
 })
 export class RegistrationSummaryComponent {

src/app/registratie/ui/registration-summary/registration-summary.stories.ts

@@ -13,16 +13,11 @@ const base = {
 const meta: Meta<RegistrationSummaryComponent> = {
   title: 'Organisms/Registration Summary',
   component: RegistrationSummaryComponent,
-  parameters: {
-    // Structural: app-data-row's host sits between the <dl> and its <dt>/<dd> —
-    // fixed by the WP-12 Datablock rework. See docs/backlog/WP-12-datablock.md.
-    a11y: { disable: true },
-  },
 };
 export default meta;
 type Story = StoryObj<RegistrationSummaryComponent>;
 
-// Each story feeds a different union variant; the card renders only the rows
+// Each story feeds a different union variant; the datablock renders only the rows
 // that variant's data supports (note Doorgehaald has no herregistratie date).
 export const Geregistreerd: Story = {
   args: { reg: { ...base, status: { tag: 'Geregistreerd', herregistratieDatum: '2027-09-01' } } },

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

@@ -0,0 +1,33 @@
+import { Component, input } from '@angular/core';
+import { HeadingComponent } from '@shared/ui/heading/heading.component';
+
+/** Molecule: CIBG Huisstijl **Datablock** (designsystem.cibg.nl/componenten/datablock)
+    — THE way to show user/application data. A grey `.data-block` surface holds a white
+    `.block-wrapper` panel with a `<dl>` of projected `<app-data-row>`s. Use `stacked`
+    (`.data-block--stacked`) when labels/values are long and should stack. Replaces the
+    `app-card + dl` idiom for data views (the datablock carries its own surface, so it is
+    NOT wrapped in an `app-card` — see WP-12). When there is no visible `heading`, pass an
+    `ariaLabel` so the definition list is announced. */
+@Component({
+  selector: 'app-data-block',
+  imports: [HeadingComponent],
+  template: `
+    @if (heading()) { <app-heading [level]="level()">{{ heading() }}</app-heading> }
+    <div class="data-block" [class.data-block--stacked]="stacked()">
+      <div class="block-wrapper">
+        <dl class="mb-0" [attr.aria-label]="ariaLabel() || null">
+          <ng-content />
+        </dl>
+      </div>
+    </div>
+  `,
+})
+export class DataBlockComponent {
+  heading = input('');
+  /** Heading level when `heading` is set (default h3, matching `app-card`). */
+  level = input<1 | 2 | 3 | 4 | 5>(3);
+  /** Stacks label above value (`.data-block--stacked`) for long content. */
+  stacked = input(false);
+  /** Accessible name for the `<dl>` when there is no visible heading. */
+  ariaLabel = input('');
+}

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

@@ -0,0 +1,26 @@
+import type { Meta, StoryObj } from '@storybook/angular';
+import { moduleMetadata } from '@storybook/angular';
+import { DataBlockComponent } from './data-block.component';
+import { DataRowComponent } from '@shared/ui/data-row/data-row.component';
+
+const meta: Meta<DataBlockComponent> = {
+  title: 'Molecules/Data Block',
+  component: DataBlockComponent,
+  decorators: [moduleMetadata({ imports: [DataRowComponent] })],
+  render: (args) => ({
+    props: args,
+    template: `
+      <app-data-block [heading]="heading" [stacked]="stacked" [ariaLabel]="ariaLabel">
+        <div app-data-row key="BIG-nummer" value="19012345601"></div>
+        <div app-data-row key="Naam" value="J. de Vries"></div>
+        <div app-data-row key="Beroep" value="Verpleegkundige"></div>
+        <div app-data-row key="Registratiedatum" value="1 maart 2018"></div>
+      </app-data-block>`,
+  }),
+};
+export default meta;
+type Story = StoryObj<DataBlockComponent>;
+
+export const Default: Story = { args: { heading: 'Persoonsgegevens (BRP)' } };
+export const ZonderKop: Story = { args: { ariaLabel: 'Registratiegegevens' } };
+export const Stacked: Story = { args: { heading: 'Toelichting', stacked: true } };

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

@@ -1,12 +1,17 @@
 import { Component, input } from '@angular/core';
 
-/** Molecule: one key/value row in a CIBG Huisstijl "controlestap" data summary
+/** Molecule: one key/value row inside a CIBG Huisstijl **Datablock** (see
-    (`dt.col-md-4` / `dd.col-md-8`). `display:contents` so the dt/dd become direct
+    `data-block.component.ts`) — the row primitive of the datablock/`controlestap`
-    flex children of the parent `<dl class="row">` — the Bootstrap grid classes
+    data summary. Used on a `<div>` so the `<dl>`'s direct child is a native element
-    need that to lay out correctly. Wrap several in a `<dl class="row mb-0">`. */
+    (the HTML5.1 `dl > div > dt + dd` grouping), which keeps the definition list
+    axe-clean — a bare custom element between `<dl>` and its `<dt>/<dd>` trips axe's
+    definition-list rule regardless of `display:contents`. The host is the Bootstrap
+    `.row`; `dt.col-md-4`/`dd.col-md-8` give the label/value widths. Wrap several in a
+    `<dl class="mb-0">` (a `<app-data-block>`). Project custom content (e.g. a badge)
+    into the `<dd>` via `<ng-content>`. */
 @Component({
-  selector: 'app-data-row',
+  selector: 'div[app-data-row]',
-  styles: [`:host{display:contents}`],
+  host: { class: 'row' },
   template: `
     <dt class="col-md-4">{{ key() }}</dt>
     <dd class="col-md-8"><ng-content>{{ value() }}</ng-content></dd>

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

@@ -6,16 +6,11 @@ const meta: Meta<DataRowComponent> = {
   component: DataRowComponent,
   render: (args) => ({
     props: args,
-    // Rows are dt.col-md-4/dd.col-md-8 flex children of a Bootstrap .row dl (CIBG controlestap).
+    // A row is a `.row` <div> grouping dt.col-md-4/dd.col-md-8 inside the datablock <dl>
-    template: `<dl class="row mb-0"><app-data-row [key]="key" [value]="value" /></dl>`,
+    // (HTML5.1 dl > div > dt+dd — a native div child keeps the definition list axe-clean).
+    template: `<dl class="mb-0"><div app-data-row [key]="key" [value]="value"></div></dl>`,
   }),
   args: { key: 'BIG-nummer', value: '19012345601' },
-  parameters: {
-    // Structural: app-data-row's host sits between the <dl> and its <dt>/<dd> —
-    // axe's definition-list rule needs them adjacent regardless of `display:contents`.
-    // WP-12 (CIBG Datablock) reworks this markup; see docs/backlog/WP-12-datablock.md.
-    a11y: { disable: true },
-  },
 };
 export default meta;
 type Story = StoryObj<DataRowComponent>;

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

@@ -1,11 +1,13 @@
 import { Component, input, output } from '@angular/core';
+import { DataBlockComponent } from '@shared/ui/data-block/data-block.component';
 
 /** Molecule: one section of a CIBG Huisstijl "controlestap" (wizard review step) —
-    a heading with a "Wijzigen" link, and the section's `<app-data-row>`s in a
+    a heading with a "Wijzigen" link, and the section's `<app-data-row>`s in a CIBG
-    `.data-block > .block-wrapper > dl.row`. Domain-free; the caller supplies the
+    Datablock (composes `<app-data-block>`). Domain-free; the caller supplies the
     heading and decides what "Wijzigen" does (typically jump back to a step). */
 @Component({
   selector: 'app-review-section',
+  imports: [DataBlockComponent],
   template: `
     <div class="d-flex">
       <h2>{{ heading() }}</h2>
@@ -15,13 +17,7 @@ import { Component, input, output } from '@angular/core';
         </div>
       }
     </div>
-    <div class="data-block">
+    <app-data-block><ng-content /></app-data-block>
-      <div class="block-wrapper">
-        <dl class="row mb-0">
-          <ng-content />
-        </dl>
-      </div>
-    </div>
   `,
 })
 export class ReviewSectionComponent {

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

@@ -11,16 +11,11 @@ const meta: Meta<ReviewSectionComponent> = {
     props: args,
     template: `
       <app-review-section [heading]="heading" [editLabel]="editLabel" [editAriaLabel]="editAriaLabel" [showEdit]="showEdit">
-        <app-data-row key="Straat en huisnummer" value="Dorpsstraat 1" />
+        <div app-data-row key="Straat en huisnummer" value="Dorpsstraat 1"></div>
-        <app-data-row key="Postcode" value="1234 AB" />
+        <div app-data-row key="Postcode" value="1234 AB"></div>
-        <app-data-row key="Woonplaats" value="Utrecht" />
+        <div app-data-row key="Woonplaats" value="Utrecht"></div>
       </app-review-section>`,
   }),
-  parameters: {
-    // Structural: app-data-row's host sits between the <dl> and its <dt>/<dd> —
-    // fixed by the WP-12 Datablock rework. See docs/backlog/WP-12-datablock.md.
-    a11y: { disable: true },
-  },
 };
 export default meta;
 type Story = StoryObj<ReviewSectionComponent>;