@conduction/nextcloud-vue 2.121.0 → 2.123.0

package/src/components/CnFlowsPage/CnFlowBoard.vue

@@ -101,10 +101,10 @@
 		</NcNoteCard>
 
 		<div class="cn-flow-board__body">
-			<aside v-if="showPalette" class="cn-flow-board__card cn-flow-board__palette" data-testid="flow-board-palette">
-				<h3 class="cn-flow-board__card-title">
-					{{ t('nextcloud-vue', 'Steps') }}
-				</h3>
+			<aside v-if="showPalette"
+				class="cn-flow-board__card cn-flow-board__palette"
+				:aria-label="t('nextcloud-vue', 'Steps')"
+				data-testid="flow-board-palette">
 				<section v-for="group in paletteGroups"
 					:key="group.app"
 					class="cn-flow-board__palette-group">
@@ -132,6 +132,8 @@
 				<CnFlowDetail :id="id"
 					:app="app"
 					:run="run"
+					:layoutDirection="flowDirection === 'down' ? 'down' : 'right'"
+					:fitMaxZoom="flowDirection === 'down' ? 1 : 0"
 					:toolbarActions="false"
 					:addStep="!showPalette"
 					@save="$emit('save')"
@@ -177,12 +179,14 @@
 						:emptyText="runTab === 'step' && !store.selectedNodeId ? t('nextcloud-vue', 'Select a step on the canvas to see what it did.') : ''" />
 				</template>
 				<template v-else-if="store.selectedNode">
-					<p class="cn-flow-board__eyebrow">
-						{{ stepTypeLabel }}
-					</p>
 					<h3 class="cn-flow-board__card-title" data-testid="flow-board-step-name">
 						{{ stepName }}
 					</h3>
+					<!-- The step type as a pill under the name (DqFlow "Beslistabel van OpenRegister"). -->
+					<CnStatusBadge :label="stepTypeLabel"
+						variant="purple"
+						class="cn-flow-board__step-type"
+						data-testid="flow-board-step-type" />
 					<dl v-if="stepSettings.length > 0" class="cn-flow-board__settings">
 						<div v-for="setting in stepSettings"
 							:key="setting.key"
