@conduction/nextcloud-vue 2.142.0 → 2.143.0

package/l10n/nl.json

@@ -1910,7 +1910,7 @@
     "Now": "Nu",
     "Tell me above a number": "Melden vanaf een aantal",
     "Threshold": "Grens",
-    "A message to you when there are {threshold} or more": "Bericht aan u als er {threshold} of meer zijn",
+    "A message to you when there are {threshold} or more": "Bericht aan u als er {threshold} of meer open zijn",
     "Save this search or open a saved one to set an alert on it.": "Sla deze zoekopdracht op of open een opgeslagen zoekopdracht om er een melding op te zetten.",
     "The alert could not be saved.": "De melding kon niet worden opgeslagen.",
     "Your exports could not be loaded.": "Uw exports konden niet worden geladen.",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@conduction/nextcloud-vue",
-  "version": "2.142.0",
+  "version": "2.143.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

@@ -2,7 +2,7 @@
 	<div
 		class="cn-admin-settings-shell"
 		:class="[ownLookClass, sectionColumns ? `cn-admin-settings-shell--columns-${sectionColumns}` : '']"
-		:style="versionTitleSize ? { '--cn-board-version-title-size': `${versionTitleSize}px` } : null">
+		:style="shellStyle">
 		<!-- Names a development, test or acceptance environment; cannot be dismissed. Production shows nothing. -->
 		<CnEnvironmentBanner v-if="environmentName" :environment="environmentName" />
 
@@ -780,6 +780,16 @@ export default {
 			type: Number,
 			default: 0,
 		},
+
+		/**
+		 * The board look's gap in px between a card's title and its
+		 * description, when the app's board draws it other than 4px; the
+		 * content follows 10px further (DqBeheerinstellingen 6, so 16).
+		 */
+		descGap: {
+			type: Number,
+			default: 0,
+		},
 	},
 
 	emits: ['update', 'reimported', 'reimport-error', 'tab-change'],
