@conduction/nextcloud-vue 2.105.0 → 2.106.0

package/l10n/en.json

@@ -1727,7 +1727,23 @@
     "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"
+    "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": [
@@ -1845,6 +1861,10 @@
     "downloaded %n time": [
       "downloaded %n time",
       "downloaded %n times"
+    ],
+    "{count} open": [
+      "{count} open",
+      "{count} open"
     ]
   }
 }

package/l10n/nl.json

@@ -1940,7 +1940,23 @@
     "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"
+    "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": [
@@ -2058,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.105.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/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/CnDetailPage/CnDetailPage.md

@@ -421,11 +421,11 @@ 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. |

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`.
 		 *
@@ -2589,7 +2599,9 @@ export default {
 		 * 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>}
 		 */
@@ -2902,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.
@@ -3402,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.
 		 *
@@ -3409,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
 			}
@@ -3524,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
 			}
@@ -6216,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>

package/src/components/CnDetailWidgetHost/CnDetailWidgetHost.vue

@@ -184,27 +184,10 @@
 				<CnIcon :name="widget.icon" :size="20" />
 			</template>
 			<!-- A renderer that reports its own header (`header` event:
-			     `{ link, note, action, pill }`, e.g. record-list's "3 in totaal",
-			     a facts card's status pill). -->
-			<template v-if="rendererHeader.note || rendererHeader.action || rendererHeader.pill" #actions>
-				<CnStatusBadge
-					v-if="rendererHeader.pill"
-					:label="rendererHeader.pill.label"
-					:variant="rendererHeader.pill.variant"
-					data-testid="cn-detail-widget-header-pill" />
-				<span
-					v-if="rendererHeader.note"
-					class="cn-detail-page__catalog-note"
-					data-testid="cn-detail-widget-header-note">{{ rendererHeader.note }}</span>
-				<button
-					v-if="rendererHeader.action"
-					type="button"
-					class="cn-detail-page__catalog-action"
-					data-testid="cn-detail-widget-header-action"
-					@click="rendererHeader.action.run()">
-					<CnIcon v-if="rendererHeader.action.icon" :name="rendererHeader.action.icon" :size="16" />
-					{{ rendererHeader.action.label }}
-				</button>
+			     `{ link, note, action, actions, pill }`, e.g. record-list's "3 in
+			     totaal", a facts card's status pill). -->
+			<template v-if="hasRendererHeaderItems" #actions>
+				<CnDetailWidgetHeaderItems :header="rendererHeader" />
 			</template>
 			<template v-if="catalogAddEnabled" #action-items>
 				<NcActionButton @click="invokeCatalogAdd">
@@ -264,10 +247,16 @@
 			<template v-if="widget.icon" #title-icon>
 				<CnIcon :name="widget.icon" :size="20" />
 			</template>
+			<!-- The app widget reports its title row the way the built-in
+			     cards do (`header` event). -->
+			<template v-if="hasRendererHeaderItems" #actions>
+				<CnDetailWidgetHeaderItems :header="rendererHeader" />
+			</template>
 			<component
 				:is="renderer"
 				ref="renderer"
 				v-bind="rendererProps"
+				@header="onRendererHeader"
 				@selectObject="onSelectObject" />
 		</CnWidgetWrapper>
 
@@ -304,7 +293,7 @@ import CnObjectDataWidget from '../CnObjectDataWidget/CnObjectDataWidget.vue'
 import CnObjectFilesWidget from '../CnObjectFilesWidget/CnObjectFilesWidget.vue'
 import CnObjectGeoWidget from '../CnObjectGeoWidget/CnObjectGeoWidget.vue'
 import CnRelatedObjectsWidget from '../CnRelatedObjectsWidget/CnRelatedObjectsWidget.vue'
-import CnStatusBadge from '../CnStatusBadge/CnStatusBadge.vue'
+import CnDetailWidgetHeaderItems from './CnDetailWidgetHeaderItems.vue'
 import { useIntegrationRegistry } from '../../composables/useIntegrationRegistry.js'
 import { normalizeLook } from '../../composables/useLook.js'
 import { isAppInstalled } from '../../utils/appInstalled.js'
@@ -378,12 +367,12 @@ export default {
 	name: 'CnDetailWidgetHost',
 
 	components: {
+		CnDetailWidgetHeaderItems,
 		CnIcon,
 		CnLeafMountHost,
 		CnObjectDataWidget,
 		CnObjectGeoWidget,
 		CnRelatedObjectsWidget,
-		CnStatusBadge,
 		CnWidgetWrapper,
 		NcActionButton,
 		CnEmptyContent,
@@ -639,7 +628,7 @@ export default {
 			 * `header` event (screens-relation-pages): a link and a note,
 			 * with the list's total already filled in.
 			 */
-			rendererHeader: { link: null, note: '', action: null, pill: null },
+			rendererHeader: { link: null, note: '', actions: [], pill: null },
 		}
 	},
 
@@ -672,6 +661,12 @@ export default {
 			return this.isBare ? undefined : widgetTitleOf(this.widget)
 		},
 
+		/** @return {boolean} Whether the reported header has anything for the title row. */
+		hasRendererHeaderItems() {
+			const h = this.rendererHeader
+			return !!(h.note || h.pill || (h.actions && h.actions.length > 0))
+		},
+
 		/**
 		 * The card header's link: the one the renderer reports, else, with
 		 * `showHeaderLink`, the one the manifest declares for the widget.
@@ -1072,11 +1067,20 @@ export default {
 		 * override a value the widget computes there; the whole content still
 		 * arrives as `content`.
 		 *
+		 * `content.chartKind` is read as the chart's `type`, as the dashboard
+		 * dispatcher reads it, so a chart placed on a detail page draws.
+		 *
 		 * @return {object} The declared content keys.
 		 * @spec openspec/changes/declared-props-detail-index-sidebar/specs/widget-hosts/spec.md#requirement-a-widget-host-passes-only-the-keys-a-widget-declares
+		 * @spec openspec/changes/detail-chart-kind/specs/widget-hosts/spec.md#requirement-a-detail-chart-reads-chartkind-as-its-type
 		 */
 		declaredContent() {
-			return pickDeclaredProps(this.renderer, this.content, this.widget?.type || '')
+			let bindings = this.content
+			if (bindings && typeof bindings === 'object' && bindings.chartKind !== undefined && bindings.type === undefined) {
+				const { chartKind, ...rest } = bindings
+				bindings = { ...rest, type: chartKind }
+			}
+			return pickDeclaredProps(this.renderer, bindings, this.widget?.type || '')
 		},
 
 		/**
@@ -1217,17 +1221,20 @@ export default {
 
 	methods: {
 		/**
-		 * Take the header a content-only renderer reports.
+		 * Take the header a content-only renderer, or an app widget in the
+		 * titled card, reports.
 		 *
-		 * @param {{link?: object|null, note?: string, action?: {label: string, icon?: string, run: () => unknown}|null}} header The header parts.
+		 * @param {{link?: object|null, note?: string, action?: {label: string, icon?: string, run: () => unknown}|null, actions?: Array<{label: string, icon?: string, run: () => unknown}>}} header The header parts.
 		 * @spec openspec/changes/screens-relation-pages/specs/relation-pages/spec.md#requirement-a-record-list-shows-the-objects-that-point-at-this-record
 		 */
 		onRendererHeader(header) {
 			const link = header && header.link && typeof header.link === 'object' ? header.link : null
 			const note = header && typeof header.note === 'string' ? header.note : ''
-			const action = header && header.action && typeof header.action.run === 'function' && header.action.label ? header.action : null
+			const usable = (action) => action && typeof action.run === 'function' && action.label
+			// `action` (one) and `actions` (several) both count, `action` first.
+			const actions = [header && header.action, ...((header && Array.isArray(header.actions)) ? header.actions : [])].filter(usable)
 			const pill = header && header.pill && typeof header.pill.label === 'string' && header.pill.label !== '' ? header.pill : null
-			this.rendererHeader = { link, note, action, pill }
+			this.rendererHeader = { link, note, actions, pill }
 		},
 
 		/**

package/src/components/CnFactsWidget/CnFactsWidget.vue

@@ -1206,11 +1206,15 @@ export default {
 	min-width: 0;
 }
 
+/* `padding: 0`: Nextcloud's core stylesheet pads every `dl` 12px at the top
+   and bottom, which put a side card's facts 24px under its title, against
+   the board's 12 (DqZaak "Behandeling", DqZaakDocumenten). */
 .cn-facts-widget__rows {
 	display: grid;
 	grid-template-columns: max-content 1fr;
 	gap: 8px 16px;
 	margin: 0;
+	padding: 0;
 	font-size: 14px;
 }
 

package/src/components/CnFilesBrowser/CnFilesBrowser.vue

@@ -5,7 +5,7 @@
 <template>
 	<div
 		class="cn-files-browser"
-		:class="{ 'cn-files-browser--dragging': dragging }"
+		:class="{ 'cn-files-browser--dragging': dragging, 'cn-files-browser--drop-panel': dropOverlay && dropDetail !== '' }"
 		data-testid="cn-files-browser"
 		@dragenter.prevent="onDragEnter"
 		@dragover.prevent="onDragOver"
@@ -22,7 +22,10 @@
 			aria-hidden="true"
 			data-testid="cn-files-browser-drop-overlay">
 			<span class="cn-files-browser__drop-icon"><Upload :size="28" /></span>
-			<strong class="cn-files-browser__drop-label">{{ dropLabel }}</strong>
+			<strong class="cn-files-browser__drop-label">{{ cnTranslate(dropLabel) }}</strong>
+			<span v-if="dropDetailText"
+				class="cn-files-browser__drop-detail"
+				data-testid="cn-files-browser-drop-detail">{{ dropDetailText }}</span>
 		</div>
 		<p v-if="dropOverlay"
 			class="hidden-visually"
@@ -1026,12 +1029,26 @@ export default {
 			default: false,
 		},
 
-		/** The line `dropOverlay` draws and announces. */
+		/** The line `dropOverlay` draws and announces, through the host translate. */
 		dropLabel: {
 			type: String,
 			default: () => t('nextcloud-vue', 'Drop to add'),
 		},
 
+		/**
+		 * A second line under `dropLabel` in the drop state, through the host
+		 * translate: where the files go ("{count} bestanden komen bij zaak
+		 * 2026-0082, als nog te beoordelen document."). `{count}` is the number
+		 * of files dragged when the browser can tell, and the line is left out
+		 * when it cannot. The overlay then also fills the panel.
+		 *
+		 * @spec openspec/changes/files-drop-panel/specs/files-browser/spec.md#requirement-the-drop-state-fills-the-panel-and-says-where-the-files-go
+		 */
+		dropDetail: {
+			type: String,
+			default: '',
+		},
+
 		/** Show a line under the list saying files can be dropped on it. */
 		dropHint: {
 			type: Boolean,
@@ -1259,6 +1276,8 @@ export default {
 			 */
 			visibleColumnKeys: null,
 			dragging: false,
+			/** The number of files the current drag carries, null when unknown. */
+			dragCount: null,
 			/** Nested dragenter/dragleave pairs, so a child does not end the drag. */
 			dragDepth: 0,
 			/** What the live region says: the drop label, then what was added. */
@@ -1294,6 +1313,24 @@ export default {
 	},
 
 	computed: {
+		/**
+		 * `dropDetail` through the host translate with `{count}` filled, '' when
+		 * there is none or the count it needs is unknown.
+		 *
+		 * @spec openspec/changes/files-drop-panel/specs/files-browser/spec.md#requirement-the-drop-state-fills-the-panel-and-says-where-the-files-go
+		 * @return {string}
+		 */
+		dropDetailText() {
+			if (!this.dropDetail) {
+				return ''
+			}
+			const text = this.cnTranslate(this.dropDetail)
+			if (!text.includes('{count}')) {
+				return text
+			}
+			return this.dragCount === null ? '' : text.replace(/\{count\}/g, String(this.dragCount))
+		},
+
 		/**
 		 * Whether this person may add to and change the open folder. Over
 		 * WebDAV the server answers each write on its own, so this is true;
@@ -2247,7 +2284,8 @@ export default {
 			this.dragDepth++
 			if (!this.dragging) {
 				this.dragging = true
-				this.dropStatus = this.dropOverlay ? this.dropLabel : ''
+				this.dragCount = this.draggedFileCount(event)
+				this.dropStatus = this.dropOverlay ? [this.cnTranslate(this.dropLabel), this.dropDetailText].filter(Boolean).join(' ') : ''
 			}
 		},
 
@@ -2277,6 +2315,22 @@ export default {
 			}
 		},
 
+		/**
+		 * How many files a drag carries, or null when the browser does not
+		 * say (it lists the items only once they are dropped in some browsers).
+		 *
+		 * @param {DragEvent} event The drag.
+		 * @return {number|null}
+		 */
+		draggedFileCount(event) {
+			const items = event?.dataTransfer?.items
+			if (!items || typeof items.length !== 'number') {
+				return null
+			}
+			const count = Array.from(items).filter((item) => item && item.kind === 'file').length
+			return count > 0 ? count : null
+		},
+
 		/**
 		 * Whether a drag carries files (not text or a link from the page).
 		 * A drag whose types cannot be read counts as files, as before.
@@ -2888,6 +2942,18 @@ export default {
 	outline-offset: 4px;
 }
 
+/* With a `dropDetail` the drop state fills the panel it sits in, as the
+   board draws it (DqZaakDocumentenSlepen), not only the list's own height. */
+.cn-files-browser--dragging.cn-files-browser--drop-panel {
+	min-height: max(320px, 100%);
+}
+
+.cn-files-browser__drop-detail {
+	max-width: 520px;
+	font-size: 14px;
+	color: var(--color-main-text);
+}
+
 .cn-files-browser__drop-overlay {
 	position: absolute;
 	inset: 0;