@conduction/nextcloud-vue 2.144.0 → 2.146.0

package/l10n/nl.json

@@ -1946,6 +1946,8 @@
     "Absent today": "Vandaag afwezig",
     "{message} until {time}": "{message} tot {time}",
     "Away": "Afwezig",
+    "Present": "Aanwezig",
+    "Absent until {date}": "Afwezig tot {date}",
     "Busy": "Bezet",
     "No one in the team": "Niemand in het team",
     "Also replace the criteria with the current filters": "Vervang ook de criteria door de huidige filters",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@conduction/nextcloud-vue",
-  "version": "2.144.0",
+  "version": "2.146.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/CnActionDialog/CnActionDialog.vue

@@ -145,7 +145,7 @@
 				:heading="text(config.note.title)"
 				data-testid="cn-action-dialog-note">
 				<template v-if="config.note.icon" #icon>
-					<CnIcon :name="config.note.icon" :size="20" />
+					<CnIcon class="cn-action-dialog__note-icon" :name="config.note.icon" :size="20" />
 				</template>
 				{{ text(config.note.text) }}
 			</NcNoteCard>
@@ -951,6 +951,13 @@ export default {
 
 /* A checkbox field is a tinted box with a 2px edge, its label bold and its
    hint under it (DqArchiveren). */
+/* A note's own icon stands on the heading's line, as the variant's icon
+   does (NcNoteCard centres a slotted icon on the whole note). */
+.cn-action-dialog__note-icon {
+	align-self: flex-start;
+	margin-top: 1px;
+}
+
 .cn-action-dialog__checkbox {
 	padding: 12px 14px;
 	border: 2px solid var(--color-primary-element);

package/src/components/CnAiCompanion/CnAiChatPanel.vue

@@ -1584,11 +1584,14 @@ export default {
 	border-radius: 10px;
 	background: var(--color-primary-element-light, #eaf0f7);
 	color: var(--color-primary-element-light-text, #234a78);
+	font-size: 14px;
 	line-height: 1.5;
 }
 
+/* The icon font's own align-self: center would centre it on a long note. */
 .cn-ai-chat-window__note-icon {
 	flex: none;
+	align-self: flex-start;
 	margin-top: 1px;
 }
 

package/src/components/CnAuditTrailCard/CnAuditTrailCard.vue

@@ -69,9 +69,21 @@ import CnDetailCard from '../CnDetailCard/CnDetailCard.vue'
 import { formatBoardDate, formatTimeOfDay } from '../../utils/boardDate.js'
 import { buildHeaders, prefixUrl } from '../../utils/index.js'
 import { leafSourceUrl } from '../../utils/leafSourceUrl.js'
+import { readPath } from '../../utils/readPath.js'
 import { userDisplayName } from '../../utils/userDisplayName.js'
 import { userLocale } from '../../utils/userLocale.js'
 
+/**
+ * A changed value as an entry records it: OpenRegister writes `{ old, new }`,
+ * other sources the value itself.
+ *
+ * @param {unknown} value The recorded change.
+ * @return {unknown} The value it changed to.
+ */
+function newValueOf(value) {
+	return value !== null && typeof value === 'object' && Object.hasOwn(value, 'new') ? value.new : value
+}
+
 /**
  * @param {object} entry An audit entry.
  * @return {number} When it happened, in ms; 0 when unreadable.
@@ -202,6 +214,18 @@ export default {
 		 * @type {{[key: string]: {[value: string]: string}}|null}
 		 */
 		valueLabels: { type: Object, default: null },
+		/**
+		 * What happened, in words, by the field an entry changed: rules
+		 * `[{ action?, field, to?, label }]`, the first whose `field` the entry
+		 * changed (to `to`, when given) wins over `actionLabels`. A label fills
+		 * the same tokens, plus `{object.<path>}` from `object`
+		 * ("Version {object.version} published" for `isDraft` set to false).
+		 *
+		 * @type {Array<{action?: string, field: string, to?: unknown, label: string}>}
+		 */
+		changeLabels: { type: Array, default: () => [] },
+		/** The audited record, for `{object.<path>}` in a label; null without one. */
+		object: { type: Object, default: null },
 		/**
 		 * Records beside the object whose events belong in its history:
 		 * `[{ as, register, schema, filter, limit? }]`. The card lists the
@@ -394,12 +418,16 @@ export default {
 		 * @return {string} The line.
 		 */
 		formatAction(entry) {
-			const label = this.labelFor(entry)
+			const label = this.changeLabelFor(entry) ?? this.labelFor(entry)
 			if (label !== null) {
 				return label
 					.replace('{actor}', this.actorName(entry))
 					.replace('{state}', entry.stateAfter || '')
 					.replace(/\{changed\.([\w-]+)\}/g, (match, key) => this.changedValue(entry, key))
+					.replace(/\{object\.([\w.-]+)\}/g, (match, path) => {
+						const value = this.object ? readPath(this.object, path) : undefined
+						return value === null || value === undefined || typeof value === 'object' ? '' : String(value)
+					})
 			}
 			const action = entry.action || entry.event || this.actionLabel
 			return entry.stateAfter ? `${action} (${entry.stateAfter})` : action
@@ -416,7 +444,7 @@ export default {
 		 */
 		changedValue(entry, key) {
 			const changed = entry && typeof entry.changed === 'object' && entry.changed !== null ? entry.changed : {}
-			const value = changed[key]
+			const value = newValueOf(changed[key])
 			if (value === null || value === undefined || typeof value === 'object') {
 				return ''
 			}
@@ -424,6 +452,31 @@ export default {
 			return words && typeof words[value] === 'string' ? words[value] : String(value)
 		},
 
+		/**
+		 * The `changeLabels` rule an entry matches: the first whose field the
+		 * entry changed, for its action and to its value when the rule names them.
+		 *
+		 * @param {object} entry The entry.
+		 * @return {string|null} The label, or null when no rule matches.
+		 */
+		changeLabelFor(entry) {
+			const changed = entry && typeof entry.changed === 'object' && entry.changed !== null ? entry.changed : {}
+			const action = entry.action || entry.event || ''
+			for (const rule of Array.isArray(this.changeLabels) ? this.changeLabels : []) {
+				if (!rule || typeof rule.label !== 'string' || rule.label === '' || typeof rule.field !== 'string' || !Object.hasOwn(changed, rule.field)) {
+					continue
+				}
+				if (rule.action && rule.action !== action) {
+					continue
+				}
+				if (Object.hasOwn(rule, 'to') && String(newValueOf(changed[rule.field])) !== String(rule.to)) {
+					continue
+				}
+				return rule.label
+			}
+			return null
+		},
+
 		/**
 		 * The `actionLabels` entry for an entry: by action and state first,
 		 * then by action.

package/src/components/CnAuditTrailWidget/CnAuditTrailWidget.vue

@@ -20,6 +20,8 @@
 			:excludeActions="resolvedExcludeActions"
 			:actionLabels="actionLabels"
 			:valueLabels="valueLabels"
+			:changeLabels="changeLabels"
+			:object="ctx.object || ctx.objectData || null"
 			:relatedSources="relatedSources"
 			:footnote="footnote"
 			v-bind="emptyText ? { noEntriesLabel: emptyText } : {}" />
@@ -193,6 +195,22 @@ export default {
 				.map(([key, text]) => [key, translate(text)]))
 		},
 
+		/**
+		 * `content.changeLabels`, each rule's label through the app's translate.
+		 *
+		 * @return {Array<object>}
+		 */
+		changeLabels() {
+			const rules = this.content.changeLabels
+			if (!Array.isArray(rules)) {
+				return []
+			}
+			const translate = typeof this.cnTranslate === 'function' ? this.cnTranslate : (text) => text
+			return rules
+				.filter((rule) => rule && typeof rule.label === 'string' && rule.label !== '')
+				.map((rule) => ({ ...rule, label: translate(rule.label) }))
+		},
+
 		/**
 		 * `content.footnote`, a muted line under the trail with the record's
 		 * fields filled in ("Reference {identifier}"); '' when a field is empty.

package/src/components/CnChecklistRunWidget/CnChecklistRunWidget.vue

@@ -1204,6 +1204,7 @@ export default {
 .cn-checklist-run__help {
 	color: var(--color-text-maxcontrast);
 	font-size: 14px;
+	line-height: 1.2;
 	margin: 0;
 }
 
@@ -1215,13 +1216,14 @@ export default {
 	font-size: 15px;
 	font-weight: 400;
 	gap: 10px;
-	min-height: 34px;
+	min-height: 24px;
 }
 
+/* The board draws the radio with the browser's own 3px 3px 0 5px margin. */
 .cn-checklist-run__choice input {
 	accent-color: var(--color-primary-element);
 	height: 20px;
-	margin: 0;
+	margin: 3px 3px 0 5px;
 	width: 20px;
 }
 

package/src/components/CnDataTable/CnDataTable.vue

@@ -307,6 +307,13 @@
 								     customising their own data, not opting out of being told
 								     the record is locked. It renders nothing when unlocked,
 								     so an unlocked table is byte-for-byte what it was. -->
+								<!-- A reorderable row shows where to take hold of it, before its name. -->
+								<span v-if="reorderable && colIndex === 0"
+									class="cn-table-row__handle"
+									aria-hidden="true"
+									data-testid="cn-row-reorder-handle">
+									<DragVertical :size="16" />
+								</span>
 								<CnUnreadMarker
 									v-if="colIndex === titleColumnIndex && isUnreadRow(row)" />
 								<CnLockIndicator
@@ -475,6 +482,7 @@ import { generateUrl } from '@nextcloud/router'
 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 DragVertical from 'vue-material-design-icons/DragVertical.vue'
 import FilterOutline from 'vue-material-design-icons/FilterOutline.vue'
 import CnPagination from '../CnPagination/CnPagination.vue'
 import CnColumnFilterPopover from './CnColumnFilterPopover.vue'
@@ -585,6 +593,7 @@ export default {
 		CnPagination,
 		CnUnreadMarker,
 		ChevronDown,
+		DragVertical,
 		ChevronUp,
 		FilterOutline,
 	},
@@ -630,7 +639,10 @@ export default {
 		 * `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)), secondaryLabels: object}|string>}
+		 * `emptyValue` is what a row without a value holds in that column, so a
+		 * `badge` column draws a pill on every row.
+		 *
+		 * @type {Array<{key: string, label: string, description: string, sortable: boolean, width: string, class: string, cellClass: string, link: boolean, secondary: (string|((row: object) => string)), secondaryLabels: object, emptyValue: unknown}|string>}
 		 */
 		columns: {
 			type: Array,
@@ -2225,7 +2237,12 @@ export default {
 				}
 				return v
 			}
-			return this.getCellValue(row, this.columnValueField(col))
+			const value = this.getCellValue(row, this.columnValueField(col))
+			// `emptyValue`: what a row without a value holds, so a badge column draws one for every row.
+			if ((value === null || value === undefined || value === '') && col && Object.hasOwn(col, 'emptyValue')) {
+				return col.emptyValue
+			}
+			return value
 		},
 
 		/**

package/src/components/CnDetailPage/CnDetailPage.md

@@ -181,6 +181,7 @@ export default {
 |------|------|---------|-------------|
 | `icon` | String | `''` | Optional MDI icon name rendered in the header via `CnIcon` |
 | `iconSize` | Number | `28` | Icon size in pixels |
+| `gridFloat` | Boolean | `true` | GridStack's `float` for the body grid (manifest `config.gridFloat`). False packs widgets upward, so a size-to-content widget ends at its content (DqHandhaving). |
 | `loadingLabel` | String | `'Loading...'` | Message shown below the spinner during loading |
 | `band` | Array | `[]` | A row of widgets across the whole page, above the body and the side column (manifest `config.band`). Each entry is a widget id from `widgets`, a widget definition, or `{ widgetId, span, chrome }`: `span` is the entry's share of the row in twelfths (default 12), and `chrome` is `card` or `bare` (a banner defaults to bare). Each entry follows its `visibleWhen`. |
 | `recordLastChange` | Boolean | `false` | Read who changed the record last (as `headerMetaLastChange` does) for the widgets on the page: a facts card reads it as `_lastChange.userName` / `_lastChange.created` (DqContact "Historie"). |

package/src/components/CnDetailPage/CnDetailPage.vue

@@ -911,6 +911,7 @@
 				:editable="section.editable"
 				:columns="12"
 				:columnOpts="bodyColumnOpts"
+				:float="gridFloat"
 				class="cn-detail-page__grid"
 				@layoutChange="section.view ? onViewLayoutChange($event) : onBodyLayoutChange($event)">
 				<template #widget="{ item }">
@@ -1842,6 +1843,18 @@ export default {
 			default: '',
 		},
 
+		/**
+		 * GridStack's `float` for the body grid (manifest `config.gridFloat`).
+		 * True (the default) keeps every widget on its authored row; false
+		 * packs widgets upward, so a size-to-content widget ends at its content
+		 * and the one below closes up (DqHandhaving: the violation card sits
+		 * 20px under the matrix).
+		 */
+		gridFloat: {
+			type: Boolean,
+			default: true,
+		},
+
 		/**
 		 * How tall the labelled buttons in the page's card title rows stand in
 		 * the board look: `compact` (34px, setting and case-type pages) or
@@ -5745,6 +5758,15 @@ export default {
 			},
 		},
 
+		// Header actions gate on `@context.<name>` through the object context.
+		visibilityRows() {
+			this.syncObjectContext()
+		},
+
+		visibilityRowsPending() {
+			this.syncObjectContext()
+		},
+
 		// Endpoint and source conditions on grid widgets are asked once per record.
 		remoteWidgetConditionsKey: {
 			immediate: true,
@@ -7887,6 +7909,7 @@ export default {
 				object: this.currentObject || null,
 				register: resolved.register || this.register || this.sidebarProps?.register || '',
 				schema: resolved.schema || this.schema || this.resolvedObjectType || this.sidebarProps?.schema || '',
+				context: this.visibilityRowsPending ? null : (this.visibilityRows || null),
 				setObject: (object) => this.setCurrentObject(object),
 			}
 		},

package/src/components/CnDetailWidgetHost/CnDetailWidgetHeaderItems.vue

@@ -31,6 +31,7 @@
 				v-else
 				type="button"
 				class="cn-detail-page__catalog-action"
+				:class="{ 'cn-detail-page__catalog-action--add': action.add === true }"
 				data-testid="cn-detail-widget-header-action"
 				@click="action.run()">
 				<CnIcon v-if="action.icon" :name="action.icon" :size="16" />
@@ -56,7 +57,7 @@ export default {
 	components: { CnIcon, CnStatusBadge, NcButton },
 
 	props: {
-		/** The reported header: `{ pill, note, actions: [{ label, icon?, variant?, run }] }`. */
+		/** The reported header: `{ pill, note, actions: [{ label, icon?, variant?, add?, run }] }`; `add: true` marks a list's Add. */
 		header: {
 			type: Object,
 			required: true,
@@ -85,6 +86,7 @@ export default {
 	font-size: 13px;
 	font-weight: 700;
 	gap: 6px;
+	margin: 0;
 	min-height: 32px;
 	padding: 0 14px;
 	white-space: nowrap;

package/src/components/CnFactsWidget/CnFactsWidget.vue

@@ -41,11 +41,12 @@
 				<dl
 					v-if="block.kind === 'rows'"
 					class="cn-facts-widget__rows"
-					:class="{ 'cn-facts-widget__rows--columns': twoColumns }">
+					:class="{ 'cn-facts-widget__rows--columns': twoColumns, 'cn-facts-widget__rows--stacked': stacked }">
 					<div
 						v-for="row in block.rows"
 						:key="row.key"
 						class="cn-facts-widget__row"
+						:class="{ 'cn-facts-widget__row--inline': row.inline }"
 						:data-testid="`cn-fact-${row.key}`">
 						<dt class="cn-facts-widget__label" :class="{ 'cn-facts-widget__label--icon': row.icon }">
 							<CnIcon
@@ -232,7 +233,7 @@
 import { getCurrentUser } from '@nextcloud/auth'
 import { emit, subscribe, unsubscribe } from '@nextcloud/event-bus'
 import { formatFileSize } from '@nextcloud/files'
-import { translate as t } from '@nextcloud/l10n'
+import { translatePlural as n, translate as t } from '@nextcloud/l10n'
 import { generateUrl } from '@nextcloud/router'
 import { NcLoadingIcon, NcNoteCard } from '@nextcloud/vue'
 import Check from 'vue-material-design-icons/Check.vue'
@@ -251,6 +252,7 @@ import { parseDateValue } from '../../utils/dateVariant.js'
 import { fetchListTotal } from '../../utils/fetchFilterCounts.js'
 import { fillTemplate, formatLongDate } from '../../utils/fillTemplate.js'
 import { formatMoney, metricLocale, unwrapAppConfig } from '../../utils/formatMetric.js'
+import { groupDisplayName, loadGroupDisplayName } from '../../utils/groupAutocomplete.js'
 import { readPath } from '../../utils/readPath.js'
 import { hasUnresolvedDeepTokens, resolveDeepTokens } from '../../utils/resolveFilterTokens.js'
 import { userDisplayName } from '../../utils/userDisplayName.js'
@@ -424,16 +426,17 @@ export default {
 		/**
 		 * The widget configuration.
 		 *
-		 * - `fields` — the entries, in order. Each is `{ path, label?, as?, from?, format?, map?, itemPath?, parts?, separator?, route?, variant?, variantMap?, colorMap?, icon?, copy?, reveal?, text?, title?, subtitle?, initialsPath?, tone? }`.
+		 * - `fields` — the entries, in order. Each is `{ path, label?, as?, from?, format?, map?, itemPath?, parts?, separator?, route?, variant?, variantMap?, colorMap?, icon?, copy?, reveal?, inline?, text?, title?, subtitle?, initialsPath?, tone? }`.
 		 *   `as` is `row` (default when `label` or `icon` is set), `title`, `line`, `text` (a line in the normal ink), `lead` (an icon tile or initials beside `title` and `subtitle`), `pill` or `meter`.
 		 *   `countFrom` (`{ register, schema, filter? }`, `@objectId` / `@object.<field>` in the filter) shows how many records that list holds ("Lopende zaken 43"); the row is left out while the count cannot be read.
 		 *   A `meter` shows the amount at `path` against the limit at `limitPath` (or a constant `limit`) as "12 of 50" with a bar; past the limit the bar turns red and the text says "over the limit"; without a positive limit it shows the amount and no bar.
+		 *   A row with `inline: true` spans both columns as one line, the label, the value and its buttons side by side (a masked BSN with Show).
 		 *   A row's `format` may also be `email`, `phone` or `url` (a link) or `masked` (the last four characters; `reveal: true` adds Show, which unmasks the record's value; `reveal: { url, path? }` makes Show ask the server for the value at `url` (tokens resolved), read at `path` (else the entry's path), so a server that answers the mask can check and record the reveal). `copy: true` adds a copy button; `icon` replaces the label.
 		 *   A part may be `{ text }`, a constant; a `line` or `text` entry without `path` or `parts` shows its `text`.
 		 *   `resolve: { register, schema, labelField? }` on an entry or a part turns a value that is a reference (an id, or a list of ids) into the label of the referenced object (`labelField`, else `title`, then `name`): the case type or status of a task shows its name, not its uuid. The ids are fetched once per register and schema through the object store and shared by every facts widget on the page; the entry stays empty until its label is known, and when no label can be read. A resolved value works as a pill too: `map` is applied to the resolved label, and `variantMap` / `colorMap` look the tone up by the value of `resolve.toneField` on the referenced object when that is set (a status named by its `name`, coloured by its `state`), then by the resolved label, then by the stored value.
 		 *   `route` (`{ name, params?, query? }`, `@source.<path>` in a param) on a `title` or a `row` links its value to that route; a param that does not fill leaves it plain.
 		 *   `format: 'user'` shows a Nextcloud user id as the user's display name, read once per id; the entry stays empty until the name is known.
-		 *   `template` ("{available} {unit}") fills its `{path}` placeholders from the record instead of reading `path`; it is empty when every placeholder is. `suffix` (" kg") is added to a value that is not empty.
+		 *   `template` ("{available} {unit}") fills its `{path}` placeholders from the record instead of reading `path`; it is empty when every placeholder is. `suffix` (" kg") is added to a value that is not empty, its words translated.
 		 *   `labelPath` ("@context.caseType.handlerLabel") names a value on the record or the page's `@context` records that labels the row when it holds text; `label` is the fallback.
 		 *   `emptyValue` ("No") is shown, translated, when the entry has no value, so the entry stays drawn whatever `hideEmpty` says (an override that was never set reads "No").
 		 * - `action` — an action drawn as a button under the facts; `headerAction` — one drawn in the card header (reported through the `header` event).
@@ -441,14 +444,14 @@ export default {
 		 * - `rowsPath` — a path to a list of `{ label, value }` the record holds, drawn as rows after `fields` (a preview the server builds).
 		 * - `headerPill` — a status pill in the card header (reported through the `header` event): `{ path?, text?, map?, variant?, variantMap?, colorMap? }`, read from the record like a `pill` entry (DqBezwaar "Advies ontvangen"); nothing shows while the value is empty.
 		 * - `notice` — `{ text, variant? }`, a note band inside the card under the facts (`info` by default; `success`, `warning` or `error`); the text is translated.
-		 *   `format` is `text` (default), `date` (board short date), `date-long` (always with the year), `longdate` (the month written out, the year only outside this year: "3 oktober"), `list` (an array joined by ", ", each item read at `itemPath`), `bytes` (a size, "1.5 MB"), `number` (in the reader's language, `decimals` fraction digits when set) or `currency` (a money amount in the reader's language, "€ 1.234,50": the code in `currency`, else the record's `currencyField`, else the app's reporting currency, else EUR; `decimals` defaults to 2).
+		 *   `format` is `text` (default), `date` (board short date), `date-long` (always with the year), `longdate` (the month written out, the year only outside this year: "3 oktober"), `list` (an array joined by ", ", each item read at `itemPath` and written in `itemFormat`), `group` (a Nextcloud group by its display name), `bytes` (a size, "1.5 MB"), `number` (in the reader's language, `decimals` fraction digits when set), `months` (a number of months in words, whole years as years: 240 is "20 jaar") or `currency` (a money amount in the reader's language, "€ 1.234,50": the code in `currency`, else the record's `currencyField`, else the app's reporting currency, else EUR; `decimals` defaults to 2).
 		 *   `map` turns a raw value into a label (translated). `parts` (on a `line`) lists paths, or `{ path, label?, format? }`, joined by `separator` (default " · "); empty parts are dropped.
 		 * - `source` — `{ register, schema, id }` or `{ url }`; omitted = the current object. `{ register, schema, filter, sort? }` without `id` reads the first object that matches `filter` in `sort` order (`{ field, dir }`): the latest count of a shift. An entry with `from: "object"` reads the current object even then (a client card that also shows the ticket's channel).
 		 * - `endpointSource` — `{ url, method?, params?, responsePath? }`, the block a stat or chart takes: the facts read an app endpoint, shared and cached like those.
 		 * - `emptyWhen` — a path; when the record's value there is truthy the card shows `emptyText` (an endpoint that answers `empty: true`).
 		 * - `link` — `{ label, route? | href? }` at the foot. `{ label, icon?, sidebarTab }` instead opens the page's object sidebar on that tab (no link without a sidebar).
 		 * - `hideEmpty` — drop an entry whose value is empty (default true).
-		 * - `columns` — `2` lays the rows out in two columns with the label above the value (board DqContact); a row with `parts` joins them like a line (an address on one row).
+		 * - `columns` — `2` lays the rows out in two columns with the label above the value (board DqContact); a row with `parts` joins them like a line (an address on one row). `1` stacks each label above its value in one column, for a narrow card with long labels (board DqHandhaving "Afwijking en definitief").
 		 * - `emptyText` — shown when no entry has a value.
 		 *
 		 * @type {{fields?: Array<object>, source?: object, link?: object, hideEmpty?: boolean, emptyText?: string}}
@@ -510,6 +513,15 @@ export default {
 			return Number(this.content?.columns) === 2
 		},
 
+		/**
+		 * Whether the rows stack in one column, label above value.
+		 *
+		 * @return {boolean}
+		 */
+		stacked() {
+			return Number(this.content?.columns) === 1
+		},
+
 		/**
 		 * The token context: the detail object (prop, else the injected context)
 		 * and the page workspace.
@@ -725,7 +737,7 @@ export default {
 				}
 				if (kind === 'row') {
 					const last = out[out.length - 1]
-					const row = { key, label: this.labelOf(record, field), value, ...this.rowExtras(record, field, value) }
+					const row = { key, label: this.labelOf(record, field), value, inline: field.inline === true, ...this.rowExtras(record, field, value) }
 					if (field.route && !row.href) {
 						row.to = this.resolveRoute(field.route, record)
 					}
@@ -1130,7 +1142,12 @@ export default {
 			if (value === '') {
 				return typeof field.emptyValue === 'string' && field.emptyValue !== '' ? this.tr(field.emptyValue) : ''
 			}
-			return typeof field.suffix === 'string' ? `${value}${field.suffix}` : value
+			if (typeof field.suffix !== 'string') {
+				return value
+			}
+			// The words of a suffix are translated; its leading space stays as written.
+			const lead = field.suffix.match(/^\s*/)[0]
+			return `${value}${lead}${this.tr(field.suffix.slice(lead.length))}`
 		},
 
 		/**
@@ -1798,7 +1815,7 @@ export default {
 			if (format === 'list' || Array.isArray(raw)) {
 				const items = (Array.isArray(raw) ? raw : [raw])
 					.map((item) => (spec.itemPath && item && typeof item === 'object' ? readPath(item, spec.itemPath) : item))
-					.map((item) => this.format(item, { ...spec, format: 'text' }))
+					.map((item) => this.format(item, { ...spec, format: spec.itemFormat || 'text' }))
 					.filter((item) => item !== '')
 				return items.join(', ')
 			}
@@ -1816,6 +1833,16 @@ export default {
 					? formatBoardDate(date, new Date(date.getFullYear() + 1, 0, 1))
 					: formatBoardDate(date)
 			}
+			// A number of months in words: whole years as years ("20 jaar"), else months.
+			if (format === 'months') {
+				const months = Number(raw)
+				if (typeof raw === 'object' || !Number.isInteger(months) || months < 0) {
+					return typeof raw === 'object' ? '' : String(raw)
+				}
+				return months > 0 && months % 12 === 0
+					? n('nextcloud-vue', '%n year', '%n years', months / 12)
+					: n('nextcloud-vue', '%n month', '%n months', months)
+			}
 			if (format === 'bytes') {
 				const bytes = Number(raw)
 				return Number.isFinite(bytes) && bytes >= 0 ? formatFileSize(bytes) : ''
@@ -1823,6 +1850,18 @@ export default {
 			if (format === 'user') {
 				return userDisplayName(raw)
 			}
+			// A Nextcloud group by its display name; the id until the name is known.
+			if (format === 'group') {
+				if (typeof raw === 'object') {
+					return ''
+				}
+				const name = groupDisplayName(String(raw))
+				if (name === null) {
+					loadGroupDisplayName(String(raw))
+					return String(raw)
+				}
+				return name
+			}
 			if (format === 'number') {
 				const number = Number(raw)
 				if (typeof raw === 'object' || !Number.isFinite(number)) {
@@ -1938,6 +1977,21 @@ export default {
 	display: contents;
 }
 
+.cn-facts-widget__row--inline {
+	display: flex;
+	grid-column: 1 / -1;
+	flex-wrap: wrap;
+	align-items: center;
+	gap: 10px;
+}
+
+.cn-facts-widget__row--inline .cn-facts-widget__value {
+	display: flex;
+	flex-wrap: wrap;
+	align-items: center;
+	gap: 10px;
+}
+
 /* Nextcloud core styles `dt` and `dd` (text-align end, 12px padding, a
    130px-wide `dt`), which pushed the label to the right of its column, added
    12px around both and widened the label column to 130px. The class is
@@ -2203,6 +2257,17 @@ export default {
 	font-size: 13px;
 }
 
+/* One column, label above value: 2px under its label, 10px to the next
+   label, so a long label never squeezes its value (DqHandhaving). */
+.cn-facts-widget__rows--stacked {
+	grid-template-columns: minmax(0, 1fr);
+	gap: 2px 0;
+}
+
+.cn-facts-widget__rows--stacked .cn-facts-widget__value.cn-facts-widget__value {
+	margin-bottom: 8px;
+}
+
 @media (max-width: 640px) {
 	.cn-facts-widget__rows--columns {
 		grid-template-columns: minmax(0, 1fr);

package/src/components/CnFieldListWidget/CnFieldListWidget.vue

@@ -607,7 +607,7 @@ export default {
 		/**
 		 * The card title row's actions: the add button with `add.placement: "title"`.
 		 *
-		 * @return {Array<{label: string, icon: string, run: () => void}>} The actions.
+		 * @return {Array<{label: string, icon: string, add: boolean, run: () => void}>} The actions.
 		 */
 		titleActions() {
 			if (!(this.canAdd && this.addTrigger && this.addPlacement === 'title')) {
@@ -616,7 +616,7 @@ export default {
 			const run = () => {
 				this.adding = !this.adding
 			}
-			return [{ label: this.addLabel, icon: 'Plus', run }]
+			return [{ label: this.addLabel, icon: 'Plus', add: true, run }]
 		},
 
 		addLabel() {

package/src/components/CnIndexPage/CnIndexPage.vue

@@ -8940,7 +8940,7 @@ export default {
 				// through the app's label lookup.
 				const countText = this.presentedCountText
 				// The note after the breadcrumb already says how many there are.
-				if (!countText && !this.countSubtitle && this.headerMetaCarriesCount) {
+				if (!countText && !this.countSubtitle && (this.headerMetaCarriesCount || this.showCount === false)) {
 					return this.description
 				}
 				if (!countText && !this.countSubtitle) {
@@ -9877,9 +9877,12 @@ export default {
 			}
 			const sorted = [...groups].sort((a, b) => b.count - a.count)
 			const total = sorted.reduce((sum, g) => sum + g.count, 0)
+			// Each tab asks to be counted as the list counts it (within the
+			// active filters, through the list endpoint); the grouped number,
+			// over the page filter only, stands until that count arrives.
 			this.generatedQuickFilters = [
-				{ label: from.allLabel || t('nextcloud-vue', 'All'), filter: {}, default: true, count: total },
-				...sorted.map((g) => ({ label: (labels && labels[g.key]) || g.key, filter: { [from.field]: g.key }, count: g.count })),
+				{ label: from.allLabel || t('nextcloud-vue', 'All'), filter: {}, default: true, count: total, showCount: true },
+				...sorted.map((g) => ({ label: (labels && labels[g.key]) || g.key, filter: { [from.field]: g.key }, count: g.count, showCount: true })),
 			]
 		},
 

package/src/components/CnMailTab/CnMailTab.vue

@@ -19,9 +19,11 @@
 					<h3 v-if="heading" class="cn-mail-tab__title">
 						{{ heading }}
 					</h3>
-					<p v-if="description" class="cn-mail-tab__subtitle">
+					<!-- Divs, not <p>: a theme that sizes every paragraph with !important
+					     would override the card's 14px description. -->
+					<div v-if="description" class="cn-mail-tab__subtitle">
 						{{ description }}
-					</p>
+					</div>
 				</div>
 				<div v-if="hasHeaderActions" class="cn-mail-tab__header-actions">
 					<NcButton
@@ -77,9 +79,9 @@
 					{{ t('nextcloud-vue', 'Empty draft') }}
 				</NcButton>
 			</div>
-			<p v-if="hint" class="cn-mail-tab__hint">
+			<div v-if="hint" class="cn-mail-tab__hint">
 				{{ hint }}
-			</p>
+			</div>
 
 			<NcNoteCard
 				v-if="error"

package/src/components/CnNotesCard/CnNotesCard.vue

@@ -128,6 +128,7 @@
 						</p>
 						<NcButton
 							v-if="canReply"
+							class="cn-notes-card__reply-btn"
 							variant="tertiary"
 							size="small"
 							:aria-label="replyAria(row.note)"
@@ -915,7 +916,10 @@ export default {
 	padding-right: 32px;
 }
 
-.cn-notes-card__delete-btn {
+/* The note's own class leads so the position outranks NcButton's
+   `position: relative`, which loads later at the same weight and put the
+   button in the flow under the note. */
+.cn-notes-card__note > .cn-notes-card__delete-btn {
 	position: absolute;
 	top: 8px;
 	right: -4px;
@@ -923,7 +927,8 @@ export default {
 	transition: opacity 0.15s ease;
 }
 
-.cn-notes-card__note:hover .cn-notes-card__delete-btn {
+.cn-notes-card__note:hover > .cn-notes-card__delete-btn,
+.cn-notes-card__note:focus-within > .cn-notes-card__delete-btn {
 	opacity: 1;
 }