@conduction/nextcloud-vue 2.135.0 → 2.137.0

package/src/components/CnIndexPage/CnIndexPage.vue

@@ -871,6 +871,7 @@
 				<CnDataTable
 					v-else-if="currentViewMode === 'table'"
 					:schema="effectiveSchema"
+					:filterChips="!isBoardLook"
 					:columns="renderedColumns"
 					:pinnedCount="pinnedColumnCount"
 					:rowIcon="rowIcon"
@@ -925,7 +926,7 @@
 					<template v-if="hasRowActions" #row-actions="{ row }">
 						<slot name="row-actions" :row="row">
 							<CnRowActions
-								:actions="rowActionsFor(row)"
+								:actions="rowMenuActionsFor(row)"
 								:row="row"
 								:rowLabel="rowTitleFor(row)"
 								@action="onRowAction" />
@@ -1172,7 +1173,7 @@
 					<template v-if="hasRowActions || $slots['row-actions']" #row-actions="{ object }">
 						<slot name="row-actions" :row="object">
 							<CnRowActions
-								:actions="rowActionsFor(object)"
+								:actions="rowMenuActionsFor(object)"
 								:row="object"
 								:rowLabel="rowTitleFor(object)"
 								@action="onRowAction" />
@@ -1224,7 +1225,7 @@
 					<template v-if="hasRowActions" #card-actions="{ object }">
 						<slot name="row-actions" :row="object">
 							<CnRowActions
-								:actions="rowActionsFor(object)"
+								:actions="rowMenuActionsFor(object)"
 								:row="object"
 								:rowLabel="rowTitleFor(object)"
 								:triggerLabel="isBoardLook ? t('nextcloud-vue', 'More actions for {name}', { name: rowTitleFor(object) }) : ''"
@@ -1236,7 +1237,7 @@
 				<!-- Right-click context menu (positioned at cursor via CSS). Same per-row list as the row actions menu, so the two never drift. -->
 				<CnContextMenu
 					v-model:open="contextMenuOpen"
-					:actions="rowActionsFor(contextMenuShownRow)"
+					:actions="rowMenuActionsFor(contextMenuShownRow)"
 					:targetItem="contextMenuShownRow"
 					@action="onRowAction"
 					@close="closeContextMenu" />
