@conduction/nextcloud-vue 2.93.0 → 2.94.0

package/package.json

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

@@ -32,6 +32,8 @@
 			<template #icon>
 				<DotsHorizontal :size="20" />
 			</template>
+			<!-- @slot lead-items Items rendered at the very top of the menu, above Refresh: the tabs a board strip lists here instead of drawing them (CnTabsWidget). The caller owns any separator after them. -->
+			<slot name="lead-items" />
 			<!-- Stays open while refreshing; onRefreshClick closes the menu once the refresh settles. -->
 			<NcActionButton
 				v-if="showRefresh"
@@ -569,7 +571,7 @@ export default {
 			if (this.showRequestFeature) {
 				return true
 			}
-			if (this.hasPrimaryItems || this.$slots['primary-items']) {
+			if (this.hasPrimaryItems || this.$slots['primary-items'] || this.$slots['lead-items']) {
 				return true
 			}
 			return Boolean(this.$slots['action-items']) || Boolean(this.$slots && this.$slots['action-items'])

package/src/components/CnAdminSettingsShell/CnAdminSettingsShell.vue

@@ -139,7 +139,7 @@
 			<template #footer>
 				<!-- @slot footer Replaces the default support/SLA footer inside the version card. -->
 				<slot name="footer">
-					<div v-if="showSupport" class="cn-support-info">
+					<div v-if="showSupport && !supportAtEnd" class="cn-support-info">
 						<h4>{{ supportTitle }}</h4>
 						<p>
 							{{ supportLine }}
@@ -185,6 +185,24 @@
 		<!-- @slot default The app's own settings sections, rendered below the version card, or above it with `versionCardPosition: "end"`. With `tabs`, only while the first tab is open. -->
 		<slot v-if="!versionCardAtEnd && onFirstTab" />
 
+		<!-- `supportPosition: "end"`: the support lines as their own wide card,
+		     last on the page (board PqBeheer), not in the version card. -->
+		<CnSettingsSection
+			v-if="showSupport && supportAtEnd && onFirstTab"
+			class="cn-admin-settings-shell__support"
+			:name="supportTitle"
+			:wide="true"
+			data-testid="cn-admin-settings-support">
+			<p class="cn-admin-settings-shell__support-line">
+				{{ supportLine }}
+				<a :href="`mailto:${supportEmail}`">{{ supportEmail }}</a>
+			</p>
+			<p v-if="slaEmail" class="cn-admin-settings-shell__support-line">
+				{{ slaLine }}
+				<a :href="`mailto:${slaEmail}`">{{ slaEmail }}</a>
+			</p>
+		</CnSettingsSection>
+
 		<!-- First-time setup wizard, opened from the admin page (ADR-042). -->
 		<CnSetupWizard
 			v-if="showSetup && setupWizardOpen"
@@ -216,6 +234,7 @@ import { normalizeLook, useLook } from '../../composables/useLook.js'
 import { ensureTranslations } from '../../l10n/index.js'
 import { buildFeatureRequestUrl } from '../../utils/forge.js'
 import { prefixUrl } from '../../utils/headers.js'
+import { CnSettingsSection } from '../CnSettingsSection/index.js'
 import { CnTab, CnTabs } from '../CnTabs/index.js'
 import { CnVersionInfoCard } from '../CnVersionInfoCard/index.js'
 
@@ -327,6 +346,7 @@ export default {
 		BookOpenVariant,
 		NcSettingsSection,
 		CnCredentials,
+		CnSettingsSection,
 		CnVersionInfoCard,
 		CnSetupWizard,
 		CnTab,
@@ -616,6 +636,19 @@ export default {
 			default: true,
 		},
 
+		/**
+		 * Where the support lines go: `card`, in the version card's footer (the
+		 * default), or `end`, as their own wide card after everything else on
+		 * the first tab (board PqBeheer).
+		 *
+		 * @spec openspec/changes/admin-shell-support-end/specs/settings-board-look/spec.md#requirement-support-can-be-its-own-card-at-the-end
+		 */
+		supportPosition: {
+			type: String,
+			default: 'card',
+			validator: (value) => ['card', 'end'].includes(value),
+		},
+
 		/** Support contact email. */
 		supportEmail: {
 			type: String,
@@ -723,6 +756,11 @@ export default {
 			return this.versionCardPosition === 'end'
 		},
 
+		/** @return {boolean} Whether the support lines are their own card at the end. */
+		supportAtEnd() {
+			return this.supportPosition === 'end'
+		},
+
 		/**
 		 * The crumbs that have a label.
 		 *

package/src/components/CnCountdownWidget/CnCountdownWidget.vue

@@ -4,8 +4,10 @@
 -->
 
 <template>
-	<div class="cn-kpi-card cn-countdown-widget" :class="`cn-countdown-widget--${variant}`">
-		<div class="cn-kpi-card__icon cn-countdown-widget__icon" :style="iconCircleStyle">
+	<div
+		class="cn-kpi-card cn-countdown-widget"
+		:class="[`cn-countdown-widget--${variant}`, { 'cn-kpi-card--board cn-countdown-widget--board': isBoardLook }]">
+		<div v-if="!isBoardLook" class="cn-kpi-card__icon cn-countdown-widget__icon" :style="iconCircleStyle">
 			<CnWidgetIcon :name="resolvedIcon" :size="24" />
 		</div>
 
@@ -16,9 +18,35 @@
 			<div class="cn-kpi-card__value cn-countdown-widget__value" :style="{ color: valueColor }">
 				{{ headline }}
 			</div>
-			<div v-if="subLabel" class="cn-countdown-widget__sub">
+			<div v-if="subLabel" class="cn-countdown-widget__sub" data-testid="cn-countdown-sub">
 				{{ subLabel }}
 			</div>
+			<dl v-if="facts.length" class="cn-countdown-widget__facts" data-testid="cn-countdown-facts">
+				<template v-for="fact in facts" :key="fact.label">
+					<dt>{{ fact.label }}</dt>
+					<dd>{{ fact.value }}</dd>
+				</template>
+			</dl>
+			<span
+				v-if="progress !== null"
+				class="cn-countdown-widget__progress"
+				role="meter"
+				:aria-label="progressLabel"
+				:aria-valuenow="Math.round(progress)"
+				aria-valuemin="0"
+				aria-valuemax="100"
+				data-testid="cn-countdown-progress">
+				<span class="cn-countdown-widget__progress-fill" :style="{ width: `${progress}%` }" />
+			</span>
+			<button
+				v-if="actionLabel"
+				type="button"
+				class="cn-countdown-widget__action"
+				:class="{ 'cn-countdown-widget__action--primary': content.action && content.action.variant === 'primary' }"
+				data-testid="cn-countdown-action"
+				@click="runAction">
+				{{ actionLabel }}
+			</button>
 		</div>
 	</div>
 </template>
@@ -28,7 +56,10 @@ import { translate as t } from '@nextcloud/l10n'
 import { inject } from 'vue'
 import CnWidgetIcon from '../CnWidgetGrid/CnWidgetIcon.vue'
 import { getByPath } from '../../composables/useEndpointSource.js'
+import { normalizeLook } from '../../composables/useLook.js'
+import { dispatchAction } from '../../utils/actionsDispatcher.js'
 import { resolveObjectTokenContext } from '../../utils/detailObjectContext.js'
+import { resolveDeepTokens } from '../../utils/resolveFilterTokens.js'
 import { userLocale } from '../../utils/userLocale.js'
 
 const MS_PER_DAY = 24 * 60 * 60 * 1000
@@ -106,8 +137,15 @@ export default {
 		 * - `showDate` — render the absolute date underneath (default true).
 		 * - `settledField` — property on the record that is truthy once the work is done; the tile then reads `settledLabel` and never counts overdue.
 		 * - `settledLabel` — the headline of a settled record, run through the host's translate function (default "Closed").
+		 * - `daysLabel` — `{ one, other }` with `{count}`, the headline while days remain ("27 dagen").
+		 * - `caption` — the line under the headline instead of the date, with `{date}` (the long date) and `{count}` (days left).
+		 * - `startField` — property holding the start of the term; a bar then shows how much of it has passed.
+		 * - `action` — one manifest action under the card (`{ label, type, variant?, ... }`, the headerActions shape; `variant: "primary"` draws it in the primary tint).
+		 * - `emptyLabel` — the headline while the date is unset (default a dash).
+		 * - `emptyCaption` — the line under it while the date is unset, with `{date}` read from `emptyDateField`.
+		 * - `facts` — `[{ label, field }]` rows under the caption.
 		 *
-		 * @type {{ field?: string, label?: string, icon?: string, thresholds?: {warn?: number, danger?: number}, showDate?: boolean, settledField?: string, settledLabel?: string }}
+		 * @type {{ field?: string, label?: string, icon?: string, thresholds?: {warn?: number, danger?: number}, showDate?: boolean, settledField?: string, settledLabel?: string, daysLabel?: {one?: string, other?: string}, caption?: string, startField?: string, action?: object, emptyLabel?: string, emptyCaption?: string, emptyDateField?: string, facts?: Array<{label: string, field: string}> }}
 		 */
 		content: {
 			type: Object,
@@ -131,6 +169,8 @@ export default {
 			cnObjectContextInjected: inject('cnObjectContext', null),
 			cnDetailObjectContextInjected: inject('cnDetailObjectContext', null),
 			cnTranslate: inject('cnTranslate', null),
+			cnLook: inject('cnLook', 'nextcloud'),
+			cnDispatchAction: inject('cnDispatchAction', null),
 		}
 	},
 
@@ -222,7 +262,7 @@ export default {
 			}
 			const days = this.daysRemaining
 			if (days === null) {
-				return '—'
+				return this.content?.emptyLabel ? this.translate(this.content.emptyLabel) : '—'
 			}
 			if (days < 0) {
 				const overdue = Math.abs(days)
@@ -233,12 +273,89 @@ export default {
 			if (days === 0) {
 				return t('nextcloud-vue', 'Due today')
 			}
+			const labels = this.content?.daysLabel
+			if (labels && typeof labels === 'object' && (labels.one || labels.other)) {
+				const template = this.translate((days === 1 ? labels.one : labels.other) || labels.other || labels.one)
+				return template.replace(/\{count\}/g, String(days))
+			}
 			if (days === 1) {
 				return t('nextcloud-vue', '1 day left')
 			}
 			return t('nextcloud-vue', '{count} days left', { count: days })
 		},
 
+		/**
+		 * Whether the app takes the board look: no icon circle.
+		 *
+		 * @return {boolean} True in the board look.
+		 * @spec openspec/changes/countdown-board-look/specs/countdown-board-look/spec.md#requirement-the-countdown-draws-the-boards-term-card
+		 */
+		isBoardLook() {
+			return normalizeLook(this.cnLook) === 'board'
+		},
+
+		/**
+		 * How much of the term has passed, from `startField` to the date, in
+		 * whole days and as a percentage (0 to 100), or null without a usable
+		 * start.
+		 *
+		 * @return {number|null} The share passed.
+		 * @spec openspec/changes/countdown-board-look/specs/countdown-board-look/spec.md#requirement-the-countdown-draws-the-boards-term-card
+		 */
+		progress() {
+			const field = this.content?.startField
+			if (!field || !this.record || !this.targetDate || this.isSettled) {
+				return null
+			}
+			const raw = getByPath(this.record, field)
+			const start = raw === null || raw === undefined || raw === '' ? null : new Date(raw)
+			if (!start || Number.isNaN(start.getTime())) {
+				return null
+			}
+			const startOfDay = (d) => Date.UTC(d.getFullYear(), d.getMonth(), d.getDate())
+			const span = startOfDay(this.targetDate) - startOfDay(start)
+			if (span <= 0) {
+				return null
+			}
+			return Math.min(100, Math.max(0, ((startOfDay(new Date()) - startOfDay(start)) / span) * 100))
+		},
+
+		/**
+		 * The `facts` rows under the caption (`[{ label, field }]`), with
+		 * their values read off the record; a row without a value is left out.
+		 *
+		 * @return {Array<{label: string, value: string}>} The rows.
+		 * @spec openspec/changes/countdown-board-look/specs/countdown-board-look/spec.md#requirement-the-countdown-draws-the-boards-term-card
+		 */
+		facts() {
+			const rows = Array.isArray(this.content?.facts) ? this.content.facts : []
+			return rows
+				.filter((row) => row && typeof row.label === 'string' && typeof row.field === 'string')
+				.map((row) => {
+					const value = this.record ? getByPath(this.record, row.field) : null
+					return { label: this.translate(row.label), value: value === null || value === undefined ? '' : this.translate(String(value)) }
+				})
+				.filter((row) => row.value !== '')
+		},
+
+		/** @return {string} The accessible name of the progress bar. */
+		progressLabel() {
+			return t('nextcloud-vue', 'Time passed')
+		},
+
+		/**
+		 * The label of `content.action`, translated, or ''.
+		 *
+		 * @return {string} The label.
+		 * @spec openspec/changes/countdown-board-look/specs/countdown-board-look/spec.md#requirement-the-countdown-draws-the-boards-term-card
+		 */
+		actionLabel() {
+			const action = this.content?.action
+			return action && typeof action === 'object' && typeof action.label === 'string' && action.label !== ''
+				? this.translate(action.label)
+				: ''
+		},
+
 		/**
 		 * The absolute date under the headline, so the tile answers "how long"
 		 * and "when" at once.
@@ -246,10 +363,21 @@ export default {
 		 * @return {string} The formatted date, or ''.
 		 */
 		subLabel() {
+			if (!this.targetDate && typeof this.content?.emptyCaption === 'string' && this.content.emptyCaption !== '') {
+				const raw = this.content.emptyDateField && this.record ? getByPath(this.record, this.content.emptyDateField) : null
+				const when = raw ? new Date(raw) : null
+				const date = when && !Number.isNaN(when.getTime()) ? when.toLocaleDateString(userLocale(), { day: 'numeric', month: 'long', year: 'numeric' }) : ''
+				return this.translate(this.content.emptyCaption).replace(/\{date\}/g, date)
+			}
 			if (!this.targetDate || this.content?.showDate === false) {
 				return ''
 			}
-			return this.targetDate.toLocaleDateString(userLocale(), { day: 'numeric', month: 'long', year: 'numeric' })
+			const date = this.targetDate.toLocaleDateString(userLocale(), { day: 'numeric', month: 'long', year: 'numeric' })
+			const caption = this.content?.caption
+			if (typeof caption === 'string' && caption !== '') {
+				return this.translate(caption).replace(/\{date\}/g, date).replace(/\{count\}/g, String(this.daysRemaining ?? ''))
+			}
+			return date
 		},
 
 		/**
@@ -278,6 +406,9 @@ export default {
 
 		/** @return {string} The value colour for the current band. */
 		valueColor() {
+			if (this.isBoardLook && this.variant === 'default') {
+				return 'var(--color-main-text)'
+			}
 			return VARIANT_COLORS[this.variant] || VARIANT_COLORS.default
 		},
 
@@ -296,6 +427,39 @@ export default {
 			return { color: this.valueColor }
 		},
 	},
+
+	methods: {
+		/**
+		 * The host's translate, or the text unchanged.
+		 *
+		 * @param {string} text The text.
+		 * @return {string} The translation.
+		 */
+		translate(text) {
+			return typeof this.cnTranslate === 'function' ? this.cnTranslate(text) : text
+		},
+
+		/**
+		 * Dispatch `content.action` with the record's tokens resolved, through
+		 * the page's dispatcher when there is one.
+		 *
+		 * @return {unknown}
+		 * @spec openspec/changes/countdown-board-look/specs/countdown-board-look/spec.md#requirement-the-countdown-draws-the-boards-term-card
+		 */
+		runAction() {
+			const action = this.content?.action
+			if (!action || typeof action !== 'object') {
+				return undefined
+			}
+			const ctx = resolveObjectTokenContext(this.cnObjectContextInjected, this.cnDetailObjectContextInjected) || {}
+			const tokenCtx = { ...ctx, object: this.record || ctx.object || null, objectId: this.record?.id ?? ctx.objectId ?? null }
+			const resolved = resolveDeepTokens(action, tokenCtx)
+			if (typeof this.cnDispatchAction === 'function') {
+				return this.cnDispatchAction(resolved)
+			}
+			return dispatchAction(resolved, { router: this.$router || null, tokenCtx })
+		},
+	},
 }
 </script>
 
@@ -304,6 +468,58 @@ export default {
 	white-space: nowrap;
 }
 
+.cn-countdown-widget__progress {
+	background: var(--color-border);
+	border-radius: 3px;
+	display: block;
+	height: 6px;
+	margin-block-start: 10px;
+	overflow: hidden;
+}
+
+.cn-countdown-widget__progress-fill {
+	background: var(--color-primary-element);
+	display: block;
+	height: 100%;
+}
+
+.cn-countdown-widget__action {
+	align-self: flex-start;
+	background: var(--color-background-dark);
+	border: 0;
+	border-radius: var(--border-radius-pill, 17px);
+	color: var(--color-main-text);
+	font-weight: 600;
+	margin-block-start: 10px;
+	min-height: 34px;
+	padding: 0 12px;
+}
+
+.cn-countdown-widget__action--primary {
+	background: var(--color-primary-element-light);
+	color: var(--color-primary-element-light-text);
+}
+
+.cn-countdown-widget__facts {
+	display: grid;
+	gap: 8px 16px;
+	grid-template-columns: max-content 1fr;
+	margin: 10px 0 0;
+}
+
+.cn-countdown-widget__facts dt {
+	color: var(--color-text-maxcontrast);
+}
+
+.cn-countdown-widget__facts dd {
+	margin: 0;
+}
+
+.cn-countdown-widget__action:hover,
+.cn-countdown-widget__action:focus-visible {
+	background: var(--color-background-hover);
+}
+
 .cn-countdown-widget__sub {
 	color: var(--color-text-maxcontrast);
 	font-size: 0.85em;

package/src/components/CnDashboardPage/CnDashboardPage.vue

@@ -34,7 +34,29 @@
 					<!-- @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="subtitleText" class="cn-dashboard-page__description" data-testid="cn-dashboard-page-subtitle">
+				<CnHeaderTrail
+					:breadcrumb="breadcrumb"
+					:current="title ? resolvedTitle : ''"
+					:meta="headerMeta ? effectiveTranslate(headerMeta) : ''" />
+				<!-- `dateRange.placement: "description"`: the segmented period
+				     group ends the description line ("Week 41 · alle teams ·
+				     [Deze week | Dit kwartaal | Dit jaar]"). -->
+				<div
+					v-if="datePeriodInDescription"
+					class="cn-dashboard-page__description cn-dashboard-page__description--with-period"
+					data-testid="cn-dashboard-page-subtitle">
+					<span v-if="subtitleText">{{ subtitleText }}</span>
+					<span v-if="subtitleText" aria-hidden="true">&middot;</span>
+					<CnSegmentedControl
+						size="compact"
+						mode="toggle"
+						:options="segmentedOptions"
+						:modelValue="segmentedValue"
+						:ariaLabel="datePeriodLabel"
+						data-testid="cn-dashboard-page-date-segmented"
+						@update:modelValue="onSegmentPick" />
+				</div>
+				<p v-else-if="subtitleText" class="cn-dashboard-page__description" data-testid="cn-dashboard-page-subtitle">
 					{{ subtitleText }}
 				</p>
 			</div>
@@ -185,7 +207,7 @@
 		     handling, persistence, and event emission lives in
 		     `onDateRangeChange`. -->
 		<div
-			v-if="showHeaderDateRange"
+			v-if="showHeaderDateRange && !datePeriodInDescription"
 			class="cn-dashboard-page__date-range"
 			:class="{
 				'cn-dashboard-page__date-range--pills': dateRangeControl === 'pills',
@@ -436,6 +458,7 @@
 					v-else
 					:title="getWidgetTitle(item)"
 					:eyebrow="getWidgetEyebrow(item)"
+					:subtitle="getWidgetSubtitle(item)"
 					:showTitle="false"
 					:showRefresh="false">
 					<div class="cn-dashboard-page__unknown">
@@ -498,6 +521,7 @@
 					v-if="missingRequiredApp(item)"
 					:title="getWidgetTitle(item)"
 					:eyebrow="getWidgetEyebrow(item)"
+					:subtitle="getWidgetSubtitle(item)"
 					:showTitle="widgetShowTitle(item)">
 					<!-- Compact on purpose: a two-row tile is about 150px, less
 					     a title row. NcEmptyContent's 64px icon, 20px name,
@@ -537,6 +561,7 @@
 						:widgetId="item.widgetId"
 						:title="getWidgetTitle(item)"
 						:eyebrow="getWidgetEyebrow(item)"
+						:subtitle="getWidgetSubtitle(item)"
 						:iconUrl="getWidgetIconUrl(item)"
 						:iconClass="getWidgetIconClass(item)"
 						:showTitle="widgetShowTitle(item)"
@@ -619,6 +644,7 @@
 						:class="{ 'cn-dashboard-page__chart-fit': isChartFitted(item) }"
 						:title="getWidgetTitle(item)"
 						:eyebrow="getWidgetEyebrow(item)"
+						:subtitle="getWidgetSubtitle(item)"
 						:iconUrl="getWidgetIconUrl(item)"
 						:iconClass="getWidgetIconClass(item)"
 						:showTitle="widgetShowTitle(item)"
@@ -698,6 +724,7 @@
 						:widgetId="item.widgetId"
 						:title="getWidgetTitle(item)"
 						:eyebrow="getWidgetEyebrow(item)"
+						:subtitle="getWidgetSubtitle(item)"
 						:iconUrl="getWidgetIconUrl(item)"
 						:iconClass="getWidgetIconClass(item)"
 						:showTitle="widgetShowTitle(item)"
@@ -726,6 +753,7 @@
 						:widgetId="item.widgetId"
 						:title="getWidgetTitle(item)"
 						:eyebrow="getWidgetEyebrow(item)"
+						:subtitle="getWidgetSubtitle(item)"
 						:iconUrl="getWidgetIconUrl(item)"
 						:iconClass="getWidgetIconClass(item)"
 						:showTitle="widgetShowTitle(item)"
@@ -766,6 +794,7 @@
 						:widgetId="item.widgetId"
 						:title="getWidgetTitle(item)"
 						:eyebrow="getWidgetEyebrow(item)"
+						:subtitle="getWidgetSubtitle(item)"
 						:iconUrl="getWidgetIconUrl(item)"
 						:iconClass="getWidgetIconClass(item)"
 						:showTitle="widgetShowTitle(item)"
@@ -792,6 +821,7 @@
 						:widgetId="item.widgetId"
 						:title="getWidgetTitle(item)"
 						:eyebrow="getWidgetEyebrow(item)"
+						:subtitle="getWidgetSubtitle(item)"
 						:showTitle="widgetShowTitle(item)"
 						:showActions="widgetShowActions(item)"
 						:showRefresh="getWidgetShowRefresh(item)"
@@ -893,6 +923,7 @@
 					v-else
 					:title="getWidgetTitle(item)"
 					:eyebrow="getWidgetEyebrow(item)"
+					:subtitle="getWidgetSubtitle(item)"
 					:showTitle="widgetShowTitle(item)"
 					:showRefresh="false">
 					<div class="cn-dashboard-page__unknown">
@@ -972,6 +1003,7 @@ import CnDashboardGrid from '../CnDashboardGrid/CnDashboardGrid.vue'
 import CnDateRangePicker, { DEFAULT_DATE_RANGE_PRESETS, resolvePresetWindow, translatePresetLabel } from '../CnDateRangePicker/CnDateRangePicker.vue'
 import CnEmptyContent from '../CnEmptyContent/CnEmptyContent.vue'
 import CnKpiGrid from '../CnKpiGrid/CnKpiGrid.vue'
+import CnHeaderTrail from '../CnPageHeader/CnHeaderTrail.vue'
 import CnSegmentedControl from '../CnSegmentedControl/CnSegmentedControl.vue'
 import CnStatsBlockWidget from '../CnStatsBlockWidget/CnStatsBlockWidget.vue'
 import CnTileWidget from '../CnTileWidget/CnTileWidget.vue'
@@ -1115,6 +1147,7 @@ export default {
 	name: 'CnDashboardPage',
 
 	components: {
+		CnHeaderTrail,
 		NcActions,
 		NcActionButton,
 		NcActionInput,
@@ -1214,6 +1247,30 @@ export default {
 			default: '',
 		},
 
+		/**
+		 * A breadcrumb under the title (manifest `config.breadcrumb`): one
+		 * crumb `{ label, route?, params?, href?, icon?, separator? }` or a
+		 * list; the title follows as the current crumb. Drawn as the detail
+		 * header's breadcrumb row. Null (the default) draws none.
+		 *
+		 * @type {object|Array<object>|null}
+		 * @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
+		 */
+		breadcrumb: {
+			type: [Object, Array],
+			default: null,
+		},
+
+		/**
+		 * A note after the breadcrumb and a middle dot (manifest `config.headerMeta`).
+		 *
+		 * @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
+		 */
+		headerMeta: {
+			type: String,
+			default: '',
+		},
+
 		/** Page description (shown below title) */
 		description: {
 			type: String,
@@ -2261,6 +2318,20 @@ export default {
 			return this.dateRangeEnabled && this.dateRange.showHeaderPicker !== false
 		},
 
+		/**
+		 * Whether the segmented period group sits at the end of the
+		 * description line (`dateRange.placement: "description"`) instead of
+		 * in a row of its own. Only for the segmented control without a
+		 * custom range, whose from/to popover keeps the row of its own.
+		 *
+		 * @return {boolean}
+		 * @spec openspec/changes/page-header-breadcrumb/specs/page-header/spec.md#requirement-a-dashboard-can-show-its-period-on-the-description-line
+		 */
+		datePeriodInDescription() {
+			return this.showHeaderDateRange && this.dateRangeControl === 'segmented'
+				&& this.dateRange.placement === 'description' && !this.hasCustomPreset
+		},
+
 		/**
 		 * The preset list passed to the picker. Falls back to the
 		 * `DEFAULT_DATE_RANGE_PRESETS` constant when the consumer
@@ -2972,6 +3043,7 @@ export default {
 				widgetId: item.widgetId,
 				title: this.getWidgetTitle(item),
 				eyebrow: this.getWidgetEyebrow(item),
+				subtitle: this.getWidgetSubtitle(item),
 				showTitle: this.widgetShowTitle(item),
 				showActions: this.widgetShowActions(item),
 				showRefresh: this.getWidgetShowRefresh(item),
@@ -4090,6 +4162,20 @@ export default {
 			this.showWidgetConfig = false
 		},
 
+		/**
+		 * The line under a widget's title (`subtitle` on the widget
+		 * definition), translated; empty when it carries none.
+		 *
+		 * @param {object} item Layout item.
+		 * @return {string}
+		 * @spec openspec/changes/page-header-breadcrumb/specs/page-header/spec.md#requirement-a-dashboard-widget-card-can-carry-a-line-under-its-title
+		 */
+		getWidgetSubtitle(item) {
+			const def = this.getWidgetDef(item.widgetId)
+			const subtitle = def && typeof def.subtitle === 'string' ? def.subtitle : ''
+			return subtitle ? this.effectiveTranslate(subtitle) : ''
+		},
+
 		/**
 		 * The line above a widget's title (`eyebrow` on the widget
 		 * definition: "Saldo per week" above "Prognose 13 weken"), through the
@@ -4903,6 +4989,14 @@ export default {
 	margin-bottom: 16px;
 }
 
+/* The period group at the end of the description line. */
+.cn-dashboard-page__description--with-period {
+	align-items: center;
+	display: flex;
+	flex-wrap: wrap;
+	gap: 8px;
+}
+
 .cn-dashboard-page__date-segmented {
 	display: flex;
 	align-items: center;

package/src/components/CnDataTable/CnDataTable.md

@@ -198,6 +198,7 @@ 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) |
+| `showUnread` | Boolean | `true` | Draw an unread record (`@self.unread`) in bold with the unread dot. Off, every row reads alike. CnIndexPage turns it off under the board look unless the page offers the Unread lens. |
 | `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 |