@conduction/nextcloud-vue 2.71.0 → 2.73.0

package/dist/nextcloud-vue.cjs.js.map

@@ -1,4 +1,4 @@
 [diffend] Oversized file quarantined before diffing.
 name: package/dist/nextcloud-vue.cjs.js.map
-size: 35657637 bytes
-sha256: b7b966a528988db88e213ce0afc88832aae9c6b60341877ba5226dc3d833f211
+size: 35692438 bytes
+sha256: 9054c705b23062b8dca68969cf561ce87cf95a1f2c6dea28e8e5cb78a2ca437c

package/dist/nextcloud-vue.css

@@ -26582,6 +26582,18 @@ a.cn-flow-runs-widget__row-content:hover .cn-flow-runs-widget__name[data-v-75628
 	font-size: 0.85em;
 	color: var(--color-text-maxcontrast);
 }
+
+/* Full width, like the text fields around it: at its natural width the
+   picker cut every option label in half. */
+.cn-flow-node-edit__select[data-v-e107484a] {
+	width: 100%;
+}
+.cn-flow-node-edit__field-help[data-v-e107484a] {
+	margin: 4px 0 0;
+	padding-inline-start: 8px;
+	font-size: 0.85em;
+	color: var(--color-text-maxcontrast);
+}
 .cn-flow-node-edit__advanced summary[data-v-e107484a] {
 	cursor: pointer;
 	color: var(--color-text-maxcontrast);
@@ -28036,6 +28048,58 @@ to {
 }
 
 
+.cn-flow-step-outcomes[data-v-5ac5ad4f] {
+	margin: 4px 0 0;
+	font-size: 0.9em;
+}
+.cn-flow-step-outcomes__list[data-v-5ac5ad4f] {
+	margin: 0;
+	padding: 0;
+}
+
+/* Stacked, name over value: the run sidebar is narrow, and a side-by-side
+   row wrapped mid-list. The host's dt/dd margins and alignment are reset. */
+.cn-flow-step-outcomes__row[data-v-5ac5ad4f] {
+	display: block;
+	margin-block: 4px;
+	padding-block: 2px;
+	padding-inline-start: 8px;
+	border-inline-start: 3px solid var(--color-border);
+	text-align: start;
+}
+.cn-flow-step-outcomes__row--success[data-v-5ac5ad4f] {
+	border-inline-start-color: var(--color-success);
+}
+.cn-flow-step-outcomes__row--warning[data-v-5ac5ad4f] {
+	border-inline-start-color: var(--color-warning);
+}
+.cn-flow-step-outcomes__row--error[data-v-5ac5ad4f] {
+	border-inline-start-color: var(--color-error);
+}
+.cn-flow-step-outcomes__name[data-v-5ac5ad4f] {
+	display: block;
+	white-space: normal;
+	overflow-wrap: anywhere;
+	margin: 0;
+	padding: 0;
+	font-weight: bold;
+	text-align: start;
+}
+.cn-flow-step-outcomes__value[data-v-5ac5ad4f] {
+	display: block;
+	white-space: normal;
+	margin: 0;
+	padding: 0;
+	text-align: start;
+	color: var(--color-main-text);
+	overflow-wrap: anywhere;
+}
+.cn-flow-step-outcomes__truncated[data-v-5ac5ad4f] {
+	margin: 4px 0 0;
+	color: var(--color-text-maxcontrast);
+}
+
+
 .cn-run-sidebar[data-v-48e781f0] {
 	display: flex;
 	flex-direction: column;

package/l10n/en.json

@@ -1106,7 +1106,21 @@
     "Loading…": "Loading…",
     "A register and schema are required": "A register and schema are required",
     "Change the search or try again.": "Change the search or try again.",
-    "Try again later.": "Try again later."
+    "Try again later.": "Try again later.",
+    "Who this step reached": "Who this step reached",
+    "Each list shows its first entries only.": "Each list shows its first entries only.",
+    "Delivered": "Delivered",
+    "Opted out": "Opted out",
+    "Not sent, the opt-out check did not answer": "Not sent, the opt-out check did not answer",
+    "Skipped by their notification settings": "Skipped by their notification settings",
+    "Skipped, sending is switched off": "Skipped, sending is switched off",
+    "Held back by the send limit": "Held back by the send limit",
+    "Refused by the step’s address rule": "Refused by the step’s address rule",
+    "Not a known user or group": "Not a known user or group",
+    "Failed": "Failed",
+    "external recipients are off": "external recipients are off",
+    "not on the item": "not on the item",
+    "not a valid address": "not a valid address"
   },
   "plurals": {
     "%n year": ["%n year", "%n years"],

package/l10n/nl.json

@@ -1150,7 +1150,21 @@
     "Loading…": "Laden…",
     "A register and schema are required": "Een register en schema zijn verplicht",
     "Change the search or try again.": "Pas de zoekopdracht aan of probeer het opnieuw.",
-    "Try again later.": "Probeer het later opnieuw."
+    "Try again later.": "Probeer het later opnieuw.",
+    "Who this step reached": "Wie deze stap bereikte",
+    "Each list shows its first entries only.": "Elke lijst toont alleen de eerste vermeldingen.",
+    "Delivered": "Bezorgd",
+    "Opted out": "Afgemeld",
+    "Not sent, the opt-out check did not answer": "Niet verstuurd, de afmeldcontrole gaf geen antwoord",
+    "Skipped by their notification settings": "Overgeslagen door hun meldingsinstellingen",
+    "Skipped, sending is switched off": "Overgeslagen, verzenden staat uit",
+    "Held back by the send limit": "Tegengehouden door de verzendlimiet",
+    "Refused by the step’s address rule": "Geweigerd door de adresregel van de stap",
+    "Not a known user or group": "Geen bekende gebruiker of groep",
+    "Failed": "Mislukt",
+    "external recipients are off": "externe ontvangers staan uit",
+    "not on the item": "staat niet op het item",
+    "not a valid address": "geen geldig adres"
   },
   "plurals": {
     "%n year": ["%n jaar", "%n jaar"],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@conduction/nextcloud-vue",
-  "version": "2.71.0",
+  "version": "2.73.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/scripts/openregister-reliance.js

@@ -0,0 +1,206 @@
+/**
+ * SPDX-FileCopyrightText: 2026 Conduction B.V.
+ * SPDX-License-Identifier: EUPL-1.2
+ */
+
+/**
+ * Scores every component under src/components on how much it relies on
+ * OpenRegister and writes the result to docs/components/_generated/reliance.json
+ * for the documentation site.
+ *
+ * Two numbers per component:
+ *   - direct: lines inside the component's own directory that reference
+ *     OpenRegister (store imports, API paths, composables, the register and
+ *     schema selector).
+ *   - transitive: files outside the directory, reached by following the actual
+ *     import statements, that carry such a reference. A wrapper with no
+ *     reference of its own still counts the children it cannot render without,
+ *     while importing the widget registry alone does not drag in every widget.
+ *
+ * The tier follows the sum: none (0), light (1 to 3), medium (4 to 10) and
+ * heavy (11 and more). A component with tier none does not touch OpenRegister
+ * itself nor through anything it imports.
+ *
+ * Usage: node scripts/openregister-reliance.js
+ */
+
+const fs = require('fs')
+const path = require('path')
+
+/** Patterns that mark a direct OpenRegister reliance; each hit counts once per line. */
+const DIRECT_MARKERS = [
+	/\/apps\/openregister/,
+	/\bopenregister\b/i,
+	/useObjectStore|useRegisterStore|useSchemaStore|createObjectStore|createCrudStore/,
+	/from '[^']*\/store(\/index\.js)?'/,
+	/from '[^']*\/store\/[^']+'/,
+	/objectService|ObjectService/,
+	/CnRegisterSchemaSelect/,
+]
+
+const SOURCE_FILE = /\.(vue|js|ts|mjs)$/
+const TEST_FILE = /\.(spec|test)\./
+
+/**
+ * @param {string} dir directory to walk
+ * @return {string[]} source files below it, tests excluded
+ */
+function walk(dir) {
+	const files = []
+	for (const entry of fs.readdirSync(dir)) {
+		const full = path.join(dir, entry)
+		if (fs.statSync(full).isDirectory()) {
+			if (entry !== 'node_modules' && entry !== '__tests__') {
+				files.push(...walk(full))
+			}
+		} else if (SOURCE_FILE.test(entry) && !TEST_FILE.test(entry)) {
+			files.push(full)
+		}
+	}
+	return files
+}
+
+/**
+ * @param {string} source file contents
+ * @return {number} lines with a direct marker, comments excluded
+ */
+function countDirect(source) {
+	let count = 0
+	for (const line of source.split('\n')) {
+		const trimmed = line.trimStart()
+		if (trimmed.startsWith('*') || trimmed.startsWith('//') || trimmed.startsWith('/*')) {
+			continue
+		}
+		if (DIRECT_MARKERS.some((marker) => marker.test(line))) {
+			count++
+		}
+	}
+	return count
+}
+
+/**
+ * Resolves a relative import to a file on disk the way the bundler does.
+ *
+ * @param {string} fromFile importing file
+ * @param {string} specifier the relative import path
+ * @return {string|null}
+ */
+function resolveImport(fromFile, specifier) {
+	const base = path.resolve(path.dirname(fromFile), specifier)
+	const candidates = [base, base + '.js', base + '.mjs', base + '.ts', base + '.vue', path.join(base, 'index.js'), path.join(base, 'index.mjs'), path.join(base, 'index.ts')]
+	return candidates.find((candidate) => fs.existsSync(candidate) && fs.statSync(candidate).isFile()) ?? null
+}
+
+/**
+ * @param {string} source file contents
+ * @return {string[]} relative import specifiers, static and dynamic
+ */
+function relativeImports(source) {
+	return [...source.matchAll(/(?:from\s+|import\s*\(\s*|import\s+)'(\.{1,2}\/[^']+)'/g)].map((match) => match[1])
+}
+
+/**
+ * @param {number} score direct lines plus transitive files
+ * @return {'none'|'light'|'medium'|'heavy'}
+ */
+function tierOf(score) {
+	if (score === 0) {
+		return 'none'
+	}
+	if (score <= 3) {
+		return 'light'
+	}
+	if (score <= 10) {
+		return 'medium'
+	}
+	return 'heavy'
+}
+
+/**
+ * @param {string} componentName e.g. CnDeleteDialog
+ * @return {string} the docs page slug, e.g. cn-delete-dialog
+ */
+function pageSlug(componentName) {
+	return componentName.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase()
+}
+
+/**
+ * @param {string} srcDir the src directory holding components/
+ * @param {string|null} docsComponentsDir where the component pages live, to link only existing pages
+ * @return {Record<string, {direct: number, transitive: number, tier: string, via: string[], page: string|null}>}
+ */
+function computeReliance(srcDir, docsComponentsDir = null) {
+	const componentsDir = path.join(srcDir, 'components')
+	const files = new Map()
+	for (const file of walk(srcDir)) {
+		const source = fs.readFileSync(file, 'utf8')
+		files.set(file, {
+			direct: countDirect(source),
+			imports: relativeImports(source).map((specifier) => resolveImport(file, specifier)).filter(Boolean),
+		})
+	}
+
+	const reachable = (startFiles) => {
+		const own = new Set(startFiles)
+		const seen = new Set()
+		const queue = [...startFiles]
+		while (queue.length > 0) {
+			const file = queue.pop()
+			for (const next of (files.get(file) ?? { imports: [] }).imports) {
+				if (!own.has(next) && !seen.has(next)) {
+					seen.add(next)
+					queue.push(next)
+				}
+			}
+		}
+		return [...seen]
+	}
+
+	const result = {}
+	for (const entry of fs.readdirSync(componentsDir).sort()) {
+		const dir = path.join(componentsDir, entry)
+		if (!fs.statSync(dir).isDirectory() || !/^Cn[A-Z]/.test(entry)) {
+			continue
+		}
+		const ownFiles = walk(dir)
+		const direct = ownFiles.reduce((sum, file) => sum + (files.get(file)?.direct ?? 0), 0)
+		const relyingFiles = reachable(ownFiles).filter((file) => (files.get(file)?.direct ?? 0) > 0)
+		const via = new Set(relyingFiles
+			.filter((file) => file.startsWith(componentsDir + path.sep))
+			.map((file) => file.slice(componentsDir.length + 1).split(path.sep)[0])
+			.filter((name) => name !== entry))
+		const slug = pageSlug(entry)
+		const hasPage = docsComponentsDir !== null && fs.existsSync(path.join(docsComponentsDir, slug + '.md'))
+		result[entry] = {
+			direct,
+			transitive: relyingFiles.length,
+			tier: tierOf(direct + relyingFiles.length),
+			via: [...via].sort(),
+			page: hasPage ? slug : null,
+		}
+	}
+	return result
+}
+
+/**
+ * @param {string} repoRoot the repository root
+ * @return {{outFile: string, components: object}}
+ */
+function writeReliance(repoRoot) {
+	const components = computeReliance(path.join(repoRoot, 'src'), path.join(repoRoot, 'docs/components'))
+	const outFile = path.join(repoRoot, 'docs/components/_generated/reliance.json')
+	fs.mkdirSync(path.dirname(outFile), { recursive: true })
+	fs.writeFileSync(outFile, JSON.stringify({ generatedBy: 'scripts/openregister-reliance.js', components }, null, '\t') + '\n')
+	return { outFile, components }
+}
+
+module.exports = { computeReliance, countDirect, tierOf, pageSlug, writeReliance }
+
+if (require.main === module) {
+	const { outFile, components } = writeReliance(path.resolve(__dirname, '..'))
+	const tiers = {}
+	for (const item of Object.values(components)) {
+		tiers[item.tier] = (tiers[item.tier] ?? 0) + 1
+	}
+	console.log(`wrote ${path.relative(process.cwd(), outFile)}: ${Object.keys(components).length} components`, tiers)
+}

package/src/components/CnFlowDetail/CnFlowDetail.vue

@@ -200,6 +200,8 @@
 			:maxZoom="maxZoom"
 			@zoomChange="zoom = $event"
 			@nodeSelect="onNodeSelect"
+			@nodeActivate="onNodeActivate"
+			@nodeMenu="onNodeMenu"
 			@edgeSelect="onEdgeSelect"
 			@edgeLabelClick="onEdgeLabelClick"
 			@edgeLabelContext="onEdgeLabelContext"
@@ -1713,6 +1715,31 @@ export default {
 			this.openNodeMenu({ item: id, event: mouse })
 		},
 
+		/**
+		 * Enter or Space on a step: open its editor, as a double-click does.
+		 *
+		 * @param {string} id The step id.
+		 * @return {void}
+		 */
+		onNodeActivate(id) {
+			this.store.selectedNodeId = id
+			this.store.editingNodeId = id
+		},
+
+		/**
+		 * Shift+F10 or the menu key on a step: its menu, at the step.
+		 *
+		 * @param {object} request          The node's request.
+		 * @param {string} request.id       The step id.
+		 * @param {number} request.clientX  Where to place the menu.
+		 * @param {number} request.clientY  Where to place the menu.
+		 * @return {void}
+		 */
+		onNodeMenu({ id, clientX, clientY }) {
+			this.store.selectedNodeId = id
+			this.openNodeMenu({ item: id, event: { clientX, clientY } })
+		},
+
 		/**
 		 * Place a palette node where it was dropped.
 		 *

package/src/components/CnFlowDetail/CnRunDetailSidebar.vue

@@ -226,6 +226,10 @@
 					<strong>{{ step.transition }}</strong>
 					<span class="cn-run-sidebar__hint"> · {{ step.status }}</span>
 					<span v-if="step.error" class="cn-run-sidebar__error"> · {{ step.error }}</span>
+					<!-- A send step's outcome lists, by name: who got it, who
+					     opted out, who the opt-out check could not answer for. -->
+					<CnFlowStepOutcomes v-if="step.report && step.report.messaging"
+						:report="step.report.messaging" />
 				</li>
 			</ol>
 		</component>
@@ -241,6 +245,7 @@ import CheckboxMarkedOutline from 'vue-material-design-icons/CheckboxMarkedOutli
 import DatabaseOutline from 'vue-material-design-icons/DatabaseOutline.vue'
 import FormatListBulleted from 'vue-material-design-icons/FormatListBulleted.vue'
 import Replay from 'vue-material-design-icons/Replay.vue'
+import CnFlowStepOutcomes from '../CnFlowStepOutcomes/CnFlowStepOutcomes.vue'
 import { FLOW_RUN_ACTIVE_STATUSES, useFlowStore } from '../../composables/useFlowStore.js'
 
 export default {
@@ -249,6 +254,7 @@ export default {
 	components: {
 		ArrowLeft,
 		CheckboxMarkedOutline,
+		CnFlowStepOutcomes,
 		DatabaseOutline,
 		FormatListBulleted,
 		NcAppSidebarTab,

package/src/components/CnFlowStepOutcomes/CnFlowStepOutcomes.vue

@@ -0,0 +1,250 @@
+<!--
+  CnFlowStepOutcomes: who a send step reached, and who it did not, by name.
+
+  A messaging step (send email, send notification, post to Talk) writes its
+  per-recipient outcome onto its run-log entry as `report.messaging`: one
+  bucket per outcome, each `{count, sample}`. Nothing rendered it, so the run
+  log could not show that a person was skipped because they opted out, or
+  because the opt-out check did not answer.
+
+  Only buckets with someone in them are listed. A bucket this component does
+  not know is still shown, under its own key made readable, so a new outcome
+  on the server is never hidden by an older library.
+
+  SPDX-FileCopyrightText: 2026 Conduction B.V. <info@conduction.nl>
+  SPDX-License-Identifier: EUPL-1.2
+-->
+<template>
+	<div v-if="rows.length" class="cn-flow-step-outcomes" data-testid="flow-step-outcomes">
+		<dl class="cn-flow-step-outcomes__list" :aria-label="t('nextcloud-vue', 'Who this step reached')">
+			<div v-for="row in rows"
+				:key="row.key"
+				class="cn-flow-step-outcomes__row"
+				:class="`cn-flow-step-outcomes__row--${row.tone}`"
+				:data-testid="`flow-step-outcome-${row.key}`">
+				<dt class="cn-flow-step-outcomes__name">
+					{{ row.label }}
+				</dt>
+				<dd class="cn-flow-step-outcomes__value">
+					<span class="cn-flow-step-outcomes__count">{{ row.count }}</span>
+					<span v-if="row.sample.length" class="cn-flow-step-outcomes__sample"> · {{ row.sample.join(', ') }}</span>
+				</dd>
+			</div>
+		</dl>
+		<p v-if="report && report.truncated"
+			class="cn-flow-step-outcomes__truncated"
+			data-testid="flow-step-outcomes-truncated">
+			{{ t('nextcloud-vue', 'Each list shows its first entries only.') }}
+		</p>
+	</div>
+</template>
+
+<script>
+import { translate as t } from '@nextcloud/l10n'
+
+/**
+ * The buckets a messaging report carries, in reading order: who got it first,
+ * then each reason someone did not. `tone` marks the row for styling only.
+ */
+const KNOWN_BUCKETS = [
+	{ key: 'delivered', tone: 'success' },
+	{ key: 'optedOut', tone: 'neutral' },
+	{ key: 'authorityUnavailable', tone: 'warning' },
+	{ key: 'skippedByPreference', tone: 'neutral' },
+	{ key: 'skippedByKillSwitch', tone: 'neutral' },
+	{ key: 'rateLimited', tone: 'warning' },
+	{ key: 'refusedRecipients', tone: 'warning' },
+	{ key: 'unknownRecipients', tone: 'warning' },
+	{ key: 'failed', tone: 'error' },
+]
+
+/** Report keys that are facts about the send, not outcome buckets. */
+const NOT_BUCKETS = ['channel', 'actor', 'recipients', 'truncated']
+
+export default {
+	name: 'CnFlowStepOutcomes',
+
+	props: {
+		/**
+		 * A step's messaging report: the run-log entry's `report.messaging`.
+		 * Each outcome bucket is `{count, sample}`; a `refusedRecipients`
+		 * sample entry is `{recipient, reason}`. `null` renders nothing.
+		 */
+		report: {
+			type: Object,
+			default: null,
+		},
+
+		/**
+		 * Names to use instead of the built-in ones, keyed by bucket
+		 * (`{ optedOut: 'Unsubscribed' }`). Pass already-translated text.
+		 */
+		labels: {
+			type: Object,
+			default: () => ({}),
+		},
+	},
+
+	computed: {
+		/**
+		 * The non-empty buckets, known ones first in reading order, then any
+		 * bucket the server added that this component does not know.
+		 *
+		 * @return {Array<object>} One row per bucket: key, label, count, sample, tone.
+		 */
+		rows() {
+			const report = this.report
+			if (!report || typeof report !== 'object') {
+				return []
+			}
+
+			const known = KNOWN_BUCKETS.map((bucket) => bucket.key)
+			const extra = Object.keys(report).filter((key) => !known.includes(key) && !NOT_BUCKETS.includes(key))
+			const ordered = [
+				...KNOWN_BUCKETS,
+				...extra.map((key) => ({ key, tone: 'neutral' })),
+			]
+
+			return ordered
+				.map(({ key, tone }) => ({ key, tone, bucket: report[key] }))
+				.filter(({ bucket }) => bucket && typeof bucket === 'object' && Number(bucket.count) > 0)
+				.map(({ key, tone, bucket }) => ({
+					key,
+					tone,
+					label: this.labelFor(key),
+					count: Number(bucket.count),
+					sample: (Array.isArray(bucket.sample) ? bucket.sample : []).map((entry) => this.describeEntry(entry)),
+				}))
+		},
+	},
+
+	methods: {
+		t,
+
+		/**
+		 * The readable name of a bucket: the host's, then the built-in one,
+		 * then the key itself (`heldForReview` reads "Held for review").
+		 *
+		 * @param {string} key The bucket key.
+		 * @return {string} The name.
+		 */
+		labelFor(key) {
+			if (this.labels && this.labels[key]) {
+				return String(this.labels[key])
+			}
+
+			const builtIn = {
+				delivered: t('nextcloud-vue', 'Delivered'),
+				optedOut: t('nextcloud-vue', 'Opted out'),
+				authorityUnavailable: t('nextcloud-vue', 'Not sent, the opt-out check did not answer'),
+				skippedByPreference: t('nextcloud-vue', 'Skipped by their notification settings'),
+				skippedByKillSwitch: t('nextcloud-vue', 'Skipped, sending is switched off'),
+				rateLimited: t('nextcloud-vue', 'Held back by the send limit'),
+				refusedRecipients: t('nextcloud-vue', 'Refused by the step’s address rule'),
+				unknownRecipients: t('nextcloud-vue', 'Not a known user or group'),
+				failed: t('nextcloud-vue', 'Failed'),
+			}
+			if (builtIn[key]) {
+				return builtIn[key]
+			}
+
+			const words = String(key).replace(/([a-z0-9])([A-Z])/g, '$1 $2').replace(/[-_]+/g, ' ').trim().toLowerCase()
+
+			return words.charAt(0).toUpperCase() + words.slice(1)
+		},
+
+		/**
+		 * One sample entry as text. A refused address carries its reason.
+		 *
+		 * @param {string|object} entry The sample entry.
+		 * @return {string} The text.
+		 */
+		describeEntry(entry) {
+			if (entry && typeof entry === 'object') {
+				const who = String(entry.recipient ?? entry.id ?? '')
+				const reason = this.reasonFor(entry.reason)
+
+				return reason ? `${who} (${reason})` : who
+			}
+
+			return String(entry)
+		},
+
+		/**
+		 * Why the step's address rule refused an address, in words.
+		 *
+		 * @param {string} [code] The refusal code.
+		 * @return {string} The reason, or the code when it is not known.
+		 */
+		reasonFor(code) {
+			const reasons = {
+				'external-recipients-off': t('nextcloud-vue', 'external recipients are off'),
+				'not-on-item': t('nextcloud-vue', 'not on the item'),
+				'invalid-address': t('nextcloud-vue', 'not a valid address'),
+			}
+
+			return code ? (reasons[code] || String(code)) : ''
+		},
+	},
+}
+</script>
+
+<style scoped>
+.cn-flow-step-outcomes {
+	margin: 4px 0 0;
+	font-size: 0.9em;
+}
+
+.cn-flow-step-outcomes__list {
+	margin: 0;
+	padding: 0;
+}
+
+/* Stacked, name over value: the run sidebar is narrow, and a side-by-side
+   row wrapped mid-list. The host's dt/dd margins and alignment are reset. */
+.cn-flow-step-outcomes__row {
+	display: block;
+	margin-block: 4px;
+	padding-block: 2px;
+	padding-inline-start: 8px;
+	border-inline-start: 3px solid var(--color-border);
+	text-align: start;
+}
+
+.cn-flow-step-outcomes__row--success {
+	border-inline-start-color: var(--color-success);
+}
+
+.cn-flow-step-outcomes__row--warning {
+	border-inline-start-color: var(--color-warning);
+}
+
+.cn-flow-step-outcomes__row--error {
+	border-inline-start-color: var(--color-error);
+}
+
+.cn-flow-step-outcomes__name {
+	display: block;
+	white-space: normal;
+	overflow-wrap: anywhere;
+	margin: 0;
+	padding: 0;
+	font-weight: bold;
+	text-align: start;
+}
+
+.cn-flow-step-outcomes__value {
+	display: block;
+	white-space: normal;
+	margin: 0;
+	padding: 0;
+	text-align: start;
+	color: var(--color-main-text);
+	overflow-wrap: anywhere;
+}
+
+.cn-flow-step-outcomes__truncated {
+	margin: 4px 0 0;
+	color: var(--color-text-maxcontrast);
+}
+</style>

package/src/components/CnFlowStepOutcomes/index.js

@@ -0,0 +1,8 @@
+/**
+ * SPDX-FileCopyrightText: 2026 Conduction B.V. <info@conduction.nl>
+ * SPDX-License-Identifier: EUPL-1.2
+ */
+import CnFlowStepOutcomes from './CnFlowStepOutcomes.vue'
+
+export default CnFlowStepOutcomes
+export { CnFlowStepOutcomes }