@conduction/nextcloud-vue 2.69.0 → 2.70.0

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;
 }

package/src/components/CnStatWidget/CnStatWidget.vue

@@ -111,6 +111,15 @@
 				data-testid="cn-stat-widget-caption">
 				{{ resolvedCaption }}
 			</span>
+			<!-- A second caption line (`content.note`), as LpStart's "3
+			     deadlines this week" under the count. Static text for now. -->
+			<span
+				v-if="!displayLoading && !displayError && resolvedNote"
+				class="cn-kpi-card__label cn-stat-widget__note cn-kpi-card__caption-line"
+				:class="noteVariantClass"
+				data-testid="cn-stat-widget-note">
+				{{ resolvedNote }}
+			</span>
 		</div>
 	</component>
 </template>
@@ -663,6 +672,33 @@ export default {
 			return rules.find((r) => r && this.matchesRule(current, r)) || null
 		},
 
+		/**
+		 * The second caption line: `content.note` through the host translate
+		 * function, or '' without it.
+		 *
+		 * @spec openspec/changes/zuiddrecht-pixel-gaps-3/specs/zuiddrecht-pixel-gaps-3/spec.md#requirement-a-stat-tile-can-carry-a-second-caption-line
+		 * @return {string}
+		 */
+		resolvedNote() {
+			const note = this.content && this.content.note
+			return typeof note === 'string' && note !== '' ? this.effectiveTranslate(note) : ''
+		},
+
+		/**
+		 * The colour class of the second caption line (`content.noteVariant`,
+		 * the same names as `captionVariant`), or '' for the muted default.
+		 *
+		 * @spec openspec/changes/zuiddrecht-pixel-gaps-3/specs/zuiddrecht-pixel-gaps-3/spec.md#requirement-a-stat-tile-can-carry-a-second-caption-line
+		 * @return {string}
+		 */
+		noteVariantClass() {
+			const variant = this.content && this.content.noteVariant
+			if (!variant || variant === 'default' || !Object.hasOwn(VARIANT_COLORS, variant)) {
+				return ''
+			}
+			return `cn-kpi-card__label--${variant === 'danger' ? 'error' : variant}`
+		},
+
 		/**
 		 * The caption's colour class: the matching override's
 		 * `captionVariant`, else `content.captionVariant`, as

package/src/components/CnStatsBlock/CnStatsBlock.md

@@ -151,3 +151,5 @@ export default {
 | Slot | Scope | Description |
 |---|---|---|
 | `value` | `{ count, formatted }` | Override the prominently-displayed value — render a pre-formatted string (currency, percent, a "—" placeholder, …). `count` is the raw `count` prop; `formatted` is the locale-formatted string the default slot renders. Useful for currency / unit prefixes (e.g. `€{{ formatted }}`). |
+
+`layout` (String, default empty): `stacked` is the board's tile, as CnStatWidget `content.layout: "stacked"`: no icon circle, a 14px muted title, the number at 34px/700 and the unit on a muted line under it.

package/src/components/CnStatsBlock/CnStatsBlock.vue

@@ -19,7 +19,7 @@
 		v-bind="componentAttrs"
 		@click="onClick">
 		<!-- Icon -->
-		<div v-if="hasIcon" class="cn-kpi-card__icon cn-stats-block__icon" :class="iconClasses">
+		<div v-if="hasIcon && !isStacked" class="cn-kpi-card__icon cn-stats-block__icon" :class="iconClasses">
 			<slot name="icon">
 				<component :is="icon" v-if="icon" :size="iconSize" />
 			</slot>
@@ -249,6 +249,18 @@ export default {
 			default: false,
 		},
 
+		/**
+		 * `stacked` is the board's tile, as CnStatWidget `content.layout:
+		 * "stacked"`: no icon circle, a 14px muted title, the number at
+		 * 34px/700 in the text colour. Empty (the default) keeps the KPI card.
+		 *
+		 * @spec openspec/changes/zuiddrecht-pixel-gaps-3/specs/zuiddrecht-pixel-gaps-3/spec.md#requirement-a-stats-block-can-take-the-stacked-board-look
+		 */
+		layout: {
+			type: String,
+			default: '',
+		},
+
 		/**
 		 * Lay the icon left of the content. No longer needed — this is the
 		 * canonical card's own layout — and kept so existing callers that pass
@@ -366,13 +378,24 @@ export default {
 			return {}
 		},
 
+		/**
+		 * Whether the block takes the stacked board look (`layout`).
+		 *
+		 * @spec openspec/changes/zuiddrecht-pixel-gaps-3/specs/zuiddrecht-pixel-gaps-3/spec.md#requirement-a-stats-block-can-take-the-stacked-board-look
+		 * @return {boolean}
+		 */
+		isStacked() {
+			return this.layout === 'stacked'
+		},
+
 		rootClasses() {
 			return {
 				// Canonical + legacy, in pairs: the canonical class carries the
 				// look, the legacy one keeps existing app CSS matching.
 				// The canonical card is already horizontal, so the legacy pair
 				// is emitted for app CSS but carries no look of its own.
-				'cn-kpi-card--horizontal': this.horizontal || !this.vertical,
+				'cn-kpi-card--horizontal': !this.isStacked && (this.horizontal || !this.vertical),
+				'cn-kpi-card--stacked': this.isStacked,
 				'cn-stats-block--horizontal': this.horizontal || !this.vertical,
 				'cn-kpi-card--vertical': this.vertical,
 				'cn-stats-block--vertical': this.vertical,

package/src/components/CnStatsBlockWidget/CnStatsBlockWidget.vue

@@ -32,6 +32,7 @@
 				:showZeroCount="showZeroCount"
 				:horizontal="horizontal"
 				:vertical="vertical"
+				:layout="layout"
 				:filled="filled"
 				:clickable="!!view.route"
 				:route="view.route || null">
@@ -54,6 +55,7 @@
 			:showZeroCount="showZeroCount"
 			:horizontal="horizontal"
 			:vertical="vertical"
+			:layout="layout"
 			:filled="filled"
 			:clickable="!!route"
 			:route="route">
@@ -260,6 +262,17 @@ export default {
 			default: false,
 		},
 
+		/**
+		 * `stacked` gives every block the board look (see CnStatsBlock
+		 * `layout`). Empty (the default) keeps the KPI card.
+		 *
+		 * @spec openspec/changes/zuiddrecht-pixel-gaps-3/specs/zuiddrecht-pixel-gaps-3/spec.md#requirement-a-stats-block-can-take-the-stacked-board-look
+		 */
+		layout: {
+			type: String,
+			default: '',
+		},
+
 		/**
 		 * Draw each tile's own grey box. Off by default — the widget is
 		 * rendered inside a CnWidgetWrapper that already draws a card.

package/src/components/CnWeekStripWidget/CnWeekStripWidget.vue

@@ -3,7 +3,7 @@
   SPDX-License-Identifier: EUPL-1.2
 -->
 <template>
-	<div class="cn-week-strip" data-testid="cn-week-strip">
+	<div class="cn-week-strip" :class="{ 'cn-week-strip--inset': inset }" data-testid="cn-week-strip">
 		<div v-if="loading" class="cn-week-strip__state" role="status">
 			<NcLoadingIcon :size="20" />
 			<span class="cn-week-strip__state-text">{{ loadingLabel }}</span>
@@ -118,9 +118,11 @@ export default {
 		 * today), `lateField` a boolean field that marks a record late.
 		 * `items` are static entries `{ title, meta?, date, route?, href?, late? }`.
 		 * `emptyText` is the text of a day without items. `weekOffset` moves
-		 * the strip whole weeks from the current one.
+		 * the strip whole weeks from the current one. `inset: true` draws the
+		 * strip inside the board's inset (16px above, 24px at the sides, 22px
+		 * below) instead of from card edge to card edge.
 		 *
-		 * @type {{days?: (5|7), source?: {register?: string, schema?: string, filter?: object, limit?: number}, dateField?: string, titleField?: string, metaFields?: Array<string>, itemRoute?: string, lateWhen?: {op?: string, value?: number}, lateField?: string, items?: Array<{title: string, meta?: string, date: string, route?: (string|object), href?: string, late?: boolean}>, emptyText?: string, weekOffset?: number}}
+		 * @type {{days?: (5|7), inset?: boolean, source?: {register?: string, schema?: string, filter?: object, limit?: number}, dateField?: string, titleField?: string, metaFields?: Array<string>, itemRoute?: string, lateWhen?: {op?: string, value?: number}, lateField?: string, items?: Array<{title: string, meta?: string, date: string, route?: (string|object), href?: string, late?: boolean}>, emptyText?: string, weekOffset?: number}}
 		 */
 		content: {
 			type: Object,
@@ -159,6 +161,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.
 		 *
@@ -542,6 +555,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-week-strip--inset {
+	box-sizing: border-box;
+	padding: var(--cn-widget-board-inset, 16px 24px 22px);
+}
+
 .cn-week-strip__state {
 	display: flex;
 	align-items: center;

package/src/css/detail-page.css

@@ -46,6 +46,16 @@
 	row-gap: var(--cn-detail-header-row-gap, 22px);
 }
 
+/* That wrap must not take the actions off the title row. With `flex-basis:
+   auto` a long title claimed its whole text width, so the actions wrapped
+   under it. From a zero basis the title takes what the actions leave and
+   wraps (two lines, then an ellipsis) inside it; only on a page too narrow
+   for 16rem of title beside the actions do the actions drop a row. */
+.cn-detail-page__header--with-widget > :first-child {
+	flex: 1 1 0;
+	min-width: min(100%, 16rem);
+}
+
 .cn-detail-page__header-widget {
 	flex: 1 0 100%;
 	min-width: 0;

package/src/css/index-page.css

@@ -10,6 +10,18 @@
 	padding: calc(5 * var(--default-grid-baseline));
 }
 
+/* The board's header buttons (`headerButtons`) at the end of the title row,
+   centred on the title and its count line. They wrap under the title on a
+   narrow page. */
+.cn-index-page__header-buttons {
+	display: flex;
+	flex-wrap: wrap;
+	align-items: center;
+	align-self: center;
+	gap: calc(2 * var(--default-grid-baseline));
+	margin-inline-start: auto;
+}
+
 .cn-index-page__below-header {
     margin-bottom: calc(4 * var(--default-grid-baseline));
 }

package/src/css/kpi-card.css

@@ -414,6 +414,21 @@ a.cn-kpi-card--stacked:focus-visible {
 	text-decoration: none !important;
 }
 
+/* A stacked stats block (CnStatsBlock `layout: "stacked"`): its unit
+   ("decisions") goes on a muted line of its own under the number, where the
+   stat tile puts its caption (zuiddrecht-pixel-gaps-3). */
+.cn-kpi-card--stacked .cn-stats-block__count {
+	flex-direction: column;
+	align-items: flex-start;
+	gap: var(--cn-kpi-stacked-gap, 6px);
+}
+
+.cn-kpi-card--stacked .cn-stats-block__count-label {
+	font-size: var(--cn-kpi-label-size, 13px);
+	font-weight: 500;
+	color: var(--color-text-maxcontrast);
+}
+
 /* Filled: the card draws its own grey box, for a KPI that is NOT already
    inside a wrapper that draws one. Opt-in via `content.flat: false`. */
 .cn-kpi-card--filled {