@conduction/nextcloud-vue 2.111.0 → 2.112.0

package/l10n/en.json

@@ -1912,7 +1912,9 @@
     "New team": "New team",
     "Why it is moving": "Why it is moving",
     "Use \"{name}\"": "Use \"{name}\"",
-    "It was not handed over.": "It was not handed over."
+    "It was not handed over.": "It was not handed over.",
+    "This search could not be read.": "This search could not be read.",
+    "{source} could not be searched, so this list may be incomplete.": "{source} could not be searched, so this list may be incomplete."
   },
   "plurals": {
     "{count} member": [

package/l10n/nl.json

@@ -2124,7 +2124,9 @@
     "New team": "Nieuw team",
     "Why it is moving": "Waarom het overgaat",
     "Use \"{name}\"": "\"{name}\" gebruiken",
-    "It was not handed over.": "Het is niet overgedragen."
+    "It was not handed over.": "Het is niet overgedragen.",
+    "This search could not be read.": "Deze zoekopdracht kon niet worden gelezen.",
+    "{source} could not be searched, so this list may be incomplete.": "{source} kon niet worden doorzocht, dus deze lijst is mogelijk niet compleet."
   },
   "plurals": {
     "{count} member": [

package/package.json

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

@@ -31,7 +31,7 @@
 					{{ section.title }}
 				</h3>
 				<dl class="cn-action-dialog__facts">
-					<div v-for="fact in section.facts" :key="fact.label">
+					<div v-for="fact in section.facts" :key="fact.label" class="cn-action-dialog__fact">
 						<dt>{{ fact.label }}</dt>
 						<dd>{{ fact.value }}</dd>
 					</div>
@@ -87,6 +87,7 @@
 					v-model="reason"
 					:label="reasonLabel"
 					:labelOutside="false"
+					:rows="config.reason.rows || 2"
 					resize="vertical"
 					data-testid="cn-action-dialog-reason" />
 				<span v-if="config.reason.hint" class="cn-action-dialog__muted">{{ text(config.reason.hint) }}</span>
@@ -176,8 +177,9 @@ let reasonSeq = 0
  *   required?, options?: [{ value, label, fills? }] }]`: inputs sent beside
  *   the reason, required by default; a select option's `fills` sets other
  *   fields that are still empty.
- * - `reason`: `{ label?, hint?, required?, field? }`: a text area; required by
- *   default; sent as `field` (default `reason`).
+ * - `reason`: `{ label?, hint?, required?, field?, rows? }`: a text area; required by
+ *   default; sent as `field` (default `reason`). `rows` is its height in lines
+ *   (default 2; board DqBesluit draws 4).
  * - `note`: `{ variant?, title?, text }`: a read-only note.
  * - `confirm`: `{ label, icon?, request?: { method?, url, body? }, action? }`.
  *   `request` posts itself (`body` templates filled with the record and
@@ -604,17 +606,27 @@ export default {
 
 .cn-action-dialog__title {
 	margin: 0 0 8px;
-	font-size: 15px;
-	font-weight: 700;
+	font-size: 14px;
+	font-weight: 600;
 }
 
+/* Facts in columns of at least 200px, each a label over its value above a
+   hairline (DqArchiveren "Bewaring volgens het zaaktype"). */
 .cn-action-dialog__facts {
 	display: grid;
-	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
-	gap: 8px 16px;
+	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+	gap: 12px 24px;
 	margin: 0;
 }
 
+.cn-action-dialog__fact {
+	display: flex;
+	flex-direction: column;
+	gap: 3px;
+	padding-bottom: 10px;
+	border-bottom: 1px solid var(--color-border);
+}
+
 .cn-action-dialog__facts dt {
 	color: var(--color-text-maxcontrast);
 	font-size: 13px;
@@ -622,12 +634,15 @@ export default {
 
 .cn-action-dialog__facts dd {
 	margin: 0;
+	font-size: 15px;
+	font-weight: 500;
 }
 
+/* Checklist rows divided by hairlines, the detail at the row's end
+   (DqArchiveren "Klaar om te archiveren"). */
 .cn-action-dialog__checks {
 	display: flex;
 	flex-direction: column;
-	gap: 8px;
 	margin: 0;
 	padding: 0;
 	list-style: none;
@@ -637,7 +652,15 @@ export default {
 	display: flex;
 	flex-wrap: wrap;
 	align-items: center;
-	gap: 8px;
+	gap: 2px 12px;
+	padding: 10px 0;
+	border-top: 1px solid var(--color-border);
+	font-size: 15px;
+}
+
+.cn-action-dialog__check-label {
+	flex: 1 1 auto;
+	font-weight: 600;
 }
 
 .cn-action-dialog__check-icon {

package/src/components/CnAssignDialog/CnAssignDialog.vue

@@ -34,6 +34,7 @@
 					v-model="note"
 					:label="noteLabel"
 					:labelOutside="false"
+					:rows="noteConfig.rows || 3"
 					resize="vertical"
 					data-testid="cn-assign-dialog-note" />
 				<span v-if="noteConfig.hint" class="cn-assign-dialog__hint">{{ text(noteConfig.hint) }}</span>
@@ -139,8 +140,9 @@ export function withTypedAssignee(found, typed, label) {
  *   by `currentAs`) says so, in place of `hint`; `allowTyped`
  *   offers what was typed as a choice; the id is sent as `field` (default
  *   `assignee`) and its kind as `kindField` when set.
- * - `note`: `{ label?, hint?, required?, field? }`, required by default and
- *   sent as `field` (default `note`); `false` drops it.
+ * - `note`: `{ label?, hint?, required?, field?, rows? }`, required by default and
+ *   sent as `field` (default `note`); `false` drops it. `rows` is the text
+ *   area's height in lines (default 3, as board DqOverdragen draws it).
  * - `toggles`: `[{ field, label, note? }]`: switches that start off and are
  *   sent as booleans.
  * - `confirm`: `{ label?, icon?, request?: { method?, url, body? }, action? }`.

package/src/components/CnBoardView/CnBoardView.vue

@@ -228,7 +228,11 @@
 										class="cn-board-view__pill"
 										data-testid="cn-board-card-pill"
 										:label="roleText(card, roles.pill)"
-										:variant="pillVariant(card)" />
+										:variant="pillVariant(card)">
+										<template v-if="pillIcon(card)" #icon>
+											<CnIcon :name="pillIcon(card)" :size="14" />
+										</template>
+									</CnStatusBadge>
 								</span>
 								<span
 									v-if="dueText(card) !== '' || ownerName(card) !== ''"
@@ -352,12 +356,14 @@
 
 <script>
 import { translate as t } from '@nextcloud/l10n'
+import CnIcon from '../CnIcon/CnIcon.vue'
 import CnStatusBadge from '../CnStatusBadge/CnStatusBadge.vue'
 import { normalizeLook } from '../../composables/useLook.js'
 import { isBadgeVariant } from '../../utils/badgeVariants.js'
 import { buildBoardColumns, normalizeAllowed, resolveStageColor } from '../../utils/boardColumns.js'
 import { buildSwimlanes } from '../../utils/boardSwimlanes.js'
 import { DROP_OUTCOMES, runBoardDrop } from '../../utils/boardTransition.js'
+import { pillLook } from '../../utils/detailActionModel.js'
 import { daysUntil, dueStateForRow } from '../../utils/dueRule.js'
 import { formatMetricValue } from '../../utils/formatMetric.js'
 import { readPath } from '../../utils/readPath.js'
@@ -393,7 +399,7 @@ import '../../css/board.css'
 export default {
 	name: 'CnBoardView',
 
-	components: { CnStatusBadge },
+	components: { CnIcon, CnStatusBadge },
 
 	inject: {
 		/**
@@ -489,9 +495,10 @@ export default {
 
 		/**
 		 * The board look's card roles (manifest `config.board.card`):
-		 * `{ title, sub, pill, due, owner, pillColors? }`. `sub` is a field or
-		 * a list of fields joined by a middle dot; `pillColors` maps a pill
-		 * value to a badge variant. Missing, the first of `cardFields` is the
+		 * `{ title, sub, pill, due, owner, pillColors?, resolve? }`. `sub` is a
+		 * field or a list of fields joined by a middle dot; `pillColors` maps a
+		 * pill value to a badge variant; `resolve: { colorField?, iconField? }`
+		 * takes the pill's tone and icon from the record it points at. Missing, the first of `cardFields` is the
 		 * title and the rest form the sub line. The Nextcloud look ignores it.
 		 *
 		 * @type {{title?: string, sub?: string|Array<string>, pill?: string, due?: string, owner?: string, pillColors?: object}|null}
@@ -502,6 +509,20 @@ export default {
 			default: null,
 		},
 
+		/**
+		 * The referenced records' colour and icon names, by field and id
+		 * (`{ [field]: { [id]: { color, icon } } }`, CnIndexPage reads them).
+		 * With `cardRoles.resolve: { colorField?, iconField? }` the card's pill
+		 * takes its record's tone and icon from here.
+		 *
+		 * @type {object}
+		 * @spec openspec/changes/pill-color-field/specs/pill-color-field/spec.md#requirement-a-card-pill-takes-its-tone-and-icon-from-the-referenced-record
+		 */
+		pillLooks: {
+			type: Object,
+			default: () => ({}),
+		},
+
 		/**
 		 * The field on a column's state that holds its dot colour (manifest
 		 * `config.board.colorField`). Empty, the lifecycle state's declared
@@ -1064,11 +1085,43 @@ export default {
 		 * @return {string} A CnStatusBadge variant.
 		 */
 		pillVariant(card) {
+			const look = this.pillLookOf(card)
+			if (look.variant) {
+				return look.variant
+			}
 			const raw = this.fieldText(card, this.roles.pill)
 			const variant = this.roles.pillColors[raw] ?? this.roles.pillColors[raw.toLowerCase()]
 			return isBadgeVariant(variant) ? variant : 'default'
 		},
 
+		/**
+		 * The pill's icon, from the record it points at (`cardRoles.resolve`).
+		 *
+		 * @param {object} card The card's row.
+		 * @return {string} An icon name, or ''.
+		 * @spec openspec/changes/pill-color-field/specs/pill-color-field/spec.md#requirement-a-card-pill-takes-its-tone-and-icon-from-the-referenced-record
+		 */
+		pillIcon(card) {
+			return this.pillLookOf(card).icon || ''
+		},
+
+		/**
+		 * The tone and icon of the record the card's pill points at, when
+		 * `cardRoles.resolve` asks for them; empty otherwise.
+		 *
+		 * @param {object} card The card's row.
+		 * @return {{variant?: string, icon?: string}} The look.
+		 */
+		pillLookOf(card) {
+			const given = this.cardRoles && typeof this.cardRoles === 'object' ? this.cardRoles : null
+			if (!given || !given.resolve || !this.roles.pill || !this.pillLooks) {
+				return {}
+			}
+			const raw = readPath(card, this.roles.pill)
+			const looks = this.pillLooks[this.roles.pill]
+			return pillLook(looks && raw !== null && raw !== undefined && typeof raw !== 'object' ? looks[String(raw)] : null)
+		},
+
 		/**
 		 * The footer's due text: "Due today", "Due 2 Nov", or "Overdue 2 Nov"
 		 * for a date in the past. Words, so the late tone is not colour alone.

package/src/components/CnCardGrid/CnCardGrid.md

@@ -107,6 +107,7 @@ Custom card slot — replace the default CnObjectCard with your own rendering:
 | `selectable` | `Boolean` | `false` | When `true`, each card shows a selection checkbox and the grid emits `select` events |
 | `selectedIds` | `Array` | `[]` | Array of currently selected object IDs (matched against `object[rowKey]`) |
 | `accentOf` | `Function` | `null` | `(object) => { variant, icon?, label? } \| null`, each card's status accent (see CnObjectCard `accent`) |
+| `pillLooks` | `Object` | `{}` | The referenced records' colour and icon names, by field and id (`{ [field]: { [id]: { color, icon } } }`), passed to each CnObjectCard for the record layout's pills that declare `resolve`. |
 
 ## Board look props
 

package/src/components/CnCardGrid/CnCardGrid.vue

@@ -38,6 +38,7 @@
 						:selected="isSelected(object)"
 						:cardFields="cardFields"
 						:layout="cardLayout"
+						:pillLooks="pillLooks"
 						:cardFieldColumns="cardFieldColumns"
 						:status="statusOf ? statusOf(object) : null"
 						:leading="leadingOf ? leadingOf(object) : null"
@@ -179,6 +180,16 @@ export default {
 			default: null,
 		},
 
+		/**
+		 * The referenced records' colour and icon names, by field and id
+		 * (`{ [field]: { [id]: { color, icon } } }`), passed through to
+		 * CnObjectCard for the record layout's pills that declare `resolve`.
+		 */
+		pillLooks: {
+			type: Object,
+			default: () => ({}),
+		},
+
 		/** The page's columns by key, passed through to CnObjectCard. */
 		cardFieldColumns: {
 			type: Object,

package/src/components/CnCellRenderer/CnCellRenderer.vue

@@ -50,7 +50,11 @@
 				:label="labelledValue"
 				:variant="badgeVariant"
 				:colorMap="badgeColorMap"
-				:colorKey="badgeColorKey" />
+				:colorKey="badgeColorKey">
+				<template v-if="badgeLook.icon" #icon>
+					<CnIcon :name="badgeLook.icon" :size="14" class="cn-cell-renderer__badge-icon" />
+				</template>
+			</CnStatusBadge>
 			<span v-else class="cn-cell-renderer__dash">—</span>
 		</template>
 
@@ -376,6 +380,7 @@ import CnGroupNameCell from './CnGroupNameCell.vue'
 import { normalizeLook } from '../../composables/useLook.js'
 import { ageInDays, boardDateLocale, formatAge, formatBoardDate, formatRelativeDate, formatTimeOfDay, resolveAgeVariant } from '../../utils/boardDate.js'
 import { parseDateValue, resolveDateVariant } from '../../utils/dateVariant.js'
+import { pillLook } from '../../utils/detailActionModel.js'
 import { resolveDue } from '../../utils/dueText.js'
 import { formatMoney } from '../../utils/formatMetric.js'
 import { objectFieldValue } from '../../utils/objectName.js'
@@ -1177,9 +1182,25 @@ export default {
 			return Object.keys(map).some((key) => key.toLowerCase() === raw) ? String(this.value) : ''
 		},
 
-		/** Variant for the built-in `badge` widget — `widgetProps.variant` or `'default'`. */
+		/**
+		 * What the built-in `badge` widget takes from the record its value
+		 * points at (`widgetProps.looks`, filled by CnIndexPage from
+		 * `widgetProps.resolve`): a tone and an icon, or nothing.
+		 *
+		 * @return {{variant?: string, colorMap?: null, icon?: string}}
+		 * @spec openspec/changes/pill-color-field/specs/pill-color-field/spec.md#requirement-a-badge-cell-takes-its-tone-and-icon-from-the-referenced-record
+		 */
+		badgeLook() {
+			const looks = this.widgetProps && this.widgetProps.looks
+			if (!looks || typeof looks !== 'object' || !this.hasValue || typeof this.value === 'object') {
+				return {}
+			}
+			return pillLook(looks[String(this.value)])
+		},
+
+		/** Variant for the built-in `badge` widget: the referenced record's tone, else `widgetProps.variant`, else `'default'`. */
 		badgeVariant() {
-			return (this.widgetProps && this.widgetProps.variant) || 'default'
+			return this.badgeLook.variant || (this.widgetProps && this.widgetProps.variant) || 'default'
 		},
 
 		/**
@@ -1194,6 +1215,9 @@ export default {
 		 * @return {object|null}
 		 */
 		badgeColorMap() {
+			if (this.badgeLook.variant) {
+				return null
+			}
 			return (this.widgetProps && this.widgetProps.colorMap) || this.enumColorMap || null
 		},
 

package/src/components/CnChartWidget/CnChartWidget.vue

@@ -2830,6 +2830,7 @@ export default {
 }
 
 .cn-chart-widget__matrix-head {
+	--nldesign-color-on-surface: var(--color-text-maxcontrast);
 	color: var(--color-text-maxcontrast);
 	padding: 6px;
 }
@@ -2866,7 +2867,11 @@ export default {
 	outline-offset: -3px;
 }
 
+/* A cell is a span: its ink also goes to --nldesign-color-on-surface, which a
+   theme that forces the body ink onto every span (thematiq) reads. Level 3
+   leaves the theme's body ink in place: white on its tint is below 4.5:1. */
 .cn-chart-widget__matrix-cell--1 {
+	--nldesign-color-on-surface: var(--color-primary-element-light-text);
 	background: var(--color-primary-element-light);
 	color: var(--color-primary-element-light-text);
 }
@@ -2882,6 +2887,7 @@ export default {
 }
 
 .cn-chart-widget__matrix-cell--4 {
+	--nldesign-color-on-surface: var(--color-primary-element-text);
 	background: var(--color-primary-element);
 	color: var(--color-primary-element-text);
 }

package/src/components/CnDetailPage/CnDetailPage.vue

@@ -104,7 +104,11 @@
 								:colorKey="pill.colorKey"
 								:colorMap="pill.colorMap"
 								:variant="pill.variant"
-								:data-testid="`cn-detail-page-pill-${pill.key}`" />
+								:data-testid="`cn-detail-page-pill-${pill.key}`">
+								<template v-if="pill.icon" #icon>
+									<CnIcon :name="pill.icon" :size="14" class="cn-detail-page__pill-icon" />
+								</template>
+							</CnStatusBadge>
 						</div>
 						<!-- Type name as a small eyebrow above the record name, so
 						     the header reads "the record" not "the kind of record"
@@ -485,7 +489,11 @@
 						:colorKey="pill.colorKey"
 						:colorMap="pill.colorMap"
 						:variant="pill.variant"
-						:data-testid="`cn-detail-page-pill-${pill.key}`" />
+						:data-testid="`cn-detail-page-pill-${pill.key}`">
+						<template v-if="pill.icon" #icon>
+							<CnIcon :name="pill.icon" :size="14" class="cn-detail-page__pill-icon" />
+						</template>
+					</CnStatusBadge>
 				</div>
 				<CnBreadcrumbs
 					v-if="breadcrumbCrumbs.length > 0"
@@ -1257,6 +1265,7 @@ import {
 	MAX_QUICK_ACTIONS,
 	normalisePinnedAction,
 	pillCountSource,
+	pillLook,
 	resolveCountPill,
 	resolveNextStep,
 	resolvePill,
@@ -2497,9 +2506,12 @@ export default {
 		 * `field`: `text`, a constant ("Inwoner"), or `countFrom`
 		 * (`{ register, schema, filter? }`) with `countLabel` (`{ one, other }`
 		 * with `{count}`), a count of a related list ("1 lopende zaak") that
-		 * shows nothing at 0.
+		 * shows nothing at 0. With `resolve: { register, schema, labelField?,
+		 * colorField?, iconField? }` the pill shows the referenced record's
+		 * label, takes its tone from that record's colour (an NL Design System
+		 * hue such as `red`, or a badge role) and shows its icon.
 		 *
-		 * @type {{field?: string, text?: string, countFrom?: object, countLabel?: object, colorMap?: object, labels?: object, variant?: string}|null}
+		 * @type {{field?: string, text?: string, countFrom?: object, countLabel?: object, colorMap?: object, labels?: object, variant?: string, resolve?: object}|null}
 		 */
 		typePill: {
 			type: Object,
@@ -2940,6 +2952,8 @@ export default {
 			pillCountSeq: 0,
 			/** The labels of the records pills with `resolve` point at, by pill key. */
 			pillRefLabels: {},
+			/** The colour and icon names read off the records pills with `resolve` point at, by pill key. */
+			pillRefLooks: {},
 			/** Sequence of the last pill label lookup, so a late answer for another record is dropped. */
 			pillRefSeq: 0,
 			/** `register/schema/id` the read-state call was last made for, so it is sent once per load. */
@@ -3488,10 +3502,11 @@ export default {
 					// `resolve`: the referenced record's label replaces the id, and
 					// keys the colour too ("Woo-verzoek", not a uuid).
 					const resolved = this.pillRefLabels[key]
+					const look = pillLook(this.pillRefLooks[key])
 					if (typeof resolved === 'string' && resolved !== '') {
-						return { ...pill, key, label: this.effectiveTranslate(resolved), colorKey: resolved }
+						return { ...pill, ...look, key, label: this.effectiveTranslate(resolved), colorKey: resolved }
 					}
-					return { ...pill, key, label: this.effectiveTranslate(pill.label) }
+					return { ...pill, ...look, key, label: this.effectiveTranslate(pill.label) }
 				})
 				.filter(Boolean)
 		},
@@ -3526,7 +3541,8 @@ export default {
 				.filter(([, config]) => config && config.resolve && config.resolve.register && config.resolve.schema && typeof config.field === 'string')
 				.map(([key, config]) => {
 					const pill = resolvePill({ field: config.field }, this.resolvedObject)
-					return pill ? [key, config.resolve.register, config.resolve.schema, config.resolve.labelField || '', pill.colorKey] : null
+					const { register, schema, labelField, colorField, iconField } = config.resolve
+					return pill ? [key, register, schema, labelField || '', pill.colorKey, colorField || '', iconField || ''] : null
 				})
 				.filter(Boolean)
 		},
@@ -5340,6 +5356,7 @@ export default {
 			const seq = ++this.pillRefSeq
 			if (targets.length === 0) {
 				this.pillRefLabels = {}
+				this.pillRefLooks = {}
 				return
 			}
 			if (!this._pillRefResolver) {
@@ -5352,14 +5369,30 @@ export default {
 				})
 			}
 			const labels = {}
-			await Promise.all(targets.map(async ([key, register, schema, labelField, id]) => {
-				const found = await this._pillRefResolver.resolve(register, schema, [id], labelField).catch(() => ({}))
+			const looks = {}
+			const field = async (register, schema, id, name) => {
+				if (!name) {
+					return null
+				}
+				const found = await this._pillRefResolver.resolve(register, schema, [id], name, { strict: true }).catch(() => ({}))
+				return found && typeof found[id] === 'string' ? found[id] : null
+			}
+			await Promise.all(targets.map(async ([key, register, schema, labelField, id, colorField, iconField]) => {
+				const [found, color, icon] = await Promise.all([
+					this._pillRefResolver.resolve(register, schema, [id], labelField).catch(() => ({})),
+					field(register, schema, id, colorField),
+					field(register, schema, id, iconField),
+				])
 				if (found && typeof found[id] === 'string') {
 					labels[key] = found[id]
 				}
+				if (color || icon) {
+					looks[key] = { color, icon }
+				}
 			}))
 			if (seq === this.pillRefSeq) {
 				this.pillRefLabels = labels
+				this.pillRefLooks = looks
 			}
 		},
 

package/src/components/CnDetailWidgetHost/CnDetailWidgetHost.vue

@@ -147,6 +147,39 @@
 			hidden
 			data-testid="cn-detail-widget-props-pending" />
 
+		<!-- A mount-mode leaf whose descriptor asks for the library card
+		     (`chrome: "card"`): the host draws the card, its title with the
+		     count the leaf reports, the leaf's actions in the title row and the
+		     library empty state. The leaf reports them through the `onHeader`
+		     mount prop and renders only its rows. -->
+		<CnWidgetWrapper
+			v-else-if="wrapsMountLeaf"
+			:title="leafCardTitle"
+			titleIconPosition="left"
+			:showActions="false"
+			:showRefresh="false"
+			:showRequestFeature="false"
+			:headerLink="cardHeaderLink"
+			class="cn-detail-page__leaf-card"
+			data-testid="cn-detail-widget-leaf-card">
+			<template v-if="leafCardIcon" #title-icon>
+				<CnIcon :name="leafCardIcon" :size="20" />
+			</template>
+			<template v-if="rendererHeader.count !== null" #title-meta>
+				<span class="cn-detail-page__catalog-count" data-testid="cn-detail-widget-header-count">{{ rendererHeader.count }}</span>
+			</template>
+			<template v-if="hasRendererHeaderItems" #actions>
+				<CnDetailWidgetHeaderItems :header="rendererHeader" />
+			</template>
+			<CnWidgetEmptyState
+				v-if="rendererHeader.empty"
+				:name="rendererHeader.empty.name"
+				:description="rendererHeader.empty.description" />
+			<CnLeafMountHost
+				:provider="integrationProvider"
+				:mountProps="integrationMountProps" />
+		</CnWidgetWrapper>
+
 		<CnLeafMountHost
 			v-else-if="isMountIntegration"
 			:provider="integrationProvider"
@@ -293,6 +326,7 @@ import CnObjectDataWidget from '../CnObjectDataWidget/CnObjectDataWidget.vue'
 import CnObjectFilesWidget from '../CnObjectFilesWidget/CnObjectFilesWidget.vue'
 import CnObjectGeoWidget from '../CnObjectGeoWidget/CnObjectGeoWidget.vue'
 import CnRelatedObjectsWidget from '../CnRelatedObjectsWidget/CnRelatedObjectsWidget.vue'
+import CnWidgetEmptyState from '../CnWidgetEmptyState/CnWidgetEmptyState.vue'
 import CnDetailWidgetHeaderItems from './CnDetailWidgetHeaderItems.vue'
 import { useIntegrationRegistry } from '../../composables/useIntegrationRegistry.js'
 import { normalizeLook } from '../../composables/useLook.js'
@@ -373,6 +407,7 @@ export default {
 		CnObjectDataWidget,
 		CnObjectGeoWidget,
 		CnRelatedObjectsWidget,
+		CnWidgetEmptyState,
 		CnWidgetWrapper,
 		NcActionButton,
 		CnEmptyContent,
@@ -628,7 +663,7 @@ export default {
 			 * `header` event (screens-relation-pages): a link and a note,
 			 * with the list's total already filled in.
 			 */
-			rendererHeader: { link: null, note: '', actions: [], pill: null },
+			rendererHeader: { link: null, note: '', actions: [], pill: null, count: null, empty: null },
 		}
 	},
 
@@ -844,6 +879,34 @@ export default {
 				&& typeof provider.unmount === 'function'
 		},
 
+		/**
+		 * Whether a mount-mode leaf gets the library card: on a card surface,
+		 * grid cell included, when its descriptor asks for it (`chrome:
+		 * "card"`). Opt-in, because a leaf that draws its own card would
+		 * otherwise sit in two.
+		 *
+		 * @return {boolean}
+		 * @spec openspec/changes/integration-leaf-card/specs/integration-leaf-card/spec.md#requirement-a-mount-mode-leaf-can-take-the-library-card
+		 */
+		wrapsMountLeaf() {
+			return !this.isBare && this.isMountIntegration && this.integrationProvider.chrome === 'card'
+		},
+
+		/**
+		 * The leaf card's title: the manifest's, else the descriptor's label.
+		 *
+		 * @return {string} The title in the user's language.
+		 */
+		leafCardTitle() {
+			const title = widgetTitleOf(this.widget)
+			return title ? this.translateLabel(title) : (this.integrationProvider?.label || '')
+		},
+
+		/** @return {string} The leaf card's icon: the manifest's, else the descriptor's. */
+		leafCardIcon() {
+			return this.widget?.icon || this.integrationProvider?.icon || ''
+		},
+
 		/**
 		 * Whether this render is using a provider's widget as its bare surface.
 		 *
@@ -1017,6 +1080,8 @@ export default {
 				// one that reads `objectId`.
 				integrationContext: this.widgetIntegrationContext,
 				...this.resolvedWidgetProps,
+				// A carded leaf reports its title row and empty state here.
+				...(this.wrapsMountLeaf ? { onHeader: this.onRendererHeader } : {}),
 			}
 		},
 
@@ -1221,11 +1286,12 @@ export default {
 
 	methods: {
 		/**
-		 * Take the header a content-only renderer, or an app widget in the
-		 * titled card, reports.
+		 * Take the header a content-only renderer, an app widget in the
+		 * titled card, or a carded mount-mode leaf (`onHeader`) reports.
 		 *
-		 * @param {{link?: object|null, note?: string, action?: {label: string, icon?: string, run: () => unknown}|null, actions?: Array<{label: string, icon?: string, run: () => unknown}>}} header The header parts.
+		 * @param {{link?: object|null, note?: string, action?: {label: string, icon?: string, run: () => unknown}|null, actions?: Array<{label: string, icon?: string, run: () => unknown}>, count?: number, empty?: {name: string, description?: string}|null}} header The header parts.
 		 * @spec openspec/changes/screens-relation-pages/specs/relation-pages/spec.md#requirement-a-record-list-shows-the-objects-that-point-at-this-record
+		 * @spec openspec/changes/integration-leaf-card/specs/integration-leaf-card/spec.md#requirement-a-carded-leaf-reports-its-count-actions-and-empty-state
 		 */
 		onRendererHeader(header) {
 			const link = header && header.link && typeof header.link === 'object' ? header.link : null
@@ -1234,7 +1300,11 @@ export default {
 			// `action` (one) and `actions` (several) both count, `action` first.
 			const actions = [header && header.action, ...((header && Array.isArray(header.actions)) ? header.actions : [])].filter(usable)
 			const pill = header && header.pill && typeof header.pill.label === 'string' && header.pill.label !== '' ? header.pill : null
-			this.rendererHeader = { link, note, actions, pill }
+			const count = header && Number.isFinite(header.count) ? header.count : null
+			const empty = header && header.empty && typeof header.empty.name === 'string' && header.empty.name !== ''
+				? { name: header.empty.name, description: typeof header.empty.description === 'string' ? header.empty.description : '' }
+				: null
+			this.rendererHeader = { link, note, actions, pill, count, empty }
 		},
 
 		/**
@@ -1372,6 +1442,31 @@ export default {
 	white-space: nowrap;
 }
 
+/* A leaf card in a narrow cell keeps its title and count: the title row
+   wraps and the actions move under it instead of squeezing the title out. */
+.cn-detail-page__leaf-card :deep(.cn-widget-wrapper__header) {
+	flex-wrap: wrap;
+}
+
+.cn-detail-page__leaf-card :deep(.cn-widget-wrapper__header-left) {
+	flex: 1 0 auto;
+}
+
+/* The count beside a card title: the grey 20px badge of the tab strip. */
+.cn-detail-page__catalog-count {
+	background-color: var(--color-border);
+	border-radius: 10px;
+	box-sizing: border-box;
+	color: var(--color-main-text);
+	display: inline-block;
+	font-size: 12px;
+	font-weight: 600;
+	line-height: 20px;
+	min-width: 20px;
+	padding: 0 6px;
+	text-align: center;
+}
+
 .cn-detail-page__catalog-note {
 	color: var(--color-text-maxcontrast);
 	font-size: 14px;