@conduction/nextcloud-vue 2.146.0 → 2.147.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: 49975814 bytes
-sha256: 2d024f561e56d8df5234337a7f60a7e99d053d7ac0e04a827072544abd46446b
+size: 49987198 bytes
+sha256: 9703199eb7cb4720e5838084eb4a07b1b8227a90d39562c4d23a86145f532c5e

package/dist/nextcloud-vue.css

@@ -40581,17 +40581,22 @@ a.cn-flow-runs-widget__row-content:hover .cn-flow-runs-widget__name[data-v-76cc4
 }
 
 
-.cn-facts-widget[data-v-2903e476] {
+.cn-facts-widget[data-v-6351bc64] {
 	display: flex;
 	flex-direction: column;
 	gap: 10px;
 	min-width: 0;
 }
+.cn-facts-widget__pills[data-v-6351bc64] {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 8px;
+}
 
 /* `padding: 0`: Nextcloud's core stylesheet pads every `dl` 12px at the top
    and bottom, which put a side card's facts 24px under its title, against
    the board's 12 (DqZaak "Behandeling", DqZaakDocumenten). */
-.cn-facts-widget__rows[data-v-2903e476] {
+.cn-facts-widget__rows[data-v-6351bc64] {
 	display: grid;
 	grid-template-columns: max-content 1fr;
 	gap: 8px 16px;
@@ -40601,17 +40606,17 @@ a.cn-flow-runs-widget__row-content:hover .cn-flow-runs-widget__name[data-v-76cc4
 }
 
 /* Each row is a grid of its own children: the wrapper takes no box. */
-.cn-facts-widget__row[data-v-2903e476] {
+.cn-facts-widget__row[data-v-6351bc64] {
 	display: contents;
 }
-.cn-facts-widget__row--inline[data-v-2903e476] {
+.cn-facts-widget__row--inline[data-v-6351bc64] {
 	display: flex;
 	grid-column: 1 / -1;
 	flex-wrap: wrap;
 	align-items: center;
 	gap: 10px;
 }
-.cn-facts-widget__row--inline .cn-facts-widget__value[data-v-2903e476] {
+.cn-facts-widget__row--inline .cn-facts-widget__value[data-v-6351bc64] {
 	display: flex;
 	flex-wrap: wrap;
 	align-items: center;
@@ -40623,14 +40628,14 @@ a.cn-flow-runs-widget__row-content:hover .cn-flow-runs-widget__name[data-v-76cc4
    12px around both and widened the label column to 130px. The class is
    doubled so these resets outrank that rule, and a dossiq-style `:deep()`
    override in an app is not needed. */
-.cn-facts-widget__label.cn-facts-widget__label[data-v-2903e476] {
+.cn-facts-widget__label.cn-facts-widget__label[data-v-6351bc64] {
 	width: auto;
 	margin: 0;
 	padding: 0;
 	text-align: start;
 	color: var(--color-text-maxcontrast);
 }
-.cn-facts-widget__value.cn-facts-widget__value[data-v-2903e476] {
+.cn-facts-widget__value.cn-facts-widget__value[data-v-6351bc64] {
 	margin: 0;
 	padding: 0;
 	text-align: start;
@@ -40638,56 +40643,56 @@ a.cn-flow-runs-widget__row-content:hover .cn-flow-runs-widget__name[data-v-76cc4
 	min-width: 0;
 	overflow-wrap: anywhere;
 }
-.cn-facts-widget__title[data-v-2903e476] {
+.cn-facts-widget__title[data-v-6351bc64] {
 	font-size: 15px;
 	font-weight: 600;
 	color: var(--color-main-text);
 }
-.cn-facts-widget__line[data-v-2903e476] {
+.cn-facts-widget__line[data-v-6351bc64] {
 	font-size: 13px;
 	color: var(--color-text-maxcontrast);
 }
-.cn-facts-widget__meter[data-v-2903e476] {
+.cn-facts-widget__meter[data-v-6351bc64] {
 	display: flex;
 	flex-direction: column;
 	gap: 4px;
 	font-size: 14px;
 }
-.cn-facts-widget__meter-head[data-v-2903e476] {
+.cn-facts-widget__meter-head[data-v-6351bc64] {
 	display: flex;
 	justify-content: space-between;
 	gap: 16px;
 }
-.cn-facts-widget__meter-label[data-v-2903e476] {
+.cn-facts-widget__meter-label[data-v-6351bc64] {
 	color: var(--color-text-maxcontrast);
 }
-.cn-facts-widget__meter-value[data-v-2903e476] {
+.cn-facts-widget__meter-value[data-v-6351bc64] {
 	font-weight: 500;
 	text-align: end;
 }
-.cn-facts-widget__meter-track[data-v-2903e476] {
+.cn-facts-widget__meter-track[data-v-6351bc64] {
 	height: 6px;
 	border-radius: 3px;
 	background: var(--color-background-darker);
 	overflow: hidden;
 }
-.cn-facts-widget__meter-bar[data-v-2903e476] {
+.cn-facts-widget__meter-bar[data-v-6351bc64] {
 	display: block;
 	height: 100%;
 	border-radius: inherit;
 	background: var(--color-primary-element);
 }
-.cn-facts-widget__meter--over .cn-facts-widget__meter-value[data-v-2903e476] {
+.cn-facts-widget__meter--over .cn-facts-widget__meter-value[data-v-6351bc64] {
 	color: var(--color-error-text);
 }
-.cn-facts-widget__meter--over .cn-facts-widget__meter-bar[data-v-2903e476] {
+.cn-facts-widget__meter--over .cn-facts-widget__meter-bar[data-v-6351bc64] {
 	background: var(--color-error);
 }
-.cn-facts-widget__muted[data-v-2903e476] {
+.cn-facts-widget__muted[data-v-6351bc64] {
 	margin: 0;
 	color: var(--color-text-maxcontrast);
 }
-.cn-facts-widget__label .hidden-visually[data-v-2903e476] {
+.cn-facts-widget__label .hidden-visually[data-v-6351bc64] {
 	clip-path: inset(50%);
 	height: 1px;
 	overflow: hidden;
@@ -40695,27 +40700,27 @@ a.cn-flow-runs-widget__row-content:hover .cn-flow-runs-widget__name[data-v-76cc4
 	white-space: nowrap;
 	width: 1px;
 }
-.cn-facts-widget__label--icon[data-v-2903e476] {
+.cn-facts-widget__label--icon[data-v-6351bc64] {
 	align-items: center;
 	display: flex;
 }
-.cn-facts-widget__value-link[data-v-2903e476] {
+.cn-facts-widget__value-link[data-v-6351bc64] {
 	color: var(--color-primary-element);
 	text-decoration: underline;
 }
-.cn-facts-widget__inline-button[data-v-2903e476],
-.cn-facts-widget__icon-button[data-v-2903e476],
-.cn-facts-widget__action[data-v-2903e476] {
+.cn-facts-widget__inline-button[data-v-6351bc64],
+.cn-facts-widget__icon-button[data-v-6351bc64],
+.cn-facts-widget__action[data-v-6351bc64] {
 	align-items: center;
 	cursor: pointer;
 	display: inline-flex;
 	font: inherit;
 }
-.cn-facts-widget__reveal-error[data-v-2903e476] {
+.cn-facts-widget__reveal-error[data-v-6351bc64] {
 	font-size: 13px;
 	color: var(--color-text-error, var(--color-error));
 }
-.cn-facts-widget__inline-button[data-v-2903e476] {
+.cn-facts-widget__inline-button[data-v-6351bc64] {
 	background: var(--color-main-background);
 	border: 1px solid var(--color-border-dark);
 	border-radius: 16px;
@@ -40727,7 +40732,7 @@ a.cn-flow-runs-widget__row-content:hover .cn-flow-runs-widget__name[data-v-76cc4
 	min-height: 30px;
 	padding: 0 10px;
 }
-.cn-facts-widget__icon-button[data-v-2903e476] {
+.cn-facts-widget__icon-button[data-v-6351bc64] {
 	background: transparent;
 	border: 0;
 	border-radius: 6px;
@@ -40736,23 +40741,23 @@ a.cn-flow-runs-widget__row-content:hover .cn-flow-runs-widget__name[data-v-76cc4
 	padding: 2px;
 	vertical-align: middle;
 }
-.cn-facts-widget__icon-button[data-v-2903e476]:hover,
-.cn-facts-widget__icon-button[data-v-2903e476]:focus-visible {
+.cn-facts-widget__icon-button[data-v-6351bc64]:hover,
+.cn-facts-widget__icon-button[data-v-6351bc64]:focus-visible {
 	background: var(--color-background-hover);
 	color: var(--color-main-text);
 }
-.cn-facts-widget__text[data-v-2903e476] {
+.cn-facts-widget__text[data-v-6351bc64] {
 	color: var(--color-main-text);
 	font-size: 15px;
 }
 
 /* A lead: an icon tile or initials beside a bold title and a muted subtitle. */
-.cn-facts-widget__lead[data-v-2903e476] {
+.cn-facts-widget__lead[data-v-6351bc64] {
 	align-items: center;
 	display: flex;
 	gap: 12px;
 }
-.cn-facts-widget__lead-tile[data-v-2903e476] {
+.cn-facts-widget__lead-tile[data-v-6351bc64] {
 	align-items: center;
 	background: var(--color-background-dark);
 	border-radius: 8px;
@@ -40767,32 +40772,32 @@ a.cn-flow-runs-widget__row-content:hover .cn-flow-runs-widget__name[data-v-76cc4
 }
 
 /* Initials stand for a person: round, as an avatar. */
-.cn-facts-widget__lead-tile--initials[data-v-2903e476] {
+.cn-facts-widget__lead-tile--initials[data-v-6351bc64] {
 	border-radius: 50%;
 }
-.cn-facts-widget__lead-tile--success[data-v-2903e476] {
+.cn-facts-widget__lead-tile--success[data-v-6351bc64] {
 	background: color-mix(in srgb, var(--color-success) 14%, var(--color-main-background));
 	border-radius: 50%;
 	color: var(--color-success-text, var(--color-success));
 }
-.cn-facts-widget__lead-tile--info[data-v-2903e476] {
+.cn-facts-widget__lead-tile--info[data-v-6351bc64] {
 	background: var(--color-primary-element-light);
 	border-radius: 50%;
 	color: var(--color-primary-element-light-text, var(--color-primary-element));
 }
-.cn-facts-widget__lead-text[data-v-2903e476] {
+.cn-facts-widget__lead-text[data-v-6351bc64] {
 	display: flex;
 	flex-direction: column;
 	min-width: 0;
 }
-.cn-facts-widget__lead-title[data-v-2903e476] {
+.cn-facts-widget__lead-title[data-v-6351bc64] {
 	font-size: 15px;
 }
-.cn-facts-widget__lead-subtitle[data-v-2903e476] {
+.cn-facts-widget__lead-subtitle[data-v-6351bc64] {
 	color: var(--color-text-maxcontrast);
 	font-size: 13px;
 }
-.cn-facts-widget__action[data-v-2903e476] {
+.cn-facts-widget__action[data-v-6351bc64] {
 	align-self: flex-start;
 	background: var(--color-primary-element-light);
 	border: 0;
@@ -40804,20 +40809,27 @@ a.cn-flow-runs-widget__row-content:hover .cn-flow-runs-widget__name[data-v-76cc4
 	min-height: 32px;
 	padding: 0 14px;
 }
-.cn-facts-widget__action[data-v-2903e476]:hover,
-.cn-facts-widget__action[data-v-2903e476]:focus-visible {
+.cn-facts-widget__action[data-v-6351bc64]:hover,
+.cn-facts-widget__action[data-v-6351bc64]:focus-visible {
 	background: var(--color-primary-element-light-hover, var(--color-primary-element-light));
 }
-.cn-facts-widget__notice[data-v-2903e476] {
+.cn-facts-widget__notice[data-v-6351bc64] {
 	margin: 4px 0 0;
 }
-.cn-facts-widget__link[data-v-2903e476] {
+
+/* A div, not a p: a theme sets every paragraph's size with !important. */
+.cn-facts-widget__footnote[data-v-6351bc64] {
+	color: var(--color-text-maxcontrast);
+	font-size: 13px;
+	line-height: 1.2;
+}
+.cn-facts-widget__link[data-v-6351bc64] {
 	font-size: 14px;
 	font-weight: 600;
 	color: var(--color-primary-element);
 	text-decoration: underline;
 }
-.cn-facts-widget__link--button[data-v-2903e476] {
+.cn-facts-widget__link--button[data-v-6351bc64] {
 	display: inline-flex;
 	align-items: center;
 	gap: 6px;
@@ -40832,12 +40844,12 @@ a.cn-flow-runs-widget__row-content:hover .cn-flow-runs-widget__name[data-v-76cc4
 
 /* `columns: 2` (board DqContact): two columns, the label above the value, a
    hairline under each fact; one column on a phone. */
-.cn-facts-widget__rows--columns[data-v-2903e476] {
+.cn-facts-widget__rows--columns[data-v-6351bc64] {
 	grid-template-columns: repeat(2, minmax(0, 1fr));
 	gap: 14px 24px;
 	font-size: 15px;
 }
-.cn-facts-widget__rows--columns .cn-facts-widget__row[data-v-2903e476] {
+.cn-facts-widget__rows--columns .cn-facts-widget__row[data-v-6351bc64] {
 	display: flex;
 	flex-direction: column;
 	gap: 3px;
@@ -40845,21 +40857,21 @@ a.cn-flow-runs-widget__row-content:hover .cn-flow-runs-widget__name[data-v-76cc4
 	padding-bottom: 10px;
 	border-bottom: 1px solid var(--color-border);
 }
-.cn-facts-widget__rows--columns .cn-facts-widget__label.cn-facts-widget__label[data-v-2903e476] {
+.cn-facts-widget__rows--columns .cn-facts-widget__label.cn-facts-widget__label[data-v-6351bc64] {
 	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[data-v-2903e476] {
+.cn-facts-widget__rows--stacked[data-v-6351bc64] {
 	grid-template-columns: minmax(0, 1fr);
 	gap: 2px 0;
 }
-.cn-facts-widget__rows--stacked .cn-facts-widget__value.cn-facts-widget__value[data-v-2903e476] {
+.cn-facts-widget__rows--stacked .cn-facts-widget__value.cn-facts-widget__value[data-v-6351bc64] {
 	margin-bottom: 8px;
 }
 @media (max-width: 640px) {
-.cn-facts-widget__rows--columns[data-v-2903e476] {
+.cn-facts-widget__rows--columns[data-v-6351bc64] {
 		grid-template-columns: minmax(0, 1fr);
 }
 }
@@ -43456,22 +43468,22 @@ a.cn-record-list__inline-title[data-v-59c81065] {
 }
 
 
-.cn-object-parties[data-v-44731ec4] {
+.cn-object-parties[data-v-24a3d77a] {
 	display: flex;
 	flex-direction: column;
 	gap: calc(var(--default-grid-baseline, 4px) * 3);
 }
-.cn-object-parties__verdicts[data-v-44731ec4] {
+.cn-object-parties__verdicts[data-v-24a3d77a] {
 	display: flex;
 	flex-direction: column;
 	gap: var(--default-grid-baseline, 4px);
 }
-.cn-object-parties__role-label[data-v-44731ec4] {
+.cn-object-parties__role-label[data-v-24a3d77a] {
 	margin: 0 0 var(--default-grid-baseline, 4px) 0;
 	color: var(--color-text-maxcontrast);
 	font-size: 0.9em;
 }
-.cn-object-parties__list[data-v-44731ec4] {
+.cn-object-parties__list[data-v-24a3d77a] {
 	display: flex;
 	flex-direction: column;
 	gap: var(--default-grid-baseline, 4px);
@@ -43479,7 +43491,7 @@ a.cn-record-list__inline-title[data-v-59c81065] {
 	padding: 0;
 	list-style: none;
 }
-.cn-object-parties__party[data-v-44731ec4] {
+.cn-object-parties__party[data-v-24a3d77a] {
 	display: flex;
 	flex-wrap: wrap;
 	align-items: center;
@@ -43487,33 +43499,33 @@ a.cn-record-list__inline-title[data-v-59c81065] {
 	padding: var(--default-grid-baseline, 4px);
 	border-radius: var(--border-radius, 4px);
 }
-.cn-object-parties__party[data-v-44731ec4]:hover {
+.cn-object-parties__party[data-v-24a3d77a]:hover {
 	background-color: var(--color-background-hover);
 }
-.cn-object-parties__name[data-v-44731ec4] {
+.cn-object-parties__name[data-v-24a3d77a] {
 	font-weight: bold;
 }
-.cn-object-parties__muted[data-v-44731ec4] {
+.cn-object-parties__muted[data-v-24a3d77a] {
 	color: var(--color-text-maxcontrast);
 }
-.cn-object-parties__manage[data-v-44731ec4] {
+.cn-object-parties__manage[data-v-24a3d77a] {
 	display: flex;
 	justify-content: flex-end;
 }
-.cn-object-parties__remove[data-v-44731ec4] {
+.cn-object-parties__remove[data-v-24a3d77a] {
 	margin-inline-start: auto;
 }
-.cn-object-parties__main-card[data-v-44731ec4] {
+.cn-object-parties__main-card[data-v-24a3d77a] {
 	display: flex;
 	flex-direction: column;
 	gap: calc(var(--default-grid-baseline, 4px) * 3);
 }
-.cn-object-parties__main[data-v-44731ec4] {
+.cn-object-parties__main[data-v-24a3d77a] {
 	display: flex;
 	align-items: center;
 	gap: calc(var(--default-grid-baseline, 4px) * 3);
 }
-.cn-object-parties__main-initials[data-v-44731ec4] {
+.cn-object-parties__main-initials[data-v-24a3d77a] {
 	display: flex;
 	flex: none;
 	align-items: center;
@@ -43525,28 +43537,28 @@ a.cn-record-list__inline-title[data-v-59c81065] {
 	color: var(--color-main-text);
 	font-weight: 700;
 }
-.cn-object-parties__main-text[data-v-44731ec4] {
+.cn-object-parties__main-text[data-v-24a3d77a] {
 	display: flex;
 	flex-direction: column;
 }
-.cn-object-parties__main-name[data-v-44731ec4] {
+.cn-object-parties__main-name[data-v-24a3d77a] {
 	font-size: 15px;
 }
-.cn-object-parties__main-role[data-v-44731ec4] {
+.cn-object-parties__main-role[data-v-24a3d77a] {
 	font-size: 13px;
 }
-.cn-object-parties__main-email[data-v-44731ec4] {
+.cn-object-parties__main-email[data-v-24a3d77a] {
 	display: flex;
 	align-items: center;
 	gap: calc(var(--default-grid-baseline, 4px) * 2.5);
 	color: var(--color-main-text);
 	overflow-wrap: anywhere;
 }
-.cn-object-parties__main-link[data-v-44731ec4] {
+.cn-object-parties__main-link[data-v-24a3d77a] {
 	color: var(--color-primary-element);
 	font-weight: 600;
 }
-.cn-object-parties__accepted[data-v-44731ec4] {
+.cn-object-parties__accepted[data-v-24a3d77a] {
 	display: flex;
 	flex-wrap: wrap;
 	align-items: center;
@@ -43555,10 +43567,10 @@ a.cn-record-list__inline-title[data-v-59c81065] {
 	border-radius: var(--border-radius-large, 10px);
 	background-color: var(--color-background-hover);
 }
-.cn-object-parties__accepted-label[data-v-44731ec4] {
+.cn-object-parties__accepted-label[data-v-24a3d77a] {
 	font-weight: 600;
 }
-.cn-object-parties__accepted-kind[data-v-44731ec4] {
+.cn-object-parties__accepted-kind[data-v-24a3d77a] {
 	border: 1px solid var(--color-border-dark);
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@conduction/nextcloud-vue",
-  "version": "2.146.0",
+  "version": "2.147.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/CnFactsWidget/CnFactsWidget.vue

@@ -175,6 +175,15 @@
 					</span>
 					<span class="cn-facts-widget__line">{{ block.value }}</span>
 				</div>
+				<div v-else-if="block.kind === 'pills'" class="cn-facts-widget__pills">
+					<CnStatusBadge
+						v-for="pill in block.pills"
+						:key="pill.key"
+						:label="pill.value"
+						:variant="pill.variant"
+						size="small"
+						:data-testid="`cn-fact-${pill.key}`" />
+				</div>
 				<div v-else-if="block.kind === 'pill'">
 					<CnStatusBadge
 						:label="block.value"
@@ -191,6 +200,12 @@
 			data-testid="cn-facts-notice">
 			{{ notice.text }}
 		</NcNoteCard>
+		<div
+			v-if="footnote && record"
+			class="cn-facts-widget__footnote"
+			data-testid="cn-facts-footnote">
+			{{ footnote }}
+		</div>
 		<button
 			v-if="link && link.sidebarTab && record"
 			type="button"
@@ -296,6 +311,30 @@ function resolveSourceTokens(value, record) {
 }
 
 /** Kinds of entry a `fields[]` item can be. A labelled item without `as` is a row. */
+/**
+ * Two or more pills in a row become one `pills` block, drawn on one line.
+ *
+ * @param {Array<object>} blocks The blocks in order.
+ * @return {Array<object>}
+ * @spec openspec/changes/facts-fields-from-context/specs/facts-widget/spec.md#requirement-a-facts-card-can-take-its-entries-from-the-page-context
+ */
+function groupPills(blocks) {
+	const out = []
+	blocks.forEach((block) => {
+		const last = out[out.length - 1]
+		if (block.kind !== 'pill') {
+			out.push(block)
+		} else if (last && last.kind === 'pills') {
+			last.pills.push(block)
+		} else if (last && last.kind === 'pill') {
+			out[out.length - 1] = { kind: 'pills', key: `pills-${last.key}`, pills: [last, block] }
+		} else {
+			out.push(block)
+		}
+	})
+	return out
+}
+
 const KINDS = Object.freeze(['row', 'title', 'line', 'pill', 'lead', 'text', 'meter', 'progress'])
 
 /** The schemes a facts link opens, besides a path on this server. */
@@ -436,15 +475,17 @@ export default {
 		 *   `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, its words translated.
+		 *   `template` ("{available} {unit}") fills its `{path}` placeholders from the record instead of reading `path` (`{path:format}` formats one, "{from:year}"); 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).
 		 * - `actions` — action buttons under the facts in the `headerActions` shape (`api-call`, `open-form`, `navigate`, `open-modal`, ...; `confirm`, `variant`). `@source.<field>` names a field of the record shown, and an action whose token names an empty field is not drawn. `visibleWhen` reads the record shown; `adminOnly: true` draws the action for an instance admin only (visibility, never authorisation). An api-call or a saved form refreshes the page, and the facts read their source again.
+		 * - `fieldsFrom` — `@context.<name>.<path>`, a list of entries on a record the page reads beside this one (a case type's `requestFields`); when it holds entries they are drawn instead of `fields`.
 		 * - `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` 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).
+		 * - `footnote` — a plain muted line under the facts, without a band (DqZaakBesluiten "Na het ondertekenen ..."); 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"), `year` ("2026"), `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.
@@ -503,6 +544,29 @@ export default {
 	},
 
 	computed: {
+		/**
+		 * The entries to draw: the list `fieldsFrom` names on the page's
+		 * `@context` records when it holds entries (a case type's
+		 * `requestFields`), else `fields`.
+		 *
+		 * @return {Array<object>}
+		 * @spec openspec/changes/facts-fields-from-context/specs/facts-widget/spec.md#requirement-a-facts-card-can-take-its-entries-from-the-page-context
+		 */
+		entries() {
+			const from = this.content?.fieldsFrom
+			if (typeof from === 'string' && from.startsWith('@context.')) {
+				const rows = this.cnDetailVisibilityRows && typeof this.cnDetailVisibilityRows === 'object' && 'value' in this.cnDetailVisibilityRows
+					? this.cnDetailVisibilityRows.value
+					: this.cnDetailVisibilityRows
+				const named = readPath({ '@context': rows || {} }, from)
+				const list = Array.isArray(named) ? named.filter((entry) => entry && typeof entry === 'object' && !Array.isArray(entry)) : []
+				if (list.length > 0) {
+					return list
+				}
+			}
+			return Array.isArray(this.content?.fields) ? this.content.fields : []
+		},
+
 		/**
 		 * Whether the rows sit in two columns, label above value.
 		 *
@@ -547,7 +611,7 @@ export default {
 		 * @spec openspec/changes/facts-entry-count/specs/facts-widget/spec.md#requirement-a-facts-entry-can-count-a-related-list
 		 */
 		countJobsKey() {
-			const fields = Array.isArray(this.content?.fields) ? this.content.fields : []
+			const fields = this.entries
 			const keys = fields
 				.filter((field) => field && field.countFrom && typeof field.countFrom === 'object' && field.countFrom.register && field.countFrom.schema)
 				.map((field) => this.countKey(field.countFrom))
@@ -708,7 +772,7 @@ export default {
 		 */
 		blocks() {
 			const sourceRecord = this.record
-			const fields = Array.isArray(this.content?.fields) ? this.content.fields : []
+			const fields = this.entries
 			// A source that finds nothing still leaves the entries that read the
 			// page's own object (`from: "object"`).
 			const ownEntries = Boolean(this.objectData) && fields.some((field) => field && field.from === 'object')
@@ -787,7 +851,7 @@ export default {
 					out.push({ kind: 'rows', key: 'rows-answered', rows: [row] })
 				}
 			})
-			return out
+			return groupPills(out)
 		},
 
 		/**
@@ -879,6 +943,12 @@ export default {
 			return { text, type: ['success', 'warning', 'error'].includes(notice.variant) ? notice.variant : 'info' }
 		},
 
+		/** @return {string} The translated footnote, or '' when none is set. */
+		footnote() {
+			const footnote = this.content?.footnote
+			return typeof footnote === 'string' && footnote.trim() !== '' ? this.tr(footnote) : ''
+		},
+
 		/** @return {string} The reveal button's text. */
 		showLabel() {
 			return t('nextcloud-vue', 'Show')
@@ -1116,7 +1186,7 @@ export default {
 		 * @spec openspec/changes/facts-entry-count/specs/facts-widget/spec.md#requirement-a-facts-entry-can-count-a-related-list
 		 */
 		async loadCounts() {
-			const fields = Array.isArray(this.content?.fields) ? this.content.fields : []
+			const fields = this.entries
 			const seen = new Set()
 			for (const field of fields) {
 				const countFrom = field && field.countFrom
@@ -1193,8 +1263,8 @@ export default {
 		 */
 		templateValue(record, template) {
 			let filled = false
-			const text = this.tr(template).replace(/\{([\w.@]+)\}/g, (match, path) => {
-				const value = this.format(readPath(record, path), {}, record)
+			const text = this.tr(template).replace(/\{([\w.@]+)(?::([\w-]+))?\}/g, (match, path, format) => {
+				const value = this.format(readPath(record, path), format ? { format } : {}, record)
 				filled = filled || value !== ''
 				return value
 			})
@@ -1586,7 +1656,7 @@ export default {
 		 * @return {Array<{spec: object, raw: unknown}>}
 		 */
 		refSpecs(record) {
-			const fields = Array.isArray(this.content?.fields) ? this.content.fields : []
+			const fields = this.entries
 			const specs = []
 			const visit = (spec) => {
 				if (!spec || typeof spec !== 'object') {
@@ -1819,6 +1889,10 @@ export default {
 					.filter((item) => item !== '')
 				return items.join(', ')
 			}
+			if (format === 'year') {
+				const date = parseDateValue(raw)
+				return date === null ? '' : String(date.getFullYear())
+			}
 			// The month written out, the year only outside this year: "3 oktober".
 			if (format === 'longdate') {
 				return formatLongDate(raw)
@@ -1960,6 +2034,12 @@ export default {
 	min-width: 0;
 }
 
+.cn-facts-widget__pills {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 8px;
+}
+
 /* `padding: 0`: Nextcloud's core stylesheet pads every `dl` 12px at the top
    and bottom, which put a side card's facts 24px under its title, against
    the board's 12 (DqZaak "Behandeling", DqZaakDocumenten). */
@@ -2216,6 +2296,13 @@ export default {
 	margin: 4px 0 0;
 }
 
+/* A div, not a p: a theme sets every paragraph's size with !important. */
+.cn-facts-widget__footnote {
+	color: var(--color-text-maxcontrast);
+	font-size: 13px;
+	line-height: 1.2;
+}
+
 .cn-facts-widget__link {
 	font-size: 14px;
 	font-weight: 600;