MinBZK · rogier-barendregt · Apr 15, 2026 · Apr 15, 2026 · Apr 15, 2026 · Apr 15, 2026
diff --git a/.prettierignore b/.prettierignore
@@ -1,2 +1 @@
 *.njk
-style/
diff --git a/.stylelintrc.json b/.stylelintrc.json
@@ -1,7 +1,18 @@
 {
-	"plugins": ["stylelint-use-logical"],
+	"extends": ["stylelint-config-standard"],
+	"plugins": ["stylelint-use-logical", "stylelint-order"],
 	"rules": {
 		"csstools/use-logical": "always",
-		"no-descending-specificity": nul
+		"order/properties-alphabetical-order": true,
+		"import-notation": null,
+		"font-family-name-quotes": null,
+		"rule-empty-line-before": null,
+		"at-rule-empty-line-before": null,
+		"comment-empty-line-before": null,
+		"media-feature-range-notation": null,
+		"no-descending-specificity": null,
+		"property-no-deprecated": null,
+		"selector-class-pattern": null,
+		"no-duplicate-selectors": null
 	}
 }
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -4,5 +4,13 @@
 	},
 	"emmet.includeLanguages": {
 		"nunjucks": "html"
-	}
+	},
+	"[css]": {
+		"editor.defaultFormatter": "esbenp.prettier-vscode",
+		"editor.formatOnSave": true
+	},
+	"editor.codeActionsOnSave": {
+		"source.fixAll.stylelint": "explicit"
+	},
+	"stylelint.validate": ["css"]
 }
diff --git a/_data/berichtenboxData.js b/_data/berichtenboxData.js
@@ -1,5 +1,5 @@
 // Genereert de dataset voor de FBS Berichtenbox-mock.
-// 400 magazijnen (10 instanties + 390 gemeentes), 120 berichten, 2 voorgevulde mappen.
+// 10 instanties + echte gemeentes, 120 berichten, 2 voorgevulde mappen.
 // Vaste seed zodat dezelfde dataset ontstaat bij elke build (nodig voor reproduceerbare permalinks).
 
 const AANTAL_BERICHTEN = 120;
@@ -18,42 +18,10 @@ const INSTANTIES = [
 	{ id: "kadaster", naam: "Kadaster" },
 ];
 
-// Echte Nederlandse gemeentenamen; aangevuld tot 390 hieronder met fictieve varianten.
 const GEMEENTES = [
-	"Amsterdam", "Rotterdam", "'s-Gravenhage", "Utrecht", "Eindhoven", "Groningen",
-	"Tilburg", "Almere", "Breda", "Nijmegen", "Enschede", "Apeldoorn", "Haarlem",
-	"Arnhem", "Amersfoort", "Zaanstad", "'s-Hertogenbosch", "Haarlemmermeer", "Zwolle",
-	"Zoetermeer", "Leeuwarden", "Leiden", "Dordrecht", "Maastricht", "Emmen",
-	"Ede", "Westland", "Venlo", "Delft", "Deventer", "Alkmaar", "Helmond", "Sittard-Geleen",
-	"Alphen aan den Rijn", "Hilversum", "Heerlen", "Amstelveen", "Roosendaal",
-	"Purmerend", "Oss", "Schiedam", "Hoorn", "Spijkenisse", "Gouda", "Lelystad",
-	"Vlaardingen", "Almelo", "Assen", "Capelle aan den IJssel", "Veenendaal",
-	"Bergen op Zoom", "Nieuwegein", "Hengelo", "Zeist", "Katwijk", "Roermond",
-	"Hardenberg", "Tiel", "Zutphen", "Weert", "Middelburg", "Kerkrade",
-	"Papendrecht", "Rijswijk", "Brunssum", "Waalwijk", "Ridderkerk", "Barneveld",
-	"Culemborg", "IJsselstein", "Gorinchem", "Houten", "Woerden", "Terneuzen",
-	"Stichtse Vecht", "Wageningen", "Harderwijk", "Noordoostpolder", "Soest",
-	"Veldhoven", "Doetinchem", "Huizen", "De Bilt", "Etten-Leur", "Oosterhout",
-	"Smallingerland", "Goes", "Veere", "Kampen", "Meppel", "Epe", "Dronten", "Coevorden",
-	"Zandvoort", "Vlissingen", "Opsterland", "Sluis", "Stadskanaal", "Emmeloord",
-	"Ooststellingwerf", "Beverwijk", "Hof van Twente", "Teylingen", "Wijchen",
-	"Noordwijk", "Bloemendaal", "Weesp", "Nijkerk", "Montferland", "Medemblik",
-	"Heiloo", "Geldrop-Mierlo", "Waadhoeke", "Drechterland", "Bodegraven-Reeuwijk",
-	"Bunnik", "Oirschot", "Oude IJsselstreek", "Oudewater", "Pijnacker-Nootdorp",
-	"Raalte", "Renkum", "Rheden", "Rhenen", "Roerdalen", "Staphorst", "Steenbergen",
-	"Steenwijkerland", "Tynaarlo", "Tytsjerksteradiel", "Uden", "Uithoorn",
-	"Urk", "Valkenburg aan de Geul", "Valkenswaard", "Veldhoven", "Venray",
-	"Voerendaal", "Voorst", "Vught", "Waddinxveen", "Wassenaar", "Waterland",
-	"Westerveld", "Westervoort", "Westland", "Wierden", "Wijdemeren", "Winterswijk",
-	"Zevenaar", "Zoeterwoude", "Zuidplas", "Zundert", "Zwijndrecht", "Noardeast-Fryslân",
-	"Vijfheerenlanden", "Molenlanden", "Het Hogeland", "Westerkwartier", "Midden-Groningen",
-	"Dijk en Waard", "Maashorst", "Land van Cuijk", "Voorne aan Zee", "Altena",
-	"Nissewaard", "Gooise Meren", "Krimpenerwaard", "De Fryske Marren", "De Wolden",
-	"Dantumadiel", "Eemsdelta", "Meierijstad",
+	"'s-Gravenhage",
+	"Voorburg",
 ];
