@conduction/nextcloud-vue 2.78.0 → 2.80.0

package/src/components/CnDashboardPage/CnDashboardPage.vue

@@ -33,8 +33,8 @@
 					<!-- @slot title-meta Content on the title's row, right of the title (e.g. a page-wide picker). Fill it from a manifest with `page.slots: { "title-meta": "<RegistryName>" }`. -->
 					<slot name="title-meta" />
 				</div>
-				<p v-if="description" class="cn-dashboard-page__description">
-					{{ resolvedDescription }}
+				<p v-if="subtitleText" class="cn-dashboard-page__description" data-testid="cn-dashboard-page-subtitle">
+					{{ subtitleText }}
 				</p>
 			</div>
 			<div class="cn-dashboard-page__header-actions">
@@ -42,7 +42,7 @@
 				     widget on the page draws it. Its options control the view
 				     region below the grid. -->
 				<CnSegmentedControl
-					v-if="showsPageViewSwitch"
+					v-if="showsPageViewSwitch && !switchInRow"
 					class="cn-page-view-switch"
 					:options="viewSwitchOptions"
 					:modelValue="activeViewId"
@@ -97,6 +97,7 @@
 				     Separate from the per-widget menus. `docs-anchor` deep-links
 				     the docs item to THIS page's section. -->
 				<CnActionsMenu
+					v-if="showActionsMenu"
 					:showRefresh="showRefresh"
 					:showRequestFeature="showRequestFeature"
 					:showReportBug="showReportBug"
@@ -138,6 +139,39 @@
 			</div>
 		</div>
 
+		<!-- The switch row (screens-dashboard-greeting-header): in the board
+		     look the page's view switch sits under the header, left, and the
+		     page's `viewLinks` sit right of it as small pills (DqMijnWerk). -->
+		<div
+			v-if="showHeader && (switchInRow || resolvedViewLinks.length > 0)"
+			class="cn-dashboard-page__switch-row"
+			data-testid="cn-dashboard-page-switch-row">
+			<CnSegmentedControl
+				v-if="switchInRow"
+				class="cn-page-view-switch"
+				:options="viewSwitchOptions"
+				:modelValue="activeViewId"
+				:ariaLabel="viewSwitchLabel"
+				:controls="viewRegionId"
+				data-testid="cn-dashboard-page-view-switch"
+				@update:modelValue="selectView" />
+			<span class="cn-dashboard-page__switch-row-spacer" />
+			<component
+				:is="link.tag"
+				v-for="link in resolvedViewLinks"
+				:key="link.key"
+				v-bind="link.attrs"
+				class="cn-dashboard-page__view-link"
+				data-testid="cn-dashboard-page-view-link">
+				<CnWidgetIcon
+					v-if="link.icon"
+					:name="link.icon"
+					:size="14"
+					class="cn-dashboard-page__view-link-icon" />
+				{{ link.label }}
+			</component>
+		</div>
+
 		<!-- Date-range header (optional).
 		     Rendered only when `dateRange.enabled === true` AND
 		     `dateRange.showHeaderPicker !== false`. The range STATE
@@ -868,7 +902,8 @@
 </template>
 
 <script>
-import { translate as t } from '@nextcloud/l10n'
+import { getCurrentUser } from '@nextcloud/auth'
+import { getCanonicalLocale, translate as t } from '@nextcloud/l10n'
 import { NcActionButton, NcActionInput, NcActions, NcActionSeparator, NcButton, NcLoadingIcon, NcSelect } from '@nextcloud/vue'
 import { provide, ref, watch } from 'vue'
 import CalendarRange from 'vue-material-design-icons/CalendarRange.vue'
@@ -889,6 +924,7 @@ import CnKpiGrid from '../CnKpiGrid/CnKpiGrid.vue'
 import CnSegmentedControl from '../CnSegmentedControl/CnSegmentedControl.vue'
 import CnStatsBlockWidget from '../CnStatsBlockWidget/CnStatsBlockWidget.vue'
 import CnTileWidget from '../CnTileWidget/CnTileWidget.vue'
