@conduction/nextcloud-vue 2.79.0 → 2.80.0

package/l10n/en.json

@@ -67,6 +67,7 @@
     "Follow this record to get its updates": "Follow this record to get its updates",
     "You will see it under Following. This register sends no change notifications.": "You will see it under Following. This register sends no change notifications.",
     "Since {date}": "Since {date}",
+    "since {date}": "since {date}",
     "Remove {name} as a follower": "Remove {name} as a follower",
     "Could not change following.": "Could not change following.",
     "Could not add this colleague.": "Could not add this colleague.",
@@ -226,6 +227,7 @@
     "Access URL": "Access URL",
     "Action": "Action",
     "Actions": "Actions",
+    "optional": "optional",
     "Add": "Add",
     "Add condition": "Add condition",
     "Add enum value": "Add enum value",
@@ -300,6 +302,9 @@
     "Constant": "Constant",
     "Copy": "Copy",
     "Copied": "Copied",
+    "Show": "Show",
+    "Copy {label}": "Copy {label}",
+    "Show {label}": "Show {label}",
     "Copy item": "Copy item",
     "Copy items": "Copy items",
     "Copy of {name}": "Copy of {name}",
@@ -794,6 +799,7 @@
     "View all ({total})": "View all ({total})",
     "No items": "No items",
     "Nothing here yet": "Nothing here yet",
+    "This list could not be loaded.": "This list could not be loaded.",
     "No items match this filter": "No items match this filter",
     "Could not load these records": "Could not load these records",
     "No conversations yet": "No conversations yet",
@@ -1361,9 +1367,14 @@
     "Quick filters": "Quick filters",
     "{count} filters": "{count} filters",
     "{count} more filters": "{count} more filters",
