@conduction/nextcloud-vue 2.104.0 → 2.105.0

package/src/components/CnIndexPage/CnIndexPage.vue

@@ -1288,6 +1288,7 @@ import {
 import { reportBindingProblems } from '../../utils/diagnostics.js'
 import { fetchGroupedCounts } from '../../utils/fetchAggregate.js'
 import { fetchFilterCounts, fetchListTotal } from '../../utils/fetchFilterCounts.js'
+import { unwrapAppConfig } from '../../utils/formatMetric.js'
 import { buildExportUrl } from '../../utils/indexExportHelpers.js'
 import { lensUnavailableText } from '../../utils/lensAvailability.js'
 import { isModifiedClick, openRowTarget } from '../../utils/linkNavigation.js'
@@ -1677,6 +1678,8 @@ export default {
 		cnCustomComponents: { default: () => ({}) },
 		/** The permissions the user holds, provided by CnAppRoot; for gated page tabs. */
 		cnPermissions: { default: () => [] },
+		/** The app config an ancestor provides, for `@config.<key>` in quick-filter labels. */
+		cnAppConfig: { default: null },
 		/** The app id CnAppRoot provides, for the plural form of `countSubtitle`. */
 		cnAppId: { default: '' },
 		/**
@@ -3133,6 +3136,19 @@ export default {
 			default: true,
 		},
 
+		/**
+		 * The app config `@config.<key>` tokens resolve against, in quick-filter
+		 * filters and labels (`"Residence @config.municipality"`), as on the
+		 * dashboard and detail pages. Merged over a config an ancestor provides
+		 * on `cnAppConfig`. Manifest: `config.appConfig`.
+		 *
+		 * @type {object}
+		 */
+		appConfig: {
+			type: Object,
+			default: () => ({}),
+		},
+
 		/**
 		 * Keep the "Showing X of Y" counter visible beside the inline search field,
 		 * after any `#after-search` controls (only relevant with `inlineSearch`,
@@ -6678,11 +6694,21 @@ export default {
 		effectiveQuickFilters() {
 			const own = withPersonalLenses(this.presented('quickFilters') || this.generatedQuickFilters, this.personalLenses)
 			if (own && own.length > 0) {
-				return own
+				return own.map((tab) => this.withConfigLabels(tab))
 			}
 			return (this.isNamedSource && this.namedQuickFilters) || null
 		},
 
+		/**
+		 * The app config `@config.<key>` tokens resolve against: the `appConfig`
+		 * prop over a config an ancestor provides.
+		 *
+		 * @return {object} The config.
+		 */
+		effectiveAppConfig() {
+			return { ...unwrapAppConfig(this.cnAppConfig), ...(this.appConfig || {}) }
+		},
+
 		/**
 		 * Whether the Add button renders. A named source that declares
 		 * `showAdd: false` suppresses it (a task is created by a flow, never
@@ -8766,6 +8792,33 @@ export default {
 			this.$emit('sort-change', value)
 		},
 
+		/**
+		 * A quick filter with `@config.<key>` in its `label` or `activeLabel`
+		 * (`"Residence @config.municipality"`): the label translated first, then
+		 * each token replaced by its configured value. A key the config does
+		 * not hold leaves its token in place. Other tabs pass unchanged.
+		 *
+		 * @param {object} tab A quick-filter tab.
+		 * @return {object} The tab, with its labels resolved.
+		 */
+		withConfigLabels(tab) {
+			if (!tab || typeof tab !== 'object') {
+				return tab
+			}
+			const hasToken = (value) => typeof value === 'string' && value.includes('@config.')
+			if (!hasToken(tab.label) && !hasToken(tab.activeLabel)) {
+				return tab
+			}
+			const config = this.effectiveAppConfig
+			const fill = (value) => (hasToken(value)
+				? this.cnTranslate(value).replace(/@config\.([A-Za-z0-9_.-]*[A-Za-z0-9_])/g, (token, key) => {
+						const found = this.getByPath(config, key)
+						return found === undefined || found === null || found === '' ? token : String(found)
+					})
+				: value)
+			return { ...tab, label: fill(tab.label), activeLabel: fill(tab.activeLabel) }
+		},
+
 		/**
 		 * @param {{key: string, order: string, keys?: Array<{key: string, order: string}>}} payload Sort change from CnDataTable.
 		 * @return {void}

package/src/components/CnIndexPage/useSelfFetchList.js

@@ -171,7 +171,8 @@ export function useSelfFetchList(props, instance, inject, extras = {}) {
 		const objCtx = unwrapCtx(objectCtxRaw)
 		const base = (objCtx && typeof objCtx === 'object') ? { ...objCtx } : {}
 		base.workspace = unwrapCtx(workspaceCtxRaw) || {}
-		base.config = unwrapCtx(appConfigRaw) || {}
+		// The page's own `appConfig` prop wins over a config an ancestor provides.
+		base.config = { ...(unwrapCtx(appConfigRaw) || {}), ...(props.appConfig || {}) }
 		return base
 	}
 
@@ -183,7 +184,7 @@ export function useSelfFetchList(props, instance, inject, extras = {}) {
 	// never again. Stringified (like CnDeltaWidget's `sourceKey`) so the
 	// watcher fires on real content changes only, not object identity.
 	const workspaceSignature = computed(() => JSON.stringify(unwrapCtx(workspaceCtxRaw) || {}))
-	const appConfigSignature = computed(() => JSON.stringify(unwrapCtx(appConfigRaw) || {}))
+	const appConfigSignature = computed(() => JSON.stringify({ ...(unwrapCtx(appConfigRaw) || {}), ...(props.appConfig || {}) }))
 
 	// Pass register/schema in their positional id slots (not as a {register, schema} object as
 	// second arg) — that previously made fetch URLs go to `/api/objects/undefined/[object Object]`.

package/src/components/CnNoticeWidget/CnNoticeWidget.vue

@@ -0,0 +1,153 @@
+<!--
+  - SPDX-FileCopyrightText: 2026 Conduction B.V.
+  - SPDX-License-Identifier: EUPL-1.2
+-->
+<template>
+	<section
+		v-if="resolvedText || resolvedTitle"
+		class="cn-notice-widget"
+		:class="`cn-notice-widget--${resolvedVariant}`"
+		:aria-label="resolvedTitle || null"
+		role="note"
+		data-testid="cn-notice-widget">
+		<CnIcon
+			class="cn-notice-widget__icon"
+			:name="resolvedIcon"
+			:size="18"
+			aria-hidden="true" />
+		<p class="cn-notice-widget__text">
+			<strong v-if="resolvedTitle" class="cn-notice-widget__title" data-testid="cn-notice-widget-title">{{ resolvedTitle }}</strong>{{ resolvedTitle && resolvedText ? ' ' : '' }}{{ resolvedText }}
+		</p>
+	</section>
+</template>
+
+<script>
+import { CnIcon } from '../CnIcon/index.js'
+
+/** The tones a notice takes, and the icon each shows by default. */
+const VARIANT_ICONS = Object.freeze({
+	info: 'InformationOutline',
+	warning: 'AlertOutline',
+	error: 'AlertCircleOutline',
+	success: 'CheckCircleOutline',
+})
+
+/**
+ * CnNoticeWidget — a toned notice box: an icon, a bold title and a line of
+ * text in one rounded box, as the boards draw a warning beside a record
+ * (DqSociaalDomein "Bijzondere persoonsgegevens: gezondheid. Elke inzage
+ * wordt gelogd met het doel."). Usable in a detail page's side column, its
+ * body grid and on a dashboard as widget type `notice`; the surface applies
+ * the widget's `visibleWhen`.
+ *
+ * `content`: `{ variant?, title?, text, icon? }`. `variant` is `info`
+ * (default), `warning`, `error` or `success`; `title` and `text` go through
+ * the host's translate; `icon` names a CnIcon instead of the variant's own.
+ *
+ * ```vue
+ * <CnNoticeWidget :content="{ variant: 'warning', title: 'Special category data: health.', text: 'Every view is logged with its purpose.' }" />
+ * ```
+ */
+export default {
+	name: 'CnNoticeWidget',
+
+	components: { CnIcon },
+
+	inject: {
+		/** The host app's translate function (CnAppRoot `cnTranslate`). */
+		cnTranslate: { default: () => (key) => key },
+	},
+
+	props: {
+		/**
+		 * The notice: `{ variant?, title?, text, icon? }`.
+		 *
+		 * @type {{variant?: string, title?: string, text?: string, icon?: string}}
+		 */
+		content: {
+			type: Object,
+			default: () => ({}),
+		},
+	},
+
+	computed: {
+		/** @return {string} `info`, `warning`, `error` or `success`. */
+		resolvedVariant() {
+			const variant = this.content && this.content.variant === 'danger' ? 'error' : this.content && this.content.variant
+			return Object.hasOwn(VARIANT_ICONS, variant) ? variant : 'info'
+		},
+
+		/** @return {string} The icon name. */
+		resolvedIcon() {
+			const icon = this.content && this.content.icon
+			return typeof icon === 'string' && icon !== '' ? icon : VARIANT_ICONS[this.resolvedVariant]
+		},
+
+		/** @return {string} The title through the host translate. */
+		resolvedTitle() {
+			return this.translate(this.content && this.content.title)
+		},
+
+		/** @return {string} The text through the host translate. */
+		resolvedText() {
+			return this.translate(this.content && this.content.text)
+		},
+	},
+
+	methods: {
+		/**
+		 * @param {unknown} text A manifest string.
+		 * @return {string} Its translation, '' for anything but a non-empty string.
+		 */
+		translate(text) {
+			if (typeof text !== 'string' || text === '') {
+				return ''
+			}
+			return typeof this.cnTranslate === 'function' ? this.cnTranslate(text) : text
+		},
+	},
+}
+</script>
+
+<style scoped>
+.cn-notice-widget {
+	display: flex;
+	align-items: flex-start;
+	gap: 10px;
+	padding: 14px 16px;
+	border-radius: var(--cn-board-card-radius, 12px);
+	font-size: 14px;
+	line-height: 1.5;
+	background: color-mix(in srgb, var(--color-info, #0071ad) 10%, var(--color-main-background));
+	color: var(--color-main-text);
+}
+
+.cn-notice-widget--warning {
+	background: var(--color-warning-light, #fff4de);
+	color: var(--color-warning-text, #7a4f00);
+}
+
+.cn-notice-widget--error {
+	background: color-mix(in srgb, var(--color-error, #db0606) 10%, var(--color-main-background));
+	color: var(--color-error-text, var(--color-main-text));
+}
+
+.cn-notice-widget--success {
+	background: color-mix(in srgb, var(--color-success, #2d7b41) 10%, var(--color-main-background));
+	color: var(--color-success-text, var(--color-main-text));
+}
+
+.cn-notice-widget__icon {
+	flex: 0 0 auto;
+	margin-top: 2px;
+}
+
+.cn-notice-widget__text {
+	margin: 0;
+	overflow-wrap: anywhere;
+}
+
+.cn-notice-widget__title {
+	font-weight: 700;
+}
+</style>

package/src/components/CnNoticeWidget/index.js

@@ -0,0 +1,12 @@
+/**
+ * SPDX-FileCopyrightText: 2026 Conduction B.V.
+ * SPDX-License-Identifier: EUPL-1.2
+ *
+ * CnNoticeWidget — a toned notice box (icon, bold title, text) for a side
+ * column, a detail body or a dashboard (widget type `notice`).
+ */
+
+import CnNoticeWidget from './CnNoticeWidget.vue'
+
+export { CnNoticeWidget }
+export default CnNoticeWidget

package/src/components/CnSettingsField/CnSettingsField.vue

@@ -18,7 +18,10 @@
 			class="cn-settings-field__image"
 			role="group"
 			:aria-labelledby="`${inputId}-label`">
-			<span :id="`${inputId}-label`" class="cn-settings-field__image-label">{{ label }}</span>
+			<!-- `hideLabel` keeps the name for a screen reader only. -->
+			<span :id="`${inputId}-label`"
+				class="cn-settings-field__image-label"
+				:class="{ 'hidden-visually': field.hideLabel === true }">{{ label }}</span>
 			<div class="cn-settings-field__image-row">
 				<span class="cn-settings-field__image-tile" :data-testid="`cn-settings-field-image-${field.key}`">
 					<img v-if="stringValue" :src="stringValue" :alt="t('nextcloud-vue', 'Current {name}', { name: label })">

package/src/components/CnSetupWizard/CnSetupWizard.vue

@@ -126,7 +126,15 @@
 					<NcNoteCard v-if="isChoiceDisabled(step)" type="warning">
 						{{ dependsOnHint(step) }}
 					</NcNoteCard>
-					<p v-if="stepNote(step)" class="cn-setup-step__note" data-testid="cn-setup-step-note">
+					<!-- `noteStyle: "card"` sets the note as an info card (DqInstellen). -->
+					<NcNoteCard
+						v-if="stepNote(step) && step.noteStyle === 'card'"
+						type="info"
+						class="cn-setup-step__note-card"
+						data-testid="cn-setup-step-note">
+						{{ stepNote(step) }}
+					</NcNoteCard>
+					<p v-else-if="stepNote(step)" class="cn-setup-step__note" data-testid="cn-setup-step-note">
 						{{ stepNote(step) }}
 					</p>
 				</template>

package/src/components/CnVersionInfoCard/CnVersionInfoCard.vue

@@ -35,13 +35,13 @@
 				<div class="cn-version-info__details">
 					<!-- Application Name (the board card can leave it to its description: `showAppName`) -->
 					<div v-if="!isBoard || (showAppName && !compact)" class="cn-version-info__item" data-testid="cn-version-info-app-name">
-						<span class="cn-version-info__label">{{ fieldLabels.appName }}:</span>
+						<span class="cn-version-info__label">{{ fieldLabels.appName }}{{ labelColon }}</span>
 						<span class="cn-version-info__value">{{ appName }}</span>
 					</div>
 
 					<!-- Version -->
 					<div class="cn-version-info__item">
-						<span class="cn-version-info__label">{{ fieldLabels.version }}:</span>
+						<span class="cn-version-info__label">{{ fieldLabels.version }}{{ labelColon }}</span>
 						<span class="cn-version-info__value">{{ appVersion }}</span>
 					</div>
 
@@ -49,13 +49,13 @@
 					     which draws the row ("Unknown" until the app reports it) with the
 					     up-to-date state inline ("0.4.47, bijgewerkt"). -->
 					<div v-if="configuredVersion || isBoard" class="cn-version-info__item" data-testid="cn-version-info-configured">
-						<span class="cn-version-info__label">{{ fieldLabels.configuredVersion }}:</span>
+						<span class="cn-version-info__label">{{ fieldLabels.configuredVersion }}{{ labelColon }}</span>
 						<span class="cn-version-info__value">{{ isBoard ? boardConfiguredText : configuredVersion }}</span>
 					</div>
 
 					<!-- Additional items -->
 					<div v-for="item in additionalItems" :key="item.label" class="cn-version-info__item">
-						<span class="cn-version-info__label">{{ item.label }}:</span>
+						<span class="cn-version-info__label">{{ item.label }}{{ labelColon }}</span>
 						<span class="cn-version-info__value" :class="item.statusClass">{{ item.value }}</span>
 					</div>
 
@@ -320,6 +320,17 @@ export default {
 	},
 
 	computed: {
+		/**
+		 * The colon after each label: none on the compact board card, which
+		 * sets each label beside its value ("Versie 0.4.47", DqInstellingenAlgemeen);
+		 * one otherwise, PqBeheer's card included.
+		 *
+		 * @return {string} The colon, or ''.
+		 */
+		labelColon() {
+			return this.isBoard && this.compact ? '' : ':'
+		},
+
 		/**
 		 * The field labels: the app's, else the library's in the reader's language.
 		 *

package/src/components/CnWidgetGrid/builtInWidgets.js

@@ -21,6 +21,7 @@ import CnExportsWidget from '../CnExportsWidget/CnExportsWidget.vue'
 import CnHeaderWidget from '../CnHeaderWidget/CnHeaderWidget.vue'
 import CnIntegrationWidget from '../CnIntegrationWidget/CnIntegrationWidget.vue'
 import CnNavCardGrid from '../CnNavCardGrid/CnNavCardGrid.vue'
+import CnNoticeWidget from '../CnNoticeWidget/CnNoticeWidget.vue'
 import CnObjectDataWidget from '../CnObjectDataWidget/CnObjectDataWidget.vue'
 import CnObjectGeoWidget from '../CnObjectGeoWidget/CnObjectGeoWidget.vue'
 import CnObjectMetadataWidget from '../CnObjectMetadataWidget/CnObjectMetadataWidget.vue'
@@ -86,6 +87,7 @@ export const BUILT_IN_WIDGETS = {
 	related: CnRelatedObjectsWidget,
 	integration: CnIntegrationWidget,
 	banner: CnBannerWidget,
+	notice: CnNoticeWidget,
 	'audit-trail': CnAuditTrailWidget,
 	timeline: CnTimelineWidget,
 	header: CnHeaderWidget,

package/src/components/index.js

@@ -131,6 +131,7 @@ export { CnContactPicker } from './CnContactPicker/index.js'
 export { CnContactCreate } from './CnContactCreate/index.js'
 export { CnResourceSelect } from './CnResourceSelect/index.js'
 export { CnSearchSelect } from './CnSearchSelect/index.js'
+export { CnNoticeWidget } from './CnNoticeWidget/index.js'
 export { CnPropertySourceField } from './CnPropertySourceField/index.js'
 export { CnDurationField } from './CnDurationField/index.js'
 export { CnFavouriteToggle } from './CnFavouriteToggle/index.js'

package/src/css/dialog.css

@@ -13,7 +13,11 @@
  *   --cn-dialog-eyebrow-tracking     letter spacing; 0 by default, 0.06em suits capitals
  */
 
+/* The nldesign theme sets a dialog's radius with `!important` through its
+   dialog radius token, so the board's 12px goes to that token.
+   @spec openspec/changes/board-dialog-theme/specs/board-dialog-theme/spec.md#requirement-a-board-dialog-keeps-its-frame-and-inset-under-a-theme */
 .cn-dialog-board {
+	--nldesign-component-dialog-border-radius: var(--cn-board-card-radius, 12px);
 	--cn-dialog-width: 640px;
 	--cn-dialog-danger: var(--color-error);
 	--cn-dialog-eyebrow-color: var(--color-primary-element-text, var(--color-main-text));
@@ -26,16 +30,26 @@
 	background-color: color-mix(in srgb, var(--color-main-text) 45%, transparent);
 }
 
-/* Width by role, capped at the viewport minus a 16px gutter each side. */
+/* Width by role, capped at the viewport minus a 16px gutter each side. The
+   shadow carries `!important`: the nldesign theme removes every
+   `.modal-container`'s shadow with `!important` and offers no token for it. */
 .modal-mask.cn-dialog-board .modal-wrapper--normal > .modal-container,
 .modal-mask.cn-dialog-board .modal-wrapper .modal-container {
 	width: var(--cn-dialog-width);
 	max-width: min(var(--cn-dialog-width), calc(100% - 32px));
 	border-radius: var(--cn-board-card-radius, 12px);
-	box-shadow: 0 12px 40px color-mix(in srgb, var(--color-main-text) 28%, transparent);
+	box-shadow: 0 12px 40px color-mix(in srgb, var(--color-main-text) 28%, transparent) !important;
 	overflow: hidden;
 }
 
+/* The board's header and body carry their own 24px inset. NcDialog pads its
+   container 4px at the top and 12px at the start, which put the title and
+   the fields 36px in; its rule outranked the one above through the scoped
+   `.dialog__modal[data-v-…]`, so this one names the class too. */
+.modal-mask.cn-dialog-board.dialog__modal .modal-wrapper .modal-container {
+	padding: 0;
+}
+
 /* The header is ours: NcModal's own close button and NcDialog's heading give
    way (the heading stays as the accessible name, visually hidden). The mask
    class raises the rule above NcButton's `.button-vue[data-v-…]`, whose
@@ -269,6 +283,10 @@
 		border-radius: 16px 16px 0 0;
 	}
 
+	.cn-dialog-board {
+		--nldesign-component-dialog-border-radius: 16px 16px 0 0;
+	}
+
 	.modal-mask.cn-dialog-board .modal-container::before {
 		content: '';
 		display: block;

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

@@ -203,6 +203,58 @@
 	width: auto;
 }
 
+/* ---- The follow pill (DqZaak "Volgen") ---------------------------------- */
+/* The board draws the follow control under the title as a 28px pill: 13px
+   text at 600 on the main background, a grey border, a 14px icon 6px from its
+   label. Live it was Nextcloud's 34px tertiary button, 15px bold in the
+   primary colour. The theme tokens carry the weight and radius past the
+   nldesign theme's `!important`; the follower count takes the same pill.
+   @spec openspec/changes/board-follow-pill/specs/board-follow-pill/spec.md#requirement-the-board-follow-control-is-a-pill */
+.cn-look-board .cn-detail-page .cn-follow-toggle .button-vue {
+	--nldesign-component-button-font-weight: 600;
+	--nldesign-component-button-border-radius: 14px;
+	--nldesign-component-button-secondary-action-color: var(--color-main-text);
+	--nldesign-component-button-secondary-action-background-color: var(--color-main-background);
+	--nldesign-component-button-secondary-action-border-color: var(--color-border-dark);
+	--nldesign-component-button-secondary-action-hover-background-color: var(--color-background-hover);
+	box-sizing: border-box;
+	height: 28px;
+	min-height: 28px;
+	min-width: 0;
+	padding: 0 10px;
+	border: 1px solid var(--color-border-dark);
+	border-radius: 14px;
+	background: var(--color-main-background);
+	color: var(--color-main-text);
+	font-size: 13px;
+}
+
+.cn-look-board .cn-detail-page .cn-follow-toggle .button-vue:hover {
+	background: var(--color-background-hover);
+}
+
+.cn-look-board .cn-detail-page .cn-follow-toggle .button-vue .button-vue__wrapper {
+	gap: 6px;
+}
+
+.cn-look-board .cn-detail-page .cn-follow-toggle .button-vue .button-vue__icon {
+	width: 14px;
+	min-width: 14px;
+	height: 14px;
+	min-height: 14px;
+	color: var(--color-main-text);
+}
+
+.cn-look-board .cn-detail-page .cn-follow-toggle .button-vue .button-vue__icon svg {
+	width: 14px;
+	height: 14px;
+}
+
+.cn-look-board .cn-detail-page .cn-follow-toggle .button-vue .button-vue__text {
+	margin: 0;
+	padding: 0;
+}
+
 /* ---- Folder tabs ------------------------------------------------------- */
 
 /* The strip draws no line of its own (design-system pull request 147). The card under it
@@ -222,7 +274,7 @@
 }
 
 /* Tabs sit on the card's top edge; only the open tab reaches 1px further
-   down (min-height 35px below), over the card's top border. Top-aligned so
+   down (min-height 38px below), over the card's top border. Top-aligned so
    the inactive tabs do not stretch to the open tab's height. */
 .cn-look-board .cn-tabs--board .cn-tabs__nav {
 	align-items: flex-start;
@@ -256,8 +308,15 @@
 
 /* `margin: 0`: a tab is a <button>, and Nextcloud's core stylesheet gives
    every `button:not(.button-vue)` `margin: 3px 3px 3px 0`, which put the strip
-   3px low and the tabs 7px apart instead of 4 (DqZaak "Zaakonderdelen"). */
+   3px low and the tabs 7px apart instead of 4 (DqZaak "Zaakonderdelen").
+   The nldesign theme sets every button's weight and radius with `!important`
+   through its button tokens, which drew every tab bold with four rounded
+   corners; the tab hands the board's values to those tokens. A tab is 37px
+   with or without a count (DqZaak), not 34px without one.
+   @spec openspec/changes/board-tabs-theme/specs/board-tabs-theme/spec.md#requirement-board-folder-tabs-keep-the-boards-weight-shape-and-height-under-a-theme */
 .cn-look-board .cn-tabs--board .cn-tabs__nav-item {
+	--nldesign-component-button-font-weight: 400;
+	--nldesign-component-button-border-radius: 8px 8px 0 0;
 	background-color: var(--color-background-dark);
 	border: 1px solid var(--color-border-dark);
 	border-bottom: none;
@@ -265,17 +324,18 @@
 	font-size: 14px;
 	font-weight: 400;
 	margin: 0;
-	min-height: 34px;
+	min-height: 37px;
 	padding: 8px 12px;
 }
 
 /* The open tab: the panel's colour, bold, and no coloured top edge. */
 .cn-look-board .cn-tabs--board .cn-tabs__nav-item.cn-tabs__nav-item--active {
+	--nldesign-component-button-font-weight: 700;
 	background-color: var(--color-main-background);
 	border-bottom: 1px solid var(--color-main-background);
 	border-top: 1px solid var(--color-border-dark);
 	font-weight: 700;
-	min-height: 35px;
+	min-height: 38px;
 	padding-bottom: 9px;
 	padding-top: 8px;
 	position: relative;
@@ -456,6 +516,19 @@
 	padding: 10px 22px 20px;
 }
 
+/* A stat tile in a side card (DqZaak "Termijn") sits on the card's inset as
+   the board draws it. The card-fit wrapper is flush, and the wrapper's own
+   flush rule loads after this sheet and outranked the side card's padding,
+   so the value sat 11px from the card's edge instead of 23px.
+   @spec openspec/changes/board-dashboard-widget-inset/specs/board-dashboard-widget-inset/spec.md#requirement-a-stat-tile-in-a-detail-side-card-keeps-the-cards-inset */
+.cn-look-board .cn-detail-page__side .cn-detail-page__card-fit > .cn-widget-wrapper__content:has(> .cn-kpi-card--board) {
+	padding: 10px 22px 20px;
+}
+
+.cn-look-board .cn-detail-page__side .cn-detail-page__card-fit > .cn-widget-wrapper__content > .cn-kpi-card--board {
+	padding: 0;
+}
+
 /* No Actions menu on a side card. */
 .cn-look-board .cn-detail-page__side .cn-widget-wrapper__actions {
 	display: none;

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

@@ -163,8 +163,15 @@
 	gap: 8px;
 }
 
+/* A chip is a <button>: the nldesign theme sets every button's radius and
+   weight with `!important` through its button tokens, which drew the chips
+   as 8px boxes at 700 (DqTeamwachtrij), so the chip hands its pill radius and
+   600 to those tokens.
+   @spec openspec/changes/board-chips-theme/specs/board-chips-theme/spec.md#requirement-board-chips-stay-pills-under-a-theme */
 .cn-look-board .cn-saved-views__chips .cn-saved-views__chip,
 .cn-look-board .cn-quick-filter-bar .cn-quick-filter-bar__tab {
+	--nldesign-component-button-border-radius: 19px;
+	--nldesign-component-button-font-weight: 600;
 	display: inline-flex;
 	align-items: center;
 	gap: 8px;
@@ -267,12 +274,30 @@
 	padding: 0;
 }
 
-/* Filter: a labelled secondary button, 36px, radius 8, with the active count. */
+/* The toolbar's buttons are the board's neutral control (DqTeamwachtrij
+   "Filter"): the main text at 600 on the main background with a grey border.
+   The nldesign theme paints a secondary button in the primary colour with
+   `!important` through its button tokens, so the bar hands the board's values
+   to those tokens.
+   @spec openspec/changes/board-toolbar-buttons-theme/specs/board-toolbar-buttons-theme/spec.md#requirement-board-toolbar-buttons-are-neutral-under-a-theme */
+.cn-look-board .cn-actions-bar:not(.cn-look-nextcloud *) {
+	--nldesign-component-button-font-weight: 600;
+	--nldesign-component-button-secondary-action-color: var(--color-main-text);
+	--nldesign-component-button-secondary-action-background-color: var(--color-main-background);
+	--nldesign-component-button-secondary-action-border-color: var(--color-border-dark);
+	--nldesign-component-button-secondary-action-hover-background-color: var(--color-background-hover);
+}
+
+/* Filter: a labelled secondary button, 36px, radius 8, 12px at both sides
+   and 14px text, with the active count. NcButton with an icon pads its start
+   4px and sets 15px. */
 .cn-look-board .cn-actions-bar__filter-button.button-vue,
 .cn-look-board .cn-actions-bar__filter-menu .button-vue {
 	min-height: 36px;
 	height: 36px;
+	padding: 0 12px;
 	border-radius: 8px;
+	font-size: 14px;
 	font-weight: 600;
 }
 
@@ -513,9 +538,18 @@
 
 /* The header row is near-white on the boards (#fafbfc), not the hover grey,
    its labels 14px muted. The ink also goes to --nldesign-color-on-surface,
-   which a theme that forces the body ink onto every span (thematiq) reads. */
+   which a theme that forces the body ink onto every span (thematiq) reads.
+   The nldesign theme paints every `th` with `!important` through its table
+   header tokens, and the sort button in it through its button weight token
+   (bold), so the cell hands the board's ground, ink and weight to those
+   tokens too.
+   @spec openspec/changes/board-table-head-theme/specs/board-table-head-theme/spec.md#requirement-a-board-table-header-keeps-the-boards-ground-ink-and-weight-under-a-theme */
 .cn-look-board .cn-table-container--board .cn-data-table th {
 	--nldesign-color-on-surface: var(--color-text-maxcontrast);
+	--nldesign-component-table-header-background-color: var(--cn-board-table-head-bg, color-mix(in srgb, var(--color-background-hover) 40%, var(--color-main-background)));
+	--nldesign-component-table-header-color: var(--color-text-maxcontrast);
+	--nldesign-component-table-header-font-weight: 600;
+	--nldesign-component-button-font-weight: 600;
 	padding: 12px 16px;
 	border-bottom: 0;
 	background: var(--cn-board-table-head-bg, color-mix(in srgb, var(--color-background-hover) 40%, var(--color-main-background)));