@@ -8016,7 +8017,26 @@ export default {
 		},
 
 		hasRowActions() {
-			return this.$slots['row-actions'] || this.mergedActions.length > 0
+			const refs = this.columnActionRefs
+			return this.$slots['row-actions'] || this.mergedActions.some((action) => action && !refs.has(String(action.id || action.label)) && !refs.has(String(action.label)))
+		},
+
+		/**
+		 * The row actions an `actions` column already shows as buttons, by the
+		 * ids (or labels) its `widgetProps.actions` names. The row menu leaves
+		 * them out, so a row does not offer the same action twice (DqPostvak).
+		 *
+		 * @return {Set<string>}
+		 * @spec openspec/changes/column-actions-leave-the-row-menu/specs/column-actions-leave-the-row-menu/spec.md
+		 */
+		columnActionRefs() {
+			const refs = new Set()
+			for (const col of Array.isArray(this.columns) ? this.columns : []) {
+				if (col && typeof col === 'object' && col.widget === 'actions' && Array.isArray(col.widgetProps?.actions)) {
+					col.widgetProps.actions.forEach((ref) => refs.add(String(ref)))
+				}
+			}
+			return refs
 		},
 
 		/**
@@ -10863,7 +10883,8 @@ export default {
 		/**
 		 * A view's state as the edit dialog shows it under a criteria choice:
 		 * its filters, search term and sort in sentences, read against the
-		 * page schema's titles.
+		 * page schema's titles and the page's `filterLabels` (a `hidden`
+		 * filter is left out).
 		 *
 		 * @param {object} state A view state (`extractViewState` or `currentViewState`).
 		 * @return {string} The sentences.
@@ -10873,6 +10894,7 @@ export default {
 			const schema = this.effectiveSchema
 			return viewCriteriaSummary(state, {
 				properties: (schema && schema.properties) || {},
+				filterLabels: this.filterLabels || {},
 				translate: (text) => this.cnTranslate(text),
 			})
 		},
@@ -11861,6 +11883,22 @@ export default {
 			)
 		},
 
+		/**
+		 * The row menu's actions: the row's actions less those an `actions`
+		 * column already shows as buttons.
+		 *
+		 * @param {object} row The row.
+		 * @return {Array<object>}
+		 * @spec openspec/changes/column-actions-leave-the-row-menu/specs/column-actions-leave-the-row-menu/spec.md
+		 */
+		rowMenuActionsFor(row) {
+			const refs = this.columnActionRefs
+			if (refs.size === 0) {
+				return this.rowActionsFor(row)
+			}
+			return this.rowActionsFor(row).filter((action) => !refs.has(String(action.id || action.label)) && !refs.has(String(action.label)))
+		},
+
 		/**
 		 * The row's own name, for the row menu button's accessible name
 		 * ("Actions for <title>"): the `nameFormatter`, else the

package/src/components/CnObjectDataWidget/CnObjectDataWidget.md

@@ -141,3 +141,4 @@ export default {
 | `borderless` | Boolean | `false` | Drop the card border and background, for a host that draws its own (a tab panel). |
 | `flush` | Boolean | `false` | Drop the content padding, for a host that supplies its own inset. |
 | `chromeless` | Boolean | `false` | Draw no card at all: what a tab panel wants, in one prop instead of three. Implies `show-title="false"`, `borderless` and `flush`, and drops the header divider too. The Save button keeps its header. Forwarded to `CnWidgetWrapper`. |
+| `footnote` | String | `''` | A muted line under the fields, through the host translate (DqZaakContact "Ontvangstbevestiging"). |

package/src/components/CnObjectDataWidget/CnObjectDataWidget.vue

@@ -396,6 +396,10 @@
 			</NcButton>
 		</div>
 
+		<p v-if="footnote" class="cn-object-data-widget__footnote" data-testid="cn-object-data-widget-footnote">
+			{{ cnTranslate(footnote) }}
+		</p>
+
 		<!-- Read-only @self metadata, surfaced on demand from the
 		     Metadata action item rather than as a permanent page widget. -->
 		<CnObjectMetadataModal
@@ -837,6 +841,17 @@ export default {
 			default: () => t('nextcloud-vue', 'No data available'),
 		},
 
+		/**
+		 * A muted line under the fields, through the host translate
+		 * (DqZaakContact "Ontvangstbevestiging").
+		 *
+		 * @spec openspec/changes/data-widget-footnote/specs/data-widget-footnote/spec.md#requirement-a-data-card-can-end-with-a-footnote
+		 */
+		footnote: {
+			type: String,
+			default: '',
+		},
+
 		/** Label for the Metadata item in the overflow Actions menu. */
 		metadataLabel: {
 			type: String,
@@ -2535,6 +2550,12 @@ export default {
 	outline: none;
 }
 
+.cn-object-data-widget__footnote {
+	margin: calc(var(--default-grid-baseline, 4px) * 3) 0 0;
+	color: var(--color-text-maxcontrast);
+	font-size: 13px;
+}
+
 .cn-object-data-widget__empty {
 	color: var(--color-text-maxcontrast);
 	font-style: italic;

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 }]"
+		: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' }]"
 		data-testid="cn-record-list">
 		<p v-if="intro && !absent" class="cn-record-list__intro" data-testid="cn-record-list-intro">
 			{{ intro }}
@@ -448,7 +448,21 @@
 			data-testid="cn-record-list-action-error">
 			{{ actionError }}
 		</p>
-		<p v-if="footnote && !error && !absent && (rows.length > 0 || footnoteFromAnswer)" class="cn-record-list__footnote" data-testid="cn-record-list-footnote">
+		<div
+			v-if="footnoteTone && footnote && !error && !absent && (rows.length > 0 || footnoteFromAnswer)"
+			class="cn-record-list__notice cn-record-list__notice--footnote"
+			:class="`cn-record-list__notice--${footnoteTone}`"
+			data-testid="cn-record-list-footnote">
+			<CnIcon
+				:name="footnoteTone === 'info' ? 'InformationOutline' : 'AlertOutline'"
+				:size="16"
+				class="cn-record-list__notice-icon"
+				aria-hidden="true" />
+			<p class="cn-record-list__notice-text">
+				{{ footnote }}
+			</p>
+		</div>
+		<p v-else-if="footnote && !error && !absent && (rows.length > 0 || footnoteFromAnswer)" class="cn-record-list__footnote" data-testid="cn-record-list-footnote">
 			{{ footnote }}
 		</p>
 		<!-- `footerLink`: a text link under the rows ("Naar Mijn werk"). -->
