@conduction/nextcloud-vue 2.140.0 → 2.141.0

package/l10n/en.json

@@ -2381,7 +2381,8 @@
     "me": "me",
     "Open profile": "Open profile",
     "Link a contact from your address book.": "Link a contact from your address book.",
-    "The value could not be shown.": "The value could not be shown."
+    "The value could not be shown.": "The value could not be shown.",
+    "No value": "No value"
   },
   "plurals": {
     "{count} member": [

package/l10n/nl.json

@@ -2634,7 +2634,8 @@
     "The value could not be shown.": "De waarde kon niet worden getoond.",
     "Save as draft": "Opslaan als concept",
     "Draft saved at {time}": "Concept opgeslagen om {time}",
-    "The draft could not be saved": "Het concept kon niet worden opgeslagen"
+    "The draft could not be saved": "Het concept kon niet worden opgeslagen",
+    "No value": "Geen waarde"
   },
   "plurals": {
     "{count} member": [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@conduction/nextcloud-vue",
-  "version": "2.140.0",
+  "version": "2.141.0",
   "description": "Shared Vue component library for Conduction Nextcloud apps — complements @nextcloud/vue with higher-level components, OpenRegister integration, and NL Design System support",
   "homepage": "https://github.com/ConductionNL/nextcloud-vue#readme",
   "bugs": {

package/src/components/CnAssignDialog/CnAssignDialog.vue

@@ -89,6 +89,7 @@ import { generateUrl } from '@nextcloud/router'
 import { NcButton, NcCheckboxRadioSwitch, NcTextArea } from '@nextcloud/vue'
 import { fetchEndpointSource, interpolateUrlTokens } from '../../composables/useEndpointSource.js'
 import { fillTemplate } from '../../utils/fillTemplate.js'
+import { groupSublines } from '../../utils/groupSublines.js'
 import { readPath } from '../../utils/readPath.js'
 import { searchNextcloudGroups, searchNextcloudUsers } from '../../utils/userAutocomplete.js'
 import { CnDialog } from '../CnDialog/index.js'
@@ -134,7 +135,10 @@ export function withTypedAssignee(found, typed, label) {
  *   `eyebrow` a template filled from the record.
  * - `source`: an endpointSource to read the record from, else `object`.
  * - `assignee`: `{ kinds?, label?, placeholder?, hint?, currentPath?,
- *   currentHint?, currentAs?, allowTyped?, field?, kindField? }`. `kinds` is `["group"]`
+ *   currentHint?, currentAs?, allowTyped?, field?, kindField?, describe? }`.
+ *   `describe` (`{ register, schema, groupField?, textField? }`) names the
+ *   records that hold a team's description; each team option then reads
+ *   "{count} members · {description}", the count where the viewer may read it. `kinds` is `["group"]`
  *   (default), `["user"]` or both; `currentPath` reads who has it now from the
  *   record and `currentHint` ("Now with {current}.", the placeholder named
  *   by `currentAs`) says so, in place of `hint`; `allowTyped`
@@ -398,8 +402,12 @@ export default {
 			if (seq !== this.searchSeq) {
 				return
 			}
+			const lines = await groupSublines(groups.map((g) => g.id), typed, this.assigneeConfig.describe || null)
+			if (seq !== this.searchSeq) {
+				return
+			}
 			const found = [
-				...groups.map((g) => ({ id: g.id, label: g.label, secondary: g.subline || '', icon: 'AccountGroupOutline', kind: 'group' })),
+				...groups.map((g) => ({ id: g.id, label: g.label, secondary: lines[g.id] || g.subline || '', icon: 'AccountGroupOutline', kind: 'group' })),
 				...users.map((u) => ({ id: u.id, label: u.label, secondary: u.subline || '', avatar: true, kind: 'user' })),
 			]
 			this.options = this.assigneeConfig.allowTyped ? withTypedAssignee(found, typed, t('nextcloud-vue', 'Use "{name}"', { name: typed })) : found

package/src/components/CnCellRenderer/CnCellRenderer.vue

@@ -1737,8 +1737,9 @@ export default {
 
 		/**
 		 * The swatch colour — read from the sibling row field named by
-		 * `format.colorField` (default `'color'`). Returns null when no usable
-		 * colour string is present (the dot is then omitted).
+		 * `format.colorField` (default `'color'`), through `format.colorMap`
+		 * when given (a stored name such as `blue` to a CSS colour). Returns
+		 * null when no usable colour is present (the dot is then omitted).
 		 *
 		 * @return {string|null}
 		 */
@@ -1748,7 +1749,14 @@ export default {
 			}
 			const field = (this.format && this.format.colorField) || 'color'
 			const c = this.row && this.row[field]
-			return (typeof c === 'string' && c.trim() !== '') ? c : null
+			if (typeof c !== 'string' || c.trim() === '') {
+				return null
+			}
+			const map = this.format && this.format.colorMap
+			if (map && typeof map === 'object') {
+				return typeof map[c] === 'string' && map[c] !== '' ? map[c] : null
+			}
+			return c
 		},
 
 		formattedValue() {

package/src/components/CnChartWidget/CnChartWidget.md

@@ -135,3 +135,4 @@ The `dataSource` OBJECT-form `aggregate` (Wave 3, #91) — `{ groupBy, metric?:
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
 | `widgetId` | String | `''` | Matches `cn:widget:refresh` event-bus events; on a matching id the chart re-queries its `dataSource`. Also exposes a ref-callable `refresh()`. |
+| `barValueAtEnd` | Boolean | `false` | A `bar-list` without a track: each bar as long as its share and its value right after the bar's end (DqProcesanalyse "Doorlooptijd per status"). False keeps the track and the value column. |

package/src/components/CnChartWidget/CnChartWidget.vue

@@ -65,7 +65,7 @@
 		     share of `barMax` (default the largest value), the value at the
 		     end. Rows navigate when the source declares a drilldown. -->
 		<div v-else-if="type === 'bar-list'" class="cn-chart-widget__html" data-testid="cn-chart-widget-bar-list">
-			<ul class="cn-chart-widget__bar-list">
+			<ul class="cn-chart-widget__bar-list" :class="{ 'cn-chart-widget__bar-list--value-at-end': barValueAtEnd }">
 				<li v-for="row in barListRows" :key="row.index" class="cn-chart-widget__bar-row">
 					<component
 						:is="row.drill ? 'button' : 'div'"
@@ -75,10 +75,16 @@
 						data-testid="cn-chart-widget-bar-row"
 						@click="row.drill ? onDataPointSelection(null, null, { dataPointIndex: row.index }) : null">
 						<span class="cn-chart-widget__bar-label">{{ row.label }}</span>
-						<span class="cn-chart-widget__bar-track" aria-hidden="true">
-							<span class="cn-chart-widget__bar-fill" :style="{ width: `${row.share}%` }" />
+						<span v-if="barValueAtEnd" class="cn-chart-widget__bar-track">
+							<span class="cn-chart-widget__bar-fill" aria-hidden="true" :style="{ flexBasis: `${row.share}%` }" />
+							<span class="cn-chart-widget__bar-value">{{ row.text }}</span>
 						</span>
-						<span class="cn-chart-widget__bar-value">{{ row.text }}</span>
+						<template v-else>
+							<span class="cn-chart-widget__bar-track" aria-hidden="true">
+								<span class="cn-chart-widget__bar-fill" :style="{ width: `${row.share}%` }" />
+							</span>
+							<span class="cn-chart-widget__bar-value">{{ row.text }}</span>
+						</template>
 					</component>
 				</li>
 			</ul>
@@ -468,6 +474,18 @@ export default {
 			default: null,
 		},
 
+		/**
+		 * A `bar-list` without a track: each bar as long as its share and its
+		 * value right after the bar's end (DqProcesanalyse "Doorlooptijd per
+		 * status"). False, the default, keeps the track and the value column.
+		 *
+		 * @spec openspec/changes/chart-bar-list-value-at-end/specs/chart-bar-list-value-at-end/spec.md#requirement-a-bar-list-can-put-each-value-at-its-bars-end
+		 */
+		barValueAtEnd: {
+			type: Boolean,
+			default: false,
+		},
+
 		/**
 		 * A `matrix`'s row-label column width in px. Null, the default, sizes
 		 * the column to its longest label (at least 120px); a width wraps a
@@ -3006,6 +3024,33 @@ export default {
 	white-space: nowrap;
 }
 
+/* `barValueAtEnd`: no track; the bar takes its share of the row and gives way
+   to the value right after its end, so the longest bar still fits. */
+.cn-chart-widget__bar-list--value-at-end .cn-chart-widget__bar-line {
+	grid-template-columns: minmax(80px, 130px) minmax(0, 1fr);
+}
+
+.cn-chart-widget__bar-list--value-at-end .cn-chart-widget__bar-track {
+	align-items: center;
+	background: none;
+	display: flex;
+	gap: 6px;
+	height: auto;
+	overflow: visible;
+}
+
+.cn-chart-widget__bar-list--value-at-end .cn-chart-widget__bar-fill {
+	border-radius: 4px;
+	flex: 0 1 auto;
+	height: 18px;
+	min-width: 2px;
+}
+
+.cn-chart-widget__bar-list--value-at-end .cn-chart-widget__bar-value {
+	flex: none;
+	text-align: start;
+}
+
 .cn-chart-widget__footnote {
 	color: var(--color-text-maxcontrast);
 	margin: 0;

package/src/components/CnDashboardPage/CnDashboardPage.vue

@@ -1150,6 +1150,7 @@ const CHART_PROP_KEYS = [
 	'endpointSource',
 	// `bar-list` / `matrix` presentation keys.
 	'barMax',
+	'barValueAtEnd',
 	'matrixLabelWidth',
 	'footnote',
 	'highlight',

package/src/components/CnDataTable/CnDataTable.vue

@@ -6,6 +6,7 @@
 			'cn-table-container--board': isBoardLook,
 			'cn-table-container--title-plain': isBoardLook && rowTitle === 'plain',
 			'cn-table-container--title-text': isBoardLook && rowTitle === 'text',
+			'cn-table-container--title-strong': isBoardLook && rowTitle === 'strong',
 			'cn-table-container--scrollable': scrollable,
 			'cn-table-container--borderless': borderless,
 			'cn-table-container--fill': fillHeight,
@@ -856,8 +857,10 @@ export default {
 		 * the 15px bold title without an underline and a 13px muted secondary
 		 * line, as the PqTickets and OcPublicaties boards draw it; `text` is an
 		 * ordinary cell, for a log table whose first column is a date
-		 * (DqZaakContact). The row stays clickable either way. The Nextcloud
-		 * look ignores it.
+		 * (DqZaakContact); `strong` is the cell's own size at weight 600 in the
+		 * main ink without an underline, the name column of a card's list
+		 * (DqZaaktypeStatussen). The row stays clickable either way. The
+		 * Nextcloud look ignores it.
 		 *
 		 * @spec openspec/changes/screens-table-rows-parity/specs/index-list-board-look/spec.md#requirement-a-row-title-can-be-plain-text
 		 * @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
@@ -865,7 +868,7 @@ export default {
 		rowTitle: {
 			type: String,
 			default: 'link',
-			validator: (value) => ['link', 'plain', 'text'].includes(value),
+			validator: (value) => ['link', 'plain', 'text', 'strong'].includes(value),
 		},
 
 		/**

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/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) {