+import CnWidgetIcon from '../CnWidgetGrid/CnWidgetIcon.vue'
 import CnWidgetRefItem from '../CnWidgetRefItem/CnWidgetRefItem.vue'
 import CnWidgetRenderer from '../CnWidgetRenderer/CnWidgetRenderer.vue'
 import CnWidgetWrapper from '../CnWidgetWrapper/CnWidgetWrapper.vue'
@@ -1056,6 +1092,7 @@ export default {
 		CnLeafMountHost,
 		CnSegmentedControl,
 		CnKpiGrid,
+		CnWidgetIcon,
 	},
 
 	mixins: [pageViews],
@@ -1156,6 +1193,50 @@ export default {
 			default: () => [],
 		},
 
+		/**
+		 * Greet the reader in the header subtitle (manifest `config.greeting`):
+		 * `true` (or `"first"`) writes "Good afternoon, Pieter · Monday 5
+		 * October 2026", `"full"` uses the whole display name. The page
+		 * `description`, when set, follows after another middle dot. Off by
+		 * default: the subtitle is the description alone, as before.
+		 *
+		 * @spec openspec/changes/screens-dashboard-greeting-header/specs/dashboard-page/spec.md#requirement-the-header-subtitle-can-greet-the-reader
+		 * @type {boolean|string}
+		 */
+		greeting: {
+			type: [Boolean, String],
+			default: false,
+		},
+
+		/**
+		 * Links drawn as small pills on the switch row under the header
+		 * (manifest `config.viewLinks`), as DqMijnWerk's "Uw wachtrij / Aan
+		 * mij toegewezen / Dag afsluiten". Each `{ label, icon?, route?,
+		 * href? }`: `route` is a route name or a `{ name, params?, query? }`
+		 * location, `href` a plain URL; `label` goes through the host
+		 * translate function. An entry without a label or a target is skipped.
+		 *
+		 * @spec openspec/changes/screens-dashboard-greeting-header/specs/dashboard-page/spec.md#requirement-a-switch-row-carries-the-view-switch-and-link-pills
+		 * @type {Array<object>}
+		 */
+		viewLinks: {
+			type: Array,
+			default: () => [],
+		},
+
+		/**
+		 * Whether the header draws the page Actions menu (manifest
+		 * `config.showActionsMenu`). `false` removes it, for a board page
+		 * whose header carries only the buildiq square and the primary.
+		 *
+		 * @spec openspec/changes/screens-dashboard-greeting-header/specs/dashboard-page/spec.md#requirement-the-header-can-drop-the-page-actions-menu
+		 * @type {boolean}
+		 */
+		showActionsMenu: {
+			type: Boolean,
+			default: true,
+		},
+
 		/**
 		 * Whether a widget draws its overflow Actions menu when neither its
 		 * placement nor its definition says (`showActions`). `false` (manifest
@@ -1848,6 +1929,97 @@ export default {
 			return typeof this.cnTranslate === 'function' ? this.cnTranslate : (key) => key
 		},
 
+		/**
+		 * The greeting for the time of day, with the reader's first (or
+		 * full) name when known, or '' when `greeting` is off.
+		 *
+		 * @spec openspec/changes/screens-dashboard-greeting-header/specs/dashboard-page/spec.md#requirement-the-header-subtitle-can-greet-the-reader
+		 * @return {string}
+		 */
+		greetingLine() {
+			if (this.greeting !== true && this.greeting !== 'first' && this.greeting !== 'full') {
+				return ''
+			}
+			let user
+			try {
+				user = getCurrentUser()
+			} catch {
+				user = null
+			}
+			const displayName = (user && typeof user.displayName === 'string') ? user.displayName.trim() : ''
+			const name = this.greeting === 'full' ? displayName : displayName.split(/\s+/)[0]
+			const hour = new Date().getHours()
+			if (hour < 12) {
+				return name ? t('nextcloud-vue', 'Good morning, {name}', { name }) : t('nextcloud-vue', 'Good morning')
+			}
+			if (hour < 18) {
+				return name ? t('nextcloud-vue', 'Good afternoon, {name}', { name }) : t('nextcloud-vue', 'Good afternoon')
+			}
+			return name ? t('nextcloud-vue', 'Good evening, {name}', { name }) : t('nextcloud-vue', 'Good evening')
+		},
+
+		/**
+		 * The header subtitle: with `greeting` on, the greeting, today's date
+		 * written out and the description, joined by a middle dot; else the
+		 * description alone, as before.
+		 *
+		 * @spec openspec/changes/screens-dashboard-greeting-header/specs/dashboard-page/spec.md#requirement-the-header-subtitle-can-greet-the-reader
+		 * @return {string}
+		 */
+		subtitleText() {
+			const description = this.description ? this.resolvedDescription : ''
+			const greeting = this.greetingLine
+			if (greeting === '') {
+				return description
+			}
+			const options = { weekday: 'long', day: 'numeric', month: 'long', year: 'numeric' }
+			let date
+			try {
+				date = new Intl.DateTimeFormat(getCanonicalLocale() || undefined, options).format(new Date())
+			} catch {
+				date = new Intl.DateTimeFormat(undefined, options).format(new Date())
+			}
+			return [greeting, date, description].filter((part) => part !== '').join(' · ')
+		},
+
+		/**
+		 * Whether the page's view switch sits on the switch row under the
+		 * header (board look) rather than among the header actions.
+		 *
+		 * @spec openspec/changes/screens-dashboard-greeting-header/specs/dashboard-page/spec.md#requirement-a-switch-row-carries-the-view-switch-and-link-pills
+		 * @return {boolean}
+		 */
+		switchInRow() {
+			return this.isBoardLook && this.showsPageViewSwitch
+		},
+
+		/**
+		 * `viewLinks` as render descriptors: a router link for a route, an
+		 * anchor for an href, the label translated. Entries without a label
+		 * or a target are dropped.
+		 *
+		 * @spec openspec/changes/screens-dashboard-greeting-header/specs/dashboard-page/spec.md#requirement-a-switch-row-carries-the-view-switch-and-link-pills
+		 * @return {Array<{key: string, tag: string, attrs: object, label: string, icon: string}>}
+		 */
+		resolvedViewLinks() {
+			const links = Array.isArray(this.viewLinks) ? this.viewLinks : []
+			const out = []
+			links.forEach((link, index) => {
+				if (!link || typeof link.label !== 'string' || link.label === '') {
+					return
+				}
+				const icon = typeof link.icon === 'string' ? link.icon : ''
+				const label = this.effectiveTranslate(link.label)
+				if (link.route && this.$router) {
+					const to = typeof link.route === 'string' ? { name: link.route } : link.route
+					out.push({ key: `route-${index}`, tag: 'router-link', attrs: { to }, label, icon })
+				} else if (typeof link.href === 'string' && link.href !== '') {
+					out.push({ key: `href-${index}`, tag: 'a', attrs: { href: link.href }, label, icon })
+				}
+			})
+			return out
+		},
+
 		/**
 		 * The page title run through the host translate function so a
 		 * manifest-authored source string localises.
@@ -4392,6 +4564,49 @@ export default {
 	height: var(--cn-board-control-height, 40px);
 }
 
+/* The switch row under the header (screens-dashboard-greeting-header): the
+   view switch left, the `viewLinks` pills right (DqMijnWerk: pills 34px high,
+   radius 17, 13px/600, a 14px icon, primary light on primary deep). */
+.cn-dashboard-page__switch-row {
+	display: flex;
+	flex-wrap: wrap;
+	align-items: center;
+	gap: 10px;
+	margin-bottom: var(--cn-board-section-gap, 20px);
+}
+
+.cn-dashboard-page__switch-row-spacer {
+	flex: 1 1 auto;
+}
+
+.cn-dashboard-page__view-link {
+	display: inline-flex;
+	align-items: center;
+	gap: 6px;
+	height: 34px;
+	padding: 0 12px;
+	border-radius: 17px;
+	background: var(--color-primary-element-light);
+	color: var(--color-primary-element-light-text);
+	font-size: 13px;
+	font-weight: 600;
+	white-space: nowrap;
+	text-decoration: none !important;
+}
+
+.cn-dashboard-page__view-link:hover {
+	background: var(--color-primary-element-light-hover, var(--color-primary-element-light));
+}
+
+.cn-dashboard-page__view-link:focus-visible {
+	outline: 2px solid var(--color-main-text);
+	outline-offset: 2px;
+}
+
+.cn-dashboard-page__view-link-icon {
+	display: inline-flex;
+}
+
 /* The period group, in a row of its own between the header and the KPI row. */
 .cn-dashboard-page__date-range--segmented {
 	margin-bottom: 16px;

package/src/components/CnDataTable/CnDataTable.md

@@ -198,9 +198,11 @@ export default {
 | `rowIndicatorCap` | Number | `3` | How many declared indicators render on the row before the rest move into the row menu, reachable as `indicatorsFor(row).overflow`. |
 | `selectAllLabel` | String | `'Select all rows'` | Accessible name (`aria-label`) for the header select-all checkbox, so screen readers announce a named control (WCAG 4.1.2) |
 | `selectRowLabel` | String | `'Select row'` | Accessible name (`aria-label`) for each per-row select checkbox, so screen readers announce a named control (WCAG 4.1.2) |
+| `rowTitle` | String | `'link'` | Board look only: how the title column draws its title. `link` underlines the title (not its secondary line). `plain` draws it as 15px bold text without an underline over a 13px muted secondary line, as the PqTickets board does; the row stays clickable. The Nextcloud look ignores it. |
 | `hideHeader` | Boolean | `false` | Hide the column-header row (`<thead>`) — for compact dashboard list widgets that want a plain bordered-row list without column labels |
 | `pinnedCount` | Number | `0` | How many data columns are pinned to the start of the table. They, and the selection and icon columns, stay in view when the table scrolls sideways |
 | `fixedLayout` | Boolean | `false` | Switch to `table-layout: fixed` so each column's `width` is authoritative rather than a hint the browser may override from cell content. Long unbreakable values (a PHP FQCN, a UUID) then wrap inside their cell instead of widening the column or painting past it, and no single unsized column soaks up all remaining width. Size every column when using it — percentages summing to 100 are easiest to reason about |
+| `fitWidth` | Boolean | `false` | Fit the table to its container instead of growing past it: one column (a column's `grow: true`, else `title`, else `name`, else the first) takes the room that is left and ends in an ellipsis, and every other column keeps its content on one line, so trailing columns stay visible in a narrow tile. `CnWidgetObjectTable` turns it on |
 | `fillHeight` | Boolean | `false` | Fill the parent's height (a flex-column card / widget content area) so an optional `#footer` is pushed to the bottom instead of floating under a short list; the footer stays pinned via its sticky rule when the list overflows. No-op outside a height-constrained parent — opt-in |
 | `filterable` | Boolean | `false` | Show a filter button in every header whose column can filter: enum, boolean, text, number, date and reference columns backed by a schema property. A column opts out with `filterable: false`. Applying a filter emits `column-filter`; the host owns the state and passes it back as `activeFilters`. `CnIndexPage` turns it on by default. |
 | `activeFilters` | Object | `{}` | The active filter map, `{ paramKey: values[] }`: the same map the facet sidebar writes, so a header filter and a sidebar filter on one field show the same state. |

package/src/components/CnDataTable/CnDataTable.vue

@@ -4,6 +4,7 @@
 		data-testid="cn-object-list"
 		:class="{
 			'cn-table-container--board': isBoardLook,
+			'cn-table-container--title-plain': isBoardLook && rowTitle === 'plain',
 			'cn-table-container--scrollable': scrollable,
 			'cn-table-container--borderless': borderless,
 			'cn-table-container--fill': fillHeight,
@@ -96,7 +97,7 @@
 			:aria-label="isScrollable ? scrollRegionLabel : undefined">
 			<table
 				class="cn-data-table"
-				:class="{ 'cn-data-table--fixed': fixedLayout }"
+				:class="{ 'cn-data-table--fixed': fixedLayout, 'cn-data-table--fit': fitWidth }"
 				data-testid="cn-object-list-table">
 				<thead v-if="!hideHeader">
 					<tr>
@@ -128,6 +129,8 @@
 								col.sortable ? 'cn-table-header--sortable' : '',
 								col.class || '',
 								pinClass(leadingCount + colIndex),
+								isGrowColumn(col) ? 'cn-table-col--grow' : '',
+								colIndex === 0 ? 'cn-table-head--title' : '',
 							]"
 							:style="{ ...(col.width ? { width: col.width } : {}), ...pinStyle(leadingCount + colIndex) }"
 							:aria-sort="ariaSortFor(col)"
@@ -256,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' : '']"
+							:class="[col.class || '', col.cellClass || '', cellClass ? cellClass(row, col) : '', pinClass(leadingCount + colIndex), colIndex === 0 ? '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
@@ -499,6 +502,16 @@ function fillSecondaryTemplate(template, valueOf) {
  * </CnDataTable>
  * ```
  */
+
+/**
+ * Column keys that name an object's system dates in OpenRegister's `@self`
+ * block. A column may declare one as its key (`@self.created`); it renders as
+ * a date-time although the schema has no property behind it.
+ *
+ * @type {string[]}
+ */
+const SYSTEM_DATE_KEYS = ['@self.created', '@self.updated', '@self.published', '@self.depublished']
+
 export default {
 	name: 'CnDataTable',
 
@@ -761,6 +774,21 @@ export default {
 			default: '',
 		},
 
+		/**
+		 * How the board look draws the title column: `link` (the default) is
+		 * the 15px weight 600 underlined title of the DqZaken board; `plain` is
+		 * the 15px bold title without an underline and a 13px muted secondary
+		 * line, as the PqTickets and OcPublicaties boards draw it. The row stays
+		 * clickable either way. The Nextcloud look ignores it.
+		 *
+		 * @spec openspec/changes/screens-table-rows-parity/specs/index-list-board-look/spec.md#requirement-a-row-title-can-be-plain-text
+		 */
+		rowTitle: {
+			type: String,
+			default: 'link',
+			validator: (value) => ['link', 'plain'].includes(value),
+		},
+
 		/**
 		 * Drop the container's card chrome (border, radius, shadow) so the table
 		 * sits flush inside a parent that already provides a card (e.g. a
@@ -820,6 +848,23 @@ export default {
 			default: false,
 		},
 
+		/**
+		 * Fit the table to its container instead of letting it grow past it.
+		 * One column takes the room that is left and cuts its text with an
+		 * ellipsis (the full value stays in the tooltip); every other column
+		 * keeps its content on one line at its own width, so trailing columns
+		 * such as a date stay visible in a narrow tile. The column that grows
+		 * is the first with `grow: true`, else the one keyed `title` or `name`,
+		 * else the first column. CnWidgetObjectTable turns this on.
+		 *
+		 * @type {boolean}
+		 * @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
+		 */
+		fitWidth: {
+			type: Boolean,
+			default: false,
+		},
+
 		/**
 		 * Max number of rows to display. When the total exceeds it, only the first
 		 * `limit` render and the "View all" footer appears (with `viewAllRoute`).
@@ -1025,6 +1070,25 @@ export default {
 		},
 
 		/** @return {number} Leading cells before the data columns (selection, icon). */
+		/**
+		 * The key of the column that takes the spare width under `fitWidth`:
+		 * the first with `grow: true`, else `title` or `name`, else the first.
+		 *
+		 * @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
+		 */
+		growColumnKey() {
+			if (!this.fitWidth || this.effectiveColumns.length === 0) {
+				return null
+			}
+			const cols = this.effectiveColumns
+			const chosen = cols.find((c) => c && c.grow === true)
+				|| cols.find((c) => c && c.key === 'title')
+				|| cols.find((c) => c && c.key === 'name')
+				|| cols[0]
+			return chosen ? chosen.key : null
+		},
+
 		leadingCount() {
 			return (this.selectable ? 1 : 0) + (this.rowIcon ? 1 : 0)
 		},
@@ -1321,6 +1385,16 @@ export default {
 	},
 
 	methods: {
+		/**
+		 * Whether a column is the one that takes the spare width (`fitWidth`).
+		 *
+		 * @param {object} col The column.
+		 * @return {boolean}
+		 */
+		isGrowColumn(col) {
+			return this.growColumnKey !== null && !!col && col.key === this.growColumnKey
+		},
+
 		/**
 		 * Whether a row's record changed since the user last looked
 		 * (`@self.unread`). A row without the marker renders as it always did.
@@ -1651,11 +1725,17 @@ export default {
 		 * the schema property's own `colorMap` / `x-color-map`.
 		 *
 		 * @param {object} col Column definition.
+		 * @spec openspec/changes/screens-table-footer-and-system-dates-parity/specs/index-list-board-look/spec.md#requirement-a-system-date-can-be-a-column
 		 * @return {object} Property definition for CnCellRenderer.
 		 * @spec openspec/changes/screens-cell-pill-parity/specs/cell-pill-tones/spec.md#requirement-a-manifest-column-colours-its-enum-pills
 		 */
 		columnProperty(col) {
 			const base = this.getSchemaProperty(col.key)
+			// A system date (`@self.created`, `@self.updated`, ...) has no
+			// schema property behind it; it renders as a date-time.
+			if (Object.keys(base).length === 0 && SYSTEM_DATE_KEYS.includes(col.key) && !col.type && !col.format) {
+				return { type: 'string', format: 'date-time' }
+			}
 			const colorMap = col && col.colorMap && typeof col.colorMap === 'object' && !Array.isArray(col.colorMap) ? col.colorMap : null
 			if (col && (col.format || col.type || col.enum || colorMap)) {
 				return {

package/src/components/CnDetailPage/CnDetailPage.md

@@ -422,7 +422,7 @@ Four levels of action and the case surfaces around them. All opt in. See [the re
 | `quickActions` | Array | `[]` | At most three always visible header buttons. |
 | `actionsMenu` | Object \| null | `null` | `{ showRefresh?, showHelpLinks?, label? }` for the overflow menu. |
 | `nextStep` | Object \| null | `null` | The "what now" card per stage, rendered by `CnNextStepCard`. |
-| `typePill` | Object \| null | `null` | `{ field, colorMap?, labels?, variant? }`, a pill above the title. |
+| `typePill` | Object \| null | `null` | `{ field, colorMap?, labels?, variant? }`, a pill above the title. Instead of `field`: `text` (a constant) or `countFrom` + `countLabel` (a count of a related list). |
 | `statusPill` | Object \| null | `null` | A second pill, same shape. |
 | `headerFields` | Array | `[]` | Fields shown as chips under the title (manifest `config.headerFields`). Each entry is a property key, or `{ key, format, labelField, colorField, warnWhenPast }`; `format` is `text` (default), `mono`, `badge`, `user` or `date`. A `$ref` value shows `labelField` of the referenced object and falls back to the raw id in mono; a badge maps `colorField` (`success`, `warning`, `error`, `info`, `neutral`) to a variant; `warnWhenPast` gives a past date the error variant. An empty value shows no chip, a page without the key shows no row. Each chip reads "Title: value" to a screen reader, and the row prints as plain text. |
 | `sideColumn` | Array | `[]` | Widget definitions or widget ids, rendered as a column of cards beside the body. |

package/src/components/CnDetailPage/CnDetailPage.vue

@@ -1231,12 +1231,15 @@ import {
 	groupMenuEntries,
 	MAX_QUICK_ACTIONS,
 	normalisePinnedAction,
+	pillCountSource,
+	resolveCountPill,
 	resolveNextStep,
 	resolvePill,
 	stageEntry,
 	stageOf,
 } from '../../utils/detailActionModel.js'
 import { reportBindingProblems } from '../../utils/diagnostics.js'
+import { fetchListTotal } from '../../utils/fetchFilterCounts.js'
 import { cnGridCellStyle, hasGridRow } from '../../utils/grid.js'
 import { isActivityWidget, resolveHeaderMeta } from '../../utils/headerMeta.js'
 import { patchStoredSelf } from '../../utils/patchStoredSelf.js'
@@ -2393,9 +2396,13 @@ export default {
 		 * A pill above the title saying what kind of record this is
 		 * (manifest `config.typePill`): `{ field, colorMap?, labels?, variant? }`.
 		 * Rendered through `CnStatusBadge`; `colorMap` is keyed on the field's
-		 * raw value, `labels` maps a raw value to the text to show.
+		 * raw value, `labels` maps a raw value to the text to show. Instead of
+		 * `field`: `text`, a constant ("Inwoner"), or `countFrom`
+		 * (`{ register, schema, filter? }`) with `countLabel` (`{ one, other }`
+		 * with `{count}`), a count of a related list ("1 lopende zaak") that
+		 * shows nothing at 0.
 		 *
-		 * @type {{field: string, colorMap?: object, labels?: object, variant?: string}|null}
+		 * @type {{field?: string, text?: string, countFrom?: object, countLabel?: object, colorMap?: object, labels?: object, variant?: string}|null}
 		 */
 		typePill: {
 			type: Object,
@@ -2747,6 +2754,10 @@ export default {
 
 	data() {
 		return {
+			/** The counts of the header's count pills (`countFrom`), by pill key (`type`, `status`). */
+			pillCounts: {},
+			/** Sequence of the last pill count round, so a late answer does not overwrite a newer one. */
+			pillCountSeq: 0,
 			/** `register/schema/id` the read-state call was last made for, so it is sent once per load. */
 			readStateSentFor: '',
 			/** Whether the user is arranging the chosen view (`userLayout`). */
@@ -3259,12 +3270,25 @@ export default {
 		headerPills() {
 			return [['type', this.typePill], ['status', this.statusPill]]
 				.map(([key, config]) => {
-					const pill = resolvePill(config, this.resolvedObject)
+					const pill = pillCountSource(config)
+						? resolveCountPill(config, this.pillCounts[key], (text) => this.effectiveTranslate(text))
+						: resolvePill(config, this.resolvedObject)
 					return pill ? { ...pill, key, label: this.effectiveTranslate(pill.label) } : null
 				})
 				.filter(Boolean)
 		},
 
+		/**
+		 * What the count pills depend on: the record id and the lists they
+		 * count. A change counts again.
+		 *
+		 * @return {string} The key.
+		 * @spec openspec/changes/screens-relation-pages/specs/relation-pages/spec.md#requirement-a-header-pill-can-be-a-constant-or-a-count
+		 */
+		pillCountKey() {
+			return JSON.stringify([this.objectId, pillCountSource(this.typePill), pillCountSource(this.statusPill)])
+		},
+
 		/**
 		 * The widget the header holds (`headerWidget`): the definition in
 		 * `widgets` with that id, or null without the key or a match.
@@ -4337,6 +4361,14 @@ export default {
 	},
 
 	watch: {
+		// The header's count pills count again for another record or other lists.
+		pillCountKey: {
+			immediate: true,
+			handler() {
+				this.refreshPillCounts()
+			},
+		},
+
 		// Opening a record marks it read, once, after its data has rendered.
 		readStateDue: {
 			immediate: true,
@@ -4754,6 +4786,33 @@ export default {
 			}
 		},
 
+		/**
+		 * Count the lists behind the header's count pills (`countFrom`): one
+		 * list request each (`_limit=1`, the `total`). A failed count, or a
+		 * record without an id yet, shows no pill.
+		 *
+		 * @return {Promise<void>}
+		 * @spec openspec/changes/screens-relation-pages/specs/relation-pages/spec.md#requirement-a-header-pill-can-be-a-constant-or-a-count
+		 */
+		async refreshPillCounts() {
+			const pills = [['type', this.typePill], ['status', this.statusPill]]
+				.map(([key, config]) => [key, pillCountSource(config)])
+				.filter(([, source]) => source)
+			const seq = ++this.pillCountSeq
+			if (pills.length === 0 || this.objectId === null || this.objectId === undefined || this.objectId === '') {
+				this.pillCounts = {}
+				return
+			}
+			const ctx = { objectId: this.objectId, object: this.resolvedObject || undefined }
+			const counts = {}
+			await Promise.all(pills.map(async ([key, source]) => {
+				counts[key] = await fetchListTotal(source.register, source.schema, source.filter, ctx).catch(() => null)
+			}))
+			if (seq === this.pillCountSeq) {
+				this.pillCounts = counts
+			}
+		},
+
 		/**
 		 * A `cn:page:refresh` reached the page — re-read the object so every
 		 * object-bound widget re-renders from what the backend now holds.
@@ -4768,6 +4827,7 @@ export default {
 		 * @return {void}
 		 */
 		onPageRefreshBus(payload) {
+			this.refreshPillCounts()
 			if (!this.hasSchemaDrivenFetch) {
 				return
 			}