@conduction/nextcloud-vue 2.114.0 → 2.115.0

package/src/components/CnRetentionWidget/CnRetentionRecomputeDialog.vue

@@ -0,0 +1,104 @@
+<!--
+  - SPDX-FileCopyrightText: 2026 Conduction B.V.
+  - SPDX-License-Identifier: EUPL-1.2
+-->
+<template>
+	<CnDialog
+		:name="tr('Recompute the nomination')"
+		width="confirm"
+		:noClose="busy"
+		data-testid="cn-retention-recompute-dialog"
+		@closing="$emit('close')">
+		<NcTextField
+			:modelValue="reason"
+			:label="tr('Why are you recomputing this?')"
+			data-testid="cn-retention-reason"
+			@update:modelValue="(value) => (reason = String(value ?? ''))" />
+		<p class="cn-retention-recompute__muted">
+			{{ recordedAgainst }}
+		</p>
+		<template #actions>
+			<NcButton :disabled="busy" data-testid="cn-retention-recompute-cancel" @click="$emit('close')">
+				{{ tr('Cancel') }}
+			</NcButton>
+			<NcButton
+				variant="primary"
+				:disabled="busy || reason.trim() === ''"
+				data-testid="cn-retention-recompute"
+				@click="$emit('confirm', reason.trim())">
+				{{ tr('Recompute') }}
+			</NcButton>
+		</template>
+	</CnDialog>
+</template>
+
+<script>
+import { translate as t } from '@nextcloud/l10n'
+import { NcButton, NcTextField } from '@nextcloud/vue'
+import { CnDialog } from '../CnDialog/index.js'
+
+/**
+ * CnRetentionRecomputeDialog — asks why a record's archival nomination is
+ * recomputed, the reason OpenRegister records with it. The retention widget
+ * opens it from its card header (board DqZaakArchivering, "Nominatie
+ * herberekenen") and posts the recompute itself.
+ *
+ * @event close The dialog is closed without recomputing.
+ * @event confirm The person confirmed, with the reason (trimmed, never empty).
+ * @spec openspec/changes/retention-recompute-header/specs/retention-recompute-header/spec.md#requirement-recomputing-the-nomination-starts-in-the-card-header-and-asks-for-a-reason
+ */
+export default {
+	name: 'CnRetentionRecomputeDialog',
+
+	components: { CnDialog, NcButton, NcTextField },
+
+	inject: {
+		/** The host app's translate (CnAppRoot `cnTranslate`). */
+		cnTranslate: { default: () => (key) => key },
+	},
+
+	props: {
+		/** The user the recompute is recorded against. */
+		user: { type: String, default: '' },
+		/** Whether the recompute is being posted. */
+		busy: { type: Boolean, default: false },
+	},
+
+	emits: ['close', 'confirm'],
+
+	data() {
+		return { reason: '' }
+	},
+
+	computed: {
+		/**
+		 * The line naming who the recompute is recorded against.
+		 *
+		 * @return {string} The line.
+		 */
+		recordedAgainst() {
+			return t('nextcloud-vue', 'This is recorded against {user}.', { user: this.user })
+		},
+	},
+
+	methods: {
+		/**
+		 * A library string in the reader's language.
+		 *
+		 * @param {string} key The English text.
+		 * @return {string} The text.
+		 */
+		tr(key) {
+			return t('nextcloud-vue', key)
+		},
+	},
+}
+</script>
+
+<style scoped>
+.cn-retention-recompute__muted {
+	margin: 0;
+	color: var(--color-text-maxcontrast);
+	font-size: 14px;
+}
+</style>

package/src/components/CnRetentionWidget/CnRetentionWidget.vue

@@ -5,13 +5,35 @@
 <template>
 	<div class="cn-retention" data-testid="cn-retention">
 		<header class="cn-retention__head">
