@conduction/nextcloud-vue 2.143.0 → 2.144.0

package/src/components/CnTasksWidget/CnTasksWidget.vue

@@ -47,17 +47,42 @@
 			<table v-else class="cn-tasks-widget__table" data-testid="cn-tasks-widget-table">
 				<thead>
 					<tr>
-						<th scope="col">
-							{{ tr('Task') }}
-						</th>
-						<th scope="col">
-							{{ tr('Handler') }}
-						</th>
-						<th scope="col">
-							{{ tr('Task deadline') }}
-						</th>
-						<th scope="col">
-							{{ tr('Status') }}
+						<!-- `content.sortable` / `content.filterable`: a head sorts by its
+						     column and filters on its values (DqZaakTaken). -->
+						<th v-for="column in headColumns"
+							:key="column.key"
+							scope="col"
+							:aria-sort="headSort.key === column.key ? (headSort.dir === 'asc' ? 'ascending' : 'descending') : null"
+							:data-testid="`cn-tasks-widget-head-${column.key}`">
+							<span v-if="content.sortable === true || content.filterable === true" class="cn-tasks-widget__head">
+								<button v-if="content.sortable === true"
+									type="button"
+									class="cn-tasks-widget__head-sort"
+									:data-testid="`cn-tasks-widget-sort-${column.key}`"
+									@click="sortBy(column.key)">
+									{{ column.label }}
+									<ChevronUp v-if="headSort.key === column.key && headSort.dir === 'asc'" :size="14" />
+									<ChevronDown v-else :size="14" />
+								</button>
+								<template v-else>{{ column.label }}</template>
+								<NcActions v-if="content.filterable === true"
+									class="cn-tasks-widget__head-filter"
+									:aria-label="tr('Filter by {column}').replace('{column}', column.label)"
+									:data-testid="`cn-tasks-widget-filter-${column.key}`">
+									<template #icon>
+										<FilterOutline :size="14" />
+									</template>
+									<NcActionCheckbox v-for="option in headOptions(column.key)"
+										:key="option.value"
+										:modelValue="(headFilters[column.key] || []).includes(option.value)"
+										@update:modelValue="toggleHeadFilter(column.key, option.value)">
+										{{ option.label }}
+									</NcActionCheckbox>
+								</NcActions>
+							</span>
+							<template v-else>
+								{{ column.label }}
+							</template>
 						</th>
 						<th scope="col">
 							<span class="hidden-visually">{{ tr('Task actions') }}</span>
@@ -375,10 +400,13 @@ import axios from '@nextcloud/axios'
 import { showError, showSuccess } from '@nextcloud/dialogs'
 import { translate as t } from '@nextcloud/l10n'
 import { generateUrl } from '@nextcloud/router'
-import { NcActionButton, NcActions, NcAvatar, NcButton, NcLoadingIcon, NcTextField } from '@nextcloud/vue'
+import { NcActionButton, NcActionCheckbox, NcActions, NcAvatar, NcButton, NcLoadingIcon, NcTextField } from '@nextcloud/vue'
 import { inject, ref } from 'vue'
 import CheckCircle from 'vue-material-design-icons/CheckCircle.vue'
+import ChevronDown from 'vue-material-design-icons/ChevronDown.vue'
+import ChevronUp from 'vue-material-design-icons/ChevronUp.vue'
 import CircleOutline from 'vue-material-design-icons/CircleOutline.vue'
+import FilterOutline from 'vue-material-design-icons/FilterOutline.vue'
 import CnStatusBadge from '../CnStatusBadge/CnStatusBadge.vue'
 import CnTaskFormDialog from '../CnTaskFormDialog/CnTaskFormDialog.vue'
 import CnTaskWorkCard from './CnTaskWorkCard.vue'
