@conduction/nextcloud-vue 2.78.0 → 2.79.0

package/src/components/CnDashboardPage/CnDashboardPage.vue

@@ -33,8 +33,8 @@
 					<!-- @slot title-meta Content on the title's row, right of the title (e.g. a page-wide picker). Fill it from a manifest with `page.slots: { "title-meta": "<RegistryName>" }`. -->
 					<slot name="title-meta" />
 				</div>
-				<p v-if="description" class="cn-dashboard-page__description">
-					{{ resolvedDescription }}
+				<p v-if="subtitleText" class="cn-dashboard-page__description" data-testid="cn-dashboard-page-subtitle">
+					{{ subtitleText }}
 				</p>
 			</div>
 			<div class="cn-dashboard-page__header-actions">
@@ -42,7 +42,7 @@
 				     widget on the page draws it. Its options control the view
 				     region below the grid. -->
 				<CnSegmentedControl
-					v-if="showsPageViewSwitch"
+					v-if="showsPageViewSwitch && !switchInRow"
 					class="cn-page-view-switch"
 					:options="viewSwitchOptions"
 					:modelValue="activeViewId"
@@ -97,6 +97,7 @@
 				     Separate from the per-widget menus. `docs-anchor` deep-links
 				     the docs item to THIS page's section. -->
 				<CnActionsMenu
+					v-if="showActionsMenu"
 					:showRefresh="showRefresh"
 					:showRequestFeature="showRequestFeature"
 					:showReportBug="showReportBug"
@@ -138,6 +139,39 @@
 			</div>
 		</div>
 
+		<!-- The switch row (screens-dashboard-greeting-header): in the board
+		     look the page's view switch sits under the header, left, and the
+		     page's `viewLinks` sit right of it as small pills (DqMijnWerk). -->
+		<div
+			v-if="showHeader && (switchInRow || resolvedViewLinks.length > 0)"
+			class="cn-dashboard-page__switch-row"
+			data-testid="cn-dashboard-page-switch-row">
+			<CnSegmentedControl
+				v-if="switchInRow"
+				class="cn-page-view-switch"
+				:options="viewSwitchOptions"
+				:modelValue="activeViewId"
+				:ariaLabel="viewSwitchLabel"
+				:controls="viewRegionId"
+				data-testid="cn-dashboard-page-view-switch"
+				@update:modelValue="selectView" />
+			<span class="cn-dashboard-page__switch-row-spacer" />
+			<component
+				:is="link.tag"
+				v-for="link in resolvedViewLinks"
+				:key="link.key"
+				v-bind="link.attrs"
+				class="cn-dashboard-page__view-link"
+				data-testid="cn-dashboard-page-view-link">
+				<CnWidgetIcon
+					v-if="link.icon"
+					:name="link.icon"
+					:size="14"
+					class="cn-dashboard-page__view-link-icon" />
+				{{ link.label }}
+			</component>
+		</div>
+
 		<!-- Date-range header (optional).
 		     Rendered only when `dateRange.enabled === true` AND
 		     `dateRange.showHeaderPicker !== false`. The range STATE
@@ -868,7 +902,8 @@
 </template>
 
 <script>
-import { translate as t } from '@nextcloud/l10n'
+import { getCurrentUser } from '@nextcloud/auth'
+import { getCanonicalLocale, translate as t } from '@nextcloud/l10n'
 import { NcActionButton, NcActionInput, NcActions, NcActionSeparator, NcButton, NcLoadingIcon, NcSelect } from '@nextcloud/vue'
 import { provide, ref, watch } from 'vue'
 import CalendarRange from 'vue-material-design-icons/CalendarRange.vue'
@@ -889,6 +924,7 @@ import CnKpiGrid from '../CnKpiGrid/CnKpiGrid.vue'
 import CnSegmentedControl from '../CnSegmentedControl/CnSegmentedControl.vue'
 import CnStatsBlockWidget from '../CnStatsBlockWidget/CnStatsBlockWidget.vue'
 import CnTileWidget from '../CnTileWidget/CnTileWidget.vue'
