@conduction/nextcloud-vue 2.141.0 → 2.143.0

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

@@ -875,6 +875,7 @@
 					:columns="renderedColumns"
 					:pinnedCount="pinnedColumnCount"
 					:rowIcon="rowIcon"
+					:rowIconTone="rowIconTone"
 					:rowIndicators="rowIndicators"
 					:rowIndicatorCap="rowIndicatorCap"
 					:rows="displayObjects"
@@ -3185,6 +3186,17 @@ export default {
 			default: null,
 		},
 
+		/**
+		 * The leading icon's tile tone in the board look (`primary`, `teal`,
+		 * `neutral`), from `pages[].config.rowIconTone`. Forwarded to CnDataTable.
+		 *
+		 * @type {string}
+		 */
+		rowIconTone: {
+			type: String,
+			default: 'primary',
+		},
+
 		/** Columns to exclude in schema mode */
 		excludeColumns: {
 			type: Array,
@@ -6422,6 +6434,7 @@ export default {
 				r: this.register,
 				s: this.exportSchemaSlug,
 				f: this.filter || null,
+				a: this.effectiveActiveFilters || null,
 				e: this.countEntries,
 				// The store's total, not the error override in effectivePagination,
 				// so a failed fetch and its recovery do not refetch the counts.
@@ -8504,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)),
 			]
 		},
 
