@conduction/nextcloud-vue 2.148.0 → 2.150.0

package/l10n/en.json

@@ -2398,7 +2398,8 @@
     "Until {date}": "Until {date}",
     "More actions for {name}": "More actions for {name}",
     "Unlink contact": "Unlink contact",
-    "{term}, extendable by {extension}": "{term}, extendable by {extension}"
+    "{term}, extendable by {extension}": "{term}, extendable by {extension}",
+    "Move {item}, use the arrow keys": "Move {item}, use the arrow keys"
   },
   "plurals": {
     "{count} member": [

package/l10n/nl.json

@@ -2653,7 +2653,8 @@
     "Until {date}": "Tot {date}",
     "More actions for {name}": "Meer acties voor {name}",
     "Unlink contact": "Contact ontkoppelen",
-    "{term}, extendable by {extension}": "{term}, te verdagen met {extension}"
+    "{term}, extendable by {extension}": "{term}, te verdagen met {extension}",
+    "Move {item}, use the arrow keys": "{item} verplaatsen, gebruik de pijltjestoetsen"
   },
   "plurals": {
     "{count} member": [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@conduction/nextcloud-vue",
-  "version": "2.148.0",
+  "version": "2.150.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/CnAuditTrailCard/CnAuditTrailCard.vue

@@ -184,6 +184,14 @@ export default {
 		 * @spec openspec/changes/audit-trail-exclude-actions/specs/audit-trail/spec.md#requirement-a-history-card-can-leave-out-events-by-action
 		 */
 		excludeActions: { type: Array, default: () => [] },
+		/**
+		 * Actors the card leaves out by user id (case-insensitive), such as
+		 * `['System']` for a history of what people did: the bookkeeping a
+		 * background job writes is not shown.
+		 *
+		 * @spec openspec/changes/audit-card-exclude-actors/specs/audit-trail/spec.md#requirement-a-history-card-can-leave-out-entries-by-actor
+		 */
+		excludeActors: { type: Array, default: () => [] },
 		/** Whether the card collapses. */
 		collapsible: { type: Boolean, default: false },
 		/** Override the card title (defaults to the translated label). */
@@ -199,7 +207,8 @@ export default {
 		/**
 		 * What happened, in words, by action (`claim`) or by action and the
 		 * state it led to (`complete:completed`, tried first). `{actor}`,
-		 * `{state}` and `{changed.<key>}` (a value the entry recorded, in the
+		 * `{state}` and `{changed.<key>}` (a value the entry recorded, a dotted key
+		 * reading into it such as `{changed.data.fileName}`, in the
 		 * words of `valueLabels`) are filled in; a label that names the actor leaves it off
 		 * the line under it. An action without a label shows as written.
 		 *
@@ -262,10 +271,17 @@ export default {
 		/** @return {Array<object>} The entries without the excluded actions. */
 		shownEntries() {
 			const excluded = this.excludeActions.map((action) => String(action).toLowerCase())
-			if (excluded.length === 0) {
+			const actors = this.excludeActors.map((actor) => String(actor).toLowerCase())
+			if (excluded.length === 0 && actors.length === 0) {
 				return this.entries
 			}
-			return this.entries.filter((entry) => !excluded.includes(String(entry.action || entry.event || '').toLowerCase()))
+			return this.entries.filter((entry) => !excluded.includes(String(entry.action || entry.event || '').toLowerCase())
+				&& !actors.includes(String(entry.user || '').toLowerCase()))
+		},
+
+		/** @return {boolean} Whether the card leaves entries out, and so reads more than it shows. */
+		filtersEntries() {
+			return this.excludeActions.length > 0 || this.excludeActors.length > 0
 		},
 
 		displayedEntries() {
@@ -301,7 +317,7 @@ export default {
 			if (this.sourceUrl !== null) {
 				return this.sourceUrl
 			}
-			const limit = this.excludeActions.length > 0 ? Math.min(100, this.maxDisplay * 10) : this.maxDisplay
+			const limit = this.filtersEntries ? Math.min(100, this.maxDisplay * 10) : this.maxDisplay
 			const params = new URLSearchParams({ limit: String(limit) })
 			if (this.scope === 'app') {
 				if (this.register) {
@@ -381,7 +397,7 @@ export default {
 			if (this.scope !== 'object' || this.sourceUrl !== null || !this.objectId || !Array.isArray(this.relatedSources)) {
 				return []
 			}
-			const limit = this.excludeActions.length > 0 ? Math.min(100, this.maxDisplay * 10) : this.maxDisplay
+			const limit = this.filtersEntries ? Math.min(100, this.maxDisplay * 10) : this.maxDisplay
 			const read = async (url) => {
 				const response = await fetch(prefixUrl(url), { headers: buildHeaders() })
 				if (!response.ok) {
@@ -423,7 +439,7 @@ export default {
 				return label
 					.replace('{actor}', this.actorName(entry))
 					.replace('{state}', entry.stateAfter || '')
-					.replace(/\{changed\.([\w-]+)\}/g, (match, key) => this.changedValue(entry, key))
+					.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)
@@ -444,7 +460,8 @@ export default {
 		 */
 		changedValue(entry, key) {
 			const changed = entry && typeof entry.changed === 'object' && entry.changed !== null ? entry.changed : {}
-			const value = newValueOf(changed[key])
+			// A dotted key reads into what the entry recorded (`data.fileName` on a file action).
+			const value = String(key).split('.').reduce((at, part) => newValueOf(at !== null && typeof at === 'object' ? at[part] : undefined), changed)
 			if (value === null || value === undefined || typeof value === 'object') {
 				return ''
 			}

package/src/components/CnAuditTrailWidget/CnAuditTrailWidget.vue

@@ -18,6 +18,7 @@
 			:maxDisplay="resolvedMaxDisplay"
 			:layout="content && typeof content.layout === 'string' ? content.layout : ''"
 			:excludeActions="resolvedExcludeActions"
+			:excludeActors="resolvedExcludeActors"
 			:actionLabels="actionLabels"
 			:valueLabels="valueLabels"
 			:changeLabels="changeLabels"
@@ -105,7 +106,7 @@ export default {
 		excludeActions: { type: Array, default: () => [] },
 		/** Stored widget content blob (CnDashboardPage registry branch): `{ title, maxDisplay, register?, schema?, objectId?, source?, endpoint?, emptyText?, excludeActions?, actionLabels?, footnote? }`. */
 		/** Stored widget content blob (CnDashboardPage registry branch): `{ title, maxDisplay, register?, schema?, objectId?, source?, endpoint?, emptyText?, excludeActions?, actionLabels?, valueLabels? }`. */
-		/** Stored widget content blob (CnDashboardPage registry branch): `{ title, maxDisplay, register?, schema?, objectId?, source?, endpoint?, emptyText?, excludeActions?, actionLabels?, valueLabels?, relatedSources? }`. */
+		/** Stored widget content blob (CnDashboardPage registry branch): `{ title, maxDisplay, register?, schema?, objectId?, source?, endpoint?, emptyText?, excludeActions?, actionLabels?, valueLabels?, relatedSources?, excludeActors? }`. */
 		content: { type: Object, default: () => ({}) },
 	},
 
@@ -279,6 +280,17 @@ export default {
 			return Array.isArray(fromContent) ? fromContent.filter((action) => typeof action === 'string' && action !== '') : []
 		},
 
+		/**
+		 * The actors to leave out, from `content.excludeActors`.
+		 *
+		 * @spec openspec/changes/audit-card-exclude-actors/specs/audit-trail/spec.md#requirement-a-history-card-can-leave-out-entries-by-actor
+		 * @return {Array<string>}
+		 */
+		resolvedExcludeActors() {
+			const fromContent = this.content.excludeActors
+			return Array.isArray(fromContent) ? fromContent.filter((actor) => typeof actor === 'string' && actor !== '') : []
+		},
+
 		resolvedTitle() {
 			return this.title || this.content.title || ''
 		},

package/src/components/CnChartWidget/CnChartWidget.md

@@ -109,7 +109,7 @@ Fallback slot — shown when ApexCharts is not available:
 | `barMax` | Number | `null` | `bar-list`: the value a full track stands for (100 for percentages); null takes the largest value |
 | `matrixLabelWidth` | Number | `null` | `matrix`: the row-label column's width in px; a long label wraps (DqProcesanalyse "Dagen per fase": 240). Null sizes the column to its longest label, at least 120px |
 | `footnote` | String | `''` | A line under the chart, through the host's translate: under the rows of a `bar-list` or `matrix`, under the plot of a `line`, `area` or `bar` chart |
-| `notice` | Object | `null` | A toned note card under the chart: `{ lead?, text?, values?, labels?, tone? }`. `{name}` in `lead` (bold) and `text` is filled from `values[name]`, a literal or a record token (`@object.<field>`); `labels[name]` (`"rows"`, `"columns"`, `"values"` or a map) turns a key into words. `tone`: info, success, warning, error. Hidden while a value is missing |
+| `notice` | Object | `null` | A toned note card under the chart: `{ lead?, text?, values?, labels?, tone? }`. `{name}` in `lead` (bold) and `text` is filled from `values[name]`, a literal, a record token (`@object.<field>`) or a field of the record a `cellSource` with `cellsPath` read its cells from (`@source.<field>`, such as the matrix's name); `labels[name]` (`"rows"`, `"columns"`, `"values"` or a map) turns a key into words. `tone`: info, success, warning, error. Hidden while a value is missing |
 | `referenceLines` | Array | `[]` | Dashed horizontal reference lines on the value axis of a line, area or bar chart, such as a norm: `[{ value, label?, color? }]`. The label goes through the host's translate; the colour defaults to the theme's error colour (board DqDoorlooptijd). `valuePath` reads the value from the endpoint answer instead, `{value}` in the label writes it, and a line without a value is not drawn. |
 | `categoryFormat` | String | `''` | How date categories read on the x-axis: `month` ("jan") or `month-year` ("jan 2026"), in the user's language, or `week` for ISO week keys ("2026-W40" as "w40"). Categories that are not dates are left as is; a bare year key stays a year. |
 | `emptyCellLabel` | String | `''` | `matrix`: the text of a cell without a value ("geen"), through the host's translate. Empty leaves the cell blank |

package/src/components/CnChartWidget/CnChartWidget.vue

@@ -1020,6 +1020,9 @@ export default {
 			aggregateData: null,
 			// The `cellSource` matrix, laid out (`{ series, categories, columnKeys }`), or null.
 			cellData: null,
+			// The record a `cellSource` with `cellsPath` read its cells from, for
+			// `@source.<field>` in the notice.
+			cellRecord: null,
 			// Active `views[]` switcher key (null = the first view). Local
 			// UI state only — never persisted.
 			activeViewKey: null,
@@ -1664,6 +1667,14 @@ export default {
 			}
 			const declared = def.values && typeof def.values === 'object' ? def.values : {}
 			const resolved = resolveFilterTokens(declared, this.chartTokenCtx())
+			// `@source.<field>`: a field of the record the matrix read its cells
+			// from (the matrix's name and version on an enforcement advice).
+			for (const [name, token] of Object.entries(declared)) {
+				if (typeof token === 'string' && token.startsWith('@source.')) {
+					const value = token.slice('@source.'.length).split('.').reduce((at, key) => (at && typeof at === 'object' ? at[key] : undefined), this.cellRecord)
+					resolved[name] = value === undefined ? null : value
+				}
+			}
 			const source = this.cellSource && typeof this.cellSource === 'object' ? this.cellSource : {}
 			const maps = { rows: source.rowLabels, columns: source.columnLabels, values: source.valueLabels }
 			const words = {}
@@ -2392,6 +2403,7 @@ export default {
 			if (this._cellRequest !== key) {
 				return
 			}
+			this.cellRecord = this.cellSource.cellsPath ? (records[0] || null) : null
 			if (this.cellSource.cellsPath) {
 				const { cells, config } = cellsFromRecord(records[0] || null, this.cellSource, cellFilter)
 				this.cellData = pivotCells(cells, config)

package/src/components/CnChecklistRunWidget/CnChecklistRunWidget.vue

@@ -94,7 +94,7 @@
 					:required="question.required"
 					data-testid="cn-checklist-run-text"
 					@input="markDirty(question.id)" />
-				<label v-if="allowNote" class="cn-checklist-run__note-label">
+				<label v-if="allowNote && noteShown(question)" class="cn-checklist-run__note-label">
 					{{ noteLabel }}
 					<textarea
 						v-model="draft[question.id].note"
@@ -288,6 +288,11 @@ function idOf(object) {
  * with no bound record, `record: { register, schema, filter, sort }` picks
  * the open record: the first match, under the reader's rights.
  *
+ * `noteWhen: { answers: [...] }` shows a question's note field only once its
+ * answer is one of those stored values (the board shows a note under "Nee"),
+ * or when the question already holds a note; without it every question shows
+ * one (`allowNote: false` hides them all).
+ *
  * `startAt: "firstOpen"` opens a run that was started earlier at the page of
  * its first unanswered question (the last page when all are answered), once
  * per record; without it the run opens at the first page.
@@ -321,7 +326,7 @@ export default {
 		 * The widget config: `{ questions | questionsPath, itemsKey?,
 		 * groupLabelField?, orderField?, fields?, typeMap?, choiceValues?,
 		 * answers | answersPath, answerKey?, answerFields?, recordPhotosField?,
-		 * record?, saveAction?, finishAction?, pageSize?, allowNote?,
+		 * record?, saveAction?, finishAction?, pageSize?, allowNote?, noteWhen?,
 		 * allowPhotos?, caption?, emptyText? }`, as in the component
 		 * description and docs/components/cn-checklist-run-widget.md.
 		 *
@@ -612,6 +617,23 @@ export default {
 	},
 
 	methods: {
+		/**
+		 * Whether a question shows its note field: always, unless `noteWhen`
+		 * names the answers that ask for one and this question has none of
+		 * them and no note yet.
+		 *
+		 * @param {object} question The question.
+		 * @return {boolean}
+		 */
+		noteShown(question) {
+			const answers = this.content?.noteWhen?.answers
+			if (!Array.isArray(answers)) {
+				return true
+			}
+			const draft = this.draft[question.id] || {}
+			return (draft.note || '') !== '' || answers.map(String).includes(String(draft.value ?? ''))
+		},
+
 		/**
 		 * The host's translate, or the text unchanged.
 		 *
@@ -1194,6 +1216,11 @@ export default {
 	padding: 12px 14px;
 }
 
+.cn-checklist-run__photos-title {
+	font-size: 15px;
+	line-height: 1.2;
+}
+
 .cn-checklist-run__legend {
 	font-size: 15px;
 	font-weight: 600;

package/src/components/CnDataTable/CnDataTable.vue

@@ -639,6 +639,8 @@ 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.
 		 *
+		 * `emptyValueBy` (`{ field, values }`) names what an empty cell holds by
+		 * another field of the row, translated; it goes before `emptyValue`.
 		 * `emptyValue` is what a row without a value holds in that column, so a
 		 * `badge` column draws a pill on every row.
 		 *
@@ -2238,13 +2240,44 @@ export default {
 				return v
 			}
 			const value = this.getCellValue(row, this.columnValueField(col))
+			const empty = value === null || value === undefined || value === ''
+			// `emptyValueBy`: what an empty cell means depends on another field
+			// of the row (a retention period left empty on a result that is
+			// kept reads "Permanent", on one that is destroyed it stays empty).
+			if (empty && col && col.emptyValueBy && typeof col.emptyValueBy === 'object') {
+				const words = this.emptyValueFor(row, col.emptyValueBy)
+				if (words !== '') {
+					return words
+				}
+			}
 			// `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')) {
+			if (empty && col && Object.hasOwn(col, 'emptyValue')) {
 				return col.emptyValue
 			}
 			return value
 		},
 
+		/**
+		 * The words an empty cell shows, picked by another field of the row:
+		 * `{ field, values: { <that field's value>: <words> } }`, translated.
+		 *
+		 * @param {object} row The row data.
+		 * @param {{field: string, values: object}} spec The column's `emptyValueBy`.
+		 * @return {string} The words, '' when the row's value has none.
+		 */
+		emptyValueFor(row, spec) {
+			const key = this.getCellValue(row, spec.field)
+			const values = spec.values && typeof spec.values === 'object' ? spec.values : {}
+			if (key === null || key === undefined || !Object.hasOwn(values, String(key))) {
+				return ''
+			}
+			const words = values[String(key)]
+			if (typeof words !== 'string' || words === '') {
+				return ''
+			}
+			return typeof this.cnTranslate === 'function' ? this.cnTranslate(words) : words
+		},
+
 		/**
 		 * Whether an aggregate cell shows its `zeroLabel` as muted text instead
 		 * of through the column's widget (`aggregate.zeroAs: "text"`): a count

package/src/components/CnDetailWidgetHost/CnDetailWidgetHeaderItems.vue

@@ -86,9 +86,14 @@ export default {
 	font-size: 13px;
 	font-weight: 700;
 	gap: 6px;
-	margin: 0;
 	min-height: 32px;
 	padding: 0 14px;
 	white-space: nowrap;
 }
+
+/* server.css gives every button `margin: 3px 3px 3px 0` at (0,2,1); the
+   doubled class outranks it. */
+.cn-detail-page__catalog-action.cn-detail-page__catalog-action {
+	margin: 0;
+}
 </style>

package/src/components/CnDeviceFramesWidget/CnDeviceFramesWidget.vue

@@ -339,6 +339,7 @@ export default {
 	margin: 0;
 	font-size: 20px;
 	font-weight: 700;
+	line-height: 1.2;
 }
 
 .cn-device-frames-widget__body {

package/src/components/CnDuplicateWarning/CnDuplicateWarning.vue

@@ -5,11 +5,12 @@
 <template>
 	<CnDialog
 		:name="text(title) || t('nextcloud-vue', 'This may already exist')"
+		:eyebrow="text(eyebrow)"
 		width="form"
 		data-testid="cn-duplicate-warning"
 		@closing="close">
 		<div class="cn-duplicate-warning">
-			<NcNoteCard :type="affordances.blocked ? 'error' : 'warning'" data-testid="cn-duplicate-warning-note">
+			<NcNoteCard :type="affordances.blocked && !affordances.mayContinue ? 'error' : 'warning'" data-testid="cn-duplicate-warning-note">
 				{{ headlineText }}
 			</NcNoteCard>
 
@@ -21,13 +22,14 @@
 					<a v-if="row.href" :href="row.href" class="cn-duplicate-warning__title">{{ row.title }}</a>
 					<span v-else class="cn-duplicate-warning__title">{{ row.title }}</span>
 					<span v-if="row.meta" class="cn-duplicate-warning__meta">{{ row.meta }}</span>
-					<span class="cn-duplicate-warning__meta">{{ row.matchedOn }} ({{ row.percentage }}%)</span>
+					<span class="cn-duplicate-warning__meta">{{ row.matched }}</span>
 				</li>
 			</ul>
 
 			<NcTextField v-if="affordances.needsReason"
 				:label="text(reasonLabel) || t('nextcloud-vue', 'Why file it anyway')"
 				:modelValue="reason"
+				:helperText="text(reasonHint)"
 				data-testid="cn-duplicate-warning-reason"
 				@update:modelValue="reason = $event" />
 
@@ -36,6 +38,12 @@
 				data-testid="cn-duplicate-warning-blocked">
 				{{ text(blockedText) || t('nextcloud-vue', 'This cannot be filed twice. Open the one it matches, or ask a coordinator.') }}
 			</p>
+
+			<p v-if="footnote"
+				class="cn-duplicate-warning__hint"
+				data-testid="cn-duplicate-warning-footnote">
+				{{ text(footnote) }}
+			</p>
 		</div>
 
 		<template #actions>
@@ -58,7 +66,7 @@ import { translatePlural as n, translate as t } from '@nextcloud/l10n'
 import { generateUrl } from '@nextcloud/router'
 import { NcButton, NcNoteCard, NcTextField } from '@nextcloud/vue'
 import { duplicateAffordances } from '../../utils/duplicateWarning.js'
-import { fillTemplate } from '../../utils/fillTemplate.js'
+import { fillTemplate, firstFilled } from '../../utils/fillTemplate.js'
 import { CnDialog } from '../CnDialog/index.js'
 
 /**
@@ -134,12 +142,46 @@ export default {
 			default: '{title}',
 		},
 
-		/** A record's meta line, a template filled from it. */
+		/**
+		 * A record's meta line, a template filled from it, or several: the
+		 * first that fills is shown ("{identifier} · {caseType.title}", then
+		 * "{identifier}" for a record that lacks the type).
+		 *
+		 * @type {string|Array<string>}
+		 */
 		rowMeta: {
-			type: String,
+			type: [String, Array],
 			default: '{identifier}',
 		},
 
+		/**
+		 * What a match was found on, `{fields}` (joined as a list: "Aanvrager
+		 * en Onderwerp") and `{percentage}` filled, through the host
+		 * translate. Empty: "Aanvrager, Onderwerp (82%)".
+		 */
+		matchedText: {
+			type: String,
+			default: '',
+		},
+
+		/** A line above the title, as the board dialogs draw one. */
+		eyebrow: {
+			type: String,
+			default: '',
+		},
+
+		/** The help line under the reason field. */
+		reasonHint: {
+			type: String,
+			default: '',
+		},
+
+		/** A muted note under the matches and the reason, for what Cancel and a block mean. */
+		footnote: {
+			type: String,
+			default: '',
+		},
+
 		/** A record's page, a template with `{uuid}`; empty draws no link. */
 		recordUrl: {
 			type: String,
@@ -233,15 +275,14 @@ export default {
 				const record = this.records.find((row) => String((row && (row.id || row.uuid || (row['@self'] && row['@self'].id))) || '') === uuid)
 				const fields = Array.isArray(match && match.matchedOn) ? match.matchedOn : []
 				const score = Number(match && match.score)
+				const words = fields.map((field) => (this.fieldLabels[field] ? this.cnTranslate(this.fieldLabels[field]) : field))
+				const percentage = Number.isFinite(score) ? Math.max(0, Math.min(100, Math.round(score * 100))) : 0
 				return {
 					uuid,
 					title: record ? (fillTemplate(this.rowTitle, record).trim() || uuid) : t('nextcloud-vue', 'A record you may not open'),
-					meta: record ? fillTemplate(this.rowMeta, record).trim() : '',
+					meta: record ? firstFilled(this.rowMeta, record, (key) => key).trim() : '',
 					href: record && this.recordUrl ? generateUrl(fillTemplate(this.recordUrl, { uuid: encodeURIComponent(uuid) })) : '',
-					matchedOn: fields.length
-						? fields.map((field) => (this.fieldLabels[field] ? this.cnTranslate(this.fieldLabels[field]) : field)).join(', ')
-						: t('nextcloud-vue', 'Matched on the score, not on a single field'),
-					percentage: Number.isFinite(score) ? Math.max(0, Math.min(100, Math.round(score * 100))) : 0,
+					matched: this.matchedLine(words, percentage),
 				}
 			})
 		},
@@ -260,6 +301,29 @@ export default {
 			return value ? this.cnTranslate(value) : ''
 		},
 
+		/**
+		 * What a match was found on, and how strongly.
+		 *
+		 * @param {Array<string>} words The matched fields, in the host's words.
+		 * @param {number} percentage The score as a percentage.
+		 * @return {string}
+		 */
+		matchedLine(words, percentage) {
+			if (words.length === 0) {
+				return `${t('nextcloud-vue', 'Matched on the score, not on a single field')} (${percentage}%)`
+			}
+			if (!this.matchedText) {
+				return `${words.join(', ')} (${percentage}%)`
+			}
+			let fields = words.join(', ')
+			try {
+				fields = new Intl.ListFormat(document.documentElement.lang || undefined, { type: 'conjunction' }).format(words)
+			} catch {
+				// An engine without Intl.ListFormat keeps the comma list.
+			}
+			return fillTemplate(this.cnTranslate(this.matchedText), { fields, percentage: String(percentage) })
+		},
+
 		/** File it over the warning, carrying the reason and what it was filed over. */
 		fileAnyway() {
 			if (!this.canFile) {

package/src/components/CnFactsWidget/CnFactsWidget.vue

@@ -227,6 +227,9 @@
 			<CnIcon v-if="link.icon" :name="link.icon" :size="18" />
 			{{ link.label }}
 		</component>
+		<p v-if="link && link.note && record" class="cn-facts-widget__link-note" data-testid="cn-facts-link-note">
+			{{ link.note }}
+		</p>
 		<button
 			v-if="action && record"
 			type="button"
@@ -867,18 +870,19 @@ export default {
 			if (!link || typeof link !== 'object' || !link.label) {
 				return null
 			}
+			const linkView = this.linkWords(link)
 			if (typeof link.sidebarTab === 'string' && link.sidebarTab !== '') {
 				return this.objectSidebarState
-					? { label: this.tr(link.label), sidebarTab: link.sidebarTab, icon: typeof link.icon === 'string' ? link.icon : '' }
+					? { ...linkView, sidebarTab: link.sidebarTab, icon: typeof link.icon === 'string' ? link.icon : '' }
 					: null
 			}
 			if (link.route) {
 				const to = this.resolveRoute(link.route, this.record)
-				return to ? { label: this.tr(link.label), to } : null
+				return to ? { ...linkView, to } : null
 			}
 			if (typeof link.href === 'string' && link.href !== '') {
 				const href = this.linkHref(link, this.record)
-				return href ? { label: this.tr(link.label), href, target: link.target === '_blank' ? '_blank' : '', icon: typeof link.icon === 'string' ? link.icon : '' } : null
+				return href ? { ...linkView, href, target: link.target === '_blank' ? '_blank' : '', icon: typeof link.icon === 'string' ? link.icon : '' } : null
 			}
 			return null
 		},
@@ -1017,6 +1021,23 @@ export default {
 	},
 
 	methods: {
+		/**
+		 * A link's label and the muted note under it, their `{path}` and
+		 * `{path:format}` placeholders filled from the record ("{page:last-segment}").
+		 *
+		 * @param {object} link The configured link.
+		 * @return {{label: string, note: string}}
+		 * @spec openspec/changes/facts-link-label-from-record/specs/facts-widget/spec.md#requirement-a-facts-link-can-take-its-words-from-the-record
+		 */
+		linkWords(link) {
+			const fill = (text) => (text.includes('{') && this.record ? this.templateValue(this.record, text) : this.tr(text))
+			const label = fill(String(link.label))
+			return {
+				label: label || this.tr(String(link.label)),
+				note: typeof link.note === 'string' && link.note !== '' ? fill(link.note) : '',
+			}
+		},
+
 		/**
 		 * Open the page's object sidebar on one of its tabs.
 		 *
@@ -1899,6 +1920,11 @@ export default {
 				return formatTermDuration(raw, typeof spec.extendBy === 'string' && record ? readPath(record, spec.extendBy) : null)
 			}
 			// The month written out, the year only outside this year: "3 oktober".
+			// One segment of a path ("Team/Page"): its first or its last.
+			if (format === 'first-segment' || format === 'last-segment') {
+				const segments = String(raw).split('/').map((part) => part.trim()).filter((part) => part !== '')
+				return (format === 'first-segment' ? segments[0] : segments[segments.length - 1]) || ''
+			}
 			if (format === 'longdate') {
 				return formatLongDate(raw)
 			}
@@ -2315,6 +2341,12 @@ export default {
 	text-decoration: underline;
 }
 
+.cn-facts-widget__link-note {
+	margin: 0;
+	color: var(--color-text-maxcontrast);
+	font-size: 13px;
+}
+
 .cn-facts-widget__link--button {
 	display: inline-flex;
 	align-items: center;