@conduction/nextcloud-vue 2.105.0 → 2.106.0

package/src/components/CnRecordListWidget/CnRecordListWidget.vue

@@ -33,6 +33,31 @@
 				{{ noticeText }}
 			</p>
 		</div>
+		<!-- table: one row per record under a header, one cell per `columns`
+		     entry; a cell past its `alertAbove` reads bold in the danger colour. -->
+		<table v-else-if="presentation === 'table'" class="cn-record-list__table" data-testid="cn-record-list-table">
+			<thead>
+				<tr>
+					<th
+						v-for="col in tableColumns"
+						:key="col.key"
+						scope="col"
+						:class="{ 'cn-record-list__cell--end': col.align === 'end' }">
+						{{ col.label }}
+					</th>
+				</tr>
+			</thead>
+			<tbody>
+				<tr v-for="item in tableRows" :key="item.key" data-testid="cn-record-list-item">
+					<td
+						v-for="cell in item.cells"
+						:key="cell.key"
+						:class="{ 'cn-record-list__cell--end': cell.align === 'end', 'cn-record-list__cell--alert': cell.alert }">
+						{{ cell.text }}
+					</td>
+				</tr>
+			</tbody>
+		</table>
 		<ul v-else class="cn-record-list__list">
 			<li
 				v-for="item in items"
@@ -48,6 +73,11 @@
 						class="cn-record-list__avatar"
 						aria-hidden="true"
 						data-testid="cn-record-list-avatar">{{ item.initials }}</span>
+					<span v-if="item.dot"
+						class="cn-record-list__dot"
+						:style="{ background: item.dot }"
+						aria-hidden="true"
+						data-testid="cn-record-list-dot" />
 					<span class="cn-record-list__main">
 						<component
 							:is="item.tag"
@@ -59,6 +89,7 @@
 						</component>
 						<span v-if="item.meta" class="cn-record-list__meta">{{ item.meta }}</span>
 					</span>
+					<span v-if="item.flag" class="cn-record-list__flag" data-testid="cn-record-list-flag">{{ item.flag }}</span>
 					<span v-if="item.pill || item.badges.length > 0" class="cn-record-list__pills">
 						<CnStatusBadge
 							v-if="item.pill"
@@ -76,7 +107,7 @@
 					<span
 						v-if="item.due"
 						class="cn-record-list__due cn-record-list__due--column"
-						:class="`cn-record-list__due--${item.due.tone}`"
+						:class="[`cn-record-list__due--${item.due.tone}`, { 'cn-record-list__due--soon': item.due.soon }]"
 						data-testid="cn-record-list-due">{{ item.due.text }}</span>
 					<span v-if="item.trailing" class="cn-record-list__trailing">{{ item.trailing }}</span>
 					<component
@@ -99,11 +130,17 @@
 						class="cn-record-list__avatar"
 						aria-hidden="true"
 						data-testid="cn-record-list-avatar">{{ item.initials }}</span>
+					<span v-if="item.dot"
+						class="cn-record-list__dot"
+						:style="{ background: item.dot }"
+						aria-hidden="true"
+						data-testid="cn-record-list-dot" />
 					<span class="cn-record-list__main">
 						<span v-if="item.title" class="cn-record-list__title">{{ item.title }}</span>
 						<span v-if="item.meta" class="cn-record-list__meta">{{ item.meta }}</span>
 					</span>
-					<span v-if="item.pill || item.badges.length > 0 || item.due || item.trailing" class="cn-record-list__aside">
+					<span v-if="item.pill || item.badges.length > 0 || item.due || item.trailing || item.flag" class="cn-record-list__aside">
+						<span v-if="item.flag" class="cn-record-list__flag" data-testid="cn-record-list-flag">{{ item.flag }}</span>
 						<CnStatusBadge
 							v-if="item.pill"
 							:label="item.pill.label"