@@ -9690,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)) {
@@ -10012,7 +10039,15 @@ export default {
 			const counts = await fetchFilterCounts({
 				register: this.register,
 				schema,
-				entries: this.countEntries.map((entry) => ({ key: entry.key, filter: resolveFilterMap(entry.filter, params, ctx) })),
+				// A quick filter counts within the list as filtered (the
+				// active filters, its own field its own); a saved view counts
+				// its own query.
+				entries: this.countEntries.map((entry) => ({
+					key: entry.key,
+					filter: entry.key.startsWith('tab:')
+						? { ...(this.effectiveActiveFilters || {}), ...resolveFilterMap(entry.filter, params, ctx) }
+						: resolveFilterMap(entry.filter, params, ctx),
+				})),
 				baseFilter: resolveFilterMap(this.filter, params, ctx),
 				ctx,
 			})

package/src/components/CnIndexPage/useSelfFetchList.js

@@ -5,7 +5,9 @@ import { useObjectStore } from '../../store/index.js'
 // Both filter resolvers live in `utils/routeFilters.js` so CnLogsPage applies
 // the same two grammars (route-param interpolation + `?key=value` deep links)
 // without pulling in this composable's index-only sidebar/subscription wiring.
+import { loadMyTeam } from '../../utils/myTeam.js'
 import { withPersonalLenses } from '../../utils/personalLenses.js'
+import { dropOptionalUnresolved, MY_TEAM_TOKEN, resolveFilterTokens } from '../../utils/resolveFilterTokens.js'
 import { parseSortKeysFromQuery, resolveFilterMap, resolveQueryFilters } from '../../utils/routeFilters.js'
 import { orderToSortKeys } from '../../utils/sortOrder.js'
 
@@ -392,6 +394,18 @@ export function useSelfFetchList(props, instance, inject, extras = {}) {
 	// a reactive getter so a runtime flip attaches/detaches accordingly.
 	// Stores without live-updates support (no `subscribe` action) are a
 	// silent no-op inside the composable, keeping this fully inert.
+	// An address carrying `@myTeam` (a shared link) waits for the team, as a
+	// saved view on it does: once read, the token becomes the team, or goes
+	// for a reader in none.
+	const carriesMyTeam = Object.values(initialActiveFilters || {})
+		.some((value) => value === MY_TEAM_TOKEN || (Array.isArray(value) && value.includes(MY_TEAM_TOKEN)))
+	if (carriesMyTeam) {
+		loadMyTeam().then(() => {
+			list.activeFilters.value = dropOptionalUnresolved(resolveFilterTokens(list.activeFilters.value, tokenCtx()))
+			list.refresh(1)
+		})
+	}
+
 	useObjectSubscription(objectStore, () => objectType.value, null, {
 		enabled: () => props.subscribe !== false,
 	})

package/src/components/CnObjectSidebar/CnFilesTab.vue

@@ -16,6 +16,7 @@
 			:dropOverlay="dropOverlay"
 			:dropLabel="dropLabel"
 			:dropDetail="dropDetail"
+			:dropDetailValues="dropDetailValues"
 			:dropHint="dropHint"
 			:rowActions="rowActions"
 			:newActions="newActions"
@@ -360,7 +361,9 @@ export default {
 		/** Forwarded to CnFilesBrowser: the drop state's line ("Laat los om toe te voegen"); the library's own without it. */
 		dropLabel: { type: String, default: undefined },
 		/** Forwarded to CnFilesBrowser: the drop state's second line, `{count}` the files dragged; it also makes the overlay fill the panel. */
-		dropDetail: { type: String, default: '' },
+		dropDetail: { type: [String, Array], default: '' },
+		/** Forwarded to CnFilesBrowser: named values filled into `dropDetail`. */
+		dropDetailValues: { type: Object, default: null },
 		/** Forwarded to CnFilesBrowser: "Or drag files onto this list." under the list. */
 		dropHint: { type: Boolean, default: false },
 		/**

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/CnPartyPicker/CnPartyPicker.vue

@@ -52,7 +52,9 @@ const SEARCH_DELAY = 250
  * Organisatie · KvK …"). Built on CnSearchSelect.
  *
  * `sources`: each `{ id, register, schema, label?, title?, secondary?,
- * limit?, icon? }` searches OpenRegister with `_search`; `title` and
+ * limit?, icon?, lookup? }` searches OpenRegister with `_search`; `lookup`
+ * (`{ url, when }`) sends a term matching `when` to the app's exact lookup
+ * instead (a POST of `{ term }` answering `{ results }`); `title` and
  * `secondary` are templates filled from the row (default `{name}` / none),
  * `label` names the kind ("Resident") and starts the second line; `label`
  * and `secondary` go through the host translate, so a manifest can write
@@ -284,6 +286,10 @@ export default {
 						const { data } = await axios.post(generateUrl('/contactsmenu/contacts'), { filter: term })
 						return (data && Array.isArray(data.contacts) ? data.contacts : []).map((c) => this.contactOptionOf(source, c))
 					}
+					if (this.isExactLookup(source, term) === true) {
+						const { data } = await axios.post(generateUrl(source.lookup.url), { term })
+						return (data && Array.isArray(data.results) ? data.results : []).map((row) => this.optionOf(source, row))
+					}
 					if (!source.register || !source.schema) {
 						return []
 					}
@@ -311,6 +317,30 @@ export default {
 			this.searching = false
 		},
 
+		/**
+		 * Whether a typed term goes to the source's exact lookup instead of the
+		 * free-text search: `source.lookup` is `{ url, when }`, `when` a regular
+		 * expression the whole term must match ("^[0-9]{9}$" for a BSN). The
+		 * lookup is a POST, so the term never sits in a URL or a server log line,
+		 * and the app behind it may check and record who looked whom up.
+		 *
+		 * @param {object} source The source.
+		 * @param {string} term The typed term.
+		 * @return {boolean}
+		 * @spec openspec/changes/party-picker-exact-lookup/specs/party-picker/spec.md#requirement-a-party-source-can-look-a-term-up-exactly
+		 */
+		isExactLookup(source, term) {
+			const lookup = source && source.lookup
+			if (!lookup || typeof lookup.url !== 'string' || lookup.url === '' || typeof lookup.when !== 'string') {
+				return false
+			}
+			try {
+				return new RegExp(lookup.when).test(term)
+			} catch {
+				return false
+			}
+		},
+
 		/**
 		 * Name a value the list does not hold: the first OpenRegister source
 		 * that has an object with that id.

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. */

package/src/css/look-board-detail.css

@@ -842,6 +842,29 @@
 	display: flex;
 }
 
+/* The assistant in the side column (DqZaakAssistent "Assistent") is a panel,
+   not a label card: a 17px title over a hairline, 16px 18px in, its pill at
+   the row's end, the chat flush under it. */
+.cn-look-board .cn-detail-page__side .cn-widget-wrapper:has(.cn-ai-chat-widget) > .cn-widget-wrapper__header {
+	padding: 16px 18px;
+	border-bottom: 1px solid var(--color-border);
+}
+
+.cn-look-board .cn-detail-page__side .cn-widget-wrapper:has(.cn-ai-chat-widget) .cn-widget-wrapper__title {
+	color: var(--color-main-text) !important;
+	font-size: var(--cn-board-heading-size, 17px);
+	font-weight: 700;
+	line-height: 1.2;
+}
+
+.cn-look-board .cn-detail-page__side .cn-widget-wrapper:has(.cn-ai-chat-widget) .cn-widget-wrapper__actions:has(.cn-detail-widget-header-items) {
+	display: flex;
+}
+
+.cn-look-board .cn-detail-page__side .cn-widget-wrapper:has(.cn-ai-chat-widget) > .cn-widget-wrapper__content {
+	padding: 0;
+}
+
 /* A widget-reported card header action in the main column is a neutral 40px
    control: the main background, the control border, the main text at
    14px/600, a 16px icon 8px before the label (DqZaakBesluiten "Document
@@ -1431,6 +1454,14 @@
 	display: none;
 }
 
+/* ---- A file list's trail at its root (CnFilesBrowser) ------------------- */
+/* At the browser's root the boards draw the bar's buttons only, no trail of
+   one crumb naming the case (DqZaakDocumenten); in a subfolder the trail shows.
+   @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 */
+.cn-look-board .cn-files-browser__crumbs--at-root:not(.cn-look-nextcloud *) {
+	display: none;
+}
+
 /* ---- A file list (CnFilesBrowser) --------------------------------------- */
 /* The board's compact card table (DqDocumentenBeheer): a near-white header at
    14px/600 in the muted ink, 10px 12px; 14px cells, 11px 12px, a hairline
@@ -1585,6 +1616,49 @@
 	line-height: 1.2;
 }
 
+/* The contacts tab's rows as DqZaakBetrokkenen "Partijen" draws them: the
+   role heading 15px bold ink in sentence case, each person on a row 12px
+   high-padded under a hairline, the details and the period 13px muted.
+   @spec openspec/changes/board-contacts-rows/specs/contacts/spec.md */
+.cn-look-board .cn-contacts-tab .cn-contacts-tab__group-title {
+	margin: 6px 0 0;
+	font-size: 15px;
+	font-weight: 700;
+	letter-spacing: 0;
+	text-transform: none;
+	color: var(--color-main-text);
+}
+
+.cn-look-board .cn-contacts-tab .cn-contacts-tab__item {
+	align-items: center;
+	padding: 12px 0;
+	border-top: 1px solid var(--cn-board-hairline);
+	border-radius: 0;
+}
+
+.cn-look-board .cn-contacts-tab .cn-contacts-tab__item:first-child {
+	margin-top: 8px;
+}
+
+.cn-look-board .cn-contacts-tab .cn-contacts-tab__name {
+	font-size: 15px;
+	font-weight: 600;
+}
+
+.cn-look-board .cn-contacts-tab .cn-contacts-tab__meta,
+.cn-look-board .cn-contacts-tab .cn-contacts-tab__period {
+	font-size: 13px;
+	color: var(--color-text-maxcontrast);
+}
+
+.cn-look-board .cn-contacts-tab .cn-contacts-tab__period {
+	flex: none;
+}
+
+.cn-look-board .cn-contacts-tab .cn-contacts-tab__group {
+	margin-bottom: 8px;
+}
+
 /* The contacts tab inside a detail card (DqZaakBetrokkenen "Partijen") takes
    the card's padding instead of its own, and its buttons start at the card's
    edge under the subtitle.
@@ -1596,3 +1670,55 @@
 .cn-look-board .cn-detail-page__leaf-card .cn-contacts-tab .cn-contacts-tab__header {
 	justify-content: flex-start;
 }
+
+/* A body card's subtitle as the Dq boards draw it: 14px muted at line
+   height 1.2, 3px under the title, and the content 12px under it.
+   @spec openspec/changes/board-card-subtitle-gaps/specs/board-card/spec.md */
+.cn-look-board .cn-detail-page .cn-widget-wrapper:not(.cn-detail-page__side *) .cn-widget-wrapper__title-stack:has(> .cn-widget-wrapper__subtitle) {
+	gap: 3px;
+}
+
+.cn-look-board .cn-detail-page .cn-widget-wrapper:not(.cn-detail-page__side *) .cn-widget-wrapper__subtitle {
+	font-size: 14px;
+	line-height: 1.2;
+}
+
+.cn-look-board .cn-detail-page .cn-widget-wrapper:not(.cn-detail-page__side *):has(> .cn-widget-wrapper__header .cn-widget-wrapper__subtitle) > .cn-widget-wrapper__content {
+	padding-top: 12px;
+}
+
+/* A checklist (DqTaak): each item an 18-20px box at the card's own inset, the
+   label 10px after it in weight 600, 12px between items, the list 2px below
+   the title block. Nextcloud's checkbox pads its box 7px in and makes every row
+   34px tall, which put the list 7px right and 2px apart too far per item.
+   @spec openspec/changes/board-checklist-rows/specs/checklist-widget/spec.md#requirement-a-board-checklist-sits-at-the-card-inset */
+.cn-look-board .cn-checklist-widget__items {
+	display: flex;
+	flex-direction: column;
+	gap: 12px;
+	margin-top: 2px;
+}
+
+.cn-look-board .cn-checklist-widget__item .checkbox-content {
+	padding: 0;
+	gap: 10px;
+	min-height: 20px;
+}
+
+.cn-look-board .cn-checklist-widget__item .checkbox-content.checkbox-content .checkbox-content__icon {
+	margin: 0;
+}
+
+.cn-look-board .cn-checklist-widget__item .checkbox-radio-switch__input {
+	min-height: 20px;
+}
+
+.cn-look-board .cn-checklist-widget__item .checkbox-content__wrapper,
+.cn-look-board .cn-checklist-widget__item .checkbox-content__text {
+	line-height: 18px;
+	min-height: 0;
+}
+
+.cn-look-board .cn-checklist-widget__item .checkbox-content__text {
+	font-weight: 600;
+}