fix(cibg): wizard fields render as grey fieldset groups

Wizard steps rendered bare .form-group divs, so CIBG's
".form-horizontal fieldset { background:#f1f5f9; margin-bottom:1.25em }"
never matched and inputs showed on white instead of the grey CIBG surface.

Wrap each logical field group per step in a <fieldset> (intake, herregistratie
and registratie wizards); CIBG then gives every group its grey surface with a
1.25em gap between groups. The shell stays group-agnostic (no outer fieldset,
which would hide the white gaps). address-fields already used a <fieldset>.

Adds intake-wizard.component.spec.ts asserting the buitenland step renders its
groups as separate fieldsets (guards against the wrapping being dropped again).

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

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

@@ -64,59 +64,63 @@ import { UploadState, initialUpload, deliveryRefs } from '@shared/upload/upload.
     >
       @switch (step()) {
         @case (1) {
-          <app-form-field
-            i18n-label="@@herregWizard.urenLabel"
-            label="Gewerkte uren (afgelopen 5 jaar)"
-            fieldId="uren"
-            required
-            [error]="errUren()"
-          >
-            <app-text-input
-              inputId="uren"
-              [ngModel]="draft().uren"
-              (ngModelChange)="dispatch({ tag: 'SetField', key: 'uren', value: $event })"
-              name="uren"
-              [invalid]="!!errUren()"
-              i18n-placeholder="@@herregWizard.urenPlaceholder"
-              placeholder="bijv. 4160"
-            />
-          </app-form-field>
-          <app-form-field
-            i18n-label="@@herregWizard.jarenLabel"
-            label="Aantal jaren werkzaam"
-            fieldId="jaren"
-            required
-            [error]="errJaren()"
-          >
-            <app-text-input
-              inputId="jaren"
-              [ngModel]="draft().jaren"
-              (ngModelChange)="dispatch({ tag: 'SetField', key: 'jaren', value: $event })"
-              name="jaren"
-              [invalid]="!!errJaren()"
-              i18n-placeholder="@@herregWizard.jarenPlaceholder"
-              placeholder="bijv. 5"
-            />
-          </app-form-field>
+          <fieldset>
+            <app-form-field
+              i18n-label="@@herregWizard.urenLabel"
+              label="Gewerkte uren (afgelopen 5 jaar)"
+              fieldId="uren"
+              required
+              [error]="errUren()"
+            >
+              <app-text-input
+                inputId="uren"
+                [ngModel]="draft().uren"
+                (ngModelChange)="dispatch({ tag: 'SetField', key: 'uren', value: $event })"
+                name="uren"
+                [invalid]="!!errUren()"
+                i18n-placeholder="@@herregWizard.urenPlaceholder"
+                placeholder="bijv. 4160"
+              />
+            </app-form-field>
+            <app-form-field
+              i18n-label="@@herregWizard.jarenLabel"
+              label="Aantal jaren werkzaam"
+              fieldId="jaren"
+              required
+              [error]="errJaren()"
+            >
+              <app-text-input
+                inputId="jaren"
+                [ngModel]="draft().jaren"
+                (ngModelChange)="dispatch({ tag: 'SetField', key: 'jaren', value: $event })"
+                name="jaren"
+                [invalid]="!!errJaren()"
+                i18n-placeholder="@@herregWizard.jarenPlaceholder"
+                placeholder="bijv. 5"
+              />
+            </app-form-field>
+          </fieldset>
         }
         @case (2) {
-          <app-form-field
-            i18n-label="@@herregWizard.puntenLabel"
-            label="Behaalde nascholingspunten"
-            fieldId="punten"
-            required
-            [error]="errPunten()"
-          >
-            <app-text-input
-              inputId="punten"
-              [ngModel]="draft().punten"
-              (ngModelChange)="dispatch({ tag: 'SetField', key: 'punten', value: $event })"
-              name="punten"
-              [invalid]="!!errPunten()"
-              i18n-placeholder="@@herregWizard.puntenPlaceholder"
-              placeholder="bijv. 200"
-            />
-          </app-form-field>
+          <fieldset>
+            <app-form-field
+              i18n-label="@@herregWizard.puntenLabel"
+              label="Behaalde nascholingspunten"
+              fieldId="punten"
+              required
+              [error]="errPunten()"
+            >
+              <app-text-input
+                inputId="punten"
+                [ngModel]="draft().punten"
+                (ngModelChange)="dispatch({ tag: 'SetField', key: 'punten', value: $event })"
+                name="punten"
+                [invalid]="!!errPunten()"
+                i18n-placeholder="@@herregWizard.puntenPlaceholder"
+                placeholder="bijv. 200"
+              />
+            </app-form-field>
+          </fieldset>
         }
         @case (3) {
           <app-document-upload

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

@@ -0,0 +1,36 @@
+import { provideHttpClient } from '@angular/common/http';
+import { TestBed } from '@angular/core/testing';
+import { describe, expect, it } from 'vitest';
+import { provideApiClient } from '@shared/infrastructure/api-client.provider';
+import { IntakeWizardComponent } from './intake-wizard.component';
+import { IntakeState } from '@herregistratie/domain/intake.machine';
+
+// Regression: wizard steps must render their logical field groups as separate CIBG grey
+// <fieldset> blocks (`.form-horizontal fieldset` ⇒ #f1f5f9, 1.25em gap). If the fieldset
+// wrapping is dropped, the inputs revert to bare white. The buitenland step with
+// buitenlandGewerkt='ja' has two groups (the question + the land/uren follow-up), so it
+// must render ≥2 fieldsets, each holding a form-group.
+const buitenlandJa: IntakeState = {
+  tag: 'Answering',
+  answers: { buitenlandGewerkt: 'ja' },
+  cursor: 0,
+  errors: {},
+  scholingThreshold: 1000,
+};
+
+describe('IntakeWizardComponent', () => {
+  it('renders each field group as its own grey <fieldset>', () => {
+    TestBed.configureTestingModule({
+      providers: [provideHttpClient(), provideApiClient()],
+    });
+    const fixture = TestBed.createComponent(IntakeWizardComponent);
+    fixture.componentInstance.dispatch({ tag: 'Seed', state: buitenlandJa });
+    fixture.detectChanges();
+
+    const fieldsets: HTMLElement[] = Array.from(
+      fixture.nativeElement.querySelectorAll('form.form-horizontal fieldset'),
+    );
+    expect(fieldsets.length).toBeGreaterThanOrEqual(2);
+    fieldsets.forEach((fs) => expect(fs.querySelector('.form-group')).toBeTruthy());
+  });
+});

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

@@ -71,105 +71,115 @@ import { IntakePolicyStore } from '@herregistratie/application/intake-policy.sto
     >
       @switch (step()) {
         @case ('buitenland') {
-          <app-form-field
-            i18n-label="@@intake.q.buitenland"
-            label="Heeft u de afgelopen 5 jaar buiten Nederland gewerkt?"
-            fieldId="buitenlandGewerkt"
-            required
-            [error]="err('buitenlandGewerkt')"
-          >
-            <app-radio-group
-              name="buitenlandGewerkt"
-              [options]="jaNee"
-              [ngModel]="answers().buitenlandGewerkt ?? ''"
-              (ngModelChange)="set('buitenlandGewerkt', $event)"
-            />
-          </app-form-field>
+          <fieldset>
+            <app-form-field
+              i18n-label="@@intake.q.buitenland"
+              label="Heeft u de afgelopen 5 jaar buiten Nederland gewerkt?"
+              fieldId="buitenlandGewerkt"
+              required
+              [error]="err('buitenlandGewerkt')"
+            >
+              <app-radio-group
+                name="buitenlandGewerkt"
+                [options]="jaNee"
+                [ngModel]="answers().buitenlandGewerkt ?? ''"
+                (ngModelChange)="set('buitenlandGewerkt', $event)"
+              />
+            </app-form-field>
+          </fieldset>
           @if (answers().buitenlandGewerkt === 'ja') {
-            <app-form-field
-              i18n-label="@@intake.q.land"
-              label="In welk land?"
-              fieldId="land"
-              required
-              [error]="err('land')"
-            >
-              <app-text-input
-                inputId="land"
-                [ngModel]="answers().land ?? ''"
-                (ngModelChange)="set('land', $event)"
-                name="land"
-                i18n-placeholder="@@intake.q.landPlaceholder"
-                placeholder="bijv. België"
-              />
-            </app-form-field>
-            <app-form-field
-              i18n-label="@@intake.q.buitenlandseUren"
-              label="Hoeveel uur heeft u daar gewerkt?"
-              fieldId="buitenlandseUren"
-              required
-              [error]="err('buitenlandseUren')"
-            >
-              <app-text-input
-                inputId="buitenlandseUren"
-                [ngModel]="answers().buitenlandseUren ?? ''"
-                (ngModelChange)="set('buitenlandseUren', $event)"
-                name="buitenlandseUren"
-                i18n-placeholder="@@intake.q.buitenlandseUrenPlaceholder"
-                placeholder="bijv. 800"
-              />
-            </app-form-field>
+            <fieldset>
+              <app-form-field
+                i18n-label="@@intake.q.land"
+                label="In welk land?"
+                fieldId="land"
+                required
+                [error]="err('land')"
+              >
+                <app-text-input
+                  inputId="land"
+                  [ngModel]="answers().land ?? ''"
+                  (ngModelChange)="set('land', $event)"
+                  name="land"
+                  i18n-placeholder="@@intake.q.landPlaceholder"
+                  placeholder="bijv. België"
+                />
+              </app-form-field>
+              <app-form-field
+                i18n-label="@@intake.q.buitenlandseUren"
+                label="Hoeveel uur heeft u daar gewerkt?"
+                fieldId="buitenlandseUren"
+                required
+                [error]="err('buitenlandseUren')"
+              >
+                <app-text-input
+                  inputId="buitenlandseUren"
+                  [ngModel]="answers().buitenlandseUren ?? ''"
+                  (ngModelChange)="set('buitenlandseUren', $event)"
+                  name="buitenlandseUren"
+                  i18n-placeholder="@@intake.q.buitenlandseUrenPlaceholder"
+                  placeholder="bijv. 800"
+                />
+              </app-form-field>
+            </fieldset>
           }
         }
         @case ('werk') {
-          <app-form-field
-            i18n-label="@@intake.q.urenNl"
-            label="Gewerkte uren in Nederland (afgelopen 5 jaar)"
-            fieldId="uren"
-            required
-            [error]="err('uren')"
-          >
-            <app-text-input
-              inputId="uren"
-              [ngModel]="answers().uren ?? ''"
-              (ngModelChange)="set('uren', $event)"
-              name="uren"
-              i18n-placeholder="@@intake.q.urenNlPlaceholder"
-              placeholder="bijv. 4160"
-            />
-          </app-form-field>
-          @if (scholingZichtbaar()) {
+          <fieldset>
             <app-form-field
-              i18n-label="@@intake.q.scholing"
-              label="U werkte relatief weinig uren. Heeft u aanvullende scholing gevolgd?"
-              fieldId="scholingGevolgd"
+              i18n-label="@@intake.q.urenNl"
+              label="Gewerkte uren in Nederland (afgelopen 5 jaar)"
+              fieldId="uren"
               required
-              [error]="err('scholingGevolgd')"
-            >
-              <app-radio-group
-                name="scholingGevolgd"
-                [options]="jaNee"
-                [ngModel]="answers().scholingGevolgd ?? ''"
-                (ngModelChange)="set('scholingGevolgd', $event)"
-              />
-            </app-form-field>
-          }
-          @if (answers().scholingGevolgd === 'ja') {
-            <app-form-field
-              i18n-label="@@intake.q.punten"
-              label="Behaalde nascholingspunten"
-              fieldId="punten"
-              required
-              [error]="err('punten')"
+              [error]="err('uren')"
             >
               <app-text-input
-                inputId="punten"
-                [ngModel]="answers().punten ?? ''"
-                (ngModelChange)="set('punten', $event)"
-                name="punten"
-                i18n-placeholder="@@intake.q.puntenPlaceholder"
-                placeholder="bijv. 200"
+                inputId="uren"
+                [ngModel]="answers().uren ?? ''"
+                (ngModelChange)="set('uren', $event)"
+                name="uren"
+                i18n-placeholder="@@intake.q.urenNlPlaceholder"
+                placeholder="bijv. 4160"
               />
             </app-form-field>
+          </fieldset>
+          @if (scholingZichtbaar()) {
+            <fieldset>
+              <app-form-field
+                i18n-label="@@intake.q.scholing"
+                label="U werkte relatief weinig uren. Heeft u aanvullende scholing gevolgd?"
+                fieldId="scholingGevolgd"
+                required
+                [error]="err('scholingGevolgd')"
+              >
+                <app-radio-group
+                  name="scholingGevolgd"
+                  [options]="jaNee"
+                  [ngModel]="answers().scholingGevolgd ?? ''"
+                  (ngModelChange)="set('scholingGevolgd', $event)"
+                />
+              </app-form-field>
+            </fieldset>
+          }
+          @if (answers().scholingGevolgd === 'ja') {
+            <fieldset>
+              <app-form-field
+                i18n-label="@@intake.q.punten"
+                label="Behaalde nascholingspunten"
+                fieldId="punten"
+                required
+                [error]="err('punten')"
+              >
+                <app-text-input
+                  inputId="punten"
+                  [ngModel]="answers().punten ?? ''"
+                  (ngModelChange)="set('punten', $event)"
+                  name="punten"
+                  i18n-placeholder="@@intake.q.puntenPlaceholder"
+                  placeholder="bijv. 200"
+                />
+              </app-form-field>
+            </fieldset>
           }
         }
         @case ('review') {

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

@@ -130,40 +130,44 @@ const NL_TAALVAARDIGHEID_VRAAG = 'nl-taalvaardigheid';
               }"
               (fieldChange)="set($event.key, $event.value)"
             />
-            <app-form-field
-              i18n-label="@@regWizard.correspondentieLabel"
-              label="Hoe wilt u correspondentie ontvangen?"
-              fieldId="correspondentie"
-              required
-              [error]="err('correspondentie')"
-            >
-              <app-radio-group
-                name="correspondentie"
-                [options]="kanalen"
-                [invalid]="!!err('correspondentie')"
-                [ngModel]="draft().correspondentie ?? ''"
-                (ngModelChange)="setKanaal($event)"
-              />
-            </app-form-field>
-            @if (draft().correspondentie === 'email') {
+            <fieldset>
               <app-form-field
-                i18n-label="@@regWizard.emailLabel"
-                label="E-mailadres"
-                fieldId="email"
+                i18n-label="@@regWizard.correspondentieLabel"
+                label="Hoe wilt u correspondentie ontvangen?"
+                fieldId="correspondentie"
                 required
-                [error]="err('email')"
+                [error]="err('correspondentie')"
               >
-                <app-text-input
-                  inputId="email"
-                  type="email"
-                  [invalid]="!!err('email')"
-                  [ngModel]="draft().email ?? ''"
-                  (ngModelChange)="set('email', $event)"
-                  name="email"
-                  i18n-placeholder="@@regWizard.emailPlaceholder"
-                  placeholder="naam@voorbeeld.nl"
+                <app-radio-group
+                  name="correspondentie"
+                  [options]="kanalen"
+                  [invalid]="!!err('correspondentie')"
+                  [ngModel]="draft().correspondentie ?? ''"
+                  (ngModelChange)="setKanaal($event)"
                 />
               </app-form-field>
+            </fieldset>
+            @if (draft().correspondentie === 'email') {
+              <fieldset>
+                <app-form-field
+                  i18n-label="@@regWizard.emailLabel"
+                  label="E-mailadres"
+                  fieldId="email"
+                  required
+                  [error]="err('email')"
+                >
+                  <app-text-input
+                    inputId="email"
+                    type="email"
+                    [invalid]="!!err('email')"
+                    [ngModel]="draft().email ?? ''"
+                    (ngModelChange)="set('email', $event)"
+                    name="email"
+                    i18n-placeholder="@@regWizard.emailPlaceholder"
+                    placeholder="naam@voorbeeld.nl"
+                  />
+                </app-form-field>
+              </fieldset>
             }
           }
         }
@@ -171,21 +175,23 @@ const NL_TAALVAARDIGHEID_VRAAG = 'nl-taalvaardigheid';
           <app-async [data]="lookupRd()">
             <ng-template appAsyncLoaded>
               @if (duoData(); as data) {
-                <app-form-field
-                  i18n-label="@@regWizard.diplomaLabel"
-                  label="Kies het diploma waarmee u zich wilt registreren"
-                  fieldId="diploma"
-                  required
-                  [error]="err('diploma')"
-                >
-                  <app-radio-group
-                    name="diploma"
-                    [options]="diplomaOptions(data)"
-                    [invalid]="!!err('diploma')"
-                    [ngModel]="diplomaKeuze()"
-                    (ngModelChange)="onDiplomaKeuze(data, $event)"
-                  />
-                </app-form-field>
+                <fieldset>
+                  <app-form-field
+                    i18n-label="@@regWizard.diplomaLabel"
+                    label="Kies het diploma waarmee u zich wilt registreren"
+                    fieldId="diploma"
+                    required
+                    [error]="err('diploma')"
+                  >
+                    <app-radio-group
+                      name="diploma"
+                      [options]="diplomaOptions(data)"
+                      [invalid]="!!err('diploma')"
+                      [ngModel]="diplomaKeuze()"
+                      (ngModelChange)="onDiplomaKeuze(data, $event)"
+                    />
+                  </app-form-field>
+                </fieldset>
 
                 @if (handmatigActief()) {
                   <app-alert type="warning" i18n="@@regWizard.handmatigWaarschuwing"
@@ -193,20 +199,22 @@ const NL_TAALVAARDIGHEID_VRAAG = 'nl-taalvaardigheid';
                     uw beroep en beantwoord de aanvullende vragen; uw aanvraag wordt daarna
                     handmatig beoordeeld.</app-alert
                   >
-                  <app-form-field
-                    i18n-label="@@regWizard.beroepLabel"
-                    label="Voor welk beroep wilt u zich registreren?"
-                    fieldId="hm-beroep"
-                    [error]="err('diploma')"
-                  >
-                    <app-radio-group
-                      name="hm-beroep"
-                      [options]="beroepOptions(data)"
-                      [invalid]="!!err('diploma')"
-                      [ngModel]="draft().beroep ?? ''"
-                      (ngModelChange)="dispatch({ tag: 'DeclareerBeroep', beroep: $event })"
-                    />
-                  </app-form-field>
+                  <fieldset>
+                    <app-form-field
+                      i18n-label="@@regWizard.beroepLabel"
+                      label="Voor welk beroep wilt u zich registreren?"
+                      fieldId="hm-beroep"
+                      [error]="err('diploma')"
+                    >
+                      <app-radio-group
+                        name="hm-beroep"
+                        [options]="beroepOptions(data)"
+                        [invalid]="!!err('diploma')"
+                        [ngModel]="draft().beroep ?? ''"
+                        (ngModelChange)="dispatch({ tag: 'DeclareerBeroep', beroep: $event })"
+                      />
+                    </app-form-field>
+                  </fieldset>
                 } @else if (draft().beroep) {
                   <dl class="mb-0 app-section">
                     <div
@@ -218,35 +226,39 @@ const NL_TAALVAARDIGHEID_VRAAG = 'nl-taalvaardigheid';
                   </dl>
                 }
 
-                @for (q of actieveVragen(data); track q.id) {
-                  <app-form-field
-                    [label]="q.vraag"
-                    [fieldId]="'vraag-' + q.id"
-                    [error]="vraagErr(q.id)"
-                  >
-                    @if (q.type === 'ja-nee') {
-                      <app-radio-group
-                        [name]="'vraag-' + q.id"
-                        [options]="jaNee"
-                        [invalid]="!!vraagErr(q.id)"
-                        [ngModel]="antwoord(q.id)"
-                        (ngModelChange)="
-                          dispatch({ tag: 'SetAntwoord', vraagId: q.id, value: $event })
-                        "
-                        [ngModelOptions]="{ standalone: true }"
-                      />
-                    } @else {
-                      <app-text-input
-                        [inputId]="'vraag-' + q.id"
-                        [invalid]="!!vraagErr(q.id)"
-                        [ngModel]="antwoord(q.id)"
-                        (ngModelChange)="
-                          dispatch({ tag: 'SetAntwoord', vraagId: q.id, value: $event })
-                        "
-                        [ngModelOptions]="{ standalone: true }"
-                      />
+                @if (actieveVragen(data).length) {
+                  <fieldset>
+                    @for (q of actieveVragen(data); track q.id) {
+                      <app-form-field
+                        [label]="q.vraag"
+                        [fieldId]="'vraag-' + q.id"
+                        [error]="vraagErr(q.id)"
+                      >
+                        @if (q.type === 'ja-nee') {
+                          <app-radio-group
+                            [name]="'vraag-' + q.id"
+                            [options]="jaNee"
+                            [invalid]="!!vraagErr(q.id)"
+                            [ngModel]="antwoord(q.id)"
+                            (ngModelChange)="
+                              dispatch({ tag: 'SetAntwoord', vraagId: q.id, value: $event })
+                            "
+                            [ngModelOptions]="{ standalone: true }"
+                          />
+                        } @else {
+                          <app-text-input
+                            [inputId]="'vraag-' + q.id"
+                            [invalid]="!!vraagErr(q.id)"
+                            [ngModel]="antwoord(q.id)"
+                            (ngModelChange)="
+                              dispatch({ tag: 'SetAntwoord', vraagId: q.id, value: $event })
+                            "
+                            [ngModelOptions]="{ standalone: true }"
+                          />
+                        }
+                      </app-form-field>
                     }
-                  </app-form-field>
+                  </fieldset>
                 }
               }
             </ng-template>

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

@@ -90,6 +90,10 @@ export type WizardStatus = 'editing' | 'submitting' | 'submitted' | 'failed';
               <span class="meta" i18n="@@form.verplichteVelden">* verplichte velden</span>
             </div>
           </div>
+          <!-- Wizard pages wrap their field groups in <fieldset>s; CIBG's
+               ".form-horizontal fieldset" gives each a grey #f1f5f9 surface with a 1.25em
+               gap. The shell stays group-agnostic and does NOT add its own fieldset (an
+               outer grey fieldset would hide the white gaps between the page groups). -->
           <ng-content />
           <hr />
           <div class="d-flex flex-column flex-sm-row-reverse">