@conduction/nextcloud-vue 2.93.0 → 2.94.0

package/src/components/CnDataTable/CnDataTable.vue

@@ -130,7 +130,7 @@
 								col.class || '',
 								pinClass(leadingCount + colIndex),
 								isGrowColumn(col) ? 'cn-table-col--grow' : '',
-								colIndex === 0 ? 'cn-table-head--title' : '',
+								colIndex === titleColumnIndex ? 'cn-table-head--title' : '',
 							]"
 							:style="{ ...(col.width ? { width: col.width } : {}), ...pinStyle(leadingCount + colIndex) }"
 							:aria-sort="ariaSortFor(col)"
@@ -259,7 +259,7 @@
 						<td
 							v-for="(col, colIndex) in effectiveColumns"
 							:key="col.key"
-							:class="[col.class || '', col.cellClass || '', cellClass ? cellClass(row, col) : '', pinClass(leadingCount + colIndex), colIndex === 0 ? 'cn-table-col--title' : '', isGrowColumn(col) ? 'cn-table-col--grow' : '']"
+							:class="[col.class || '', col.cellClass || '', cellClass ? cellClass(row, col) : '', pinClass(leadingCount + colIndex), colIndex === titleColumnIndex ? 'cn-table-col--title' : '', isGrowColumn(col) ? 'cn-table-col--grow' : '']"
 							:style="{ ...(col.width ? { maxWidth: col.width } : {}), ...pinStyle(leadingCount + colIndex) }"
 							@mouseenter="titleWhenClipped">
 							<!-- A row with a `rowClickRoute` is a real link: this anchor
@@ -267,7 +267,7 @@
 							     the URL, a middle or ctrl click opens a new tab natively,
 							     and the row is reachable with Tab. The row's own click
 							     handlers treat it as a nested control and leave it be. -->
-							<a v-if="colIndex === 0 && rowLinks[String(row[rowKey])]"
+							<a v-if="colIndex === titleColumnIndex && rowLinks[String(row[rowKey])]"
 								class="cn-table-row__link"
 								:href="rowLinks[String(row[rowKey])].href"
 								:aria-label="rowLinkLabel(row, col)"
@@ -281,9 +281,9 @@
 							     the record is locked. It renders nothing when unlocked,
 							     so an unlocked table is byte-for-byte what it was. -->
 							<CnUnreadMarker
-								v-if="colIndex === 0 && isUnreadRow(row)" />
+								v-if="colIndex === titleColumnIndex && isUnreadRow(row)" />
 							<CnLockIndicator
-								v-if="colIndex === 0"
+								v-if="colIndex === titleColumnIndex"
 								:object="row"
 								:size="16" />
 							<!-- Declared state indicators ride the first data cell
@@ -293,7 +293,7 @@
 							     however the record is shaped. Past the cap the rest move
 							     into the row menu, because a row of nine icons is not a
 							     row anyone can triage at a glance. -->
-							<span v-if="colIndex === 0 && indicatorsFor(row).shown.length > 0"
+							<span v-if="colIndex === titleColumnIndex && indicatorsFor(row).shown.length > 0"
 								class="cn-table-row-indicators"
 								data-testid="cn-row-indicators">
 								<span v-for="indicator in indicatorsFor(row).shown"
@@ -338,7 +338,7 @@
 							     file names it (OpenRegister `@self.matchedFile`): plain text,
 							     file name only, under the first cell. -->
 							<span
-								v-if="colIndex === 0 && matchedFileOf(row)"
+								v-if="colIndex === titleColumnIndex && matchedFileOf(row)"
 								class="cn-table-cell__secondary cn-table-cell__matched-file"
 								data-testid="cn-row-matched-file">{{ matchedFileLabel(row) }}</span>
 						</td>
@@ -532,7 +532,10 @@ export default {
 		 * formats through `fillTemplate`), or a function of the row. Empty fields leave their placeholder blank; a line that
 		 * resolves to nothing is not drawn.
 		 *