@@ -685,6 +699,11 @@ export default {
 		 * `pill.cases` (`[{ when, label, variant? }]`) labels a row by the
 		 * first case whose `when` holds on it, else by the pill's own `label`
 		 * and `variant` (Concept, Vastgezet, Actief).
+		 * `footnoteVariant` (`info`, `warning` or `error`) draws the footnote
+		 * as a toned notice box with its icon (DqZaaktype opt-out note).
+		 * `tableLook: "data"` marks a `table` as a data table, which the board
+		 * look draws as its card table (header band, 40px rows, hairlines)
+		 * instead of the compact grid (DqZaaktype "Berichten aan de aanvrager").
 		 * `groupBy` (a field path) draws the rows in groups under a heading
 		 * per value, headed by the field's `valueLabels` entry; `groupOrder`
 		 * (values) orders the groups and `groupEmptyLabel` heads the rows
@@ -1212,6 +1231,19 @@ export default {
 			return typeof note === 'string' && note !== '' ? this.translate(note) : ''
 		},
 
+		/**
+		 * The tone the footnote is drawn in as a notice box
+		 * (`content.footnoteVariant`: info, warning or error); '' for a plain
+		 * muted line.
+		 *
+		 * @return {string} The tone, or ''.
+		 * @spec openspec/changes/record-list-data-table-and-notice-footnote/specs/record-list/spec.md#requirement-a-record-list-footnote-can-be-a-toned-notice
+		 */
+		footnoteTone() {
+			const tone = this.content?.footnoteVariant
+			return NOTICE_VARIANTS.includes(tone) ? tone : ''
+		},
+
 		/**
 		 * Whether the footnote reads the answer: it then shows with no rows too.
 		 *
@@ -2938,6 +2970,10 @@ export default {
 	color: var(--color-error-text, var(--color-main-text));
 }
 
+.cn-record-list__notice--footnote {
+	margin-top: 12px;
+}
+
 .cn-record-list__notice-icon {
 	flex: 0 0 auto;
 	margin-top: 1px;

package/src/components/CnRegisterMapping/CnRegisterMapping.vue

@@ -72,6 +72,7 @@
 						:options="schemaSelectOptions(groupIdx)"
 						:placeholder="labels.selectSchema"
 						:inputLabel="type.label"
+						:clearable="false"
 						label="label"
 						trackBy="value"
 						@update:modelValue="handleSchemaChange(groupIdx, type, $event)" />
@@ -1371,6 +1372,12 @@ export default {
 	max-width: 50%;
 }
 
+/* DqBeheerinstellingen: the register select fills its half of the card. */
+.cn-register-mapping__selects-register :deep(.v-select) {
+	width: 100%;
+	max-width: none;
+}
+
 .cn-register-mapping__select-grid {
 	display: grid;
 	grid-template-columns: repeat(var(--cn-register-mapping-columns, 3), minmax(0, 1fr));

package/src/components/CnRetentionWidget/CnRetentionWidget.vue

@@ -603,13 +603,26 @@ export default {
 	margin: 0;
 }
 
+/* The server draws every dt as a 130px right-aligned inline block and pads
+   dt and dd 12px; a fact is a label over its value. */
+.cn-retention__fact dt,
+.cn-retention__fact dd {
+	display: block;
+	width: auto;
+	white-space: normal;
+	text-align: start;
+}
+
 .cn-retention__fact dt {
+	margin: 0;
+	padding: 0;
 	color: var(--color-text-maxcontrast);
 	font-size: 13px;
 }
 
 .cn-retention__fact dd {
 	margin: 0;
+	padding: 0;
 	font-weight: 600;
 }
 

package/src/components/CnSavedViewMenuSettings/CnSavedViewMenuSettings.vue

@@ -93,13 +93,23 @@ function loadSchema(register, schema) {
 /**
  * The names of referenced records, each asked once.
  *
- * @param {{register: string, schema: string, labelField: string, ids: Array<string>}} ref The reference filter.
+ * @param {{register: string, schema: string, labelField: string, matchField?: string, ids: Array<string>}} ref The reference filter; with `matchField` the ids are that field's values.
  * @return {Promise<{[id: string]: string}>}
  */
 async function loadLabels(ref) {
-	const prefix = `${ref.register}|${ref.schema}|${ref.labelField}|`
+	const prefix = `${ref.register}|${ref.schema}|${ref.labelField}|${ref.matchField || ''}|`
 	const missing = ref.ids.filter((id) => !labelCache.has(prefix + id))
-	if (missing.length > 0) {
+	// A value that identifies a record by another field: one read per value.
+	if (missing.length > 0 && ref.matchField) {
+		for (const value of missing) {
+			labelCache.set(prefix + value, getJson(`/apps/openregister/api/objects/${encodeURIComponent(ref.register)}/${encodeURIComponent(ref.schema)}`, { [ref.matchField]: value, _limit: 1 })
+				.then((data) => {
+					const row = Array.isArray(data && data.results) ? data.results[0] : null
+					return row ? pickRefLabel(row, ref.labelField) : null
+				})
+				.catch(() => null))
+		}
+	} else if (missing.length > 0) {
 		const request = getJson(`/apps/openregister/api/objects/${encodeURIComponent(ref.register)}/${encodeURIComponent(ref.schema)}`, { _ids: missing.join(','), _limit: missing.length })
 			.then((data) => {
 				const byId = {}
@@ -372,7 +382,7 @@ export default {
 				const fields = fieldsFromSchema(schema, { includeReadOnly: true })
 				const refs = this.candidates
 					.filter((c) => c.page === page.id)
-					.flatMap((c) => viewFilterReferences(c.state, fields))
+					.flatMap((c) => viewFilterReferences(c.state, fields, page.filterLabels))
 				for (const ref of refs) {
 					const labels = await loadLabels({ ...ref, register: ref.register || page.register })
 					if (Object.keys(labels).length === 0) {

package/src/components/CnTimelineWidget/CnTimelineManage.vue

@@ -169,6 +169,19 @@
 			</div>
 		</template>
 
+		<div v-if="composerOnly && canManage && composerEnabled"
+			class="cn-timeline-manage__header"
+			data-testid="cn-timeline-composer-heading">
+			<div class="cn-timeline-manage__heading">
+				<h3 class="cn-timeline-manage__title">
+					{{ composerTitleText }}
+				</h3>
+				<p class="cn-timeline-manage__subtitle">
+					{{ composerSubtitleText }}
+				</p>
+			</div>
+		</div>
+
 		<NcNoteCard v-if="composerOnly && error" type="error" data-testid="cn-timeline-error">
 			{{ error }}
 		</NcNoteCard>
@@ -332,6 +345,16 @@ export default {
 			return this.content.subtitle ? this.translate(this.content.subtitle) : t('nextcloud-vue', 'What happened, who did it and when, newest first')
 		},
 
+		/** @return {string} The title of the note form's own card (`composer: "only"`): `content.title`, else Add note. */
+		composerTitleText() {
+			return this.content.title ? this.translate(this.content.title) : t('nextcloud-vue', 'Add note')
+		},
+
+		/** @return {string} The line under that title: `content.subtitle`, else where the note goes. */
+		composerSubtitleText() {
+			return this.content.subtitle ? this.translate(this.content.subtitle) : t('nextcloud-vue', 'Goes on the timeline above, internal unless you make it visible')
+		},
+
 		publicLabel() {
 			return this.content.publicLabel ? this.translate(this.content.publicLabel) : t('nextcloud-vue', 'Visible to the requester')
 		},

package/src/components/CnTimelineWidget/dashboardRegistration.js

@@ -6,7 +6,8 @@
  * dashboardWidgetRegistry. Like `audit-trail` it is a DETAIL-PAGE surface:
  * the object comes from the page's object context. It has no config form
  * yet, so it is placed from the manifest and never offered in the
- * Add-widget picker.
+ * Add-widget picker. It draws its own title row and asks for the card, so a
+ * tab stack or the side column stands it in an untitled card.
  *
  * @spec openspec/changes/timeline-widget/specs/timeline-widget/spec.md#requirement-a-timeline-widget-shows-an-objects-dated-events-in-order
  */
@@ -29,4 +30,5 @@ registerDashboardWidget('timeline', {
 	icon: 'TimelineClockOutline',
 	surfaces: ['detail-page'],
 	ownsTitle: true,
+	chrome: 'card',
 })

package/src/components/CnWorkingCalendarWidget/CnWorkingCalendarWidget.vue

@@ -701,13 +701,20 @@ export default {
 	width: 1px;
 }
 
+/* A theme's paragraph rule sets every p's size and colour with !important
+   (thematiq), so the note and the footnote also set its tokens.
+   @spec openspec/changes/calendar-footnote-paragraph-tokens/specs/working-calendar-footnote/spec.md */
 .cn-working-calendar__note {
+	--nldesign-component-paragraph-color: var(--color-text-maxcontrast);
 	color: var(--color-text-maxcontrast);
 	margin: 0;
 }
 
 /* @spec openspec/changes/working-calendar-footnote/specs/working-calendar-footnote/spec.md */
 .cn-working-calendar__footnote {
+	--nldesign-component-paragraph-font-size: 13px;
+	--nldesign-component-paragraph-line-height: 1.3;
+	--nldesign-component-paragraph-color: var(--color-text-maxcontrast);
 	margin: 0;
 	font-size: 13px;
 	line-height: 1.3;

package/src/composables/indexSources.js

@@ -1401,6 +1401,32 @@ function searchSource(config = {}, context = {}) {
 	}
 }
 
+/**
+ * The members that match a search, in the asked order, and the page of them
+ * the pager asks for.
+ *
+ * @param {Array<object>} members The members, by name.
+ * @param {object} config `search`, `sortKey`, `sortOrder`, `limit`, `offset`.
+ * @return {{rows: Array<object>, total: number}} The page and how many match.
+ */
+function membersPage(members, config = {}) {
+	const term = String(config.search || '').trim().toLowerCase()
+	let rows = term === ''
+		? members.slice()
+		: members.filter((member) => ['displayname', 'function', 'roles', 'email'].some((field) => String(member[field] || '').toLowerCase().includes(term)))
+	if (config.sortKey) {
+		const sign = config.sortOrder === 'desc' ? -1 : 1
+		rows = rows.sort((a, b) => sign * String(a[config.sortKey] ?? '').localeCompare(String(b[config.sortKey] ?? '')))
+	}
+	const total = rows.length
+	const limit = Number(config.limit) || 0
+	if (limit > 0) {
+		const offset = Number(config.offset) || 0
+		rows = rows.slice(offset, offset + limit)
+	}
+	return { rows, total }
+}
+
 /**
  * The users source: the members of a Nextcloud group, with their function,
  * roles, e-mail and whether they are in today (`entitySource: "users"`,
@@ -1417,12 +1443,20 @@ function searchSource(config = {}, context = {}) {
  * Listing a group needs an admin or the group's sub-admin; a refused request
  * leaves the list empty.
  *
+ * The page gets a pager (`pages`), and the search term and the header's order
+ * come as `search` and `sortKey` / `sortOrder`: the group's members are read
+ * once and searched, sorted and paged here, so a new page, term or order does
+ * not read every member's presence again.
+ *
  * @return {object} The source adapter.
  * @spec openspec/changes/index-groups-users-source/specs/index-page/spec.md#requirement-an-index-page-can-list-nextcloud-groups-and-their-members
  */
 function usersSource() {
-	const state = reactive({ rows: [], loading: false })
+	const state = reactive({ rows: [], loading: false, total: 0 })
 	let seq = 0
+	// The members last read, for the group and request they were read for.
+	let readMembers = []
+	let membersKey = null
 	const presenceLabels = {
 		present: t('nextcloud-vue', 'Present'),
 		away: t('nextcloud-vue', 'Away'),
@@ -1441,6 +1475,15 @@ function usersSource() {
 		 */
 		load: async (config) => {
 			const group = String((config && (config.group || config.defaultGroup)) || '')
+			const { search, sortKey, sortOrder, limit, offset, ...request } = config || {}
+			const key = JSON.stringify({ ...request, group })
+			// A new page, term or order of the members already read: no request.
+			if (key === membersKey && (offset !== undefined || search !== undefined || sortKey !== undefined)) {
+				const page = membersPage(readMembers, config)
+				state.rows = page.rows
+				state.total = page.total
+				return
+			}
 			const mine = ++seq
 			state.loading = true
 			try {
@@ -1475,11 +1518,18 @@ function usersSource() {
 					}
 				}))
 				if (mine === seq) {
-					state.rows = rows.sort((a, b) => a.displayname.localeCompare(b.displayname))
+					readMembers = rows.sort((a, b) => a.displayname.localeCompare(b.displayname))
+					membersKey = key
+					const page = membersPage(readMembers, config)
+					state.rows = page.rows
+					state.total = page.total
 				}
 			} catch (error) {
 				if (mine === seq) {
+					readMembers = []
+					membersKey = null
 					state.rows = []
+					state.total = 0
 				}
 				throw error
 			} finally {
@@ -1490,10 +1540,26 @@ function usersSource() {
 		},
 
 		/**
-		 * @return {Array<object>} The members.
+		 * @return {Array<object>} The members on this page.
 		 */
 		rows: () => state.rows,
 
+		pages: true,
+
+		/**
+		 * @return {number} The members that match, on every page.
+		 */
+		total: () => state.total,
+
+		searchParam: 'search',
+
+		/**
+		 * @param {string} key The column.
+		 * @param {string} order `asc` or `desc`.
+		 * @return {object} The load arguments.
+		 */
+		sortParam: (key, order) => ({ sortKey: key, sortOrder: order }),
+
 		/**
 		 * @return {boolean} Whether a load is in flight.
 		 */

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

@@ -91,7 +91,7 @@
 }
 
 .cn-look-board .cn-detail-page .cn-detail-page__header-actions > .button-vue--secondary:hover,
-.cn-look-board .cn-detail-page .cn-detail-page__header-actions .action-item--secondary .action-item__menutoggle:hover {
+.cn-look-board .cn-detail-page .cn-detail-page__header-actions .action-item--secondary:not(.action-item--open) .action-item__menutoggle:hover {
 	background: var(--color-background-hover) !important;
 }
 
@@ -1213,6 +1213,16 @@
 	font-weight: 500;
 }
 
+/* "Bewaren voor een procedure" and "Overdracht naar het e-Depot" are 15px/600
+   section titles over their rows, not the inner heading's 1.4em. */
+.cn-look-board .cn-retention .cn-retention__section > .cn-inner-heading,
+.cn-look-board .cn-retention .cn-retention__outcome > .cn-inner-heading {
+	margin: 4px 0 0;
+	font-size: 15px;
+	font-weight: 600;
+	line-height: 1.2;
+}
+
 /* ---- The task table's row button (CnTasksWidget table, DqZaakTaken) ------ */
 /* "Afronden" is a 34px secondary with 13px text 14px in. NcButton pads a
    text-only label 12px plus 4px inside; the doubled class outranks its
@@ -1317,6 +1327,25 @@
 	font-size: 15px;
 }
 
+/* A card with actions holds them at its end, beside the title and meta (the
+   board's "···" on each task). */
+.cn-look-board .cn-grouped-cards__item.cn-grouped-cards__item:has(> .cn-grouped-cards__item-actions):not(.cn-look-nextcloud *) {
+	display: grid;
+	grid-template-columns: minmax(0, 1fr) auto;
+	column-gap: 12px;
+	align-items: center;
+}
+
+.cn-look-board .cn-grouped-cards__item:has(> .cn-grouped-cards__item-actions) > :not(.cn-grouped-cards__item-actions):not(.cn-look-nextcloud *) {
+	grid-column: 1;
+}
+
+.cn-look-board .cn-grouped-cards__item:has(> .cn-grouped-cards__item-actions) > .cn-grouped-cards__item-actions:not(.cn-look-nextcloud *) {
+	grid-column: 2;
+	grid-row: 1 / span 3;
+	margin: 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
@@ -1501,3 +1530,30 @@
 	border-radius: var(--cn-board-control-radius);
 	overflow: hidden;
 }
+
+/* ---- A record list drawn as a data table (CnRecordListWidget) ----------- */
+/* `tableLook: "data"` (DqZaaktype "Berichten aan de aanvrager"): the board's
+   card table rather than the compact grid, a near-white header band at
+   14px/600 in the muted ink, 10px 12px, and 14px cells, 11px 12px, a
+   hairline above each row. Two classes more than the compact grid's rule.
+   @spec openspec/changes/record-list-data-table-and-notice-footnote/specs/record-list/spec.md#requirement-a-record-list-table-can-be-drawn-as-a-data-table */
+.cn-look-board .cn-record-list.cn-record-list--table.cn-record-list--data-table .cn-record-list__table th:not(.cn-look-nextcloud *) {
+	--nldesign-component-table-header-background-color: var(--cn-board-table-head-bg, color-mix(in srgb, var(--color-background-hover) 40%, var(--color-main-background)));
+	--nldesign-component-table-header-color: var(--color-text-maxcontrast);
+	--nldesign-component-table-header-font-weight: 600;
+	padding: 10px 12px;
+	border-bottom: 0;
+	background: var(--cn-board-table-head-bg, color-mix(in srgb, var(--color-background-hover) 40%, var(--color-main-background)));
+	color: var(--color-text-maxcontrast);
+	font-size: 14px;
+	font-weight: 600;
+	line-height: 1.2;
+}
+
+.cn-look-board .cn-record-list.cn-record-list--table.cn-record-list--data-table .cn-record-list__table td:not(.cn-look-nextcloud *) {
+	padding: 11px 12px;
+	border-top: 1px solid var(--cn-board-hairline);
+	border-bottom: 0;
+	font-size: 14px;
+	line-height: 1.2;
+}