@conduction/nextcloud-vue 2.77.0 → 2.79.0

package/src/components/CnFilesBrowser/openRegisterSource.js

@@ -0,0 +1,248 @@
+/**
+ * SPDX-FileCopyrightText: 2026 Conduction B.V.
+ * SPDX-License-Identifier: EUPL-1.2
+ *
+ * A data source for CnFilesBrowser that reads and writes one OpenRegister
+ * object's folder through OpenRegister's own files API, not WebDAV.
+ *
+ * Why: an object's files live in the `openregister` account's home, outside
+ * every person's Files app, so a reader has no WebDAV path to them. Every call
+ * here goes through the object's access rule on the server, as the signed-in
+ * person: a listing needs read on the object, a change needs update. Nothing
+ * is shared to make the folder visible.
+ *
+ * Paths are relative to the object folder and written with a leading slash
+ * (`/`, `/Bijlagen`), the same shape the WebDAV browser uses for its own
+ * paths, so crumbs and navigation work unchanged.
+ *
+ * @spec openspec/changes/files-browser-openregister-source/specs/files-browser/spec.md
+ */
+import axios from '@nextcloud/axios'
+import { FileType } from '@nextcloud/files'
+import { generateUrl } from '@nextcloud/router'
+
+/**
+ * A browser path (`/a/b`) as the API's relative path (`a/b`).
+ *
+ * @param {string} path The browser path.
+ * @return {string} The relative path, empty for the root.
+ */
+export function toApiPath(path) {
+	return String(path || '').replace(/^\/+|\/+$/g, '')
+}
+
+/**
+ * One API listing entry as a row the browser can render and sort.
+ *
+ * The shape follows what the browser reads off an `@nextcloud/files` node
+ * (basename, type, mime, size, mtime, fileid, path, source, attributes), so
+ * the table, the sorter and the icons need no second code path.
+ *
+ * @param {object} entry The API entry: `{ id, name, type, mimetype, size, mtime, path }`.
+ * @return {object} The row.
+ */
+export function entryToNode(entry) {
+	const isFolder = entry.type === 'folder'
+	return {
+		source: `openregister:${entry.id}`,
+		fileid: entry.id,
+		basename: entry.name,
+		displayname: entry.name,
+		path: `/${toApiPath(entry.path)}`,
+		type: isFolder ? FileType.Folder : FileType.File,
+		mime: isFolder ? 'httpd/unix-directory' : (entry.mimetype || ''),
+		size: typeof entry.size === 'number' ? entry.size : undefined,
+		mtime: typeof entry.mtime === 'number' ? new Date(entry.mtime * 1000) : undefined,
+		attributes: {},
+	}
+}
+
+/**
+ * The status of a failed request, or null.
+ *
+ * @param {Error} err The error.
+ * @return {number|null} The HTTP status.
+ */
+function statusOf(err) {
+	return err?.response?.status ?? err?.status ?? null
+}
+
+/**
+ * The server's own message on a failed request, or null.
+ *
+ * @param {Error} err The error.
+ * @return {string|null} The message.
+ */
+function messageOf(err) {
+	const data = err?.response?.data
+	return (data && typeof data.error === 'string' && data.error !== '') ? data.error : null
+}
+
+/**
+ * Build the OpenRegister source for one object.
+ *
+ * @param {object} options The object.
+ * @param {string} [options.apiBase] OpenRegister's API base, `/apps/openregister/api`.
+ * @param {string} options.register The register slug or id.
+ * @param {string} options.schema The schema slug or id.
+ * @param {string} options.objectId The object's uuid.
+ * @return {object} The source CnFilesBrowser takes as `source`.
+ */
+export function createOpenRegisterSource({ apiBase = '/apps/openregister/api', register, schema, objectId }) {
+	const objectUrl = (suffix) => generateUrl(`${apiBase}/objects/{register}/{schema}/{objectId}${suffix}`, { register, schema, objectId })
+
+	/**
+	 * Re-throw a failed request with its status and the server's message.
+	 *
+	 * @param {Error} err The error.
+	 * @return {never}
+	 */
+	const fail = (err) => {
+		const error = new Error(messageOf(err) || err?.message || 'Request failed')
+		error.status = statusOf(err)
+		throw error
+	}
+
+	return {
+		kind: 'openregister',
+
+		/**
+		 * List a folder.
+		 *
+		 * @param {string} path The browser path.
+		 * @return {Promise<{folder: object, nodes: Array<object>}>} The folder (with `canChange`) and its rows.
+		 */
+		async list(path) {
+			try {
+				const { data } = await axios.get(objectUrl('/folder'), { params: { path: toApiPath(path) } })
+				if (!Array.isArray(data?.entries)) {
+					// Not a folder listing: an OpenRegister without these endpoints.
+					const error = new Error('This OpenRegister has no folder endpoint')
+					error.status = 501
+					throw error
+				}
+				const relative = toApiPath(data?.path ?? path)
+				return {
+					folder: {
+						fileid: data?.folderId ?? null,
+						path: `/${relative}`,
+						basename: relative.split('/').pop() || '',
+						type: FileType.Folder,
+						canChange: data?.canChange === true,
+					},
+					nodes: data.entries.map(entryToNode),
+				}
+			} catch (err) {
+				if (err?.status && !err.response) {
+					throw err
+				}
+				return fail(err)
+			}
+		},
+
+		/**
+		 * Create a folder.
+		 *
+		 * @param {string} path Where, as a browser path.
+		 * @param {string} name The new folder's name.
+		 * @return {Promise<object>} The new folder's row.
+		 */
+		async createFolder(path, name) {
+			try {
+				const { data } = await axios.post(objectUrl('/folder'), { path: toApiPath(path), name })
+				return entryToNode(data)
+			} catch (err) {
+				return fail(err)
+			}
+		},
+
+		/**
+		 * Upload one file into a folder.
+		 *
+		 * @param {string} path The target folder, as a browser path.
+		 * @param {File} file The file.
+		 * @param {(percent: number) => void} [onProgress] Called with 0..100.
+		 * @return {Promise<object>} The stored file's row.
+		 */
+		async upload(path, file, onProgress) {
+			const form = new FormData()
+			form.append('path', toApiPath(path))
+			form.append('files[]', file, file.name)
+			try {
+				const { data } = await axios.post(objectUrl('/folder/upload'), form, {
+					onUploadProgress: (progress) => {
+						if (progress?.total && typeof onProgress === 'function') {
+							onProgress(Math.round((progress.loaded / progress.total) * 100))
+						}
+					},
+				})
+				const stored = Array.isArray(data?.stored) ? data.stored : []
+				if (stored.length === 0) {
+					const error = new Error(data?.rejected?.[0]?.error || 'The upload failed')
+					error.status = 400
+					throw error
+				}
+				return entryToNode(stored[0])
+			} catch (err) {
+				if (err?.status && !err.response) {
+					throw err
+				}
+				return fail(err)
+			}
+		},
+
+		/**
+		 * Rename a file or folder.
+		 *
+		 * @param {object} node The row.
+		 * @param {string} name The new name.
+		 * @return {Promise<object>} The renamed row.
+		 */
+		async rename(node, name) {
+			try {
+				const { data } = await axios.put(objectUrl(`/folder/${encodeURIComponent(node.fileid)}`), { name })
+				return entryToNode(data)
+			} catch (err) {
+				return fail(err)
+			}
+		},
+
+		/**
+		 * Delete a file or folder.
+		 *
+		 * @param {object} node The row.
+		 * @return {Promise<void>}
+		 */
+		async remove(node) {
+			try {
+				await axios.delete(objectUrl(`/folder/${encodeURIComponent(node.fileid)}`))
+			} catch (err) {
+				fail(err)
+			}
+		},
+
+		/**
+		 * Where a file downloads from: the object's own file endpoint, which
+		 * checks read on the object.
+		 *
+		 * @param {object} node The row.
+		 * @return {string|null} The url, or null for a folder.
+		 */
+		downloadUrl(node) {
+			if (!node?.fileid || node.type === FileType.Folder) {
+				return null
+			}
+			return objectUrl(`/files/${encodeURIComponent(node.fileid)}`)
+		},
+
+		/**
+		 * A small preview of an image, through the object's preview endpoint.
+		 *
+		 * @param {object} node The row.
+		 * @return {string} The url.
+		 */
+		previewUrl(node) {
+			return objectUrl(`/files/${encodeURIComponent(node.fileid)}/preview?width=64&height=64`)
+		},
+	}
+}

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() {
@@ -3885,7 +3891,7 @@ export default {
 					const mappedProps = propertiesFromDefinitions(
 						Array.isArray(records) ? records : [],
 						config,
-						{ orderFrom: 1000 + Object.keys(properties).length },
+						{ orderFrom: 1000 + Object.keys(properties).length, create: this.isCreateMode },
 					)
 					Object.assign(properties, mappedProps.properties)
 					required.push(...mappedProps.required)

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

@@ -111,7 +111,7 @@
 			:sortValue="sortSelectValue"
 			:showSearch="inlineSearch || isBoardLook"
 			:searchValue="effectiveSearchValue"
-			:searchPlaceholder="searchPlaceholder"
+			:searchPlaceholder="searchPlaceholder ? cnTranslate(searchPlaceholder) : searchPlaceholder"
 			:showCountWithSearch="showCountWithSearch"
 			:refreshing="effectiveRefreshing"
 			:refreshDisabled="refreshDisabled"
@@ -565,6 +565,7 @@
 					:includeColumns="includeColumns"
 					:columnOverrides="columnOverrides"
 					:rowClass="rowClass"
+					:rowTitle="rowTitle"
 					:filterable="tableHeaderFilters"
 					:activeFilters="effectiveActiveFilters"
 					:filterRegister="typeof register === 'string' ? register : ''"
@@ -1533,6 +1534,21 @@ export default {
 			default: () => [],
 		},
 
+		/**
+		 * How the board look draws the table's title column (manifest
+		 * `config.rowTitle`): `link` (the default) underlines the title,
+		 * `plain` draws it as bold text without an underline over a 13px muted
+		 * secondary line. The row stays clickable. The Nextcloud look ignores
+		 * it. Maps to CnDataTable `rowTitle`.
+		 *
+		 * @spec openspec/changes/screens-table-rows-parity/specs/index-list-board-look/spec.md#requirement-a-row-title-can-be-plain-text
+		 */
+		rowTitle: {
+			type: String,
+			default: 'link',
+			validator: (value) => ['link', 'plain'].includes(value),
+		},
+
 		/** Optional MDI icon name. Defaults to schema.icon when a schema is provided. */
 		icon: {
 			type: String,
@@ -5156,6 +5172,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 +5185,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') {
@@ -5338,6 +5360,7 @@ export default {
 		 * filled in when one is known, else `description`.
 		 *
 		 * @spec openspec/changes/zuiddrecht-pixel-gaps/specs/zuiddrecht-pixel-gaps/spec.md#requirement-an-index-page-title-is-a-manifest-key
+		 * @spec openspec/changes/screens-table-footer-and-system-dates-parity/specs/index-list-board-look/spec.md#requirement-the-count-reads-in-the-users-language
 		 * @return {string}
 		 */
 		headerDescription() {
@@ -5345,9 +5368,16 @@ export default {
 			// Board look: the count line is a template over the rows on this page
 			// and all rows, "{shown} of {total}" unless the page says otherwise.
 			if (this.isBoardLook && typeof total === 'number' && total >= 0) {
-				const template = this.countText || this.countSubtitle || '{shown} of {total}'
+				const shown = this.effectiveObjects.length
+				// The default count line is the library's own string, so it
+				// reads "14 van 14" in Dutch; a page's own template goes
+				// through the app's label lookup.
+				if (!this.countText && !this.countSubtitle) {
+					return t('nextcloud-vue', '{shown} of {total}', { shown, total })
+				}
+				const template = this.countText || this.countSubtitle
 				return this.cnTranslate(template)
-					.replace('{shown}', String(this.effectiveObjects.length))
+					.replace('{shown}', String(shown))
 					.replace('{total}', String(total))
 			}
 			if (this.countSubtitle && typeof total === 'number' && total >= 0) {

package/src/components/CnObjectSidebar/CnFilesTab.vue

@@ -7,7 +7,9 @@
 		<CnFilesBrowser
 			v-if="browserRoot !== null"
 			:rootPath="browserRoot"
-			:rootLabel="browserRootLabel"
+			:rootLabel="effectiveBrowserRootLabel"
+			:source="browserSource"
+			:deleteLabel="deleteLabel"
 			:uploadButton="uploadButton"
 			:dropOverlay="dropOverlay"
 			:dropHint="dropHint"
@@ -238,7 +240,8 @@ import CnFilePreview from '../CnFilePreview/CnFilePreview.vue'
 import CnFilesBrowser from '../CnFilesBrowser/CnFilesBrowser.vue'
 import { useFileOpener } from '../../composables/useFileOpener.js'
 import { buildHeaders, prefixUrl } from '../../utils/index.js'
-import { resolveObjectFolder } from '../CnFilesBrowser/filesBrowser.js'
+import { objectDisplayName, resolveObjectFolderInfo } from '../CnFilesBrowser/filesBrowser.js'
+import { createOpenRegisterSource } from '../CnFilesBrowser/openRegisterSource.js'
 
 /**
  * The mime types Nextcloud Office opens by default for the current person.
@@ -308,8 +311,22 @@ export default {
 		openInOfficeLabel: { type: String, default: () => t('nextcloud-vue', 'Open in Office') },
 		/** Label for the delete action */
 		deleteLabel: { type: String, default: () => t('nextcloud-vue', 'Delete') },
-		/** What the files browser's root crumb reads; null shows the folder's own name, as the Files app does. */
+		/** What the files browser's root crumb reads; null shows the object's name, else the folder's own name. */
 		browserRootLabel: { type: String, default: null },
+		/**
+		 * Where the files browser reads the object's folder from.
+		 * `openregister` (the default) goes through OpenRegister's files API under
+		 * the object's access rule, so anyone who may read the object sees its
+		 * files, without a share. `webdav` is the earlier behaviour: the folder is
+		 * looked up in the person's own Files over WebDAV and the browser shows
+		 * only when it is shared with them.
+		 */
+		source: {
+			type: String,
+			default: 'openregister',
+			validator: (value) => ['openregister', 'webdav'].includes(value),
+		},
+
 		/** Forwarded to CnFilesBrowser: a primary "Add files" button beside the New menu. */
 		uploadButton: { type: Boolean, default: false },
 		/** Forwarded to CnFilesBrowser: the drop state drawn over the list ("Drop to add") and announced. */
@@ -385,6 +402,9 @@ export default {
 			share: false,
 			/** The object's folder as a user-relative path, or null while unresolved or absent. */
 			browserRoot: null,
+			/** The browser's data source for `source: 'openregister'`, or null for WebDAV. */
+			browserSource: null,
+			browserObjectName: null,
 			linkedItems: [],
 			/** File ids whose preview request failed, so the row falls back to the mime icon. */
 			previewFailed: {},
@@ -403,6 +423,19 @@ export default {
 		}
 	},
 
+	computed: {
+		/**
+		 * The root crumb: the host's label, else the object's name (its folder
+		 * on disk is called after its uuid), else the folder's own name.
+		 *
+		 * @return {string|null}
+		 * @spec openspec/changes/dutch-library-strings-and-files-crumb/specs/dutch-library-strings-and-files-crumb/spec.md#requirement-the-files-browser-names-the-object-in-its-root-crumb
+		 */
+		effectiveBrowserRootLabel() {
+			return this.browserRootLabel || this.browserObjectName || null
+		},
+	},
+
 	watch: {
 		// Match every other CnObjectSidebar tab — a single immediate
 		// `objectId` watcher drives all initial loads. Folding the
@@ -423,6 +456,10 @@ export default {
 		linkedItemsUrl() {
 			this.fetchLinkedItems()
 		},
+
+		source() {
+			this.resolveBrowserRoot()
+		},
 	},
 
 	methods: {
@@ -483,16 +520,22 @@ export default {
 
 		async resolveBrowserRoot() {
 			this.browserRoot = null
+			this.browserSource = null
+			this.browserObjectName = null
 			if (!this.objectId || !this.register || !this.schema) {
 				return
 			}
+			if (this.source === 'openregister') {
+				await this.resolveOpenRegisterSource()
+				return
+			}
 			let remoteUrl
 			try {
 				remoteUrl = generateRemoteUrl('dav')
 			} catch {
 				return
 			}
-			this.browserRoot = await resolveObjectFolder({
+			const info = await resolveObjectFolderInfo({
 				apiBase: this.apiBase,
 				register: this.register,
 				schema: this.schema,
@@ -500,6 +543,62 @@ export default {
 				uid: getCurrentUser()?.uid || '',
 				remoteUrl,
 			})
+			this.browserRoot = info === null ? null : info.path
+			this.browserObjectName = info === null ? null : info.name
+		},
+
+		/**
+		 * Use OpenRegister's files API for the browser, when this person may read
+		 * the object's folder through it. A listing that fails (no read on the
+		 * object, or an OpenRegister without the folder endpoints) leaves the
+		 * legacy list, as an unresolved WebDAV folder did.
+		 *
+		 * @return {Promise<void>}
+		 * @spec openspec/changes/files-browser-openregister-source/specs/files-browser/spec.md
+		 */
+		async resolveOpenRegisterSource() {
+			const objectId = this.objectId
+			const source = createOpenRegisterSource({
+				apiBase: this.apiBase,
+				register: this.register,
+				schema: this.schema,
+				objectId,
+			})
+			try {
+				await source.list('/')
+			} catch {
+				return
+			}
+			if (objectId !== this.objectId) {
+				return
+			}
+			this.browserSource = source
+			this.browserRoot = '/'
+			this.fetchObjectName()
+		},
+
+		/**
+		 * Read the object's name for the root crumb, by the same rule the WebDAV
+		 * path uses (`objectDisplayName`: never the uuid). The OpenRegister path
+		 * has no folder lookup to piggyback on, so this is its one object read.
+		 * A failure keeps the crumb on its default.
+		 *
+		 * @return {Promise<void>}
+		 */
+		async fetchObjectName() {
+			const objectId = this.objectId
+			try {
+				const { data } = await axios.get(generateUrl(`${this.apiBase}/objects/{register}/{schema}/{objectId}`, {
+					register: this.register,
+					schema: this.schema,
+					objectId,
+				}))
+				if (objectId === this.objectId) {
+					this.browserObjectName = objectDisplayName(data, objectId)
+				}
+			} catch {
+				// The crumb keeps its default.
+			}
 		},
 
 		async fetchFiles(append = false) {

package/src/components/CnQuickFilterBar/CnQuickFilterBar.vue

@@ -115,7 +115,7 @@
 </template>
 
 <script>
-import { translate as t } from '@nextcloud/l10n'
+import { translatePlural as n, translate as t } from '@nextcloud/l10n'
 import { NcPopover, NcSelect } from '@nextcloud/vue'
 import DotsHorizontal from 'vue-material-design-icons/DotsHorizontal.vue'
 import CnIcon from '../CnIcon/CnIcon.vue'
@@ -354,7 +354,8 @@ export default {
 			if (this.overflowLabel) {
 				return t('nextcloud-vue', '{label} — show the other filters', { label: this.overflowLabel })
 			}
-			return t('nextcloud-vue', '{count} more filters', { count: this.overflowEntries.length })
+			const count = this.overflowEntries.length
+			return n('nextcloud-vue', '{count} more filter', '{count} more filters', count, { count })
 		},
 
 		/** @return {string} Heading above the hidden chips in the panel. */

package/src/components/CnSavedViewsControl/CnSavedViewsControl.vue

@@ -41,7 +41,7 @@
 		data-testid="cn-saved-views-control"
 		:aria-label="isBoardLook ? t('nextcloud-vue', 'Save view') : menuLabel">
 		<template #icon>
-			<ContentSaveOutline v-if="isBoardLook" :size="18" />
+			<ContentSaveOutline v-if="isBoardLook" :size="14" />
 			<BookmarkOutline v-else :size="20" />
 		</template>
 

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' */