@conduction/nextcloud-vue 2.68.0 → 2.70.0

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;

package/src/components/CnIndexPage/CnIndexPage.vue

@@ -19,8 +19,28 @@
 			<CnPageHeader
 				:title="title"
 				:description="headerDescription"
-				:icon="resolvedIcon"
-				:visuallyHidden="!showTitle" />
+				:icon="showTitleIcon ? resolvedIcon : ''"
+				:visuallyHidden="!showTitle">
+				<!-- The board's header buttons (`headerButtons`), beside the
+				     title. Declaring them takes the Views and Actions menus
+				     (and the Add / Export controls a button takes over) out of
+				     the actions bar. -->
+				<template v-if="headerButtonsShown" #extra>
+					<div class="cn-index-page__header-buttons" data-testid="cn-index-header-buttons">
+						<NcButton
+							v-for="button in resolvedHeaderButtons"
+							:key="button.key"
+							:variant="button.variant"
+							:data-testid="`cn-index-header-button-${button.key}`"
+							@click="onHeaderButton(button)">
+							<template v-if="button.icon" #icon>
+								<CnIcon :name="button.icon" :size="20" />
+							</template>
+							{{ button.label }}
+						</NcButton>
+					</div>
+				</template>
+			</CnPageHeader>
 		</slot>
 
 		<!-- Optional content below header, above actions bar -->
@@ -64,7 +84,9 @@
 			:refreshDisabled="refreshDisabled"
 			:addDisabled="addDisabled"
 			:addTo="addLinkTo"
-			:showAdd="effectiveShowAdd"
+			:showAdd="effectiveShowAdd && !headerButtonTakes('add')"
+			:showCount="showCount"
+			:showActionsMenu="!headerButtonsShown"
 			:showSidebarToggle="hasSidebar"
 			:sidebarOpen="sidebarOpen"
 			:headerActions="mergedHeaderActions"
@@ -111,12 +133,12 @@
 			     views, export, page config — grouped together and kept apart from
 			     the app-specific buttons in `#actions`, with Add sitting between
 			     the two groups rather than before both (dossiq Cases/Queue). -->
-			<template v-if="isEditMode || showExportMenu || allowSavedViews" #actions-end>
+			<template v-if="isEditMode || barShowsExportMenu || barShowsSavedViews" #actions-end>
 				<!-- Saved views (opt-in via `allowSavedViews`): lists the user's
 				     OpenRegister saved-search views; applying one writes its stored
 				     filters/search/sort into the route query. -->
 				<CnSavedViewsControl
-					v-if="allowSavedViews"
+					v-if="barShowsSavedViews"
 					:views="viewsForControl"
 					:loading="savedViewsLoading"
 					:currentUserId="currentSavedViewsUserId"
@@ -128,7 +150,7 @@
 				     CSV/Excel entries navigate to OR's export-leaf URL, passing the
 				     current route's query params through as filters. -->
 				<NcActions
-					v-if="showExportMenu"
+					v-if="barShowsExportMenu"
 					:forceName="true"
 					:menuName="t('nextcloud-vue', 'Export')"
 					data-testid="cn-index-export-menu"
@@ -1225,6 +1247,51 @@ export default {
 			default: false,
 		},
 