@@ -458,12 +486,16 @@ export default {
 
 	components: {
 		CheckCircle,
+		ChevronDown,
+		ChevronUp,
 		CircleOutline,
 		CnStatusBadge,
 		CnTaskFormDialog,
 		CnTaskWorkCard,
+		FilterOutline,
 		NcActions,
 		NcActionButton,
+		NcActionCheckbox,
 		NcAvatar,
 		NcButton,
 		NcLoadingIcon,
@@ -618,6 +650,10 @@ export default {
 	data() {
 		return {
 			pollTimer: null,
+			/** The table's head sort, `{ key, dir }`; no key keeps open tasks first. */
+			headSort: { key: '', dir: 'asc' },
+			/** The table's head filters, `{ column: values[] }`. */
+			headFilters: {},
 			/** Uuids of the tasks a checkbox is completing, until the next read. */
 			completing: [],
 			/** Whether the table's create form is open. */
@@ -777,7 +813,26 @@ export default {
 		 * @spec openspec/changes/record-task-table/specs/record-task-table/spec.md#requirement-a-records-tasks-show-as-a-table-with-their-summary-and-new-task-in-the-header
 		 */
 		tableRows() {
-			return [...this.rows.filter((task) => task.isTerminal !== true), ...this.rows.filter((task) => task.isTerminal === true)]
+			const kept = this.rows.filter((task) => Object.entries(this.headFilters).every(([key, values]) => values.length === 0 || values.includes(this.headValue(task, key))))
+			if (this.headSort.key) {
+				const dir = this.headSort.dir === 'desc' ? -1 : 1
+				return [...kept].sort((a, b) => {
+					const x = this.headSortValue(a, this.headSort.key)
+					const y = this.headSortValue(b, this.headSort.key)
+					return (x < y ? -1 : (x > y ? 1 : 0)) * dir
+				})
+			}
+			return [...kept.filter((task) => task.isTerminal !== true), ...kept.filter((task) => task.isTerminal === true)]
+		},
+
+		/** @return {Array<{key: string, label: string}>} The table's data columns. */
+		headColumns() {
+			return [
+				{ key: 'title', label: this.tr('Task') },
+				{ key: 'handler', label: this.tr('Handler') },
+				{ key: 'due', label: this.tr('Task deadline') },
+				{ key: 'state', label: this.tr('Status') },
+			]
 		},
 
 		/**
@@ -1158,6 +1213,84 @@ export default {
 		 * @param {object} task The task row.
 		 * @return {string} The name.
 		 */
+		/**
+		 * A row's value in a column, as a head filter keeps it.
+		 *
+		 * @param {object} task The task row.
+		 * @param {string} key The column.
+		 * @return {string}
+		 */
+		headValue(task, key) {
+			if (key === 'title') {
+				return this.titleOf(task)
+			}
+			if (key === 'handler') {
+				return String(task.assignee || '')
+			}
+			if (key === 'due') {
+				return this.content.dueFormat === 'date' ? this.dueDate(task) : this.dueLabel(task)
+			}
+			return String(task.state || '')
+		},
+
+		/**
+		 * A row's value in a column, as its head sorts it: the deadline by date.
+		 *
+		 * @param {object} task The task row.
+		 * @param {string} key The column.
+		 * @return {string|number}
+		 */
+		headSortValue(task, key) {
+			if (key === 'due') {
+				const time = Date.parse(task.dueAt || task.dueDate || '')
+				return Number.isNaN(time) ? Number.POSITIVE_INFINITY : time
+			}
+			if (key === 'handler') {
+				return this.handlerName(task).toLowerCase()
+			}
+			if (key === 'state') {
+				return this.stateLabel(task).toLowerCase()
+			}
+			return this.titleOf(task).toLowerCase()
+		},
+
+		/**
+		 * The values a column's head filter offers, one per value the rows hold.
+		 *
+		 * @param {string} key The column.
+		 * @return {Array<{value: string, label: string}>}
+		 */
+		headOptions(key) {
+			const seen = new Map()
+			for (const task of this.rows) {
+				const value = this.headValue(task, key)
+				if (value !== '' && !seen.has(value)) {
+					seen.set(value, key === 'handler' ? this.handlerName(task) : (key === 'state' ? this.stateLabel(task) : value))
+				}
+			}
+			return [...seen].map(([value, label]) => ({ value, label }))
+		},
+
+		/**
+		 * Sort by a column: ascending first, then descending.
+		 *
+		 * @param {string} key The column.
+		 */
+		sortBy(key) {
+			this.headSort = this.headSort.key === key && this.headSort.dir === 'asc' ? { key, dir: 'desc' } : { key, dir: 'asc' }
+		},
+
+		/**
+		 * Keep or drop one value of a column's head filter.
+		 *
+		 * @param {string} key The column.
+		 * @param {string} value The value.
+		 */
+		toggleHeadFilter(key, value) {
+			const current = this.headFilters[key] || []
+			this.headFilters = { ...this.headFilters, [key]: current.includes(value) ? current.filter((v) => v !== value) : [...current, value] }
+		},
+
 		handlerName(task) {
 			return userDisplayName(task.assignee) || String(task.assignee || '')
 		},
@@ -1594,6 +1727,30 @@ function recordUuid(configured, objectId) {
 	font-size: 14px;
 }
 
+.cn-tasks-widget__head {
+	display: inline-flex;
+	align-items: center;
+	gap: 4px;
+}
+
+.cn-tasks-widget__head-sort {
+	display: inline-flex;
+	align-items: center;
+	gap: 4px;
+	min-height: 0;
+	margin: 0;
+	padding: 0;
+	border: 0;
+	background: transparent;
+	color: inherit;
+	font: inherit;
+	cursor: pointer;
+}
+
+.cn-tasks-widget__head-filter {
+	--button-size: 22px;
+}
+
 .cn-tasks-widget__table th {
 	padding: 12px 16px;
 	background: color-mix(in srgb, var(--color-background-hover) 40%, var(--color-main-background));

package/src/css/dialog.css

@@ -216,9 +216,15 @@ body:has(.cn-look-board):not(:has(.cn-look-nextcloud)) .modal-mask {
 /* A choice card with a checkbox (CnAssignDialog's toggles) is as tight as
    the board draws it (DqOverdragen, 76px for a label and a two-line note):
    10px 14px padding, the checkbox row at the 24px minimum target instead of
-   NcCheckboxRadioSwitch's 34px, the note at 1.2 line height. */
+   NcCheckboxRadioSwitch's 34px, the note at 1.2 line height; the card's
+   corners 8px and the label on an 18px line, as the board draws them. */
 .cn-dialog-board .cn-assign-dialog__toggle {
 	padding: 10px 14px;
+	border-radius: 8px;
+}
+
+.cn-dialog-board .cn-assign-dialog__toggle .checkbox-content__text {
+	line-height: 18px;
 }
 
 .cn-dialog-board .cn-assign-dialog__toggle .checkbox-radio-switch-checkbox .checkbox-content,

package/src/css/kpi-card.css

@@ -547,6 +547,9 @@ a.cn-kpi-card--board * {
 .cn-kpi-card--board.cn-kpi-card--stacked:has(.cn-kpi-card__title--badge-end) {
 	--cn-kpi-stacked-padding: 20px 22px;
 	--cn-kpi-stacked-gap: 8px;
+	/* Its label is set at 600, as every board draws this tile (DqDashboard,
+	   DqMijnTeam, DqPersoonlijkeInstellingen); the plain stacked tile keeps 400. */
+	--cn-kpi-stacked-title-weight: 600;
 }
 
 .cn-kpi-card--board.cn-kpi-card--stacked:has(.cn-kpi-card__title--badge-end) .cn-kpi-card__value {

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

@@ -1235,6 +1235,13 @@
 
 .cn-look-board .cn-retention .cn-retention__head-text .cn-retention__muted {
 	font-size: 14px;
+	line-height: 1.2;
+}
+
+/* The board stacks the archiving card's parts 10px apart (r26a: the head
+   row 45.9 vs 41 and the facts 55.9 vs 30 under the title). */
+.cn-look-board .cn-retention.cn-retention {
+	gap: 10px;
 }
 
 .cn-look-board .cn-retention .cn-retention__fact {
@@ -1400,6 +1407,15 @@
 	margin: 0;
 }
 
+/* ---- A sidebar tab standing in a page card --------------------------------- */
+/* The Files, Notes, Tasks... tabs pad themselves 12px for the sidebar. On a
+   detail page the card around them already pads, and the boards draw their
+   toolbar, table and rows flush with the card title (DqZaakDocumenten, DqZaakEmail).
+   @spec openspec/changes/board-sidebar-tab-flush-in-card/specs/board-sidebar-tab-flush-in-card/spec.md#requirement-a-sidebar-tab-in-a-page-card-adds-no-padding-of-its-own */
+.cn-look-board .cn-detail-widget-host .cn-sidebar-tab:not(.cn-look-nextcloud *) {
+	padding: 0;
+}
+
 /* ---- A file's side card (CnFilesBrowser) --------------------------------- */
 /* The board's side card: radius 12, 20px 22px of padding, the title a 15px
    muted heading at 600, the facts 8px 16px apart with the values at 500
@@ -1529,6 +1545,25 @@
 	gap: 14px 16px;
 }
 
+/* In a page card the mail tab is the card's body: no padding of its own, 12px
+   between its parts, the heading at the card title's 17px/700 and the
+   description at 14px (DqZaakEmail "E-mail").
+   @spec openspec/changes/board-mail-tab-in-card/specs/board-mail-tab-in-card/spec.md#requirement-a-mail-tab-in-a-page-card-reads-as-the-card */
+.cn-look-board .cn-detail-widget-host .cn-mail-tab:not(.cn-look-nextcloud *) {
+	gap: 12px;
+	padding: 0;
+}
+
+.cn-look-board .cn-detail-widget-host .cn-mail-tab__title:not(.cn-look-nextcloud *) {
+	font-size: 17px;
+	font-weight: 700;
+	line-height: 1.2;
+}
+
+.cn-look-board .cn-detail-widget-host .cn-mail-tab__subtitle:not(.cn-look-nextcloud *) {
+	font-size: 14px;
+}
+
 /* ---- The attention flag's buttons --------------------------------------- */
 /* The case boards draw "Markeer voor aandacht" and the flag's other labelled
    buttons at the 40px control height (DqZaak and the case tab boards);
@@ -1549,6 +1584,31 @@
 	line-height: normal;
 }
 
+/* In a page card the notes tab's "Add note" stands at the end of the card's
+   title row, and each note thread opens with a hairline (DqZaakEmail
+   "Notities": the button beside the title, rows 12px 0 under a rule). The
+   card (CnWidgetWrapper) is the positioned box; the add form, when open,
+   stays in the body.
+   @spec openspec/changes/board-notes-card-add-in-title-row/specs/board-notes-card-add-in-title-row/spec.md#requirement-a-notes-card-carries-its-add-in-the-title-row */
+.cn-look-board .cn-detail-widget-host .cn-widget-wrapper .cn-sidebar-tab__composer-toggle:not(.cn-look-nextcloud *) {
+	position: absolute;
+	top: 20px;
+	inset-inline-end: var(--cn-board-card-inline-padding);
+}
+
+.cn-look-board .cn-detail-widget-host .cn-sidebar-tab__action:has(> .cn-sidebar-tab__composer-toggle):not(:has(.cn-sidebar-tab__composer)):not(.cn-look-nextcloud *) {
+	margin-bottom: 0;
+}
+
+.cn-look-board .cn-detail-widget-host .cn-sidebar-tab__list:not(.cn-look-nextcloud *) {
+	gap: 0;
+}
+
+.cn-look-board .cn-detail-widget-host .cn-notes-tab__thread:not(.cn-look-nextcloud *) {
+	padding: 12px 0;
+	border-top: 1px solid var(--cn-board-hairline);
+}
+
 /* The notes tab's "Add note" button, when the add form waits behind it, is
    the board's 40px control (DqZaakEmail "Notitie toevoegen").
    @spec openspec/changes/notes-tab-composer-button/specs/notes-tab-composer-button/spec.md#requirement-the-notes-tab-can-keep-its-composer-behind-a-button */
@@ -1722,3 +1782,260 @@
 .cn-look-board .cn-checklist-widget__item .checkbox-content__text {
 	font-weight: 600;
 }
+
+/* The parties widget's "Dit zaaktype accepteert" strip as DqZaakBetrokkenen
+   draws it: a sunken strip rounded at 8px, the label 14px bold, the kinds
+   as outlined 13px chips.
+   @spec openspec/changes/board-parties-accepted-strip/specs/parties/spec.md */
+.cn-look-board .cn-object-parties .cn-object-parties__accepted {
+	gap: 6px 8px;
+	padding: 8px 12px;
+	border-radius: 8px;
+	background-color: var(--cn-board-sunken-ground);
+}
+
+.cn-look-board .cn-object-parties .cn-object-parties__accepted-label {
+	font-size: 14px;
+	font-weight: 700;
+	line-height: 1.2;
+}
+
+.cn-look-board .cn-object-parties .cn-object-parties__accepted-kind {
+	padding: 2px 8px;
+	border: 1px solid var(--color-border-maxcontrast);
+	border-radius: 12px;
+	font-size: 13px;
+	font-weight: 600;
+}
+
+/* A short side list (`density: "stacked"`, DqOrganisatie "Lopende zaken")
+   starts 10px under the title with no hairline and no row padding; a main
+   contact (DqOrganisatie "Hoofdcontact") starts 12px under it, its two lines
+   at their normal height so they centre on the 40px tile.
+   @spec openspec/changes/board-side-lead-gaps/specs/board-side-lead-gaps/spec.md#requirement-a-board-side-card-starts-a-stacked-list-or-main-contact-as-drawn */
+.cn-look-board .cn-detail-page__side .cn-widget-wrapper__content:has(> .cn-record-list--stacked) {
+	padding-top: 10px;
+}
+
+.cn-look-board .cn-detail-page__side .cn-widget-wrapper__content:has(> .cn-object-parties > .cn-object-parties__main-card) {
+	padding-top: 12px;
+}
+
+.cn-look-board .cn-detail-page__side .cn-record-list--stacked.cn-record-list--rows:not(.cn-look-nextcloud *) .cn-record-list__item {
+	border-top: 0;
+}
+
+.cn-look-board .cn-detail-page__side .cn-record-list--stacked.cn-record-list--rows:not(.cn-look-nextcloud *) .cn-record-list__row {
+	padding: 0;
+}
+
+.cn-look-board .cn-detail-page__side .cn-object-parties__main-text {
+	line-height: normal;
+}
+
+/* Appointment and note rows (DqTaak Afspraken, Notities): a hairline above
+   every row including the first, 12px 0 padding, a 32px round tile (the day
+   an appointment starts, the author's initials) 12px before the text, the
+   title 15/600 and one 13px muted meta line joined with " · ".
+   @spec openspec/changes/board-task-cards-rows/specs/task-cards/spec.md#requirement-board-appointment-and-note-rows-carry-a-tile-and-a-meta-line */
+.cn-look-board .cn-events-card__list {
+	gap: 0;
+}
+
+.cn-look-board .cn-events-card__event,
+.cn-look-board .cn-events-card__event:last-child,
+.cn-look-board .cn-notes-card__note,
+.cn-look-board .cn-notes-card__note:last-child {
+	padding: 12px 0;
+	border-top: 1px solid var(--cn-board-hairline);
+	border-bottom: none;
+}
+
+.cn-look-board .cn-events-card__day,
+.cn-look-board .cn-notes-card__initials {
+	display: inline-flex;
+	flex: 0 0 32px;
+	align-items: center;
+	justify-content: center;
+	width: 32px;
+	height: 32px;
+	border-radius: 50%;
+	background: var(--color-primary-element-light);
+	color: var(--color-primary-element-light-text);
+	font-size: 12px;
+	font-weight: 700;
+}
+
+.cn-look-board .cn-events-card__text {
+	flex-flow: row wrap;
+	row-gap: 2px;
+}
+
+.cn-look-board .cn-events-card__summary,
+.cn-look-board .cn-notes-card__body {
+	font-size: 15px;
+	font-weight: 600;
+	line-height: 1.35;
+}
+
+.cn-look-board .cn-events-card__summary {
+	flex-basis: 100%;
+}
+
+.cn-look-board .cn-events-card__when,
+.cn-look-board .cn-events-card__where,
+.cn-look-board .cn-notes-card__author,
+.cn-look-board .cn-notes-card__time {
+	color: var(--color-text-maxcontrast);
+	font-size: 13px;
+	font-weight: 400;
+}
+
+.cn-look-board .cn-events-card__where::before,
+.cn-look-board .cn-notes-card__time::before {
+	content: ' · ';
+	white-space: pre;
+}
+
+.cn-look-board .cn-notes-card__note {
+	display: flex;
+	flex-direction: column;
+	gap: 2px;
+	padding-inline-start: 44px;
+}
+
+.cn-look-board .cn-notes-card__initials {
+	position: absolute;
+	top: 12px;
+	inset-inline-start: 0;
+}
+
+.cn-look-board .cn-notes-card__body {
+	order: -1;
+}
+
+.cn-look-board .cn-notes-card__note-header {
+	justify-content: flex-start;
+	margin-bottom: 0;
+}
+
+.cn-look-board .cn-notes-card__time {
+	margin-inline-start: 0;
+}
+
+/* The parties widget's rows as DqZaakBetrokkenen "Rollen" draws them: one
+   ruled row per party, a 32px initials tile, the name over a muted meta line
+   that names the role, the pills at the end. The role headings stay for
+   assistive tech only.
+   @spec openspec/changes/board-parties-rows/specs/parties/spec.md */
+.cn-look-board .cn-object-parties--board .cn-object-parties__role-label {
+	position: absolute;
+	width: 1px;
+	height: 1px;
+	overflow: hidden;
+	clip-path: inset(50%);
+	white-space: nowrap;
+}
+
+.cn-look-board .cn-object-parties--board .cn-object-parties__list {
+	gap: 0;
+}
+
+.cn-look-board .cn-object-parties--board .cn-object-parties__party {
+	flex-wrap: nowrap;
+	gap: 12px;
+	padding: 12px 0;
+	border-top: 1px solid var(--cn-board-hairline);
+	border-radius: 0;
+}
+
+.cn-look-board .cn-object-parties--board .cn-object-parties__tile {
+	display: inline-flex;
+	flex: none;
+	align-items: center;
+	justify-content: center;
+	width: 32px;
+	height: 32px;
+	border-radius: 16px;
+	background: var(--color-background-hover);
+	color: var(--color-main-text);
+	font-size: 12px;
+	font-weight: 700;
+}
+
+.cn-look-board .cn-object-parties--board .cn-object-parties__text {
+	display: flex;
+	flex: 1 1 auto;
+	flex-direction: column;
+	gap: 2px;
+	min-width: 0;
+}
+
+.cn-look-board .cn-object-parties--board .cn-object-parties__name {
+	font-size: 15px;
+	font-weight: 600;
+}
+
+.cn-look-board .cn-object-parties--board .cn-object-parties__meta {
+	font-size: 13px;
+	color: var(--color-text-maxcontrast);
+}
+
+/* The calendar and Deck cards' rows as DqZaakTaken "Afspraken" and "Kaarten"
+   draw them: ruled rows, the title over a muted meta line, the pill at the
+   end, and the link to the app under the rows.
+   @spec openspec/changes/board-deck-calendar-rows/specs/integrations/spec.md */
+.cn-look-board .cn-detail-page .cn-calendar-card__row,
+.cn-look-board .cn-detail-page .cn-deck-card__row {
+	display: flex;
+	gap: 16px;
+	align-items: center;
+	justify-content: space-between;
+	padding: 12px 0;
+	border-top: 1px solid var(--cn-board-hairline);
+}
+
+.cn-look-board .cn-detail-page .cn-calendar-card__row-main,
+.cn-look-board .cn-detail-page .cn-deck-card__row-main {
+	display: flex;
+	flex-direction: column;
+	gap: 2px;
+	min-width: 0;
+}
+
+.cn-look-board .cn-detail-page .cn-calendar-card__title,
+.cn-look-board .cn-detail-page .cn-deck-card__row-title {
+	font-size: 15px;
+	font-weight: 600;
+	color: var(--color-main-text);
+	text-decoration: none;
+}
+
+.cn-look-board .cn-detail-page .cn-calendar-card__meta,
+.cn-look-board .cn-detail-page .cn-deck-card__row-meta {
+	font-size: 13px;
+	color: var(--color-text-maxcontrast);
+}
+
+.cn-look-board .cn-object-parties--board .cn-object-parties__end {
+	display: flex;
+	flex: none;
+	flex-wrap: wrap;
+	gap: 8px;
+	align-items: center;
+}
+
+.cn-look-board .cn-detail-page .cn-deck-card__row-list {
+	margin: 0;
+	padding: 0;
+	list-style: none;
+}
+
+.cn-look-board .cn-detail-page .cn-calendar-card__open,
+.cn-look-board .cn-detail-page .cn-deck-card__open {
+	display: inline-block;
+	margin-top: 12px;
+	font-size: 14px;
+	font-weight: 600;
+	text-decoration: underline;
+}

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

@@ -991,6 +991,20 @@
 	text-decoration: none;
 }
 
+/* In such a plain log an icon-and-name cell is regular too (DqZaakContact
+   Kanaal "Mijn Zuiddrecht"); elsewhere the icon label stays 600.
+   @spec openspec/changes/board-log-table-icon-label-regular/specs/board-log-table-icon-label-regular/spec.md#requirement-a-plain-logs-icon-label-cell-is-regular */
+.cn-look-board .cn-table-container--board.cn-table-container--title-text .cn-cell-renderer__icon-label:not(.cn-look-nextcloud *) {
+	font-weight: 400;
+}
+
+/* In such a plain log a wrapping prose cell runs at line height 1.45, as
+   DqZaakContact draws the contact summary (rows 61.6 high, not 57).
+   @spec openspec/changes/board-log-table-prose-line-height/specs/board-log-table-prose-line-height/spec.md#requirement-a-plain-logs-prose-cell-runs-at-line-height-1-45 */
+.cn-look-board .cn-table-container--board.cn-table-container--title-text .cn-data-table td.cn-cell--wrap:not(.cn-look-nextcloud *) {
+	line-height: 1.45;
+}
+
 /* `rowTitle: "strong"` (DqZaaktypeStatussen "Statussen", "Resultaten"): the
    name column of a card's list, the cell's 14px at weight 600 in the main
    ink, no underline; the row stays a link.

package/src/css/look-board.css

@@ -329,9 +329,11 @@
 .cn-look-board .cn-dashboard-page:not(.cn-look-nextcloud *) .cn-banner-widget__kicker {
 	--nldesign-component-paragraph-font-size: 13px;
 	--nldesign-component-paragraph-font-weight: 700;
+	--nldesign-component-paragraph-line-height: normal;
 	font-size: 13px;
 	font-weight: 700;
 	letter-spacing: 0;
+	line-height: normal;
 	text-transform: none;
 }
 
@@ -1513,6 +1515,24 @@ body:has(.cn-look-board):not(:has(.cn-look-nextcloud)) .v-popper__popper.action-
 	align-self: center;
 }
 
+/* Without a subtitle the title centres on the title-row buttons, as the boards
+   draw the card head (DqVthInstellingen "Inspectiechecklists",
+   DqInstellingenAlgemeen "Werkdagen en feestdagen": title 27.5px down, live 21).
+   @spec openspec/changes/board-settings-title-centred-and-link-flush/specs/settings-board-look/spec.md */
+.cn-look-board .settings-section:not(.cn-look-nextcloud *):has(> .cn-settings-section__actions):not(:has(> .settings-section__desc)) > .settings-section__name {
+	align-self: center;
+}
+
+/* The "Uitleg tonen" toggle is a text link flush with the card's right edge
+   (DqBeheerinstellingen Zaak-e-mail), not a padded tertiary button.
+   @spec openspec/changes/board-settings-title-centred-and-link-flush/specs/settings-board-look/spec.md */
+.cn-look-board .cn-settings-fields__hints-toggle:not(.cn-look-nextcloud *) .button-vue {
+	--button-padding: 0px;
+	--button-padding-default: 0px;
+	padding-inline: 0;
+	min-width: 0;
+}
+
 @container (max-width: 400px) {
 	.cn-look-board .settings-section:not(.cn-look-nextcloud *) > .cn-settings-section__actions,
 	.cn-look-board .settings-section:not(.cn-look-nextcloud *):has(> .settings-section__desc) > .cn-settings-section__actions {
@@ -3157,6 +3177,11 @@ body:has(.cn-look-board):not(:has(.cn-look-nextcloud)) .v-popper__popper.action-
 	line-height: 1.2;
 }
 
+/* An option's title bold, as the dialog boards draw it (a <strong>). */
+.cn-look-board .cn-choice-cards .cn-choice-cards__row-title:not(.cn-look-nextcloud *) {
+	font-weight: 700;
+}
+
 .cn-look-board .cn-choice-cards .cn-choice-cards__row-icon:not(.cn-look-nextcloud *) {
 	align-self: flex-start;
 }