-    "{label} — show the other filters": "{label} — show the other filters"
+    "{label} — show the other filters": "{label} — show the other filters",
+    "{view}: not available on this list": "{view}: not available on this list"
   },
   "plurals": {
+    "{count} selected": [
+      "{count} selected",
+      "{count} selected"
+    ],
     "%n year": [
       "%n year",
       "%n years"

package/l10n/nl.json

@@ -67,6 +67,7 @@
     "Follow this record to get its updates": "Volg dit dossier om de wijzigingen te ontvangen",
     "You will see it under Following. This register sends no change notifications.": "U ziet het onder Volgend. Dit register stuurt geen wijzigingsmeldingen.",
     "Since {date}": "Sinds {date}",
+    "since {date}": "sinds {date}",
     "Remove {name} as a follower": "{name} als volger verwijderen",
     "Could not change following.": "Volgen kon niet worden gewijzigd.",
     "Could not add this colleague.": "Deze collega kon niet worden toegevoegd.",
@@ -225,6 +226,7 @@
     "Access URL": "Toegangs-URL",
     "Action": "Actie",
     "Actions": "Acties",
+    "optional": "niet verplicht",
     "Add": "Toevoegen",
     "Add condition": "Voorwaarde toevoegen",
     "Add enum value": "Opsommingswaarde toevoegen",
@@ -299,6 +301,9 @@
     "Constant": "Constante",
     "Copy": "Kopiëren",
     "Copied": "Gekopieerd",
+    "Show": "Tonen",
+    "Copy {label}": "{label} kopiëren",
+    "Show {label}": "{label} tonen",
     "Copy item": "Item kopiëren",
     "Copy items": "Items kopiëren",
     "Copy of {name}": "Kopie van {name}",
@@ -569,6 +574,10 @@
     "Open": "Openen",
     "Open access:": "Openbare toegang:",
     "Open row": "Rij openen",
+    "Select all rows": "Alle rijen selecteren",
+    "Select row": "Rij selecteren",
+    "Scrollable table": "Scrollbare tabel",
+    "{title} — scrollable table": "{title}, scrollbare tabel",
     "Operator": "Operator",
     "Order": "Volgorde",
     "Owner:": "Eigenaar:",
@@ -793,6 +802,7 @@
     "View all ({total})": "Alles bekijken ({total})",
     "No items": "Geen items",
     "Nothing here yet": "Hier staat nog niets",
+    "This list could not be loaded.": "Deze lijst kon niet worden geladen.",
     "No items match this filter": "Geen items voldoen aan dit filter",
     "Could not load these records": "Deze gegevens konden niet worden geladen",
     "No conversations yet": "Nog geen gesprekken",
@@ -1438,7 +1448,6 @@
     "You cannot see this folder": "Je kunt deze map niet zien",
     "{action} did not succeed": "{action} is niet gelukt",
     "Error:": "Fout:",
-    "optional": "optioneel",
     "Copy link": "Link kopiëren",
     "Details and sharing": "Details en delen",
     "Link copied": "Link gekopieerd",
@@ -1456,9 +1465,14 @@
     "1 day left": "Nog 1 dag",
     "{count} days left": "Nog {count} dagen",
     "1 day overdue": "1 dag te laat",
-    "{count} days overdue": "{count} dagen te laat"
+    "{count} days overdue": "{count} dagen te laat",
+    "{view}: not available on this list": "{view}: niet beschikbaar in deze lijst"
   },
   "plurals": {
+    "{count} selected": [
+      "{count} geselecteerd",
+      "{count} geselecteerd"
+    ],
     "%n year": [
       "%n jaar",
       "%n jaar"

package/package.json

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

@@ -175,6 +175,8 @@
 			:register="formRegister"
 			:initialData="formInitialValues || {}"
 			:dialogTitle="tr(formEntry.formTitle) || ''"
+			:eyebrow="tr(formEntry.formEyebrow) || ''"
+			:subtitle="tr(formEntry.formSubtitle) || ''"
 			:includeFields="formEntry.includeFields || null"
 			:excludeFields="formEntry.excludeFields || []"
 			:fieldOverrides="formEntry.fieldOverrides || {}"

package/src/components/CnActionsBar/CnActionsBar.md

@@ -222,3 +222,7 @@ Controlling the inline action button count — `inlineActionCount` sets how many
 `showBuildiqButton` is documented in the prop table of the component reference (board look, screens-chrome-parity).
 
 Slot `actions-end`: custom buttons after the primary Add button (CnIndexPage's saved views). Under the board look it renders in row 1, after the quick-filter chips.
+
+### Disabled view segments
+
+Under the board look `disabledViewModes` (an array of modes) draws view switch segments the page cannot open, in the fixed order table, cards, board, map, disabled and titled "<mode>: not available on this list". A mode that is also offered renders once, enabled. `CnIndexPage` fills it from `config.viewSwitch`.

package/src/components/CnActionsBar/CnActionsBar.vue

@@ -45,24 +45,27 @@
 				<div v-if="showViewToggle && viewSegments.length > 1"
 					class="cn-actions-bar__view-toggle"
 					role="group"
-					:aria-label="t('nextcloud-vue', 'View')">
+					:aria-label="t('nextcloud-vue', 'View mode')">
+					<!-- A segment the page cannot open (`disabledViewModes`) is drawn, as the board does, but disabled and named so. -->
 					<button
 						v-for="seg in viewSegments"
 						:key="seg.mode"
 						type="button"
 						class="cn-actions-bar__view-toggle-btn"
-						:class="{ 'cn-actions-bar__view-toggle-btn--active': viewMode === seg.mode }"
+						:class="{ 'cn-actions-bar__view-toggle-btn--active': viewMode === seg.mode, 'cn-actions-bar__view-toggle-btn--disabled': seg.disabled }"
 						:aria-pressed="viewMode === seg.mode"
 						:aria-label="seg.label"
-						:title="seg.label"
-						@click="$emit('view-mode-change', seg.mode)">
+						:title="seg.disabled ? unavailableViewLabel(seg.label) : seg.label"
+						:disabled="seg.disabled"
+						:data-mode="seg.mode"
+						@click="seg.disabled || $emit('view-mode-change', seg.mode)">
 						<CnIcon v-if="seg.icon"
 							:name="seg.icon"
-							:size="24"
+							:size="18"
 							class="cn-actions-bar__view-toggle-icon" />
-						<component :is="seg.fallback"
+						<component :is="seg.boardFallback || seg.fallback"
 							v-else
-							:size="24"
+							:size="18"
 							class="cn-actions-bar__view-toggle-icon" />
 					</button>
 				</div>
@@ -527,6 +530,7 @@ import CalendarMonthOutline from 'vue-material-design-icons/CalendarMonthOutline
 import Close from 'vue-material-design-icons/Close.vue'
 import ContentCopy from 'vue-material-design-icons/ContentCopy.vue'
 import Export from 'vue-material-design-icons/Export.vue'
+import FormatListBulleted from 'vue-material-design-icons/FormatListBulleted.vue'
 import FormatListBulletedSquare from 'vue-material-design-icons/FormatListBulletedSquare.vue'
 import Import from 'vue-material-design-icons/Import.vue'
 import Magnify from 'vue-material-design-icons/Magnify.vue'
@@ -585,6 +589,7 @@ export default {
 		Tune,
 		ViewColumnOutline,
 		ViewGridOutline,
+		FormatListBulleted,
 		FormatListBulletedSquare,
 		CalendarMonthOutline,
 		MapMarkerOutline,
@@ -634,6 +639,19 @@ export default {
 			default: () => [],
 		},
 
+		/**
+		 * Board look: view modes the switch draws although the page cannot
+		 * open them, as disabled segments (the boards always draw table, cards,
+		 * board and map). Ignored without the board look.
+		 *
+		 * @type {Array<string>}
+		 * @spec openspec/changes/screens-view-switch-parity/specs/view-switch-board-look/spec.md#requirement-the-manifest-can-draw-segments-the-page-cannot-open
+		 */
+		disabledViewModes: {
+			type: Array,
+			default: () => [],
+		},
+
 		/**
 		 * The number on the Filter button's badge. Empty (`null`) counts the
 		 * `activeFilterChips`.
@@ -1165,11 +1183,15 @@ export default {
 				// only when the page offers it. A mode the board switch does not
 				// name (list, calendar) follows, so it is never lost.
 				defs.board = { label: t('nextcloud-vue', 'Board'), icon: '', fallback: ViewColumnOutline }
+				// The board's list icon: plain bullets, not the boxed ones.
+				defs.table.boardFallback = FormatListBulleted
+				const disabled = (this.disabledViewModes || []).filter((mode) => !modes.includes(mode))
+				const all = [...modes, ...disabled]
 				const fixed = ['table', 'cards', 'board', 'map']
-				const rest = modes.filter((mode) => !fixed.includes(mode))
-				return [...fixed.filter((mode) => modes.includes(mode)), ...rest]
+				const rest = all.filter((mode) => !fixed.includes(mode))
+				return [...fixed.filter((mode) => all.includes(mode)), ...rest]
 					.filter((mode) => defs[mode])
-					.map((mode) => ({ mode, ...defs[mode] }))
+					.map((mode) => ({ mode, ...defs[mode], disabled: disabled.includes(mode) }))
 			}
 			return modes
 				.filter((mode) => defs[mode])
@@ -1228,6 +1250,16 @@ export default {
 	},
 
 	methods: {
+		/**
+		 * The tooltip of a segment the page cannot open.
+		 *
+		 * @param {string} label The segment's name.
+		 * @return {string} "Map: not available on this list".
+		 */
+		unavailableViewLabel(label) {
+			return t('nextcloud-vue', '{view}: not available on this list', { view: label })
+		},
+
 		/**
 		 * The accessible name of a filter chip's remove button.
 		 *

package/src/components/CnBannerWidget/CnBannerWidget.vue

@@ -64,6 +64,7 @@
 <script>
 import { translate as t } from '@nextcloud/l10n'
 import { NcNoteCard } from '@nextcloud/vue'
+import { normalizeLook } from '../../composables/useLook.js'
 import { followLinkClick, resolveHref } from '../../utils/linkNavigation.js'
 import { safeHref } from '../../utils/safeHref.js'
 import { nextUid } from '../../utils/uid.js'
@@ -78,6 +79,12 @@ const LAYOUTS = ['banner', 'attention']
 /** An attention card offers a primary and a secondary action, no more. */
 const MAX_ACTIONS = 2
 
+/**
+ * Under the board look the card takes what the boards draw: DqMijnWerk's
+ * "Vandaag eerst" has three secondary actions and the primary one.
+ */
+const MAX_ACTIONS_BOARD = 4
+
 /**
  * CnBannerWidget — declarative notice banner for dashboards and v2 pages
  * (`banner` widget type, Wave 1 of nextcloud-vue#91).
@@ -148,6 +155,8 @@ export default {
 		 * label that is not a key renders as written.
 		 */
 		cnTranslate: { default: () => (key) => key },
+		/** The app's look, provided by CnAppRoot or CnPageRenderer (`nextcloud` or `board`). */
+		cnLook: { default: 'nextcloud' },
 	},
 
 	props: {
@@ -232,7 +241,8 @@ export default {
 		},
 
 		/**
-		 * Attention card: at most two actions. Each is `{ label, route?,
+		 * Attention card: its actions, two at most (four under the board look,
+		 * or `maxActions`). Each is `{ label, route?,
 		 * href?, primary?, id? }`: `route` is a route name or location,
 		 * `href` an URL. An action with neither renders a button that emits
 		 * `action`. The first action is the primary one unless one sets
@@ -245,6 +255,17 @@ export default {
 			default: null,
 		},
 
+		/**
+		 * Attention card: how many actions it shows at most. Null takes the
+		 * default: two, four under the board look.
+		 *
+		 * @spec openspec/changes/screens-banner-actions-parity/specs/banner-actions/spec.md#requirement-the-board-attention-card-shows-the-boards-actions
+		 */
+		maxActions: {
+			type: Number,
+			default: null,
+		},
+
 		/**
 		 * Stored content blob (CnDashboardPage registry branch) carrying the
 		 * same keys as the flat props: `{ variant, text, visibleWhen, route,
@@ -403,12 +424,27 @@ export default {
 		},
 
 		/**
-		 * The attention card's actions: the first two that have a label, each
+		 * The attention card's actions: the first `actionCap` that have a label, each
 		 * with its href and whether it is the primary one.
 		 *
 		 * @return {Array<{key: string, id: (string|undefined), label: string, href: string, target: (object|null), primary: boolean, index: number}>}
 		 * @spec openspec/changes/workplace-dashboard-primitives/specs/workplace-dashboard-primitives/spec.md#requirement-attention-card
 		 */
+		/**
+		 * How many actions the attention card shows: `maxActions` (prop, then
+		 * content), else four under the board look and two without it.
+		 *
+		 * @return {number} The cap.
+		 * @spec openspec/changes/screens-banner-actions-parity/specs/banner-actions/spec.md#requirement-the-board-attention-card-shows-the-boards-actions
+		 */
+		actionCap() {
+			const explicit = this.maxActions ?? (this.content ? this.content.maxActions : undefined)
+			if (Number.isInteger(explicit) && explicit > 0) {
+				return explicit
+			}
+			return normalizeLook(this.cnLook) === 'board' ? MAX_ACTIONS_BOARD : MAX_ACTIONS
+		},
+
 		resolvedActions() {
 			const raw = this.actions || (this.content && this.content.actions) || []
 			if (!Array.isArray(raw)) {
@@ -416,7 +452,7 @@ export default {
 			}
 			const usable = raw
 				.filter((action) => action && typeof action === 'object' && typeof action.label === 'string' && action.label !== '')
-				.slice(0, MAX_ACTIONS)
+				.slice(0, this.actionCap)
 			const declaredPrimary = usable.findIndex((action) => action.primary === true)
 			const primaryIndex = declaredPrimary === -1 ? 0 : declaredPrimary
 			return usable.map((action, index) => {

package/src/components/CnCellRenderer/CnCellRenderer.vue

@@ -144,6 +144,30 @@
 			<span v-else class="cn-cell-renderer__dash">—</span>
 		</template>
 
+		<!-- Built-in "progress" widget: a bar with the percentage beside it,
+		     toned by widgetProps.thresholds, and an optional age badge
+		     ("Out of date 12 days") from widgetProps.badge. -->
+		<template v-else-if="widget === 'progress'">
+			<span v-if="progressPercent === null" class="cn-cell-renderer__dash">—</span>
+			<span v-else class="cn-cell-renderer__progress">
+				<span class="cn-cell-renderer__progress-line">
+					<span class="cn-cell-renderer__progress-bar" aria-hidden="true">
+						<span
+							class="cn-cell-renderer__progress-fill"
+							:class="'cn-cell-renderer__progress-fill--' + progressTone"
+							:style="{ width: progressPercent + '%' }" />
+					</span>
+					<strong
+						class="cn-cell-renderer__progress-value"
+						:class="'cn-cell-renderer__progress-value--' + progressTone">{{ progressPercent }}%</strong>
+				</span>
+				<span
+					v-if="progressBadge"
+					class="cn-cell-renderer__progress-badge"
+					:class="'cn-cell-renderer__progress-badge--' + progressBadge.tone">{{ progressBadge.label }}</span>
+			</span>
+		</template>
+
 		<!-- Explicit column formatter — overrides the type-aware paths below -->
 		<template v-else-if="hasFormatter">
 			<span :title="rawTitle">{{ formattedValue }}</span>
@@ -229,10 +253,11 @@ import CheckBold from 'vue-material-design-icons/CheckBold.vue'
 import CnFkResolveCell from '../CnFkResolveCell/CnFkResolveCell.vue'
 import CnGroupNameCell from './CnGroupNameCell.vue'
 import { normalizeLook } from '../../composables/useLook.js'
-import { formatAge, formatBoardDate, resolveAgeVariant } from '../../utils/boardDate.js'
+import { ageInDays, formatAge, formatBoardDate, resolveAgeVariant } from '../../utils/boardDate.js'
 import { parseDateValue, resolveDateVariant } from '../../utils/dateVariant.js'
 import { safeCurrencyCode } from '../../utils/formatMetric.js'
 import { objectFieldValue } from '../../utils/objectName.js'
+import { readPath } from '../../utils/readPath.js'
 import { safeHref } from '../../utils/safeHref.js'
 import { formatValue, isGroupProp } from '../../utils/schema.js'
 import { CnStatusBadge } from '../CnStatusBadge/index.js'
@@ -609,6 +634,83 @@ export default {
 			return formatAge(this.value)
 		},
 
+		/**
+		 * `progress` widget: the value as a whole percentage of
+		 * `widgetProps.max` (default 100), clamped to 0..100. An empty value
+		 * falls back to the first `widgetProps.fallbackFields` row field that
+		 * holds a number. Null when nothing holds one.
+		 *
+		 * @return {number|null}
+		 * @spec openspec/changes/abstract-progress-cell/specs/progress-cell/spec.md#requirement-a-progress-cell-draws-a-toned-bar-with-its-percentage
+		 */
+		progressPercent() {
+			const props = this.widgetProps || {}
+			const fallbacks = Array.isArray(props.fallbackFields) ? props.fallbackFields : []
+			const candidates = [this.value, ...fallbacks.map((field) => readPath(this.row || {}, field))]
+			const raw = candidates.find((v) => v !== null && v !== undefined && v !== '' && !Number.isNaN(Number(v)))
+			if (raw === undefined) {
+				return null
+			}
+			const max = Number(props.max) > 0 ? Number(props.max) : 100
+			return Math.max(0, Math.min(100, Math.round((Number(raw) / max) * 100)))
+		},
+
+		/**
+		 * `progress` widget: the tone. `widgetProps.thresholds`
+		 * `{ good: 60, warn: 30 }` (the defaults): at or above `good` is
+		 * success, at or above `warn` is warning, below is error. With
+		 * `widgetProps.lowerIsBetter` the scale turns around.
+		 *
+		 * @return {'success'|'warning'|'error'}
+		 * @spec openspec/changes/abstract-progress-cell/specs/progress-cell/spec.md#requirement-a-progress-cell-draws-a-toned-bar-with-its-percentage
+		 */
+		progressTone() {
+			const props = this.widgetProps || {}
+			const thresholds = props.thresholds || {}
+			const good = Number.isFinite(Number(thresholds.good)) ? Number(thresholds.good) : 60
+			const warn = Number.isFinite(Number(thresholds.warn)) ? Number(thresholds.warn) : 30
+			const value = props.lowerIsBetter === true ? 100 - this.progressPercent : this.progressPercent
+			if (value >= good) {
+				return 'success'
+			}
+			return value >= warn ? 'warning' : 'error'
+		},
+
+		/**
+		 * `progress` widget: the age badge, or null. `widgetProps.badge`
+		 * `{ label, dateField, afterDays, when?, tone? }`: shown when the row's
+		 * `dateField` (default `@self.updated`) lies `afterDays` or more days
+		 * back and every `when` field equals its value. `label` is translated
+		 * and takes `{days}`.
+		 *
+		 * @return {{label: string, tone: string}|null}
+		 * @spec openspec/changes/abstract-progress-cell/specs/progress-cell/spec.md#requirement-a-progress-cell-can-carry-an-age-badge
+		 */
+		progressBadge() {
+			const badge = this.widgetProps && this.widgetProps.badge
+			if (!badge || typeof badge !== 'object' || !badge.label) {
+				return null
+			}
+			const row = this.row || {}
+			const when = badge.when && typeof badge.when === 'object' ? badge.when : {}
+			for (const [field, expected] of Object.entries(when)) {
+				const actual = readPath(row, field)
+				if (actual !== undefined && actual !== null && actual !== '' && String(actual) !== String(expected)) {
+					return null
+				}
+			}
+			const days = ageInDays(readPath(row, badge.dateField || '@self.updated'))
+			const after = Number(badge.afterDays)
+			if (days === null || !Number.isFinite(after) || days < after) {
+				return null
+			}
+			const label = this.cnTranslate(badge.label)
+			return {
+				label: String(label).replace(/\{days\}/g, String(days)),
+				tone: ['error', 'warning', 'success'].includes(badge.tone) ? badge.tone : 'error',
+			}
+		},
+
 		/**
 		 * `age` widget: the variant of the first `widgetProps.variantWhen`
 		 * rule the shown days match, or '' for none.
@@ -1236,6 +1338,91 @@ export default {
 	white-space: nowrap;
 }
 
+/* The progress cell (abstract-progress-cell): a 56 x 8 bar, the percentage
+   8px beside it in the bar's tone, and an optional age badge after them, as
+   PqLeads' Winkans column. The value is bold, so the tone is not the only signal. */
+.cn-cell-renderer__progress {
+	display: inline-flex;
+	flex-wrap: wrap;
+	align-items: center;
+	gap: 4px 8px;
+}
+
+.cn-cell-renderer__progress-line {
+	display: inline-flex;
+	align-items: center;
+	gap: 8px;
+	white-space: nowrap;
+}
+
+.cn-cell-renderer__progress-bar {
+	display: inline-block;
+	width: 56px;
+	height: 8px;
+	border-radius: 4px;
+	background: var(--color-background-dark);
+	overflow: hidden;
+}
+
+.cn-cell-renderer__progress-fill {
+	display: block;
+	height: 100%;
+}
+
+.cn-cell-renderer__progress-fill--success {
+	background: var(--color-element-success, var(--color-success));
+}
+
+.cn-cell-renderer__progress-fill--warning {
+	background: var(--color-element-warning, var(--color-warning));
+}
+
+.cn-cell-renderer__progress-fill--error {
+	background: var(--color-element-error, var(--color-error));
+}
+
+.cn-cell-renderer__progress-value {
+	font-size: 14px;
+	font-weight: 700;
+}
+
+.cn-cell-renderer__progress-value--success {
+	color: var(--color-text-success, var(--color-success-text));
+}
+
+.cn-cell-renderer__progress-value--warning {
+	color: var(--color-text-warning, var(--color-warning-text));
+}
+
+.cn-cell-renderer__progress-value--error {
+	color: var(--color-text-error, var(--color-error-text));
+}
+
+.cn-cell-renderer__progress-badge {
+	display: inline-block;
+	padding: 3px 10px;
+	border-radius: 12px;
+	font-size: 13px;
+	font-weight: 600;
+	white-space: nowrap;
+}
+
+.cn-cell-renderer__progress-badge--error {
+	color: var(--color-text-error, var(--color-error-text));
+	background: var(--color-error-hover, var(--color-background-dark));
+	background: color-mix(in srgb, var(--color-error) 12%, transparent);
+}
+
+.cn-cell-renderer__progress-badge--warning {
+	color: var(--color-text-warning, var(--color-warning-text));
+	background: color-mix(in srgb, var(--color-warning) 14%, transparent);
+}
+
+.cn-cell-renderer__progress-badge--success {
+	color: var(--color-text-success, var(--color-success-text));
+	background: color-mix(in srgb, var(--color-success) 12%, transparent);
+}
+
 .cn-cell-renderer__age--success {
 	color: var(--color-text-success, var(--color-success-text));
 }

package/src/components/CnDataTable/CnDataTable.vue

@@ -130,6 +130,7 @@
 								col.class || '',
 								pinClass(leadingCount + colIndex),
 								isGrowColumn(col) ? 'cn-table-col--grow' : '',
+								colIndex === 0 ? 'cn-table-head--title' : '',
 							]"
 							:style="{ ...(col.width ? { width: col.width } : {}), ...pinStyle(leadingCount + colIndex) }"
 							:aria-sort="ariaSortFor(col)"

package/src/components/CnDetailPage/CnDetailPage.md

@@ -422,7 +422,7 @@ Four levels of action and the case surfaces around them. All opt in. See [the re
 | `quickActions` | Array | `[]` | At most three always visible header buttons. |
 | `actionsMenu` | Object \| null | `null` | `{ showRefresh?, showHelpLinks?, label? }` for the overflow menu. |
 | `nextStep` | Object \| null | `null` | The "what now" card per stage, rendered by `CnNextStepCard`. |
-| `typePill` | Object \| null | `null` | `{ field, colorMap?, labels?, variant? }`, a pill above the title. |
+| `typePill` | Object \| null | `null` | `{ field, colorMap?, labels?, variant? }`, a pill above the title. Instead of `field`: `text` (a constant) or `countFrom` + `countLabel` (a count of a related list). |
 | `statusPill` | Object \| null | `null` | A second pill, same shape. |
 | `headerFields` | Array | `[]` | Fields shown as chips under the title (manifest `config.headerFields`). Each entry is a property key, or `{ key, format, labelField, colorField, warnWhenPast }`; `format` is `text` (default), `mono`, `badge`, `user` or `date`. A `$ref` value shows `labelField` of the referenced object and falls back to the raw id in mono; a badge maps `colorField` (`success`, `warning`, `error`, `info`, `neutral`) to a variant; `warnWhenPast` gives a past date the error variant. An empty value shows no chip, a page without the key shows no row. Each chip reads "Title: value" to a screen reader, and the row prints as plain text. |
 | `sideColumn` | Array | `[]` | Widget definitions or widget ids, rendered as a column of cards beside the body. |