@@ -119,7 +156,7 @@
 						<span
 							v-if="item.due"
 							class="cn-record-list__due"
-							:class="`cn-record-list__due--${item.due.tone}`"
+							:class="[`cn-record-list__due--${item.due.tone}`, { 'cn-record-list__due--soon': item.due.soon }]"
 							data-testid="cn-record-list-due">{{ item.due.text }}</span>
 						<span v-if="item.trailing" class="cn-record-list__trailing">{{ item.trailing }}</span>
 					</span>
@@ -201,6 +238,9 @@
 				</span>
 			</li>
 		</ul>
+		<p v-if="footnote && !error" class="cn-record-list__footnote" data-testid="cn-record-list-footnote">
+			{{ footnote }}
+		</p>
 		<!-- `footerAction`: one action under the list, also under the empty
 		     text ("Beroep registreren"). With `disabledWhen` it greys out and
 		     says why (`disabledReason`: "Kan zodra de beslissing is
@@ -255,7 +295,7 @@ const PAGE_REFRESH_CHANNEL = 'cn:page:refresh'
 
 /** Gives each list's footer reason its own element id. */
 let footerSeq = 0
-const PRESENTATIONS = ['rows', 'feed', 'inline', 'cards', 'notice']
+const PRESENTATIONS = ['rows', 'feed', 'inline', 'cards', 'notice', 'table']
 
 /** The tones a `notice` list takes. */
 const NOTICE_VARIANTS = ['info', 'warning', 'error']
@@ -343,6 +383,9 @@ export default {
 		 * `presentation: "notice"` draws the rows as sentences in one box toned by
 		 * `variant` (`info`, `warning` or `error`), after an optional `lead`
 		 * (`{total}` filled in).
+		 * `dot` (a field, or `{ field, colorMap? }`) draws a colour dot before
+		 * the title; `flags` (`[{ field, label, value? }]`) draws the labels
+		 * of the flags a row has ("Start", "End") at its end.
 		 * `footerAction` (`{ label, icon?, type, ..., disabledWhen?,
 		 * disabledReason? }`) ends the card with one action, also under the
 		 * empty text; while the visibleWhen condition `disabledWhen` holds the
@@ -579,10 +622,55 @@ export default {
 					due: this.dueOf(row),
 					icon: this.iconOf(row),
 					bar: this.barOf(row, barScale),
+					dot: this.dotOf(row),
+					flag: this.flagOf(row),
 				}
 			})
 		},
 
