@conduction/nextcloud-vue 2.74.0 → 2.76.0

package/src/components/CnIndexPage/CnIndexPage.vue

@@ -82,7 +82,7 @@
 			:activeFilterChips="activeFilterChips"
 			:showBuildiqButton="!buildiqInHeader"
 			:bulkNoun="boardBulkNoun"
-			:bulkHint="bulkHint"
+			:bulkHint="bulkHint ? cnTranslate(bulkHint) : bulkHint"
 			:pagination="effectivePagination"
 			:objectCount="effectiveObjects.length"
 			:selectable="selectable"
@@ -430,19 +430,19 @@
 			name="form-dialog"
 			:show="showFormDialogVisible"
 			:item="editItem"
-			:schema="effectiveSchema"
+			:schema="formSchema"
 			:confirm="onFormConfirm"
 			:close="closeFormDialog"
 			:refresh="onRefreshEvent">
 			<CnFormDialog
 				v-if="showFormDialogVisible && !useAdvancedFormDialog"
 				ref="formDialog"
-				:schema="effectiveSchema"
+				:schema="formSchema"
 				:item="editItem"
-				:register="register"
-				:excludeFields="excludeFields"
-				:includeFields="includeFields"
-				:fieldOverrides="fieldOverrides"
+				:register="formRegister"
+				:excludeFields="rowFormTarget ? [] : excludeFields"
+				:includeFields="rowFormTarget ? null : includeFields"
+				:fieldOverrides="rowFormTarget ? {} : fieldOverrides"
 				:nameField="massActionNameField"
 				:size="formSize"
 				:columns="formColumns"
@@ -456,11 +456,11 @@
 			<CnAdvancedFormDialog
 				v-if="showFormDialogVisible && useAdvancedFormDialog"
 				ref="formDialog"
-				:schema="effectiveSchema"
+				:schema="formSchema"
 				:item="editItem"
-				:excludeFields="excludeFields"
-				:includeFields="includeFields"
-				:fieldOverrides="fieldOverrides"
+				:excludeFields="rowFormTarget ? [] : excludeFields"
+				:includeFields="rowFormTarget ? null : includeFields"
+				:fieldOverrides="rowFormTarget ? {} : fieldOverrides"
 				:nameField="massActionNameField"
 				:initialValues="resolvedCreateDefaults"
 				@confirm="onFormConfirm"
@@ -788,6 +788,7 @@
 					:selectable="selectable"
 					:clickToView="rowClickOpens"
 					:cardFields="resolvedCardFields"
+					:accentOf="cardAccent"
 					:selectedIds="internalSelectedIds"
 					:rowKey="rowKey"
 					:emptyText="emptyText"
@@ -848,7 +849,7 @@
 				<CnPagination
 					v-if="effectivePagination && (effectivePagination.pages > 1 || (isBoardLook && effectivePagination.total > 0))"
 					:variant="isBoardLook ? 'board' : ''"
-					:footerNote="footerNote"
+					:footerNote="footerNote ? cnTranslate(footerNote) : footerNote"
 					:currentPage="effectivePagination.page || 1"
 					:totalPages="effectivePagination.pages || 1"
 					:totalItems="effectivePagination.total || 0"
@@ -971,6 +972,7 @@ import { openRowTarget } from '../../utils/linkNavigation.js'
 import { resolveClaimedTeams, resolveClaimTokens, splitViewsIntoTabs, viewAsTab, viewIdOf } from '../../utils/listLenses.js'
 import { LIST_SHORTCUTS, listPaletteCommands, shortcutFor } from '../../utils/listShortcuts.js'
 import { multiKeySort } from '../../utils/multiKeySort.js'
+import { OBJECTS_CHANGED_EVENT } from '../../utils/objectSignals.js'
 import { withPersonalLenses } from '../../utils/personalLenses.js'
 import { resolveDeepTokens, resolveFilterValue } from '../../utils/resolveFilterTokens.js'
 import { resolveRowActions } from '../../utils/resolveRowActions.js'
@@ -1016,7 +1018,7 @@ import { buildDefaultActions } from './defaultActions.js'
 import { dispatchAction } from './manifestActionDispatch.js'
 import { applyManualOrder, dropInOrder, manualOrderKey, moveInOrder, visibleIdsOf } from './manualOrder.js'
 import { orderColumns, personalColumnsKey, reconcilePersonalColumns } from './personalColumns.js'
-import { createSelfModeActions } from './selfModeActions.js'
+import { createSelfModeActions, resolveRowTarget } from './selfModeActions.js'
 import { applyRowPatches, normalisePaneWidth, rowIdOf, splitLayoutFor } from './splitView.js'
 import { useNamedSource } from './useNamedSource.js'
 import { useSelfFetchList } from './useSelfFetchList.js'
@@ -1475,6 +1477,17 @@ export default {
 			default: null,
 		},
 
+		/**
+		 * Gives each card in the card view a status accent: a colored start
+		 * border and icon. See CnObjectCard `accent`.
+		 *
+		 * @type {((object: object) => ({variant: string, icon: string, label: string}|null))|null}
+		 */
+		cardAccent: {
+			type: Function,
+			default: null,
+		},
+
 		/**
 		 * Board look: free text after the footer's count ("8 of 48 · click a
 		 * column header to sort"). Manifest key `config.footerNote`.
@@ -1646,6 +1659,21 @@ export default {
 			default: () => [],
 		},
 
+		/**
+		 * Self-fetch only: list from this endpoint instead of
+		 * `/api/objects/{register}/{schema}`, e.g. an app endpoint that searches
+		 * several register/schema pairs at once. `register` and `schema` stay the
+		 * page's own pair (columns, create, export, import). Rows of another pair,
+		 * read from their `@self.register` / `@self.schema`, are edited, copied and
+		 * deleted against that pair, with its own form. The endpoint takes
+		 * `_page`, `_limit`, `_search` and `_order[key]=dir` and answers
+		 * `{ results, total, page, pages }`.
+		 */
+		collectionUrl: {
+			type: String,
+			default: '',
+		},
+
 		/**
 		 * Offer an "Also search inside files" switch beside the search box. On,
 		 * a search also matches words inside attached files (OpenRegister
@@ -3153,6 +3181,8 @@ export default {
 			 */
 			persistedFilterKeys: [...(this.initialQueryFilterKeys || [])],
 			internalSelectedIds: [...this.selectedIds],
