@conduction/nextcloud-vue 2.56.0-beta.64 → 2.56.0-beta.66

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.56.0-beta.64",
+  "version": "2.56.0-beta.66",
   "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/CnAppRoot/CnAppRoot.vue

@@ -758,6 +758,7 @@ import { installModalStack, uninstallModalStack } from '../../utils/modalStack.j
 import { OBJECTS_CHANGED_EVENT } from '../../utils/objectSignals.js'
 import { resolveBrand } from '../../utils/resolveBrand.js'
 import { resolveFilterTokens } from '../../utils/resolveFilterTokens.js'
+import { pageOffersSavedViews } from '../../utils/savedViewHelpers.js'
 import { normalizeSavedViewMenu, SAVED_VIEW_MENU_KEY, SAVED_VIEW_MENU_PREFIX, syncSavedViewMenu, toggleSavedViewMenuEntry, withSavedViewMenu } from '../../utils/savedViewMenu.js'
 import { passesContextPredicates } from '../../utils/visibleIfContext.js'
 
@@ -2400,7 +2401,7 @@ export default {
 		 */
 		offersSavedViews() {
 			const pages = this.manifest && Array.isArray(this.manifest.pages) ? this.manifest.pages : []
-			return pages.some((page) => page && page.config && page.config.allowSavedViews === true)
+			return pages.some((page) => page && page.type === 'index' && pageOffersSavedViews(page.config))
 		},
 
 		/**

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"
@@ -126,20 +130,13 @@
 							</component>
 							<!-- The one Follow control beside the title (manifest `config.follow`):
 							     shown when the object carries `@self.watching`. There is no star:
-							     a favourite is a follow with notifications off. -->
+							     a favourite is a follow with notifications off. The board look
+							     draws it on a row of its own under the breadcrumb. -->
 							<span
-								v-if="showFollowToggle"
+								v-if="showFollowToggle && !isBoard"
 								class="cn-detail-page__interactions"
 								data-testid="cn-detail-page-interactions">
-								<CnFollowToggle
-									:register="register"
-									:schema="schema"
-									:objectId="String(objectId)"
-									:watching="resolvedSelf.watching === true"
-									:notify="typeof resolvedSelf.watchNotify === 'boolean' ? resolvedSelf.watchNotify : null"
-									:watcherCount="typeof resolvedSelf.watcherCount === 'number' ? resolvedSelf.watcherCount : null"
-									:canManage="!!(resolvedSelf.can && resolvedSelf.can.manage === true)"
-									:notifies="followNotifies" />
+								<CnFollowToggle v-bind="followToggleProps" />
 							</span>
 						</div>
 						<!--
@@ -492,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"
@@ -517,6 +518,17 @@
 					:schema="currentSchema"
 					:register="register" />
 			</div>
+			<!-- Row 3 of the board look's header: the Follow control under the
+			     breadcrumb, clear of the title row and its actions (DqZaak
+			     "Volgen"). -->
+			<div
+				v-if="isBoard && showFollowToggle"
+				class="cn-detail-page__header-row3"
+				data-testid="cn-detail-page-header-row3">
+				<span class="cn-detail-page__interactions" data-testid="cn-detail-page-interactions">
+					<CnFollowToggle v-bind="followToggleProps" />
+				</span>
+			</div>
 			<!-- A widget inside the header (manifest `config.headerWidget`), on
 			     a row of its own under the title and the actions: the stages
 			     bars of the board's case card. Drawn without a card of its own,
@@ -1253,6 +1265,7 @@ import {
 	MAX_QUICK_ACTIONS,
 	normalisePinnedAction,
 	pillCountSource,
+	pillLook,
 	resolveCountPill,
 	resolveNextStep,
 	resolvePill,
@@ -2493,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,
@@ -2936,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. */
@@ -3484,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)
 		},
@@ -3522,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)
 		},
@@ -4319,6 +4339,26 @@ export default {
 				&& this.register !== '' && this.schema !== '' && this.objectId !== ''
 		},
 
+		/**
+		 * The props of the Follow control, wherever the header draws it.
+		 *
+		 * @return {object} The CnFollowToggle props.
+		 * @spec openspec/changes/board-follow-row/specs/board-follow-row/spec.md#requirement-the-board-follow-control-sits-under-the-breadcrumb
+		 */
+		followToggleProps() {
+			const self = this.resolvedSelf
+			return {
+				register: this.register,
+				schema: this.schema,
+				objectId: String(this.objectId),
+				watching: self.watching === true,
+				notify: typeof self.watchNotify === 'boolean' ? self.watchNotify : null,
+				watcherCount: typeof self.watcherCount === 'number' ? self.watcherCount : null,
+				canManage: !!(self.can && self.can.manage === true),
+				notifies: this.followNotifies,
+			}
+		},
+
 		/**
 		 * The `_extend[]` values of the object read: the page's own, plus
 		 * `@self.can` while the Follow toggle can render (OpenRegister returns
@@ -5316,6 +5356,7 @@ export default {
 			const seq = ++this.pillRefSeq
 			if (targets.length === 0) {
 				this.pillRefLabels = {}
+				this.pillRefLooks = {}
 				return
 			}
 			if (!this._pillRefResolver) {
@@ -5328,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
 			}
 		},