@conduction/nextcloud-vue 2.92.0 → 2.93.0

package/l10n/en.json

@@ -1494,7 +1494,30 @@
       "{on} of %n are in the menu"
     ],
     "Put it in the menu:": "Put it in the menu:",
-    "Admin settings": "Admin settings"
+    "Admin settings": "Admin settings",
+    "Support this app": "Support this app",
+    "No features with this status": "No features with this status",
+    "Learn more about {title}": "Learn more about {title}",
+    "Learn more": "Learn more",
+    "Next on the roadmap": "Next on the roadmap",
+    "Coming next": "Coming next",
+    "The most requested items from the issue tracker.": "The most requested items from the issue tracker.",
+    "Opened {date}": "Opened {date}",
+    "See the whole roadmap": "See the whole roadmap",
+    "Features and roadmap": "Features and roadmap",
+    "Beta": "Beta",
+    "Planned": "Planned",
+    "{status}, {expected}": "{status}, {expected}",
+    "Build on this app": "Build on this app",
+    "AI skills": "AI skills",
+    "%n feature": [
+      "%n feature",
+      "%n features"
+    ],
+    "Your account": "Your account",
+    "Only for you. Colleagues keep their own settings.": "Only for you. Colleagues keep their own settings.",
+    "Sections of the settings": "Sections of the settings",
+    "Changes are saved straight away": "Changes are saved straight away"
   },
   "plurals": {
     "{count} selected": [

package/l10n/nl.json

@@ -1680,7 +1680,30 @@
       "{on} van %n staat in het menu",
       "{on} van %n staan in het menu"
     ],
-    "Put it in the menu:": "In het menu zetten:"
+    "Put it in the menu:": "In het menu zetten:",
+    "Support this app": "Steun deze app",
+    "No features with this status": "Geen functies met deze status",
+    "Learn more about {title}": "Lees meer over {title}",
+    "Learn more": "Lees meer",
+    "Next on the roadmap": "Hierna op de roadmap",
+    "Coming next": "Hierna",
+    "The most requested items from the issue tracker.": "De meest gevraagde items uit de issuetracker.",
+    "Opened {date}": "Geopend {date}",
+    "See the whole roadmap": "Bekijk de hele roadmap",
+    "Features and roadmap": "Functies en roadmap",
+    "Beta": "Beta",
+    "Planned": "Gepland",
+    "{status}, {expected}": "{status}, {expected}",
+    "Build on this app": "Bouw verder op deze app",
+    "AI skills": "AI-vaardigheden",
+    "%n feature": [
+      "%n functie",
+      "%n functies"
+    ],
+    "Your account": "Uw account",
+    "Only for you. Colleagues keep their own settings.": "Alleen voor jou. Collega's houden hun eigen instellingen.",
+    "Sections of the settings": "Onderdelen van de instellingen",
+    "Changes are saved straight away": "Wijzigingen worden meteen bewaard"
   },
   "plurals": {
     "{count} selected": [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@conduction/nextcloud-vue",
-  "version": "2.92.0",
+  "version": "2.93.0",
   "description": "Shared Vue component library for Conduction Nextcloud apps — complements @nextcloud/vue with higher-level components, OpenRegister integration, and NL Design System support",
   "homepage": "https://github.com/ConductionNL/nextcloud-vue#readme",
   "bugs": {

package/src/components/CnAppRoot/CnAppRoot.md

@@ -85,6 +85,8 @@ With loading state, custom components, translate, permissions, and custom page t
 | `permissions` | Array | No | `[]` | Permission strings for the current user; forwarded to `CnAppNav` for menu filtering |
 | `pageTypes` | Object | No | `null` | Page-type registry map (`type → component`). Falls back to the library's `defaultPageTypes`. Extend with `{ ...defaultPageTypes, report: MyReportPage }` |
 | `userSettingsTitle` | String | No | `''` | Title shown at the top of the hosted `NcAppSettingsDialog`. Empty (the default) resolves to "User settings" from the library catalogue ("Persoonlijke instellingen" in Dutch), then the app's `translate`. Override per app to brand the modal (e.g. `'Decidiq preferences'`). |
+| `userSettingsEyebrow` | String | No | `''` | Board look: the line above the user-settings title. Empty uses "Your account" ("Uw account"). Goes through the app's `translate`. |
+| `userSettingsSubtitle` | String | No | `''` | Board look: the sentence under the user-settings title. Empty uses "Only for you. Colleagues keep their own settings." Goes through the app's `translate`. |
 | `userSettingsSections` | Array | No | `null` | The user-settings sections to draw, in order: `app` (the app's slot content), `notifications`, `credentials`, `walkthrough`, `integrations`. A key left out is not drawn. `null` keeps the defaults: every section after `#user-settings-sections` content, or only the `#user-settings` content and the integrations section. |
 | `adminSettingsTitle` | String | No | `''` | Title shown at the top of the admin-settings `NcAppSettingsDialog`. Empty (the default) resolves to `translate('Administration')`. Override per app (e.g. `'Pipelinq administration'`). |
 | `requiresApps` | Array | No | `['openregister']` | App ids that MUST be installed for the host app to function. Checked against the OCS capabilities API on mount. When any required app is missing, CnAppRoot renders the empty state from the `or-missing` slot (default: `<NcEmptyContent>`) instead of the renderer. Pass `[]` to opt out (e.g. launchpad, the docs/styleguide app) — useful for any consumer that does not depend on OpenRegister. |

package/src/components/CnAppRoot/CnAppRoot.vue

@@ -550,10 +550,9 @@
 			    integrations section are drawn, unless `userSettingsSections`
 			    names more.
 			-->
-			<NcAppSettingsDialog
-				:open="userSettingsOpen"
-				:showNavigation="true"
-				:name="resolvedUserSettingsTitle"
+			<component
+				:is="resolvedLook === 'board' ? 'CnUserSettingsDialog' : 'NcAppSettingsDialog'"
+				v-bind="userSettingsDialogProps"
 				@update:open="userSettingsOpen = $event">
 				<template v-for="section in userSettingsSectionOrder()" :key="section">
 					<template v-if="section === 'app'">
@@ -573,6 +572,9 @@
 					<NcAppSettingsSection v-else-if="section === 'credentials' && userSettingsOpen"
 						id="credentials"
 						:name="libraryCopy('Credentials')">
+						<template v-if="resolvedLook === 'board'" #icon>
+							<KeyOutline :size="18" />
+						</template>
 						<CnCredentials
 							scope="personal"
 							:appId="appId"
@@ -587,6 +589,9 @@
 					<NcAppSettingsSection v-else-if="section === 'walkthrough' && walkthroughEnabled"
 						id="cn-walkthrough"
 						:name="restartWalkthroughSectionName">
+						<template v-if="resolvedLook === 'board'" #icon>
+							<Play :size="18" />
+						</template>
 						<p class="cn-app-root__walkthrough-hint">
 							{{ restartWalkthroughHint }}
 						</p>
@@ -628,6 +633,9 @@
 					<NcAppSettingsSection v-else-if="section === 'integrations' && userSettingsOpen && integrationEntries.length"
 						id="cn-integrations"
 						:name="translate('Integrations')">
+						<template v-if="resolvedLook === 'board'" #icon>
+							<OpenInNew :size="18" />
+						</template>
 						<p class="cn-app-root__integrations-hint">
 							{{ libraryCopy('These open in another app.') }}
 						</p>
@@ -653,7 +661,7 @@
 						</ul>
 					</NcAppSettingsSection>
 				</template>
-			</NcAppSettingsDialog>
+			</component>
 
 			<!--
 			  ADR-079 Step 2: the generic admin-settings modal has been REMOVED.
@@ -693,6 +701,7 @@ import { generateUrl } from '@nextcloud/router'
 import { NcAppContent, NcAppSettingsDialog, NcAppSettingsSection, NcButton, NcContent, NcEmptyContent, NcLoadingIcon, NcNoteCard } from '@nextcloud/vue'
 import { computed, reactive, shallowRef, watch } from 'vue'
 import DatabaseSearchOutline from 'vue-material-design-icons/DatabaseSearchOutline.vue'
+import KeyOutline from 'vue-material-design-icons/KeyOutline.vue'
 import OpenInNew from 'vue-material-design-icons/OpenInNew.vue'
 import Play from 'vue-material-design-icons/Play.vue'
 import Restart from 'vue-material-design-icons/Restart.vue'
@@ -709,6 +718,7 @@ import CnObjectSidebar from '../CnObjectSidebar/CnObjectSidebar.vue'
 import CnSetupWizard from '../CnSetupWizard/CnSetupWizard.vue'
 import CnSupportDialog from '../CnSupportDialog/CnSupportDialog.vue'
 import CnTenantBadge from '../CnTenantBadge/CnTenantBadge.vue'
+import CnUserSettingsDialog from '../CnUserSettingsDialog/CnUserSettingsDialog.vue'
 import CnWalkthrough from '../CnWalkthrough/CnWalkthrough.vue'
 import { DEFAULT_CHAT_APP_ID } from '../../composables/aiChatConfig.js'
 import { useAppInstaller } from '../../composables/useAppInstaller.js'
@@ -818,6 +828,7 @@ export default {
 		NcLoadingIcon,
 		NcNoteCard,
 		DatabaseSearchOutline,
+		KeyOutline,
 		OpenInNew,
 		Play,
 		Restart,
@@ -832,6 +843,7 @@ export default {
 		CnObjectSidebar,
 		CnSupportDialog,
 		CnNotificationPreferences,
+		CnUserSettingsDialog,
 		CnCredentials,
 		CnTenantBadge,
 	},
@@ -1648,6 +1660,29 @@ export default {
 			default: '',
 		},
 
+		/**
+		 * Board look: the line above the user-settings title. Empty uses
+		 * the library's "Your account".
+		 *
+		 * @type {string}
+		 */
+		userSettingsEyebrow: {
+			type: String,
+			default: '',
+		},
+
+		/**
+		 * Board look: the sentence under the user-settings title. Empty
+		 * uses the library's "Only for you. Colleagues keep their own
+		 * settings."
+		 *
+		 * @type {string}
+		 */
+		userSettingsSubtitle: {
+			type: String,
+			default: '',
+		},
+
 		/**
 		 * The sections of the user-settings modal, in the order they are
 		 * drawn. Keys: `app` (the content of the `#user-settings-sections`
@@ -3065,6 +3100,32 @@ export default {
 			return this.userSettingsTitle || this.libraryCopy('User settings')
 		},
 
+		/**
+		 * The props of the user-settings dialog: `NcAppSettingsDialog`'s, or
+		 * under the board look CnUserSettingsDialog's (eyebrow, subtitle and
+		 * the app's name for the footer note).
+		 *
+		 * @spec openspec/changes/user-settings-board-dialog/specs/user-settings-board-dialog/spec.md#requirement-the-user-settings-dialog-takes-the-board-look
+		 * @return {object}
+		 */
+		userSettingsDialogProps() {
+			if (this.resolvedLook !== 'board') {
+				return { open: this.userSettingsOpen, showNavigation: true, name: this.resolvedUserSettingsTitle }
+			}
+			const props = {
+				open: this.userSettingsOpen,
+				title: this.resolvedUserSettingsTitle,
+				appName: this.appDisplayName || (this.manifest && this.manifest.name) || this.appId || '',
+			}
+			if (this.userSettingsEyebrow) {
+				props.eyebrow = this.translate(this.userSettingsEyebrow)
+			}
+			if (this.userSettingsSubtitle) {
+				props.subtitle = this.translate(this.userSettingsSubtitle)
+			}
+			return props
+		},
+
 		/**
 		 * Title for the admin-settings modal. Prop override, else the
 		 * translated "Administration". Mirrors `resolvedUserSettingsTitle`.

package/src/components/CnChoiceCards/CnChoiceCards.md

@@ -61,3 +61,30 @@ four lines `description-lines` shows by default:
     ]" />
 </div>
 ```
+
+One option per row with `layout="rows"`, an option that cannot be picked yet
+(`disabled` with a `disabledReason`), and fields for the chosen option right
+under it through the `option-actions` slot (scope `{ option, selected }`):
+
+```vue
+<div style="max-width: 560px;">
+  <CnChoiceCards
+    label="Next step"
+    layout="rows"
+    :model-value="'decide'"
+    :options="[
+      { value: 'decide', label: 'Take a decision',
+        description: 'Record the decision and inform the applicant.' },
+      { value: 'advice', label: 'Ask for advice',
+        description: 'Send the case to the advisory committee.' },
+      { value: 'close', label: 'Close the case', disabled: true,
+        disabledReason: 'A decision has to be taken first.' },
+    ]">
+    <template #option-actions="{ option, selected }">
+      <p v-if="selected && option.value === 'decide'" style="margin: 0 0 0 32px;">Decision fields go here.</p>
+    </template>
+  </CnChoiceCards>
+</div>
+```
+
+`columns` fixes the card grid's column count; `:columns="1"` stacks the cards in one column.

package/src/components/CnChoiceCards/CnChoiceCards.vue

@@ -14,6 +14,45 @@
 			{{ emptyText }}
 		</NcNoteCard>
 
+		<!-- Rows: one full-width option per row, the input on the left and the
+		     title over a muted description, no card chrome. -->
+		<div v-else-if="layout === 'rows'" class="cn-choice-cards__rows" data-testid="cn-choice-cards-rows">
+			<div
+				v-for="option in normalizedOptions"
+				:key="String(option.value)"
+				class="cn-choice-cards__cell">
+				<label
+					class="cn-choice-cards__row"
+					:class="{ 'cn-choice-cards__row--selected': isSelected(option), 'cn-choice-cards__row--disabled': isDisabled(option) }">
+					<input
+						class="cn-choice-cards__row-input"
+						:type="multiple ? 'checkbox' : 'radio'"
+						:name="groupName"
+						:value="String(option.value)"
+						:checked="isSelected(option)"
+						:disabled="isDisabled(option)"
+						:aria-describedby="option.disabled && option.disabledReason ? reasonId(option) : null"
+						@change="onToggle(option)">
+					<CnIcon v-if="option.icon"
+						:name="option.icon"
+						:size="20"
+						class="cn-choice-cards__row-icon" />
+					<span class="cn-choice-cards__row-text">
+						<span class="cn-choice-cards__row-title">{{ option.label }}</span>
+						<span v-if="option.description" class="cn-choice-cards__row-description">{{ option.description }}</span>
+						<span
+							v-if="option.disabled && option.disabledReason"
+							:id="reasonId(option)"
+							class="cn-choice-cards__reason"
+							data-testid="cn-choice-cards-reason">{{ option.disabledReason }}</span>
+					</span>
+				</label>
+				<div v-if="$slots['option-actions']" class="cn-choice-cards__actions">
+					<slot name="option-actions" :option="option" :selected="isSelected(option)" />
+				</div>
+			</div>
+		</div>
+
 		<div v-else class="cn-choice-cards__grid" :style="gridStyle">
 			<!-- One cell per option: the card's label, and below it whatever the
 			     `#option-actions` slot adds. The slot sits OUTSIDE the label on
@@ -37,7 +76,8 @@
 						:name="groupName"
 						:value="String(option.value)"
 						:checked="isSelected(option)"
-						:disabled="disabled"
+						:disabled="isDisabled(option)"
+						:aria-describedby="option.disabled && option.disabledReason ? reasonId(option) : null"
 						@change="onToggle(option)">
 					<CnCard
 						class="cn-choice-cards__card"
@@ -53,6 +93,11 @@
 							<CnIcon :name="option.icon" :size="20" />
 						</template>
 					</CnCard>
+					<span
+						v-if="option.disabled && option.disabledReason"
+						:id="reasonId(option)"
+						class="cn-choice-cards__reason cn-choice-cards__reason--card"
+						data-testid="cn-choice-cards-reason">{{ option.disabledReason }}</span>
 				</label>
 				<div v-if="$slots['option-actions']" class="cn-choice-cards__actions">
 					<!-- @slot option-actions Content below one card, outside its label
@@ -109,7 +154,9 @@ export default {
 	props: {
 		/**
 		 * The options to offer. Each: `{ value, label, description?, stats?,
-		 * tags?, icon? }` — `icon` is a PascalCase MDI name resolved by CnIcon.
+		 * tags?, icon?, disabled?, disabledReason? }` — `icon` is a PascalCase
+		 * MDI name resolved by CnIcon; a `disabled` option is greyed out and
+		 * cannot be picked, with `disabledReason` shown under it.
 		 */
 		options: {
 			type: Array,
@@ -156,6 +203,23 @@ export default {
 			default: () => t('nextcloud-vue', 'Nothing to choose from here.'),
 		},
 
+		/**
+		 * `cards`: a grid of cards with stats and tags. `rows`: one option per
+		 * row, full width, the input on the left and the title over a muted
+		 * description; with `multiple` and one option it is a checkbox card.
+		 */
+		layout: {
+			type: String,
+			default: 'cards',
+			validator: (value) => ['cards', 'rows'].includes(value),
+		},
+
+		/** Columns of the card grid; 0 lets the grid fit as many as the width allows. */
+		columns: {
+			type: Number,
+			default: 0,
+		},
+
 		/** Lines of description shown before clamping. */
 		descriptionLines: {
 			type: Number,
@@ -226,6 +290,9 @@ export default {
 		 * @return {object} A `gridTemplateColumns` override, or `{}`.
 		 */
 		gridStyle() {
+			if (this.columns > 0) {
+				return { gridTemplateColumns: `repeat(${this.columns}, minmax(0, 1fr))` }
+			}
 			const count = this.normalizedOptions.length
 			if (count > 0 && count <= 2) {
 				return { gridTemplateColumns: `repeat(${count}, minmax(0, 1fr))` }
@@ -244,6 +311,26 @@ export default {
 		 * @param {object} option The normalised option.
 		 * @return {boolean} True when selected.
 		 */
+		/**
+		 * Whether an option cannot be picked: the whole group is disabled, or the option is.
+		 *
+		 * @param {object} option The normalised option.
+		 * @return {boolean} True when disabled.
+		 */
+		isDisabled(option) {
+			return this.disabled || option.disabled === true
+		},
+
+		/**
+		 * Id of an option's disabled reason, for `aria-describedby`.
+		 *
+		 * @param {object} option The normalised option.
+		 * @return {string} The id.
+		 */
+		reasonId(option) {
+			return `${this.groupName}-reason-${String(option.value).replace(/[^A-Za-z0-9_-]/g, '-')}`
+		},
+
 		isSelected(option) {
 			return this.selectedValues.some((v) => String(v) === String(option.value))
 		},
@@ -255,7 +342,7 @@ export default {
 		 * @return {void}
 		 */
 		onToggle(option) {
-			if (this.disabled) {
+			if (this.isDisabled(option)) {
 				return
 			}
 			if (!this.multiple) {
@@ -368,4 +455,82 @@ export default {
 .cn-choice-cards__input:disabled + :deep(.cn-card) {
 	opacity: 0.6;
 }
+
+.cn-choice-cards__rows {
+	display: flex;
+	flex-direction: column;
+	gap: 8px;
+}
+
+.cn-choice-cards__row {
+	display: flex;
+	align-items: flex-start;
+	gap: 12px;
+	padding: 14px 16px;
+	border: 1px solid var(--color-border);
+	border-radius: var(--border-radius-large, 8px);
+	background: var(--color-main-background);
+	cursor: pointer;
+}
+
+.cn-choice-cards__row:hover {
+	border-color: var(--color-border-dark);
+}
+
+.cn-choice-cards__row--selected,
+.cn-choice-cards__row--selected:hover {
+	border-color: var(--color-primary-element);
+	/* The second pixel of the 2px selected border, without moving the content. */
+	box-shadow: inset 0 0 0 1px var(--color-primary-element);
+	background: var(--color-primary-element-light);
+}
+
+.cn-choice-cards__row--disabled {
+	cursor: default;
+	opacity: 0.6;
+}
+
+.cn-choice-cards__row:has(.cn-choice-cards__row-input:focus-visible) {
+	outline: 2px solid var(--color-primary-element);
+	outline-offset: 2px;
+}
+
+.cn-choice-cards__row-input {
+	flex: none;
+	margin: 2px 0 0;
+	accent-color: var(--color-primary-element);
+	cursor: inherit;
+}
+
+.cn-choice-cards__row-icon {
+	flex: none;
+}
+
+.cn-choice-cards__row-text {
+	display: flex;
+	flex-direction: column;
+	gap: 2px;
+	min-width: 0;
+}
+
+.cn-choice-cards__row-title {
+	font-size: 15px;
+	font-weight: 600;
+}
+
+.cn-choice-cards__row-description {
+	font-size: 13px;
+	color: var(--color-text-maxcontrast);
+}
+
+.cn-choice-cards__reason {
+	font-size: 13px;
+	color: var(--color-text-maxcontrast);
+	font-style: italic;
+}
+
+.cn-choice-cards__reason--card {
+	display: block;
+	margin-block-start: 4px;
+}
 </style>

package/src/components/CnDashboardPage/CnDashboardPage.vue

@@ -13,6 +13,7 @@
 	<div
 		class="cn-dashboard-page"
 		:class="{ 'cn-dashboard-page--board': isBoardLook }"
+		:style="{ '--cn-dashboard-grid-margin': `${gridMargin}px` }"
 		data-testid="cn-dashboard-page">
 		<!-- Header. `showHeader: false` drops the whole row (title, description,
 		     header actions, edit toggle) for a page that opens with its own
@@ -1252,12 +1253,16 @@ export default {
 		 * October 2026", `"full"` uses the whole display name. The page
 		 * `description`, when set, follows after another middle dot. Off by
 		 * default: the subtitle is the description alone, as before.
+		 * `"date"` leads with the date alone, and `{ label }` puts the
+		 * translated label where the greeting would be ("Customer contact ·
+		 * Wednesday 7 October 2026 · ...").
 		 *
 		 * @spec openspec/changes/screens-dashboard-greeting-header/specs/dashboard-page/spec.md#requirement-the-header-subtitle-can-greet-the-reader
-		 * @type {boolean|string}
+		 * @spec openspec/changes/dashboard-greeting-label/specs/dashboard-page/spec.md#requirement-the-header-subtitle-can-lead-with-a-label-or-the-date
+		 * @type {boolean|string|object}
 		 */
 		greeting: {
-			type: [Boolean, String],
+			type: [Boolean, String, Object],
 			default: false,
 		},
 
@@ -1992,6 +1997,10 @@ export default {
 		 * @return {string}
 		 */
 		greetingLine() {
+			if (this.greeting && typeof this.greeting === 'object') {
+				const label = typeof this.greeting.label === 'string' ? this.greeting.label.trim() : ''
+				return label ? this.effectiveTranslate(label) : ''
+			}
 			if (this.greeting !== true && this.greeting !== 'first' && this.greeting !== 'full') {
 				return ''
 			}
@@ -2014,17 +2023,20 @@ export default {
 		},
 
 		/**
-		 * The header subtitle: with `greeting` on, the greeting, today's date
-		 * written out and the description, joined by a middle dot; else the
-		 * description alone, as before.
+		 * The header subtitle: with `greeting` on, the greeting (or the
+		 * label), today's date written out and the description, joined by a
+		 * middle dot; with `greeting: "date"` the date leads, capitalised;
+		 * else the description alone, as before.
 		 *
 		 * @spec openspec/changes/screens-dashboard-greeting-header/specs/dashboard-page/spec.md#requirement-the-header-subtitle-can-greet-the-reader
+		 * @spec openspec/changes/dashboard-greeting-label/specs/dashboard-page/spec.md#requirement-the-header-subtitle-can-lead-with-a-label-or-the-date
 		 * @return {string}
 		 */
 		subtitleText() {
 			const description = this.description ? this.resolvedDescription : ''
+			const dateOnly = this.greeting === 'date'
 			const greeting = this.greetingLine
-			if (greeting === '') {
+			if (greeting === '' && !dateOnly) {
 				return description
 			}
 			const options = { weekday: 'long', day: 'numeric', month: 'long', year: 'numeric' }
@@ -2034,6 +2046,9 @@ export default {
 			} catch {
 				date = new Intl.DateTimeFormat(undefined, options).format(new Date())
 			}
+			if (dateOnly) {
+				date = date.charAt(0).toLocaleUpperCase() + date.slice(1)
+			}
 			return [greeting, date, description].filter((part) => part !== '').join(' · ')
 		},
 
@@ -4899,6 +4914,15 @@ export default {
 	margin-bottom: var(--cn-board-section-gap, 16px);
 }
 
+/* Board look: GridStack insets every card by the grid margin on each side, so
+   the cards started a margin to the right of the KPI row and the header. The
+   grid reaches out by that margin, so the card edges line up with the page's
+   (dashboard-grid-flush). */
+.cn-dashboard-page--board :deep(.cn-dashboard-grid) {
+	width: auto;
+	margin-inline: calc(-1 * var(--cn-dashboard-grid-margin, 12px));
+}
+
 .cn-dashboard-page__kpi-cell {
 	display: flex;
 	min-width: 0;
@@ -5129,6 +5153,21 @@ export default {
 	.cn-dashboard-page--board .cn-dashboard-page__kpi-cell {
 		min-height: 44px;
 	}
+
+	/* The widget Actions menu shows its icon only, so the card title keeps
+	   the room; the name stays for assistive tech. */
+	.cn-dashboard-page--board :deep(.cn-widget-wrapper__actions .action-item__menutoggle) {
+		min-width: 44px;
+	}
+
+	.cn-dashboard-page--board :deep(.cn-widget-wrapper__actions .action-item__menutoggle .button-vue__text) {
+		position: absolute;
+		width: 1px;
+		height: 1px;
+		overflow: hidden;
+		clip-path: inset(50%);
+		white-space: nowrap;
+	}
 }
 
 /* What a registry widget reports for its card header (`header` event): the

package/src/components/CnDataTable/CnDataTable.vue

@@ -404,7 +404,7 @@ import CnColumnFilterPopover from './CnColumnFilterPopover.vue'
 import { useClickDragGuard } from '../../composables/useClickDragGuard.js'
 import { normalizeLook } from '../../composables/useLook.js'
 import { clearedColumnFilterParams, columnFilterDef, columnFilterParams, columnFilterState, isColumnFilterActive, isColumnSortable } from '../../utils/columnFilters.js'
-import { fillTemplate } from '../../utils/fillTemplate.js'
+import { fillTemplate, joinTemplateParts } from '../../utils/fillTemplate.js'
 import { lensUnavailableText, readLensReports } from '../../utils/lensAvailability.js'
 import { followLinkClick, openRowTarget, resolveHref } from '../../utils/linkNavigation.js'
 import { nextSortState } from '../../utils/multiColumnSort.js'
@@ -421,40 +421,6 @@ import { CnUnreadMarker } from '../CnUnreadMarker/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.
  *
@@ -1790,7 +1756,7 @@ export default {
 				return ''
 			}
 			if (spec.includes('{')) {
-				const filled = fillSecondaryTemplate(spec, (key) => (key.includes('|')
+				const filled = joinTemplateParts(spec, (key) => (key.includes('|')
 					? fillTemplate(`{${key}}`, row)
 					: this.secondaryFieldText(row, key)))
 				// A template whose every field is empty leaves only separators: