@conduction/nextcloud-vue 2.104.0 → 2.106.0

package/l10n/en.json

@@ -1724,7 +1724,26 @@
     "No contacts linked": "No contacts linked",
     "No relations yet": "No relations yet",
     "Period": "Period",
-    "On": "On"
+    "On": "On",
+    "Select a step on the canvas to see its settings.": "Select a step on the canvas to see its settings.",
+    "Show runs": "Show runs",
+    "Back to the step settings": "Back to the step settings",
+    "Sort": "Sort",
+    "Direction": "Direction",
+    "Ascending": "Ascending",
+    "Descending": "Descending",
+    "ascending": "ascending",
+    "descending": "descending",
+    "Not sorted": "Not sorted",
+    "Current order: {order}": "Current order: {order}",
+    "Soon": "Soon",
+    "{name} (you)": "{name} (you)",
+    "{present} of {total} present": "{present} of {total} present",
+    "Absent today": "Absent today",
+    "{message} until {time}": "{message} until {time}",
+    "Away": "Away",
+    "Busy": "Busy",
+    "No one in the team": "No one in the team"
   },
   "plurals": {
     "{count} member": [
@@ -1842,6 +1861,10 @@
     "downloaded %n time": [
       "downloaded %n time",
       "downloaded %n times"
+    ],
+    "{count} open": [
+      "{count} open",
+      "{count} open"
     ]
   }
 }

package/l10n/nl.json

@@ -1937,7 +1937,26 @@
     "No contacts linked": "Geen contacten gekoppeld",
     "No relations yet": "Nog geen relaties",
     "Period": "Periode",
