@conduction/nextcloud-vue 2.56.0-beta.47 → 2.56.0-beta.49

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

@@ -169,6 +169,20 @@
 						{{ item.title }}
 					</component>
 				</div>
+				<!-- `bar`: a thin track under the row, filled to the row's value
+				     against its own maximum or against the largest row. -->
+				<span
+					v-if="presentation === 'rows' && item.bar"
+					class="cn-record-list__bar"
+					:class="{ 'cn-record-list__bar--over': item.bar.over }"
+					role="meter"
+					:aria-label="item.title || null"
+					:aria-valuenow="item.bar.value"
+					aria-valuemin="0"
+					:aria-valuemax="item.bar.max"
+					data-testid="cn-record-list-bar">
+					<span class="cn-record-list__bar-fill" :style="{ width: `${item.bar.share}%` }" />
+				</span>
 			</li>
 		</ul>
 	</div>
@@ -254,7 +268,11 @@ export default {
 		 * The list config: `{ register, schema, filter?, sort?, limit?, extend?,
 		 * presentation?, title?, meta?, text?, label?, pill?, trailing?, icon?,
 		 * rowRoute?, rowIdField?, headerLink?, headerNote?, emptyText?, errorText?,
-		 * valueLabels?, endpointSource? }`. `endpointSource` (`{ url, method?,
+		 * valueLabels?, endpointSource?, bar? }`. `bar` (`{ valueField, maxField?,
+		 * overVariant? }`) draws a thin track under each row: filled to
+		 * `valueField` against `maxField` (drawn in the error colour past it
+		 * with `overVariant: "error"`), or without `maxField` against the
+		 * largest row. `endpointSource` (`{ url, method?,
 		 * params?, responsePath? }`) reads the rows from an app endpoint instead
 		 * of `register` / `schema`. `valueLabels` maps a field's stored values to the labels
 		 * the templates show.
@@ -402,6 +420,7 @@ export default {
 		/** @return {Array<object>} The rows ready to draw. */
 		items() {
 			const c = this.content || {}
+			const barScale = this.barScale
 			return this.rows.slice(0, this.limit).map((row, index) => {
 				const link = this.rowLink(row)
 				return {
@@ -420,10 +439,26 @@ export default {
 					badges: this.badgesOf(row),
 					due: this.dueOf(row),
 					icon: this.iconOf(row),
+					bar: this.barOf(row, barScale),
 				}
 			})
 		},
 
+		/**
+		 * The largest `bar.valueField` over the rows shown, the scale of a
+		 * `bar` without `maxField`. 0 without a `bar`.
+		 *
+		 * @return {number} The largest value.
+		 * @spec openspec/changes/record-list-row-bar/specs/record-list-row-bar/spec.md#requirement-a-record-list-row-can-carry-a-bar
+		 */
+		barScale() {
+			const field = this.content?.bar?.valueField
+			if (!field) {
+				return 0
+			}
+			return Math.max(0, ...this.rows.slice(0, this.limit).map((row) => Number(readPath(row, field)) || 0))
+		},
+
 		/** @return {object|null} The header link with `{total}` filled and tokens resolved. */
 		headerLink() {
 			const link = this.content?.headerLink
@@ -518,6 +553,32 @@ export default {
 			return typeof this.cnTranslate === 'function' ? this.cnTranslate(text) : text
 		},
 
+		/**
+		 * A row's `bar`: its value, the maximum it is measured against (the
+		 * row's `maxField`, else the largest row), the filled share and
+		 * whether it is over that maximum. Null without `bar` or a value.
+		 *
+		 * @param {object} row The row.
+		 * @param {number} scale The largest value over the rows shown.
+		 * @return {{value: number, max: number, share: number, over: boolean}|null} The bar.
+		 * @spec openspec/changes/record-list-row-bar/specs/record-list-row-bar/spec.md#requirement-a-record-list-row-can-carry-a-bar
+		 */
+		barOf(row, scale) {
+			const bar = this.content?.bar
+			if (!bar || typeof bar !== 'object' || !bar.valueField) {
+				return null
+			}
+			const value = Number(readPath(row, bar.valueField))
+			if (!Number.isFinite(value)) {
+				return null
+			}
+			const ownMax = bar.maxField ? Number(readPath(row, bar.maxField)) : NaN
+			const max = bar.maxField ? (Number.isFinite(ownMax) && ownMax > 0 ? ownMax : 0) : scale
+			const share = max > 0 ? Math.min(100, Math.max(0, (value / max) * 100)) : 0
+			const over = Boolean(bar.maxField) && bar.overVariant === 'error' && max > 0 && value > max
+			return { value, max, share, over }
+		},
+
 		/**
 		 * The initials of the row's avatar (`avatar`: a name template such as
 		 * `"{client.name}"`, or `{ text }`), or '' without one.
@@ -727,9 +788,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.
@@ -1075,6 +1136,25 @@ export default {
 	border-top: 1px solid var(--color-border);
 }
 
+.cn-record-list__bar {
+	background: var(--color-border);
+	border-radius: 3px;
+	display: block;
+	height: 6px;
+	margin: -6px 0 12px;
+	overflow: hidden;
+}
+
+.cn-record-list__bar-fill {
+	background: var(--color-primary-element);
+	display: block;
+	height: 100%;
+}
+
+.cn-record-list__bar--over .cn-record-list__bar-fill {
+	background: var(--color-error);
+}
+
 .cn-record-list__row {
 	align-items: center;
 	color: var(--color-main-text);

package/src/components/CnRegisterMapping/CnRegisterMapping.md

@@ -115,6 +115,14 @@ export default {
 
 With more than one group each group starts closed: its heading is a button that shows the group name and how many of its types are configured ("2/8 configured"), and opens the register select and type list on a click or Enter. A page with several registers is a short card until the administrator opens the group they need.
 
+## Board look
+
+In the board look (`look="board"`, or the `cnLook` that `CnAppRoot` or `CnAdminSettingsShell` provides) one group is open: its name, a status chip, the register select and a type/schema table with a check icon on each configured type. It lists `boardRowLimit` types and counts the rest in a line with a button that lists them all. The other groups are rows with their type count and a status chip; activating a row opens that group. The save button closes the section instead of sitting in its header.
+
+## Loading
+
+The register select lists every register without its schemas. Only the registers the configuration maps have their schemas fetched (`registers/{id}/schemas`), and a register chosen in the select is fetched when chosen.
+
 ## Additional props
 
 | Prop | Type | Default | Description |
@@ -127,5 +135,7 @@ With more than one group each group starts closed: its heading is a button that
 | `saveButtonText` | String | `'Save configuration'` | Label for the save button |
 | `reimportButtonText` | String | `'Re-import configuration'` | Label for the reimport button |
 | `collapseGroups` | Boolean | `null` | Draw each group as a heading button that opens and closes it, with its configured count shown while closed; the groups start closed. `null` does this when there is more than one group, `true` or `false` forces it |
+| `look` | String | `''` | `board` or `nextcloud`; empty follows the provided `cnLook` |
+| `boardRowLimit` | Number | `4` | Board look: how many types the open group lists before the "show all" line; `0` lists every type |
 | `autoMatch` | Boolean | `true` | Automatically match schema titles to type slugs when a register is selected |
 | `labels` | Object | *(see below)* | UI label overrides for all user-visible strings (register, schema, notConfigured, noSchemas, selectRegister, selectSchema, allConfigured, partiallyConfigured) |