@conduction/nextcloud-vue 2.77.0 → 2.78.0

package/src/components/CnDataTable/CnDataTable.vue

@@ -1646,19 +1646,24 @@ export default {
 		 * handed a `:schema` for at all) still get type-aware rendering.
 		 * `enumLabels` rides with `enum` rather than getting its own `if`
 		 * branch: a column can't usefully declare labels without also
-		 * declaring the codes they label.
+		 * declaring the codes they label. A column `colorMap` (raw value to
+		 * badge variant) colours the enum pill from the manifest and wins over
+		 * the schema property's own `colorMap` / `x-color-map`.
 		 *
 		 * @param {object} col Column definition.
 		 * @return {object} Property definition for CnCellRenderer.
+		 * @spec openspec/changes/screens-cell-pill-parity/specs/cell-pill-tones/spec.md#requirement-a-manifest-column-colours-its-enum-pills
 		 */
 		columnProperty(col) {
 			const base = this.getSchemaProperty(col.key)
-			if (col && (col.format || col.type || col.enum)) {
+			const colorMap = col && col.colorMap && typeof col.colorMap === 'object' && !Array.isArray(col.colorMap) ? col.colorMap : null
+			if (col && (col.format || col.type || col.enum || colorMap)) {
 				return {
 					...base,
 					...(col.type ? { type: col.type } : {}),
 					...(col.format ? { format: col.format } : {}),
 					...(col.enum ? { enum: col.enum, enumLabels: col.enumLabels || base.enumLabels } : {}),
+					...(colorMap ? { colorMap } : {}),
 				}
 			}
 			return base

package/src/components/CnDateRangePicker/CnDateRangePicker.vue

@@ -69,6 +69,44 @@ export const DEFAULT_DATE_RANGE_PRESETS = Object.freeze([
 	{ id: 'custom', label: 'Custom range', days: null },
 ])
 
+/**
+ * The library's own translations of the default preset labels. Literal
+ * `t()` calls, so the strings are extracted into the `nextcloud-vue`
+ * catalogue.
+ *
+ * @type {{[label: string]: function(): string}}
+ */
+const LIBRARY_PRESET_LABELS = Object.freeze({
+	'Last 8 hours': () => t('nextcloud-vue', 'Last 8 hours'),
+	'Last 24 hours': () => t('nextcloud-vue', 'Last 24 hours'),
+	Today: () => t('nextcloud-vue', 'Today'),
+	'Last 7 days': () => t('nextcloud-vue', 'Last 7 days'),
+	'Last 30 days': () => t('nextcloud-vue', 'Last 30 days'),
+	'Last 90 days': () => t('nextcloud-vue', 'Last 90 days'),
+	'Custom range': () => t('nextcloud-vue', 'Custom range'),
+})
+
+/**
+ * A preset label in the user's language: the host translation when the app's
+ * catalogue has the key, else the library's own translation of a default
+ * label ("Last 30 days"), else the label as written.
+ *
+ * @spec openspec/changes/screens-dashboard-i18n/specs/dashboard-page/spec.md#requirement-date-range-preset-labels-are-translated
+ * @param {string} label The preset label (an i18n key).
+ * @param {function(string): string} [translate] The host translate function.
+ * @return {string} The translated label.
+ */
+export function translatePresetLabel(label, translate) {
+	if (typeof label !== 'string' || label === '') {
+		return ''
+	}
+	const own = typeof translate === 'function' ? translate(label) : label
+	if (typeof own === 'string' && own !== '' && own !== label) {
+		return own
+	}
+	return Object.hasOwn(LIBRARY_PRESET_LABELS, label) ? LIBRARY_PRESET_LABELS[label]() : label
+}
+
 /**
  * Resolve a `period` preset into its calendar-aligned `{ from, to }`
  * window — the CURRENT week / month / quarter / year to date, not a
@@ -196,6 +234,11 @@ export default {
 		NcSelect,
 	},
 
+	inject: {
+		/** Host translate function provided by CnAppRoot, for app-authored preset labels. */
+		cnTranslate: { default: () => (key) => key },
+	},
+
 	props: {
 		/**
 		 * Current range value. `from` / `to` are ISO-8601 UTC strings;
@@ -327,7 +370,7 @@ export default {
 		},
 
 		presetOptions() {
-			return this.presets.map((p) => ({ id: p.id, label: p.label, days: p.days }))
+			return this.presets.map((p) => ({ id: p.id, label: translatePresetLabel(p.label, this.cnTranslate), days: p.days }))
 		},
 
 		selectedPresetOption() {

package/src/components/CnFormDialog/CnFormDialog.vue

@@ -1466,11 +1466,17 @@ export default {
 
 		/**
 		 * What the draft indicator announces, or '' when it says nothing.
+		 * While the dialog shows a failed save it never says Saved: it says
+		 * the draft is kept on this device, so it cannot be read as the
+		 * server save that just failed.
 		 *
 		 * @return {string} The text.
+		 * @spec openspec/changes/cell-labels-and-draft-indicator/specs/cell-labels-and-draft-indicator/spec.md#requirement-the-draft-indicator-never-reads-as-a-server-save-after-a-failed-save
 		 */
 		draftIndicatorLabel() {
-			return draftIndicatorText(this.draftState, this.draftSavedAt)
+			const saveFailed = this.result !== null && typeof this.result === 'object'
+				&& (Boolean(this.result.error) || this.result.success === false)
+			return draftIndicatorText(this.draftState, this.draftSavedAt, Date.now(), { saveFailed })
 		},
 
 		isCreateMode() {

package/src/components/CnFormPage/CnFormPage.vue

@@ -954,11 +954,14 @@ export default {
 
 		/**
 		 * What the draft indicator announces: Saving, then Saved with a relative time.
+		 * After a failed submit it says the draft is kept on this device instead,
+		 * so it cannot be read as the server save that just failed.
 		 *
 		 * @return {string} The text, or '' before anything is typed.
+		 * @spec openspec/changes/cell-labels-and-draft-indicator/specs/cell-labels-and-draft-indicator/spec.md#requirement-the-draft-indicator-never-reads-as-a-server-save-after-a-failed-save
 		 */
 		draftIndicatorLabel() {
-			return draftIndicatorText(this.draftState, this.draftSavedAt)
+			return draftIndicatorText(this.draftState, this.draftSavedAt, Date.now(), { saveFailed: Boolean(this.lastError) })
 		},
 	},
 

package/src/components/CnIndexPage/CnIndexPage.vue

@@ -5156,6 +5156,7 @@ export default {
 		 * stable key and a variant.
 		 *
 		 * @spec openspec/changes/zuiddrecht-pixel-gaps-3/specs/zuiddrecht-pixel-gaps-3/spec.md#requirement-an-index-page-can-take-the-board-header
+		 * @spec openspec/changes/screens-index-header-buttons-parity/specs/index-list-board-look/spec.md#requirement-the-add-header-button-carries-a-plus
 		 * @return {Array<{key: string, label: string, action: string, variant: string, icon: string, format: string}>}
 		 */
 		resolvedHeaderButtons() {
@@ -5168,6 +5169,11 @@ export default {
 					if (label === '' && button.action === 'add') {
 						label = this.resolvedAddLabel
 					}
+					// The board's primary button reads "+ New request": the Add
+					// button takes the plus unless the manifest names an icon.
+					if (this.isBoardLook && button.action === 'add' && icon === '') {
+						icon = 'Plus'
+					}
 					// The board's header: Export reads "Download" with its icon and
 					// the Actions menu reads "Actions", without the manifest saying so.
 					if (this.isBoardLook && label === '' && button.action === 'export') {

package/src/components/CnStatWidget/CnStatWidget.vue

@@ -33,11 +33,14 @@
 		</div>
 
 		<div class="cn-kpi-card__body cn-stat-widget__body">
-			<div v-if="content.label || rangePresets.length" class="cn-kpi-card__title cn-stat-widget__label">
+			<div
+				v-if="content.label || rangePresets.length"
+				class="cn-kpi-card__title cn-stat-widget__label"
+				:class="{ 'cn-kpi-card__title--badge-end': hasEndBadge }">
 				<!-- Board look: the icon is an 18px glyph before the label, and
 				     only when the tile links to a filtered list. -->
 				<span
-					v-if="isBoardLook && isLinked && resolvedIcon"
+					v-if="isBoardLook && isLinked && resolvedIcon && !hasEndBadge"
 					class="cn-kpi-card__glyph cn-stat-widget__glyph"
 					data-testid="cn-stat-widget-glyph"
 					aria-hidden="true">
@@ -66,6 +69,17 @@
 						{{ effectiveTranslate(preset.label || preset.id) }}
 					</option>
 				</select>
+				<!-- Board look, `content.iconPlacement: "end"`: the icon sits in a
+				     32px circle at the right of the label row, tinted by the
+				     tile's state (DqDashboard). -->
+				<span
+					v-if="hasEndBadge"
+					class="cn-kpi-card__badge cn-stat-widget__badge-icon"
+					:class="'cn-kpi-card__badge--' + stateTone"
+					data-testid="cn-stat-widget-icon-badge"
+					aria-hidden="true">
+					<CnWidgetIcon :name="resolvedIcon" :size="18" />
+				</span>
 			</div>
 
 			<div class="cn-kpi-card__value-row cn-stat-widget__value-row">
@@ -1330,9 +1344,45 @@ export default {
 			if (layout === 'vertical' || layout === 'stacked') {
 				return layout
 			}
+			// Board look: every KPI tile on the screens is stacked, so a tile
+			// that names no layout takes it. An explicit `horizontal` stays.
+			if (this.isBoardLook && layout === undefined) {
+				return 'stacked'
+			}
 			return 'horizontal'
 		},
 
+		/**
+		 * Whether the board look draws the icon in a tinted circle at the
+		 * right of the label row (`content.iconPlacement: "end"`), as the
+		 * DqDashboard tiles. Off without the board look and without an icon.
+		 *
+		 * @spec openspec/changes/screens-stat-tile-parity/specs/dashboard-page/spec.md#requirement-the-board-kpi-tile-can-carry-its-icon-at-the-end
+		 * @return {boolean}
+		 */
+		hasEndBadge() {
+			return this.isBoardLook
+				&& (this.content || {}).iconPlacement === 'end'
+				&& Boolean(this.resolvedIcon)
+		},
+
+		/**
+		 * The tile's state as a tone name for the end badge: the variant the
+		 * value colour comes from (`success`, `warning`, `error`), else
+		 * `primary`. A custom `valueColor` has no tone and reads as primary.
+		 *
+		 * @spec openspec/changes/screens-stat-tile-parity/specs/dashboard-page/spec.md#requirement-the-board-kpi-tile-can-carry-its-icon-at-the-end
+		 * @return {'primary'|'success'|'warning'|'error'}
+		 */
+		stateTone() {
+			const color = this.variantColor
+			if (!color) {
+				return 'primary'
+			}
+			const tone = ['success', 'warning', 'error'].find((name) => VARIANT_COLORS[name] === color)
+			return tone || 'primary'
+		},
+
 		/**
 		 * Whether the tile takes the stacked board look (`content.layout:
 		 * "stacked"`): a plain muted label, the number at 34px in the text

package/src/components/CnStatusBadge/CnStatusBadge.vue

@@ -10,6 +10,8 @@
 </template>
 
 <script>
+import { isBadgeVariant } from '../../utils/badgeVariants.js'
+
 /**
  * CnStatusBadge — Color-coded pill badge for status, priority, or category display.
  *
@@ -39,12 +41,14 @@ export default {
 		},
 
 		/**
-		 * Color variant: 'default', 'primary', 'success', 'warning', 'error', 'info'
+		 * Color variant: 'default', 'primary', 'success', 'warning', 'error',
+		 * 'info', or one of the two board tones without a Nextcloud role,
+		 * 'purple' (work in progress) and 'teal' (handed on).
 		 */
 		variant: {
 			type: String,
 			default: 'default',
-			validator: (v) => ['default', 'primary', 'success', 'warning', 'error', 'info'].includes(v),
+			validator: (v) => isBadgeVariant(v),
 		},
 
 		/** Size: 'small' or 'medium' */

package/src/composables/__tests__/useObjectPresence.spec.js

@@ -40,6 +40,7 @@ jest.mock('@nextcloud/router', () => ({
 jest.mock('@nextcloud/auth', () => ({
 	__esModule: true,
 	getCurrentUser: () => ({ uid: 'anna' }),
+	getRequestToken: () => 'token-123',
 }))
 
 /** The subscription the composable made, so a test can push into it. */
@@ -246,6 +247,29 @@ describe('useObjectPresence', () => {
 		scope.stop()
 	})
 
+	it('🔴 a closing tab departs with a beacon that carries the request token', async () => {
+		// A beacon cannot set headers, and the departure route keeps the CSRF
+		// check, so the token has to travel in the form body. The old beacon
+		// sent no body at all and could never pass that check.
+		const sendBeacon = jest.fn(() => true)
+		const original = navigator.sendBeacon
+		Object.defineProperty(navigator, 'sendBeacon', { value: sendBeacon, configurable: true, writable: true })
+		try {
+			await withPresence(async () => {
+				await nextTick()
+				await Promise.resolve()
+				window.dispatchEvent(new Event('beforeunload'))
+			})
+		} finally {
+			Object.defineProperty(navigator, 'sendBeacon', { value: original, configurable: true, writable: true })
+		}
+
+		const call = sendBeacon.mock.calls.find(([url]) => url === '/apps/openregister/api/objects/dossiq/case/case-1/presence?_method=DELETE')
+		expect(call).toBeDefined()
+		expect(call[1]).toBeInstanceOf(FormData)
+		expect(call[1].get('requesttoken')).toBe('token-123')
+	})
+
 	it('does nothing at all when disabled', async () => {
 		const scope = effectScope()
 		scope.run(() => {

package/src/composables/useFormDraft.js

@@ -127,12 +127,22 @@ export function readDraft(key, { objectUpdated = '', now = Date.now() } = {}) {
  * What the draft indicator says: "Saving" while a local write is pending,
  * "Saved just now" / "Saved 3 minutes ago" once it landed, nothing before that.
  *
+ * After a failed save (`options.saveFailed`) it never says Saving or Saved:
+ * next to a server error those words read as if the record had been saved.
+ * It then says "Draft kept on this device" when a local copy is stored, and
+ * nothing otherwise.
+ *
  * @param {string} state `idle`, `saving` or `saved`.
  * @param {number} [savedAt] When the last write landed, in epoch ms.
  * @param {number} [now] The current epoch ms, for testing.
+ * @param {{saveFailed?: boolean}} [options] `saveFailed`: the form shows a failed save.
  * @return {string} The text, or '' when it says nothing.
+ * @spec openspec/changes/cell-labels-and-draft-indicator/specs/cell-labels-and-draft-indicator/spec.md#requirement-the-draft-indicator-never-reads-as-a-server-save-after-a-failed-save
  */
-export function draftIndicatorText(state, savedAt = 0, now = Date.now()) {
+export function draftIndicatorText(state, savedAt = 0, now = Date.now(), options = {}) {
+	if (options && options.saveFailed === true) {
+		return state === 'saved' ? t('nextcloud-vue', 'Draft kept on this device') : ''
+	}
 	if (state === 'saving') {
 		return t('nextcloud-vue', 'Saving')
 	}

package/src/composables/useObjectPresence.js

@@ -1,7 +1,7 @@
 // SPDX-License-Identifier: EUPL-1.2
 // Copyright (C) 2026 Conduction B.V.
 
-import { getCurrentUser } from '@nextcloud/auth'
+import { getCurrentUser, getRequestToken } from '@nextcloud/auth'
 import axios from '@nextcloud/axios'
 import { generateUrl } from '@nextcloud/router'
 import { computed, getCurrentScope, onScopeDispose, ref, unref, watch } from 'vue'
@@ -201,7 +201,15 @@ export function useObjectPresence(register, schema, objectUuid, options = {}) {
 	 * the browser and survives the navigation, which is the only mechanism
 	 * that does.
 	 *
+	 * 🔴 THE TOKEN RIDES IN THE BODY. A beacon cannot set headers, so the
+	 * `requesttoken` header axios adds is missing, and the departure route
+	 * keeps Nextcloud's CSRF check. Nextcloud also reads the token from a
+	 * POST field, so it goes in a form body. Without it the beacon answers
+	 * 412; before OpenRegister registered POST on `/presence` it answered 405
+	 * (seen on cloud.conduction.nl on every dossiq case page).
+	 *
 	 * @return {void}
+	 * @spec openspec/changes/no-calls-to-missing-apps-and-presence-beacon/specs/object-presence/spec.md#requirement-a-closing-tab-departs-through-a-route-that-exists
 	 */
 	function beaconDepart() {
 		const url = presenceUrl()
@@ -209,9 +217,12 @@ export function useObjectPresence(register, schema, objectUuid, options = {}) {
 			return
 		}
 		try {
-			// No DELETE from a beacon — it is always a POST — so the server's
-			// own POST release path is used. Both reach one implementation.
-			navigator.sendBeacon?.(url.replace(/\/presence$/, '/presence?_method=DELETE'))
+			// No DELETE from a beacon, it is always a POST, so the server's
+			// POST departure route is used, marked `_method=DELETE`. Both reach
+			// one implementation.
+			const body = new FormData()
+			body.append('requesttoken', getRequestToken() || '')
+			navigator.sendBeacon?.(url.replace(/\/presence$/, '/presence?_method=DELETE'), body)
 		} catch {
 			// Best effort.
 		}

package/src/css/badge.css

@@ -2,6 +2,15 @@
    @conduction/nextcloud-vue — Status Badge
    ======================================== */
 
+/* The two board tones without a Nextcloud colour role (screens-cell-pill-parity).
+   A theme may redefine them; the six role variants below use Nextcloud's own. */
+:root {
+	--cn-status-purple-bg: #e8e6f6;
+	--cn-status-purple-text: #4a3f8f;
+	--cn-status-teal-bg: #e3f1f3;
+	--cn-status-teal-text: #1d5e66;
+}
+
 .cn-status-badge {
 	display: inline-flex;
 	align-items: center;
@@ -51,6 +60,18 @@
 	color: var(--color-info-text, var(--color-info, #0082c9));
 }
 
+/* Work in progress ("In behandeling"), a board tone. */
+.cn-status-badge--purple {
+	background-color: var(--cn-status-purple-bg);
+	color: var(--cn-status-purple-text);
+}
+
+/* Handed on ("Omgezet naar een zaak"), a board tone. */
+.cn-status-badge--teal {
+	background-color: var(--cn-status-teal-bg);
+	color: var(--cn-status-teal-text);
+}
+
 /* Solid variants — solid background with white text for use on colored backgrounds */
 .cn-status-badge--solid.cn-status-badge--default {
 	background-color: var(--color-background-dark);
@@ -81,3 +102,13 @@
 	background-color: var(--color-info, #0082c9);
 	color: white;
 }
+
+.cn-status-badge--solid.cn-status-badge--purple {
+	background-color: var(--cn-status-purple-text);
+	color: white;
+}
+
+.cn-status-badge--solid.cn-status-badge--teal {
+	background-color: var(--cn-status-teal-text);
+	color: white;
+}

package/src/css/kpi-card.css

@@ -463,6 +463,57 @@ a.cn-kpi-card--stacked:focus-visible {
 	gap: 6px;
 }
 
+/* A linked board tile is one link: the label is not underlined link text, in
+   any layout (screens-stat-tile-parity). The NL Design theme underlines every
+   `a` with `!important`, so the opt-out needs it too. */
+a.cn-kpi-card--board,
+a.cn-kpi-card--board:hover,
+a.cn-kpi-card--board:focus-visible,
+a.cn-kpi-card--board * {
+	text-decoration: none !important;
+}
+
+/* `content.iconPlacement: "end"` (DqDashboard): label left, the icon in a
+   32px circle right, tinted by the tile's state. */
+.cn-kpi-card--board .cn-kpi-card__title--badge-end {
+	justify-content: space-between;
+	gap: 8px;
+}
+
+.cn-kpi-card__badge {
+	display: inline-flex;
+	flex: 0 0 auto;
+	align-items: center;
+	justify-content: center;
+	width: 32px;
+	height: 32px;
+	margin-inline-start: auto;
+	border-radius: 50%;
+	color: var(--color-primary-element-light-text, var(--color-primary-element));
+	background: var(--color-primary-element-light, color-mix(in srgb, var(--color-primary-element) 12%, transparent));
+}
+
+.cn-kpi-card__badge svg {
+	width: 18px;
+	height: 18px;
+	fill: currentcolor;
+}
+
+.cn-kpi-card__badge--success {
+	color: var(--color-text-success, var(--color-success-text));
+	background: color-mix(in srgb, var(--color-text-success, var(--color-success-text)) 12%, var(--color-main-background));
+}
+
+.cn-kpi-card__badge--warning {
+	color: var(--color-element-warning, var(--color-warning-text));
+	background: color-mix(in srgb, var(--color-element-warning, var(--color-warning-text)) 12%, var(--color-main-background));
+}
+
+.cn-kpi-card__badge--error {
+	color: var(--color-text-error, var(--color-error-text));
+	background: color-mix(in srgb, var(--color-text-error, var(--color-error-text)) 10%, var(--color-main-background));
+}
+
 .cn-kpi-card__glyph {
 	display: inline-flex;
 	flex: 0 0 auto;

package/src/css/look-board-index.css

@@ -45,6 +45,42 @@
 	margin-inline-start: 0;
 }
 
+/* The header buttons keep the board's button under a theme that styles every
+   secondary or primary button with `!important` (the nldesign theme: a
+   primary border, 8px 16px padding): Download and the Actions menu are 40px,
+   a grey border on the main background (PqTickets, DqZaken), the primary
+   button is the primary fill without a border. The buildiq square is not a
+   direct child button and keeps its own rule. */
+.cn-look-board .cn-index-page .cn-index-page__header-buttons > .button-vue--secondary,
+.cn-look-board .cn-index-page .cn-index-page__header-buttons > .action-item .button-vue {
+	height: var(--cn-board-control-height) !important;
+	min-height: var(--cn-board-control-height) !important;
+	padding: 0 14px !important;
+	border: 1px solid var(--color-border-dark) !important;
+	border-radius: var(--cn-board-control-radius) !important;
+	background: var(--color-main-background) !important;
+	color: var(--color-main-text) !important;
+}
+
+.cn-look-board .cn-index-page .cn-index-page__header-buttons > .button-vue--secondary:hover,
+.cn-look-board .cn-index-page .cn-index-page__header-buttons > .action-item .button-vue:hover {
+	background: var(--color-background-hover) !important;
+}
+
+.cn-look-board .cn-index-page .cn-index-page__header-buttons > .button-vue--primary {
+	height: var(--cn-board-control-height) !important;
+	min-height: var(--cn-board-control-height) !important;
+	padding: 0 16px !important;
+	border: 0 !important;
+	border-radius: var(--cn-board-control-radius) !important;
+	background: var(--color-primary-element) !important;
+	color: var(--color-primary-element-text) !important;
+}
+
+.cn-look-board .cn-index-page .cn-index-page__header-buttons > .button-vue--primary:hover {
+	background: var(--color-primary-element-hover) !important;
+}
+
 /* ----------------------------------------------------------------- toolbar */
 
 /* No band, no padding, no radius. The DOM is already in reading order (row 1,

package/src/css/look-board.css

@@ -435,3 +435,11 @@
 	color: var(--color-main-text);
 	opacity: 1;
 }
+
+/* ---- Status pills (screens-cell-pill-parity) ---------------------------- */
+/* The board draws a primary pill in the deep primary ink on the light primary
+   ground ("Verzoek", "Nieuw"); the default look keeps the brighter
+   primary-element text. The other tones already match the board. */
+.cn-look-board .cn-status-badge--primary:not(.cn-status-badge--solid):not(.cn-look-nextcloud *) {
+	color: var(--color-primary-element-light-text);
+}

package/src/schemas/app-manifest-v2.schema.json

@@ -3,7 +3,7 @@
 	"$id": "https://raw.githubusercontent.com/ConductionNL/nextcloud-vue/main/src/schemas/app-manifest-v2.schema.json",
 	"title": "Conduction App Manifest v2",
 	"description": "v2 schema for the JSON-driven page and navigation manifest consumed by @conduction/nextcloud-vue. Introduces a uniform widgets[] array on every page type with a per-slot grid coordinate system, a typed actions[] discriminator, and the required $schema field for version detection. v1 manifests continue to validate against app-manifest.schema.json (unchanged).",
-	"version": "2.75.0",
+	"version": "2.76.0",
 	"type": "object",
 	"required": ["$schema", "version"],
 	"allOf": [
@@ -1094,7 +1094,7 @@
 						"pillColors": {
 							"type": "object",
 							"description": "Pill value to badge variant. A value without an entry takes the default variant.",
-							"additionalProperties": { "type": "string", "enum": ["default", "primary", "success", "warning", "error", "info"] }
+							"additionalProperties": { "type": "string", "enum": ["default", "primary", "success", "warning", "error", "info", "purple", "teal"] }
 						},
 						"due": { "type": "string", "description": "The date field of the footer's due text, marked by `dueRule`." },
 						"owner": { "type": "string", "description": "The field of the owner shown as an avatar (initials) at the footer's end." }
@@ -1143,7 +1143,7 @@
 				"colorMap": {
 					"type": "object",
 					"description": "Raw value to badge variant. Keys are matched ignoring case.",
-					"additionalProperties": { "type": "string", "enum": ["default", "primary", "success", "warning", "error", "info"] }
+					"additionalProperties": { "type": "string", "enum": ["default", "primary", "success", "warning", "error", "info", "purple", "teal"] }
 				},
 				"labels": {
 					"type": "object",
@@ -1152,7 +1152,7 @@
 				},
 				"variant": {
 					"type": "string",
-					"enum": ["default", "primary", "success", "warning", "error", "info"],
+					"enum": ["default", "primary", "success", "warning", "error", "info", "purple", "teal"],
 					"default": "default",
 					"description": "Badge variant for a value `colorMap` does not name."
 				}
@@ -3586,7 +3586,7 @@
 						},
 						"columns": {
 							"type": "array",
-							"description": "Table columns (for type='index' and type='logs'). Items may be strings (legacy shorthand) or column objects ({ key, label, sortable?, width?, formatter?, formatterOptions?, widget?, widgetProps?, format?, aggregate? }). `formatter` resolves against cnFormatters (built-ins incl. currency / conditionalPhrase — configured via `formatterOptions`); `widget` resolves against cnCellWidgets (built-ins incl. badge / fkResolve / link / avatar / date).",
+							"description": "Table columns (for type='index' and type='logs'). Items may be strings (legacy shorthand) or column objects ({ key, label, sortable?, width?, formatter?, formatterOptions?, widget?, widgetProps?, format?, aggregate?, colorMap? }). `colorMap` maps an enum column's raw values to a pill tone (default, primary, success, warning, error, info, purple, teal) and wins over the schema property's own `colorMap` / `x-color-map`. `formatter` resolves against cnFormatters (built-ins incl. currency / conditionalPhrase — configured via `formatterOptions`); `widget` resolves against cnCellWidgets (built-ins incl. badge / fkResolve / link / avatar / date).",
 							"items": {
 								"oneOf": [
 									{ "type": "string" },

package/src/utils/badgeVariants.js

@@ -0,0 +1,29 @@
+/**
+ * SPDX-FileCopyrightText: 2026 Conduction B.V.
+ * SPDX-License-Identifier: EUPL-1.2
+ *
+ * badgeVariants: the colour variants a CnStatusBadge (a status pill) may take.
+ *
+ * The first six follow the Nextcloud colour roles. `purple` and `teal` are the
+ * two tones the drawn boards use for a status that has no Nextcloud role, such
+ * as "In behandeling" (work in progress) and "Omgezet naar een zaak" (handed
+ * on). One list, so the badge, the board card pill and the manifest schema
+ * accept the same names.
+ *
+ * @module utils/badgeVariants
+ * @spec openspec/changes/screens-cell-pill-parity/specs/cell-pill-tones/spec.md#requirement-a-status-pill-has-eight-tones
+ */
+
+/** Every variant a status pill accepts, in the order the docs list them. */
+export const BADGE_VARIANTS = Object.freeze(['default', 'primary', 'success', 'warning', 'error', 'info', 'purple', 'teal'])
+
+/**
+ * Whether a value names a badge variant.
+ *
+ * @param {unknown} variant The candidate variant.
+ * @return {boolean} True for one of `BADGE_VARIANTS`.
+ * @spec openspec/changes/screens-cell-pill-parity/specs/cell-pill-tones/spec.md#requirement-a-status-pill-has-eight-tones
+ */
+export function isBadgeVariant(variant) {
+	return typeof variant === 'string' && BADGE_VARIANTS.includes(variant)
+}