-			<h3 class="cn-retention__title">
-				{{ text(content.title) || t('nextcloud-vue', 'Archiving') }}
-			</h3>
-			<p class="cn-retention__muted">
-				{{ text(content.subtitle) || t('nextcloud-vue', 'What happens to this record once it is closed') }}
-			</p>
+			<div class="cn-retention__head-text">
+				<h3 class="cn-retention__title">
+					{{ text(content.title) || t('nextcloud-vue', 'Archiving') }}
+				</h3>
+				<p class="cn-retention__muted">
+					{{ text(content.subtitle) || t('nextcloud-vue', 'What happens to this record once it is closed') }}
+				</p>
+			</div>
+			<!-- Recompute starts in the header (board DqZaakArchivering); the
+			     dialog asks for the reason OpenRegister records with it. -->
+			<NcButton
+				v-if="content.recompute !== false && !loading && !error"
+				:disabled="!mayRecompute || busy"
+				:title="mayRecompute ? undefined : t('nextcloud-vue', 'Recomputing needs the archivist role')"
+				:aria-description="mayRecompute ? undefined : t('nextcloud-vue', 'Recomputing needs the archivist role')"
+				:data-testid="mayRecompute ? 'cn-retention-recompute-open' : 'cn-retention-recompute-denied'"
+				@click="recomputeOpen = true">
+				<template #icon>
+					<Refresh :size="20" />
+				</template>
+				{{ t('nextcloud-vue', 'Recompute nomination') }}
+			</NcButton>
 		</header>
+		<CnRetentionRecomputeDialog
+			v-if="recomputeOpen"
+			:user="currentUid"
+			:busy="busy"
+			@close="recomputeOpen = false"
+			@confirm="recompute" />
 
 		<NcLoadingIcon v-if="loading" :size="24" />
 		<NcEmptyContent v-else-if="error"
@@ -65,23 +87,6 @@
 				</p>
 			</div>
 
-			<div v-if="content.recompute !== false" class="cn-retention__recompute">
-				<NcButton v-if="!mayRecompute" disabled data-testid="cn-retention-recompute-denied">
-					{{ t('nextcloud-vue', 'Recomputing needs the archivist role') }}
-				</NcButton>
-				<template v-else>
-					<NcTextField :modelValue="reason"
-						:label="t('nextcloud-vue', 'Why are you recomputing this?')"
-						data-testid="cn-retention-reason"
-						@update:modelValue="(v) => (reason = String(v ?? ''))" />
-					<p class="cn-retention__muted">
-						{{ t('nextcloud-vue', 'This is recorded against {user}.', { user: currentUid }) }}
-					</p>
-					<NcButton :disabled="busy || reason.trim() === ''" data-testid="cn-retention-recompute" @click="recompute">
-						{{ t('nextcloud-vue', 'Recompute the nomination') }}
-					</NcButton>
-				</template>
-			</div>
 		</template>
 	</div>
 </template>
@@ -91,7 +96,9 @@ import { getCurrentUser } from '@nextcloud/auth'
 import axios from '@nextcloud/axios'
 import { translate as t } from '@nextcloud/l10n'
 import { generateUrl } from '@nextcloud/router'
-import { NcButton, NcEmptyContent, NcLoadingIcon, NcNoteCard, NcTextField } from '@nextcloud/vue'
+import { NcButton, NcEmptyContent, NcLoadingIcon, NcNoteCard } from '@nextcloud/vue'
+import Refresh from 'vue-material-design-icons/Refresh.vue'
+import CnRetentionRecomputeDialog from './CnRetentionRecomputeDialog.vue'
 import { readPath } from '../../utils/readPath.js'
 
 /**
@@ -120,7 +127,7 @@ import { readPath } from '../../utils/readPath.js'
 export default {
 	name: 'CnRetentionWidget',
 
-	components: { NcButton, NcEmptyContent, NcLoadingIcon, NcNoteCard, NcTextField },
+	components: { CnRetentionRecomputeDialog, NcButton, NcEmptyContent, NcLoadingIcon, NcNoteCard, Refresh },
 
 	inject: {
 		/** The host app's translate (CnAppRoot `cnTranslate`). */
@@ -176,7 +183,8 @@ export default {
 			loading: true,
 			error: '',
 			record: null,
-			reason: '',
+			/** Whether the recompute dialog is open. */
+			recomputeOpen: false,
 			busy: false,
 		}
 	},