+		/**
+		 * The `table` presentation's columns: `{ label, value, align?, alertAbove? }`,
+		 * `value` a template over the row.
+		 *
+		 * @return {Array<object>} The columns with a key and a translated label.
+		 * @spec openspec/changes/record-list-table/specs/record-list-table/spec.md#requirement-a-record-list-can-draw-its-rows-as-a-small-table
+		 */
+		tableColumns() {
+			const columns = Array.isArray(this.content?.columns) ? this.content.columns : []
+			return columns
+				.filter((col) => col && typeof col === 'object' && typeof col.value === 'string')
+				.map((col, index) => ({ ...col, key: `col-${index}`, label: typeof col.label === 'string' ? this.translate(col.label) : '' }))
+		},
+
+		/**
+		 * The `table` presentation's rows: one cell per column.
+		 *
+		 * @return {Array<object>} `{ key, cells: [{ key, text, align, alert }] }`.
+		 * @spec openspec/changes/record-list-table/specs/record-list-table/spec.md#requirement-a-record-list-can-draw-its-rows-as-a-small-table
+		 */
+		tableRows() {
+			return this.items.map((item) => ({
+				key: item.key,
+				cells: this.tableColumns.map((col) => {
+					const text = this.fill(col.value, item.row)
+					const limit = Number(col.alertAbove)
+					const value = Number(text)
+					return {
+						key: col.key,
+						text,
+						align: col.align,
+						alert: col.alertAbove !== undefined && Number.isFinite(limit) && text !== '' && Number.isFinite(value) && value > limit,
+					}
+				}),
+			}))
+		},
+
+		/** @return {string} The note under the list (`footnote`), translated. */
+		footnote() {
+			const note = this.content?.footnote
+			return typeof note === 'string' && note !== '' ? this.translate(note) : ''
+		},
+
 		/**
 		 * The largest `bar.valueField` over the rows shown, the scale of a
 		 * `bar` without `maxField`. 0 without a `bar`.
@@ -699,6 +787,50 @@ export default {
 			return typeof this.cnTranslate === 'function' ? this.cnTranslate(text) : text
 		},
 
+		/**
+		 * A row's colour dot (`dot`: a field name, or `{ field, colorMap? }`):
+		 * the field's colour, or its value through `colorMap`. Only a hex
+		 * colour, an `rgb()`/`hsl()` colour or a `var(--…)` token is drawn.
+		 *
+		 * @spec openspec/changes/record-list-dot-flags/specs/record-list/spec.md#requirement-a-record-list-row-can-carry-a-colour-dot-and-flag-text
+		 * @param {object} row The row.
+		 * @return {string} The colour, or ''.
+		 */
+		dotOf(row) {
+			const dot = this.content?.dot
+			const def = typeof dot === 'string' ? { field: dot } : dot
+			if (!def || typeof def !== 'object' || typeof def.field !== 'string' || def.field === '') {
+				return ''
+			}
+			const raw = readPath(row, def.field)
+			if (raw === null || raw === undefined || raw === '') {
+				return ''
+			}
+			const mapped = def.colorMap && typeof def.colorMap === 'object' && typeof def.colorMap[String(raw)] === 'string' ? def.colorMap[String(raw)] : String(raw)
+			return /^(#[0-9a-f]{3,8}|(rgb|rgba|hsl|hsla)\([^;{}]*\)|var\(--[a-z0-9-]+(,[^;{}]*)?\))$/i.test(mapped.trim()) ? mapped.trim() : ''
+		},
+
+		/**
+		 * A row's flag text (`flags`: `[{ field, label, value? }]`): the
+		 * labels of the flags whose field is set (or equals `value`), through
+		 * the host translate and joined with " · " ("Start", "End").
+		 *
+		 * @spec openspec/changes/record-list-dot-flags/specs/record-list/spec.md#requirement-a-record-list-row-can-carry-a-colour-dot-and-flag-text
+		 * @param {object} row The row.
+		 * @return {string} The text, or ''.
+		 */
+		flagOf(row) {
+			const flags = Array.isArray(this.content?.flags) ? this.content.flags : []
+			return flags
+				.filter((flag) => flag && typeof flag.field === 'string' && typeof flag.label === 'string' && flag.label !== '')
+				.filter((flag) => {
+					const raw = readPath(row, flag.field)
+					return flag.value !== undefined ? String(raw) === String(flag.value) : raw === true || raw === 'true' || raw === 1
+				})
+				.map((flag) => this.translate(flag.label))
+				.join(' · ')
+		},
+
 		/**
 		 * Settle whether the footer action is disabled: `disabledWhen` is a
 		 * visibleWhen condition read against the page's record (`field`), the
@@ -1408,6 +1540,19 @@ export default {
 	text-decoration: underline;
 }
 
+.cn-record-list__dot {
+	flex: 0 0 14px;
+	width: 14px;
+	height: 14px;
+	border-radius: 50%;
+}
+
+.cn-record-list__flag {
+	color: var(--color-text-maxcontrast);
+	font-size: 14px;
+	white-space: nowrap;
+}
+
 .cn-record-list__avatar {
 	align-items: center;
 	background: var(--color-background-hover);
@@ -1462,6 +1607,47 @@ export default {
 	font-weight: 600;
 }
 
+.cn-record-list__table {
+	width: 100%;
+	border-collapse: collapse;
+	font-size: 14px;
+}
+
+.cn-record-list__table th {
+	padding: 6px 0;
+	border-bottom: 1px solid var(--color-border);
+	color: var(--color-text-maxcontrast);
+	font-weight: 600;
+	text-align: start;
+}
+
+.cn-record-list__table td {
+	padding: 8px 0;
+	border-bottom: 1px solid var(--color-border);
+}
+
+.cn-record-list__table .cn-record-list__cell--end {
+	padding-inline-start: 12px;
+	text-align: end;
+	font-variant-numeric: tabular-nums;
+}
+
+.cn-record-list__table .cn-record-list__cell--alert {
+	color: var(--color-text-error, var(--color-error-text));
+	font-weight: 700;
+}
+
+.cn-record-list__footnote {
+	margin: 8px 0 0;
+	color: var(--color-text-maxcontrast);
+	font-size: 13px;
+}
+
+.cn-record-list__due--soon {
+	color: var(--color-text-warning, var(--color-warning-text));
+	font-weight: 600;
+}
+
 .cn-record-list__due--empty {
 	color: var(--color-text-maxcontrast);
 }

package/src/components/CnRelatedObjectsWidget/CnRelatedObjectsWidget.vue

@@ -42,7 +42,53 @@
 		<div class="cn-related-objects-widget">
 			<!-- Tabbed self-fetch mode -->
 			<template v-if="useTabs">
-				<div v-if="tabStripVisible" class="cn-related-objects-widget__tabs" role="tablist">
+				<!-- `layout: "sections"`: every group under its own heading in one
+				     list, a heading action beside it (DqZaakGerelateerd). -->
+				<template v-if="layout === 'sections'">
+					<section v-for="group in visibleGroups"
+						:key="`section-${group.key}`"
+						class="cn-related-objects-widget__section"
+						:aria-labelledby="`${sectionIdBase}-${group.key}`"
+						data-testid="cn-related-section">
+						<div class="cn-related-objects-widget__section-head">
+							<h4 :id="`${sectionIdBase}-${group.key}`" class="cn-related-objects-widget__section-title">
+								{{ group.label }}
+							</h4>
+							<button v-if="groupAction(group)"
+								type="button"
+								class="cn-related-objects-widget__section-action"
+								data-testid="cn-related-section-action"
+								@click="onGroupAction(group)">
+								<CnIcon v-if="groupAction(group).icon" :name="groupAction(group).icon" :size="16" />
+								{{ groupAction(group).label }}
+							</button>
+						</div>
+						<ul class="cn-related-objects-widget__list">
+							<li v-for="(item, i) in group.items" :key="`item-${group.key}-${item.id || i}`">
+								<a v-if="groupHref(group, item)"
+									class="cn-related-objects-widget__row"
+									:href="groupHref(group, item)"
+									target="_blank"
+									rel="noopener noreferrer">
+									<CnIcon :name="group.icon" :size="20" class="cn-related-objects-widget__icon" />
+									<span class="cn-related-objects-widget__label">{{ item.label }}</span>
+									<span v-if="item.meta" class="cn-related-objects-widget__meta">{{ item.meta }}</span>
+								</a>
+								<div v-else
+									class="cn-related-objects-widget__row"
+									tabindex="0"
+									role="button"
+									@click="onSelectGroupItem(group, item)"
+									@keydown.enter="onSelectGroupItem(group, item)">
+									<CnIcon :name="group.icon" :size="20" class="cn-related-objects-widget__icon" />
+									<span class="cn-related-objects-widget__label">{{ item.label }}</span>
+									<span v-if="item.meta" class="cn-related-objects-widget__meta">{{ item.meta }}</span>
+								</div>
+							</li>
+						</ul>
+					</section>
+				</template>
+				<div v-if="layout !== 'sections' && tabStripVisible" class="cn-related-objects-widget__tabs" role="tablist">
 					<button v-for="group in visibleGroups"
 						:key="`tab-${group.key}`"
 						type="button"
@@ -57,7 +103,7 @@
 					</button>
 				</div>
 
-				<section v-if="activeGroup" class="cn-related-objects-widget__panel" role="tabpanel">
+				<section v-if="layout !== 'sections' && activeGroup" class="cn-related-objects-widget__panel" role="tabpanel">
 					<ul class="cn-related-objects-widget__list">
 						<li v-for="(item, i) in activeGroup.items"
 							:key="`item-${activeGroup.key}-${item.id || i}`">
@@ -445,6 +491,8 @@ export default {
 		 * reads in the app's language. Without it a title reads as stored.
 		 */
 		cnTranslate: { default: () => (key) => key },
+		/** The page's pre-bound action dispatcher (CnPageRenderer), for a group's heading action. */
+		cnDispatchAction: { default: null },
 	},
 
 	props: {
@@ -507,15 +555,46 @@ export default {
 
 		/**
 		 * Render mode. `'tabs'` (default) self-fetches from OpenRegister and
-		 * renders a tab per non-empty group. `'list'` forces the deprecated
+		 * renders a tab per non-empty group. `'sections'` renders every group
+		 * under its own heading in one list. `'list'` forces the deprecated
 		 * store-action list path.
 		 *
-		 * @type {'tabs'|'list'}
+		 * @type {'tabs'|'list'|'sections'}
 		 */
 		layout: {
 			type: String,
 			default: 'tabs',
-			validator: (value) => ['tabs', 'list'].includes(value),
+			validator: (value) => ['tabs', 'list', 'sections'].includes(value),
+		},
+
+		/**
+		 * Split the Objects group into one group per relation type, labelled
+		 * with the label OpenRegister answers for the direction
+		 * (`relation.displayLabel` on each row: "Onderwerp van deze zaak",
+		 * "Wacht op"), through the host translate. A row without one stays in
+		 * Objects.
+		 *
+		 * @spec openspec/changes/related-groups-by-relation/specs/related-objects/spec.md#requirement-related-objects-can-be-grouped-by-relation-type-under-headings
+		 */
+		groupByRelation: {
+			type: Boolean,
+			default: false,
+		},
+
+		/**
+		 * An action on a group's heading in `layout: "sections"`, keyed by the
+		 * group key (`objects`, `files`, an `extraSections` key, or
+		 * `relation:<label>` for a relation group): `{ label, icon?, ...action }`
+		 * ("Vervolg plannen"). An `extraSections` entry may carry its own
+		 * `action`. Pressing it dispatches the action through the page and
+		 * emits `group-action`.
+		 *
+		 * @type {Record<string, object>}
+		 * @spec openspec/changes/related-groups-by-relation/specs/related-objects/spec.md#requirement-related-objects-can-be-grouped-by-relation-type-under-headings
+		 */
+		groupActions: {
+			type: Object,
+			default: () => ({}),
 		},
 
 		/** Include `/contracts` relations in the Objects group (opt-in). */
@@ -688,6 +767,7 @@ export default {
 
 	emits: [
 		'add',
+		'group-action',
 		'file-uploaded',
 		'note-added',
 		'open-integration',
@@ -724,6 +804,8 @@ export default {
 			groups: [],
 			/** Active tab key. */
 			activeKey: '',
+			/** Prefix for the section heading ids in `layout: "sections"`. */
+			sectionIdBase: `cn-related-${Math.random().toString(36).slice(2, 9)}`,
 			/** Keys of the tabbed sections whose request is still in flight (`objects`, `files`, `relations`). */
 			pendingSections: [],
 			/** Tabbed sections whose request failed: `{ key, label }`. */
@@ -774,7 +856,7 @@ export default {
 
 		/** True when the tabbed self-fetch path is usable. */
 		useTabs() {
-			return this.layout === 'tabs'
+			return (this.layout === 'tabs' || this.layout === 'sections')
 				&& Boolean(this.resolvedRegister && this.resolvedSchema && this.resolvedId)
 		},
 
@@ -809,6 +891,7 @@ export default {
 						items,
 						total: items.length,
 						isExtra: true,
+						action: section.action && typeof section.action === 'object' ? section.action : null,
 					}
 				})
 		},
@@ -824,7 +907,8 @@ export default {
 			const allow = Array.isArray(this.includeGroups) ? this.includeGroups : []
 			const own = this.groups.filter((group) => (group.total > 0 || group.items.length > 0)
 				&& (allow.length === 0 || allow.includes(group.key)))
-			return [...own, ...this.extraGroups]
+			const split = this.groupByRelation ? own.flatMap((group) => (group.key === 'objects' ? this.splitByRelation(group) : [group])) : own
+			return [...split, ...this.extraGroups]
 		},
 
 		/**
@@ -892,7 +976,7 @@ export default {
 		 */
 		activeGroupHrefs() {
 			const group = this.activeGroup
-			if (!group || group.isExtra || group.key === 'objects') {
+			if (!group || group.isExtra || group.key === 'objects' || String(group.key).startsWith('relation:')) {
 				return []
 			}
 			return group.items.map((item) => this.resolveItemHref(group.key, item.raw || {}))
@@ -1195,6 +1279,83 @@ export default {
 			this.$emit('select-file', raw)
 		},
 
+		/**
+		 * The Objects group split by relation type: one group per
+		 * `relation.displayLabel`, in the order they first appear; rows
+		 * without a label stay in an Objects group.
+		 *
+		 * @spec openspec/changes/related-groups-by-relation/specs/related-objects/spec.md#requirement-related-objects-can-be-grouped-by-relation-type-under-headings
+		 * @param {object} group The Objects group.
+		 * @return {Array<object>} The groups.
+		 */
+		splitByRelation(group) {
+			const byLabel = new Map()
+			for (const item of group.items) {
+				const relation = item.raw && item.raw.relation
+				const label = relation && typeof relation.displayLabel === 'string' && relation.displayLabel !== '' ? relation.displayLabel : ''
+				const key = label === '' ? 'objects' : `relation:${label}`
+				if (!byLabel.has(key)) {
+					byLabel.set(key, { ...group, key, label: label === '' ? group.label : this.cnTranslate(label), relationLabel: label, items: [], total: 0 })
+				}
+				const target = byLabel.get(key)
+				target.items.push(item)
+				target.total = target.items.length
+			}
+			return [...byLabel.values()]
+		},
+
+		/**
+		 * The heading action of a group: `groupActions[group.key]`, else the
+		 * extra section's own `action`; null without one or without a label.
+		 *
+		 * @param {object} group The group.
+		 * @return {{label: string, icon: string, action: object}|null}
+		 */
+		groupAction(group) {
+			const declared = (this.groupActions && this.groupActions[group.key]) || group.action || null
+			if (!declared || typeof declared !== 'object' || typeof declared.label !== 'string' || declared.label === '') {
+				return null
+			}
+			return { label: this.cnTranslate(declared.label), icon: typeof declared.icon === 'string' ? declared.icon : '', action: declared }
+		},
+
+		/**
+		 * Run a group's heading action through the page's dispatcher, and say
+		 * so with `group-action`.
+		 *
+		 * @spec openspec/changes/related-groups-by-relation/specs/related-objects/spec.md#requirement-related-objects-can-be-grouped-by-relation-type-under-headings
+		 * @param {object} group The group.
+		 * @return {void}
+		 */
+		onGroupAction(group) {
+			const resolved = this.groupAction(group)
+			if (!resolved) {
+				return
+			}
+			if (typeof this.cnDispatchAction === 'function' && resolved.action.type) {
+				this.cnDispatchAction(resolved.action)
+			}
+			/**
+			 * @event group-action A group's heading action was pressed. Payload: `{ group, action }`, the group key and the declared action.
+			 */
+			this.$emit('group-action', { group: group.key, action: resolved.action })
+		},
+
+		/**
+		 * The owning-app link of one row in a group, '' where the row routes
+		 * through the host (related objects, host sections).
+		 *
+		 * @param {object} group The group.
+		 * @param {object} item The row.
+		 * @return {string}
+		 */
+		groupHref(group, item) {
+			if (!group || group.isExtra || group.key === 'objects' || String(group.key).startsWith('relation:')) {
+				return ''
+			}
+			return this.resolveItemHref(group.key, item.raw || {})
+		},
+
 		/**
 		 * Handle a click on a tabbed-path row that has no owning-app link
 		 * (rows with one render as a real `<a>`): emit a host-routed event.
@@ -1213,7 +1374,7 @@ export default {
 				this.onSelectExtra(group.key, item.raw)
 				return
 			}
-			if (group.key === 'objects') {
+			if (group.key === 'objects' || String(group.key).startsWith('relation:')) {
 				this.onSelectObject(item.raw)
 				return
 			}
@@ -1860,6 +2021,45 @@ export default {
 </script>
 
 <style scoped>
+.cn-related-objects-widget__section + .cn-related-objects-widget__section {
+	margin-top: 16px;
+}
+
+.cn-related-objects-widget__section-head {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: 12px;
+	padding-bottom: 8px;
+	border-bottom: 1px solid var(--color-border);
+}
+
+.cn-related-objects-widget__section-title {
+	margin: 0;
+	font-size: 15px;
+	font-weight: 700;
+}
+
+.cn-related-objects-widget__section-action {
+	display: inline-flex;
+	align-items: center;
+	gap: 6px;
+	height: 34px;
+	padding: 0 12px;
+	border: none;
+	border-radius: 17px;
+	background: var(--color-primary-element-light);
+	color: var(--color-primary-element-light-text);
+	font-size: 13px;
+	font-weight: 600;
+	cursor: pointer;
+}
+
+.cn-related-objects-widget__section-action:focus-visible {
+	outline: 2px solid var(--color-main-text);
+	outline-offset: 2px;
+}
+
 .cn-related-objects-widget__group {
 	padding: calc(2 * var(--default-grid-baseline, 4px)) 0;
 }

package/src/components/CnTabs/CnTabs.vue

@@ -947,7 +947,16 @@ export default defineComponent({
 	overflow: visible;
 }
 
+/* `margin: 0`: a tab is a <button>, and Nextcloud's core stylesheet gives
+   every plain button a 3px margin, which put the tabs 7px apart and 3px low
+   (DqInstellingen: 4px apart, on the strip's top). The nldesign theme sets a
+   button's weight, corner and border width with `!important` through its
+   button tokens, which drew every tab bold with a 1px underline; the tab
+   hands its own values to those tokens. */
 .cn-tabs--underline .cn-tabs__nav-item {
+	--nldesign-component-button-font-weight: 500;
+	--nldesign-component-button-border-radius: 0;
+	--nldesign-component-button-border-width: 0 0 3px;
 	background-color: transparent;
 	border: 0;
 	border-bottom: 3px solid transparent;
@@ -956,6 +965,7 @@ export default defineComponent({
 	font-size: 14px;
 	font-weight: 500;
 	gap: 8px;
+	margin: 0;
 	min-height: 44px;
 	padding: 0 9px;
 }
@@ -975,6 +985,7 @@ export default defineComponent({
 .cn-tabs--underline .cn-tabs__nav-item--active,
 .cn-tabs--underline .cn-tabs__nav-item--active:hover,
 .cn-tabs--underline .cn-tabs__nav-item--active:focus-visible {
+	--nldesign-component-button-font-weight: 700;
 	border-bottom: 3px solid var(--color-primary-element);
 	color: var(--color-main-text);
 	font-weight: 700;