+		/**
+		 * Whether the page header draws its icon before the title. `false`
+		 * (manifest `config.showTitleIcon: false`) drops it, for a title that
+		 * stands alone as the board draws it. True by default.
+		 *
+		 * @spec openspec/changes/zuiddrecht-pixel-gaps-3/specs/zuiddrecht-pixel-gaps-3/spec.md#requirement-an-index-page-can-take-the-board-header
+		 */
+		showTitleIcon: {
+			type: Boolean,
+			default: true,
+		},
+
+		/**
+		 * Whether the actions bar shows its "Showing 20 of 258" line.
+		 * `false` (manifest `config.showCount: false`) drops it, for a page
+		 * whose title line already gives the total (`countSubtitle`). True by
+		 * default.
+		 *
+		 * @spec openspec/changes/zuiddrecht-pixel-gaps-3/specs/zuiddrecht-pixel-gaps-3/spec.md#requirement-an-index-page-can-take-the-board-header
+		 */
+		showCount: {
+			type: Boolean,
+			default: true,
+		},
+
+		/**
+		 * Buttons beside the page title, as the board's "Export" and "New
+		 * case" (manifest `config.headerButtons`). Each is `{ label?, action,
+		 * variant?, icon?, format?, id? }`: `action` is `add` (the Add flow;
+		 * its label defaults to the Add label), `export` (the export leaf in
+		 * `format`, `csv` by default, else the export dialog), `import`,
+		 * `refresh`, or the id of a `headerActions` entry; `variant` is
+		 * `primary` or `secondary` (the default). Shown only with
+		 * `showTitle`. When they show, the actions bar drops its Views and
+		 * Actions menus, and the Add button and Export menu when a button
+		 * takes their action. Empty (the default) changes nothing.
+		 *
+		 * @spec openspec/changes/zuiddrecht-pixel-gaps-3/specs/zuiddrecht-pixel-gaps-3/spec.md#requirement-an-index-page-can-take-the-board-header
+		 * @type {Array<{label?: string, action: string, variant?: ('primary'|'secondary'), icon?: string, format?: ('csv'|'excel'), id?: string}>}
+		 */
+		headerButtons: {
+			type: Array,
+			default: () => [],
+		},
+
 		/** Optional MDI icon name. Defaults to schema.icon when a schema is provided. */
 		icon: {
 			type: String,
@@ -4284,6 +4351,67 @@ export default {
 			return resolveDeepTokens(seed, {})
 		},
 
+		/**
+		 * The declared header buttons with a label, translated, each with a
+		 * stable key and a variant.
+		 *
+		 * @spec openspec/changes/zuiddrecht-pixel-gaps-3/specs/zuiddrecht-pixel-gaps-3/spec.md#requirement-an-index-page-can-take-the-board-header
+		 * @return {Array<{key: string, label: string, action: string, variant: string, icon: string, format: string}>}
+		 */
+		resolvedHeaderButtons() {
+			const declared = Array.isArray(this.headerButtons) ? this.headerButtons : []
+			return declared
+				.filter((button) => button && typeof button === 'object' && typeof button.action === 'string' && button.action !== '')
+				.map((button, index) => {
+					let label = typeof button.label === 'string' && button.label !== '' ? this.cnTranslate(button.label) : ''
+					if (label === '' && button.action === 'add') {
+						label = this.resolvedAddLabel
+					}
+					return {
+						key: String(button.id || button.action || index),
+						label,
+						action: button.action,
+						variant: button.variant === 'primary' ? 'primary' : 'secondary',
+						icon: typeof button.icon === 'string' ? button.icon : '',
+						format: button.format === 'excel' ? 'excel' : 'csv',
+					}
+				})
+				.filter((button) => button.label !== '')
+		},
+
+		/**
+		 * Whether the header buttons render: there are some, the title shows
+		 * (they sit beside it) and no `#header` slot replaces the header.
+		 *
+		 * @spec openspec/changes/zuiddrecht-pixel-gaps-3/specs/zuiddrecht-pixel-gaps-3/spec.md#requirement-an-index-page-can-take-the-board-header
+		 * @return {boolean}
+		 */
+		headerButtonsShown() {
+			return this.showTitle && !this.$slots.header && this.resolvedHeaderButtons.length > 0
+		},
+
+		/**
+		 * Whether the actions bar shows the saved-views control: opted in
+		 * with `allowSavedViews` and not given up for header buttons.
+		 *
+		 * @spec openspec/changes/zuiddrecht-pixel-gaps-3/specs/zuiddrecht-pixel-gaps-3/spec.md#requirement-an-index-page-can-take-the-board-header
+		 * @return {boolean}
+		 */
+		barShowsSavedViews() {
+			return Boolean(this.allowSavedViews) && !this.headerButtonsShown
+		},
+
+		/**
+		 * Whether the actions bar shows the Export menu: `showExportMenu`,
+		 * unless a header button took the export over.
+		 *
+		 * @spec openspec/changes/zuiddrecht-pixel-gaps-3/specs/zuiddrecht-pixel-gaps-3/spec.md#requirement-an-index-page-can-take-the-board-header
+		 * @return {boolean}
+		 */
+		barShowsExportMenu() {
+			return this.showExportMenu && !this.headerButtonTakes('export')
+		},
+
 		/**
 		 * The header's description line: `countSubtitle` with the total
 		 * filled in when one is known, else `description`.
@@ -5086,6 +5214,43 @@ export default {
 			this.$emit('open-modal', { target, props: { selectedIds, count, ...own } })
 		},
 
+		/**
+		 * Whether a shown header button takes `action` over from the bar.
+		 *
+		 * @spec openspec/changes/zuiddrecht-pixel-gaps-3/specs/zuiddrecht-pixel-gaps-3/spec.md#requirement-an-index-page-can-take-the-board-header
+		 * @param {string} action The action, e.g. `add`.
+		 * @return {boolean}
+		 */
+		headerButtonTakes(action) {
+			return this.headerButtonsShown && this.resolvedHeaderButtons.some((button) => button.action === action)
+		},
+
+		/**
+		 * A header button was clicked: run its built-in action, or dispatch
+		 * it as the `headerActions` entry with that id.
+		 *
+		 * @spec openspec/changes/zuiddrecht-pixel-gaps-3/specs/zuiddrecht-pixel-gaps-3/spec.md#requirement-an-index-page-can-take-the-board-header
+		 * @param {{action: string, format: string}} button The resolved button.
+		 * @return {void}
+		 */
+		onHeaderButton(button) {
+			if (button.action === 'add') {
+				this.onAddClick()
+			} else if (button.action === 'export') {
+				if (this.register && this.exportSchemaSlug) {
+					this.onExportClick(button.format)
+				} else {
+					this.showExportDialog = true
+				}
+			} else if (button.action === 'import') {
+				this.showImportDialog = true
+			} else if (button.action === 'refresh') {
+				this.onRefreshEvent()
+			} else {
+				this.onHeaderAction({ action: button.action, id: button.action })
+			}
+		},
+
 		/**
 		 * Click dispatch from CnActionsBar's `@header-action`. Looks
 		 * up the resolved entry by id, invokes its handler if any,

package/src/components/CnNextStepCard/CnNextStepCard.vue

@@ -241,6 +241,17 @@ export default {
 	text-transform: uppercase;
 }
 
+/* The title is a small kicker, not a section heading, but it is an <h3> (or
+   whatever `titleTag` says) for the outline, and a theme that sizes every
+   heading with !important (thematiq's nldesign sheet: `h3 { font-size:
+   var(--nldesign-component-heading-3-font-size) !important }`) blew it up to
+   an 18px uppercase heading. Only !important beats !important; the doubled
+   class makes this the more specific rule. Without such a theme the size is
+   the 0.85em above, unchanged. */
+.cn-next-step-card__title.cn-next-step-card__title {
+	font-size: 0.85em !important;
+}
+
 .cn-next-step-card__list {
 	display: grid;
 	gap: calc(2 * var(--default-grid-baseline));

package/src/components/CnObjectListWidget/CnObjectListWidget.vue

@@ -614,7 +614,10 @@ export default {
 					return { key: c, label: headingFor(c) }
 				}
 				const out = { key: c.key, label: c.label || headingFor(c.key) }
-				for (const k of ['format', 'widget', 'widgetProps', 'formatter', 'align', 'width', 'type', 'enum', 'enumLabels', 'sortable']) {
+				// `secondary` (a second, muted line under the cell) rides
+				// along too: the table draws it, and dropping it here took the
+				// list rows' second line away (zuiddrecht-pixel-gaps-3).
+				for (const k of ['format', 'widget', 'widgetProps', 'formatter', 'align', 'width', 'type', 'enum', 'enumLabels', 'sortable', 'secondary']) {
 					if (c[k] !== undefined) {
 						out[k] = c[k]
 					}

package/src/components/CnStackedBarWidget/CnStackedBarWidget.vue

@@ -3,7 +3,7 @@
   SPDX-License-Identifier: EUPL-1.2
 -->
 <template>
-	<div class="cn-stacked-bar" data-testid="cn-stacked-bar">
+	<div class="cn-stacked-bar" :class="{ 'cn-stacked-bar--inset': inset }" data-testid="cn-stacked-bar">
 		<div v-if="loading" class="cn-stacked-bar__state" role="status">
 			<NcLoadingIcon :size="20" />
 			<span>{{ loadingLabel }}</span>
@@ -11,9 +11,14 @@
 		<p v-else-if="error" class="cn-stacked-bar__state" role="status">
 			{{ errorLabel }}
 		</p>
-		<p v-else-if="total === 0" class="cn-stacked-bar__state" data-testid="cn-stacked-bar-empty">
-			{{ emptyLabel }}
-		</p>
+		<!-- The designed empty state the list widgets use, compact: a bare
+		     line of text read as a broken widget in an empty card. -->
+		<CnWidgetEmptyState
+			v-else-if="total === 0"
+			:name="emptyLabel"
+			compact
+			class="cn-stacked-bar__empty"
+			data-testid="cn-stacked-bar-empty" />
 		<template v-else>
 			<!-- The bar is a picture of the legend below it. The legend holds
 			     every label and number, so the bar itself is hidden from
@@ -50,6 +55,7 @@
 <script>
 import { translate as t } from '@nextcloud/l10n'
 import { NcLoadingIcon } from '@nextcloud/vue'
+import CnWidgetEmptyState from '../CnWidgetEmptyState/CnWidgetEmptyState.vue'
 import { fetchGroupedCounts } from '../../utils/fetchAggregate.js'
 
 /** The lightest step keeps this share of the primary colour, so it still stands out from the page. */
@@ -114,7 +120,7 @@ export function rampColor(index, count) {
 export default {
 	name: 'CnStackedBarWidget',
 
-	components: { NcLoadingIcon },
+	components: { CnWidgetEmptyState, NcLoadingIcon },
 
 	inject: {
 		/**
@@ -133,9 +139,11 @@ export default {
 		 * group keys in the order they render; groups it does not list follow
 		 * in the order they arrive, and a listed key without records renders
 		 * with a count of 0. `labels` maps a group key to its label.
-		 * `emptyText` is shown when there is nothing to count.
+		 * `emptyText` is shown when there is nothing to count. `inset: true`
+		 * draws the bar and legend inside the board's inset (16px above, 24px
+		 * at the sides, 22px below) instead of from card edge to card edge.
 		 *
-		 * @type {{source?: {register?: string, schema?: string, groupBy?: string, filter?: object}, segments?: Array<{key?: string, label: string, value: number}>, order?: Array<string>, labels?: {[key: string]: string}, emptyText?: string}}
+		 * @type {{inset?: boolean, source?: {register?: string, schema?: string, groupBy?: string, filter?: object}, segments?: Array<{key?: string, label: string, value: number}>, order?: Array<string>, labels?: {[key: string]: string}, emptyText?: string}}
 		 */
 		content: {
 			type: Object,
@@ -163,6 +171,17 @@ export default {
 	},
 
 	computed: {
+		/**
+		 * Whether the widget draws the board's inset (`content.inset`). Off
+		 * by default, which keeps it edge to edge as before.
+		 *
+		 * @spec openspec/changes/zuiddrecht-pixel-gaps-3/specs/zuiddrecht-pixel-gaps-3/spec.md#requirement-a-strip-and-a-stacked-bar-can-take-the-board-inset
+		 * @return {boolean}
+		 */
+		inset() {
+			return Boolean(this.content && this.content.inset === true)
+		},
+
 		/**
 		 * The translate function in use.
 		 *
@@ -353,6 +372,14 @@ export default {
 	width: 100%;
 }
 
+/* `content.inset: true`: the board's inset inside the card (zuiddrecht-pixel-
+   gaps-3). A dashboard renders its widgets flush, so without it the strip ran
+   from card edge to card edge. Theme hook: --cn-widget-board-inset. */
+.cn-stacked-bar--inset {
+	box-sizing: border-box;
+	padding: var(--cn-widget-board-inset, 16px 24px 22px);
+}
+
 .cn-stacked-bar__state {
 	display: flex;
 	align-items: center;

package/src/components/CnStagesWidget/CnStagesWidget.vue

@@ -1502,6 +1502,25 @@ button.cn-stages-widget__bar-label {
 	cursor: pointer;
 }
 
+/* The same label under a theme that restyles every button with !important
+   (thematiq's nldesign sheet: `button:not(.action-button)` gets 8px 16px
+   padding, `min-width: max-content` and `overflow: visible`), and under core's
+   `margin: 3px 3px 3px 0`, which outranks the scoped base rule. Together they
+   put each clickable label about 10px below the current step's <span> and let
+   a long label run over its neighbours, so eight Woo steps overlapped instead
+   of ending in an ellipsis. Only !important beats !important; this selector is
+   the more specific of the two. Without such a theme nothing changes: these
+   are the values the base rule already sets. */
+button.cn-stages-widget__bar-label.cn-stages-widget__bar-label {
+	min-width: 0 !important;
+	margin: 0 !important;
+	padding: 0 !important;
+	border-width: 0 !important;
+	overflow: hidden !important;
+	text-overflow: ellipsis !important;
+	white-space: nowrap !important;
+}
+
 button.cn-stages-widget__bar-label[aria-disabled="true"] {
 	cursor: not-allowed;
 }