@conduction/nextcloud-vue 2.56.0-beta.18 → 2.56.0-beta.19

package/src/components/CnDashboardGrid/CnDashboardGrid.vue

@@ -31,6 +31,7 @@
 				v-for="(item, index) in layout"
 				:key="resolveItemKey(item)"
 				class="grid-stack-item"
+				:class="{ 'cn-dashboard-grid__item--fit': sizeToContentAttr(item) !== undefined }"
 				role="group"
 				:aria-label="resolveItemLabel(item, index)"
 				:aria-describedby="itemDescribedBy"
@@ -255,6 +256,19 @@ export default {
 			type: Boolean,
 			default: true,
 		},
+
+		/**
+		 * GridStack's `float`. True (the default) keeps every item on the row
+		 * it was placed on, with empty rows above it if need be. False packs
+		 * items upward, so a size-to-content cell that shrinks, or a widget
+		 * that is not shown, closes its gap instead of leaving a band.
+		 *
+		 * @spec openspec/changes/zuiddrecht-pixel-gaps-3/specs/zuiddrecht-pixel-gaps-3/spec.md#requirement-a-dashboard-closes-the-gap-a-shrinking-or-hidden-widget-leaves
+		 */
+		float: {
+			type: Boolean,
+			default: true,
+		},
 	},
 
 	emits: [
@@ -278,6 +292,8 @@ export default {
 		return {
 			grid: null,
 			contentObserver: null,
+			/** True while the grid moves an item to where the layout put it. */
+			applyingLayout: false,
 			domId: `cn-dashboard-grid-${++domIdCounter}`,
 			/** Text currently held in the polite live region. */
 			announcement: '',
@@ -485,7 +501,7 @@ export default {
 				column: this.columns,
 				cellHeight: this.cellHeight,
 				margin: this.margin,
-				float: true,
+				float: this.float,
 				animate: true,
 				disableDrag: !this.editable,
 				disableResize: !this.editable,
@@ -558,6 +574,10 @@ export default {
 			// switched off as the grid narrows, and back on as it widens.
 			this.syncInteractivity()
 
+			if (this.applyingLayout) {
+				return
+			}
+
 			// GridStack fires `change` for its own responsive rescale too, and at a
 			// 12 → 1 breakpoint every item reads `gridX: 0, gridWidth: 1`. Emitting
 			// that has the host persist the reflow AS the authored layout, which
@@ -957,7 +977,29 @@ export default {
 					const node = this.grid.engine.nodes.find((n) => String(n.id) === String(item.id))
 					if (!node) {
 						this.grid.makeWidget(el)
-					} else if (node.el !== el) {
+					} else if (node.el === el) {
+						// The layout MOVED an item the grid already tracks: the
+						// page re-compacts its display layout when a widget's
+						// condition hides it, and the item below was given a new
+						// gridY that never reached GridStack, so a band stayed
+						// where the hidden widget had been. A drag reports the
+						// grid's own position back, which matches and does
+						// nothing here.
+						const x = item.gridX ?? node.x
+						const y = item.gridY ?? node.y
+						if (x !== node.x || y !== node.y) {
+							// The layout said where it goes; GridStack's `change`
+							// for it is not a user's arrangement and is not
+							// reported back (it would write the display-only
+							// compaction into the authored layout).
+							this.applyingLayout = true
+							try {
+								this.grid.update(el, { x, y })
+							} finally {
+								this.applyingLayout = false
+							}
+						}
+					} else {
 						// Drop the stale node without touching its detached DOM,
 						// then adopt the new element so GridStack sizes/places it.
 						this.grid.removeWidget(node.el, false, false)
@@ -1016,6 +1058,16 @@ export default {
 	border-radius: var(--border-radius-container-large, 16px);
 }
 
+/* A size-to-content cell (`sizeToContent`) is measured by GridStack from the
+   content's first child, and a widget wrapper there filled the cell
+   (`height: 100%`), so the measure returned the cell's own height and the
+   cell never shrank: "Waiting for me" stayed a tall card around one row. In
+   such a cell the child takes its own height. A cell without the key keeps
+   the filling child. */
+.cn-dashboard-grid__item--fit > :deep(.grid-stack-item-content > *) {
+	height: auto;
+}
+
 :deep(.grid-stack-item-content) {
 	background: var(--color-main-background);
 	border: none;

package/src/components/CnDashboardPage/CnDashboardPage.vue

@@ -305,6 +305,7 @@
 			:columns="columns"
 			:cellHeight="cellHeight"
 			:margin="gridMargin"
+			:float="gridFloat"
 			@layoutChange="section.view ? onViewLayoutChange($event) : onLayoutChange($event)">
 			<template #widget="{ item }">
 				<!-- In-app edit overlay (ADR-041): a single launchpad-style
@@ -1030,6 +1031,19 @@ export default {
 			default: true,
 		},
 
+		/**
+		 * GridStack's `float` for this dashboard (manifest
+		 * `config.gridFloat`). True (the default) keeps every widget on its
+		 * row. False packs widgets upward, so a size-to-content widget that
+		 * shrinks closes the gap under it instead of leaving an empty band.
+		 *
+		 * @spec openspec/changes/zuiddrecht-pixel-gaps-3/specs/zuiddrecht-pixel-gaps-3/spec.md#requirement-a-dashboard-closes-the-gap-a-shrinking-or-hidden-widget-leaves
+		 */
+		gridFloat: {
+			type: Boolean,
+			default: true,
+		},
+
 		/**
 		 * Widget definitions array. Each widget defines metadata for rendering.
 		 *
@@ -3602,6 +3616,12 @@ export default {
 
 		getWidgetButtons(item) {
 			const def = this.getWidgetDef(item.widgetId)
+			// `showButtons: false` on the placement or the definition drops
+			// the footer links ("More events"), for a placement whose card
+			// says enough without them (zuiddrecht-pixel-gaps-3).
+			if (item?.showButtons === false || def?.showButtons === false) {
+				return []
+			}
 			return def?.buttons || []
 		},
 
@@ -3905,11 +3925,16 @@ export default {
 			// library's own defaults, so a manifest need not set them — but a
 			// manifest that DOES set them must reach the component, or the
 			// declaration is a silent no-op that reads like configuration.
-			for (const key of ['countLabel', 'variant', 'showZeroCount', 'horizontal', 'vertical', 'filled', 'route', 'iconClass', 'format']) {
+			for (const key of ['countLabel', 'variant', 'showZeroCount', 'horizontal', 'vertical', 'filled', 'route', 'iconClass', 'format', 'layout']) {
 				if (props[key] !== undefined) {
 					out[key] = props[key]
 				}
 			}
+			// `content.layout: "stacked"`, the key a stat tile takes, works on
+			// a stats block too (zuiddrecht-pixel-gaps-3).
+			if (out.layout === undefined && typeof content.layout === 'string') {
+				out.layout = content.layout
+			}
 			// `countLabel` is the unit beside the number ("0 cases", "0 tasks").
 			// It is manifest-authored prose and was being forwarded raw, so a
 			// Dutch account read "0 cases" beside a translated widget title.

package/src/components/CnDataTable/CnDataTable.vue

@@ -361,6 +361,40 @@ import { CnLockIndicator } from '../CnLockIndicator/index.js'
 // consuming app does not pull in the library's global css/index.css.
 import '../../css/table.css'
 
+/**
+ * Fill a `secondary` template such as `"{identifier} · {requester}"`.
+ *
+ * A field without a value takes its separator with it: the text between two
+ * fields belongs to the field after it, so an empty requester leaves
+ * "2026-0002", not "2026-0002 ·", and an empty first field does not leave a
+ * leading separator either. Text before the first field and after the last
+ * one is kept as written. A template whose fields all have values fills
+ * exactly as before.
+ *
+ * @spec openspec/changes/zuiddrecht-pixel-gaps-3/specs/zuiddrecht-pixel-gaps-3/spec.md#requirement-an-empty-field-takes-its-separator-with-it
+ * @param {string} template The template, with `{field}` placeholders.
+ * @param {(key: string) => string} valueOf The text of a field ('' when empty).
+ * @return {string} The filled template.
+ */
+function fillSecondaryTemplate(template, valueOf) {
+	// split() with a capture group alternates literal, field, literal, …
+	const parts = template.split(/\{([^}]+)\}/)
+	const lead = parts[0]
+	const tail = parts[parts.length - 1]
+	let body = ''
+	for (let i = 1; i < parts.length; i += 2) {
+		const value = valueOf(parts[i].trim())
+		if (value === '') {
+			continue
+		}
+		// The literal before this field: the separator, unless nothing has
+		// been written yet (then there is nothing to separate from).
+		const separator = i === 1 ? '' : parts[i - 1]
+		body += (body === '' ? '' : separator) + value
+	}
+	return lead + body + tail
+}
+
 /**
  * CnDataTable — Generic sortable data table for list views.
  *
@@ -1451,7 +1485,7 @@ export default {
 			}
 			const asText = (v) => (v === null || v === undefined ? '' : String(v))
 			if (spec.includes('{')) {
-				const filled = spec.replace(/\{([^}]+)\}/g, (_, key) => asText(this.getCellValue(row, key.trim())))
+				const filled = fillSecondaryTemplate(spec, (key) => asText(this.getCellValue(row, key)))
 				// A template whose every field is empty leaves only separators:
 				// nothing worth a line.
 				return /[\p{L}\p{N}]/u.test(filled) ? filled.trim() : ''

package/src/components/CnDetailPage/CnDetailPage.md

@@ -444,3 +444,5 @@ When the schema-driven fetch answers 404 the page shows a not-found state whose
 ### Header card and header widget
 
 `headerCard` (default `false`) draws the header as a bordered card. `headerWidget` (default `''`) names a widget in `widgets` to render inside the header under the title, without a card of its own and out of the body grid: the stages bars of the board's case card.
+
+`showWidgetActions` (Boolean, default `true`): `false` (manifest `config.showWidgetActions: false`) drops the overflow Actions menu from the cards of the body grid and the side column, unless a widget definition sets `showActions: true`.

package/src/components/CnDetailPage/CnDetailPage.vue

@@ -48,6 +48,7 @@
 			class="cn-detail-page__breadcrumbs"
 			:crumbs="breadcrumbCrumbs"
 			:rootText="breadcrumbCrumbs[0].icon === undefined"
+			:separator="breadcrumbSeparator"
 			data-testid="cn-detail-page-breadcrumbs" />
 		<!-- Header -->
 		<div
@@ -749,6 +750,7 @@
 								:widget="findWidget(item)"
 								chrome="card"
 								:showCardTitle="showCardTitle(item)"
+								:showActions="showWidgetActions"
 								:objectId="objectId"
 								:object="currentObject"
 								:objectType="resolvedObjectType"
@@ -959,6 +961,7 @@
 						:widget="widget"
 						chrome="card"
 						:showCardTitle="true"
+						:showActions="showWidgetActions"
 						:objectId="objectId"
 						:object="currentObject"
 						:objectType="resolvedObjectType"
@@ -2235,18 +2238,38 @@ export default {
 		 * belongs to; the record's display name follows as the current
 		 * crumb. `label` goes through the host translate function and shows
 		 * as text; `icon` (an MDI name, e.g. `Home`) draws that icon instead,
-		 * with the label as its accessible name. Null (the default) draws no
+		 * with the label as its accessible name. `currentField` names a field
+		 * of the record (a dotted path, e.g. `identifier`) whose value is the
+		 * current crumb instead of the display name; an empty value falls back
+		 * to the display name. `separator` draws that text (e.g. `/`) between
+		 * the crumbs instead of the chevron. Null (the default) draws no
 		 * trail.
 		 *
 		 * @spec openspec/changes/zuiddrecht-pixel-gaps/specs/zuiddrecht-pixel-gaps/spec.md#requirement-a-detail-page-drops-its-eyebrow-and-shows-a-breadcrumb
 		 * @spec openspec/changes/zuiddrecht-pixel-gaps-2/specs/zuiddrecht-pixel-gaps-2/spec.md#requirement-a-declared-breadcrumb-label-shows-as-text
-		 * @type {{label: string, route?: string, params?: object, href?: string, icon?: string}|null}
+		 * @spec openspec/changes/zuiddrecht-pixel-gaps-3/specs/zuiddrecht-pixel-gaps-3/spec.md#requirement-a-breadcrumb-can-name-the-record-by-a-field-and-use-a-text-separator
+		 * @type {{label: string, route?: string, params?: object, href?: string, icon?: string, currentField?: string, separator?: string}|null}
 		 */
 		breadcrumb: {
 			type: Object,
 			default: null,
 		},
 
+		/**
+		 * Whether the record's widget cards (the body grid and the side
+		 * column) keep their overflow Actions menu when their definition does
+		 * not say (`showActions`). `false` (manifest
+		 * `config.showWidgetActions: false`) drops it, as on a dashboard; a
+		 * widget with `showActions: true` keeps its menu. A card that offers
+		 * an Add action keeps the menu that holds it. True by default.
+		 *
+		 * @spec openspec/changes/zuiddrecht-pixel-gaps-3/specs/zuiddrecht-pixel-gaps-3/spec.md#requirement-a-detail-page-can-drop-the-widget-actions-menu
+		 */
+		showWidgetActions: {
+			type: Boolean,
+			default: true,
+		},
+
 		/**
 		 * A column of cards beside the body (manifest `config.sideColumn`),
 		 * for the record's facts: deadline, requester, handler, links. Each
@@ -3438,7 +3461,38 @@ export default {
 			} else if (crumb.href) {
 				first.href = crumb.href
 			}
-			return [first, { label: this.displayTitle }]
+			return [first, { label: this.breadcrumbCurrentLabel }]
+		},
+
+		/**
+		 * The current crumb: the record's `breadcrumb.currentField` value
+		 * (the case number on a case page) when declared and filled, else the
+		 * display name.
+		 *
+		 * @spec openspec/changes/zuiddrecht-pixel-gaps-3/specs/zuiddrecht-pixel-gaps-3/spec.md#requirement-a-breadcrumb-can-name-the-record-by-a-field-and-use-a-text-separator
+		 * @return {string}
+		 */
+		breadcrumbCurrentLabel() {
+			const field = this.breadcrumb && this.breadcrumb.currentField
+			if (typeof field === 'string' && field !== '') {
+				const value = stageOf(this.resolvedObject, field)
+				if (value !== '') {
+					return value
+				}
+			}
+			return this.displayTitle
+		},
+
+		/**
+		 * The text drawn between the crumbs (`breadcrumb.separator`), or ''
+		 * for the chevron.
+		 *
+		 * @spec openspec/changes/zuiddrecht-pixel-gaps-3/specs/zuiddrecht-pixel-gaps-3/spec.md#requirement-a-breadcrumb-can-name-the-record-by-a-field-and-use-a-text-separator
+		 * @return {string}
+		 */
+		breadcrumbSeparator() {
+			const separator = this.breadcrumb && this.breadcrumb.separator
+			return typeof separator === 'string' ? separator : ''
 		},
 
 		/**

package/src/components/CnDetailWidgetHost/CnDetailWidgetHost.vue

@@ -85,7 +85,7 @@
 			v-else-if="isData && schemaObject"
 			:title="resolvedTitle"
 			:chromeless="isBare"
-			:showActions="!isBare"
+			:showActions="!isBare && actionsShown"
 			:icon="widget.icon || null"
 			:schema="schemaObject"
 			:objectData="object"
@@ -165,6 +165,7 @@
 			v-else-if="renderer && isContentOnly && !isBare"
 			:title="widget.title || ''"
 			titleIconPosition="left"
+			:showActions="actionsShown || catalogAddEnabled"
 			:showRefresh="false"
 			:showRequestFeature="false"
 			class="cn-detail-page__catalog-card">
@@ -473,6 +474,21 @@ export default {
 			default: null,
 		},
 
+		/**
+		 * Whether a widget on a card keeps its overflow Actions menu when its
+		 * definition does not say (`showActions`). `false` (CnDetailPage
+		 * `showWidgetActions: false`) drops it from the record's data cards; a
+		 * definition with `showActions: true` keeps it, one with
+		 * `showActions: false` drops it whatever this says. True by default,
+		 * which is the menu every card had.
+		 *
+		 * @spec openspec/changes/zuiddrecht-pixel-gaps-3/specs/zuiddrecht-pixel-gaps-3/spec.md#requirement-a-detail-page-can-drop-the-widget-actions-menu
+		 */
+		showActions: {
+			type: Boolean,
+			default: true,
+		},
+
 		/**
 		 * The consumer's component registry, consulted before the built-in
 		 * catalog so a custom widget type overrides a built-in (REQ-MVR-005).
@@ -839,6 +855,19 @@ export default {
 			return this.content.allowCreate !== false
 		},
 
+		/**
+		 * Whether the widget's overflow Actions menu renders: the definition's
+		 * own `showActions` when it is a boolean, else the surface's
+		 * `showActions`.
+		 *
+		 * @spec openspec/changes/zuiddrecht-pixel-gaps-3/specs/zuiddrecht-pixel-gaps-3/spec.md#requirement-a-detail-page-can-drop-the-widget-actions-menu
+		 * @return {boolean} true when the menu renders.
+		 */
+		actionsShown() {
+			const own = this.widget && this.widget.showActions
+			return typeof own === 'boolean' ? own : this.showActions
+		},
+
 		/**
 		 * The card header rule, with the surface's layout-driven answer winning
 		 * when it supplied one.

package/src/components/CnFeaturesAndRoadmapPage/CnFeaturesAndRoadmapPage.vue

@@ -40,6 +40,7 @@
 // unconditionally.
 import { loadState } from '@nextcloud/initial-state'
 import CnFeaturesAndRoadmapView from '../CnFeaturesAndRoadmapView/CnFeaturesAndRoadmapView.vue'
+import { warnCapabilityComparisonDeprecated } from '../../utils/capabilityComparison.js'
 import { DEFAULT_FORGE } from '../../utils/forge.js'
 
 /**
@@ -175,6 +176,11 @@ export default {
 		 * Manifest config > initialState (`features_roadmap_capabilities`) >
 		 * null. When null the view renders its two stops as it always has.
 		 *
+		 * Deprecated: publish the comparison on the app's docs site and link to it (as dossiq #3312 and pipelinq #2195 did). Still rendered; removal waits for a major version. The same goes for the `features_roadmap_capabilities` initial
+		 * state key. A development build warns once when either is set.
+		 *
+		 * @deprecated since 2.66.0, publish the comparison on the app's docs site and link to it.
+		 * @spec openspec/changes/zuiddrecht-pixel-gaps-3/specs/zuiddrecht-pixel-gaps-3/spec.md#requirement-the-in-app-capability-comparison-is-deprecated
 		 * @type {object|null}
 		 */
 		capabilityComparison: {
@@ -298,5 +304,11 @@ export default {
 			return readInitialState(this.effectiveAppId, 'features_roadmap_capabilities', null)
 		},
 	},
+
+	mounted() {
+		if (this.resolvedCapabilityComparison) {
+			warnCapabilityComparisonDeprecated('CnFeaturesAndRoadmapPage `capabilityComparison` / the `features_roadmap_capabilities` initial state')
+		}
+	},
 }
 </script>

package/src/components/CnFeaturesAndRoadmapView/CnFeaturesAndRoadmapView.vue

@@ -114,6 +114,7 @@ import CnFeaturesAndRoadmapSidebar from '../CnFeaturesAndRoadmapSidebar/CnFeatur
 import CnFeaturesTab from '../CnFeaturesTab/CnFeaturesTab.vue'
 import CnRoadmapTab from '../CnRoadmapTab/CnRoadmapTab.vue'
 import CnSupportDialog from '../CnSupportDialog/CnSupportDialog.vue'
+import { warnCapabilityComparisonDeprecated } from '../../utils/capabilityComparison.js'
 import { buildFeatureRequestUrl, DEFAULT_FORGE } from '../../utils/forge.js'
 
 const DEFAULT_OPENBUILT_PATH = '/apps/openbuilt'
@@ -214,6 +215,11 @@ export default {
 		 * When null (default) the toggle keeps its two stops and the view
 		 * renders exactly as it does for every app that passes nothing.
 		 *
+		 * Deprecated: publish the comparison on the app's docs site and link to it (as dossiq #3312 and pipelinq #2195 did). Still rendered; removal waits for a major version.
+		 * A development build warns once when it is set.
+		 *
+		 * @deprecated since 2.66.0, publish the comparison on the app's docs site and link to it.
+		 * @spec openspec/changes/zuiddrecht-pixel-gaps-3/specs/zuiddrecht-pixel-gaps-3/spec.md#requirement-the-in-app-capability-comparison-is-deprecated
 		 * @type {object|null}
 		 */
 		capabilityComparison: {
@@ -527,6 +533,9 @@ export default {
 
 	mounted() {
 		this.publishHoistedSidebar()
+		if (this.capabilityComparison) {
+			warnCapabilityComparisonDeprecated('CnFeaturesAndRoadmapView `capabilityComparison`')
+		}
 	},
 
 	beforeUnmount() {

package/src/components/CnHeaderWidget/CnHeaderWidget.vue

@@ -4,12 +4,25 @@
 -->
 
 <template>
-	<div class="cn-header-widget" :class="{ 'cn-header-widget--plain': isPlain, 'cn-header-widget--ground': isGround, 'cn-header-widget--with-views': viewOptions.length > 0 }" :style="wrapperStyle">
+	<div class="cn-header-widget" :class="{ 'cn-header-widget--plain': isPlain, 'cn-header-widget--ground': isGround, 'cn-header-widget--with-views': viewOptions.length > 0, 'cn-header-widget--with-emblem': emblem !== null }" :style="wrapperStyle">
 		<div
 			v-if="hasOverlay"
 			class="cn-header-widget__overlay"
 			:style="overlayStyle"
 			aria-hidden="true" />
+		<!-- The emblem beside the greeting (`content.emblem`): a URL, or
+		     `true` for the theme's emblem (--nldesign-emblem-url). Decoration. -->
+		<img
+			v-if="emblem && emblem !== true"
+			class="cn-header-widget__emblem"
+			:src="emblem"
+			alt=""
+			data-testid="cn-header-widget-emblem">
+		<span
+			v-else-if="emblem === true"
+			class="cn-header-widget__emblem cn-header-widget__emblem--theme"
+			aria-hidden="true"
+			data-testid="cn-header-widget-emblem" />
 		<div class="cn-header-widget__content" :style="contentStyle">
 			<p
 				v-if="dateLine"
@@ -140,7 +153,7 @@ export default {
 		 * Persisted widget content: `{title, subtitle, backgroundImageUrl,
 		 * backgroundImageFileId, backgroundColor, overlayMode, overlayColor,
 		 * overlayOpacity, textColor, textAlign, verticalAlign, height, cta,
-		 * greeting, showDate, plain, ground, views}`. All fields are optional except
+		 * greeting, showDate, kicker, emblem, plain, ground, views}`. All fields are optional except
 		 * `title` (or `greeting`); unknown enum values collapse to documented
 		 * defaults and the renderer never throws. `views` is
 		 * `{ ariaLabel?, options: [{ label, route, params? } | { label, view }] }`:
@@ -151,7 +164,12 @@ export default {
 		 * own. `ground: true`
 		 * draws the greeting on the page ground: the plain look with no
 		 * padding, a 32px heading and the date line 6px above it (a dashboard
-		 * also drops the widget's card for it).
+		 * also drops the widget's card for it). A ground greeting takes its
+		 * own height rather than its grid cell's, so a view switch sits on
+		 * the heading's line. `kicker` (an i18n key) prefixes the date line, as
+		 * "Customer contact · Tuesday 6 October". `emblem` (a URL, or `true`
+		 * for the theme's `--nldesign-emblem-url`) draws the emblem beside the
+		 * date line and heading, 52px high (`--cn-header-emblem-size`).
 		 *
 		 * @type {object}
 		 */
@@ -396,13 +414,30 @@ export default {
 		},
 
 		/**
-		 * Today's date written out ("Monday 5 October 2026"), or '' when
-		 * `showDate` is off.
+		 * The kicker line above the heading: `content.kicker` (through the
+		 * host translate function, e.g. "Customer contact") and today's date
+		 * written out ("Monday 5 October 2026") when `showDate` is on, joined
+		 * by " · ". '' when neither is set. Without `kicker` this is the date
+		 * line as before.
 		 *
 		 * @return {string}
 		 * @spec openspec/changes/workplace-dashboard-primitives/specs/workplace-dashboard-primitives/spec.md#requirement-greeting-header
 		 */
 		dateLine() {
+			const kicker = this.content && typeof this.content.kicker === 'string' && this.content.kicker !== ''
+				? this.effectiveTranslate(this.content.kicker)
+				: ''
+			const date = this.dateText
+			return [kicker, date].filter((part) => part !== '').join(' · ')
+		},
+
+		/**
+		 * Today's date written out, or '' when `showDate` is off.
+		 *
+		 * @spec openspec/changes/zuiddrecht-pixel-gaps-3/specs/zuiddrecht-pixel-gaps-3/spec.md#requirement-a-greeting-kicker-can-carry-a-prefix
+		 * @return {string}
+		 */
+		dateText() {
 			if (!this.content || this.content.showDate !== true) {
 				return ''
 			}
@@ -434,6 +469,21 @@ export default {
 			}
 		},
 
+		/**
+		 * The emblem beside the greeting: the URL `content.emblem` names,
+		 * `true` for the theme's emblem, or null without the key.
+		 *
+		 * @spec openspec/changes/zuiddrecht-pixel-gaps-3/specs/zuiddrecht-pixel-gaps-3/spec.md#requirement-a-greeting-can-carry-the-emblem
+		 * @return {string|true|null}
+		 */
+		emblem() {
+			const value = this.content && this.content.emblem
+			if (value === true) {
+				return true
+			}
+			return typeof value === 'string' && value !== '' ? resolveImageUrl(value) : null
+		},
+
 		/** Whether a non-empty subtitle is set. */
 		hasSubtitle() {
 			return this.subtitle !== ''
@@ -574,7 +624,12 @@ export default {
 			return this.isLightColor(this.backgroundColor) ? '#000000' : '#ffffff'
 		},
 
-		/** Inline style for the banner wrapper. */
+		/**
+		 * Inline style for the banner wrapper.
+		 *
+		 * @spec openspec/changes/zuiddrecht-pixel-gaps-3/specs/zuiddrecht-pixel-gaps-3/spec.md#requirement-a-ground-greeting-lines-its-switch-up-with-the-heading
+		 * @return {object}
+		 */
 		wrapperStyle() {
 			const style = {
 				position: 'relative',
@@ -583,7 +638,11 @@ export default {
 				// widget. A fixed pixel height ignored the cell, which made the
 				// banner un-resizable and made it overflow/scroll inside a
 				// smaller cell. The grid controls the size now.
-				height: '100%',
+				// On the page ground there is no banner to fill the cell with:
+				// the greeting takes its own height, so the view switch lines
+				// up with the heading instead of the bottom of a taller cell,
+				// and a size-to-content cell can shrink to it.
+				height: this.isGround ? 'auto' : '100%',
 				overflow: 'hidden',
 				'background-color': this.backgroundColor,
 			}
@@ -619,6 +678,7 @@ export default {
 		 * Inline style for the content flex container.
 		 *
 		 * @spec openspec/changes/workplace-dashboard-primitives/specs/workplace-dashboard-primitives/spec.md#requirement-greeting-header
+		 * @spec openspec/changes/zuiddrecht-pixel-gaps-3/specs/zuiddrecht-pixel-gaps-3/spec.md#requirement-a-ground-greeting-lines-its-switch-up-with-the-heading
 		 */
 		contentStyle() {
 			return {
@@ -627,7 +687,7 @@ export default {
 				// Beside a view switch the content shares the row instead of
 				// taking the whole width (see .cn-header-widget--with-views).
 				width: this.viewOptions.length > 0 ? 'auto' : '100%',
-				height: '100%',
+				height: this.isGround ? 'auto' : '100%',
 				display: 'flex',
 				'flex-direction': 'column',
 				'align-items': this.flexAlignFromTextAlign,
@@ -834,6 +894,33 @@ export default {
 	width: auto;
 }
 
+/* The emblem beside the greeting (`content.emblem`): on one row with the
+   date line and heading, centred on them, as LpStart draws it. */
+.cn-header-widget--with-emblem {
+	display: flex;
+	column-gap: var(--cn-header-emblem-gap, 16px);
+}
+
+.cn-header-widget--with-emblem .cn-header-widget__content {
+	flex: 1 1 auto;
+	width: auto;
+	min-width: 0;
+}
+
+.cn-header-widget__emblem {
+	position: relative;
+	z-index: 1;
+	flex: none;
+	align-self: center;
+	height: var(--cn-header-emblem-size, 52px);
+	width: auto;
+}
+
+.cn-header-widget__emblem--theme {
+	width: var(--cn-header-emblem-size, 52px);
+	background: var(--nldesign-emblem-url) center / contain no-repeat;
+}
+
 .cn-header-widget__views {
 	position: relative;
 	z-index: 1;