feat(FormField/FormFieldset): headingLevel en headingAppearance props voor label en legend

[jeffreylauwers]

User Story

Als ontwikkelaar wil ik via labelHeadingLevel en labelHeadingAppearance props op FormField (en equivalent op FormFieldset) kunnen aangeven dat de label/legend als heading gepresenteerd wordt, zodat ik het "één vraag per pagina" patroon kan toepassen zonder handmatig te componeren.

Context

Vervolg op #54 (stories voor het patroon). Waar dat issue de compositie toont via handmatige HTML/React, voegt dit issue een convenience-API toe aan de bestaande wrapper componenten.

De HTML-patronen zijn bewust anders per element-type:

FormFieldLabel — heading omsluit de label:

<h1 class="dsn-heading dsn-heading--heading-1">
  <label class="dsn-form-field-label" for="naam">Naam</label>
</h1>

FormFieldLegend — heading zit ín de legend:

<legend class="dsn-form-field-label">
  <h1 class="dsn-heading dsn-heading--heading-1">Geslacht</h1>
</legend>

Nieuwe props:

• FormFieldLabel + FormFieldLegend: headingLevel?: 1 | 2 | 3 | 4 | 5 | 6, headingAppearance?: 'heading-1' | ... | 'heading-6'
• FormField: labelHeadingLevel, labelHeadingAppearance (doorgestuurd naar FormFieldLabel)
• FormFieldset: legendHeadingLevel, legendHeadingAppearance (doorgestuurd naar FormFieldLegend)

Als alleen headingLevel opgegeven is (zonder headingAppearance), matcht de appearance het level — conform hoe het Heading component werkt (headingLevel={1} → headingAppearance="heading-1").

Component-level design tokens

Geen nieuwe tokens — de bestaande dsn-heading en dsn-form-field-label tokens worden hergebruikt.

Acceptance Criteria

• FormFieldLabel accepteert headingLevel en headingAppearance props; rendert een <h{n}> wrapper rondom de <label>
• FormFieldLegend accepteert headingLevel en headingAppearance props; rendert een <h{n}> binnenin de <legend>
• FormField accepteert labelHeadingLevel en labelHeadingAppearance; stuurt deze door naar FormFieldLabel
• FormFieldset accepteert legendHeadingLevel en legendHeadingAppearance; stuurt deze door naar FormFieldLegend
• Zonder heading-props is het gedrag identiek aan de huidige situatie (geen regressie)
• htmlTemplate in de stories is bijgewerkt voor de heading-HTML-structuur
• De stories uit docs(FormField/FormFieldset): stories voor "Label/Legend als Heading" patroon #54 worden bijgewerkt: ze gebruiken nu de nieuwe props i.p.v. handmatige compositie

Definition of Done

Voorbereiding

• Feature branch aangemaakt: git checkout -b feature/naam

Werkzaamheden

• Implementatie afgerond

Kwaliteitscontrole

• Tests groen: pnpm test
• TypeScript schoon: pnpm --filter storybook exec tsc --noEmit
• Lint schoon: pnpm lint

Documentatie

• MEMORY.md bijgewerkt indien nieuw patroon of architectuurkeuze
• Relevante .docs.md bijgewerkt

Oplevering

• PR aangemaakt: gh pr create
• CI groen op de branch
• PR gemerged: gh pr merge --merge

Notities / Open vragen

• Bij FormFieldLegend met heading: de <legend> krijgt dsn-form-field-label stijlen én de inner <h{n}> krijgt dsn-heading stijlen — controleer of CSS-conflicten optreden en overweeg een modifier klasse dsn-form-field-label--has-heading op de legend om de eigen typografie te supprimeren
• suffix prop: blijft zichtbaar binnen de heading-wrapper — controleer positionering bij beide element-types
• Bepaal of de <h{n}> op FormFieldLabel margin/spacing erft van dsn-heading of van dsn-form-field-label, en of dat corrigeerd moet worden