@conduction/nextcloud-vue 2.140.0 → 2.142.0

package/src/components/CnIndexSidebar/CnIndexSidebar.vue

@@ -103,7 +103,7 @@
 					</p>
 				</div>
 
-				<div v-if="hasActiveFilters" class="cn-index-sidebar__section">
+				<div v-if="hasActiveFilters && !isBoardLook" class="cn-index-sidebar__section">
 					<NcButton variant="tertiary" @click="onClearAll">
 						<template #icon>
 							<FilterRemoveOutline :size="20" />
@@ -113,7 +113,20 @@
 				</div>
 
 				<div v-if="schemaFilters.length > 0" class="cn-index-sidebar__section">
-					<h3>{{ filtersLabel }}</h3>
+					<!-- The board look: "Alles wissen" beside the heading (DqZakenSorteren). -->
+					<div v-if="isBoardLook" class="cn-index-sidebar__filters-head" data-testid="cn-index-sidebar-filters-head">
+						<h3>{{ filtersLabel }}</h3>
+						<button
+							v-if="hasActiveFilters"
+							type="button"
+							class="cn-index-sidebar__filters-clear"
+							@click="onClearAll">
+							{{ clearAllLabel }}
+						</button>
+					</div>
+					<h3 v-else>
+						{{ filtersLabel }}
+					</h3>
 					<div
 						v-for="filter in schemaFilters"
 						:key="filter.key"
@@ -155,6 +168,27 @@
 							:label="filter.label"
 							:placeholder="filter.label"
 							@update:modelValue="onTextChange(filter.key, $event)" />
+						<!-- The board look: a short field as checkbox rows with counts. -->
+						<fieldset
+							v-else-if="checklistOptions(filter)"
+							class="cn-index-sidebar__checklist"
+							:data-testid="`cn-index-sidebar-checklist-${filter.key}`">
+							<legend class="hidden-visually">
+								{{ filter.label }}
+							</legend>
+							<label
+								v-for="option in checklistOptions(filter)"
+								:key="`${filter.key}-${option.id}`"
+								class="cn-index-sidebar__checklist-row"
+								data-testid="cn-index-sidebar-checklist-row">
+								<input
+									type="checkbox"
+									:checked="isChecked(filter, option.id)"
+									@change="onChecklistToggle(filter, option.id, $event.target.checked)">
+								<span class="cn-index-sidebar__checklist-label">{{ option.label }}</span>
+								<span v-if="option.count !== null" class="cn-index-sidebar__checklist-count">{{ option.count }}</span>
+							</label>
+						</fieldset>
 						<NcSelect
 							v-else
 							class="cn-index-sidebar__select"
@@ -369,7 +403,7 @@ import CnSavedViewsPanel from '../CnSavedViewsPanel/CnSavedViewsPanel.vue'
 import CnSegmentedControl from '../CnSegmentedControl/CnSegmentedControl.vue'
 import { normalizeLook } from '../../composables/useLook.js'
 import { METADATA_COLUMNS } from '../../constants/metadata.js'
