@conduction/nextcloud-vue 2.150.0 → 2.151.0

package/l10n/en.json

@@ -2399,7 +2399,10 @@
     "More actions for {name}": "More actions for {name}",
     "Unlink contact": "Unlink contact",
     "{term}, extendable by {extension}": "{term}, extendable by {extension}",
-    "Move {item}, use the arrow keys": "Move {item}, use the arrow keys"
+    "Move {item}, use the arrow keys": "Move {item}, use the arrow keys",
+    "Invited": "Invited",
+    "Accepted": "Accepted",
+    "Declined": "Declined"
   },
   "plurals": {
     "{count} member": [

package/l10n/nl.json

@@ -2008,7 +2008,7 @@
     "Mail is not available": "E-mail is niet beschikbaar",
     "Install Nextcloud Mail to draft and link mail here.": "Installeer Nextcloud Mail om hier e-mail op te stellen en te koppelen.",
     "Email template": "E-mailsjabloon",
-    "Open draft from template": "Concept openen vanuit sjabloon",
+    "Open draft from template": "Concept openen uit sjabloon",
     "Empty draft": "Leeg concept",
     "Could not open draft": "Kon concept niet openen",
     "Some template fields could not be filled. Fill these in the draft yourself:": "Sommige sjabloonvelden konden niet worden ingevuld. Vul deze zelf in het concept in:",
@@ -2654,7 +2654,10 @@
     "More actions for {name}": "Meer acties voor {name}",
     "Unlink contact": "Contact ontkoppelen",
     "{term}, extendable by {extension}": "{term}, te verdagen met {extension}",
-    "Move {item}, use the arrow keys": "{item} verplaatsen, gebruik de pijltjestoetsen"
+    "Move {item}, use the arrow keys": "{item} verplaatsen, gebruik de pijltjestoetsen",
+    "Invited": "Uitgenodigd",
+    "Accepted": "Geaccepteerd",
+    "Declined": "Afgewezen"
   },
   "plurals": {
     "{count} member": [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@conduction/nextcloud-vue",
-  "version": "2.150.0",
+  "version": "2.151.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/CnActionDialog/CnActionDialog.vue

@@ -21,7 +21,10 @@
 					<strong>{{ summary.title }}</strong>
 					<span v-if="summary.meta" class="cn-action-dialog__muted">{{ summary.meta }}</span>
 				</span>
-				<span v-if="summary.badge" class="cn-action-dialog__badge">{{ summary.badge }}</span>
+				<span
+					v-if="summary.badge"
+					class="cn-action-dialog__badge"
+					:class="summary.badgeVariant ? 'cn-status-badge--' + summary.badgeVariant : ''">{{ summary.badge }}</span>
 			</div>
 
 			<!-- Facts about the record, in titled groups ("Retention under the case type"). -->
@@ -218,7 +221,7 @@ let reasonSeq = 0
  * `config`:
  * - `title`, `subtitle`, `doneText`: texts, through the host translate;
  *   `eyebrow` a template filled from the record ("Close off · {identifier}").
- * - `summary`: `{ source?, title, meta?, badge?, icon? }`: templates filled from
+ * - `summary`: `{ source?, title, meta?, badge?, badgeVariant?, badgeColorMap?, icon? }`: templates filled from
  *   the record (`source` an endpointSource to read it from, else `object`).
  * - `facts`: `[{ title?, items: [{ label, value }] }]`, `value` a template; a
  *   `{path|<formatter>}` token reads through the built-in and app formatters.
@@ -355,7 +358,12 @@ export default {
 				return null
 			}
 			const title = this.fill(def.title)
-			return title ? { title, meta: this.fill(def.meta), badge: this.fill(def.badge) } : null
+			const badge = this.fill(def.badge)
+			const variants = ['default', 'success', 'warning', 'error', 'info', 'purple', 'teal']
+			const mapped = def.badgeColorMap && typeof def.badgeColorMap === 'object' ? def.badgeColorMap[badge] : undefined
+			const wanted = mapped || def.badgeVariant
+			const badgeVariant = variants.includes(wanted) ? wanted : ''
+			return title ? { title, meta: this.fill(def.meta), badge, badgeVariant } : null
 		},
 
 		/** @return {Array<{title: string, facts: Array<{label: string, value: string}>}>} The fact groups. */
@@ -858,12 +866,17 @@ export default {
 .cn-action-dialog__badge {
 	padding: 3px 10px;
 	border-radius: 12px;
-	background: var(--color-background-dark);
 	font-size: 13px;
 	font-weight: 600;
+	line-height: normal;
 	white-space: nowrap;
 }
 
+/* Without a tone (`badgeVariant`, `badgeColorMap`) the badge is neutral. */
+.cn-action-dialog__badge:not([class*='cn-status-badge--']) {
+	background: var(--color-background-dark);
+}
+
 .cn-action-dialog__title {
 	margin: 0 0 8px;
 	font-size: 14px;

package/src/components/CnConversationThread/CnConversationThread.vue

@@ -64,7 +64,11 @@
 					<span class="cn-conversation-thread__meta">
 						<span class="hidden-visually">{{ row.directionLabel }}</span>
 						<span class="cn-conversation-thread__author">{{ row.author }}</span>
-						<span v-if="row.channel" class="cn-conversation-thread__channel" data-testid="cn-conversation-channel">{{ row.channel }}</span>
+						<span v-if="row.channel" class="cn-conversation-thread__channel" data-testid="cn-conversation-channel"><CnIcon v-if="row.channelIcon"
+							class="cn-conversation-thread__channel-icon"
+							:name="row.channelIcon"
+							:size="13"
+							aria-hidden="true" />{{ row.channel }}</span>
 						<span v-if="row.status" class="cn-conversation-thread__status" data-testid="cn-conversation-status">{{ row.status }}</span>
 						<span v-if="showDirection"
 							class="cn-conversation-thread__direction"
@@ -151,6 +155,7 @@ import axios from '@nextcloud/axios'
 import { translate as t } from '@nextcloud/l10n'
 import { NcButton } from '@nextcloud/vue'
 import Send from 'vue-material-design-icons/Send.vue'
+import CnIcon from '../CnIcon/CnIcon.vue'
 import CnQuickFilterBar from '../CnQuickFilterBar/CnQuickFilterBar.vue'
 import { prefixUrl } from '../../utils/headers.js'
 import { userLocale } from '../../utils/userLocale.js'
@@ -185,6 +190,7 @@ export default {
 	name: 'CnConversationThread',
 
 	components: {
+		CnIcon,
 		CnQuickFilterBar,
 		NcButton,
 		Send,
@@ -197,7 +203,7 @@ export default {
 
 	props: {
 		/**
-		 * The messages, oldest first: `{ id?, author?, time?, text, side?, channel?, status?, actions?, note? }`.
+		 * The messages, oldest first: `{ id?, author?, time?, text, side?, channel?, channelIcon?, status?, actions?, note? }`.
 		 * `status` is shown after the channel ("Failed"); `actions` are
 		 * `{ id, label, disabled? }` buttons under the text, each emitting
 		 * `message-action`.
@@ -381,6 +387,7 @@ export default {
 						timeLabel: time.label,
 						datetime: time.datetime,
 						channel: typeof message.channel === 'string' ? message.channel : '',
+						channelIcon: typeof message.channelIcon === 'string' ? message.channelIcon : '',
 						status: typeof message.status === 'string' ? message.status : '',
 						actions: Array.isArray(message.actions) ? message.actions.filter((action) => action && action.id && action.label) : [],
 						directionLabel: side === 'us' ? t('nextcloud-vue', 'Sent message') : t('nextcloud-vue', 'Received message'),
@@ -787,4 +794,11 @@ export default {
 .cn-conversation-thread__channel {
 	color: var(--color-text-maxcontrast);
 }
+
+/* The channel's icon (`channelIcon`) stands before its name, 5px apart. */
+.cn-conversation-thread__channel:has(.cn-conversation-thread__channel-icon) {
+	display: inline-flex;
+	align-items: center;
+	gap: 5px;
+}
 </style>

package/src/components/CnConversationThread/CnConversationWidget.vue

@@ -109,7 +109,8 @@ import { userDisplayName } from '../../utils/userDisplayName.js'
  * `bodyField`), `timeField` (alias `timestampField`), `authorField` (alias
  * `senderField`), `sideField` (alias `directionField`) with `usValue` (alias
  * `outValue`) for the messages the organisation sent, and `channelField` with
- * an optional `channelMap` from stored value to label ("email" to "E-mail").
+ * an optional `channelMap` from stored value to label ("email" to "E-mail")
+ * and `channelIcons` from stored value to an icon name, drawn before the label.
  *
  * The reply box posts to `endpoint` (`@objectId` filled in), or runs
  * `replyAction`, an action descriptor the app decides the meaning of: it is
@@ -294,6 +295,7 @@ export default {
 			const c = this.content || {}
 			const usValue = String(c.outValue ?? c.usValue ?? 'us')
 			const channelMap = c.channelMap && typeof c.channelMap === 'object' ? c.channelMap : {}
+			const channelIcons = c.channelIcons && typeof c.channelIcons === 'object' ? c.channelIcons : {}
 			const statusMap = c.statusMap && typeof c.statusMap === 'object' ? c.statusMap : {}
 			const stored = this.rawMessages()
 				.map(({ message, side, key }, index) => {
@@ -310,6 +312,8 @@ export default {
 						text: readPath(message, c.bodyField || c.textField || 'text'),
 						side: sideOf,
 						channel: channelKey === '' ? '' : this.tr(Object.hasOwn(channelMap, channelKey) ? channelMap[channelKey] : channelKey),
+						// @spec openspec/changes/conversation-channel-icons/specs/conversation-channel-icons/spec.md#requirement-a-messages-channel-can-carry-its-icon
+						channelIcon: Object.hasOwn(channelIcons, channelKey) && typeof channelIcons[channelKey] === 'string' ? channelIcons[channelKey] : '',
 						status: statusKey === '' ? '' : this.tr(Object.hasOwn(statusMap, statusKey) ? statusMap[statusKey] : statusKey),
 						actions: this.messageActions
 							.filter((action) => this.actionApplies(action, message))

package/src/components/CnFilesBrowser/CnFilesBrowser.vue

@@ -327,7 +327,7 @@
 								{{ columnLabel(column) }}
 							</template>
 						</th>
-						<th class="cn-files-browser__col-actions" scope="col">
+						<th class="cn-files-browser__col-actions" scope="col" :style="actionsColumnStyle">
 							<span class="hidden-visually">{{ t('nextcloud-vue', 'Actions') }}</span>
 						</th>
 					</tr>
@@ -1343,6 +1343,8 @@ export default {
 
 	data() {
 		return {
+			/** The actions column's measured width while a row button stands in it, else null. */
+			actionsColumnWidth: null,
 			currentPath: this.rootPath,
 			/** The open folder as a node, or null before the first listing. */
 			folder: null,
@@ -1402,6 +1404,18 @@ export default {
 	},
 
 	computed: {
+		/**
+		 * The actions column's width. The table lays out fixed, so its columns
+		 * take their widths from the head; a row button (Beoordelen) beside the
+		 * row menu needs more than the menu's 48px, measured from the first row.
+		 *
+		 * @return {object} The head cell's style.
+		 * @spec openspec/changes/files-actions-column-fits-row-button/specs/files-actions-column-fits-row-button/spec.md#requirement-the-actions-column-fits-a-row-button
+		 */
+		actionsColumnStyle() {
+			return this.actionsColumnWidth ? { width: this.actionsColumnWidth + 'px' } : {}
+		},
+
 		/**
 		 * The `dropDetail` text: the string, or the text of the first variant
 		 * `{ when, text }` whose `when` is `true` or that has none.
@@ -1856,6 +1870,10 @@ export default {
 		}
 	},
 
+	updated() {
+		this.measureActionsColumn()
+	},
+
 	beforeUnmount() {
 		this.cnDetailSideColumn?.claim?.(this.$.uid, false)
 		for (const channel of FOLDER_CHANGED_CHANNELS) {
@@ -1865,6 +1883,34 @@ export default {
 	},
 
 	methods: {
+		/**
+		 * Measure the first row's actions cell (padding, the row button, the
+		 * gap and the menu) and keep it as the column's width, so a fixed
+		 * table does not push the button past its card. Without a row button
+		 * the column keeps its own width.
+		 *
+		 * @spec openspec/changes/files-actions-column-fits-row-button/specs/files-actions-column-fits-row-button/spec.md#requirement-the-actions-column-fits-a-row-button
+		 */
+		measureActionsColumn() {
+			const cell = this.$el && this.$el.querySelector ? this.$el.querySelector('tbody .cn-files-browser__col-actions') : null
+			const button = cell ? cell.querySelector('.cn-files-browser__row-button') : null
+			if (!cell || !button) {
+				if (this.actionsColumnWidth !== null) {
+					this.actionsColumnWidth = null
+				}
+				return
+			}
+			const style = window.getComputedStyle(cell)
+			const content = [...cell.children].reduce((sum, child) => {
+				const childStyle = window.getComputedStyle(child)
+				return sum + child.offsetWidth + (parseFloat(childStyle.marginInlineStart) || 0) + (parseFloat(childStyle.marginInlineEnd) || 0)
+			}, 0)
+			const width = Math.ceil(content + (parseFloat(style.paddingInlineStart) || 0) + (parseFloat(style.paddingInlineEnd) || 0))
+			if (width > 0 && width !== this.actionsColumnWidth) {
+				this.actionsColumnWidth = width
+			}
+		},
+
 		t,
 
 		preventMiddleClickAutoscroll,
@@ -3588,7 +3634,6 @@ export default {
 
 .cn-files-browser__row-button {
 	display: inline-flex;
-	margin-inline-end: 8px;
 	vertical-align: middle;
 }
 

package/src/components/CnObjectDataWidget/CnObjectDataWidget.md

@@ -121,7 +121,7 @@ export default {
 | `icon` | Object\|Function | `null` | MDI icon component shown in the card header |
 | `objectType` | String | `''` | Registered object type slug used by `objectStore.saveObject()` |
 | `store` | Object | `null` | Explicit Pinia objectStore instance; auto-detected via Pinia when omitted |
-| `overrides` | Object | `{}` | Per-property config: `{ key: { order, gridColumn, gridRow, hidden, editable, label, widget, visibleWhen } }`. `visibleWhen` shows the field only when the shared visibility predicate holds for this object, in its local mode: `{ field, op, value }` (ops `eq`, `neq`, `in`, `empty`, ...), or `all` / `any` of those. It reads unsaved changes too. A rule that needs a request (`endpoint`, `source`) is ignored. Read grid only: the Edit form still offers the field. `format: 'duration'` reads an ISO period in words (`P28D` "4 weken"), and `extendBy` names the object's extension period, read as "4 weken, te verdagen met 2". |
+| `overrides` | Object | `{}` | Per-property config: `{ key: { order, gridColumn, gridRow, hidden, editable, label, widget, visibleWhen } }`. `visibleWhen` shows the field only when the shared visibility predicate holds for this object, in its local mode: `{ field, op, value }` (ops `eq`, `neq`, `in`, `empty`, ...), or `all` / `any` of those. It reads unsaved changes too. A rule that needs a request (`endpoint`, `source`) is ignored. Read grid only: the Edit form still offers the field. `format: 'date'` / `'date-long'` reads a date the board way ("3 okt", "3 okt 2026"). `format: 'duration'` reads an ISO period in words (`P28D` "4 weken"), and `extendBy` names the object's extension period, read as "4 weken, te verdagen met 2". |
 | `columns` | Number | `3` | Number of CSS grid columns in the widget |
 | `collapsedFields` (`collapsed-fields`) | Number | `null` | Number of fields shown while collapsed, with a "Show all N fields" button for the rest. `null` fits the cell: the whole rows that fit stay, and the button only appears when the cell overflows |
 | `hideEmpty` | Boolean | `false` | Hide fields with no value instead of rendering an em dash. For discriminated supertypes (one `ticket` schema holding request/complaint/contactmoment), so the grid is type-aware without the schema enumerating which fields belong to which variant. Read grid only — the field being edited, a field with unsaved changes, and the Edit form stay visible; `false`/`0` are values and are never hidden. |

package/src/components/CnObjectDataWidget/CnObjectDataWidget.vue

@@ -438,7 +438,9 @@ import CnGroupNameCell from '../CnCellRenderer/CnGroupNameCell.vue'
 import CnFormDialog from '../CnFormDialog/CnFormDialog.vue'
 import { normalizeLook } from '../../composables/useLook.js'
 import { useObjectStore } from '../../store/index.js'
+import { formatBoardDate } from '../../utils/boardDate.js'
 import { formatTermDuration } from '../../utils/builtInFormatters.js'
+import { parseDateValue } from '../../utils/dateVariant.js'
 import { foldDottedFields, isDottedKey, spreadDottedFields } from '../../utils/dottedFields.js'
 import { groupDisplayName, loadGroupDisplayName, searchNextcloudGroups } from '../../utils/groupAutocomplete.js'
 import { humaniseKey } from '../../utils/humaniseKey.js'
@@ -1105,7 +1107,19 @@ export default {
 				// label, beside a list that already read "Ingediend".
 				const enumLabel = this.enumDisplayLabel(field, raw)
 				const empty = this.emptyValueFor(field, raw)
-				if (empty === null && field.format === 'duration' && raw !== null && raw !== undefined && raw !== '') {
+				// Only a format the page's override asks for: a schema `format` keeps its own rendering.
+				const shown = this.resolvedOverrides[field.key]?.format
+				if (empty === null && (shown === 'date' || shown === 'date-long') && raw !== null && raw !== undefined && raw !== '') {
+					// The board's short date ("3 okt"), or with the year always ("3 okt 2026").
+					const date = parseDateValue(raw)
+					if (date !== null) {
+						values[field.key] = shown === 'date-long'
+							? formatBoardDate(date, new Date(date.getFullYear() + 1, 0, 1))
+							: formatBoardDate(date)
+						continue
+					}
+				}
+				if (empty === null && shown === 'duration' && raw !== null && raw !== undefined && raw !== '') {
 					// A term in words, with the extension at `extendBy` when the object holds one.
 					const extension = typeof field.extendBy === 'string' ? readPath(this.objectData || {}, field.extendBy) : null
 					values[field.key] = formatTermDuration(raw, extension)

package/src/components/CnPlanWidget/CnPlanWidgetRow.vue

@@ -4,7 +4,10 @@
 -->
 <template>
 	<div class="cn-plan-row" :data-testid="`cn-plan-row-${item.key || item.uuid}`">
-		<span class="cn-plan-row__name">{{ item.name }}</span>
+		<span class="cn-plan-row__text">
+			<span class="cn-plan-row__name">{{ item.name }}</span>
+			<span v-if="item.description" class="cn-plan-row__meta" data-testid="cn-plan-row-meta">{{ item.description }}</span>
+		</span>
 		<span class="cn-plan-row__state" :data-state="item.state">{{ stateLabel(item.state) }}</span>
 		<NcButton v-if="item.state === 'enabled' && item.discretionary"
 			:disabled="busy"
@@ -95,11 +98,23 @@ export default {
 	padding-block: 6px;
 }
 
-.cn-plan-row__name {
+.cn-plan-row__text {
+	display: flex;
 	flex: 1 1 auto;
+	flex-direction: column;
+	gap: 2px;
+	min-width: 0;
+}
+
+.cn-plan-row__name {
 	font-weight: 600;
 }
 
+.cn-plan-row__meta {
+	color: var(--color-text-maxcontrast);
+	font-size: 13px;
+}
+
 .cn-plan-row__state {
 	padding: 2px 10px;
 	border-radius: 12px;

package/src/components/CnRecordListWidget/CnRecordListWidget.vue

@@ -309,6 +309,12 @@
 							:style="{ background: item.dot }"
 							aria-hidden="true"
 							data-testid="cn-record-list-dot" />
+						<span v-if="iconTiles"
+							class="cn-record-list__icon-tile"
+							aria-hidden="true"
+							data-testid="cn-record-list-icon-tile">
+							<CnIcon :name="item.icon" :size="18" />
+						</span>
 						<span class="cn-record-list__main">
 							<span v-if="item.title" class="cn-record-list__title">{{ item.title }}</span>
 							<span v-if="item.meta" class="cn-record-list__meta">{{ item.meta }}</span>
@@ -592,6 +598,7 @@ import { resolveDue } from '../../utils/dueText.js'
 import { fillCountLabel } from '../../utils/fillCountLabel.js'
 import { fillTemplate, firstFilled } from '../../utils/fillTemplate.js'
 import { unwrapAppConfig } from '../../utils/formatMetric.js'
+import { variantForColor } from '../../utils/headerFieldChips.js'
 import { initialsOf } from '../../utils/initials.js'
 import { lensUnavailableText, readLensReports } from '../../utils/lensAvailability.js'
 import { isObjectRowsSpec, objectRowsOf } from '../../utils/objectRows.js'
@@ -1000,6 +1007,17 @@ export default {
 			return PRESENTATIONS.includes(value) ? value : 'rows'
 		},
 
+		/**
+		 * Whether a `rows` row leads with its icon in a round tile
+		 * (`iconTile: true` beside `icon`), as DqZaakTaken draws "Wat hierna komt".
+		 *
+		 * @return {boolean}
+		 * @spec openspec/changes/record-list-row-icon-tile/specs/record-list/spec.md#requirement-a-record-list-row-can-lead-with-an-icon-tile
+		 */
+		iconTiles() {
+			return this.content?.iconTile === true && this.cardIcons
+		},
+
 		/**
 		 * Whether a `cards` card leads its title with an icon: only when the
 		 * list declares `icon`, so a card without one has no placeholder.
@@ -2627,7 +2645,11 @@ export default {
 		},
 
 		/**
-		 * The row's pill: `{ field, labels?, colorMap?, variant?, hideValues? }`.
+		 * The row's pill: `{ field, labels?, colorMap?, colorField?, variant?, variantWhen?, hideValues? }`.
+		 * `variantWhen` (`[{ when, variant }]`, the first whose condition holds for the row) wins over `colorMap`.
+		 * `colorField` reads the tone from the row (a colour name such as a
+		 * status type's `colour`: purple, teal, blue ...) where `colorMap`
+		 * names none (DqMijnWerk "In behandeling" in the status's purple).
 		 *
 		 * @param {object} row The row.
 		 * @param {object} [config] A pill config; the widget's `pill` by default.
@@ -2652,7 +2674,14 @@ export default {
 			const labels = pill.labels && typeof pill.labels === 'object' ? pill.labels : {}
 			const map = pill.colorMap && typeof pill.colorMap === 'object' ? pill.colorMap : {}
 			const found = Object.keys(map).find((k) => k.toLowerCase() === key.toLowerCase())
-			const variant = found ? map[found] : pill.variant
+			// `variantWhen` colours the pill by the row rather than the value: a
+			// finished case is green whatever its case type calls the final status.
+			const rule = Array.isArray(pill.variantWhen)
+				? pill.variantWhen.find((entry) => entry && entry.when && evaluateVisibleWhenLocal(entry.when, row || {}))
+				: null
+			const colour = pill.colorField ? readPath(row, pill.colorField) : null
+			const fromRow = typeof colour === 'string' && colour !== '' ? variantForColor(colour) : null
+			const variant = rule ? rule.variant : (found ? map[found] : (fromRow || pill.variant))
 			return {
 				label: labels[key] ? this.translate(labels[key]) : key,
 				variant: isBadgeVariant(variant) ? variant : 'default',
@@ -3585,6 +3614,20 @@ a.cn-record-list__inline-title {
 	color: var(--color-primary-element);
 	text-decoration: underline;
 }
+
+/* A row's icon in a 36px round tile on the sunken ground, before the text
+   (`iconTile`, DqZaakTaken "Wat hierna komt"). */
+.cn-record-list__icon-tile {
+	display: flex;
+	flex: none;
+	align-items: center;
+	justify-content: center;
+	width: 36px;
+	height: 36px;
+	border-radius: 18px;
+	background: var(--color-background-dark);
+	color: var(--color-main-text);
+}
 </style>
 
 <style>

package/src/components/CnRetentionWidget/CnRetentionWidget.vue

@@ -658,6 +658,12 @@ export default {
 	flex-direction: column;
 	gap: 2px;
 	min-width: 0;
+	line-height: normal;
+}
+
+/* A row's second line is 13px, as the boards draw it (DqZaakArchivering). */
+.cn-retention__row-text .cn-retention__muted {
+	font-size: 13px;
 }
 
 /* A round mark before a hold or transfer row: LH (legal hold) on the error
@@ -671,7 +677,7 @@ export default {
 	height: 32px;
 	border-radius: 16px;
 	background: var(--color-background-dark);
-	color: var(--color-text-maxcontrast);
+	color: var(--cn-board-text-soft, var(--color-text-maxcontrast));
 	font-size: 12px;
 	font-weight: 700;
 }
@@ -682,6 +688,7 @@ export default {
 }
 
 .cn-retention__row-title {
+	font-size: 15px;
 	font-weight: 600;
 }
 

package/src/components/CnTimelineWidget/CnTimelineManage.vue

@@ -102,7 +102,7 @@
 						<span class="cn-timeline-manage__author">{{ entry.author }}</span>
 						<span class="cn-timeline-manage__moment">{{ moment(entry.created) }}</span>
 						<span v-if="entry.visibility === 'public'"
-							class="cn-timeline-manage__badge"
+							class="cn-timeline-manage__badge cn-timeline-manage__badge--public"
 							data-testid="cn-timeline-public">
 							{{ publicLabel }}
 						</span>

package/src/css/dialog.css

@@ -463,6 +463,12 @@ body:has(.cn-look-board):not(:has(.cn-look-nextcloud)) .modal-mask {
 	font-size: var(--cn-field-text-size, 15px);
 }
 
+/* A board textarea's lines sit on the normal line height, as the boards'
+   `font` shorthand sets it: two rows are 58px, not 68 (DqArchiveren Reden). */
+.cn-dialog-board .dialog__content .textarea__input {
+	line-height: normal;
+}
+
 /* A plain input an app puts in a board dialog (a date, a number) is the same
    40px control; Nextcloud's core stylesheet makes it 34px. */
 .cn-dialog-board .dialog__content input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=file]):not([type=range]):not([type=color]):not([type=submit]):not([type=button]):not([type=reset]):not([type=image]):not(.input-field__input) {

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

@@ -19,6 +19,13 @@
 	--cn-board-notice-ink: var(--color-warning-text, #7a4f00);
 	/* The done marker of the next-step card. */
 	--cn-board-success-tint: var(--color-success-light, #e7f3ea);
+	/* The ink on that tint: a completed plan row's state. */
+	--cn-board-success-ink: var(--color-success-text, #1e6b2a);
+	/* The ink on the light primary fill: an active plan row's state. */
+	--cn-board-primary-light-ink: var(--color-primary-element-light-text, #234a78);
+	/* The teal badge of a public history entry. */
+	--cn-board-teal-tint: var(--nldesign-color-teal-light, #e3f1f3);
+	--cn-board-teal-ink: var(--nldesign-color-teal-dark, #1d5e66);
 	/* Card h2 and side heading. */
 	--cn-board-heading-size: 17px;
 	--cn-board-side-heading-size: 15px;
@@ -582,6 +589,20 @@
 	font-size: 13px;
 }
 
+/* The initials beside a message: the resident's in the soft ink on the chip
+   ground, ours in the primary tint's ink on its light ground, as
+   DqZaakContact draws SV and PJ (r31: the initials read main ink).
+   @spec openspec/changes/board-conversation-avatar-tones/specs/board-conversation-avatar-tones/spec.md#requirement-a-messages-initials-take-their-sides-tone */
+.cn-look-board .cn-conversation-thread .cn-conversation-thread__avatar:not(.cn-look-nextcloud *) {
+	background: var(--color-background-dark);
+	color: var(--cn-board-text-soft);
+}
+
+.cn-look-board .cn-conversation-thread .cn-conversation-thread__message--us .cn-conversation-thread__avatar:not(.cn-look-nextcloud *) {
+	background: var(--color-primary-element-light);
+	color: var(--color-primary-element-light-text);
+}
+
 /* A message keeps 64px free on the side away from its avatar, so the two
    sides read as two columns; the line above it is 13px in the soft ink at the
    normal line height, and our bubble's text is in the main ink. Each names
@@ -849,6 +870,13 @@
 	font-weight: 500;
 }
 
+/* The mail card's header buttons (Mail koppelen, Mail opstellen) are the
+   board's 40px control (DqZaakEmail; probed on :8080: 34 live).
+   @spec openspec/changes/board-mail-header-buttons-40/specs/board-mail-header-buttons-40/spec.md#requirement-the-mail-cards-header-buttons-are-40px */
+.cn-look-board .cn-mail-tab__header-actions .button-vue:where(:not(.cn-look-nextcloud *)) {
+	--button-size: var(--cn-board-control-height);
+}
+
 /* The files table's checkbox column is the board's 42px (12px either side
    of the 18px box): DqZaakDocumenten and DqDocumentenBeheer both draw it so.
    The component's 36px pushed the file icon and name 6px left (r31: name 96
@@ -2428,3 +2456,112 @@
 .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:has(> .cn-object-data-widget__grid-wrap) {
 	padding-top: 14px;
 }
+
+/* Buttons in a side card stand as the boards draw them in a column: the full
+   width of the card with their label at the start (DqSociaalDomein
+   "Toestemming intrekken" and "Markeer voor aandacht"), a facts action at the
+   34px control height.
+   @spec openspec/changes/board-r31-side-buttons-checklist-boxes/specs/board-r31-side-buttons-checklist-boxes/spec.md#requirement-a-side-cards-button-spans-the-card-with-its-label-at-the-start */
+.cn-look-board .cn-detail-page__side .cn-facts-widget__actions:not(.cn-look-nextcloud *) > .button-vue {
+	--button-size: 34px;
+	--default-clickable-area: 34px;
+	flex: 1 1 100%;
+	height: 34px;
+	min-height: 34px;
+}
+
+.cn-look-board .cn-detail-page__side .cn-facts-widget__actions:not(.cn-look-nextcloud *) > .button-vue .button-vue__wrapper,
+.cn-look-board .cn-attention-flag:not(.cn-look-nextcloud *) .button-vue .button-vue__wrapper {
+	justify-content: flex-start;
+}
+
+/* A checklist's boxes are the boards' 18px, an open one in the control
+   border grey and a ticked one in the primary colour (DqTaak "Checklist").
+   @spec openspec/changes/board-r31-side-buttons-checklist-boxes/specs/board-r31-side-buttons-checklist-boxes/spec.md#requirement-a-board-checklist-box-is-18px-and-grey-while-open */
+.cn-look-board .cn-checklist-widget__item .checkbox-radio-switch:not(.cn-look-nextcloud *) .checkbox-content__icon svg {
+	width: 18px;
+	height: 18px;
+}
+
+.cn-look-board .cn-checklist-widget__item .checkbox-radio-switch:not(.checkbox-radio-switch--checked):not(.cn-look-nextcloud *) .checkbox-content__icon {
+	color: var(--color-border-maxcontrast);
+}
+
+/* In a side card the pill and its date stand 8px apart, as the boards draw
+   them (DqOrganisatie "Lopende zaken", "Open tickets"); the row's own 16px
+   is for a full-width list.
+   @spec openspec/changes/record-list-pill-variant-when/specs/record-list/spec.md#requirement-a-side-rows-pill-and-date-stand-8px-apart */
+.cn-look-board .cn-detail-page__side .cn-record-list__aside:not(.cn-look-nextcloud *) {
+	gap: 8px;
+}
+
+/* A plan in the board look, as DqZaak draws "Zaakplan": ruled rows 10px
+   high on each side, the name at 15px/500 over its muted line, the state a
+   13px/600 pill toned by state (r31: grey rows, 600 names, 400 pills).
+   @spec openspec/changes/board-plan-rows/specs/plan-widget/spec.md */
+.cn-look-board .cn-plan .cn-plan-row:not(.cn-look-nextcloud *) {
+	gap: 6px 16px;
+	padding: 10px 0;
+	border-top: 1px solid var(--color-border);
+	background: transparent;
+}
+
+.cn-look-board .cn-plan .cn-plan-row .cn-plan-row__name:not(.cn-look-nextcloud *) {
+	font-size: 15px;
+	font-weight: 500;
+	line-height: normal;
+}
+
+.cn-look-board .cn-plan .cn-plan-row .cn-plan-row__meta:not(.cn-look-nextcloud *) {
+	line-height: normal;
+}
+
+.cn-look-board .cn-plan .cn-plan-row .cn-plan-row__state:not(.cn-look-nextcloud *) {
+	padding: 3px 10px;
+	border-radius: 12px;
+	background: var(--color-background-dark);
+	color: var(--cn-board-text-soft);
+	font-size: 13px;
+	font-weight: 600;
+	line-height: normal;
+	white-space: nowrap;
+}
+
+.cn-look-board .cn-plan .cn-plan-row .cn-plan-row__state[data-state='completed']:not(.cn-look-nextcloud *) {
+	background: var(--cn-board-success-tint);
+	color: var(--cn-board-success-ink);
+}
+
+.cn-look-board .cn-plan .cn-plan-row .cn-plan-row__state[data-state='active']:not(.cn-look-nextcloud *) {
+	background: var(--color-primary-element-light);
+	color: var(--cn-board-primary-light-ink);
+}
+
+/* The history card's note composer and entries as DqZaakHistorie draws them
+   (r31 strict verdict): the note field three lines high on a 1.5 line with
+   10px 12px inside, the add button at the board's 40px, the title-row
+   buttons 12px apart, and an entry the requester sees marked with a 12px
+   teal pill.
+   @spec openspec/changes/board-history-composer/specs/timeline/spec.md */
+.cn-look-board .cn-timeline-manage .cn-timeline-manage__draft:not(.cn-look-nextcloud *) {
+	min-height: calc(3 * 1.5em + 22px);
+	padding: 10px 12px;
+	line-height: 1.5;
+}
+
+.cn-look-board .cn-timeline-manage .cn-timeline-manage__composer-foot .button-vue:where(:not(.cn-look-nextcloud *)) {
+	--button-size: var(--cn-board-control-height);
+}
+
+.cn-look-board .cn-timeline-manage .cn-timeline-manage__header-actions:not(.cn-look-nextcloud *) {
+	gap: 12px;
+}
+
+.cn-look-board .cn-timeline-manage .cn-timeline-manage__badge--public:not(.cn-look-nextcloud *) {
+	padding: 2px 8px;
+	border-radius: 10px;
+	background: var(--cn-board-teal-tint);
+	color: var(--cn-board-teal-ink);
+	font-size: 12px;
+	font-weight: 600;
+}