@@ -285,6 +289,8 @@ export default {
 		palette: { type: String, default: 'picker' },
 		/** Free text under the path in the palette card. */
 		paletteFootnote: { type: String, default: '' },
+		/** `down` runs the steps top to bottom and opens them at their own size (DqFlow); default `right`, left to right and fitted. */
+		flowDirection: { type: String, default: 'right' },
 		/** An info notice under the path. */
 		notice: { type: String, default: '' },
 		/** The pill beside the title ("Case type flow"). */
@@ -769,8 +775,9 @@ export default {
 	min-height: 520px;
 }
 
+/* Palette, canvas and inspector at 220 / rest / 280 (DqFlow). */
 .cn-flow-board--with-palette .cn-flow-board__body {
-	grid-template-columns: 240px minmax(0, 1fr) 340px;
+	grid-template-columns: 220px minmax(0, 1fr) 280px;
 }
 
 .cn-flow-board__card {
@@ -784,14 +791,22 @@ export default {
 	background: var(--color-main-background);
 }
 
+/* The canvas is the white card with the dot grid; the palette beside it sits
+   on the page ground (DqFlow). */
 .cn-flow-board__canvas {
 	padding: 0;
 	overflow: hidden;
-	background-color: var(--color-background-hover);
-	background-image: radial-gradient(var(--color-border-dark) 1px, transparent 1px);
+	background-color: var(--color-main-background);
+	background-image: radial-gradient(var(--color-border) 1px, transparent 1px);
 	background-size: 16px 16px;
 }
 
+.cn-flow-board__palette {
+	gap: 14px;
+	padding: 14px;
+	background: transparent;
+}
+
 .cn-flow-board__canvas > :first-child {
 	flex: 1 1 auto;
 	min-height: 0;
@@ -809,10 +824,8 @@ export default {
 	font-weight: 600;
 }
 
-.cn-flow-board__eyebrow {
-	margin: 0;
-	color: var(--color-text-maxcontrast);
-	font-size: 13px;
+.cn-flow-board__step-type {
+	align-self: flex-start;
 }
 
 .cn-flow-board__validity,
@@ -841,20 +854,23 @@ export default {
 .cn-flow-board__palette-group {
 	display: flex;
 	flex-direction: column;
-	gap: 4px;
+	gap: 6px;
 }
 
+/* The providing app as a small caps label, no title row above the groups. */
 .cn-flow-board__palette-app {
 	margin: 0;
 	color: var(--color-text-maxcontrast);
-	font-size: 13px;
+	font-size: 12px;
 	font-weight: 600;
+	letter-spacing: 0.06em;
+	text-transform: uppercase;
 }
 
 .cn-flow-board__palette-list {
 	display: flex;
 	flex-direction: column;
-	gap: 4px;
+	gap: 6px;
 	margin: 0;
 	padding: 0;
 	list-style: none;
@@ -866,11 +882,12 @@ export default {
 	--nldesign-component-button-font-weight: 400;
 	width: 100%;
 	min-height: 34px;
-	padding: 6px 10px;
+	padding: 8px 10px;
 	border: 1px solid var(--color-border);
 	border-radius: 8px;
 	background: var(--color-main-background);
 	color: var(--color-main-text);
+	font-size: 14px;
 	font-weight: 400;
 	text-align: start;
 	cursor: pointer;

package/src/components/CnFlowsPage/CnFlowEditorPage.vue

@@ -9,6 +9,7 @@
 		:listLabel="listLabel ? cnTranslate(listLabel) : ''"
 		:palette="palette"
 		:paletteFootnote="paletteFootnote ? cnTranslate(paletteFootnote) : ''"
+		:flowDirection="flowDirection"
 		:notice="notice ? cnTranslate(notice) : ''"
 		:pill="pill ? cnTranslate(pill) : ''"
 		:testSubject="testSubject ? { ...testSubject, label: testSubject.label ? cnTranslate(testSubject.label) : '' } : null"
@@ -123,6 +124,16 @@ export default {
 			default: '',
 		},
 
+		/**
+		 * Board look: `down` lays the steps out top to bottom and opens them
+		 * at their own size instead of zoomed to fit; `right` (default) lays
+		 * them left to right. Manifest key `config.flowDirection`.
+		 */
+		flowDirection: {
+			type: String,
+			default: 'right',
+		},
+
 		/**
 		 * Board look: the records a test run can take as its subject,
 		 * `{ register, schema, labelField?, label? }`. Manifest key

package/src/components/CnGraphCanvas/CnGraphCanvas.vue

@@ -9,7 +9,7 @@
 			:edges="edges"
 			:minZoom="minZoom"
 			:maxZoom="maxZoom"
-			:fitViewOnInit="fitView"
+			:fitViewOnInit="fitView && !fitMaxZoom"
 			:snapToGrid="snapToGrid"
 			:snapGrid="snapGrid"
 			:nodesDraggable="interactive"
@@ -21,7 +21,8 @@
 			@connect="onConnect"
 			@nodeClick="onNodeClick"
 			@edgeClick="onEdgeClick"
-			@paneClick="onPaneClick">
+			@paneClick="onPaneClick"
+			@nodesInitialized="onNodesInitialized">
 			<!-- Per-type node components, Vue Flow's convention. A host that
 			     registers `type: 'trigger'` gets `#node-trigger`; anything
 			     unregistered falls back to CnFlowNode, which carries the
@@ -206,6 +207,15 @@ export default {
 			default: true,
 		},
 
+		/**
+		 * The most that first frame may zoom in. 0 lets it go to `maxZoom`;
+		 * 1 keeps a graph that fits at its own size.
+		 */
+		fitMaxZoom: {
+			type: Number,
+			default: 0,
+		},
+
 		/** Snap dragged nodes to the grid. */
 		snapToGrid: {
 			type: Boolean,
@@ -293,6 +303,13 @@ export default {
 		return { project, zoomIn, zoomOut, zoomTo, fitViewNow, viewport }
 	},
 
+	data() {
+		return {
+			// Whether the capped first frame (`fitMaxZoom`) has been taken.
+			framedOnce: false,
+		}
+	},
+
 	computed: {
 		/**
 		 * @return {boolean} Whether the canvas accepts interaction at all.
@@ -315,6 +332,21 @@ export default {
 	},
 
 	methods: {
+		/**
+		 * Frame the graph once its nodes have a size, no closer than
+		 * `fitMaxZoom`. Only the first time: a step added later must not move
+		 * the view the author is working in.
+		 *
+		 * @return {void}
+		 */
+		onNodesInitialized() {
+			if (!this.fitView || !this.fitMaxZoom || this.framedOnce) {
+				return
+			}
+			this.framedOnce = true
+			this.fitViewNow({ maxZoom: this.fitMaxZoom, padding: 0.1 })
+		},
+
 		/**
 		 * Forward Vue Flow's node changes.
 		 *

package/src/components/CnIndexPage/CnIndexPage.vue

@@ -4218,6 +4218,8 @@ export default {
 			appliedSavedViewId: '',
 			// The sort option the applied view's `overrides.sortOption` selected, so leaving the view can undo it.
 			viewSortOption: '',
+			// The applied view's filters as one comparable key, so the address keeps naming the view until they change.
+			appliedViewFiltersKey: '',
 			/**
 			 * The non-`_` query keys this page owns, i.e. may clear on the next
 			 * persist. Seeded with what it adopted from the query on load, and
@@ -9957,14 +9959,23 @@ export default {
 		 * (same resulting path/query) is swallowed.
 		 *
 		 * @param {{filters?: object, search?: string, sortKey?: ?string, sortOrder?: string, sortKeys?: Array<{key: string, order: string}>}} state Current view state.
-		 * @param {{savedView?: string}} [options] The saved view the address keeps naming, or none.
+		 * Without `savedView` the address keeps the applied view it names while
+		 * the filters are still the view's: a sort, a search or the view's own
+		 * sort option shows the same view's records.
+		 *
+		 * @param {{savedView?: string}} [options] The saved view the address keeps naming, or `''` for none.
 		 * @return {void}
+		 * @spec openspec/changes/saved-view-kept-in-route/specs/saved-view-kept-in-route/spec.md#requirement-the-address-keeps-naming-the-applied-view
 		 */
-		persistViewStateToRoute(state, { savedView = '' } = {}) {
+		persistViewStateToRoute(state, { savedView } = {}) {
 			if (!this.$router || !this.$route) {
 				return
 			}
 			const query = { ...this.$route.query }
+			if (savedView === undefined) {
+				const named = this.appliedSavedViewId !== '' && query.savedView === this.appliedSavedViewId
+				savedView = named && this.viewFiltersKey(state.filters) === this.appliedViewFiltersKey ? this.appliedSavedViewId : ''
+			}
 			// The menu entry of a saved view is active while the address names
 			// it; any other change to the filters is no longer that view.
 			if (savedView !== '') {
@@ -10005,6 +10016,26 @@ export default {
 			this.$router.replace({ query }).catch(() => {})
 		},
 
+		/**
+		 * Filters as one comparable key: empty values dropped, every value a
+		 * sorted list of strings, the keys sorted.
+		 *
+		 * @param {object} filters The filters.
+		 * @return {string}
+		 * @spec openspec/changes/saved-view-kept-in-route/specs/saved-view-kept-in-route/spec.md#requirement-the-address-keeps-naming-the-applied-view
+		 */
+		viewFiltersKey(filters) {
+			const out = {}
+			for (const key of Object.keys(filters || {}).sort()) {
+				const value = filters[key]
+				const values = (Array.isArray(value) ? value : [value]).filter((v) => v !== undefined && v !== null && v !== '').map(String).sort()
+				if (values.length > 0) {
+					out[key] = values
+				}
+			}
+			return JSON.stringify(out)
+		},
+
 		/**
 		 * "Clear all" from the sidebar: reset search, every active filter, the
 		 * sort and the folder-sidebar selection in one fetch + one route
@@ -11755,6 +11786,7 @@ export default {
 				const ctx = typeof this.selfFetchTokenCtx === 'function' ? this.selfFetchTokenCtx() : {}
 				state.filters = resolveFilterTokens(state.filters, ctx)
 			}
+			this.appliedViewFiltersKey = this.viewFiltersKey(state.filters)
 			// A view that carries columns wins while it is applied; one without leaves the person's own layout.
 			const viewColumns = view && view.query && Array.isArray(view.query.columns) ? view.query.columns.map(String) : []
 			this.appliedViewColumns = viewColumns.length > 0 ? viewColumns : null

package/src/components/CnIndexSidebar/CnIndexSidebar.vue

@@ -1,6 +1,7 @@
 <template>
 	<NcAppSidebar
 		v-model:open="internalOpen"
+		class="cn-index-sidebar-panel"
 		:name="resolvedName"
 		:title="resolvedName"
 		:subname="resolvedSubname"

package/src/components/CnObjectSidebar/CnFilesTab.vue

@@ -32,6 +32,7 @@
 			:selectionLabelOne="selectionLabelOne"
 			:showClearSelection="showClearSelection"
 			:sideCards="sideCards"
+			:sideCardsPlacement="sideCardsPlacement"
 			:groupBy="groupBy"
 			:facets="facets"
 			@changed="onBrowserChanged" />
@@ -422,6 +423,8 @@ export default {
 		 * @type {Array<{id: string, title: string, fields?: Array<object>, actions?: Array<object>}>}
 		 */
 		sideCards: { type: Array, default: () => [] },
+		/** Forwarded to CnFilesBrowser: `page-side` puts the side cards in the detail page's side column. */
+		sideCardsPlacement: { type: String, default: 'beside' },
 		/** Forwarded to CnFilesBrowser: the key of a declared column to group the files on. */
 		groupBy: { type: String, default: '' },
 		/**

package/src/components/CnSectionsWidget/CnSectionsWidget.vue

@@ -9,6 +9,7 @@
 		:class="{
 			'cn-sections-widget--cards': cards,
 			'cn-sections-widget--two-column': twoColumn,
+			'cn-sections-widget--grid': gridColumns > 1,
 			'cn-sections-widget--plain': plain,
 		}"
 		data-testid="cn-sections-widget">
@@ -16,7 +17,8 @@
 			v-for="column in columns"
 			:key="column.id"
 			class="cn-sections-widget__column"
-			:class="`cn-sections-widget__column--${column.id}`">
+			:class="`cn-sections-widget__column--${column.id}`"
+			:style="gridColumns > 1 ? { '--cn-sections-columns': gridColumns } : null">
 			<section
 				v-for="section in column.sections"
 				:key="section.key"
@@ -59,6 +61,9 @@
 				</div>
 			</section>
 		</div>
+		<p v-if="footnote" class="cn-sections-widget__footnote" data-testid="cn-sections-widget-footnote">
+			{{ footnote }}
+		</p>
 	</div>
 </template>
 
@@ -123,7 +128,11 @@ export default {
 		 * - `dividers` — draw a rule between sections (default true). `false` stacks them 8px apart with no rule,
 		 *   for a row of strips that each say one thing (a record's banners).
 		 *
-		 * @type {{sections?: Array<object>, cards?: boolean, hideEmpty?: boolean, dividers?: boolean}}
+		 * - `columns` — lay the sections out side by side in this many columns (2 to 4), one column on a narrow
+		 *   screen. Ignored when a section asks for the side column.
+		 * - `footnote` — a line of muted text under the sections.
+		 *
+		 * @type {{sections?: Array<object>, cards?: boolean, hideEmpty?: boolean, dividers?: boolean, columns?: number, footnote?: string}}
 		 */
 		content: {
 			type: Object,
@@ -285,6 +294,32 @@ export default {
 			return this.sections.some((section) => section.column === 'side')
 		},
 
+		/**
+		 * How many columns the sections are laid out in side by side: the
+		 * configured `columns`, capped at four; 1 (stacked) without it or
+		 * when a section asks for the side column.
+		 *
+		 * @return {number}
+		 * @spec openspec/changes/sections-card-grid/specs/sections-card-grid/spec.md#requirement-a-sections-widget-can-lay-its-cards-out-in-columns
+		 */
+		gridColumns() {
+			const n = Math.floor(Number(this.content?.columns))
+			if (!Number.isFinite(n) || n < 2 || this.twoColumn) {
+				return 1
+			}
+			return Math.min(n, 4)
+		},
+
+		/**
+		 * The translated footnote under the sections, or ''.
+		 *
+		 * @return {string}
+		 * @spec openspec/changes/sections-card-grid/specs/sections-card-grid/spec.md#requirement-a-sections-widget-can-close-with-a-footnote
+		 */
+		footnote() {
+			return this.tr(this.content?.footnote || '')
+		},
+
 		/**
 		 * The columns to draw, each with its sections in order.
 		 *
@@ -451,6 +486,22 @@ export default {
 	}
 }
 
+/* Sections side by side (`columns`): at most that many to a row, each at
+   least 240px wide, so a narrow cell wraps them onto more rows. */
+.cn-sections-widget.cn-sections-widget--grid .cn-sections-widget__column {
+	--cn-sections-gap: 14px;
+	display: grid;
+	grid-template-columns: repeat(auto-fit, minmax(min(100%, max(240px, calc((100% - (var(--cn-sections-columns, 2) - 1) * var(--cn-sections-gap)) / var(--cn-sections-columns, 2)))), 1fr));
+	gap: var(--cn-sections-gap);
+	align-items: start;
+}
+
+.cn-sections-widget__footnote {
+	margin: calc(var(--default-grid-baseline, 4px) * 3) 0 0;
+	color: var(--color-text-maxcontrast);
+	font-size: 13px;
+}
+
 /* A host page may space every <section>; these sections are spaced by the column gap only. */
 .cn-sections-widget__section {
 	margin: 0;

package/src/composables/flowGraphLayout.js

@@ -79,6 +79,34 @@ export const FLOW_LAYOUT_MARGIN = 60
  */
 export const FLOW_LAYOUT_TOP = 96
 
+/**
+ * Vertical distance between layers when the run reads top to bottom
+ * (`direction: 'down'`), in canvas pixels: a step card (~62px) plus room for
+ * the line and its arrowhead, as DqFlow draws its steps 100 to 110px apart.
+ *
+ * @type {number}
+ */
+export const FLOW_LAYOUT_LAYER_HEIGHT_DOWN = 110
+
+/**
+ * Where a node sits, from its layer (run order) and its lane (branch).
+ *
+ * `right` (default): layers are columns left to right, lanes are rows.
+ * `down`: layers are rows top to bottom, lanes are columns.
+ *
+ * @param {number} layer Zero-based layer.
+ * @param {number} lane Zero-based lane.
+ * @param {string} direction `right` or `down`.
+ * @param {number} top The y of the first layer or row.
+ * @return {{x: number, y: number}} The point.
+ */
+function cellPoint(layer, lane, direction, top) {
+	if (direction === 'down') {
+		return { x: FLOW_LAYOUT_MARGIN + (lane * FLOW_LAYOUT_COLUMN_WIDTH), y: top + (layer * FLOW_LAYOUT_LAYER_HEIGHT_DOWN) }
+	}
+	return { x: FLOW_LAYOUT_MARGIN + (layer * FLOW_LAYOUT_COLUMN_WIDTH), y: top + (lane * FLOW_LAYOUT_ROW_HEIGHT) }
+}
+
 /**
  * The position a node carries, in either of the two spellings in circulation.
  *
@@ -324,9 +352,11 @@ function orderRows(nodes, lines, columns) {
  * @param {Array<object>} nodes The flow's nodes.
  * @param {Array<{source: string, target: string}>} lines The expanded edges.
  * @param {Array<string>} startIds The ids a run enters through.
+ * @param {object} [options] `{ direction }`: `right` (default) runs left to
+ *   right, `down` runs top to bottom with branches side by side.
  * @return {Array<object>} New node objects carrying computed positions.
  */
-export function layoutFlowNodes(nodes, lines, startIds) {
+export function layoutFlowNodes(nodes, lines, startIds, options = {}) {
 	const list = Array.isArray(nodes) ? nodes : []
 	if (!list.length) {
 		return []
@@ -336,8 +366,7 @@ export function layoutFlowNodes(nodes, lines, startIds) {
 	const rows = orderRows(list, lines, columns)
 
 	return list.map((node) => {
-		const x = FLOW_LAYOUT_MARGIN + (columns.get(node.id) * FLOW_LAYOUT_COLUMN_WIDTH)
-		const y = FLOW_LAYOUT_TOP + (rows.get(node.id) * FLOW_LAYOUT_ROW_HEIGHT)
+		const { x, y } = cellPoint(columns.get(node.id), rows.get(node.id), options.direction, FLOW_LAYOUT_TOP)
 		return { ...node, x, y, position: { x, y } }
 	})
 }
@@ -359,9 +388,10 @@ export function layoutFlowNodes(nodes, lines, startIds) {
  * @param {Array<object>} nodes The flow's nodes, some positioned and some not.
  * @param {Array<{source: string, target: string}>} lines The expanded edges.
  * @param {Array<string>} startIds The ids a run enters through.
+ * @param {object} [options] `{ direction }`, as {@link layoutFlowNodes}.
  * @return {Array<object>} The same array shape, loose nodes placed beneath.
  */
-export function placeLooseNodes(nodes, lines, startIds) {
+export function placeLooseNodes(nodes, lines, startIds, options = {}) {
 	const list = Array.isArray(nodes) ? nodes : []
 	const loose = list.filter((node) => readNodePoint(node) === null)
 	if (!loose.length) {
@@ -395,8 +425,7 @@ export function placeLooseNodes(nodes, lines, startIds) {
 		const row = rowsTaken.get(column) || 0
 		rowsTaken.set(column, row + 1)
 
-		const x = FLOW_LAYOUT_MARGIN + (column * FLOW_LAYOUT_COLUMN_WIDTH)
-		const y = top + (row * FLOW_LAYOUT_ROW_HEIGHT)
+		const { x, y } = cellPoint(column, row, options.direction, top)
 		return { ...node, x, y, position: { x, y } }
 	})
 }

package/src/composables/useFlowStore.js

@@ -101,6 +101,10 @@ export const useFlowStore = defineStore('cnFlow', {
 		flow: emptyFlow(),
 		flows: [],
 
+		// How the automatic layout runs: `right` (left to right) or `down`
+		// (top to bottom). Set by the editor that hosts the canvas.
+		layoutDirection: 'right',
+
 		// Snapshots of `flow`, oldest first, for Ctrl+Z.
 		//
 		// A canvas is direct manipulation: a mis-drag or a mis-aimed Delete
@@ -1659,7 +1663,7 @@ export const useFlowStore = defineStore('cnFlow', {
 				return
 			}
 
-			this.flow.nodes = layoutFlowNodes(this.nodes, this.canvasEdges, this.startNodeIds)
+			this.flow.nodes = layoutFlowNodes(this.nodes, this.canvasEdges, this.startNodeIds, { direction: this.layoutDirection })
 			this.dirty = true
 		},
 
@@ -1693,12 +1697,12 @@ export const useFlowStore = defineStore('cnFlow', {
 			}
 
 			if (needsFullLayout(nodes)) {
-				this.flow.nodes = layoutFlowNodes(nodes, this.canvasEdges, this.startNodeIds)
+				this.flow.nodes = layoutFlowNodes(nodes, this.canvasEdges, this.startNodeIds, { direction: this.layoutDirection })
 				return true
 			}
 
 			if (nodes.some((node) => !this.hasPosition(node))) {
-				this.flow.nodes = placeLooseNodes(nodes, this.canvasEdges, this.startNodeIds)
+				this.flow.nodes = placeLooseNodes(nodes, this.canvasEdges, this.startNodeIds, { direction: this.layoutDirection })
 				return true
 			}
 

package/src/css/detail-page.css

@@ -470,6 +470,12 @@
 	gap: calc(5 * var(--default-grid-baseline));
 }
 
+/* A body widget's own cards (`cnDetailSideColumn`) stand in the column's
+   flow, at its gap, and the slot takes no room while it is empty. */
+.cn-detail-page__side-takeover {
+	display: contents;
+}
+
 /* The record as a place (case-page-and-list-as-a-place) */
 
 /* A skip link that reaches the page's declared primary action. Off screen

package/src/css/look-board-detail.css

@@ -652,9 +652,10 @@
 	display: flex;
 }
 
-/* The notice at the top of the side column: radius 12, padding 14px 16px. */
-.cn-look-board .cn-detail-page__side-item--notice .cn-widget-wrapper,
-.cn-look-board .cn-detail-page__side-item--notice .cn-banner-widget,
+/* The notice at the top of the side column: one tinted block, radius 12,
+   padding 14px 16px. Only the outer layer paints; the card wrapper, the
+   banner and its note card inside it stay flat, so the notice is not drawn
+   as a box in a box. */
 .cn-look-board .cn-detail-page__side-item--notice > * {
 	background: var(--cn-board-notice-bg);
 	border: none;
@@ -663,6 +664,23 @@
 	padding: 14px 16px;
 }
 
+.cn-look-board .cn-detail-page__side-item--notice > * .cn-widget-wrapper,
+.cn-look-board .cn-detail-page__side-item--notice > * .cn-widget-wrapper__content,
+.cn-look-board .cn-detail-page__side-item--notice .cn-banner-widget,
+.cn-look-board .cn-detail-page__side-item--notice .cn-banner-widget__card {
+	background: transparent;
+	border: none;
+	border-radius: 0;
+	margin: 0;
+	padding: 0;
+}
+
+/* A notice whose condition does not hold renders no banner; its slot then
+   takes no room instead of standing as an empty tinted block. */
+.cn-look-board .cn-detail-page__side-item--notice:not(:has(.cn-banner-widget)) {
+	display: none;
+}
+
 /* The History card ends with the record's identifier. */
 .cn-look-board .cn-detail-page__side-item--with-identifier .cn-widget-wrapper {
 	border-bottom: none;
@@ -692,14 +710,16 @@
 }
 
 /* The kicker keeps its tone under a theme that colours every h3 with
-   `!important` (thematiq's heading colour); only `!important` beats it. */
+   `!important` (thematiq's heading colour); only `!important` beats it. The
+   boards set it in sentence case ("Wat nu? Stap 2: in behandeling", DqZaak,
+   DqSociaalDomein), not as the plain look's spaced capitals. */
 .cn-look-board .cn-next-step-card--board .cn-next-step-card__title.cn-next-step-card__title {
 	color: var(--color-primary-element-light-text) !important;
 	font-size: 13px !important;
 	font-weight: 700;
-	letter-spacing: 0.06em;
+	letter-spacing: 0;
 	line-height: normal;
-	text-transform: uppercase;
+	text-transform: none;
 }
 
 .cn-look-board .cn-next-step-card--board .cn-next-step-card__list {
@@ -974,3 +994,30 @@
 .cn-look-board .cn-tasks-widget .cn-tasks-widget__cell-actions .button-vue .button-vue__text.button-vue__text {
 	padding-inline: 0;
 }
+
+/* ---- Grouped cards (CnGroupedCardsWidget, DqZaaktype "Fasen en taken") --- */
+/* Groups 14px apart, each padded 14px with a 10px radius and a bold title; a
+   card in a group is padded 9px 12px with the 8px control radius, its title
+   15px. The doubled class outranks the widget's scoped rules.
+   @spec openspec/changes/board-grouped-cards/specs/board-grouped-cards/spec.md#requirement-board-grouped-cards-take-the-boards-group-and-card-shape */
+.cn-look-board .cn-grouped-cards__grid.cn-grouped-cards__grid {
+	gap: 14px;
+}
+
+.cn-look-board .cn-grouped-cards__group.cn-grouped-cards__group {
+	padding: 14px;
+	border-radius: 10px;
+}
+
+.cn-look-board .cn-grouped-cards__group-title.cn-grouped-cards__group-title {
+	font-weight: 700;
+}
+
+.cn-look-board .cn-grouped-cards__item.cn-grouped-cards__item {
+	padding: 9px 12px;
+	border-radius: var(--cn-board-control-radius, 8px);
+}
+
+.cn-look-board .cn-grouped-cards__item-title.cn-grouped-cards__item-title {
+	font-size: 15px;
+}