@@ -338,19 +346,22 @@ export default {
 		},
 
 		/**
-		 * Ask OpenRegister to derive the nomination again, then read it back.
+		 * Ask OpenRegister to derive the nomination again with the reason the
+		 * dialog asked for, then read it back.
 		 *
-		 * @spec openspec/changes/retention-widget/specs/retention-widget/spec.md#requirement-a-record-shows-its-stored-retention
+		 * @spec openspec/changes/retention-recompute-header/specs/retention-recompute-header/spec.md#requirement-recomputing-the-nomination-starts-in-the-card-header-and-asks-for-a-reason
+		 * @param {string} reason Why it is recomputed.
 		 * @return {Promise<void>}
 		 */
-		async recompute() {
-			if (this.busy || this.reason.trim() === '') {
+		async recompute(reason) {
+			const why = String(reason ?? '').trim()
+			if (this.busy || why === '') {
 				return
 			}
 			this.busy = true
 			try {
-				await axios.post(generateUrl(`/apps/openregister/api/archival/objects/${encodeURIComponent(this.id)}/nomination/recompute`), { reason: this.reason.trim() })
-				this.reason = ''
+				await axios.post(generateUrl(`/apps/openregister/api/archival/objects/${encodeURIComponent(this.id)}/nomination/recompute`), { reason: why })
+				this.recomputeOpen = false
 				await this.load()
 			} catch (failure) {
 				const body = failure && failure.response && failure.response.data
@@ -372,8 +383,18 @@ export default {
 
 .cn-retention__head {
 	display: flex;
+	flex-wrap: wrap;
+	align-items: flex-start;
+	justify-content: space-between;
+	gap: 10px 16px;
+}
+
+.cn-retention__head-text {
+	display: flex;
+	flex: 1 1 260px;
 	flex-direction: column;
 	gap: 2px;
+	min-width: 0;
 }
 
 .cn-retention__title {
@@ -404,10 +425,4 @@ export default {
 	font-weight: 600;
 }
 
-.cn-retention__recompute {
-	display: flex;
-	flex-direction: column;
-	gap: 8px;
-	max-width: 480px;
-}
 </style>

package/src/components/CnSegmentedControl/CnSegmentedControl.vue

@@ -81,7 +81,8 @@ export default {
 		 * @type {string|number|boolean|null}
 		 */
 		modelValue: {
-			type: [Boolean, String, Number],
+			// eslint-disable-next-line vue/prefer-prop-type-boolean-first -- an option value of '' must stay a string
+			type: [String, Number, Boolean],
 			default: null,
 		},
 

package/src/components/CnSetupWizard/CnSetupWizard.vue

@@ -78,8 +78,11 @@
 					<NcNoteCard v-else-if="step.body" type="info">
 						{{ stepBody(step) }}
 					</NcNoteCard>
+					<!-- In the board look the step's title is the dialog's heading,
+					     so the cards' legend is kept for assistive tech only. -->
 					<CnChoiceCards
 						v-if="isCardChoice(step)"
+						:class="{ 'cn-setup-step__choices--titled': isBoard }"
 						:layout="step.display === 'rows' ? 'rows' : 'cards'"
 						:label="stepTitle(step)"
 						:options="optionsFor(step)"
@@ -1134,7 +1137,9 @@ export default {
 		/**
 		 * CnWizardDialog `validate` hook — intercepts Next/Submit to persist
 		 * the active step before advancing. `choice`/`config-fields` steps
-		 * POST their value via the setup contract; required `choice` steps
+		 * POST their value via the setup contract (a `config-fields` step only
+		 * the fields the person filled in, and nothing when they filled in
+		 * none); required `choice` steps
 		 * block advance until a value is picked; required `run-action` steps
 		 * block until the action has succeeded. Returns `true` to advance or
 		 * an error string to surface above the step and block navigation.
@@ -1168,11 +1173,18 @@ export default {
 				}
 			}
 			if (step.type === 'config-fields') {
-				try {
-					const patch = {}
-					for (const field of this.fieldsFor(step)) {
+				// Only what the person filled in is written: a field left alone
+				// keeps what is stored, and a step left alone writes nothing.
+				const patch = {}
+				for (const field of this.fieldsFor(step)) {
+					if (Object.hasOwn(this.configModel, field.key)) {
 						patch[field.key] = this.configModel[field.key]
 					}
+				}
+				if (Object.keys(patch).length === 0) {
+					return true
+				}
+				try {
 					await this.saveConfig(patch)
 					this.localDone[step.id] = true
 					return true
@@ -1457,6 +1469,18 @@ export default {
 	line-height: 1.5;
 }
 
+.cn-setup-step__choices--titled :deep(.cn-choice-cards__legend) {
+	position: absolute;
+	width: 1px;
+	height: 1px;
+	margin: -1px;
+	padding: 0;
+	overflow: hidden;
+	clip-path: inset(50%);
+	white-space: nowrap;
+	border: 0;
+}
+
 .cn-setup-step__note {
 	margin: 0;
 	font-size: 13px;

package/src/components/CnStepper/CnStepper.vue

@@ -230,13 +230,14 @@ button.cn-stepper__step {
 }
 
 /* The board look: one row, 28px circles, the label beside the circle. */
+/* The board leaves 20px between the stepper and the step's body (DqInstellen). */
 .cn-stepper--board {
 	flex-wrap: wrap;
 	align-items: center;
 	justify-content: flex-start;
 	gap: 8px;
 	padding: 0;
-	margin: 0;
+	margin: 0 0 20px;
 }
 
 .cn-stepper--board .cn-stepper__item {

package/src/components/CnTabsWidget/CnTabsWidget.vue

@@ -111,7 +111,7 @@
 				<!-- A stack (`widgetIds`): every widget is a titled card; the
 				     first joins the open tab, the next ones stand below it. -->
 				<div
-					v-if="entry.widget && entry.stack.length"
+					v-if="entry.widget && entry.isStack"
 					class="cn-tabs-widget__stack"
 					:class="{ 'cn-tabs-widget__stack--grid': !!entry.grid }"
 					data-testid="cn-tabs-widget-stack">
@@ -211,7 +211,7 @@ import CnIcon from '../CnIcon/CnIcon.vue'
 import CnTab from '../CnTabs/CnTab.vue'
 import CnTabs from '../CnTabs/CnTabs.vue'
 import { normalizeLook } from '../../composables/useLook.js'
-import { headerLinkTarget, widgetHeaderLink } from '../../utils/contentHeaderLink.js'
+import { headerLinkTarget, resolveHeaderLink, widgetHeaderLink } from '../../utils/contentHeaderLink.js'
 import { resolveTabCount } from '../../utils/detailActionModel.js'
 import { detailWidgetVisible } from '../../utils/detailWidgetVisibility.js'
 import { fetchListTotal } from '../../utils/fetchFilterCounts.js'
@@ -653,10 +653,10 @@ export default {
 				// A stack (`widgetIds`) resolves every id; one that names no
 				// widget is skipped. The first that resolves is the panel's.
 				const ids = this.tabWidgetIds(tab)
-				const widgets = ids.length > 1
-					? ids.map((id) => this.availableWidgets.find((w) => w && w.id === id) || null)
-							.filter((w) => w && !this.hiddenByWorkspace(w) && !this.hiddenByRecord(w))
+				const named = ids.length > 1
+					? ids.map((id) => this.availableWidgets.find((w) => w && w.id === id) || null).filter(Boolean)
 					: []
+				const widgets = named.filter((w) => !this.hiddenByWorkspace(w) && !this.hiddenByRecord(w))
 				const widget = ids.length > 1
 					? (widgets[0] || null)
 					: (this.availableWidgets.find((w) => w && w.id === ids[0]) || null)
@@ -687,6 +687,11 @@ export default {
 					icon: (tab && tab.icon) || widget?.icon || '',
 					widget,
 					stack: widgets.slice(1),
+					// A stack of two or more widgets stays a stack of titled cards
+					// when conditions leave one of them showing (DqSociaalDomein
+					// "De melding"): the record decides which cards show, not
+					// whether the panel is a card.
+					isStack: named.length > 1,
 					grid: this.stackGrid(tab, widgets),
 					count,
 					overflow,
@@ -762,7 +767,7 @@ export default {
 		 * @return {object|null}
 		 */
 		activeHeaderLink() {
-			return widgetHeaderLink(this.activeTab?.widget)
+			return resolveHeaderLink(widgetHeaderLink(this.activeTab?.widget), { objectId: this.objectId, object: this.objectData })
 		},
 
 		/**

package/src/components/CnTasksWidget/CnTasksWidget.vue

@@ -30,7 +30,7 @@
 				<NcTextField
 					:modelValue="newDue"
 					type="date"
-					:label="tr('Deadline')"
+					:label="tr('Task deadline')"
 					data-testid="cn-tasks-widget-create-due"
 					@update:modelValue="(value) => (newDue = String(value ?? ''))" />
 				<NcButton
@@ -54,7 +54,7 @@
 							{{ tr('Handler') }}
 						</th>
 						<th scope="col">
-							{{ tr('Deadline') }}
+							{{ tr('Task deadline') }}
 						</th>
 						<th scope="col">
 							{{ tr('Status') }}

package/src/components/CnWidgetGrid/registerDashboardWidgets.js

@@ -22,6 +22,7 @@ import CnConversationWidget from '../CnConversationThread/CnConversationWidget.v
 import CnCountdownWidget from '../CnCountdownWidget/CnCountdownWidget.vue'
 import CnCountdownWidgetForm from '../CnCountdownWidgetForm/CnCountdownWidgetForm.vue'
 import CnDocumentReviewWidget from '../CnDocumentReviewList/CnDocumentReviewWidget.vue'
+import CnMacrosWidget from '../CnMacrosWidget/CnMacrosWidget.vue'
 import CnMapWidget from '../CnMapWidget/CnMapWidget.vue'
 import CnMapWidgetForm from '../CnMapWidgetForm/CnMapWidgetForm.vue'
 import CnMarkdownWidget2 from '../CnMarkdownWidget/CnMarkdownWidget.vue'
@@ -345,6 +346,17 @@ registerDashboardWidget('ai-chat', {
 	ownsTitle: true,
 })
 
+// The macros the record's schema declares, each run by a button
+// (DqZaakAssistent "Macro's").
+registerDashboardWidget('macros', {
+	renderer: CnMacrosWidget,
+	form: null,
+	defaultContent: { description: '', emptyText: '' },
+	displayName: 'Macros',
+	icon: 'PlayBoxMultipleOutline',
+	surfaces: ['detail-page'],
+})
+
 registerDashboardWidget('conversation', {
 	renderer: CnConversationWidget,
 	form: null,

package/src/components/index.js

@@ -256,6 +256,7 @@ export { CnChoicePickerWidget } from './CnChoicePickerWidget/index.js'
 export { CnRecordListWidget } from './CnRecordListWidget/index.js'
 export { CnBannerWidget } from './CnBannerWidget/index.js'
 export { default as CnConversationWidget } from './CnConversationThread/CnConversationWidget.vue'
+export { CnMacrosWidget } from './CnMacrosWidget/index.js'
 export { default as CnDocumentReviewWidget } from './CnDocumentReviewList/CnDocumentReviewWidget.vue'
 export { default as CnNextStepWidget } from './CnNextStepCard/CnNextStepWidget.vue'
 export { default as CnAuditTrailWidget } from './CnAuditTrailWidget/CnAuditTrailWidget.vue'

package/src/composables/indexSources.js

@@ -497,6 +497,23 @@ function tasksSource() {
 		[priorityLabels.urgent]: 'error',
 	}
 
+	/**
+	 * A task with the display fields a list row and a detail page read. Keyed
+	 * on its uuid, the identity of the task contract.
+	 *
+	 * @param {object} task The task as the engine returned it.
+	 * @return {object} The task with `id`, `title` and the labels.
+	 */
+	const taskRow = (task) => ({
+		...task,
+		id: task.uuid,
+		title: task.displayTitle || task.title || task.uuid,
+		subjectLabel: (task.subject && task.subject.title) || '',
+		stateLabel: stateLabels[task.state] || String(task.state || ''),
+		priorityLabel: priorityLabels[task.priority] || String(task.priority || ''),
+		dueLabel: taskDueLabel(task),
+	})
+
 	return {
 		store,
 
@@ -513,17 +530,32 @@ function tasksSource() {
 		/**
 		 * @return {Array<object>} The rows, with the display fields resolved.
 		 */
-		rows: () => (store.tasks || []).map((task) => ({
-			...task,
-			// CnIndexPage keys rows on `id` by default; the row contract's
-			// identity is the uuid.
-			id: task.uuid,
-			title: task.displayTitle || task.title || task.uuid,
-			subjectLabel: (task.subject && task.subject.title) || '',
-			stateLabel: stateLabels[task.state] || String(task.state || ''),
-			priorityLabel: priorityLabels[task.priority] || String(task.priority || ''),
-			dueLabel: taskDueLabel(task),
-		})),
+		rows: () => (store.tasks || []).map(taskRow),
+
+		/**
+		 * Read one task for a detail page (`type: "detail"` with
+		 * `entitySource: "tasks"`).
+		 *
+		 * @param {string} id The task uuid.
+		 * @return {Promise<object|null>} The task, or null when it could not be read.
+		 * @spec openspec/changes/tasks-record-source/specs/tasks-record-source/spec.md#requirement-the-tasks-source-reads-one-task
+		 */
+		loadRecord: (id) => store.fetchRecord(id),
+
+		/**
+		 * @param {string} id The task uuid.
+		 * @return {object|null} The task read for this id, with the row's display fields, or null.
+		 */
+		record: (id) => {
+			const task = store.records?.[String(id)]
+			return task ? taskRow(task) : null
+		},
+
+		/**
+		 * @param {string} id The task uuid.
+		 * @return {number|null} The HTTP status of a failed read of this id, or null.
+		 */
+		recordError: (id) => store.recordErrors?.[String(id)] ?? null,
 
 		/**
 		 * @return {boolean} Whether a load is in flight.

package/src/composables/useTaskInboxStore.js

@@ -118,9 +118,50 @@ export const useTaskInboxStore = defineStore('cnTaskInbox', {
 		loading: false,
 		/** @type {string|null} The last load failure, for the console trail. */
 		error: null,
+		/** @type {Object<string, object>} Single tasks read for a detail page, keyed on their uuid. */
+		records: {},
+		/** @type {Object<string, number|null>} The HTTP status of a failed single read, keyed on the uuid. */
+		recordErrors: {},
 	}),
 
 	actions: {
+		/**
+		 * Read one task into `records`, for a `type: "detail"` page on the
+		 * `tasks` source. A refusal (403) or a missing task (404) leaves no
+		 * record and keeps the status in `recordErrors`, so the page can tell
+		 * "not found" from "still loading". The engine decides what the caller
+		 * may read; nothing here widens that.
+		 *
+		 * @param {string} uuid The task uuid.
+		 * @return {Promise<object|null>} The task, or null when it could not be read.
+		 * @spec openspec/changes/tasks-record-source/specs/tasks-record-source/spec.md#requirement-the-tasks-source-reads-one-task
+		 */
+		async fetchRecord(uuid) {
+			const key = String(uuid || '').trim()
+			if (key === '') {
+				return null
+			}
+			try {
+				const response = await axios.get(generateUrl(`${FLOW_TASKS_URL}/${encodeURIComponent(key)}`))
+				const data = response.data
+				const task = data && typeof data === 'object' && data.results && !Array.isArray(data.results) ? data.results : data
+				const { [key]: dropped, ...errors } = this.recordErrors
+				this.recordErrors = errors
+				if (!task || typeof task !== 'object' || Array.isArray(task)) {
+					return null
+				}
+				this.records = { ...this.records, [key]: task }
+				return task
+			} catch (error) {
+				const { [key]: dropped, ...records } = this.records
+				this.records = records
+				this.recordErrors = { ...this.recordErrors, [key]: error?.response?.status ?? null }
+				// eslint-disable-next-line no-console
+				console.error(`[useTaskInboxStore] Loading task "${key}" failed`, error)
+				return null
+			}
+		},
+
 		/**
 		 * Read one inbox page WITHOUT touching the store's state, so a surface
 		 * that lists a different slice (the Tasks tab of one record) cannot

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

@@ -932,9 +932,10 @@
 /* ---- The archiving card (CnRetentionWidget, DqZaakArchivering) ----------- */
 /* The board titles it 17px at 1.2 with a 14px muted line 3px under it, and
    draws each fact as a 13px label over a 15px value at 500 above a hairline.
-   The inset is the board card's own, from the panel around it.
+   "Recompute nomination" sits at the header's end. The inset is the board
+   card's own, from the panel around it.
    @spec openspec/changes/board-retention-card/specs/board-retention-card/spec.md#requirement-the-archiving-card-is-drawn-as-the-board-draws-it */
-.cn-look-board .cn-retention .cn-retention__head {
+.cn-look-board .cn-retention .cn-retention__head-text {
 	gap: 3px;
 }
 
@@ -943,7 +944,7 @@
 	line-height: 1.2;
 }
 
-.cn-look-board .cn-retention .cn-retention__head .cn-retention__muted {
+.cn-look-board .cn-retention .cn-retention__head-text .cn-retention__muted {
 	font-size: 14px;
 }
 

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

@@ -43,6 +43,19 @@
 	color: var(--color-text-maxcontrast);
 }
 
+/* The breadcrumb row stays under the title, in the title's column, with a
+   count line below it. Unplaced, the trail took the next free cell: beside
+   the count line, under the header buttons (DqZaaktypen).
+   @spec openspec/changes/index-count-subtitle-keeps-crumb-row/specs/index-count-subtitle-keeps-crumb-row/spec.md#requirement-the-breadcrumb-row-stays-under-the-title */
+.cn-look-board .cn-index-page .cn-page-header .cn-header-trail {
+	grid-column: 1;
+	grid-row: 2;
+}
+
+.cn-look-board .cn-index-page .cn-page-header .cn-header-trail ~ .cn-page-header__description {
+	grid-row: 3;
+}
+
 .cn-look-board .cn-index-page .cn-page-header .cn-index-page__header-buttons {
 	grid-column: 2;
 	grid-row: 1;
@@ -1285,6 +1298,55 @@
 	font-weight: 600;
 }
 
+/* The folder rows as the board draws them (DqAfdelingen), like a tree menu's
+   folder rows: 8px 10px, an 8px corner, 14px at 400 without a folder icon,
+   each level 18px further in inside the row so the highlight spans the pane,
+   the open folder on the primary tint in the deep primary at 700. The weight
+   goes through the theme's button token too: a row is a button, and the
+   nldesign theme sets every button's weight with `!important`.
+   @spec openspec/changes/board-folder-pane-rows/specs/board-folder-pane-rows/spec.md#requirement-a-board-folder-pane-draws-the-boards-folder-rows */
+.cn-look-board .cn-index-page__folder-pane .cn-folder-tree__children {
+	padding-inline-start: 0;
+}
+
+.cn-look-board .cn-index-page__folder-pane .cn-folder-tree__item,
+.cn-look-board .cn-index-page__folder-pane .cn-folder-sidebar__all {
+	--nldesign-component-button-font-weight: 400;
+	min-height: 36px;
+	margin: 0;
+	padding: 8px 10px;
+	border-radius: 8px;
+	color: var(--color-main-text);
+	font-size: 14px;
+	font-weight: 400;
+}
+
+.cn-look-board .cn-index-page__folder-pane .cn-folder-tree__children .cn-folder-tree__item {
+	padding-inline-start: 28px;
+}
+
+.cn-look-board .cn-index-page__folder-pane .cn-folder-tree__children .cn-folder-tree__children .cn-folder-tree__item {
+	padding-inline-start: 46px;
+}
+
+.cn-look-board .cn-index-page__folder-pane .cn-folder-tree__children .cn-folder-tree__children .cn-folder-tree__children .cn-folder-tree__item {
+	padding-inline-start: 64px;
+}
+
+.cn-look-board .cn-index-page__folder-pane .cn-folder-tree__item > :not(.cn-folder-tree__name):not(.cn-folder-tree__count),
+.cn-look-board .cn-index-page__folder-pane .cn-folder-sidebar__all > :not(.cn-folder-sidebar__all-label) {
+	display: none;
+}
+
+.cn-look-board .cn-index-page__folder-pane .cn-folder-tree__item--active,
+.cn-look-board .cn-index-page__folder-pane .cn-folder-sidebar__all--active {
+	--nldesign-component-button-font-weight: 700;
+	--nldesign-color-on-surface: var(--color-primary-element-light-text);
+	background-color: var(--color-primary-element-light);
+	color: var(--color-primary-element-light-text);
+	font-weight: 700;
+}
+
 /* The selected folder's heading above the list: a 20px title over a soft line. */
 .cn-look-board .cn-index-page__scope-heading {
 	margin-bottom: 16px;