-import { facetOptions } from '../../utils/facets.js'
+import { facetOptions, MISSING_VALUE } from '../../utils/facets.js'
 import { labelLang } from '../../utils/manifestTranslate.js'
 import { columnsFromSchema, filtersFromSchema } from '../../utils/schema.js'
 /**
@@ -389,6 +423,9 @@ import { labelSidePanelClose } from '../../utils/sidePanelCloseLabel.js'
 import { reverseSortKeys, sameSortKeys } from '../../utils/sortOrder.js'
 import { CnDateRangePicker, DEFAULT_DATE_RANGE_PRESETS } from '../CnDateRangePicker/index.js'
 import { CnIcon } from '../CnIcon/index.js'
+/** The most values a filter shows as checkbox rows in the board look; a longer field keeps its picker. */
+const CHECKLIST_MAX = 12
+
 export default {
 	name: 'CnIndexSidebar',
 
@@ -1411,6 +1448,67 @@ export default {
 			return values.map((v) => options.find((o) => o.id === v) || { id: v, label: String(v) })
 		},
 
+		/**
+		 * A field's values as checkbox rows, in the board look and for a short
+		 * list only: label and count apart, from the facet when there is one,
+		 * else the field's own options. Null where the picker stays (the
+		 * Nextcloud look, a single choice, a reference, more than
+		 * CHECKLIST_MAX values).
+		 *
+		 * @spec openspec/changes/board-sidebar-filters-as-checkbox-lists/specs/index-sidebar/spec.md#requirement-the-board-look-draws-a-short-filter-as-a-checkbox-list-with-counts
+		 * @param {object} filter The filter definition.
+		 * @return {Array<{id: (string|number|boolean), label: string, count: (number|null)}>|null} The rows, or null.
+		 */
+		checklistOptions(filter) {
+			if (!this.isBoardLook || filter.multiple === false || filter.type === 'reference') {
+				return null
+			}
+			const facet = this.facetData[filter.key]
+			let rows
+			if (facet && Array.isArray(facet.values) && facet.values.length > 0) {
+				rows = facet.values.map((bucket) => ({
+					id: bucket.value,
+					label: String(bucket.label !== undefined && bucket.label !== null ? bucket.label : bucket.value),
+					count: typeof bucket.count === 'number' ? bucket.count : null,
+				}))
+				if (typeof facet.missing === 'number' && facet.missing > 0) {
+					rows.push({ id: MISSING_VALUE, label: t('nextcloud-vue', 'No value'), count: facet.missing })
+				}
+			} else {
+				rows = (filter.options || []).map((option) => ({ id: option.id, label: String(option.label), count: null }))
+			}
+			return rows.length > 0 && rows.length <= CHECKLIST_MAX ? rows : null
+		},
+
+		/**
+		 * Whether a value of a field is among its active filter values.
+		 *
+		 * @param {object} filter The filter definition.
+		 * @param {string|number|boolean} id The value.
+		 * @return {boolean}
+		 */
+		isChecked(filter, id) {
+			const value = this.activeFilters[filter.key]
+			const values = Array.isArray(value) ? value : (value === undefined || value === null || value === '' ? [] : [value])
+			return values.map(String).includes(String(id))
+		},
+
+		/**
+		 * A checkbox row was toggled: the field's values with it added or taken out.
+		 *
+		 * @spec openspec/changes/board-sidebar-filters-as-checkbox-lists/specs/index-sidebar/spec.md#requirement-the-board-look-draws-a-short-filter-as-a-checkbox-list-with-counts
+		 * @param {object} filter The filter definition.
+		 * @param {string|number|boolean} id The value.
+		 * @param {boolean} checked Whether it is now ticked.
+		 * @return {void}
+		 */
+		onChecklistToggle(filter, id, checked) {
+			const value = this.activeFilters[filter.key]
+			const current = Array.isArray(value) ? [...value] : (value === undefined || value === null || value === '' ? [] : [value])
+			const rest = current.filter((v) => String(v) !== String(id))
+			this.$emit('filter-change', { key: filter.key, values: checked ? [...rest, id] : rest })
+		},
+
 		/**
 		 * Handle filter select change
 		 *

package/src/components/CnMapWidget/CnMapWidget.vue

@@ -226,6 +226,25 @@ function controlIcon(path) {
  * @slot popup Per-marker popup body override. Scoped props: `{ feature, properties }`. When omitted, the widget renders the value of `markers.popupField` (or no popup at all when unset).
  * @slot fallback Replaces the default "map unavailable" message when Leaflet fails to load (test environments, CSP-blocked builds, offline dev). No scoped props.
  */
+/**
+ * The count line a header spec gives (`{ one, other }` or one string, with
+ * `{total}`), once the marker source answered with markers.
+ *
+ * @param {object|string|undefined} spec The declared line.
+ * @param {object} vm The map: `markersLoaded`, `markersFailed`, `markerCount`, `cnTranslate`.
+ * @return {string} The line, or ''.
+ */
+function countLine(spec, vm) {
+	if (!spec || !vm.markersLoaded || vm.markersFailed || vm.markerCount === 0) {
+		return ''
+	}
+	const text = typeof spec === 'string' ? spec : (vm.markerCount === 1 ? spec.one : spec.other)
+	if (typeof text !== 'string' || text === '') {
+		return ''
+	}
+	return vm.cnTranslate(text).replace(/\{total\}/g, String(vm.markerCount))
+}
+
 export default {
 	name: 'CnMapWidget',
 
@@ -577,15 +596,19 @@ export default {
 		 * @spec openspec/changes/map-widget-header-count/specs/map-widget-header-count/spec.md#requirement-a-map-card-can-say-how-many-places-it-shows
 		 */
 		headerSubtitleText() {
-			const spec = this.content?.headerSubtitle
-			if (!spec || !this.markersLoaded || this.markersFailed || this.markerCount === 0) {
-				return ''
-			}
-			const text = typeof spec === 'string' ? spec : (this.markerCount === 1 ? spec.one : spec.other)
-			if (typeof text !== 'string' || text === '') {
-				return ''
-			}
-			return this.cnTranslate(text).replace(/\{total\}/g, String(this.markerCount))
+			return countLine(this.content?.headerSubtitle, this)
+		},
+
+		/**
+		 * The same count as a note at the right of the card's title row
+		 * (`content.headerNote`, the same shape as `headerSubtitle`), as the
+		 * case boards draw "Locaties ... 1 locatie".
+		 *
+		 * @return {string}
+		 * @spec openspec/changes/map-count-note/specs/map-widget/spec.md
+		 */
+		headerNoteText() {
+			return countLine(this.content?.headerNote, this)
 		},
 
 		markerStatusText() {
@@ -672,6 +695,21 @@ export default {
 			}
 		},
 
+		/**
+		 * Report the count note to the card around the map.
+		 *
+		 * @param {string} note The note, or ''.
+		 */
+		headerNoteText(note) {
+			if (this.content?.headerNote) {
+				/**
+				 * @event header The card header's note at the right of the title.
+				 * @type {{note: string}}
+				 */
+				this.$emit('header', { note })
+			}
+		},
+
 		// Keyed, never `deep: true` — see `layersKey`.
 		layersKey() {
 			if (this.map) {

package/src/components/CnObjectListWidget/CnObjectListWidget.vue

@@ -669,14 +669,14 @@ export default {
 		},
 
 		/**
-		 * How the table draws its title column (`content.rowTitle`: link, plain
-		 * or text), link when unset or unknown.
+		 * How the table draws its title column (`content.rowTitle`: link, plain,
+		 * text or strong), link when unset or unknown.
 		 *
 		 * @return {string}
 		 * @spec openspec/changes/board-log-table-plain-cells/specs/board-log-table-plain-cells/spec.md#requirement-a-tables-title-column-can-read-as-plain-text
 		 */
 		rowTitle() {
-			return ['plain', 'text'].includes(this.content.rowTitle) ? this.content.rowTitle : 'link'
+			return ['plain', 'text', 'strong'].includes(this.content.rowTitle) ? this.content.rowTitle : 'link'
 		},
 
 		/**

package/src/components/CnObjectSidebar/CnFilesTab.vue

@@ -16,6 +16,7 @@
 			:dropOverlay="dropOverlay"
 			:dropLabel="dropLabel"
 			:dropDetail="dropDetail"
+			:dropDetailValues="dropDetailValues"
 			:dropHint="dropHint"
 			:rowActions="rowActions"
 			:newActions="newActions"
@@ -360,7 +361,9 @@ export default {
 		/** Forwarded to CnFilesBrowser: the drop state's line ("Laat los om toe te voegen"); the library's own without it. */
 		dropLabel: { type: String, default: undefined },
 		/** Forwarded to CnFilesBrowser: the drop state's second line, `{count}` the files dragged; it also makes the overlay fill the panel. */
-		dropDetail: { type: String, default: '' },
+		dropDetail: { type: [String, Array], default: '' },
+		/** Forwarded to CnFilesBrowser: named values filled into `dropDetail`. */
+		dropDetailValues: { type: Object, default: null },
 		/** Forwarded to CnFilesBrowser: "Or drag files onto this list." under the list. */
 		dropHint: { type: Boolean, default: false },
 		/**

package/src/components/CnPartyPicker/CnPartyPicker.vue

@@ -52,7 +52,9 @@ const SEARCH_DELAY = 250
  * Organisatie · KvK …"). Built on CnSearchSelect.
  *
  * `sources`: each `{ id, register, schema, label?, title?, secondary?,
- * limit?, icon? }` searches OpenRegister with `_search`; `title` and
+ * limit?, icon?, lookup? }` searches OpenRegister with `_search`; `lookup`
+ * (`{ url, when }`) sends a term matching `when` to the app's exact lookup
+ * instead (a POST of `{ term }` answering `{ results }`); `title` and
  * `secondary` are templates filled from the row (default `{name}` / none),
  * `label` names the kind ("Resident") and starts the second line; `label`
  * and `secondary` go through the host translate, so a manifest can write
@@ -284,6 +286,10 @@ export default {
 						const { data } = await axios.post(generateUrl('/contactsmenu/contacts'), { filter: term })
 						return (data && Array.isArray(data.contacts) ? data.contacts : []).map((c) => this.contactOptionOf(source, c))
 					}
+					if (this.isExactLookup(source, term) === true) {
+						const { data } = await axios.post(generateUrl(source.lookup.url), { term })
+						return (data && Array.isArray(data.results) ? data.results : []).map((row) => this.optionOf(source, row))
+					}
 					if (!source.register || !source.schema) {
 						return []
 					}
@@ -311,6 +317,30 @@ export default {
 			this.searching = false
 		},
 
+		/**
+		 * Whether a typed term goes to the source's exact lookup instead of the
+		 * free-text search: `source.lookup` is `{ url, when }`, `when` a regular
+		 * expression the whole term must match ("^[0-9]{9}$" for a BSN). The
+		 * lookup is a POST, so the term never sits in a URL or a server log line,
+		 * and the app behind it may check and record who looked whom up.
+		 *
+		 * @param {object} source The source.
+		 * @param {string} term The typed term.
+		 * @return {boolean}
+		 * @spec openspec/changes/party-picker-exact-lookup/specs/party-picker/spec.md#requirement-a-party-source-can-look-a-term-up-exactly
+		 */
+		isExactLookup(source, term) {
+			const lookup = source && source.lookup
+			if (!lookup || typeof lookup.url !== 'string' || lookup.url === '' || typeof lookup.when !== 'string') {
+				return false
+			}
+			try {
+				return new RegExp(lookup.when).test(term)
+			} catch {
+				return false
+			}
+		},
+
 		/**
 		 * Name a value the list does not hold: the first OpenRegister source
 		 * that has an object with that id.

package/src/components/CnRecordListWidget/CnRecordListWidget.vue

@@ -6,7 +6,7 @@
 <template>
 	<div
 		class="cn-record-list"
-		:class="[`cn-record-list--${presentation}`, { 'cn-record-list--compact': content.density === 'compact', 'cn-record-list--tiles': presentation === 'rows' && content.tiles === true, 'cn-record-list--rule-above': content.ruleAbove === true, 'cn-record-list--data-table': presentation === 'table' && content.tableLook === 'data' }]"
+		:class="[`cn-record-list--${presentation}`, { 'cn-record-list--compact': content.density === 'compact', 'cn-record-list--stacked': content.density === 'stacked', 'cn-record-list--tiles': presentation === 'rows' && content.tiles === true, 'cn-record-list--rule-above': content.ruleAbove === true, 'cn-record-list--data-table': presentation === 'table' && content.tableLook === 'data' }]"
 		data-testid="cn-record-list">
 		<p v-if="intro && !absent" class="cn-record-list__intro" data-testid="cn-record-list-intro">
 			{{ intro }}
@@ -713,6 +713,8 @@ export default {
 		 * without a value.
 		 * `density: "compact"` draws the rows 10px above and below, at least
 		 * 56px tall, with the title at 500 (DqProcesanalyse).
+		 * `density: "stacked"` stands the rows 10px apart with no rule and no
+		 * row padding (DqDagAfsluiten "Morgen eerst").
 		 * In `rows`, `text` is a line under the meta line ("12 dagen stil"),
 		 * and `chevron: false` leaves the chevron off a linked row
 		 * (DqDashboard).
@@ -3103,6 +3105,23 @@ export default {
 	font-weight: 500;
 }
 
+/* `density: "stacked"`: the rows stand 10px apart with no rule and no row
+   padding, a short side list (DqDagAfsluiten "Morgen eerst"). */
+.cn-record-list--stacked .cn-record-list__list {
+	display: flex;
+	flex-direction: column;
+	gap: 10px;
+}
+
+.cn-record-list--stacked .cn-record-list__row {
+	min-height: 0;
+	padding: 0;
+}
+
+.cn-record-list--stacked .cn-record-list__item + .cn-record-list__item {
+	border-top: 0;
+}
+
 .cn-record-list__meta {
 	color: var(--color-text-maxcontrast);
 	font-size: 13px;

package/src/components/CnRecordListWidget/CnRecordNoteRows.vue

@@ -37,15 +37,20 @@
 					data-testid="cn-record-list-due">{{ item.due.text }}</span>
 			</div>
 			<div class="cn-record-notes__fields">
-				<NcTextField
-					class="cn-record-notes__field"
-					:modelValue="drafts[item.key] || ''"
-					:label="fieldLabel"
-					:labelOutside="false"
-					:placeholder="placeholder"
-					:disabled="busy"
-					:data-testid="`cn-record-list-note-${item.key}`"
-					@update:modelValue="setDraft(item.key, $event)" />
+				<!-- The label stands above the field, as the leaf's own beside it
+				     (humaniq "Uren"), so both fields share one line. -->
+				<div class="cn-record-notes__field">
+					<label :for="fieldId(item.key)" class="cn-record-notes__field-label">{{ fieldLabel }}</label>
+					<NcTextField
+						:id="fieldId(item.key)"
+						:modelValue="drafts[item.key] || ''"
+						:label="fieldLabel"
+						labelOutside
+						:placeholder="placeholder"
+						:disabled="busy"
+						:data-testid="`cn-record-list-note-${item.key}`"
+						@update:modelValue="setDraft(item.key, $event)" />
+				</div>
 				<div v-if="leaf && leafProvider" class="cn-record-notes__leaf" :data-testid="`cn-record-list-leaf-${item.key}`">
 					<CnLeafMountHost
 						v-if="leafIsMount"
@@ -301,6 +306,16 @@ export default {
 			this.drafts = { ...this.drafts, [key]: String(value ?? '') }
 		},
 
+		/**
+		 * The id of a row's note field, for its label.
+		 *
+		 * @param {string} key The row key.
+		 * @return {string} The id.
+		 */
+		fieldId(key) {
+			return `cn-record-notes-${this.$.uid}-${String(key).replace(/[^A-Za-z0-9_-]/g, '-')}`
+		},
+
 		/**
 		 * @param {string} key The row key.
 		 * @return {boolean} Whether the row has a note typed.
@@ -472,7 +487,16 @@ export default {
 }
 
 .cn-record-notes__field {
+	display: flex;
 	flex: 1 1 260px;
+	flex-direction: column;
+	gap: 6px;
+}
+
+.cn-record-notes__field-label {
+	color: var(--color-main-text);
+	font-size: 14px;
+	font-weight: 600;
 }
 
 .cn-record-notes__leaf {

package/src/css/dialog.css

@@ -238,8 +238,11 @@ body:has(.cn-look-board):not(:has(.cn-look-nextcloud)) .modal-mask {
 	padding-inline-end: 24px;
 }
 
+/* The body starts 22px under the header, as most dialog boards draw it
+   (header padding-bottom 4px + form padding-top 18px; DqBerichtVersturen,
+   DqOverdragen, DqNieuweZaak, DqBesluit): the 18px gap plus 4px. */
 .cn-dialog-board .dialog__content > .cn-dialog-header {
-	margin-bottom: -2px;
+	margin-bottom: 4px;
 }
 
 /* Footer: 16px 24px, hairline on top, right aligned, 40px buttons, 10px gap. */
@@ -344,6 +347,15 @@ body:has(.cn-look-board):not(:has(.cn-look-nextcloud)) .modal-mask {
 	margin-block-start: 26px;
 }
 
+/* A select in a form dialog sits under its label and over its help line
+   as a text field does (DqNieuweZaak "Zaaktype", "Intakekanaal"): the
+   form's label stands outside the select, so NcSelect's own 6px/4px margins
+   only pushed the control 6px below the text fields beside it and its help
+   line 4px further down. */
+.cn-dialog-board .dialog__content .cn-form-dialog__select-wrapper > .v-select.select:not(:has(.input-field__label)) {
+	margin-block: 0;
+}
+
 /* A multiple select is the board's 40px field too (DqFilterDelen "Delen
    met"). The edge goes on the toggle, which holds the chips and the search,
    so the chosen people and groups sit inside the field; the search inside it

package/src/css/look-board-detail.css

@@ -721,6 +721,13 @@
 	padding-top: calc(14px - var(--cn-board-first-line-leading));
 }
 
+/* A table (an object list) starts 12px below the title's box: its head has
+   a fill and no leading, so the glyph-to-glyph gap above left it 2px short
+   (DqZaaktypeStatussen "Statussen", "Resultaten"). */
+.cn-look-board .cn-detail-page .cn-widget-wrapper__content:has(> .cn-object-list-widget):not(.cn-detail-page__side *) {
+	padding-top: 12px;
+}
+
 /* Running text (DqZaak "Het verzoek") sits 12px below the title's box and
    keeps its own half-leading, at 1.6 as drawn.
    @spec openspec/changes/board-card-title-gap-variants/specs/board-card-title-gap-variants/spec.md#requirement-a-board-card-starts-its-body-as-drawn-for-its-kind-of-body */
@@ -1527,12 +1534,12 @@
 }
 
 /* ---- A card's Add ------------------------------------------------------ */
-/* The board draws a list card's Add as the neutral secondary at the 40px
-   control height, right-aligned in the title row (DqZaakGerelateerd
-   "Deelzaak aanmaken", DqZaakTaken "Toevoegen"). CnDetailWidgetHost renders
+/* The board draws a list card's Add as the neutral secondary right-aligned
+   in the title row, at the title row's 34px (DqZaaktypeStatussen "Status
+   toevoegen", DqZaaktype "Taak toevoegen", DqCatalogus "Objecttype
+   toevoegen": 13 of the 15 boards that draw one). CnDetailWidgetHost renders
    that button in the board look, so the list's footer Add bar, which ADR-062
-   draws in the Nextcloud look, is hidden in the card. The size outranks a
-   card title row's 34px buttons.
+   draws in the Nextcloud look, is hidden in the card.
    @spec openspec/changes/board-object-list-add-button/specs/board-object-list-add-button/spec.md#requirement-the-board-look-draws-a-cards-add-as-a-title-row-button */
 .cn-look-board .cn-detail-page__catalog-card:not(.cn-look-nextcloud *) .cn-object-list-widget__add {
 	display: none;
@@ -1544,10 +1551,6 @@
 	display: none;
 }
 
-.cn-look-board .cn-widget-wrapper__actions .button-vue.cn-detail-page__catalog-add:has(> .button-vue__wrapper > .button-vue__text:not(:empty)):where(:not(.cn-look-nextcloud *)) {
-	--button-size: var(--cn-board-control-height);
-}
-
 /* A map in a board card has the board's control corners (DqZaak, DqZaakMeer
    "Locaties"); overflow keeps the tiles inside them. */
 .cn-look-board .cn-map-widget:not(.cn-map-widget--fullscreen) {
@@ -1582,6 +1585,49 @@
 	line-height: 1.2;
 }
 
+/* The contacts tab's rows as DqZaakBetrokkenen "Partijen" draws them: the
+   role heading 15px bold ink in sentence case, each person on a row 12px
+   high-padded under a hairline, the details and the period 13px muted.
+   @spec openspec/changes/board-contacts-rows/specs/contacts/spec.md */
+.cn-look-board .cn-contacts-tab .cn-contacts-tab__group-title {
+	margin: 6px 0 0;
+	font-size: 15px;
+	font-weight: 700;
+	letter-spacing: 0;
+	text-transform: none;
+	color: var(--color-main-text);
+}
+
+.cn-look-board .cn-contacts-tab .cn-contacts-tab__item {
+	align-items: center;
+	padding: 12px 0;
+	border-top: 1px solid var(--cn-board-hairline);
+	border-radius: 0;
+}
+
+.cn-look-board .cn-contacts-tab .cn-contacts-tab__item:first-child {
+	margin-top: 8px;
+}
+
+.cn-look-board .cn-contacts-tab .cn-contacts-tab__name {
+	font-size: 15px;
+	font-weight: 600;
+}
+
+.cn-look-board .cn-contacts-tab .cn-contacts-tab__meta,
+.cn-look-board .cn-contacts-tab .cn-contacts-tab__period {
+	font-size: 13px;
+	color: var(--color-text-maxcontrast);
+}
+
+.cn-look-board .cn-contacts-tab .cn-contacts-tab__period {
+	flex: none;
+}
+
+.cn-look-board .cn-contacts-tab .cn-contacts-tab__group {
+	margin-bottom: 8px;
+}
+
 /* The contacts tab inside a detail card (DqZaakBetrokkenen "Partijen") takes
    the card's padding instead of its own, and its buttons start at the card's
    edge under the subtitle.
@@ -1593,3 +1639,55 @@
 .cn-look-board .cn-detail-page__leaf-card .cn-contacts-tab .cn-contacts-tab__header {
 	justify-content: flex-start;
 }
+
+/* A body card's subtitle as the Dq boards draw it: 14px muted at line
+   height 1.2, 3px under the title, and the content 12px under it.
+   @spec openspec/changes/board-card-subtitle-gaps/specs/board-card/spec.md */
+.cn-look-board .cn-detail-page .cn-widget-wrapper:not(.cn-detail-page__side *) .cn-widget-wrapper__title-stack:has(> .cn-widget-wrapper__subtitle) {
+	gap: 3px;
+}
+
+.cn-look-board .cn-detail-page .cn-widget-wrapper:not(.cn-detail-page__side *) .cn-widget-wrapper__subtitle {
+	font-size: 14px;
+	line-height: 1.2;
+}
+
+.cn-look-board .cn-detail-page .cn-widget-wrapper:not(.cn-detail-page__side *):has(> .cn-widget-wrapper__header .cn-widget-wrapper__subtitle) > .cn-widget-wrapper__content {
+	padding-top: 12px;
+}
+
+/* A checklist (DqTaak): each item an 18-20px box at the card's own inset, the
+   label 10px after it in weight 600, 12px between items, the list 2px below
+   the title block. Nextcloud's checkbox pads its box 7px in and makes every row
+   34px tall, which put the list 7px right and 2px apart too far per item.
+   @spec openspec/changes/board-checklist-rows/specs/checklist-widget/spec.md#requirement-a-board-checklist-sits-at-the-card-inset */
+.cn-look-board .cn-checklist-widget__items {
+	display: flex;
+	flex-direction: column;
+	gap: 12px;
+	margin-top: 2px;
+}
+
+.cn-look-board .cn-checklist-widget__item .checkbox-content {
+	padding: 0;
+	gap: 10px;
+	min-height: 20px;
+}
+
+.cn-look-board .cn-checklist-widget__item .checkbox-content.checkbox-content .checkbox-content__icon {
+	margin: 0;
+}
+
+.cn-look-board .cn-checklist-widget__item .checkbox-radio-switch__input {
+	min-height: 20px;
+}
+
+.cn-look-board .cn-checklist-widget__item .checkbox-content__wrapper,
+.cn-look-board .cn-checklist-widget__item .checkbox-content__text {
+	line-height: 18px;
+	min-height: 0;
+}
+
+.cn-look-board .cn-checklist-widget__item .checkbox-content__text {
+	font-weight: 600;
+}