+import CnWidgetIcon from '../CnWidgetGrid/CnWidgetIcon.vue'
 import CnWidgetRefItem from '../CnWidgetRefItem/CnWidgetRefItem.vue'
 import CnWidgetRenderer from '../CnWidgetRenderer/CnWidgetRenderer.vue'
 import CnWidgetWrapper from '../CnWidgetWrapper/CnWidgetWrapper.vue'
@@ -1056,6 +1092,7 @@ export default {
 		CnLeafMountHost,
 		CnSegmentedControl,
 		CnKpiGrid,
+		CnWidgetIcon,
 	},
 
 	mixins: [pageViews],
@@ -1156,6 +1193,50 @@ export default {
 			default: () => [],
 		},
 
+		/**
+		 * Greet the reader in the header subtitle (manifest `config.greeting`):
+		 * `true` (or `"first"`) writes "Good afternoon, Pieter · Monday 5
+		 * October 2026", `"full"` uses the whole display name. The page
+		 * `description`, when set, follows after another middle dot. Off by
+		 * default: the subtitle is the description alone, as before.
+		 *
+		 * @spec openspec/changes/screens-dashboard-greeting-header/specs/dashboard-page/spec.md#requirement-the-header-subtitle-can-greet-the-reader
+		 * @type {boolean|string}
+		 */
+		greeting: {
+			type: [Boolean, String],
+			default: false,
+		},
+
+		/**
+		 * Links drawn as small pills on the switch row under the header
+		 * (manifest `config.viewLinks`), as DqMijnWerk's "Uw wachtrij / Aan
+		 * mij toegewezen / Dag afsluiten". Each `{ label, icon?, route?,
+		 * href? }`: `route` is a route name or a `{ name, params?, query? }`
+		 * location, `href` a plain URL; `label` goes through the host
+		 * translate function. An entry without a label or a target is skipped.
+		 *
+		 * @spec openspec/changes/screens-dashboard-greeting-header/specs/dashboard-page/spec.md#requirement-a-switch-row-carries-the-view-switch-and-link-pills
+		 * @type {Array<object>}
+		 */
+		viewLinks: {
+			type: Array,
+			default: () => [],
+		},
+
+		/**
+		 * Whether the header draws the page Actions menu (manifest
+		 * `config.showActionsMenu`). `false` removes it, for a board page
+		 * whose header carries only the buildiq square and the primary.
+		 *
+		 * @spec openspec/changes/screens-dashboard-greeting-header/specs/dashboard-page/spec.md#requirement-the-header-can-drop-the-page-actions-menu
+		 * @type {boolean}
+		 */
+		showActionsMenu: {
+			type: Boolean,
+			default: true,
+		},
+
 		/**
 		 * Whether a widget draws its overflow Actions menu when neither its
 		 * placement nor its definition says (`showActions`). `false` (manifest
@@ -1848,6 +1929,97 @@ export default {
 			return typeof this.cnTranslate === 'function' ? this.cnTranslate : (key) => key
 		},
 
+		/**
+		 * The greeting for the time of day, with the reader's first (or
+		 * full) name when known, or '' when `greeting` is off.
+		 *
+		 * @spec openspec/changes/screens-dashboard-greeting-header/specs/dashboard-page/spec.md#requirement-the-header-subtitle-can-greet-the-reader
+		 * @return {string}
+		 */
+		greetingLine() {
+			if (this.greeting !== true && this.greeting !== 'first' && this.greeting !== 'full') {
+				return ''
+			}
+			let user
+			try {
+				user = getCurrentUser()
+			} catch {
+				user = null
+			}
+			const displayName = (user && typeof user.displayName === 'string') ? user.displayName.trim() : ''
+			const name = this.greeting === 'full' ? displayName : displayName.split(/\s+/)[0]
+			const hour = new Date().getHours()
+			if (hour < 12) {
+				return name ? t('nextcloud-vue', 'Good morning, {name}', { name }) : t('nextcloud-vue', 'Good morning')
+			}
+			if (hour < 18) {
+				return name ? t('nextcloud-vue', 'Good afternoon, {name}', { name }) : t('nextcloud-vue', 'Good afternoon')
+			}
+			return name ? t('nextcloud-vue', 'Good evening, {name}', { name }) : t('nextcloud-vue', 'Good evening')
+		},
+
+		/**
+		 * The header subtitle: with `greeting` on, the greeting, today's date
+		 * written out and the description, joined by a middle dot; else the
+		 * description alone, as before.
+		 *
+		 * @spec openspec/changes/screens-dashboard-greeting-header/specs/dashboard-page/spec.md#requirement-the-header-subtitle-can-greet-the-reader
+		 * @return {string}
+		 */
+		subtitleText() {
+			const description = this.description ? this.resolvedDescription : ''
+			const greeting = this.greetingLine
+			if (greeting === '') {
+				return description
+			}
+			const options = { weekday: 'long', day: 'numeric', month: 'long', year: 'numeric' }
+			let date
+			try {
+				date = new Intl.DateTimeFormat(getCanonicalLocale() || undefined, options).format(new Date())
+			} catch {
+				date = new Intl.DateTimeFormat(undefined, options).format(new Date())
+			}
+			return [greeting, date, description].filter((part) => part !== '').join(' · ')
+		},
+
+		/**
+		 * Whether the page's view switch sits on the switch row under the
+		 * header (board look) rather than among the header actions.
+		 *
+		 * @spec openspec/changes/screens-dashboard-greeting-header/specs/dashboard-page/spec.md#requirement-a-switch-row-carries-the-view-switch-and-link-pills
+		 * @return {boolean}
+		 */
+		switchInRow() {
+			return this.isBoardLook && this.showsPageViewSwitch
+		},
+
+		/**
+		 * `viewLinks` as render descriptors: a router link for a route, an
+		 * anchor for an href, the label translated. Entries without a label
+		 * or a target are dropped.
+		 *
+		 * @spec openspec/changes/screens-dashboard-greeting-header/specs/dashboard-page/spec.md#requirement-a-switch-row-carries-the-view-switch-and-link-pills
+		 * @return {Array<{key: string, tag: string, attrs: object, label: string, icon: string}>}
+		 */
+		resolvedViewLinks() {
+			const links = Array.isArray(this.viewLinks) ? this.viewLinks : []
+			const out = []
+			links.forEach((link, index) => {
+				if (!link || typeof link.label !== 'string' || link.label === '') {
+					return
+				}
+				const icon = typeof link.icon === 'string' ? link.icon : ''
+				const label = this.effectiveTranslate(link.label)
+				if (link.route && this.$router) {
+					const to = typeof link.route === 'string' ? { name: link.route } : link.route
+					out.push({ key: `route-${index}`, tag: 'router-link', attrs: { to }, label, icon })
+				} else if (typeof link.href === 'string' && link.href !== '') {
+					out.push({ key: `href-${index}`, tag: 'a', attrs: { href: link.href }, label, icon })
+				}
+			})
+			return out
+		},
+
 		/**
 		 * The page title run through the host translate function so a
 		 * manifest-authored source string localises.
@@ -4392,6 +4564,49 @@ export default {
 	height: var(--cn-board-control-height, 40px);
 }
 
+/* The switch row under the header (screens-dashboard-greeting-header): the
+   view switch left, the `viewLinks` pills right (DqMijnWerk: pills 34px high,
+   radius 17, 13px/600, a 14px icon, primary light on primary deep). */
+.cn-dashboard-page__switch-row {
+	display: flex;
+	flex-wrap: wrap;
+	align-items: center;
+	gap: 10px;
+	margin-bottom: var(--cn-board-section-gap, 20px);
+}
+
+.cn-dashboard-page__switch-row-spacer {
+	flex: 1 1 auto;
+}
+
+.cn-dashboard-page__view-link {
+	display: inline-flex;
+	align-items: center;
+	gap: 6px;
+	height: 34px;
+	padding: 0 12px;
+	border-radius: 17px;
+	background: var(--color-primary-element-light);
+	color: var(--color-primary-element-light-text);
+	font-size: 13px;
+	font-weight: 600;
+	white-space: nowrap;
+	text-decoration: none !important;
+}
+
+.cn-dashboard-page__view-link:hover {
+	background: var(--color-primary-element-light-hover, var(--color-primary-element-light));
+}
+
+.cn-dashboard-page__view-link:focus-visible {
+	outline: 2px solid var(--color-main-text);
+	outline-offset: 2px;
+}
+
+.cn-dashboard-page__view-link-icon {
+	display: inline-flex;
+}
+
 /* The period group, in a row of its own between the header and the KPI row. */
 .cn-dashboard-page__date-range--segmented {
 	margin-bottom: 16px;

package/src/components/CnDataTable/CnDataTable.md

@@ -198,9 +198,11 @@ export default {
 | `rowIndicatorCap` | Number | `3` | How many declared indicators render on the row before the rest move into the row menu, reachable as `indicatorsFor(row).overflow`. |
 | `selectAllLabel` | String | `'Select all rows'` | Accessible name (`aria-label`) for the header select-all checkbox, so screen readers announce a named control (WCAG 4.1.2) |
 | `selectRowLabel` | String | `'Select row'` | Accessible name (`aria-label`) for each per-row select checkbox, so screen readers announce a named control (WCAG 4.1.2) |
+| `rowTitle` | String | `'link'` | Board look only: how the title column draws its title. `link` underlines the title (not its secondary line). `plain` draws it as 15px bold text without an underline over a 13px muted secondary line, as the PqTickets board does; the row stays clickable. The Nextcloud look ignores it. |
 | `hideHeader` | Boolean | `false` | Hide the column-header row (`<thead>`) — for compact dashboard list widgets that want a plain bordered-row list without column labels |
 | `pinnedCount` | Number | `0` | How many data columns are pinned to the start of the table. They, and the selection and icon columns, stay in view when the table scrolls sideways |
 | `fixedLayout` | Boolean | `false` | Switch to `table-layout: fixed` so each column's `width` is authoritative rather than a hint the browser may override from cell content. Long unbreakable values (a PHP FQCN, a UUID) then wrap inside their cell instead of widening the column or painting past it, and no single unsized column soaks up all remaining width. Size every column when using it — percentages summing to 100 are easiest to reason about |
+| `fitWidth` | Boolean | `false` | Fit the table to its container instead of growing past it: one column (a column's `grow: true`, else `title`, else `name`, else the first) takes the room that is left and ends in an ellipsis, and every other column keeps its content on one line, so trailing columns stay visible in a narrow tile. `CnWidgetObjectTable` turns it on |
 | `fillHeight` | Boolean | `false` | Fill the parent's height (a flex-column card / widget content area) so an optional `#footer` is pushed to the bottom instead of floating under a short list; the footer stays pinned via its sticky rule when the list overflows. No-op outside a height-constrained parent — opt-in |
 | `filterable` | Boolean | `false` | Show a filter button in every header whose column can filter: enum, boolean, text, number, date and reference columns backed by a schema property. A column opts out with `filterable: false`. Applying a filter emits `column-filter`; the host owns the state and passes it back as `activeFilters`. `CnIndexPage` turns it on by default. |
 | `activeFilters` | Object | `{}` | The active filter map, `{ paramKey: values[] }`: the same map the facet sidebar writes, so a header filter and a sidebar filter on one field show the same state. |

package/src/components/CnDataTable/CnDataTable.vue

@@ -4,6 +4,7 @@
 		data-testid="cn-object-list"
 		:class="{
 			'cn-table-container--board': isBoardLook,
+			'cn-table-container--title-plain': isBoardLook && rowTitle === 'plain',
 			'cn-table-container--scrollable': scrollable,
 			'cn-table-container--borderless': borderless,
 			'cn-table-container--fill': fillHeight,
@@ -96,7 +97,7 @@
 			:aria-label="isScrollable ? scrollRegionLabel : undefined">
 			<table
 				class="cn-data-table"
-				:class="{ 'cn-data-table--fixed': fixedLayout }"
+				:class="{ 'cn-data-table--fixed': fixedLayout, 'cn-data-table--fit': fitWidth }"
 				data-testid="cn-object-list-table">
 				<thead v-if="!hideHeader">
 					<tr>
@@ -128,6 +129,7 @@
 								col.sortable ? 'cn-table-header--sortable' : '',
 								col.class || '',
 								pinClass(leadingCount + colIndex),
+								isGrowColumn(col) ? 'cn-table-col--grow' : '',
 							]"
 							:style="{ ...(col.width ? { width: col.width } : {}), ...pinStyle(leadingCount + colIndex) }"
 							:aria-sort="ariaSortFor(col)"
@@ -256,7 +258,7 @@
 						<td
 							v-for="(col, colIndex) in effectiveColumns"
 							:key="col.key"
-							:class="[col.class || '', col.cellClass || '', cellClass ? cellClass(row, col) : '', pinClass(leadingCount + colIndex), colIndex === 0 ? 'cn-table-col--title' : '']"
+							:class="[col.class || '', col.cellClass || '', cellClass ? cellClass(row, col) : '', pinClass(leadingCount + colIndex), colIndex === 0 ? 'cn-table-col--title' : '', isGrowColumn(col) ? 'cn-table-col--grow' : '']"
 							:style="{ ...(col.width ? { maxWidth: col.width } : {}), ...pinStyle(leadingCount + colIndex) }"
 							@mouseenter="titleWhenClipped">
 							<!-- A row with a `rowClickRoute` is a real link: this anchor
@@ -499,6 +501,16 @@ function fillSecondaryTemplate(template, valueOf) {
  * </CnDataTable>
  * ```
  */
+
+/**
+ * Column keys that name an object's system dates in OpenRegister's `@self`
+ * block. A column may declare one as its key (`@self.created`); it renders as
+ * a date-time although the schema has no property behind it.
+ *
+ * @type {string[]}
+ */
+const SYSTEM_DATE_KEYS = ['@self.created', '@self.updated', '@self.published', '@self.depublished']
+
 export default {
 	name: 'CnDataTable',
 
@@ -761,6 +773,21 @@ export default {
 			default: '',
 		},
 
+		/**
+		 * How the board look draws the title column: `link` (the default) is
+		 * the 15px weight 600 underlined title of the DqZaken board; `plain` is
+		 * the 15px bold title without an underline and a 13px muted secondary
+		 * line, as the PqTickets and OcPublicaties boards draw it. The row stays
+		 * clickable either way. The Nextcloud look ignores it.
+		 *
+		 * @spec openspec/changes/screens-table-rows-parity/specs/index-list-board-look/spec.md#requirement-a-row-title-can-be-plain-text
+		 */
+		rowTitle: {
+			type: String,
+			default: 'link',
+			validator: (value) => ['link', 'plain'].includes(value),
+		},
+
 		/**
 		 * Drop the container's card chrome (border, radius, shadow) so the table
 		 * sits flush inside a parent that already provides a card (e.g. a
@@ -820,6 +847,23 @@ export default {
 			default: false,
 		},
 
+		/**
+		 * Fit the table to its container instead of letting it grow past it.
+		 * One column takes the room that is left and cuts its text with an
+		 * ellipsis (the full value stays in the tooltip); every other column
+		 * keeps its content on one line at its own width, so trailing columns
+		 * such as a date stay visible in a narrow tile. The column that grows
+		 * is the first with `grow: true`, else the one keyed `title` or `name`,
+		 * else the first column. CnWidgetObjectTable turns this on.
+		 *
+		 * @type {boolean}
+		 * @spec openspec/changes/narrow-object-table-widgets/specs/narrow-object-table-widgets/spec.md#requirement-a-narrow-object-table-keeps-its-trailing-columns-in-view
+		 */
+		fitWidth: {
+			type: Boolean,
+			default: false,
+		},
+
 		/**
 		 * Max number of rows to display. When the total exceeds it, only the first
 		 * `limit` render and the "View all" footer appears (with `viewAllRoute`).
@@ -1025,6 +1069,25 @@ export default {
 		},
 
 		/** @return {number} Leading cells before the data columns (selection, icon). */
+		/**
+		 * The key of the column that takes the spare width under `fitWidth`:
+		 * the first with `grow: true`, else `title` or `name`, else the first.
+		 *
+		 * @return {string|null} The column key, or null when not fitting.
+		 * @spec openspec/changes/narrow-object-table-widgets/specs/narrow-object-table-widgets/spec.md#requirement-a-narrow-object-table-keeps-its-trailing-columns-in-view
+		 */
+		growColumnKey() {
+			if (!this.fitWidth || this.effectiveColumns.length === 0) {
+				return null
+			}
+			const cols = this.effectiveColumns
+			const chosen = cols.find((c) => c && c.grow === true)
+				|| cols.find((c) => c && c.key === 'title')
+				|| cols.find((c) => c && c.key === 'name')
+				|| cols[0]
+			return chosen ? chosen.key : null
+		},
+
 		leadingCount() {
 			return (this.selectable ? 1 : 0) + (this.rowIcon ? 1 : 0)
 		},
@@ -1321,6 +1384,16 @@ export default {
 	},
 
 	methods: {
+		/**
+		 * Whether a column is the one that takes the spare width (`fitWidth`).
+		 *
+		 * @param {object} col The column.
+		 * @return {boolean}
+		 */
+		isGrowColumn(col) {
+			return this.growColumnKey !== null && !!col && col.key === this.growColumnKey
+		},
+
 		/**
 		 * Whether a row's record changed since the user last looked
 		 * (`@self.unread`). A row without the marker renders as it always did.
@@ -1651,11 +1724,17 @@ export default {
 		 * the schema property's own `colorMap` / `x-color-map`.
 		 *
 		 * @param {object} col Column definition.
+		 * @spec openspec/changes/screens-table-footer-and-system-dates-parity/specs/index-list-board-look/spec.md#requirement-a-system-date-can-be-a-column
 		 * @return {object} Property definition for CnCellRenderer.
 		 * @spec openspec/changes/screens-cell-pill-parity/specs/cell-pill-tones/spec.md#requirement-a-manifest-column-colours-its-enum-pills
 		 */
 		columnProperty(col) {
 			const base = this.getSchemaProperty(col.key)
+			// A system date (`@self.created`, `@self.updated`, ...) has no
+			// schema property behind it; it renders as a date-time.
+			if (Object.keys(base).length === 0 && SYSTEM_DATE_KEYS.includes(col.key) && !col.type && !col.format) {
+				return { type: 'string', format: 'date-time' }
+			}
 			const colorMap = col && col.colorMap && typeof col.colorMap === 'object' && !Array.isArray(col.colorMap) ? col.colorMap : null
 			if (col && (col.format || col.type || col.enum || colorMap)) {
 				return {

package/src/components/CnDetailWidgetHost/CnDetailWidgetHost.vue

@@ -244,7 +244,9 @@ import CnObjectFilesWidget from '../CnObjectFilesWidget/CnObjectFilesWidget.vue'
 import CnObjectGeoWidget from '../CnObjectGeoWidget/CnObjectGeoWidget.vue'
 import CnRelatedObjectsWidget from '../CnRelatedObjectsWidget/CnRelatedObjectsWidget.vue'
 import { useIntegrationRegistry } from '../../composables/useIntegrationRegistry.js'
+import { normalizeLook } from '../../composables/useLook.js'
 import { isAppInstalled } from '../../utils/appInstalled.js'
+import { isActivityWidget } from '../../utils/headerMeta.js'
 import { PANEL_ACTION_SINK } from '../../utils/panelActions.js'
 import {
 	isCardWidgetDef,
@@ -332,6 +334,11 @@ export default {
 			from: PANEL_ACTION_SINK,
 			default: null,
 		},
+
+		/** The app's look, provided by CnAppRoot or CnPageRenderer (`nextcloud` or `board`). */
+		cnLook: { default: 'nextcloud' },
+		/** The host's translate (CnAppRoot provides `cnTranslate`). */
+		cnTranslate: { default: () => (key) => key },
 	},
 
 	/**
@@ -780,7 +787,9 @@ export default {
 		integrationProps() {
 			return {
 				surface: this.surface,
-				title: this.widget?.title || '',
+				// Through the host's translate: an integration card (CnDetailCard)
+				// prints its title as given.
+				title: this.translateLabel(this.widget?.title || ''),
 				// A provider opting into `bareWidget` is being rendered where the
 				// tab strip already supplies the card and the title, so tell it to
 				// drop its own. Without this the panel gets a titled card inside
@@ -836,9 +845,46 @@ export default {
 					surface: this.surface,
 				})
 			}
+			// The board look: a self-titled card (an audit trail, a calendar)
+			// takes the manifest title, so the side column's History card says
+			// what the board says instead of the widget's own default.
+			const title = this.cardTitle
+			if (title) {
+				base.title = title
+			}
 			return { ...base, ...this.content }
 		},
 
+		/**
+		 * The title a self-titled renderer gets under the board look: the
+		 * manifest title through the host's translate, else History for the
+		 * activity widget. Empty outside the board look, in a tab panel, and
+		 * when `content.title` already names the card.
+		 *
+		 * @return {string} The title, or ''.
+		 * @spec openspec/changes/screens-detail-labels-parity/specs/detail-labels-board-look/spec.md#requirement-a-side-card-takes-its-manifest-title
+		 */
+		cardTitle() {
+			if (normalizeLook(this.cnLook) !== 'board' || this.isBare || !this.widget || this.isContentOnly || this.isCard) {
+				return ''
+			}
+			// Only a renderer that takes a `title` prop: on any other the value
+			// would land on its root element as a tooltip.
+			const declared = this.renderer && this.renderer.props
+			const takesTitle = Array.isArray(declared) ? declared.includes('title') : Boolean(declared && Object.hasOwn(declared, 'title'))
+			if (!takesTitle) {
+				return ''
+			}
+			if (typeof this.content.title === 'string' && this.content.title !== '') {
+				return ''
+			}
+			const title = widgetTitleOf(this.widget)
+			if (title) {
+				return this.translateLabel(title)
+			}
+			return isActivityWidget(this.widget) ? t('nextcloud-vue', 'History') : ''
+		},
+
 		/**
 		 * Whether the type declares itself a container (registry `container`).
 		 *
@@ -946,6 +992,20 @@ export default {
 	},
 
 	methods: {
+		/**
+		 * A manifest label through the host's translate; '' stays ''.
+		 *
+		 * @param {string} text The label as written in the manifest.
+		 * @return {string} The label in the user's language.
+		 * @spec openspec/changes/screens-detail-labels-parity/specs/detail-labels-board-look/spec.md#requirement-detail-labels-read-in-the-users-language
+		 */
+		translateLabel(text) {
+			if (typeof text !== 'string' || text === '') {
+				return ''
+			}
+			return typeof this.cnTranslate === 'function' ? this.cnTranslate(text) : text
+		},
+
 		/**
 		 * Re-key a call on the channel this host provides onto the one it holds.
 		 * A widget publishes `set(items)`; a host nested in this one speaks the