-while (GEMEENTES.length < 390) {
-	GEMEENTES.push(`Fictief ${GEMEENTES.length + 1}`);
-}
 
 function slugify(naam) {
 	return naam

diff --git a/_includes/base.njk b/_includes/base.njk
@@ -43,6 +43,7 @@
     <script src="{{ '/assets/javascript/account-switcher.js' | url }}"></script>
     <script src="{{ '/assets/javascript/content-interactions.js' | url }}"></script>
     <script src="{{ '/assets/javascript/feature-flags.js' | url }}"></script>
+    <script src="{{ '/assets/javascript/tab-interface.js' | url }}"></script>
     <script src="{{ '/assets/javascript/berichtenbox.js' | url }}"></script>
 </body>
 </html>
diff --git a/_includes/berichtenbox-data.njk b/_includes/berichtenbox-data.njk
@@ -0,0 +1,8 @@
+<script>
+	window.berichtenboxData = {
+		berichten: {{ berichtenboxData.berichten | dump | safe }},
+		magazijnen: {{ berichtenboxData.magazijnen | dump | safe }},
+		mappen: {{ berichtenboxData.mappen | dump | safe }},
+		aantalMagazijnen: {{ berichtenboxData.aantalMagazijnen }}
+	};
+</script>
diff --git a/_includes/berichtenbox-footer-link.njk b/_includes/berichtenbox-footer-link.njk
diff --git a/_includes/berichtenbox-row.njk b/_includes/berichtenbox-row.njk
@@ -1,11 +1,8 @@
 {# Verwacht: bericht (object uit berichtenboxData.berichten) #}
-<li class="berichtenbox-rij{% if bericht.isOngelezen %} is-ongelezen{% endif %}" data-bericht-id="{{ bericht.id }}" data-afzender-id="{{ bericht.magazijnId }}"{% if bericht.map %} data-map="{{ bericht.map }}"{% endif %}>
-	<a href="{{ '/moza/berichtenbox/bericht/' | url }}{{ bericht.id }}/">
-		{% if bericht.isOngelezen %}<span class="visually-hidden">Ongelezen. </span>{% endif %}
-		<span class="berichtenbox-rij-afzender">{{ bericht.afzender }}</span>
-		<span class="berichtenbox-rij-onderwerp">{{ bericht.onderwerp }}</span>
-		<span class="berichtenbox-rij-datum">{{ bericht.datum | datumNL }}</span>
-		{% if bericht.heeftBijlage %}<span class="berichtenbox-rij-bijlage" aria-hidden="true">📎</span><span class="visually-hidden">Heeft bijlage. </span>{% endif %}
-		{% if bericht.map %}<span class="berichtenbox-rij-maplabel" data-maplabel>{{ bericht.map }}</span>{% endif %}
-	</a>
-</li>
+<tr class="berichtenbox-row{% if bericht.isOngelezen %} is-unread{% endif %}" data-bericht-id="{{ bericht.id }}" data-afzender-id="{{ bericht.magazijnId }}"{% if bericht.map %} data-map="{{ bericht.map }}"{% endif %}>
+	<td class="berichtenbox-row-sender">{% if bericht.isOngelezen %}<span class="visually-hidden">Ongelezen. </span>{% endif %}{{ bericht.afzender }}</td>
+	<td class="berichtenbox-row-subject"><a href="{{ '/moza/berichtenbox/bericht/' | url }}{{ bericht.id }}/">{{ bericht.onderwerp }}</a></td>
+	<td class="berichtenbox-row-date">{{ bericht.datum | datumNL }}</td>
+	<td class="berichtenbox-row-attachment">{% if bericht.heeftBijlage %}<svg class="icon-md" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" aria-hidden="true"><path fill="currentColor" d="M48.5 16.1 24.6 40c-2.7 2.7-7.1 2.7-9.8 0-2.7-2.7-2.7-7.1 0-9.8L36.2 8.8c1.8-1.8 4.7-1.8 6.5 0s1.8 4.7 0 6.5L22.4 35.6c-.9.9-2.4.9-3.3 0-.9-.9-.9-2.4 0-3.3l17.1-17.1-2.8-2.8L16.3 29.5c-2.5 2.5-2.5 6.4 0 8.9 2.5 2.5 6.4 2.5 8.9 0L45.5 18c3.3-3.3 3.3-8.8 0-12.1s-8.8-3.3-12.1 0L11.9 27.4c-4.3 4.3-4.3 11.2 0 15.4 4.3 4.3 11.2 4.3 15.4 0L51.3 18.9l-2.8-2.8z"/></svg><span class="visually-hidden">Heeft bijlage</span>{% endif %}</td>
+	<!-- <td class="berichtenbox-row-folder-label">{% if bericht.map %}<span data-maplabel>{{ bericht.map }}</span>{% endif %}</td> -->
+</tr>
diff --git a/_includes/berichtenbox-side-nav.njk b/_includes/berichtenbox-side-nav.njk
diff --git a/_includes/berichtenbox-tabs.njk b/_includes/berichtenbox-tabs.njk
@@ -0,0 +1,47 @@
+{% set box = berichtenboxData %}
+{% set path = page.url %}
+{% set isArchief = '/berichtenbox-archief/' in path %}
+{% set isPrullenbak = '/berichtenbox-prullenbak/' in path %}
+{# Inbox is current voor alle berichtenbox-pagina's die niet archief/prullenbak zijn (ook detail en paginering). #}
+{% set isInbox = '/moza/berichtenbox' in path and not isArchief and not isPrullenbak %}
+
+<nav class="berichtenbox-nav" aria-label="Berichtenbox">
+	<ul role="tablist">
+		<li role="presentation">
+			<a role="tab" href="{{ '/moza/berichtenbox/' | url }}"{% if isInbox %} aria-current="page" aria-selected="true"{% endif %}>
+				Inbox
+				<span class="badge" data-berichtenbox-count="inbox">{{ box.berichten | selectattr("isOngelezen") | length }}</span>
+			</a>
+		</li>
+		<li role="presentation">
+			<a role="tab" href="{{ '/moza/berichtenbox/berichtenbox-archief/' | url }}"{% if isArchief %} aria-current="page" aria-selected="true"{% endif %}>
+				<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" class="icon-sm">
+					<path fill="currentColor" d="M7 23v33c0 .55.45 1 1 1h48c.55 0 1-.45 1-1V23c0-.55-.45-1-1-1H8c-.55 0-1 .45-1 1m18 7h14v7H25v-7Zm17 20.5c0 .83-.67 1.5-1.5 1.5h-17c-.83 0-1.5-.67-1.5-1.5V47c0-.83.67-1.5 1.5-1.5s1.5.67 1.5 1.5v2h14v-2c0-.83.67-1.5 1.5-1.5s1.5.67 1.5 1.5v3.5ZM51 16H13c-.55 0-1 .45-1 1v3h40v-3c0-.55-.45-1-1-1m-5-6H18c-.55 0-1 .45-1 1v3h30v-3c0-.55-.45-1-1-1" />
+				</svg>
+				Archief
+				<!-- <span class="badge" data-berichtenbox-count="archief">0</span> -->
+			</a>
+		</li>
+		<li role="presentation">
+			<a role="tab" href="{{ '/moza/berichtenbox/berichtenbox-prullenbak/' | url }}"{% if isPrullenbak %} aria-current="page" aria-selected="true"{% endif %}><svg xmlns="http://www.w3.org/2000/svg"  class="icon-sm" viewBox="0 0 64 64">
+	<path fill="none" d="M0 0h64v64H0z" />
+	<path fill="currentColor" d="M10.67 18.67zm40-8h-8V8A2.67 2.67 0 0 0 40 5.33H24A2.67 2.67 0 0 0 21.33 8v2.67h-8a2.67 2.67 0 0 0-2.67 2.67v5.33h14.28s.15.32-.31.44c-.58.16-11.31 1.43-11.31 1.43V56a2.67 2.67 0 0 0 2.67 2.67h32A2.67 2.67 0 0 0 50.66 56V18.67h2.67v-5.33a2.67 2.67 0 0 0-2.67-2.67ZM24 50.67l-5.33 2.67V24.01H24v26.67Zm10.67 0-5.33 2.67V24.01h5.33v26.67Zm10.67 0-5.33 2.67V24.01h5.33v26.67ZM24.43 10.63v-.8c0-.94-.16-1.7.88-1.7h13.27c1.04 0 .88.76.88 1.7v.8H24.43Z" />
+</svg>
+				Prullenbak
+				<!-- <span class="badge" data-berichtenbox-count="prullenbak">0</span> -->
+			</a>
+		</li>
+		<li class="list-separation"><span class="visually-hidden">Mappen:</span></li>
+		{% for map in box.mappen %}
+			<li data-map-slug="{{ map.slug }}" role="presentation" class="berichtenbox-folder-user">
+				<a href="{{ '/moza/berichtenbox/' | url }}?map={{ map.slug }}">
+					<svg xmlns="http://www.w3.org/2000/svg" class="icon-sm" viewBox="0 0 64 64">
+						<path fill="currentColor" d="M58 15H29v-2c0-1.1-.9-2-2-2H12c-1.1 0-2 .9-2 2v4.69c7.13.47 40.09 2.62 40.59 2.75.28.07.38.21.4.34 0 .04.02.23-.01.23H4.53c-1.29 0-2.24 1.2-1.95 2.46l7.06 30c.27 1.16 1.18 1.54 2.36 1.54h46a2 2 0 0 0 2-2V17c0-1.1-.9-2-2-2" />
+					</svg>
+					{{ map.naam }}
+					<!-- <span class="badge" data-berichtenbox-count="map:{{ map.slug }}">0</span> -->
+				</a>
+			</li>
+		{% endfor %}
+	</ul>
+</nav>
diff --git a/_includes/side-nav-overheid.njk b/_includes/side-nav-overheid.njk
@@ -8,6 +8,7 @@
 					{% if item.icon %}{% icon item.icon %}{% endif %}
 					{{ item.label }}
 					{% if item.badge %}<span class="badge">{{ item.badge }}</span>{% endif %}
+					{% if item.label == "Berichtenbox" %}<span class="badge" data-berichtenbox-count="ongelezen">0</span>{% endif %}
 				</a>
 			</li>
 			{% endfor %}

diff --git a/_site/assets/icons/icon-archief.svg b/_site/assets/icons/icon-archief.svg
diff --git a/_site/assets/icons/icon-bijlage.svg b/_site/assets/icons/icon-bijlage.svg
diff --git a/_site/assets/icons/icon-weggooien.svg b/_site/assets/icons/icon-weggooien.svg