-    "On": "Aan"
+    "On": "Aan",
+    "Select a step on the canvas to see its settings.": "Kies een stap op het canvas om de instellingen te zien.",
+    "Show runs": "Uitvoeringen tonen",
+    "Back to the step settings": "Terug naar de stapinstellingen",
+    "Sort": "Sorteren",
+    "Direction": "Richting",
+    "Ascending": "Oplopend",
+    "Descending": "Aflopend",
+    "ascending": "oplopend",
+    "descending": "aflopend",
+    "Not sorted": "Niet gesorteerd",
+    "Current order: {order}": "Huidige volgorde: {order}",
+    "Soon": "Bijna",
+    "{name} (you)": "{name} (u)",
+    "{present} of {total} present": "{present} van {total} aanwezig",
+    "Absent today": "Vandaag afwezig",
+    "{message} until {time}": "{message} tot {time}",
+    "Away": "Afwezig",
+    "Busy": "Bezet",
+    "No one in the team": "Niemand in het team"
   },
   "plurals": {
     "{count} member": [
@@ -2055,6 +2074,10 @@
     "downloaded %n time": [
       "%n keer gedownload",
       "%n keer gedownload"
+    ],
+    "{count} open": [
+      "{count} open",
+      "{count} open"
     ]
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@conduction/nextcloud-vue",
-  "version": "2.104.0",
+  "version": "2.106.0",
   "description": "Shared Vue component library for Conduction Nextcloud apps — complements @nextcloud/vue with higher-level components, OpenRegister integration, and NL Design System support",
   "homepage": "https://github.com/ConductionNL/nextcloud-vue#readme",
   "bugs": {

package/src/components/CnAdminSettingsShell/CnAdminSettingsShell.vue

@@ -160,7 +160,7 @@
 			<template #additional-items>
 				<!-- The board card: support as one fact row, the SLA address on the same line. -->
 				<div v-if="compactCard && showSupport && !supportAtEnd && !$slots.footer" class="cn-version-info__item" data-testid="cn-admin-settings-support-row">
-					<span class="cn-version-info__label">{{ supportTitle }}:</span>
+					<span class="cn-version-info__label">{{ supportTitle }}</span>
 					<span class="cn-version-info__value">
 						<a :href="`mailto:${supportEmail}`">{{ supportEmail }}</a><template v-if="slaEmail">, {{ slaInline }} <a :href="`mailto:${slaEmail}`">{{ slaEmail }}</a></template>
 					</span>

package/src/components/CnCardGrid/CnCardGrid.md

@@ -113,6 +113,8 @@ Custom card slot — replace the default CnObjectCard with your own rendering:
 | Prop | Type | Default | Description |
 |---|---|---|---|
 | `cardFields` | Array | `null` | Property keys each card's facts list shows |
+| `cardFieldColumns` | Object | `null` | The page's columns by key, passed to each CnObjectCard (see CnObjectCard `cardFieldColumns`) |
+| `cardLayout` | Object | `null` | Board look: the record layout each card draws, passed to CnObjectCard `layout` |
 | `statusOf` | Function | `null` | `(object) => status` for each card's status pill |
 | `leadingOf` | Function | `null` | `(object) => { initials | icon }` for each card's leading element |
 | `footerActionOf` | Function | `null` | `(object) => { label, meta? }` for each card's footer action |

package/src/components/CnCardGrid/CnCardGrid.vue

@@ -37,6 +37,8 @@
 						:clickToView="clickToView"
 						:selected="isSelected(object)"
 						:cardFields="cardFields"
+						:layout="cardLayout"
+						:cardFieldColumns="cardFieldColumns"
 						:status="statusOf ? statusOf(object) : null"
 						:leading="leadingOf ? leadingOf(object) : null"
 						:footerAction="footerActionOf ? footerActionOf(object) : null"
@@ -165,6 +167,24 @@ export default {
 			default: null,
 		},
 
+		/**
+		 * Board look: the record layout each card draws (manifest key
+		 * `config.cardLayout`), passed through to CnObjectCard `layout`.
+		 *
+		 * @type {object}
+		 * @spec openspec/changes/board-record-card-layout/specs/board-record-card-layout/spec.md#requirement-a-board-card-can-draw-the-record-layout-from-config
+		 */
+		cardLayout: {
+			type: Object,
+			default: null,
+		},
+
+		/** The page's columns by key, passed through to CnObjectCard. */
+		cardFieldColumns: {
+			type: Object,
+			default: null,
+		},
+
 		/** Board look: `(object) => status` for each card's status pill. See CnObjectCard `status`. */
 		statusOf: {
 			type: Function,

package/src/components/CnCellRenderer/CnCellRenderer.vue

@@ -194,7 +194,7 @@
 				<time
 					v-if="dateTimestamp"
 					class="cn-cell-renderer__date"
-					:class="dueResult.tone === 'danger' ? 'cn-cell-renderer__date--error' : null"
+					:class="dueClass"
 					:datetime="dateTimestamp.toISOString()"
 					:title="absoluteDateLabel"
 					data-testid="cn-cell-renderer-due">{{ dueResult.text }}</time>
@@ -780,6 +780,24 @@ export default {
 			return Number.isFinite(size) && size > 0 ? size : (this.isBoardLook ? 32 : 24)
 		},
 
+		/**
+		 * `date` widget with `widgetProps.due`: the colour class. The
+		 * `variantWhen` rules win when they match; else an overdue date reads
+		 * as an error and a soon one (`due.soonWithin`) as a warning.
+		 *
+		 * @return {string|null} The class, or null for the plain colour.
+		 * @spec openspec/changes/due-text-soon/specs/due-text-soon/spec.md#requirement-a-due-date-within-a-few-days-reads-as-soon
+		 */
+		dueClass() {
+			if (this.dateVariant) {
+				return 'cn-cell-renderer__date--' + this.dateVariant
+			}
+			if (this.dueResult && this.dueResult.tone === 'danger') {
+				return 'cn-cell-renderer__date--error'
+			}
+			return this.dueResult && this.dueResult.soon ? 'cn-cell-renderer__date--warning' : null
+		},
+
 		/**
 		 * `date` widget: the variant of the first `widgetProps.variantWhen`
 		 * rule the date matches, or '' for none.

package/src/components/CnChartWidget/CnChartWidget.md

@@ -108,6 +108,8 @@ Fallback slot — shown when ApexCharts is not available:
 | `legendPosition` | String | `''` | Legend placement override (`top`/`bottom`/`left`/`right`); empty keeps the automatic placement |
 | `barMax` | Number | `null` | `bar-list`: the value a full track stands for (100 for percentages); null takes the largest value |
 | `footnote` | String | `''` | A line under the chart, through the host's translate: under the rows of a `bar-list` or `matrix`, under the plot of a `line`, `area` or `bar` chart |
+| `referenceLines` | Array | `[]` | Dashed horizontal reference lines on the value axis of a line, area or bar chart, such as a norm: `[{ value, label?, color? }]`. The label goes through the host's translate; the colour defaults to the theme's error colour (board DqDoorlooptijd). |
+| `categoryFormat` | String | `''` | How date categories read on the x-axis: `month` ("jan") or `month-year` ("jan 2026"), in the user's language. Categories that are not dates are left as is. |
 | `emptyCellLabel` | String | `''` | `matrix`: the text of a cell without a value ("geen"), through the host's translate. Empty leaves the cell blank |
 | `highlight` | Object | `null` | `matrix`: the cell to outline, `{ row, column, columnKeys? }`, tokens such as `@object.behaviour` resolved |
 | `cellSource` | Object | `null` | `matrix`: read the cells from records that each hold one cell (`{ register, schema, filter?, rowField, columnField, valueField, … }`), or with `cellsPath` from the cells inside one record, see [Bar list and matrix](#bar-list-and-matrix) |

package/src/components/CnChartWidget/CnChartWidget.vue

@@ -220,6 +220,22 @@ function parseBucketKey(key) {
 	)
 }
 
+/**
+ * A theme colour by CSS variable name, as a literal: ApexCharts writes colours
+ * into SVG attributes, where `var()` does not resolve.
+ *
+ * @param {string} name The variable, e.g. `--color-error`.
+ * @param {string} fallback The colour when the variable is unset (or no DOM).
+ * @return {string} The colour.
+ */
+function themeColor(name, fallback) {
+	if (typeof document === 'undefined' || typeof getComputedStyle !== 'function') {
+		return fallback
+	}
+	const value = getComputedStyle(document.documentElement).getPropertyValue(name).trim()
+	return value || fallback
+}
+
 /** Event-bus channel CnWidgetWrapper's Refresh action broadcasts on. */
 const REFRESH_BUS_CHANNEL = 'cn:widget:refresh'
 
@@ -385,6 +401,31 @@ export default {
 			default: '',
 		},
 
+		/**
+		 * Horizontal reference lines on the value axis of a line, area or bar
+		 * chart, such as a norm: `[{ value, label?, color? }]`. Drawn dashed;
+		 * the label goes through the host's translate. The colour defaults to
+		 * the theme's error colour.
+		 *
+		 * @type {Array<{value: number, label?: string, color?: string}>}
+		 */
+		referenceLines: {
+			type: Array,
+			default: () => [],
+		},
+
+		/**
+		 * How date categories read on the x-axis: `month` ("jan") or
+		 * `month-year` ("jan 2026"), in the user's language. A category that
+		 * is not a date is shown as is. Empty shows the categories unchanged.
+		 *
+		 * @type {''|'month'|'month-year'}
+		 */
+		categoryFormat: {
+			type: String,
+			default: '',
+		},
+
 		/**
 		 * The `matrix` cell to outline, usually the record's on a detail page:
 		 * `{ row, column, columnKeys? }`, where `row` and `column` take tokens
@@ -1505,6 +1546,51 @@ export default {
 			return this.footnote ? this.hostTranslate(this.footnote) : t('nextcloud-vue', 'Chart data')
 		},
 
+		/**
+		 * The x-axis categories as shown: with `categoryFormat`, date
+		 * categories as short months in the user's language.
+		 *
+		 * @return {Array<string|number>} The categories.
+		 */
+		displayCategories() {
+			const categories = Array.isArray(this.resolvedCategories) ? this.resolvedCategories : []
+			if (this.categoryFormat !== 'month' && this.categoryFormat !== 'month-year') {
+				return categories
+			}
+			const options = this.categoryFormat === 'month' ? { month: 'short' } : { month: 'short', year: 'numeric' }
+			return categories.map((category) => {
+				const date = typeof category === 'string' || typeof category === 'number' ? parseBucketKey(category) : null
+				return date ? date.toLocaleDateString(userLocale(), options) : category
+			})
+		},
+
+		/**
+		 * The `referenceLines` as ApexCharts annotations: dashed, labelled,
+		 * in the theme's error colour unless a line names its own.
+		 *
+		 * @return {Array<object>} The annotations, possibly empty.
+		 */
+		referenceAnnotations() {
+			const lines = (Array.isArray(this.referenceLines) ? this.referenceLines : [])
+				.filter((line) => line && Number.isFinite(Number(line.value)))
+			if (lines.length === 0) {
+				return []
+			}
+			const fallback = themeColor('--color-error', '#e04224')
+			return lines.map((line) => {
+				const color = line.color || fallback
+				return {
+					y: Number(line.value),
+					x: Number(line.value),
+					borderColor: color,
+					strokeDashArray: 6,
+					label: line.label
+						? { text: this.hostTranslate(line.label), borderColor: color, style: { color: '#fff', background: color } }
+						: { text: '' },
+				}
+			})
+		},
+
 		mergedOptions() {
 			const isPieType = ['pie', 'donut', 'radialBar'].includes(this.type)
 
@@ -1592,7 +1678,7 @@ export default {
 			if (!isPieType) {
 				if (this.resolvedCategories.length > 0) {
 					defaults.xaxis = {
-						categories: this.resolvedCategories,
+						categories: this.displayCategories,
 						labels: {
 							style: {
 								colors: 'var(--color-text-maxcontrast, #767676)',
@@ -1634,6 +1720,12 @@ export default {
 				}
 			}
 
+			// Reference lines, such as a norm, on the value axis.
+			if (!isPieType && this.referenceAnnotations.length > 0) {
+				const axisKey = (this.type === 'bar' && this.horizontal) ? 'xaxis' : 'yaxis'
+				defaults.annotations = { [axisKey]: this.referenceAnnotations }
+			}
+
 			// Add labels for pie/donut
 			if (isPieType && this.resolvedLabels.length > 0) {
 				defaults.labels = this.resolvedLabels

package/src/components/CnDashboardPage/CnDashboardPage.vue

@@ -347,12 +347,12 @@
 				<label
 					v-else
 					class="cn-dashboard-page__page-filter">
-					<span v-if="pf.label" class="cn-dashboard-page__page-filter-label">{{ pf.label }}</span>
+					<span v-if="pf.label" class="cn-dashboard-page__page-filter-label">{{ effectiveTranslate(pf.label) }}</span>
 					<NcSelect
 						:modelValue="selectedPageFilterOption(pf)"
-						:options="pf.options || []"
+						:options="pageFilterSegments(pf)"
 						:clearable="false"
-						:inputLabel="pf.label || pf.key"
+						:inputLabel="pf.label ? effectiveTranslate(pf.label) : pf.key"
 						label="label"
 						:data-testid="'cn-page-filter-' + pf.key"
 						@update:modelValue="onPageFilterChange(pf, $event)" />
@@ -1106,6 +1106,9 @@ const CHART_PROP_KEYS = [
 	'highlight',
 	'cellSource',
 	'emptyCellLabel',
+	// A norm line and month categories on a line chart (DqDoorlooptijd).
+	'referenceLines',
+	'categoryFormat',
 ]
 
 /**
@@ -2886,12 +2889,12 @@ export default {
 				return null
 			}
 			const current = this.workspaceContext[pf.key]
-			return (pf.options || []).find((o) => o.value === current) || null
+			return this.pageFilterSegments(pf).find((o) => o.value === current) || null
 		},
 
 		/**
-		 * A page filter's options as segments, labels through the host
-		 * translate.
+		 * A page filter's options, labels through the host translate: the
+		 * segments of a segmented filter and the options of a select.
 		 *
 		 * @spec openspec/changes/dashboard-board-termijnen/specs/dashboard-page/spec.md#requirement-a-page-filter-as-a-segmented-group-on-the-description-line
 		 * @param {object} pf The page-filter descriptor.

package/src/components/CnDetailPage/CnDetailPage.md

@@ -421,12 +421,13 @@ Four levels of action and the case surfaces around them. All opt in. See [the re
 | `stageField` | String | `'status'` | Dot-path to the record's stage. |
 | `quickActions` | Array | `[]` | At most three always visible header buttons. |
 | `actionsMenu` | Object \| null | `null` | `{ showRefresh?, showHelpLinks?, label? }` for the overflow menu. |
-| `nextStep` | Object \| null | `null` | The "what now" card per stage, rendered by `CnNextStepCard`. |
+| `nextStep` | Object \| null | `null` | The "what now" card per stage, rendered by `CnNextStepCard`. `stagesFrom` (a field path such as `@context.caseType.nextStep`) reads the stages from the record when it holds them. |
 | `typePill` | Object \| null | `null` | `{ field, colorMap?, labels?, variant? }`, a pill above the title. Instead of `field`: `text` (a constant) or `countFrom` + `countLabel` (a count of a related list). |
 | `statusPill` | Object \| null | `null` | A second pill, same shape. |
 | `headerFields` | Array | `[]` | Fields shown as chips under the title (manifest `config.headerFields`). Each entry is a property key, or `{ key, format, labelField, colorField, warnWhenPast }`; `format` is `text` (default), `mono`, `badge`, `user` or `date`. A `$ref` value shows `labelField` of the referenced object and falls back to the raw id in mono; a badge maps `colorField` (`success`, `warning`, `error`, `info`, `neutral`) to a variant; `warnWhenPast` gives a past date the error variant. An empty value shows no chip, a page without the key shows no row. Each chip reads "Title: value" to a screen reader, and the row prints as plain text. |
-| `sideColumn` | Array | `[]` | Widget definitions or widget ids, rendered as a column of cards beside the body. |
+| `sideColumn` | Array | `[]` | Widget definitions or widget ids, rendered as a column of cards beside the body. An entry with `tabs` shows only while one of those body tabs is open. |
 | `sideColumnFrom` | String | `''` | A field path, read like a `visibleWhen` field (e.g. `@context.caseType.sideCards`), whose list of ids picks the `sideColumn` entries this record shows and their order. Any other value keeps `sideColumn` as declared. |
+| `tabsFrom` | String | `''` | A field path, read like a `visibleWhen` field, whose list of tab ids picks the tabs of the page's `tabs` widgets and their order for this record: `@context.caseType.tabs` reads the list a case type keeps (DqAanbesteding: Inschrijvingen, Publicaties, Bestanden, Historie). A tab's id is its `id`, else its `widgetId`, or the string entry. An empty or missing list keeps the declared tabs; edit mode shows them all. |
 | `isAdmin` | Boolean \| null | `null` | Shows `adminOnly` header actions. `null` reads it from Nextcloud. |
 
 ## The record as a place

package/src/components/CnDetailPage/CnDetailPage.vue

@@ -1540,6 +1540,12 @@ export default {
 				},
 			},
 
+			// The open body tab, reported by a `tabs` widget, so a side entry
+			// with `tabs` shows only beside those tabs.
+			cnDetailReportTab: (id) => {
+				this.activeBodyTab = typeof id === 'string' ? id : ''
+			},
+
 			// The records `visibilityContext` names, keyed `@context.<name>`, so a tab's
 			// `visibleWhen` reads the case type as a grid widget's does. Null
 			// while they are on their way.
@@ -2462,8 +2468,12 @@ export default {
 
 		/**
 		 * The "what now" card (manifest `config.nextStep`):
-		 * `{ field?, stages: { <stage>: { title?, checklist, after? } } }`.
+		 * `{ field?, stagesFrom?, stages: { <stage>: { title?, checklist, after? } } }`.
 		 * Each checklist item is `{ label, doneField?, doneWhen?, hint? }`.
+		 * `stagesFrom` is a field path read like a `visibleWhen` field
+		 * (`@context.caseType.nextStep`): when it holds a stages map (or an
+		 * object with `stages`), that map replaces `stages` for this record, so
+		 * a case type keeps its own stage texts. Otherwise `stages` stays.
 		 * Rendered above the body for a stage that declares a checklist, with
 		 * the primary button inside it. See `CnNextStepCard`.
 		 *
@@ -2567,13 +2577,31 @@ export default {
 			default: null,
 		},
 
+		/**
+		 * A field path whose value picks the tabs of the page's `tabs` widgets
+		 * and their order for this record (manifest `config.tabsFrom`), read
+		 * like a `visibleWhen` field: `@context.caseType.tabs` reads the list a
+		 * case type keeps. A non-empty list of tab ids (a tab's `id`, else its
+		 * `widgetId`, or the string entry itself) keeps those tabs in that
+		 * order and leaves the rest out. Any other value keeps the declared
+		 * tabs. Edit mode shows them all.
+		 *
+		 * @spec openspec/changes/detail-tabs-from/specs/detail-page/spec.md#requirement-a-record-can-pick-its-tabs-and-their-order
+		 */
+		tabsFrom: {
+			type: String,
+			default: '',
+		},
+
 		/**
 		 * A column of cards beside the body (manifest `config.sideColumn`),
 		 * for the record's facts: deadline, requester, handler, links. Each
 		 * entry is a widget definition (`{ id?, type, title?, content? }`) or
 		 * the id of a widget declared in `widgets`. The column stacks under
 		 * the body on a narrow page. Empty (the default) leaves the layout as
-		 * it is.
+		 * it is. An entry with `tabs` (tab ids of the body's `tabs` widget)
+		 * shows only while one of those tabs is open (DqZaaktypeVelden: the
+		 * option list beside Velden).
 		 *
 		 * @type {Array<string|object>}
 		 */
@@ -2886,6 +2914,8 @@ export default {
 
 	data() {
 		return {
+			/** The id of the open body tab a `tabs` widget reported, '' before one did. */
+			activeBodyTab: '',
 			/**
 			 * The records `visibilityContext` names, keyed `@context.<name>`: the row,
 			 * `null` when it could not be read, absent while it is on its way.
@@ -3386,6 +3416,25 @@ export default {
 			return !this.objectNotFound && !this.showLoadingState && !this.error && !this.empty
 		},
 
+		/**
+		 * `nextStep` with its stages read from the record when `stagesFrom`
+		 * names a stages map there (a case type's own texts), else as declared.
+		 *
+		 * @spec openspec/changes/detail-next-step-from-record/specs/detail-page/spec.md#requirement-the-next-step-stages-can-come-from-the-record
+		 * @return {object|null}
+		 */
+		effectiveNextStep() {
+			const config = this.nextStep
+			if (!config || typeof config !== 'object' || typeof config.stagesFrom !== 'string' || config.stagesFrom === '' || !this.widgetVisibilityData) {
+				return config
+			}
+			const found = readVisibleWhenPath(this.widgetVisibilityData, config.stagesFrom)
+			const stages = found && typeof found === 'object' && !Array.isArray(found)
+				? (found.stages && typeof found.stages === 'object' && !Array.isArray(found.stages) ? found.stages : found)
+				: null
+			return stages && Object.keys(stages).length > 0 ? { ...config, stages } : config
+		},
+
 		/**
 		 * The "what now" card for the record's stage, labels translated.
 		 *
@@ -3393,7 +3442,7 @@ export default {
 		 * @spec openspec/changes/detail-action-model-and-case-surfaces/specs/detail-action-model/spec.md#requirement-next-step-card
 		 */
 		nextStepCard() {
-			const card = resolveNextStep(this.nextStep, this.currentObject, this.stageField)
+			const card = resolveNextStep(this.effectiveNextStep, this.currentObject, this.stageField)
 			if (!card) {
 				return null
 			}
@@ -3508,7 +3557,7 @@ export default {
 		 * @spec openspec/changes/detail-side-visible-when/specs/detail-page/spec.md#requirement-a-side-column-widget-shows-only-while-its-visiblewhen-holds
 		 */
 		sideColumnWidgets() {
-			const resolved = this.pickedSideWidgets.filter((widget) => this.sideWidgetVisible(widget))
+			const resolved = this.pickedSideWidgets.filter((widget) => this.sideWidgetOnTab(widget) && this.sideWidgetVisible(widget))
 			if (!this.isBoard) {
 				return resolved
 			}
@@ -4551,7 +4600,7 @@ export default {
 		 */
 		bodyGridWidgets() {
 			if (this.hasGridLayout) {
-				return this.widgets
+				return this.pickTabs(this.widgets)
 			}
 			if (this.shouldRenderAutoBody) {
 				return this.autoBodyWidgets || []
@@ -4559,6 +4608,21 @@ export default {
 			return []
 		},
 
+		/**
+		 * The tab ids `tabsFrom` reads off this record, or null when it reads
+		 * no non-empty list (or the body is being edited).
+		 *
+		 * @spec openspec/changes/detail-tabs-from/specs/detail-page/spec.md#requirement-a-record-can-pick-its-tabs-and-their-order
+		 * @return {Array<string>|null}
+		 */
+		pickedTabIds() {
+			if (!this.tabsFrom || this.editingBody || !this.widgetVisibilityData) {
+				return null
+			}
+			const ids = readVisibleWhenPath(this.widgetVisibilityData, this.tabsFrom)
+			return Array.isArray(ids) && ids.length > 0 ? ids.map((id) => String(id)) : null
+		},
+
 		/**
 		 * Whether the body renders as an adjustable widget grid (vs. the
 		 * hand-authored default slot). True for explicit grid pages and for the
@@ -4977,6 +5041,33 @@ export default {
 	},
 
 	methods: {
+		/**
+		 * The widget definitions with each `tabs` widget's tabs narrowed and
+		 * ordered by `pickedTabIds`; the definitions as given without a pick.
+		 * A new definition is returned for a changed widget; the declared one
+		 * is never mutated.
+		 *
+		 * @spec openspec/changes/detail-tabs-from/specs/detail-page/spec.md#requirement-a-record-can-pick-its-tabs-and-their-order
+		 * @param {Array<object>} widgets The widget definitions.
+		 * @return {Array<object>}
+		 */
+		pickTabs(widgets) {
+			const ids = this.pickedTabIds
+			if (!ids || !Array.isArray(widgets)) {
+				return widgets
+			}
+			const idOf = (tab) => String(typeof tab === 'string' ? tab : (tab && (tab.id ?? tab.widgetId)) ?? '')
+			return widgets.map((widget) => {
+				if (!widget || widget.type !== 'tabs' || !Array.isArray(widget.content?.tabs)) {
+					return widget
+				}
+				const tabs = ids
+					.map((id) => widget.content.tabs.find((tab) => idOf(tab) === id))
+					.filter(Boolean)
+				return tabs.length > 0 ? { ...widget, content: { ...widget.content, tabs } } : widget
+			})
+		},
+
 		/**
 		 * The tag after an admin-only entry in the board look ("beheerder",
 		 * DqZaakMeer), or null for any other entry or look. It is drawn by
@@ -6158,6 +6249,22 @@ export default {
 			return compactLayoutRows(drawable)
 		},
 
+		/**
+		 * Whether a side entry belongs beside the open body tab: an entry with
+		 * `tabs` (tab ids) shows only while one of them is open; an entry
+		 * without shows beside every tab. Edit mode shows them all.
+		 *
+		 * @spec openspec/changes/detail-side-cards-per-tab/specs/detail-page/spec.md#requirement-a-side-card-can-follow-the-open-tab
+		 * @param {object} widget The side entry's definition.
+		 * @return {boolean}
+		 */
+		sideWidgetOnTab(widget) {
+			if (this.editingBody || !Array.isArray(widget.tabs) || widget.tabs.length === 0) {
+				return true
+			}
+			return widget.tabs.map((id) => String(id)).includes(this.activeBodyTab)
+		},
+
 		/**
 		 * Whether a side column widget shows: always in edit mode or without a
 		 * `visibleWhen`, else while it holds for the record and the records

package/src/components/CnDetailWidgetHost/CnDetailWidgetHeaderItems.vue

@@ -0,0 +1,60 @@
+<!--
+  SPDX-FileCopyrightText: 2026 Conduction B.V.
+  SPDX-License-Identifier: EUPL-1.2
+-->
+<template>
+	<span class="cn-detail-widget-header-items">
+		<CnStatusBadge
+			v-if="header.pill"
+			:label="header.pill.label"
+			:variant="header.pill.variant"
+			data-testid="cn-detail-widget-header-pill" />
+		<span
+			v-if="header.note"
+			class="cn-detail-page__catalog-note"
+			data-testid="cn-detail-widget-header-note">{{ header.note }}</span>
+		<button
+			v-for="(action, index) in header.actions"
+			:key="`${index}-${action.label}`"
+			type="button"
+			class="cn-detail-page__catalog-action"
+			data-testid="cn-detail-widget-header-action"
+			@click="action.run()">
+			<CnIcon v-if="action.icon" :name="action.icon" :size="16" />
+			{{ action.label }}
+		</button>
+	</span>
+</template>
+
+<script>
+import CnIcon from '../CnIcon/CnIcon.vue'
+import CnStatusBadge from '../CnStatusBadge/CnStatusBadge.vue'
+
+/**
+ * The extras a widget reports for its card's title row through its `header`
+ * event: a status pill, a note and its actions. Drawn by CnDetailWidgetHost in
+ * the `#actions` slot of the card it wraps a widget in.
+ */
+export default {
+	name: 'CnDetailWidgetHeaderItems',
+
+	components: { CnIcon, CnStatusBadge },
+
+	props: {
+		/** The reported header: `{ pill, note, actions: [{ label, icon?, run }] }`. */
+		header: {
+			type: Object,
+			required: true,
+		},
+	},
+}
+</script>
+
+<style scoped>
+.cn-detail-widget-header-items {
+	display: inline-flex;
+	flex-wrap: wrap;
+	align-items: center;
+	gap: 12px;
+}
+</style>