+			// Rows seen in a collectionUrl list, so a selection kept across pages still resolves its own pair.
+			collectionRowsById: markRaw(new Map()),
 			// Folder-sidebar state: selected folder id + the register-fetched list.
 			selectedFolderId: null,
 			/**
@@ -3190,6 +3220,9 @@ export default {
 			// Dialog targets
 			actionTargetItem: null,
 			editItem: null,
+			// The pair and schema of a row edited outside the page's own pair (collectionUrl).
+			rowFormTarget: null,
+			rowFormSchema: null,
 			// Drives the Actions-menu Refresh spinner during a self-fetch
 			// refresh, where the host has no promise to bind `:refreshing` to.
 			internalRefreshing: false,
@@ -4471,6 +4504,16 @@ export default {
 			return (this.schema && typeof this.schema === 'object') ? this.schema : null
 		},
 
+		/** The form dialog's schema: the edited row's own when it is of another pair. */
+		formSchema() {
+			return this.rowFormTarget ? this.rowFormSchema : this.effectiveSchema
+		},
+
+		/** The form dialog's register, following `formSchema`. */
+		formRegister() {
+			return this.rowFormTarget ? this.rowFormTarget.register : this.register
+		},
+
 		/**
 		 * Schema slug for the export-leaf URL — the `schema` prop directly
 		 * when it's a string (self-fetch mode's precondition), else the
@@ -4857,8 +4900,7 @@ export default {
 							this.$emit('edit-open', row)
 							return
 						}
-						this.editItem = row
-						this.showFormDialogVisible = true
+						this.openFormFor(row)
 					},
 					onCopy: (row) => {
 						this.actionTargetItem = row
@@ -5367,6 +5409,21 @@ export default {
 	},
 
 	watch: {
+		effectiveObjects: {
+			immediate: true,
+			handler(rows) {
+				if (!this.collectionUrl || !this.isSelfFetchMode || !Array.isArray(rows)) {
+					return
+				}
+				for (const row of rows) {
+					const id = row?.id ?? row?.['@self']?.id
+					if (id !== undefined && id !== null) {
+						this.collectionRowsById.set(id, row)
+					}
+				}
+			},
+		},
+
 		// A column or form field bound to a property the schema lacks is told to the host once.
 		effectiveSchema: {
 			immediate: true,
@@ -5559,6 +5616,9 @@ export default {
 		if (this.splitViewEnabled && typeof window !== 'undefined') {
 			window.addEventListener('resize', this.measureSplitViewport)
 		}
+		if (typeof window !== 'undefined') {
+			window.addEventListener(OBJECTS_CHANGED_EVENT, this.onObjectsChanged)
+		}
 		this.loadManualOrder()
 		this.loadPersonalColumns()
 		this.publishHoistedSidebar()
@@ -5583,6 +5643,8 @@ export default {
 		this.selfActions = createSelfModeActions({
 			isSelfFetchMode: () => this.isSelfFetchMode,
 			selfObjectStore: () => this.selfObjectStore,
+			rowTarget: (row) => this.rowTypeTarget(row),
+			knownRow: (id) => this.collectionRowsById.get(id),
 			selfObjectType: () => this.selfObjectType,
 			list: () => this.list,
 			selectedIds: () => this.internalSelectedIds,
@@ -5608,13 +5670,14 @@ export default {
 	},
 
 	/**
-	 * Drop the resize listener and the hoisted sidebar.
+	 * Drop the window listeners and the hoisted sidebar.
 	 *
 	 * @spec openspec/changes/case-page-and-list-as-a-place/specs/index-page/spec.md
 	 */
 	beforeUnmount() {
 		if (typeof window !== 'undefined') {
 			window.removeEventListener('resize', this.measureSplitViewport)
+			window.removeEventListener(OBJECTS_CHANGED_EVENT, this.onObjectsChanged)
 		}
 		// Clear the holder so the hoisted sidebar disappears when
 		// the user navigates away from the index page.
@@ -7076,6 +7139,33 @@ export default {
 			}
 		},
 
