@conduction/nextcloud-vue 2.103.0 → 2.104.0

package/dist/nextcloud-vue.cjs.js.map

@@ -1,4 +1,4 @@
 [diffend] Oversized file quarantined before diffing.
 name: package/dist/nextcloud-vue.cjs.js.map
-size: 42801328 bytes
-sha256: b97548f4dd530870f0f1ef59e594b2fba39a8e57342715169911133c1290cd90
+size: 42920486 bytes
+sha256: 4fb48b7d16409356887747768b7b18dc1be8cf1634acc38e4221893a49b610cc

package/dist/nextcloud-vue.css

@@ -2645,6 +2645,17 @@
 	cursor: not-allowed;
 }
 
+/* `searchPlacement: "toolbar"`: the search field on row 1 takes the room
+   before Filter and the view switch, which keep the end of the row. */
+.cn-look-board .cn-actions-bar--board > .cn-actions-bar__row--views > .cn-actions-bar__search--toolbar {
+	flex: 1 1 220px;
+	min-width: 180px;
+}
+
+.cn-look-board .cn-actions-bar--board > .cn-actions-bar__row--views > .cn-actions-bar__search--toolbar ~ .cn-actions-bar__view-controls {
+	margin-inline-start: 0;
+}
+
 /* The search field: 40px, radius 8, not a pill. */
 .cn-look-board .cn-actions-bar--board .cn-actions-bar__search {
 	flex: 1 1 260px;
@@ -3381,6 +3392,43 @@
 .cn-look-board:has(.cn-index-page) > .app-sidebar__toggle {
 	display: none;
 }
+
+/* The folder pane as a card (DqAfdelingen): 280px, a hairline border, 12px
+   corners, with each folder's count in a grey pill. */
+.cn-look-board .cn-index-page__folder-pane {
+	flex: 0 0 280px;
+	align-self: flex-start;
+	margin-inline-end: 20px;
+	padding: 14px;
+	border: 1px solid var(--cn-board-hairline);
+	border-radius: var(--cn-board-card-radius, 12px);
+	background: var(--color-main-background);
+}
+
+.cn-look-board .cn-index-page__folder-pane .cn-folder-tree__count {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	min-width: 20px;
+	height: 20px;
+	padding: 0 6px;
+	box-sizing: border-box;
+	border-radius: 10px;
+	background: var(--color-background-dark);
+	color: var(--color-main-text);
+	font-size: 12px;
+	font-weight: 600;
+}
+
+/* The selected folder's heading above the list: a 20px title over a soft line. */
+.cn-look-board .cn-index-page__scope-heading {
+	margin-bottom: 16px;
+}
+
+.cn-look-board .cn-index-page__scope-title {
+	font-size: 20px;
+	font-weight: 700;
+}
 /* ========================================
    @conduction/nextcloud-vue — Table Styles
    ======================================== */
@@ -6193,6 +6241,25 @@ a.cn-kpi-card--board * {
 	font-size: 14px;
 }
 
+/* The selected folder's heading above the list. */
+.cn-index-page__scope-heading {
+	display: flex;
+	flex-direction: column;
+	gap: 4px;
+	margin-bottom: 12px;
+}
+
+.cn-index-page__scope-title {
+	margin: 0;
+	font-size: 1.25em;
+	font-weight: 700;
+}
+
+.cn-index-page__scope-subtitle {
+	font-size: 14px;
+	color: var(--color-text-maxcontrast);
+}
+
 /* Opt-in folder navigation pane (left of the list). */
 .cn-index-page__folder-pane {
 	flex: 0 0 240px;
@@ -26771,16 +26838,16 @@ button.cn-stepper__step[data-v-776581d4] {
 }
 
 
-.cn-widget-object-table[data-v-dfdcad2a] {
+.cn-widget-object-table[data-v-d628ab02] {
 	width: 100%;
 }
-.cn-widget-object-table__footer[data-v-dfdcad2a] {
+.cn-widget-object-table__footer[data-v-d628ab02] {
 	display: flex;
 	gap: 4px;
 	padding: 4px 8px;
 	border-top: 1px solid var(--color-border);
 }
-.cn-widget-object-table__error[data-v-dfdcad2a] {
+.cn-widget-object-table__error[data-v-d628ab02] {
 	color: var(--color-text-error, var(--color-error-text));
 	font-size: 0.85em;
 	margin: 4px 8px 0;
@@ -38455,7 +38522,7 @@ to {
   color: var(--color-text-maxcontrast);
 }
 
-.cn-object-row[data-v-a4a78a68] {
+.cn-object-row[data-v-6e2b35c2] {
 	display: flex;
 	align-items: center;
 	gap: 12px;
@@ -38463,18 +38530,26 @@ to {
 	border-bottom: 1px solid var(--color-border);
 	cursor: pointer;
 }
-.cn-object-row[data-v-a4a78a68]:hover {
+.cn-object-row[data-v-6e2b35c2]:hover {
 	background-color: var(--color-background-hover);
 }
-.cn-object-row--selected[data-v-a4a78a68] {
+.cn-object-row--selected[data-v-6e2b35c2] {
 	/* Inset accent — never border-left (would shift cell content). */
 	box-shadow: inset 3px 0 0 0 var(--color-primary-element);
 	background-color: var(--color-primary-element-light);
 }
-.cn-object-row__checkbox[data-v-a4a78a68] {
+.cn-object-row__lead[data-v-6e2b35c2],
+.cn-object-row__trail[data-v-6e2b35c2] {
+	flex: 0 0 auto;
+	min-width: 0;
+}
+.cn-object-row__lead[data-v-6e2b35c2] {
+	font-weight: 600;
+}
+.cn-object-row__checkbox[data-v-6e2b35c2] {
 	flex-shrink: 0;
 }
-.cn-object-row__icon[data-v-a4a78a68] {
+.cn-object-row__icon[data-v-6e2b35c2] {
 	flex-shrink: 0;
 	display: flex;
 	align-items: center;
@@ -38483,38 +38558,38 @@ to {
 	height: 24px;
 	color: var(--color-text-maxcontrast);
 }
-.cn-object-row__image[data-v-a4a78a68] {
+.cn-object-row__image[data-v-6e2b35c2] {
 	width: 24px;
 	height: 24px;
 	object-fit: contain;
 	border-radius: var(--border-radius);
 }
-.cn-object-row__main[data-v-a4a78a68] {
+.cn-object-row__main[data-v-6e2b35c2] {
 	display: flex;
 	flex-direction: column;
 	min-width: 0;
 	flex: 1;
 }
-.cn-object-row__title[data-v-a4a78a68] {
+.cn-object-row__title[data-v-6e2b35c2] {
 	font-weight: 600;
 	overflow: hidden;
 	text-overflow: ellipsis;
 	white-space: nowrap;
 }
-.cn-object-row__subtitle[data-v-a4a78a68] {
+.cn-object-row__subtitle[data-v-6e2b35c2] {
 	font-size: 13px;
 	color: var(--color-text-maxcontrast);
 	overflow: hidden;
 	text-overflow: ellipsis;
 	white-space: nowrap;
 }
-.cn-object-row__badges[data-v-a4a78a68] {
+.cn-object-row__badges[data-v-6e2b35c2] {
 	flex-shrink: 0;
 	display: flex;
 	align-items: center;
 	gap: 6px;
 }
-.cn-object-row__actions[data-v-a4a78a68] {
+.cn-object-row__actions[data-v-6e2b35c2] {
 	flex-shrink: 0;
 	display: flex;
 	align-items: center;
@@ -46285,17 +46360,17 @@ a.cn-integration-card__title[data-v-093a874d]:hover {
 }
 
 
-.cn-user-settings-dialog__body[data-v-e537e50a] {
+.cn-user-settings-dialog__body[data-v-6d3e749e] {
 	display: flex;
 	flex-wrap: wrap;
 	gap: 0 24px;
 }
-.cn-user-settings-dialog__nav[data-v-e537e50a] {
+.cn-user-settings-dialog__nav[data-v-6d3e749e] {
 	flex: 0 0 200px;
 	width: 200px;
 	padding-top: 18px;
 }
-.cn-user-settings-dialog__nav ul[data-v-e537e50a] {
+.cn-user-settings-dialog__nav ul[data-v-6d3e749e] {
 	display: flex;
 	flex-direction: column;
 	gap: 2px;
@@ -46303,7 +46378,12 @@ a.cn-integration-card__title[data-v-093a874d]:hover {
 	padding: 0;
 	list-style: none;
 }
-.cn-user-settings-dialog__nav-link[data-v-e537e50a] {
+
+/* A navigation entry, not a link in running text: no underline, also not
+   on hover. `!important` because a theme's `a { text-decoration }` carries
+   it (thematiq), and a bare `a` with `!important` beats any class. */
+.cn-user-settings-dialog__nav-link[data-v-6d3e749e],
+.cn-user-settings-dialog__nav-link[data-v-6d3e749e]:visited {
 	display: flex;
 	align-items: center;
 	gap: 10px;
@@ -46312,22 +46392,23 @@ a.cn-integration-card__title[data-v-093a874d]:hover {
 	border-radius: var(--border-radius-element, 8px);
 	font-size: 15px;
 	color: var(--color-main-text);
-	text-decoration: none;
+	text-decoration: none !important;
 }
-.cn-user-settings-dialog__nav-link[data-v-e537e50a]:hover {
+.cn-user-settings-dialog__nav-link[data-v-6d3e749e]:hover {
 	background: var(--color-background-hover);
+	text-decoration: none !important;
 }
-.cn-user-settings-dialog__nav-link[data-v-e537e50a]:focus-visible {
+.cn-user-settings-dialog__nav-link[data-v-6d3e749e]:focus-visible {
 	outline: 2px solid var(--color-primary-element);
 	outline-offset: 2px;
 }
-.cn-user-settings-dialog__nav-link--active[data-v-e537e50a],
-.cn-user-settings-dialog__nav-link--active[data-v-e537e50a]:hover {
+.cn-user-settings-dialog__nav-link--active[data-v-6d3e749e],
+.cn-user-settings-dialog__nav-link--active[data-v-6d3e749e]:hover {
 	background: var(--color-primary-element-light);
 	color: var(--color-primary-element-light-text);
 	font-weight: 600;
 }
-.cn-user-settings-dialog__nav-icon[data-v-e537e50a] {
+.cn-user-settings-dialog__nav-icon[data-v-6d3e749e] {
 	display: inline-flex;
 	flex: none;
 	width: 18px;
@@ -46335,18 +46416,18 @@ a.cn-integration-card__title[data-v-093a874d]:hover {
 	align-items: center;
 	justify-content: center;
 }
-.cn-user-settings-dialog__sections[data-v-e537e50a] {
+.cn-user-settings-dialog__sections[data-v-6d3e749e] {
 	display: flex;
 	flex: 1 1 380px;
 	flex-direction: column;
 	min-width: 0;
 }
-.cn-user-settings-dialog__sections[data-v-e537e50a] .app-settings-section {
+.cn-user-settings-dialog__sections[data-v-6d3e749e] .app-settings-section {
 	margin: 0;
 	padding: 18px 0;
 	border-top: 1px solid var(--color-border);
 }
-.cn-user-settings-dialog__sections[data-v-e537e50a] .app-settings-section__name {
+.cn-user-settings-dialog__sections[data-v-6d3e749e] .app-settings-section__name {
 	margin: 0 0 12px;
 	font-size: 17px;
 	font-weight: 700;
@@ -46354,33 +46435,33 @@ a.cn-integration-card__title[data-v-093a874d]:hover {
 	align-items: center;
 	gap: 10px;
 }
-.cn-user-settings-dialog__note[data-v-e537e50a] {
+.cn-user-settings-dialog__note[data-v-6d3e749e] {
 	flex: 1 1 auto;
 	margin: 0;
 	font-size: 14px;
 	color: var(--color-text-maxcontrast);
 }
-.cn-user-settings-dialog__nc-links[data-v-e537e50a] {
+.cn-user-settings-dialog__nc-links[data-v-6d3e749e] {
 	margin-bottom: 2px;
 }
-.cn-user-settings-dialog__group[data-v-e537e50a] {
+.cn-user-settings-dialog__group[data-v-6d3e749e] {
 	margin: 10px 0 2px;
 	padding: 0 12px;
 	font-size: 15px;
 	font-weight: 600;
 	color: var(--color-main-text);
 }
-.cn-user-settings-dialog__group-sections[data-v-e537e50a] {
+.cn-user-settings-dialog__group-sections[data-v-6d3e749e] {
 	padding-inline-start: 12px;
 }
-.cn-user-settings-dialog__heading-icon[data-v-e537e50a] {
+.cn-user-settings-dialog__heading-icon[data-v-6d3e749e] {
 	display: inline-flex;
 	order: -1;
 	color: var(--color-text-maxcontrast);
 }
 
 /* One section at a time: the others are mounted but hidden. */
-.cn-user-settings-dialog__sections[data-v-e537e50a] .app-settings-section[hidden] {
+.cn-user-settings-dialog__sections[data-v-6d3e749e] .app-settings-section[hidden] {
 	display: none;
 }
 

package/l10n/en.json

@@ -1727,6 +1727,10 @@
     "On": "On"
   },
   "plurals": {
+    "{count} member": [
+      "{count} member",
+      "{count} members"
+    ],
     "{count} selected": [
       "{count} selected",
       "{count} selected"

package/l10n/nl.json

@@ -1940,6 +1940,10 @@
     "On": "Aan"
   },
   "plurals": {
+    "{count} member": [
+      "{count} lid",
+      "{count} leden"
+    ],
     "{count} selected": [
       "{count} geselecteerd",
       "{count} geselecteerd"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@conduction/nextcloud-vue",
-  "version": "2.103.0",
+  "version": "2.104.0",
   "description": "Shared Vue component library for Conduction Nextcloud apps — complements @nextcloud/vue with higher-level components, OpenRegister integration, and NL Design System support",
   "homepage": "https://github.com/ConductionNL/nextcloud-vue#readme",
   "bugs": {

package/src/components/CnActionsBar/CnActionsBar.md

@@ -153,6 +153,7 @@ Controlling the inline action button count — `inlineActionCount` sets how many
 | `mapLabel` | `String` | `''` | Label for the map view-toggle option (defaults to "Map"). Only shown when `showMap` |
 | `mapIcon` | `String` | `''` | MDI icon name for the map option (defaults to the built-in map-marker icon). Resolved via `CnIcon` |
 | `showSearch` | `Boolean` | `false` | Whether to show the inline search field on the left of the bar. The field takes the place of the "Showing X of Y" counter unless `showCountWithSearch` is set |
+| `searchPlacement` | `String` | `''` | Board look only: `'toolbar'` draws the search field on row 1, before Filter and the view switch, instead of at the start of row 2 |
 | `searchValue` | `String` | `''` | Current value of the inline search field (controlled) |
 | `searchPlaceholder` | `String` | `''` | Placeholder / accessible label for the inline search field |
 | `showCountWithSearch` | `Boolean` | `false` | Keep the "Showing X of Y" counter visible beside the inline search field, after the search and any `#after-search` controls. No effect without `showSearch` |

package/src/components/CnActionsBar/CnActionsBar.vue

@@ -18,6 +18,20 @@
 				@description Under the board look: saved views as chips and the Save view button, in row 1 after the quick-filter chips.
 			-->
 			<slot name="actions-end" />
+			<!-- `searchPlacement: "toolbar"`: the search field on row 1, before
+			     Filter and the view switch, instead of opening row 2. -->
+			<div v-if="showSearch && searchInToolbar"
+				class="cn-actions-bar__search cn-actions-bar__search--toolbar"
+				data-testid="cn-actions-bar-search-toolbar">
+				<Magnify :size="18" class="cn-actions-bar__search-icon" />
+				<input
+					type="search"
+					class="cn-actions-bar__search-input"
+					:placeholder="searchPlaceholder || t('nextcloud-vue', 'Search…')"
+					:value="searchValue"
+					:aria-label="searchPlaceholder || t('nextcloud-vue', 'Search')"
+					@input="onSearchInput">
+			</div>
 			<!--
 				Filter and the view switch are one unit: when row 1 is full they
 				wrap together to the start of the next line (the DqZaken board),
@@ -373,7 +387,7 @@
 
 		<!-- Board look, row 2: the search field, then the active filters. -->
 		<div v-if="isBoardLayout" class="cn-actions-bar__row cn-actions-bar__row--search" data-testid="cn-actions-bar-row-search">
-			<div v-if="showSearch" class="cn-actions-bar__search">
+			<div v-if="showSearch && !searchInToolbar" class="cn-actions-bar__search">
 				<Magnify :size="18" class="cn-actions-bar__search-icon" />
 				<input
 					type="search"
@@ -383,7 +397,7 @@
 					:aria-label="searchPlaceholder || t('nextcloud-vue', 'Search')"
 					@input="onSearchInput">
 			</div>
-			<span v-else-if="showCount && hasTotal" class="cn-actions-bar__count">
+			<span v-else-if="showCount && hasTotal && !searchInToolbar" class="cn-actions-bar__count">
 				{{ countText }}
 			</span>
 			<slot name="after-search" />
@@ -943,6 +957,19 @@ export default {
 			default: false,
 		},
 
+		/**
+		 * Where the board look draws the search field: `''` (the default) at
+		 * the start of row 2, `'toolbar'` on row 1 before Filter and the view
+		 * switch (DqTeamwachtrij). No effect outside the board look.
+		 *
+		 * @type {''|'toolbar'}
+		 */
+		searchPlacement: {
+			type: String,
+			default: '',
+			validator: (v) => ['', 'toolbar'].includes(v),
+		},
+
 		/** Current value of the inline search field (controlled) */
 		searchValue: {
 			type: String,
@@ -1101,6 +1128,16 @@ export default {
 	],
 
 	computed: {
+		/**
+		 * Whether the search field sits on the board's row 1.
+		 *
+		 * @spec openspec/changes/index-search-on-toolbar/specs/index-page/spec.md#requirement-the-search-field-can-sit-on-the-toolbar-row
+		 * @return {boolean}
+		 */
+		searchInToolbar() {
+			return this.isBoardLayout && this.searchPlacement === 'toolbar'
+		},
+
 		/**
 		 * Whether the board toolbar is drawn: the `layout` prop, else the look
 		 * the app provides.

package/src/components/CnAppRoot/CnAppRoot.md

@@ -67,7 +67,7 @@ With loading state, custom components, translate, permissions, and custom page t
 |------|------|----------|---------|-------------|
 | `manifest` | Object | Yes | — | Reactive manifest object from `useAppManifest`. Provides `manifest.dependencies`, `manifest.menu`, and is propagated via provide/inject |
 | `appId` | String | Yes | — | Nextcloud app id. Forwarded to `NcContent` and `CnDependencyMissing` |
-| `appDisplayName` | String | No | `''` | Human-readable name shown in the Nextcloud top bar. When set it overrides the technical `appId` so a virtual app shows its own name (e.g. "Pet Store") instead of the host app id. |
+| `appDisplayName` | String | No | `''` | Human-readable name shown in the Nextcloud top bar. When set it overrides the technical `appId` so a virtual app shows its own name (e.g. "Pet Store") instead of the host app id. The user settings dialog, the setup wizard and the credentials section show it through the app's `translate`; without it they show the name Nextcloud's app menu gives (localised), else the id with a capital, never the bare id. The top bar's own name, which also keys the stored list-pane width (`pane-list-size-<name>`), stays untranslated so a reader's pane width survives a language switch. |
 | `persistManifestDelta` | Function | No | `null` | In-app editing (ADR-041) persistence hook, called with the minimal manifest delta on save. When Buildiq is reachable for the user, CnAppRoot provides a shared `cnManifestEditor` + `cnOpenBuildAvailable` (the inject key deliberately keeps its old spelling — see the rename note in CHANGELOG); the page action rows (`CnDashboardPage`/`CnDetailPage`/`CnIndexPage`) then render an icon-only `CnBuildiqEditButton` inline with their normal buttons, and the body grid becomes drag/resizable in edit mode. Omit to keep edits in-memory only. |
 | `dataSources` | Object \| null | No | `null` | App registers/schemas for the in-app pages editor (ADR-041). Lets the Edit-pages modal offer Register / Schema / Columns dropdowns for `index`/`detail` pages instead of free-text slug inputs, so a created page actually renders a table. Shape: `{ registers: [{ value, label, schemas: [{ value, label, columns: string[] }] }] }`. Provided to descendants as `cnDataSources`; when omitted the editor falls back to free-text register/schema fields. **A snapshot** — captured once, so it cannot show anything created after boot. Prefer `dataSourcesLoader`. |
 | `dataSourcesLoader` | Function \| null | No | `null` | Async loader for the same data, re-invoked every time a pages-editor modal opens: `async () => ({ registers: [...] })`. Because `provide()` runs once, the static `dataSources` snapshot can never change — so a register or schema created after the app booted (in another tab, the OpenRegister UI, or via the API) would never appear in the dropdowns. A loader fixes that with no page reload, and moves the fetch off the app-boot path onto the far rarer editor-open path. When both props are given, `dataSources` seeds the initial list and the loader's result replaces it on the first refresh. Provided to descendants as the `cnDataSourcesState` holder plus a `cnRefreshDataSources()` action. |

package/src/components/CnAppRoot/CnAppRoot.vue

@@ -180,7 +180,7 @@
 				<div class="cn-app-root__setup">
 					<CnSetupWizard
 						:appId="appId"
-						:appName="appDisplayName || (manifest && manifest.name) || appId"
+						:appName="shownAppName"
 						:steps="manifest.setup.steps"
 						:cancellable="false"
 						:completedStepIds="setupCompletedStepIds"
@@ -441,7 +441,7 @@
 			<div v-if="setupWizardOpen" class="cn-app-root__setup-optional">
 				<CnSetupWizard
 					:appId="appId"
-					:appName="appDisplayName || (manifest && manifest.name) || appId"
+					:appName="shownAppName"
 					:steps="manifest.setup.steps"
 					:cancellable="true"
 					:completedStepIds="setupCompletedStepIds"
@@ -580,7 +580,7 @@
 						<CnCredentials
 							scope="personal"
 							:appId="appId"
-							:appName="appDisplayName || (manifest && manifest.name) || appId"
+							:appName="shownAppName"
 							:appCredentials="(manifest && manifest.credentials) || []" />
 					</NcAppSettingsSection>
 					<!--
@@ -747,6 +747,7 @@ import {
 import { RegistryKindError } from '../../errors/RegistryKindError.js'
 import { useObjectStore } from '../../store/index.js'
 import { isAppInstalled } from '../../utils/appInstalled.js'
+import { appShownName } from '../../utils/appShownName.js'
 import { BUILT_IN_FORMATTERS } from '../../utils/builtInFormatters.js'
 import { addDiagnosticsListener, clearReportedDiagnostics, reportDiagnostic } from '../../utils/diagnostics.js'
 import { DEFAULT_FORGE, resolveForge } from '../../utils/forge.js'
@@ -3134,6 +3135,22 @@ export default {
 			return this.userSettingsTitle || this.libraryCopy('User settings')
 		},
 
+		/**
+		 * The app's name as the reader reads it: `appDisplayName` or the
+		 * manifest's `name` through the app's translate, else the name
+		 * Nextcloud's app menu shows (localised), else the id with a capital.
+		 * Used for the user settings dialog, the setup wizard and the
+		 * credentials section; never for NcContent's `appName`, which also
+		 * keys the stored list-pane width (`pane-list-size-<appName>`).
+		 *
+		 * @spec openspec/changes/app-shown-name-in-chrome/specs/app-root/spec.md#requirement-the-app-chrome-shows-the-apps-localised-name
+		 * @return {string}
+		 */
+		shownAppName() {
+			const given = this.appDisplayName || (this.manifest && this.manifest.name) || ''
+			return appShownName(this.appId, given ? this.translate(given) : '')
+		},
+
 		/**
 		 * The props of the user-settings dialog: `NcAppSettingsDialog`'s, or
 		 * under the board look CnUserSettingsDialog's (eyebrow, subtitle and
@@ -3149,7 +3166,7 @@ export default {
 			const props = {
 				open: this.userSettingsOpen,
 				title: this.resolvedUserSettingsTitle,
-				appName: this.appDisplayName || (this.manifest && this.manifest.name) || this.appId || '',
+				appName: this.shownAppName,
 			}
 			if (this.userSettingsEyebrow) {
 				props.eyebrow = this.translate(this.userSettingsEyebrow)

package/src/components/CnDataTable/CnDataTable.md

@@ -229,6 +229,7 @@ features are folded in here as opt-in props (bare-table usage is unchanged):
 - `borderless` — drop the container's card chrome so the table sits flush inside
   a parent card (e.g. a `CnWidgetWrapper` dashboard slot).
 - `limit` — show only the first N rows; with `viewAllRoute` a "View all" footer appears.
+- `pageSize` — rows per page: one page of the rows the table holds, with the board's pager under them ("4 of 7", the page buttons, Next) once there is more than one page (DqCatalogus). 0 (the default) shows every row, or the first `limit`.
 - `viewAllRoute` / `viewAllLabel` — the footer control's route and label. It renders
   as a real `<a :href>` when the router resolves the route, and as a
   `<button type="button">` (emitting `view-all`) otherwise, so it always has a

package/src/components/CnDataTable/CnDataTable.vue

@@ -389,6 +389,18 @@
 				</button>
 			</slot>
 		</div>
+		<!-- `pageSize`: the board's pager under the rows, "4 of 7" and the
+		     page buttons (DqCatalogus). -->
+		<CnPagination
+			v-if="pageSize > 0 && totalRowCount > pageSize"
+			variant="board"
+			class="cn-data-table__pager"
+			:currentPage="currentPage"
+			:totalPages="pageCount"
+			:totalItems="totalRowCount"
+			:currentPageSize="pageSize"
+			data-testid="cn-data-table-pager"
+			@pageChanged="currentPage = $event" />
 	</div>
 </template>
 
@@ -400,6 +412,7 @@ import { NcCheckboxRadioSwitch, NcLoadingIcon } from '@nextcloud/vue'
 import ChevronDown from 'vue-material-design-icons/ChevronDown.vue'
 import ChevronUp from 'vue-material-design-icons/ChevronUp.vue'
 import FilterOutline from 'vue-material-design-icons/FilterOutline.vue'
+import CnPagination from '../CnPagination/CnPagination.vue'
 import CnColumnFilterPopover from './CnColumnFilterPopover.vue'
 import { useClickDragGuard } from '../../composables/useClickDragGuard.js'
 import { normalizeLook } from '../../composables/useLook.js'
@@ -491,6 +504,7 @@ export default {
 		CnColumnFilterPopover,
 		CnIcon,
 		CnLockIndicator,
+		CnPagination,
 		CnUnreadMarker,
 		ChevronDown,
 		ChevronUp,
@@ -858,6 +872,19 @@ export default {
 			default: 0,
 		},
 
+		/**
+		 * Rows per page. Above 0 the table shows one page of its rows and the
+		 * board's pager under them ("4 of 7", page buttons, Next) once there is
+		 * more than one page. Pages the rows the table holds; 0 (the default)
+		 * shows them all, or the first `limit`.
+		 *
+		 * @spec openspec/changes/object-table-pager/specs/object-table/spec.md#requirement-an-object-table-can-page-its-rows
+		 */
+		pageSize: {
+			type: Number,
+			default: 0,
+		},
+
 		/**
 		 * vue-router route object for the "View all" footer link. The footer only
 		 * shows when set AND the rows are a `limit`-ed subset. Folded in from CnTableWidget.
@@ -1010,6 +1037,8 @@ export default {
 			aggregateRequestId: 0,
 			/** Rows fetched in self-fetch mode (register + schemaId). */
 			fetchedRows: [],
+			/** The page shown under `pageSize`. */
+			currentPage: 1,
 			/** Personal-lens reports (`@self.lenses`) of the latest self-fetch response. */
 			fetchedLenses: {},
 			/** True while a self-fetch request is in flight. */
@@ -1125,9 +1154,23 @@ export default {
 		 * @return {Array<object>}
 		 */
 		effectiveRows() {
+			if (this.pageSize > 0) {
+				const page = Math.min(this.currentPage, this.pageCount)
+				return this.sourceRows.slice((page - 1) * this.pageSize, page * this.pageSize)
+			}
 			return this.limit > 0 ? this.sourceRows.slice(0, this.limit) : this.sourceRows
 		},
 
+		/**
+		 * The number of pages under `pageSize` (at least 1).
+		 *
+		 * @spec openspec/changes/object-table-pager/specs/object-table/spec.md#requirement-an-object-table-can-page-its-rows
+		 * @return {number}
+		 */
+		pageCount() {
+			return this.pageSize > 0 ? Math.max(1, Math.ceil(this.sourceRows.length / this.pageSize)) : 1
+		},
+
 		/**
 		 * Total row count before the `limit` cap (drives the count badge + the
 		 * "View all" footer condition).
@@ -1339,6 +1382,12 @@ export default {
 			},
 		},
 
+		pageCount(count) {
+			if (this.currentPage > count) {
+				this.currentPage = count
+			}
+		},
+
 		effectiveColumns: {
 			handler() {
 				this.loadAggregates()

package/src/components/CnDetailPage/CnDetailPage.md

@@ -426,6 +426,7 @@ Four levels of action and the case surfaces around them. All opt in. See [the re
 | `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. |
+| `sideColumnFrom` | String | `''` | A field path, read like a `visibleWhen` field (e.g. `@context.caseType.sideCards`), whose list of ids picks the `sideColumn` entries this record shows and their order. Any other value keeps `sideColumn` as declared. |
 | `isAdmin` | Boolean \| null | `null` | Shows `adminOnly` header actions. `null` reads it from Nextcloud. |
 
 ## The record as a place