@conduction/nextcloud-vue 2.103.0 → 2.105.0

package/src/components/CnObjectRow/CnObjectRow.vue

@@ -15,6 +15,22 @@
 				@update:modelValue="$emit('select', object)" />
 		</div>
 
+		<!-- `config.leading`: one cell before the title, as a table cell renders
+		     it (`{ key, widget?, widgetProps?, formatter? }`), e.g. the age
+		     "6 dagen" in the team queue. -->
+		<span
+			v-if="leadingCell"
+			class="cn-object-row__lead"
+			:style="leadingCell.width ? { width: leadingCell.width } : null"
+			data-testid="cn-object-row-lead">
+			<CnCellRenderer
+				:value="cellValue(leadingCell)"
+				:formatter="leadingCell.formatter || null"
+				:widget="leadingCell.widget || null"
+				:widgetProps="leadingCell.widgetProps || undefined"
+				:row="object" />
+		</span>
+
 		<!-- Leading icon / image — omitted entirely when nothing is configured
 		     (no image, no icon name, no slot). -->
 		<span v-if="hasLeadingIcon" class="cn-object-row__icon">
@@ -52,6 +68,22 @@
 			</slot>
 		</span>
 
+		<!-- `config.trailing`: cells after the badges, each in its own column
+		     (the case type badge, the due text). -->
+		<span
+			v-for="(cell, index) in trailingCells"
+			:key="cell.key + '-' + index"
+			class="cn-object-row__trail"
+			:style="cell.width ? { width: cell.width } : null"
+			data-testid="cn-object-row-trail">
+			<CnCellRenderer
+				:value="cellValue(cell)"
+				:formatter="cell.formatter || null"
+				:widget="cell.widget || null"
+				:widgetProps="cell.widgetProps || undefined"
+				:row="object" />
+		</span>
+
 		<!-- Trailing actions -->
 		<span v-if="$slots.actions"
 			class="cn-object-row__actions"
@@ -67,8 +99,11 @@
 <script>
 import { NcCheckboxRadioSwitch } from '@nextcloud/vue'
 import { useClickDragGuard } from '../../composables/useClickDragGuard.js'
+import { joinTemplateParts } from '../../utils/fillTemplate.js'
+import { readPath } from '../../utils/readPath.js'
 import { resolveImageUrl } from '../../utils/resolveImageUrl.js'
 import { isRowMiddleClick, preventMiddleClickAutoscroll } from '../../utils/rowAuxClick.js'
+import { CnCellRenderer } from '../CnCellRenderer/index.js'
 import { CnIcon } from '../CnIcon/index.js'
 import { CnStatusBadge } from '../CnStatusBadge/index.js'
 