@@ -818,6 +828,23 @@ export default {
 	},
 
 	computed: {
+		/**
+		 * The board look sizes an app's board sets on the shell
+		 * (`versionTitleSize`, `descGap`), as CSS custom properties.
+		 *
+		 * @return {object|null} The style, or null when none is set.
+		 */
+		shellStyle() {
+			const style = {}
+			if (this.versionTitleSize) {
+				style['--cn-board-version-title-size'] = `${this.versionTitleSize}px`
+			}
+			if (this.descGap) {
+				style['--cn-board-settings-desc-gap'] = `${this.descGap}px`
+			}
+			return Object.keys(style).length > 0 ? style : null
+		},
+
 		/**
 		 * The tabs that have an id and a label.
 		 *

package/src/components/CnAiCompanion/CnAiChatPanel.vue

@@ -310,6 +310,7 @@
 						:disabled="streamState.isStreaming"
 						:placeholder="inputPlaceholder"
 						:sendLabel="sendLabel"
+						:stacked="titled"
 						:chatAppId="chatAppId"
 						:speechInputEngine="speechPolicy.inputEngine"
 						:dictationSilenceTimeout="speechPolicy.silenceTimeout"
@@ -1599,10 +1600,21 @@ export default {
 }
 
 .cn-ai-chat-window--titled .cn-ai-chat-window__input {
+	padding: 0;
+	border-top: 0;
 	border-radius: 0;
 	background: transparent;
 }
 
+/* In a card the panel's body takes the card's 16px 18px inset. */
+.cn-ai-chat-window--titled .cn-ai-chat-window__messages {
+	padding: 16px 18px;
+}
+
+.cn-ai-chat-window--titled .cn-ai-chat-window__note {
+	margin: 0 18px 16px;
+}
+
 .cn-ai-chat-window__input {
 	flex: 0 0 auto;
 	padding: 8px;

package/src/components/CnAiCompanion/CnAiInput.vue

@@ -23,7 +23,7 @@
     for the parent's async request to resolve before clearing either).
 -->
 <template>
-	<div class="cn-ai-input" data-testid="cn-ai-input">
+	<div class="cn-ai-input" :class="{ 'cn-ai-input--stacked': stacked }" data-testid="cn-ai-input">
 		<NcNoteCard
 			v-if="uploadError"
 			type="error"
@@ -298,6 +298,15 @@ export default {
 			default: '',
 		},
 
+		/**
+		 * The narrow layout of a card: the text box and the send button on the
+		 * first line, dictation and attach on a line under it.
+		 */
+		stacked: {
+			type: Boolean,
+			default: false,
+		},
+
 		/**
 		 * Backend app id the attach control uploads files to
 		 * (`POST /index.php/apps/{chatAppId}/api/chat/attachments`). See
@@ -1184,6 +1193,28 @@ export default {
 	align-items: flex-end;
 }
 
+/* `stacked`: in a card the box keeps the line, dictation and attach wrap
+   under it (DqZaakAssistent "Vraag iets over deze zaak" + "Vragen"). */
+.cn-ai-input--stacked {
+	padding: 12px 18px;
+}
+
+.cn-ai-input--stacked .cn-ai-input__row {
+	flex-wrap: wrap;
+	align-items: center;
+}
+
+.cn-ai-input--stacked .cn-ai-input__textarea {
+	order: -2;
+	flex: 1 1 calc(100% - 104px);
+	min-width: 0;
+	min-height: 40px;
+}
+
+.cn-ai-input--stacked .cn-ai-input__send-button {
+	order: -1;
+}
+
 .cn-ai-input__file-input {
 	display: none;
 }

package/src/components/CnAuditTrailCard/CnAuditTrailCard.vue

@@ -30,13 +30,15 @@
 			<li
 				v-for="entry in displayedEntries"
 				:key="entry.id"
-				class="cn-audit-card__row">
+				class="cn-audit-card__row"
+				:class="{ 'cn-audit-card__row--stacked': layout === 'stacked' }">
 				<div class="cn-audit-card__row-head">
 					<strong class="cn-audit-card__action">{{ formatAction(entry) }}</strong>
-					<span class="cn-audit-card__when">{{ formatWhen(entry) }}</span>
+					<span v-if="layout !== 'stacked'" class="cn-audit-card__when">{{ formatWhen(entry) }}</span>
 				</div>
 				<div class="cn-audit-card__row-body">
-					<span class="cn-audit-card__actor">{{ formatActor(entry) }}</span>
+					<span v-if="layout === 'stacked'" class="cn-audit-card__when" data-testid="cn-audit-card-when-below">{{ stackedLine(entry) }}</span>
+					<span v-else class="cn-audit-card__actor">{{ formatActor(entry) }}</span>
 					<span
 						v-if="entry.authorized === false"
 						class="cn-audit-card__refused"
@@ -64,8 +66,10 @@ import { NcLoadingIcon } from '@nextcloud/vue'
 import { markRaw } from 'vue'
 import History from 'vue-material-design-icons/History.vue'
 import CnDetailCard from '../CnDetailCard/CnDetailCard.vue'
+import { formatBoardDate, formatTimeOfDay } from '../../utils/boardDate.js'
 import { buildHeaders, prefixUrl } from '../../utils/index.js'
 import { leafSourceUrl } from '../../utils/leafSourceUrl.js'
+import { userDisplayName } from '../../utils/userDisplayName.js'
 import { userLocale } from '../../utils/userLocale.js'
 
 /**
@@ -154,6 +158,12 @@ export default {
 
 		/** Maximum rows to render. */
 		maxDisplay: { type: Number, default: 5 },
+		/**
+		 * `stacked` (DqTaak "Historie"): the action, then one muted line under
+		 * it with the moment ("6 okt 09:05") and who, when the action does not
+		 * already name them. Default: the moment beside the action, who under it.
+		 */
+		layout: { type: String, default: '' },
 		/**
 		 * Actions the card leaves out (case-insensitive), such as `['read']`
 		 * for a history of what changed. It then reads more entries than it
@@ -440,7 +450,27 @@ export default {
 		 * @return {string} Who did it, by name where the entry carries one.
 		 */
 		actorName(entry) {
-			return entry.actorDisplayName || entry.actor || entry.userId || entry.user || ''
+			if (entry.actorDisplayName) {
+				return entry.actorDisplayName
+			}
+			const id = entry.actor || entry.userId || entry.user || ''
+			// A person's user id reads as their display name once it is known.
+			return (id && (!entry.performerType || entry.performerType === 'user') && userDisplayName(String(id))) || id
+		},
+
+		/**
+		 * The muted line of a stacked row: the moment in the board's short
+		 * form ("6 okt 09:05") and who, unless the action names them already.
+		 *
+		 * @param {object} entry The entry.
+		 * @return {string} The line.
+		 * @spec openspec/changes/audit-card-stacked-rows/specs/audit-trail/spec.md#requirement-an-audit-row-can-put-its-moment-under-the-action
+		 */
+		stackedLine(entry) {
+			const raw = entry.creationDateTime || entry.created || entry.timestamp
+			const date = raw ? new Date(raw) : null
+			const when = date && !Number.isNaN(date.getTime()) ? `${formatBoardDate(date)} ${formatTimeOfDay(date)}` : ''
+			return [when, this.formatActor(entry)].filter((part) => part !== '').join(' · ')
 		},
 
 		/**

package/src/components/CnAuditTrailWidget/CnAuditTrailWidget.vue

@@ -16,6 +16,7 @@
 			:scope="resolvedScope"
 			:title="resolvedTitle"
 			:maxDisplay="resolvedMaxDisplay"
+			:layout="content && typeof content.layout === 'string' ? content.layout : ''"
 			:excludeActions="resolvedExcludeActions"
 			:actionLabels="actionLabels"
 			:valueLabels="valueLabels"

package/src/components/CnChecklistRunWidget/CnChecklistRunWidget.vue

@@ -1195,18 +1195,25 @@ export default {
 }
 
 .cn-checklist-run__legend {
+	font-size: 15px;
 	font-weight: 600;
+	line-height: 1.2;
 	padding: 0 4px;
 }
 
 .cn-checklist-run__help {
 	color: var(--color-text-maxcontrast);
+	font-size: 14px;
 	margin: 0;
 }
 
+/* An option reads as text, not as a field label (a theme makes every label
+   bold); 15px as the board draws it (DqInspectie). */
 .cn-checklist-run__choice {
 	align-items: center;
 	display: flex;
+	font-size: 15px;
+	font-weight: 400;
 	gap: 10px;
 	min-height: 34px;
 }
@@ -1225,6 +1232,7 @@ export default {
 }
 
 .cn-checklist-run__group {
+	font-size: 14px;
 	font-weight: 600;
 	margin: 0;
 }

package/src/components/CnChoiceCards/CnChoiceCards.vue

@@ -622,6 +622,7 @@ export default {
 .cn-choice-cards__row-title {
 	font-size: 15px;
 	font-weight: 600;
+	line-height: 1.2;
 }
 
 /* Regular weight on the span itself: a theme that sets every label bold

package/src/components/CnDetailWidgetHost/CnDetailWidgetHost.vue

@@ -86,6 +86,7 @@
 		<CnObjectDataWidget
 			v-else-if="isData && schemaObject"
 			:title="resolvedTitle"
+			:subtitle="widgetSubtitle"
 			:chromeless="isBare"
 			:showActions="!isBare && actionsShown"
 			:icon="widget.icon || null"

package/src/components/CnFilesBrowser/CnFilesBrowser.vue

@@ -38,7 +38,7 @@
 		     Files app and its plugins registered for this folder (a new folder,
 		     a template, a file request) beside a plain upload. -->
 		<div class="cn-files-browser__bar">
-			<NcBreadcrumbs class="cn-files-browser__crumbs">
+			<NcBreadcrumbs class="cn-files-browser__crumbs" :class="{ 'cn-files-browser__crumbs--at-root': atRoot }">
 				<!-- The whole trail from the user's files root, as the Files app
 				     draws it. A crumb above the browser's root links into the Files
 				     app (the browser never leaves its root); the root and everything
@@ -1471,6 +1471,19 @@ export default {
 			return crumbsFor(this.rootPath, this.currentPath, this.rootLabel)
 		},
 
+		/**
+		 * Whether the open folder is the browser's root: the trail then ends on
+		 * the root itself (the board look draws no trail there).
+		 *
+		 * @return {boolean}
+		 * @spec openspec/changes/board-files-root-crumb/specs/board-files-root-crumb/spec.md#requirement-the-board-files-bar-draws-no-trail-at-the-root
+		 */
+		atRoot() {
+			const root = String(this.rootPath || '/').replace(/\/+$/, '') || '/'
+			const last = this.crumbs[this.crumbs.length - 1]
+			return Boolean(last) && last.path === root
+		},
+
 		/**
 		 * The children in the chosen order, folders first the way the Files app
 		 * lists them.
@@ -2768,7 +2781,8 @@ export default {
 							}
 						})
 						.filter((field) => field.value !== null && field.value !== undefined && field.value !== ''),
-					actions: (Array.isArray(card.actions) ? card.actions : []).filter((action) => action && action.id),
+					actions: (Array.isArray(card.actions) ? card.actions : [])
+						.filter((action) => action && action.id && hostActionApplies(action, node, this.rowValueOf(node))),
 				}))
 		},
 
@@ -3064,7 +3078,18 @@ export default {
 		 * @spec openspec/changes/files-browser-hosts-a-documents-list/specs/files-browser/spec.md
 		 */
 		hostActionsFor(node) {
-			return this.rowActions.filter((action) => hostActionApplies(action, node))
+			return this.rowActions.filter((action) => hostActionApplies(action, node, this.rowValueOf(node)))
+		},
+
+		/**
+		 * A reader of the host's row fields for one file, for `visibleIf.row`.
+		 *
+		 * @param {object} node The file.
+		 * @return {(key: string) => unknown} `(key) => value` over the row the host gave for the file.
+		 * @spec openspec/changes/files-browser-action-visible-if-row/specs/files-browser/spec.md#requirement-a-host-action-can-be-offered-by-a-field-of-the-files-row
+		 */
+		rowValueOf(node) {
+			return (key) => fileColumnValue({ key, source: 'row' }, node, this.resolvedRowData)
 		},
 
 		/**

package/src/components/CnFilesBrowser/filesBrowser.js

@@ -284,15 +284,19 @@ export function indexRowData(data, { path = '', key = 'fileId' } = {}) {
  *
  * `visibleIf.extension` lists file extensions (no case, a leading dot is
  * allowed); `visibleIf.mime` lists mime types, where one ending in `/` or
- * `/*` names the whole family. Every condition named must hold. An action
- * without `visibleIf` is offered on every file, as before. An action with
- * `when` is offered only while `when` is `true`.
+ * `/*` names the whole family; `visibleIf.row` maps fields of the host's row
+ * for the file to the value each must have (compared strictly, so `true` is
+ * not `"true"`). Every condition named must hold. An action without
+ * `visibleIf` is offered on every file, as before. An action with `when` is
+ * offered only while `when` is `true`.
  *
  * @param {object} action The declared action.
  * @param {object} node The file (`basename`, `mime`).
+ * @param {((key: string) => unknown)|null} rowValue Reads a field of the host's row for the file; without it a `row` condition fails.
  * @return {boolean} True when the action belongs on this file.
+ * @spec openspec/changes/files-browser-action-visible-if-row/specs/files-browser/spec.md#requirement-a-host-action-can-be-offered-by-a-field-of-the-files-row
  */
-export function hostActionApplies(action, node) {
+export function hostActionApplies(action, node, rowValue = null) {
 	// `when`: the action applies only while it is true (a case type flag).
 	// @spec openspec/changes/files-review-row-when/specs/files-review-row-when/spec.md#requirement-a-files-browser-entry-can-apply-only-when-a-condition-holds
 	if (action && typeof action === 'object' && 'when' in action && action.when !== true) {
@@ -324,5 +328,14 @@ export function hostActionApplies(action, node) {
 			return false
 		}
 	}
+	if (condition.row && typeof condition.row === 'object') {
+		if (typeof rowValue !== 'function') {
+			return false
+		}
+		const holds = Object.entries(condition.row).every(([key, wanted]) => rowValue(key) === wanted)
+		if (!holds) {
+			return false
+		}
+	}
 	return true
 }

package/src/components/CnFilesBrowser/filesBrowserColumns.js

@@ -3,6 +3,8 @@
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 
+import { isAppInstalled } from '../../utils/appInstalled.js'
+
 /**
  * The built-in columns a host may name by string, and what each one reads.
  *
@@ -53,12 +55,26 @@ export function isBuiltInFileColumn(name) {
 	return typeof name === 'string' && Object.hasOwn(BUILT_IN_FILE_COLUMNS, name)
 }
 
+/**
+ * Whether the app a column leans on is enabled: one app id, or a list of which
+ * any one will do. A column without `requiredApp` always applies.
+ *
+ * @param {(string|string[]|undefined)} requiredApp The app id(s).
+ * @return {boolean} True when the column applies.
+ * @spec openspec/changes/files-column-required-app/specs/files-column-required-app/spec.md#requirement-a-file-column-can-require-another-app
+ */
+function requiredAppPresent(requiredApp) {
+	const ids = (Array.isArray(requiredApp) ? requiredApp : [requiredApp]).filter((id) => typeof id === 'string' && id !== '')
+	return ids.length === 0 || ids.some((id) => isAppInstalled(id))
+}
+
 /**
  * Resolve a host's `columns` declaration into column objects.
  *
  * A string names a built-in. An object declares its own: `key`, `label`,
  * `source` (`node`, `attribute` or `row`), `attribute`, `formatter` and
- * `sortable`. An entry naming an unknown built-in is dropped here and refused
+ * `sortable`, and `requiredApp` (an app id, or a list of which any one will
+ * do; without it the column is left out). An entry naming an unknown built-in is dropped here and refused
  * by the manifest validator, so an author hears about it at authoring time
  * rather than finding a column missing at runtime.
  *
@@ -83,6 +99,9 @@ export function normaliseFileColumns(columns) {
 		if ('when' in entry && entry.when !== true) {
 			return
 		}
+		if (!requiredAppPresent(entry.requiredApp)) {
+			return
+		}
 		if (isBuiltInFileColumn(entry.key) && entry.source === undefined) {
 			out.push({ ...BUILT_IN_FILE_COLUMNS[entry.key], ...entry, builtIn: true })
 			return

package/src/components/CnIndexPage/CnIndexPage.vue

@@ -8517,7 +8517,9 @@ export default {
 			return [
 				...this.searchTermChips,
 				...this.quickFilterActiveChips,
-				...this.filterChipsOf(this.effectiveActiveFilters, (key, value) => this.isFixedFilter(key, value) || ownToView(key, value)),
+				// The folder pane's own filter is not a chip: the selected folder
+				// shows in the pane and as the heading above the list (DqAfdelingen).
+				...this.filterChipsOf(this.effectiveActiveFilters, (key, value) => this.isFixedFilter(key, value) || ownToView(key, value) || this.isFolderFilter(key)),
 			]
 		},
 
@@ -9703,6 +9705,18 @@ export default {
 		 * @return {boolean}
 		 * @spec openspec/changes/index-scope-presentation/specs/index-page/spec.md#requirement-the-query-that-chose-a-preset-is-not-a-removable-filter
 		 */
+		/**
+		 * Whether a filter key is the folder pane's (`folderSidebar.filterField`).
+		 *
+		 * @param {string} key The filter key.
+		 * @return {boolean}
+		 * @spec openspec/changes/board-folder-scope-outside-card/specs/index-page/spec.md#requirement-the-selected-folder-heads-the-list-from-outside-its-card
+		 */
+		isFolderFilter(key) {
+			const field = this.folderSidebar && this.folderSidebar.filterField
+			return typeof field === 'string' && field !== '' && key === field
+		},
+
 		isFixedFilter(key, value) {
 			const fixed = this.fixedFilters
 			if (!fixed || !Object.hasOwn(fixed, key)) {

package/src/components/CnPageHeader/CnHeaderTrail.vue

@@ -99,7 +99,8 @@ export default {
 
 		/**
 		 * The crumbs for CnBreadcrumbs: each declared crumb as a link, then the
-		 * current page. Empty without a declared crumb.
+		 * current page, once (a last crumb that names the page is dropped).
+		 * Empty without a declared crumb.
 		 *
 		 * @spec openspec/changes/page-header-breadcrumb/specs/page-header/spec.md#requirement-a-list-dashboard-or-settings-page-can-show-a-breadcrumb-and-a-meta-note
 		 * @return {Array<object>}
@@ -121,6 +122,10 @@ export default {
 				return entry
 			})
 			if (this.current) {
+				// A last crumb naming the page itself is the current one, drawn once.
+				if (out.length > 0 && out[out.length - 1].label === this.current) {
+					out.pop()
+				}
 				out.push({ label: this.current })
 			}
 			return out

package/src/components/CnRecordListWidget/CnRecordListWidget.vue

@@ -194,6 +194,7 @@
 			<ul
 				v-if="group.items.length > 0"
 				class="cn-record-list__list"
+				:class="{ 'cn-record-list__list--avatar-small': avatarSmall }"
 				:aria-labelledby="group.label ? group.headingId : null"
 				:data-testid="isGrouped ? 'cn-record-list-group' : null">
 				<li
@@ -635,7 +636,7 @@ function unwrap(value) {
  * `rowRoute`, `pageControls`), or `endpointSource` (an app endpoint whose
  * payload, after `responsePath`, is the array of rows, as on the object table), or `objectRows`
  * (`{ path, where?, valuePath? }`: rows the page record holds, such as one answer of a case); `avatar` puts a circle with the initials of a name
- * template before the title; what differs is the drawing: `presentation` is `rows`, `feed`
+ * template before the title (`{ text, size: 32 }` draws the 32px circle 12px from the title, as DqZaakBesluiten); what differs is the drawing: `presentation` is `rows`, `feed`
  * or `inline`, and each line is a template (`"{identifier} · {caseTypeName}"`,
  * `"Termijn {deadline|date}"`). `cards` draws a framed card per row in a
  * grid, with `trailing` as the large figure (board ShBank's accounts).
@@ -831,6 +832,17 @@ export default {
 	},
 
 	computed: {
+		/**
+		 * Whether the avatar is the 32px circle (`avatar.size: 32`).
+		 *
+		 * @return {boolean}
+		 * @spec openspec/changes/record-list-avatar-size/specs/record-list-avatar/spec.md#requirement-a-record-list-avatar-can-be-the-small-circle
+		 */
+		avatarSmall() {
+			const avatar = this.content?.avatar
+			return Boolean(avatar && typeof avatar === 'object' && Number(avatar.size) === 32)
+		},
+
 		/** @return {boolean} Whether a row's pill comes before its title (`pillAt: "start"`). */
 		pillFirst() {
 			return this.content?.pillAt === 'start'
@@ -3068,6 +3080,14 @@ export default {
 	white-space: nowrap;
 }
 
+/* `avatar.size: 32`: the smaller circle, 12px from the title where the row
+   keeps 16px between its other parts (DqZaakBesluiten Adviezen). */
+.cn-record-list__list--avatar-small .cn-record-list__avatar {
+	width: 32px;
+	height: 32px;
+	margin-inline-end: -4px;
+}
+
 .cn-record-list__avatar {
 	align-items: center;
 	background: var(--color-background-hover);

package/src/components/CnSavedViewAlertWidget/CnSavedViewAlertWidget.vue

@@ -243,6 +243,7 @@ export default {
 }
 
 .cn-saved-view-alert__facts {
+	padding: 0;
 	display: grid;
 	grid-template-columns: max-content 1fr;
 	gap: 6px 16px;
@@ -280,6 +281,11 @@ export default {
 	font-weight: 600;
 }
 
+/* The switch sits flush with the card edge, as the board draws it. */
+.cn-saved-view-alert :deep(.checkbox-radio-switch__content) {
+	padding: 0;
+}
+
 .cn-saved-view-alert__switch-text {
 	display: flex;
 	flex-direction: column;

package/src/components/CnTimelineWidget/CnTimelineManage.vue

@@ -199,13 +199,18 @@
 					{{ t('nextcloud-vue', 'Goes on the timeline above, internal unless you make it visible') }}
 				</p>
 			</template>
+			<label v-if="textBlocks.length" class="cn-timeline-manage__draft-label" :for="blockId">
+				{{ t('nextcloud-vue', 'Template') }}
+			</label>
 			<NcSelect v-if="textBlocks.length"
 				v-model="chosenBlock"
 				class="cn-timeline-manage__filter"
 				:options="blockOptions"
 				:clearable="true"
 				label="label"
-				:inputLabel="t('nextcloud-vue', 'Template')"
+				:inputId="blockId"
+				:labelOutside="true"
+				:ariaLabelCombobox="t('nextcloud-vue', 'Template')"
 				:placeholder="t('nextcloud-vue', 'Write your own')"
 				data-testid="cn-timeline-block"
 				@update:modelValue="pickBlock" />
@@ -437,6 +442,10 @@ export default {
 			return `cn-timeline-draft-${this.uid}`
 		},
 
+		blockId() {
+			return `cn-timeline-block-${this.uid}`
+		},
+
 		/**
 		 * The kind options, the plain note first. A note is an entry with NO
 		 * kind, so "Note" filters on its absence.

package/src/css/dialog.css

@@ -168,13 +168,22 @@ body:has(.cn-look-board):not(:has(.cn-look-nextcloud)) .modal-mask {
    goes to those tokens too (DqOverdragen, DqDocumentGenereren). */
 .cn-dialog-header__subtitle {
 	--nldesign-component-paragraph-font-size: 14px;
+	--nldesign-component-paragraph-line-height: 1.5;
 	--nldesign-component-paragraph-color: var(--color-text-maxcontrast);
 	--nldesign-color-on-surface: var(--color-text-maxcontrast);
 	margin: 4px 0 0;
 	font-size: 14px;
+	line-height: 1.5;
 	color: var(--color-text-maxcontrast);
 }
 
+/* The saved-view edit and share forms start 22px under the subtitle, as
+   the Dq dialog boards draw a first field: the body's 16px gap and 6px. */
+.cn-dialog-board .dialog__content .cn-edit-view,
+.cn-dialog-board .dialog__content .cn-share-view {
+	padding-top: 6px;
+}
+
 /* The close button is a 36px circle. NcButton sizes an icon-only button by
    --button-size with `!important`, so the size goes through that; the radius
    also goes to the nldesign theme's button radius token. */
@@ -539,6 +548,15 @@ body:has(.cn-look-board):not(:has(.cn-look-nextcloud)) .modal-mask {
 	}
 }
 
+/* A choice legend in a board dialog is 14px/600 on the normal line height, as
+   the dialog boards draw it (DqDocumentGenereren "Sjabloon").
+   @spec openspec/changes/board-choice-legend-type/specs/board-choice-legend-type/spec.md#requirement-a-board-dialogs-choice-legend-is-14px-600-on-the-normal-line-height */
+.cn-dialog-board .cn-choice-cards__legend {
+	font-size: 14px;
+	font-weight: 600;
+	line-height: normal;
+}
+
 /* Above a phone the boards top-align a dialog (DqNieuweZaak, DqUwWachtrij,
    DqVolgendeStap: the top edge sits about 90px down at 1440 wide) instead of
    centring it. `--cn-dialog-top` moves it. */