+		/**
+		 * Refresh the list when `dispatchObjectsChanged` names this page's
+		 * register and schema, by slug or id. A part missing on either side matches.
+		 *
+		 * @param {CustomEvent} event The objects-changed event.
+		 * @return {void}
+		 */
+		onObjectsChanged(event) {
+			// A collection list can hold rows of any pair, so any change may show in it.
+			if (this.isSelfFetchMode && this.collectionUrl) {
+				this.onRefreshEvent()
+				return
+			}
+			const detail = (event && event.detail) || {}
+			const schema = this.effectiveSchema
+			const schemaIds = [this.schema, schema && schema.id, schema && schema.slug]
+				.filter((v) => v !== undefined && v !== null && v !== '' && typeof v !== 'object')
+				.map(String)
+			if (detail.register && this.register && detail.register !== String(this.register)) {
+				return
+			}
+			if (detail.schema && schemaIds.length > 0 && !schemaIds.includes(detail.schema)) {
+				return
+			}
+			this.onRefreshEvent()
+		},
+
 		/** @return {Promise<void>} */
 		async onRefreshEvent() {
 			this.$emit('refresh')
@@ -8218,6 +8308,8 @@ export default {
 		closeFormDialog() {
 			this.showFormDialogVisible = false
 			this.editItem = null
+			this.rowFormTarget = null
+			this.rowFormSchema = null
 		},
 
 		/**
@@ -8278,8 +8370,55 @@ export default {
 		 * @public
 		 */
 		openFormDialog(item = null) {
-			this.editItem = item
-			this.showFormDialogVisible = true
+			return this.openFormFor(item)
+		},
+
+		/**
+		 * Open the form dialog for an item. A row of another pair (collectionUrl)
+		 * opens with its own schema; everything else opens at once, as before.
+		 *
+		 * @param {object|null} item The row to edit, or null to create.
+		 * @return {Promise<void>|void}
+		 */
+		openFormFor(item) {
+			const target = item ? this.rowTypeTarget(item) : null
+			if (!target) {
+				this.rowFormTarget = null
+				this.rowFormSchema = null
+				this.editItem = item
+				this.showFormDialogVisible = true
+				return
+			}
+			const store = this.selfObjectStore
+			return Promise.resolve(store.getSchema?.(target.type) || store.fetchSchema?.(target.type))
+				.catch(() => null)
+				.then((schema) => {
+					if (!schema) {
+						this.toastSavedView('error', t('nextcloud-vue', 'Could not load the form for this item.'))
+						return
+					}
+					this.rowFormTarget = target
+					this.rowFormSchema = schema
+					this.editItem = item
+					this.showFormDialogVisible = true
+				})
+		},
+
+		/**
+		 * The row's own pair when it differs from the page's in a collectionUrl list.
+		 *
+		 * @param {object} row The row.
+		 * @return {{register: string, schema: string, type: string}|null} The pair, or null.
+		 */
+		rowTypeTarget(row) {
+			return resolveRowTarget({
+				collectionUrl: this.isSelfFetchMode ? this.collectionUrl : '',
+				register: this.register,
+				schema: this.schema,
+				primarySchema: this.effectiveSchema,
+				primaryRegister: this.selfObjectStore?.getRegister?.(this.selfObjectType) || null,
+				store: this.selfObjectStore,
+			}, row)
 		},
 
 		/**

package/src/components/CnIndexPage/selfModeActions.js

@@ -13,6 +13,58 @@ function resolveNameField(ctx) {
 
 function findSource(ctx, id) {
 	return ctx.effectiveObjects().find((o) => o.id === id || o['@self']?.id === id)
+		|| (typeof ctx.knownRow === 'function' ? ctx.knownRow(id) : undefined)
+}
+
+/**
+ * The register/schema of a row that belongs to another pair than the page's,
+ * in a list fetched from a `collectionUrl`. Registers a store type for that
+ * pair on first use. Returns null for rows of the page's own pair, and always
+ * without a `collectionUrl`.
+ *
+ * @param {object} opts Page context.
+ * @param {string} opts.collectionUrl The page's collection endpoint, or ''.
+ * @param {string} opts.register The page's register.
+ * @param {string} opts.schema The page's schema.
+ * @param {object|null} opts.primarySchema The page's resolved schema.
+ * @param {object|null} [opts.primaryRegister] The page's resolved register, which matches a slug `register` to `@self.register`.
+ * @param {object|null} opts.store The object store.
+ * @param {object} row The row.
+ * @return {{register: string, schema: string, type: string}|null} The row's own pair.
+ */
+export function resolveRowTarget({ collectionUrl, register, schema, primarySchema, primaryRegister, store }, row) {
+	if (!collectionUrl || !row || !store) {
+		return null
+	}
+	const self = row['@self'] || {}
+	const reg = self.register !== undefined && self.register !== null ? String(self.register) : ''
+	const sch = self.schema !== undefined && self.schema !== null ? String(self.schema) : ''
+	if (!reg || !sch) {
+		return null
+	}
+	const idsOf = (...values) => values.filter((v) => v !== undefined && v !== null && v !== '').map(String)
+	const schemaIds = idsOf(schema, primarySchema && primarySchema.id, primarySchema && primarySchema.slug)
+	const registerIds = idsOf(register, primaryRegister && primaryRegister.id, primaryRegister && primaryRegister.slug)
+	if (schemaIds.includes(sch) && registerIds.includes(reg)) {
+		return null
+	}
+	const type = `${reg}-${sch}`
+	if (!store.objectTypeRegistry?.[type]) {
+		store.registerObjectType(type, sch, reg, { registerSlug: reg, schemaSlug: sch })
+	}
+	return { register: reg, schema: sch, type }
+}
+
+/**
+ * The store type a row is written through: its own pair's, or the page's.
+ *
+ * @param {object} ctx Accessor closures.
+ * @param {object} [row] The row.
+ * @return {string} The type slug.
+ */
+function typeFor(ctx, row) {
+	const target = row && typeof ctx.rowTarget === 'function' ? ctx.rowTarget(row) : null
+	return target ? target.type : ctx.selfObjectType()
 }
 
 /**
@@ -25,6 +77,10 @@ function findSource(ctx, id) {
  */
 function copyAddress(ctx, source) {
 	const self = source['@self'] || {}
+	const target = typeof ctx.rowTarget === 'function' ? ctx.rowTarget(source) : null
+	if (target) {
+		return { register: target.register, schema: target.schema, id: String(source.id || self.id) }
+	}
 	const reg = ctx.register()
 	const sch = ctx.schema()
 	const register = (typeof reg === 'string' && reg) || self.register
@@ -54,12 +110,12 @@ function refreshList(ctx) {
 	}
 }
 
-function storeError(ctx) {
-	return ctx.selfObjectStore()?.getError?.(ctx.selfObjectType())
+function storeError(ctx, type = ctx.selfObjectType()) {
+	return ctx.selfObjectStore()?.getError?.(type)
 }
 
-function storeErrorMessage(ctx, fallback) {
-	const err = storeError(ctx)
+function storeErrorMessage(ctx, fallback, type) {
+	const err = storeError(ctx, type)
 	return (err && err.message) || fallback
 }
 
@@ -76,13 +132,14 @@ export function createSelfModeActions(ctx) {
 			return false
 		}
 		try {
-			const ok = await ctx.selfObjectStore().deleteObject(ctx.selfObjectType(), id)
+			const type = typeFor(ctx, findSource(ctx, id))
+			const ok = await ctx.selfObjectStore().deleteObject(type, id)
 			if (ok) {
 				ctx.setResults.singleDelete({ success: true })
 				ctx.emit('delete', id)
 				refreshList(ctx)
 			} else {
-				ctx.setResults.singleDelete({ error: storeErrorMessage(ctx, 'Delete failed') })
+				ctx.setResults.singleDelete({ error: storeErrorMessage(ctx, 'Delete failed', type) })
 			}
 		} catch (err) {
 			ctx.setResults.singleDelete({ error: (err && err.message) || 'Delete failed' })
@@ -95,12 +152,28 @@ export function createSelfModeActions(ctx) {
 			return false
 		}
 		try {
-			const { successfulIds, failedIds } = await ctx.selfObjectStore().deleteObjects(ctx.selfObjectType(), ids)
+			// One request per pair: a mixed list holds rows of several types.
+			const idsByType = new Map()
+			for (const id of ids) {
+				const type = typeFor(ctx, findSource(ctx, id))
+				idsByType.set(type, [...(idsByType.get(type) || []), id])
+			}
+			const successfulIds = []
+			const failedIds = []
+			let failedType = null
+			for (const [type, typeIds] of idsByType) {
+				const outcome = await ctx.selfObjectStore().deleteObjects(type, typeIds)
+				successfulIds.push(...outcome.successfulIds)
+				failedIds.push(...outcome.failedIds)
+				if (outcome.failedIds.length > 0 && failedType === null) {
+					failedType = type
+				}
+			}
 			if (failedIds.length === 0) {
 				ctx.setResults.massDelete({ success: true, successfulIds })
 			} else {
 				ctx.setResults.massDelete({
-					error: storeErrorMessage(ctx, `Failed to delete ${failedIds.length} item(s)`),
+					error: storeErrorMessage(ctx, `Failed to delete ${failedIds.length} item(s)`, failedType),
 					successfulIds,
 					failedIds,
 				})
@@ -142,13 +215,14 @@ export function createSelfModeActions(ctx) {
 				}
 			}
 			const clone = cloneObjectForCopy(source, newName, resolveNameField(ctx))
-			const saved = await ctx.selfObjectStore().saveObject(ctx.selfObjectType(), clone)
+			const type = typeFor(ctx, source)
+			const saved = await ctx.selfObjectStore().saveObject(type, clone)
 			if (saved) {
 				ctx.setResults.singleCopy({ success: true })
 				ctx.emit('copy', payload)
 				refreshList(ctx)
 			} else {
-				ctx.setResults.singleCopy({ error: storeErrorMessage(ctx, 'Copy failed') })
+				ctx.setResults.singleCopy({ error: storeErrorMessage(ctx, 'Copy failed', type) })
 			}
 		} catch (err) {
 			ctx.setResults.singleCopy({ error: (err && err.message) || 'Copy failed' })
@@ -191,7 +265,7 @@ export function createSelfModeActions(ctx) {
 			}
 			const clone = cloneObjectForCopy(source, getName(source), nameField)
 			try {
-				const saved = await ctx.selfObjectStore().saveObject(ctx.selfObjectType(), clone)
+				const saved = await ctx.selfObjectStore().saveObject(typeFor(ctx, source), clone)
 				if (saved) {
 					successfulIds.push(id)
 				} else {
@@ -261,7 +335,9 @@ export function createSelfModeActions(ctx) {
 			return false
 		}
 		try {
-			const saved = await ctx.selfObjectStore().saveObject(ctx.selfObjectType(), formData)
+			const item = ctx.editItem()
+			const type = item ? typeFor(ctx, item) : ctx.selfObjectType()
+			const saved = await ctx.selfObjectStore().saveObject(type, formData)
 			if (saved) {
 				ctx.setResults.form({ success: true })
 				const isCreate = !ctx.editItem()
@@ -277,7 +353,7 @@ export function createSelfModeActions(ctx) {
 					ctx.afterCreateSuccess(saved)
 				}
 			} else {
-				const err = storeError(ctx)
+				const err = storeError(ctx, type)
 				if (err && err.isValidation) {
 					// Keep the form visible so the user can fix the invalid data.
 					ctx.setResults.formValidation(err.fields, err.message || 'Validation failed')

package/src/components/CnIndexPage/useSelfFetchList.js

@@ -106,7 +106,11 @@ export function useSelfFetchList(props, instance, inject, extras = {}) {
 			const register = folder.register || props.register
 			return { register, schema: folder.schema, type: `${register}-${folder.schema}` }
 		}
-		return { register: props.register, schema: props.schema, type: `${props.register}-${props.schema}` }
+		// A collection endpoint gets its own type key, so a plain registration of
+		// the same pair elsewhere never resets it.
+		const collectionUrl = props.collectionUrl || ''
+		const type = `${props.register}-${props.schema}` + (collectionUrl ? `@${collectionUrl}` : '')
+		return { register: props.register, schema: props.schema, type, collectionUrl }
 	})
 	const objectType = computed(() => resolvedTarget.value.type)
 	const sidebarState = inject('sidebarState', null) ?? inject('objectSidebarState', null)
@@ -155,9 +159,17 @@ export function useSelfFetchList(props, instance, inject, extras = {}) {
 	// second arg) — that previously made fetch URLs go to `/api/objects/undefined/[object Object]`.
 	// Runs (sync, ahead of the list's own watcher) again whenever the type switches.
 	function registerTarget() {
-		const { register, schema, type } = resolvedTarget.value
+		const { register, schema, type, collectionUrl } = resolvedTarget.value
 		if (typeof objectStore.registerObjectType === 'function') {
-			objectStore.registerObjectType(type, schema, register, { registerSlug: register, schemaSlug: schema })
+			objectStore.registerObjectType(type, schema, register, {
+				registerSlug: register,
+				schemaSlug: schema,
+				...(collectionUrl ? { collectionUrl } : {}),
+			})
+		}
+		// A mixed list tells its own rows apart by `@self.register`, an id, so a slug register needs resolving.
+		if (collectionUrl && !/^\d+$/.test(String(register)) && typeof objectStore.fetchRegister === 'function') {
+			objectStore.fetchRegister(type)
 		}
 	}
 	registerTarget()

package/src/components/CnObjectCard/CnObjectCard.md

@@ -137,6 +137,7 @@ export default {
 | Prop | Type | Default | Description |
 |---|---|---|---|
 | `maxMetadata` | `Number` | `4` | Maximum number of schema properties to show in the metadata section. Properties are sorted by their `order` value before slicing |
+| `accent` | `Object` | `null` | Status accent `{ variant, icon?, label? }`: a colored start border and, with `icon`, a colored icon before the title. `variant` is `success`, `warning`, `error`, `info` or `primary`; `label` is the icon's tooltip and accessible name |
 
 ## Slots
 

package/src/components/CnObjectCard/CnObjectCard.vue

@@ -1,7 +1,7 @@
 <template>
 	<div
 		class="cn-object-card"
-		:class="{ 'cn-object-card--selected': selected, 'cn-object-card--board': isBoardLook }"
+		:class="[{ 'cn-object-card--selected': selected, 'cn-object-card--board': isBoardLook }, accentVariant && ['cn-object-card--accent', `cn-object-card--accent-${accentVariant}`]]"
 		@mousedown="onCardMouseDown"
 		@click="onCardClick($event)"
 		@auxclick="onCardAuxClick($event)">
@@ -42,6 +42,16 @@
 						     to report. A card whose consumer passes no badges
 						     would otherwise show no padlock at all. -->
 						<CnLockIndicator :object="object" :size="16" />
+						<span
+							v-if="accentVariant && accent.icon"
+							class="cn-object-card__accent-icon"
+							data-testid="cn-object-card-accent-icon"
+							:role="accent.label ? 'img' : null"
+							:aria-label="accent.label || null"
+							:aria-hidden="accent.label ? null : 'true'"
+							:title="accent.label || null">
+							<CnIcon :name="accent.icon" :size="16" />
+						</span>
 						{{ title }}
 					</h3>
 					<p v-if="description" class="cn-object-card__description">
@@ -128,6 +138,8 @@ import { CnIcon } from '../CnIcon/index.js'
 import { CnLockIndicator } from '../CnLockIndicator/index.js'
 import { CnStatusBadge } from '../CnStatusBadge/index.js'
 
+const ACCENT_VARIANTS = ['success', 'warning', 'error', 'info', 'primary']
+
 /**
  * CnObjectCard — Schema-configuration-driven card for object display.
  *
@@ -244,6 +256,20 @@ export default {
 			default: null,
 		},
 
+		/**
+		 * A status accent: a colored border at the start of the card and,
+		 * with `icon`, a colored icon before the title. `variant` is one of
+		 * `success`, `warning`, `error`, `info` or `primary`; `icon` is a
+		 * name registered with CnIcon; `label` names the status for screen
+		 * readers and as the icon's tooltip.
+		 *
+		 * @type {{variant: string, icon?: string, label?: string}}
+		 */
+		accent: {
+			type: Object,
+			default: null,
+		},
+
 		/**
 		 * The property keys the facts list shows, in order (manifest key
 		 * `config.cardFields`). Without it the card shows the first
@@ -307,6 +333,16 @@ export default {
 			return null
 		},
 
+		/**
+		 * The accent variant when it is a known one, else ''.
+		 *
+		 * @return {string}
+		 */
+		accentVariant() {
+			const variant = this.accent?.variant
+			return ACCENT_VARIANTS.includes(variant) ? variant : ''
+		},
+
 		config() {
 			return this.schema?.configuration || {}
 		},
@@ -502,6 +538,58 @@ export default {
 	background: var(--color-primary-element-light);
 }
 
+/* The 4px start border takes 3px of padding, so the content stays put. */
+.cn-object-card.cn-object-card--accent {
+	border-inline-start-width: 4px;
+	padding-inline-start: 13px;
+}
+
+.cn-object-card.cn-object-card--accent-success {
+	border-inline-start-color: var(--color-element-success);
+}
+
+.cn-object-card.cn-object-card--accent-warning {
+	border-inline-start-color: var(--color-element-warning);
+}
+
+.cn-object-card.cn-object-card--accent-error {
+	border-inline-start-color: var(--color-element-error);
+}
+
+.cn-object-card.cn-object-card--accent-info {
+	border-inline-start-color: var(--color-element-info);
+}
+
+.cn-object-card.cn-object-card--accent-primary {
+	border-inline-start-color: var(--color-primary-element);
+}
+
+.cn-object-card__accent-icon {
+	display: inline-flex;
+	vertical-align: -2px;
+	margin-inline-end: 4px;
+}
+
+.cn-object-card--accent-success .cn-object-card__accent-icon {
+	color: var(--color-text-success);
+}
+
+.cn-object-card--accent-warning .cn-object-card__accent-icon {
+	color: var(--color-text-warning);
+}
+
+.cn-object-card--accent-error .cn-object-card__accent-icon {
+	color: var(--color-text-error);
+}
+
+.cn-object-card--accent-info .cn-object-card__accent-icon {
+	color: var(--color-element-info);
+}
+
+.cn-object-card--accent-primary .cn-object-card__accent-icon {
+	color: var(--color-primary-element);
+}
+
 .cn-object-card__checkbox {
 	flex-shrink: 0;
 	padding-top: 2px;