@@ -98,6 +133,7 @@ export default {
 
 	components: {
 		NcCheckboxRadioSwitch,
+		CnCellRenderer,
 		CnIcon,
 		CnStatusBadge,
 	},
@@ -119,7 +155,15 @@ export default {
 		 * Explicit field mapping. Every key is optional and overrides the
 		 * schema-configuration default.
 		 *
-		 * @type {{ titleField?: string, subtitleField?: string, imageField?: string, iconField?: string, iconName?: string, badgeField?: string, badgeVariantField?: string, badgeVariant?: string, badgeColorMap?: object }}
+		 * `subtitleTemplate` fills `{field}` tokens from the row (empty parts and
+		 * their separators drop). `leading` (one cell) and `trailing` (a cell or
+		 * a list) draw cells as a table column does, `{ key, widget?,
+		 * widgetProps?, formatter? }`: `{ key: "createdAt", widget: "age" }`
+		 * reads "6 dagen", `{ key: "deadline", widget: "date", widgetProps: {
+		 * due: {} } }` the due text. A cell's `width` (CSS) lines the column
+		 * up across rows.
+		 *
+		 * @type {{ titleField?: string, subtitleField?: string, subtitleTemplate?: string, imageField?: string, iconField?: string, iconName?: string, badgeField?: string, badgeVariantField?: string, badgeVariant?: string, badgeColorMap?: object, leading?: object, trailing?: (object|Array<object>) }}
 		 */
 		config: {
 			type: Object,
@@ -168,6 +212,13 @@ export default {
 		},
 
 		subtitle() {
+			if (typeof this.config.subtitleTemplate === 'string' && this.config.subtitleTemplate !== '') {
+				const text = joinTemplateParts(this.config.subtitleTemplate, (key) => {
+					const value = readPath(this.object, key)
+					return value === null || value === undefined ? '' : String(value)
+				})
+				return text.trim() || null
+			}
 			const field = this.config.subtitleField || this.schemaConfig.objectDescriptionField
 			if (field && this.object[field] !== null && this.object[field] !== undefined && this.object[field] !== '') {
 				return String(this.object[field])
@@ -215,9 +266,42 @@ export default {
 		badgeColorMap() {
 			return this.config.badgeColorMap || null
 		},
+
+		/**
+		 * The `config.leading` cell, or null.
+		 *
+		 * @spec openspec/changes/index-row-list-cells/specs/object-row/spec.md#requirement-a-list-row-can-carry-leading-and-trailing-cells
+		 * @return {object|null}
+		 */
+		leadingCell() {
+			const cell = this.config.leading
+			return cell && typeof cell === 'object' && typeof cell.key === 'string' && cell.key !== '' ? cell : null
+		},
+
+		/**
+		 * The `config.trailing` cells (one object or a list), those with a key.
+		 *
+		 * @spec openspec/changes/index-row-list-cells/specs/object-row/spec.md#requirement-a-list-row-can-carry-leading-and-trailing-cells
+		 * @return {Array<object>}
+		 */
+		trailingCells() {
+			const cells = this.config.trailing
+			const list = Array.isArray(cells) ? cells : (cells && typeof cells === 'object' ? [cells] : [])
+			return list.filter((cell) => cell && typeof cell === 'object' && typeof cell.key === 'string' && cell.key !== '')
+		},
 	},
 
 	methods: {
+		/**
+		 * A cell's value: the dot-path `key` read off the row.
+		 *
+		 * @param {{key: string}} cell The cell.
+		 * @return {unknown} The value.
+		 */
+		cellValue(cell) {
+			return readPath(this.object, cell.key)
+		},
+
 		/**
 		 * Row-body click: emits `select` when `selectable` (ignoring drags),
 		 * otherwise emits `click` for navigation.
@@ -297,6 +381,16 @@ export default {
 	background-color: var(--color-primary-element-light);
 }
 
+.cn-object-row__lead,
+.cn-object-row__trail {
+	flex: 0 0 auto;
+	min-width: 0;
+}
+
+.cn-object-row__lead {
+	font-weight: 600;
+}
+
 .cn-object-row__checkbox {
 	flex-shrink: 0;
 }

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/CnUserSettingsDialog/CnUserSettingsDialog.vue

@@ -339,7 +339,11 @@ export default {
 	list-style: none;
 }
 
-.cn-user-settings-dialog__nav-link {
+/* A navigation entry, not a link in running text: no underline, also not
+   on hover. `!important` because a theme's `a { text-decoration }` carries
+   it (thematiq), and a bare `a` with `!important` beats any class. */
+.cn-user-settings-dialog__nav-link,
+.cn-user-settings-dialog__nav-link:visited {
 	display: flex;
 	align-items: center;
 	gap: 10px;
@@ -348,11 +352,12 @@ export default {
 	border-radius: var(--border-radius-element, 8px);
 	font-size: 15px;
 	color: var(--color-main-text);
-	text-decoration: none;
+	text-decoration: none !important;
 }
 
 .cn-user-settings-dialog__nav-link:hover {
 	background: var(--color-background-hover);
+	text-decoration: none !important;
 }
 
 .cn-user-settings-dialog__nav-link:focus-visible {

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/CnWidgetObjectTable/CnWidgetObjectTable.vue

@@ -368,6 +368,20 @@ export default {
 			default: 0,
 		},
 
+		/**
+		 * Rows per page: the board's pager under the table ("4 of 7", page
+		 * buttons, Next), forwarded to CnDataTable. It pages the rows the
+		 * widget holds; with a `source`, `source.limit` is how many are read
+		 * (OpenRegister's default page otherwise). 0 (the default) shows no
+		 * pager.
+		 *
+		 * @spec openspec/changes/object-table-pager/specs/object-table/spec.md#requirement-an-object-table-can-page-its-rows
+		 */
+		pageSize: {
+			type: Number,
+			default: 0,
+		},
+
 		/**
 		 * vue-router route object for the "View all" footer link. Forwarded
 		 * to CnDataTable (footer shows when the rows are a `limit`-ed subset).
@@ -611,7 +625,9 @@ export default {
 				params[`_order[${field}]`] = dir === 'desc' ? 'desc' : 'asc'
 			}
 			if (typeof src.limit === 'number' && src.limit > 0) {
-				params._limit = src.limit + 1
+				// Under a pager `limit` is how many rows the pages hold, not a
+				// "View all" cap that needs to see one more.
+				params._limit = this.pageSize > 0 ? src.limit : src.limit + 1
 			}
 			// `source.extend` (#91 Wave 3): forwarded as OR's repeated
 			// `_extend[]` param so virtual/declarative fields (e.g.
@@ -736,7 +752,7 @@ export default {
 				inner.register = this.source.register
 				inner.schemaId = this.source.schema
 				inner.fetchParams = this.resolvedFetchParams
-				if (typeof this.source.limit === 'number' && this.source.limit > 0) {
+				if (typeof this.source.limit === 'number' && this.source.limit > 0 && !(this.pageSize > 0)) {
 					inner.limit = this.source.limit
 				}
 			}

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/composables/indexSources.js

@@ -14,7 +14,7 @@ import { formatRelativeDate } from '../utils/boardDate.js'
 import { fetchReferenceObjects } from '../utils/boardReferenceColumns.js'
 import { fillTemplate } from '../utils/fillTemplate.js'
 import { FLOW_RUN_ERROR_STATUSES, flowRunStatuses } from '../utils/flowRunStatus.js'
-import { fetchGroupMembers, fetchPresence, fetchStatuses } from '../utils/nextcloudDirectory.js'
+import { fetchGroupMembers, fetchPresence, fetchStatuses, fetchUsers } from '../utils/nextcloudDirectory.js'
 import { readPath } from '../utils/readPath.js'
 import { useFlowStore } from './useFlowStore.js'
 import { organisationRecord, useOrganisationStore } from './useOrganisationStore.js'
@@ -1054,7 +1054,8 @@ function searchSource(config = {}, context = {}) {
  * DqAfdelingen). Pair it with `folderSidebar: { source: 'groups',
  * filterField: 'group' }`, which lists the groups as the folder tree; the
  * selected group arrives as `group`. `sourceConfig.group` is the group shown
- * before one is picked.
+ * before one is picked; without one, All lists every user the reader may
+ * list (all users for an admin, their groups' users for a sub-admin).
  *
  * Today is the dav app's out-of-office period when one runs now ("Absent
  * until 14 Oct"), else the user status (present, away) and its message. The
@@ -1088,14 +1089,13 @@ function usersSource() {
 		load: async (config) => {
 			const group = String((config && (config.group || config.defaultGroup)) || '')
 			const mine = ++seq
-			if (group === '') {
-				state.rows = []
-				return
-			}
 			state.loading = true
 			try {
 				const { default: axios } = await import('@nextcloud/axios')
-				const [members, statuses] = await Promise.all([fetchGroupMembers(axios, group), fetchStatuses(axios)])
+				const [members, statuses] = await Promise.all([
+					group === '' ? fetchUsers(axios, { limit: (config && config.limit) || 500 }) : fetchGroupMembers(axios, group),
+					fetchStatuses(axios),
+				])
 				const functionField = (config && config.functionField) || 'headline'
 				const rolesField = (config && config.rolesField) || 'role'
 				const rows = await Promise.all(members.map(async (user) => {

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/index-page.css

@@ -190,6 +190,25 @@
 	font-size: 14px;
 }
 
+/* The selected folder's heading above the list. */
+.cn-index-page__scope-heading {
+	display: flex;
+	flex-direction: column;
+	gap: 4px;
+	margin-bottom: 12px;
+}
+
+.cn-index-page__scope-title {
+	margin: 0;
+	font-size: 1.25em;
+	font-weight: 700;
+}
+
+.cn-index-page__scope-subtitle {
+	font-size: 14px;
+	color: var(--color-text-maxcontrast);
+}
+
 /* Opt-in folder navigation pane (left of the list). */
 .cn-index-page__folder-pane {
 	flex: 0 0 240px;

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;