-		 * @type {Array<{key: string, label: string, description: string, sortable: boolean, width: string, class: string, cellClass: string, secondary: (string|((row: object) => string))}|string>}
+		 * `link: true` makes that column the one that names the row: it carries
+		 * the row link and the title look. Without it the first column does.
+		 *
+		 * @type {Array<{key: string, label: string, description: string, sortable: boolean, width: string, class: string, cellClass: string, link: boolean, secondary: (string|((row: object) => string))}|string>}
 		 */
 		columns: {
 			type: Array,
@@ -742,6 +745,17 @@ export default {
 			default: '',
 		},
 
+		/**
+		 * Draw an unread record (`@self.unread`) in bold with the unread dot.
+		 * Off, every row reads alike whatever its read state.
+		 *
+		 * @spec openspec/changes/screens-index-board-gaps/specs/index-list-board-look/spec.md#requirement-unread-rows-are-marked-only-where-the-reader-asked-for-them
+		 */
+		showUnread: {
+			type: Boolean,
+			default: true,
+		},
+
 		/**
 		 * How the board look draws the title column: `link` (the default) is
 		 * the 15px weight 600 underlined title of the DqZaken board; `plain` is
@@ -1045,6 +1059,20 @@ export default {
 		 * @return {string|null} The column key, or null when not fitting.
 		 * @spec openspec/changes/narrow-object-table-widgets/specs/narrow-object-table-widgets/spec.md#requirement-a-narrow-object-table-keeps-its-trailing-columns-in-view
 		 */
+		/**
+		 * The column that names the row: it carries the row link, the title
+		 * look and the unread, lock and indicator marks. The first column with
+		 * `link: true`, else the first column (DqTeamwachtrij puts the waiting
+		 * time first and links the case title in the second).
+		 *
+		 * @return {number} The index in `effectiveColumns`.
+		 * @spec openspec/changes/screens-index-board-gaps/specs/index-list-board-look/spec.md#requirement-a-column-can-carry-the-row-link
+		 */
+		titleColumnIndex() {
+			const index = this.effectiveColumns.findIndex((c) => c && c.link === true)
+			return index === -1 ? 0 : index
+		},
+
 		growColumnKey() {
 			if (!this.fitWidth || this.effectiveColumns.length === 0) {
 				return null
@@ -1365,13 +1393,14 @@ export default {
 
 		/**
 		 * Whether a row's record changed since the user last looked
-		 * (`@self.unread`). A row without the marker renders as it always did.
+		 * (`@self.unread`), when `showUnread` is on. A row without the marker
+		 * renders as it always did.
 		 *
 		 * @param {object} row The row.
 		 * @return {boolean} True when the row is unread.
 		 */
 		isUnreadRow(row) {
-			return !!(row && row['@self'] && row['@self'].unread === true)
+			return this.showUnread && !!(row && row['@self'] && row['@self'].unread === true)
 		},
 
 		/**

package/src/components/CnIndexPage/CnIndexPage.vue

@@ -21,6 +21,8 @@
 				:title="title"
 				:description="headerDescription"
 				:icon="showTitleIcon && !isBoardLook ? resolvedIcon : ''"
+				:breadcrumb="breadcrumb"
+				:meta="headerMetaText"
 				:visuallyHidden="!showTitle">
 				<!-- The board's header buttons (`headerButtons`), beside the
 				     title. Declaring them takes the Views and Actions menus
@@ -734,6 +736,7 @@
 					:columnOverrides="columnOverrides"
 					:rowClass="rowClass"
 					:rowTitle="rowTitle"
+					:showUnread="showUnreadRows"
 					:filterable="tableHeaderFilters"
 					:activeFilters="effectiveActiveFilters"
 					:filterRegister="typeof register === 'string' ? register : ''"
@@ -1609,6 +1612,31 @@ export default {
 			required: true,
 		},
 
+		/**
+		 * A breadcrumb under the title (manifest `config.breadcrumb`): one
+		 * crumb `{ label, route?, params?, href?, icon?, separator? }` or a
+		 * list; the title follows as the current crumb. Drawn as the detail
+		 * header's breadcrumb row. Null (the default) draws none.
+		 *
+		 * @type {object|Array<object>|null}
+		 * @spec openspec/changes/page-header-breadcrumb/specs/page-header/spec.md#requirement-a-list-dashboard-or-settings-page-can-show-a-breadcrumb-and-a-meta-note
+		 */
+		breadcrumb: {
+			type: [Object, Array],
+			default: null,
+		},
+
+		/**
+		 * A note after the breadcrumb and a middle dot (manifest `config.headerMeta`),
+		 * such as "{total} open": `{total}` and `{shown}` are the list's counts.
+		 *
+		 * @spec openspec/changes/page-header-breadcrumb/specs/page-header/spec.md#requirement-a-list-dashboard-or-settings-page-can-show-a-breadcrumb-and-a-meta-note
+		 */
+		headerMeta: {
+			type: String,
+			default: '',
+		},
+
 		/** Optional description shown below the title */
 		description: {
 			type: String,
@@ -2232,7 +2260,7 @@ export default {
 		 * can open is an ordinary segment; one it cannot (no board columns, no
 		 * map configured) is drawn disabled, named "<mode>: not available on
 		 * this list". Fed from `pages[].config.viewSwitch`. Ignored without the
-		 * board look, and absent the switch is as before.
+		 * board look; absent, the board look draws all four.
 		 *
 		 * @type {Array<'table' | 'cards' | 'board' | 'map'>}
 		 * @spec openspec/changes/screens-view-switch-parity/specs/view-switch-board-look/spec.md#requirement-the-manifest-can-draw-segments-the-page-cannot-open
@@ -3555,6 +3583,8 @@ export default {
 	data() {
 		return {
 			currentViewMode: this.viewMode,
+			/** Whether `?_view=` names a mode the page did not offer yet, to open once it does. */
+			routeViewPending: false,
 			/** The column field the reader picked in the board's column switch; '' = the default. */
 			boardColumnFieldChoice: '',
 			/** The rows a reference column field is built from, by field. */
@@ -4118,11 +4148,14 @@ export default {
 		 * @spec openspec/changes/screens-view-switch-parity/specs/view-switch-board-look/spec.md#requirement-the-manifest-can-draw-segments-the-page-cannot-open
 		 */
 		viewSwitchDisabledModes() {
-			if (!this.isBoardLook || !Array.isArray(this.viewSwitch)) {
+			if (!this.isBoardLook) {
 				return []
 			}
+			// The index boards draw all four segments, so the board look does
+			// too unless the manifest names its own list.
+			const listed = Array.isArray(this.viewSwitch) ? this.viewSwitch : ['table', 'cards', 'board', 'map']
 			const offered = [...this.effectiveToggleModes, ...(this.showMapSegment ? ['map'] : [])]
-			return this.viewSwitch.filter((mode) => ['table', 'cards', 'board', 'map'].includes(mode) && !offered.includes(mode))
+			return listed.filter((mode) => ['table', 'cards', 'board', 'map'].includes(mode) && !offered.includes(mode))
 		},
 
 		/**
@@ -4160,6 +4193,17 @@ export default {
 			})
 		},
 
+		/**
+		 * The modes `?_view=` can open: the toggle's modes plus the map when
+		 * the page offers it.
+		 *
+		 * @return {Array<string>} The modes.
+		 * @spec openspec/changes/screens-index-board-gaps/specs/index-list-board-look/spec.md#requirement-the-address-opens-a-view-mode-that-arrives-later
+		 */
+		routeViewModes() {
+			return [...this.effectiveToggleModes, ...(this.showMapSegment ? ['map'] : [])]
+		},
+
 		/**
 		 * The column fields the board offers (`board.columnFields`), for the
 		 * column switch (screens-board-reference-columns).
@@ -5380,6 +5424,21 @@ export default {
 			return this.isSelfFetchMode ? this.list.pagination.value : this.pagination
 		},
 
+		/**
+		 * Whether the table marks unread rows. The boards draw every row alike,
+		 * so under the board look only a page that offers the Unread lens
+		 * (`personalLenses`) marks them; the Nextcloud look always does.
+		 *
+		 * @spec openspec/changes/screens-index-board-gaps/specs/index-list-board-look/spec.md#requirement-unread-rows-are-marked-only-where-the-reader-asked-for-them
+		 * @return {boolean} True when unread rows read in bold with the dot.
+		 */
+		showUnreadRows() {
+			if (!this.isBoardLook) {
+				return true
+			}
+			return Array.isArray(this.personalLenses) && this.personalLenses.includes('unread')
+		},
+
 		/** Resolved schema OBJECT (for column generation / icons / labels). */
 		/**
 		 * Whether the table shows its header filters. A self-fetching page
@@ -6002,8 +6061,9 @@ export default {
 					}
 					// The board's header: Export reads "Download" with its icon and
 					// the Actions menu reads "Actions", without the manifest saying so.
-					if (this.isBoardLook && label === '' && button.action === 'export') {
-						label = t('nextcloud-vue', 'Download')
+					// A labelled Export keeps the icon too, unless it names its own.
+					if (this.isBoardLook && button.action === 'export') {
+						label = label || t('nextcloud-vue', 'Download')
 						icon = icon || 'Download'
 					}
 					if (label === '' && button.action === 'actions-menu') {
@@ -6286,6 +6346,22 @@ export default {
 		 * @spec openspec/changes/screens-table-footer-and-system-dates-parity/specs/index-list-board-look/spec.md#requirement-the-count-reads-in-the-users-language
 		 * @return {string}
 		 */
+		/**
+		 * The header meta note with the list's counts filled in.
+		 *
+		 * @spec openspec/changes/page-header-breadcrumb/specs/page-header/spec.md#requirement-a-list-dashboard-or-settings-page-can-show-a-breadcrumb-and-a-meta-note
+		 * @return {string}
+		 */
+		headerMetaText() {
+			if (!this.headerMeta) {
+				return ''
+			}
+			const total = this.effectivePagination?.total
+			return this.cnTranslate(this.headerMeta)
+				.replace('{shown}', String(this.effectiveObjects.length))
+				.replace('{total}', typeof total === 'number' ? String(total) : '')
+		},
+
 		headerDescription() {
 			const total = this.effectivePagination?.total
 			// Board look: the count line is a template over the rows on this page
@@ -6476,6 +6552,12 @@ export default {
 			this.applyViewModeFromRoute()
 		},
 
+		routeViewModes() {
+			if (this.routeViewPending) {
+				this.applyViewModeFromRoute()
+			}
+		},
+
 		boardFetchKey: {
 			immediate: true,
 			handler(key) {
@@ -6908,6 +6990,10 @@ export default {
 		 */
 		async loadFilterCounts() {
 			const requestKey = this.countRequestKey
+			if (this.isNamedSource) {
+				await this.loadNamedSourceCounts(requestKey)
+				return
+			}
 			const schema = this.exportSchemaSlug
 			if (requestKey === '' || !this.register || !schema) {
 				this.tabCounts = null
@@ -6939,6 +7025,46 @@ export default {
 			this.savedViewCounts = viewCounts
 		},
 
+		/**
+		 * The quick-filter counts of a named source (`entitySource`): each tab
+		 * that asks is counted by the source's own `count(config)`, with the
+		 * tab's filter over `sourceConfig`. A source without `count` shows
+		 * none; a failed count leaves that tab without a number.
+		 *
+		 * @param {string} requestKey The `countRequestKey` this load answers.
+		 * @return {Promise<void>}
+		 * @spec openspec/changes/screens-index-board-gaps/specs/index-list-board-look/spec.md#requirement-a-named-source-counts-its-quick-filters
+		 */
+		async loadNamedSourceCounts(requestKey) {
+			const count = this.namedSource ? this.namedSource.count : null
+			if (requestKey === '' || typeof count !== 'function') {
+				this.tabCounts = null
+				this.savedViewCounts = null
+				return
+			}
+			const params = (this.$route && this.$route.params) || {}
+			const ctx = typeof this.selfFetchTokenCtx === 'function' ? this.selfFetchTokenCtx() : {}
+			const tabCounts = {}
+			await Promise.all(this.countEntries
+				.filter((entry) => entry.key.startsWith('tab:'))
+				.map(async (entry) => {
+					const config = resolveFilterMap({ ...(this.sourceConfig || {}), ...(entry.filter || {}) }, params, ctx)
+					try {
+						const total = await count(config)
+						if (Number.isFinite(total)) {
+							tabCounts[Number(entry.key.slice(4))] = total
+						}
+					} catch {
+						// No number for this tab.
+					}
+				}))
+			if (requestKey !== this.countRequestKey) {
+				return
+			}
+			this.tabCounts = tabCounts
+			this.savedViewCounts = null
+		},
+
 		// ── Split view (case-page-and-list-as-a-place) ──────────────────
 
 		/**
@@ -9203,6 +9329,7 @@ export default {
 		 * @param {string} mode 'table' or 'cards'
 		 */
 		onViewModeChange(mode) {
+			this.routeViewPending = false
 			this.currentViewMode = mode
 			this.$emit('view-mode-change', mode)
 		},
@@ -9212,16 +9339,26 @@ export default {
 		 * offers it. The key starts with `_`, like `_search` and `_page`, so it
 		 * is never read as a list filter. A menu entry's `query` can so open a
 		 * list as its board, on the one page that lists the schema
-		 * (screens-board-reference-columns).
+		 * (screens-board-reference-columns). A mode the page offers only later
+		 * (the map, once rows with a geometry are in) opens when it arrives,
+		 * unless the reader picked a view first.
 		 *
 		 * @return {void}
 		 * @spec openspec/changes/screens-board-reference-columns/specs/board-view/spec.md#requirement-the-address-can-open-a-list-in-a-view-mode
+		 * @spec openspec/changes/screens-index-board-gaps/specs/index-list-board-look/spec.md#requirement-the-address-opens-a-view-mode-that-arrives-later
 		 */
 		applyViewModeFromRoute() {
 			const wanted = this.$route?.query?._view
-			if (typeof wanted === 'string' && wanted !== this.currentViewMode && this.effectiveToggleModes.includes(wanted)) {
+			if (typeof wanted !== 'string' || wanted === '' || wanted === this.currentViewMode) {
+				this.routeViewPending = false
+				return
+			}
+			if (this.routeViewModes.includes(wanted)) {
 				this.currentViewMode = wanted
+				this.routeViewPending = false
+				return
 			}
+			this.routeViewPending = true
 		},
 
 		/**

package/src/components/CnPageHeader/CnHeaderTrail.vue

@@ -0,0 +1,140 @@
+<!--
+  SPDX-FileCopyrightText: 2026 Conduction B.V.
+  SPDX-License-Identifier: EUPL-1.2
+-->
+<template>
+	<div
+		v-if="crumbs.length > 0 || meta"
+		class="cn-header-trail cn-detail-page__header-row2"
+		data-testid="cn-header-trail">
+		<CnBreadcrumbs
+			v-if="crumbs.length > 0"
+			class="cn-detail-page__breadcrumbs cn-detail-page__breadcrumbs--row2"
+			:crumbs="crumbs"
+			:rootText="crumbs[0].icon === undefined"
+			:separator="separator"
+			data-testid="cn-header-trail-breadcrumbs" />
+		<span
+			v-if="crumbs.length > 0 && meta"
+			class="cn-detail-page__header-dot"
+			aria-hidden="true">&middot;</span>
+		<span
+			v-if="meta"
+			class="cn-detail-page__header-meta"
+			data-testid="cn-header-trail-meta">{{ meta }}</span>
+	</div>
+</template>
+
+<script>
+import { CnBreadcrumbs } from '../CnBreadcrumbs/index.js'
+
+/**
+ * The breadcrumb and meta line under a page title: "Instellingen / Zaaktypen
+ * · 12 zaaktypen". It draws the same markup and classes as the board look's
+ * detail header row, so a list, dashboard or settings page carries the
+ * detail page's breadcrumb style rather than one of its own.
+ *
+ * `breadcrumb` is one crumb or a list, each `{ label, route?, params?, href?,
+ * icon?, separator? }`. The page title follows as the current crumb.
+ */
+export default {
+	name: 'CnHeaderTrail',
+
+	components: { CnBreadcrumbs },
+
+	inject: {
+		cnTranslate: { default: () => (key) => key },
+	},
+
+	props: {
+		/**
+		 * The crumbs before the current page, one object or a list.
+		 *
+		 * @type {object|Array<object>|null}
+		 * @spec openspec/changes/page-header-breadcrumb/specs/page-header/spec.md#requirement-a-list-dashboard-or-settings-page-can-show-a-breadcrumb-and-a-meta-note
+		 */
+		breadcrumb: {
+			type: [Object, Array],
+			default: null,
+		},
+
+		/** The current crumb: the page title, already translated. */
+		current: {
+			type: String,
+			default: '',
+		},
+
+		/**
+		 * The note after the crumbs and a middle dot, already resolved.
+		 *
+		 * @spec openspec/changes/page-header-breadcrumb/specs/page-header/spec.md#requirement-a-list-dashboard-or-settings-page-can-show-a-breadcrumb-and-a-meta-note
+		 */
+		meta: {
+			type: String,
+			default: '',
+		},
+
+		/**
+		 * Translate function for the crumb labels; falls back to the injected
+		 * `cnTranslate`.
+		 *
+		 * @type {((key: string) => string)|null}
+		 */
+		translate: {
+			type: Function,
+			default: null,
+		},
+	},
+
+	computed: {
+		/**
+		 * The declared crumbs that carry a label.
+		 *
+		 * @return {Array<object>}
+		 */
+		declared() {
+			const list = Array.isArray(this.breadcrumb) ? this.breadcrumb : (this.breadcrumb ? [this.breadcrumb] : [])
+			return list.filter((crumb) => crumb && typeof crumb.label === 'string' && crumb.label !== '')
+		},
+
+		/**
+		 * The crumbs for CnBreadcrumbs: each declared crumb as a link, then the
+		 * current page. Empty without a declared crumb.
+		 *
+		 * @spec openspec/changes/page-header-breadcrumb/specs/page-header/spec.md#requirement-a-list-dashboard-or-settings-page-can-show-a-breadcrumb-and-a-meta-note
+		 * @return {Array<object>}
+		 */
+		crumbs() {
+			if (this.declared.length === 0) {
+				return []
+			}
+			const out = this.declared.map((crumb) => {
+				const entry = { label: (this.translate ?? this.cnTranslate)(crumb.label) }
+				if (typeof crumb.icon === 'string' && crumb.icon !== '') {
+					entry.icon = crumb.icon
+				}
+				if (crumb.route) {
+					entry.to = { name: crumb.route, ...(crumb.params ? { params: crumb.params } : {}) }
+				} else if (crumb.href) {
+					entry.href = crumb.href
+				}
+				return entry
+			})
+			if (this.current) {
+				out.push({ label: this.current })
+			}
+			return out
+		},
+
+		/**
+		 * The text between the crumbs: the first crumb's `separator`, else `/`.
+		 *
+		 * @return {string}
+		 */
+		separator() {
+			const declared = this.declared[0] && this.declared[0].separator
+			return typeof declared === 'string' && declared !== '' ? declared : '/'
+		},
+	},
+}
+</script>

package/src/components/CnPageHeader/CnPageHeader.md

@@ -81,3 +81,14 @@ With extra content (e.g., a badge or status indicator):
   </template>
 </CnPageHeader>
 ```
+
+Breadcrumb and meta: `breadcrumb` (one crumb `{ label, route?, params?, href?, icon?, separator? }` or a list) draws a
+line under the title in the detail header's breadcrumb style, with the title as the current crumb; `meta` follows after a
+middle dot:
+
+```vue
+<CnPageHeader
+  title="Zaaktypen"
+  :breadcrumb="{ label: 'Instellingen', href: '#instellingen' }"
+  meta="14 zaaktypen" />
+```

package/src/components/CnPageHeader/CnPageHeader.vue

@@ -13,6 +13,12 @@
 			<h1 class="cn-page-header__title" data-testid="cn-page-title">
 				{{ resolvedTitle }}
 			</h1>
+			<CnHeaderTrail
+				v-if="!visuallyHidden"
+				:breadcrumb="breadcrumb"
+				:current="resolvedTitle"
+				:meta="resolvedMeta"
+				:translate="effectiveTranslate" />
 			<p v-if="description && !visuallyHidden" class="cn-page-header__description" data-testid="cn-page-description">
 				{{ resolvedDescription }}
 			</p>
@@ -22,6 +28,7 @@
 </template>
 
 <script>
+import CnHeaderTrail from './CnHeaderTrail.vue'
 import { CnIcon } from '../CnIcon/index.js'
 
 /**
@@ -64,6 +71,7 @@ export default {
 	name: 'CnPageHeader',
 
 	components: {
+		CnHeaderTrail,
 		CnIcon,
 	},
 
@@ -90,6 +98,31 @@ export default {
 			default: '',
 		},
 
+		/**
+		 * A breadcrumb under the title: one crumb or a list, each
+		 * `{ label, route?, params?, href?, icon?, separator? }`. The title
+		 * follows as the current crumb. Drawn as the board look's detail
+		 * header row.
+		 *
+		 * @type {object|Array<object>|null}
+		 * @spec openspec/changes/page-header-breadcrumb/specs/page-header/spec.md#requirement-a-list-dashboard-or-settings-page-can-show-a-breadcrumb-and-a-meta-note
+		 */
+		breadcrumb: {
+			type: [Object, Array],
+			default: null,
+		},
+
+		/**
+		 * A note after the breadcrumb and a middle dot, such as "12 open". Run
+		 * through the host translate function.
+		 *
+		 * @spec openspec/changes/page-header-breadcrumb/specs/page-header/spec.md#requirement-a-list-dashboard-or-settings-page-can-show-a-breadcrumb-and-a-meta-note
+		 */
+		meta: {
+			type: String,
+			default: '',
+		},
+
 		/** Optional MDI icon name (rendered via CnIcon) */
 		icon: {
 			type: String,
@@ -153,6 +186,15 @@ export default {
 		resolvedDescription() {
 			return this.description ? this.effectiveTranslate(this.description) : this.description
 		},
+
+		/**
+		 * The meta note run through the host translate function.
+		 *
+		 * @return {string}
+		 */
+		resolvedMeta() {
+			return this.meta ? this.effectiveTranslate(this.meta) : ''
+		},
 	},
 }
 </script>

package/src/components/CnPagination/CnPagination.vue

@@ -8,13 +8,13 @@
 		  Board variant (`variant: "board"`): the footer of the table card as the
 		  screens draw it. The count text at the start, numbered 34px links at
 		  the end, "Previous" only after the first page and "Next" only before
-		  the last. No First, no Last, no page-size select.
+		  the last (inert on a single page). No First, no Last, no page-size select.
 		-->
 		<template v-if="isBoardVariant">
 			<span class="cn-pagination__page-info cn-pagination__board-count" data-testid="cn-pagination-board-count">
 				{{ boardCountText }}
 			</span>
-			<nav v-if="totalPages > 1" class="cn-pagination__board-pages" :aria-label="t('nextcloud-vue', 'Pagination')">
+			<nav class="cn-pagination__board-pages" :aria-label="t('nextcloud-vue', 'Pagination')">
 				<button
 					v-if="currentPage > 1"
 					type="button"
@@ -43,6 +43,14 @@
 					@click="changePage(currentPage + 1)">
 					{{ nextLabel }}
 				</button>
+				<!-- A single page still draws its "1" and an inert Next, as the boards do. -->
+				<span
+					v-else-if="totalPages <= 1"
+					class="cn-pagination__board-link cn-pagination__board-link--wide cn-pagination__board-link--disabled"
+					aria-disabled="true"
+					data-testid="cn-pagination-next">
+					{{ nextLabel }}
+				</span>
 			</nav>
 		</template>
 

package/src/components/CnRecordListWidget/CnRecordListWidget.vue

@@ -727,9 +727,9 @@ export default {
 		},
 
 		/**
-		 * The row's due text (`due`: `{ field, todayLabel?, overdueLabel?, emptyText? }`):
-		 * "3 dagen te laat" in the danger tone, "Vandaag", the date otherwise,
-		 * `emptyText` when the field is empty.
+		 * The row's due text (`due`: `{ field, todayLabel?, overdueLabel?, upcomingLabel?, upcomingWeeksLabel?, upcomingWeeksFrom?, emptyText? }`):
+		 * "3 dagen te laat" in the danger tone, "Vandaag", the date or the time
+		 * left ("nog 4 dagen") otherwise, `emptyText` when the field is empty.
 		 *
 		 * @param {object} row The row.
 		 * @return {{text: string, tone: string}|null} The text and tone, or null.