@conduction/nextcloud-vue 2.112.0 → 2.113.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@conduction/nextcloud-vue",
-  "version": "2.112.0",
+  "version": "2.113.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/CnActionButtons/CnActionButtons.vue

@@ -329,12 +329,10 @@ export default {
 		 * browser keeps middle-click, "open in new tab" and the link semantics
 		 * assistive tech announces.
 		 *
-		 * `href` is JS-composition-only, like `onSelect` — manifest JSON cannot
-		 * carry it (the schema's `target` field already names the `navigate`
-		 * destination URL, and `additionalProperties: false` rejects an
-		 * unlisted `href`). A manifest author reaching for a link should use
-		 * `type: "navigate"` with an external `target`, which auto-derives the
-		 * anchor/`window.open` behaviour instead.
+		 * `href` is used as given, so it must be a finished URL. A manifest
+		 * `headerActions[]` entry may carry `href` too: the page (CnDetailPage,
+		 * CnDashboardPage) resolves an instance path through `generateUrl()`
+		 * and sets `target` before the entry reaches this component.
 		 *
 		 * @type {Array<object>}
 		 */

package/src/components/CnChoiceCards/CnChoiceCards.vue

@@ -522,7 +522,6 @@ export default {
    still legible (DqVolgendeStap), not faded. */
 .cn-choice-cards__row--disabled,
 .cn-choice-cards__row--disabled:hover {
-	--nldesign-color-on-surface: var(--color-text-maxcontrast);
 	border-color: var(--color-border);
 	background: var(--color-background-hover);
 	color: var(--color-text-maxcontrast);
@@ -532,7 +531,6 @@ export default {
 /* The title takes the muted ink itself: a theme that colours every label
    with `!important` (thematiq) would otherwise hand it the label colour. */
 .cn-choice-cards__row--disabled .cn-choice-cards__row-title {
-	--nldesign-color-on-surface: var(--color-text-maxcontrast);
 	color: var(--color-text-maxcontrast);
 }
 
@@ -600,7 +598,6 @@ export default {
    with `!important` (thematiq) reaches a span that only inherits. */
 .cn-choice-cards__row-description,
 .cn-choice-cards__reason {
-	--nldesign-color-on-surface: var(--color-text-maxcontrast);
 	font-size: 13px;
 	font-weight: 400;
 	color: var(--color-text-maxcontrast);

package/src/components/CnDashboardPage/CnDashboardPage.vue

@@ -96,7 +96,7 @@
 				<template v-if="!isBoardLook">
 					<CnActionButtons
 						v-if="headerActions && headerActions.length"
-						:actions="headerActions"
+						:actions="linkedHeaderActions"
 						data-testid="cn-dashboard-page-header-actions" />
 					<!-- @slot header-actions Inline buttons rendered in the dashboard header next to the edit toggle. Used by every existing consumer (decidesk, launchpad, opencatalogi, pipelinq, procest). -->
 					<slot name="header-actions" />
@@ -169,7 +169,7 @@
 					<CnBuildiqEditButton />
 					<CnActionButtons
 						v-if="headerActions && headerActions.length"
-						:actions="headerActions"
+						:actions="linkedHeaderActions"
 						data-testid="cn-dashboard-page-header-actions" />
 					<slot name="header-actions" />
 					<slot name="actions" />
@@ -1042,6 +1042,7 @@ import { useIntegrationRegistry } from '../../composables/useIntegrationRegistry
 import { normalizeLook } from '../../composables/useLook.js'
 import { pageViews } from '../../mixins/pageViews.js'
 import { mergeUserLayout, resolveUserLayoutApi } from '../../store/plugins/dashboardLayouts.js'
+import { headerActionAsLink } from '../../utils/actionLink.js'
 import { isAppInstalled } from '../../utils/appInstalled.js'
 import { contentHeaderLink } from '../../utils/contentHeaderLink.js'
 import { pickDeclaredProps } from '../../utils/declaredProps.js'
@@ -1693,9 +1694,12 @@ export default {
 		 * in the dashboard header via CnActionButtons — `open-form` (schema
 		 * create dialog), `api-call` (POST/PUT + toast + refresh), `toggle`
 		 * (two-way state button), `navigate` / `open-modal` / `refresh`, each
-		 * with an optional `visibleWhen` predicate. Empty (the default) renders
-		 * nothing; the `#header-actions` slot still works alongside it for
-		 * bespoke buttons.
+		 * with an optional `visibleWhen` predicate. An entry with `href` is a
+		 * link button, never dispatched: an absolute `http(s)`, `mailto:`,
+		 * `tel:` or `//host/...` URL as written, an instance path (leading `/`) through
+		 * `generateUrl()`, in a new tab with `target: '_blank'`. Empty (the
+		 * default) renders nothing; the `#header-actions` slot still works
+		 * alongside it for bespoke buttons.
 		 *
 		 * @type {Array<object>}
 		 */
@@ -2102,6 +2106,17 @@ export default {
 			return typeof this.cnTranslate === 'function' ? this.cnTranslate : (key) => key
 		},
 
+		/**
+		 * The header actions handed to CnActionButtons, an entry with `href`
+		 * in its link form (resolved URL, anchor target, no handler).
+		 *
+		 * @spec openspec/changes/header-action-href/specs/header-action-href/spec.md#requirement-a-header-action-with-href-is-a-link-that-runs-and-emits-nothing
+		 * @return {Array<object>}
+		 */
+		linkedHeaderActions() {
+			return (this.headerActions || []).map(headerActionAsLink)
+		},
+
 		/**
 		 * The greeting for the time of day, with the reader's first (or
 		 * full) name when known, or '' when `greeting` is off.

package/src/components/CnDetailPage/CnDetailPage.vue

@@ -1257,6 +1257,7 @@ import { createRefLabelResolver } from '../../composables/useRefLabels.js'
 import { gridLayout } from '../../mixins/gridLayout.js'
 import { pageViews } from '../../mixins/pageViews.js'
 import { useObjectStore } from '../../store/index.js'
+import { headerActionAsLink } from '../../utils/actionLink.js'
 import { isAppInstalled } from '../../utils/appInstalled.js'
 import { compactLayoutRows } from '../../utils/dashboardPlacement.js'
 import { defaultDetailGrid } from '../../utils/defaultDetailGrid.js'
@@ -2219,6 +2220,11 @@ export default {
 		 * `@objectId` / `@object.<field>` token + local-predicate resolution.
 		 * Empty (the default) renders nothing.
 		 *
+		 * An entry with `href` is a link, never dispatched: an absolute
+		 * `http(s)`, `mailto:`, `tel:` or `//host/...` URL as written, or an instance path
+		 * (leading `/`) through `generateUrl()`, opening in place unless
+		 * `target` is `'_blank'`.
+		 *
 		 * The menu, not a row of buttons: that is what the manifest schema has
 		 * always said this key is, and what CnIndexPage already does with it.
 		 * The two surfaces had drifted, and on a dossiq case — twelve actions —
@@ -3941,6 +3947,7 @@ export default {
 		 * in. Edit goes LAST so it reads after the app's own actions in the
 		 * Actions menu — the page's affordance yields to the app's.
 		 *
+		 * @spec openspec/changes/header-action-href/specs/header-action-href/spec.md#requirement-a-header-action-with-href-is-a-link-that-runs-and-emits-nothing
 		 * @return {Array<object>} The action descriptors.
 		 */
 		effectiveHeaderActions() {
@@ -3949,12 +3956,16 @@ export default {
 			// written out in place) join the list CnActionButtons dispatches,
 			// so they get the same dialogs, toasts and `visibleWhen` gating as
 			// any header action. An id that is already declared is not added
-			// twice. With nothing pinned inline this is `headerActions` itself.
+			// twice. With nothing pinned inline and no `href` entry this is
+			// `headerActions` itself.
 			const known = new Set(authored.map((action) => action && action.id))
 			const inline = [this.stagePrimary, ...this.pinnedQuickActions]
 				.filter((pinned) => pinned && pinned.inline && !known.has(pinned.id))
 				.map((pinned) => pinned.inline)
-			const declared = inline.length > 0 ? [...authored, ...inline] : authored
+			const combined = inline.length > 0 ? [...authored, ...inline] : authored
+			// An entry (or child) with `href` becomes a link CnActionButtons renders as an anchor.
+			const linked = combined.map(headerActionAsLink)
+			const declared = linked.some((action, index) => action !== combined[index]) ? linked : combined
 			if (!(this.foldsEditIntoActions && this.canEditRecord)) {
 				return declared
 			}
@@ -5198,12 +5209,13 @@ export default {
 		 *
 		 * A stage's action is dispatched the way a header action is, through
 		 * the `run()` CnActionButtons bound for it, and announced to the host
-		 * with its declaration. A link action is left to the browser. Without
-		 * a stage action this is the page's `primaryAction`, announced as
-		 * before.
+		 * with its declaration. A link action is left to the browser and
+		 * announces nothing. Without a stage action this is the page's
+		 * `primaryAction`, announced as before.
 		 *
 		 * @return {void}
 		 * @spec openspec/changes/detail-action-model-and-case-surfaces/specs/detail-action-model/spec.md#requirement-primary-action-follows-the-stage
+		 * @spec openspec/changes/header-action-href/specs/header-action-href/spec.md#requirement-a-header-action-with-href-is-a-link-that-runs-and-emits-nothing
 		 */
 		onPrimaryActionClick() {
 			const entry = this.stagePrimaryEntry
@@ -5211,6 +5223,9 @@ export default {
 				this.$emit('primary-action', this.primaryAction)
 				return
 			}
+			if (entry.href) {
+				return
+			}
 			this.$emit('primary-action', this.headerActionsById[entry.id] || { id: entry.id, label: entry.label })
 			this.onPinnedActionClick(entry)
 		},

package/src/components/CnIndexPage/CnIndexPage.vue

@@ -63,7 +63,7 @@
 									<NcActionLink
 										v-else-if="entry.href"
 										:href="entry.href"
-										target="_blank"
+										:target="entry.linkTarget || '_blank'"
 										rel="noopener noreferrer"
 										:data-testid="`cn-index-header-menu-${entry.key}`">
 										<template v-if="entry.icon" #icon>
@@ -103,6 +103,8 @@
 							<NcButton
 								v-else
 								:variant="button.variant"
+								:href="button.link ? button.link.href : undefined"
+								:target="button.link ? button.link.target : undefined"
 								:data-testid="`cn-index-header-button-${button.key}`"
 								@click="onHeaderButton(button)">
 								<template v-if="button.icon" #icon>
@@ -1347,8 +1349,8 @@ import { createRefLabelResolver } from '../../composables/useRefLabels.js'
 import { useSavedViewsApi } from '../../composables/useSavedViewsApi.js'
 import { METADATA_COLUMNS } from '../../constants/metadata.js'
 import { useObjectStore } from '../../store/useObjectStore.js'
-import { followItemActionLink, resolveItemActionLink, routeHref } from '../../utils/actionLink.js'
-import { buildOnSuccessRoute, resolveRegisteredHandler } from '../../utils/actionsDispatcher.js'
+import { followItemActionLink, headerActionAsLink, resolveItemActionLink, routeHref } from '../../utils/actionLink.js'
+import { buildOnSuccessRoute, isExternalActionTarget, resolveRegisteredHandler } from '../../utils/actionsDispatcher.js'
 import {
 	buildReferenceStages,
 	buildValueStages,
@@ -3915,11 +3917,16 @@ export default {
 		 * (unless the handler is the `'none'` keyword) emits
 		 * `@header-action({ action: id, id })`.
 		 *
+		 * An entry with `href` instead renders as a real link and is never
+		 * dispatched or emitted: an absolute `http(s)`, `mailto:`, `tel:` or
+		 * `//host/...` URL is used as written, an instance path (leading `/`) goes through
+		 * `generateUrl()`. `target: '_blank'` opens it in a new tab.
+		 *
 		 * Reserved ids (those used by built-ins on the bar — `refresh`,
 		 * `import`, `export`, `copy`, `delete`) are dropped from the
 		 * merged list with a `console.warn`.
 		 *
-		 * @type {Array<{ id: string, label: string, icon?: string, handler?: string|(() => void), route?: string, disabled?: boolean }>}
+		 * @type {Array<{ id: string, label: string, icon?: string, handler?: string|(() => void), route?: string, href?: string, target?: ('_blank'|'_self'), disabled?: boolean }>}
 		 */
 		headerActions: {
 			type: Array,
@@ -4372,7 +4379,7 @@ export default {
 		/**
 		 * The header actions that open a dialog: `type: "open-form"` (the
 		 * schema-driven create form, as the navigation's primary action opens
-		 * it) or `type: "open-modal"`, without a `handler` of their own.
+		 * it) or `type: "open-modal"`, without a `handler` or `href` of their own.
 		 * Reserved ids are left out, as in `mergedHeaderActions`.
 		 *
 		 * @spec openspec/changes/index-header-open-form/specs/index-header/spec.md#requirement-an-index-header-action-can-open-the-create-form
@@ -4384,9 +4391,18 @@ export default {
 				&& typeof entry.id === 'string'
 				&& !reserved.has(entry.id)
 				&& (entry.handler === undefined || entry.handler === null || entry.handler === '')
+				&& !entry.href
 				&& (entry.type === 'open-form' || entry.type === 'open-modal'))
 		},
 
+		/**
+		 * The header actions without reserved ids, each through
+		 * `resolveHeaderHandler` (a manifest `href` entry becomes a link with
+		 * `_dispatchSuppress`, so the page neither runs nor emits it).
+		 *
+		 * @spec openspec/changes/header-action-href/specs/header-action-href/spec.md#requirement-a-header-action-with-href-is-a-link-that-runs-and-emits-nothing
+		 * @return {Array<object>}
+		 */
 		mergedHeaderActions() {
 			const reserved = new Set(['refresh', 'import', 'export', 'copy', 'delete'])
 			const merged = []
@@ -7425,11 +7441,13 @@ export default {
 		 *
 		 * @spec openspec/changes/zuiddrecht-pixel-gaps-3/specs/zuiddrecht-pixel-gaps-3/spec.md#requirement-an-index-page-can-take-the-board-header
 		 * @spec openspec/changes/screens-index-header-buttons-parity/specs/index-list-board-look/spec.md#requirement-the-add-header-button-carries-a-plus
-		 * @return {Array<{key: string, label: string, action: string, variant: string, icon: string, format: string}>}
+		 * @spec openspec/changes/header-action-href/specs/header-action-href/spec.md#requirement-a-header-action-with-href-is-a-link-that-runs-and-emits-nothing
+		 * @return {Array<{key: string, label: string, action: string, variant: string, icon: string, format: string, link: ({href: string, target: (string|undefined)}|null)}>}
 		 */
 		resolvedHeaderButtons() {
 			const headerButtons = this.presented('headerButtons')
 			const declared = Array.isArray(headerButtons) ? headerButtons : []
+			const builtInActions = new Set(['add', 'export', 'import', 'refresh', 'save-view', 'actions-menu'])
 			return declared
 				.filter((button) => button && typeof button === 'object' && typeof button.action === 'string' && button.action !== '')
 				.map((button, index) => {
@@ -7456,6 +7474,13 @@ export default {
 					if (label === '' && button.action === 'save-view') {
 						label = t('nextcloud-vue', 'Save view')
 					}
+					const run = typeof button.run === 'string' ? button.run : ''
+					// A button that runs a manifest `href` header action is that link;
+					// a `type: "navigate"` or function-handler entry keeps dispatching.
+					const actionId = button.action === 'export' ? run : (builtInActions.has(button.action) ? '' : button.action)
+					const linked = actionId
+						? this.mergedHeaderActions.find((entry) => entry && entry.id === actionId && entry.href && entry._dispatchSuppress && (!entry.type || entry.type === 'handler'))
+						: null
 					return {
 						key: String(button.id || button.action || index),
 						label,
@@ -7463,7 +7488,8 @@ export default {
 						variant: button.variant === 'primary' ? 'primary' : 'secondary',
 						icon,
 						format: button.format === 'excel' ? 'excel' : 'csv',
-						run: typeof button.run === 'string' ? button.run : '',
+						run,
+						link: linked ? { href: linked.href, target: linked.linkTarget || undefined } : null,
 						items: Array.isArray(button.items)
 							? button.items.filter((item) => (typeof item === 'string' && item !== '')
 								|| (item && typeof item === 'object' && typeof item.heading === 'string' && item.heading !== ''))
@@ -9121,8 +9147,11 @@ export default {
 		 * manifest-actions-dispatch — `navigate`, `emit`, `none`, or a
 		 * registry name (resolved through `resolveRegisteredHandler`).
 		 *
+		 * @spec openspec/changes/header-action-href/specs/header-action-href/spec.md#requirement-a-header-action-with-href-is-a-link-that-runs-and-emits-nothing
 		 * @param {object} entry Raw headerActions entry.
-		 * @return {object} Possibly-mutated copy: function-typed
+		 * @return {object} Possibly-mutated copy: an `href` becomes a
+		 *   resolved link with `linkTarget`, no handler (a function one
+		 *   included) and `_dispatchSuppress: true`; function-typed
 		 *   handlers untouched; `'emit'` and unknown registry names
 		 *   strip the `handler` (emit-only fall-through); `'navigate'`
 		 *   becomes a `$router.push` thunk (with the entry's literal
@@ -9134,14 +9163,23 @@ export default {
 			if (!entry) {
 				return entry
 			}
+			// An `href` makes the entry a link, which only navigates: it
+			// carries no handler, and the page emits nothing for it.
+			if (typeof entry.href === 'string' && entry.href !== '') {
+				const link = headerActionAsLink(entry)
+				return link.href ? { ...link, linkTarget: link.target, _dispatchSuppress: true } : link
+			}
 			const handler = entry.handler
 			if (typeof handler === 'function') {
 				return { ...entry }
 			}
 			// `type: "navigate"` with a `target` URL is a link: the bar and the
-			// header's Actions menu render it as a real anchor in a new tab.
+			// header's Actions menu render it as a real anchor, an external URL
+			// in a new tab.
 			if (typeof handler !== 'string' && entry.type === 'navigate' && typeof entry.target === 'string' && entry.target !== '' && !entry.href) {
-				return { ...entry, href: entry.target }
+				return isExternalActionTarget(entry.target)
+					? { ...entry, href: entry.target, linkTarget: '_blank' }
+					: { ...entry, href: entry.target }
 			}
 			if (typeof handler !== 'string') {
 				// No handler declared — emit-only fall-through.
@@ -9312,8 +9350,9 @@ export default {
 		 *
 		 * @spec openspec/changes/screens-index-header-actions-menu/specs/index-header/spec.md#requirement-the-header-actions-menu-lists-what-its-items-name
 		 * @spec openspec/changes/screens-index-header-menu-headings/specs/index-header/spec.md#requirement-the-header-actions-menu-can-draw-group-headings-and-separators
+		 * @spec openspec/changes/header-action-href/specs/header-action-href/spec.md#requirement-a-header-action-with-href-is-a-link-that-runs-and-emits-nothing
 		 * @param {{items?: Array<(string|{heading: string})>|null, format?: string}} button The resolved header button.
-		 * @return {Array<{key: string, label: string, kind?: ('heading'|'separator'), icon?: string, href?: string, disabled?: boolean, title?: string, iconComponent?: object, run?: Function}>}
+		 * @return {Array<{key: string, label: string, kind?: ('heading'|'separator'), icon?: string, href?: string, linkTarget?: string, disabled?: boolean, title?: string, iconComponent?: object, run?: () => void}>}
 		 */
 		headerMenuEntries(button) {
 			const fromAction = (entry) => ({
@@ -9321,6 +9360,7 @@ export default {
 				label: entry.label ? this.cnTranslate(entry.label) : '',
 				icon: entry.icon && typeof entry.icon === 'string' && !entry.icon.startsWith('icon-') ? entry.icon : '',
 				href: typeof entry.href === 'string' && entry.href !== '' ? entry.href : '',
+				linkTarget: entry.linkTarget || '',
 				// A `handler: "navigate"` entry whose route resolves carries `to`
 				// (resolveHeaderHandler drops its handler): the menu draws it as
 				// an in-app link, as the actions bar does, so it navigates.
@@ -9354,7 +9394,7 @@ export default {
 				}),
 
 				documentation: () => (this.documentationUrl
-					? { key: 'documentation', label: this.documentationLabel || t('nextcloud-vue', 'Documentation'), icon: 'BookOpenVariantOutline', href: this.documentationUrl }
+					? { key: 'documentation', label: this.documentationLabel || t('nextcloud-vue', 'Documentation'), icon: 'BookOpenVariantOutline', href: this.documentationUrl, linkTarget: '_blank' }
 					: null),
 			}
 			const entries = []
@@ -9450,13 +9490,18 @@ export default {
 
 		/**
 		 * A header button was clicked: run its built-in action, or dispatch
-		 * it as the `headerActions` entry with that id.
+		 * it as the `headerActions` entry with that id. A button that is a
+		 * link is left to the browser.
 		 *
 		 * @spec openspec/changes/zuiddrecht-pixel-gaps-3/specs/zuiddrecht-pixel-gaps-3/spec.md#requirement-an-index-page-can-take-the-board-header
-		 * @param {{action: string, format: string}} button The resolved button.
+		 * @spec openspec/changes/header-action-href/specs/header-action-href/spec.md#requirement-a-header-action-with-href-is-a-link-that-runs-and-emits-nothing
+		 * @param {{action: string, format: string, link?: object}} button The resolved button.
 		 * @return {void}
 		 */
 		onHeaderButton(button) {
+			if (button.link) {
+				return
+			}
 			if (button.action === 'add') {
 				this.onAddClick()
 			} else if (button.action === 'export') {

package/src/components/CnReportsPage/CnReportsPage.vue

@@ -48,6 +48,8 @@
 						<NcButton
 							v-else
 							:variant="button.variant"
+							:href="button.link ? button.link.href : undefined"
+							:target="button.link ? button.link.target : undefined"
 							:data-testid="`cn-reports-header-button-${button.key}`"
 							@click="onHeaderButton(button)">
 							<template v-if="button.icon" #icon>
@@ -163,6 +165,7 @@ import { defineAsyncComponent } from 'vue'
 import CnBuildiqEditButton from '../CnBuildiqEditButton/CnBuildiqEditButton.vue'
 import CnIcon from '../CnIcon/CnIcon.vue'
 import { useLook } from '../../composables/useLook.js'
+import { headerActionAsLink } from '../../utils/actionLink.js'
 import { resolveRegisteredHandler } from '../../utils/actionsDispatcher.js'
 import { followLinkClick } from '../../utils/linkNavigation.js'
 
@@ -325,7 +328,11 @@ export default {
 		 * function, `navigate` (with `route`, and `params`), `emit`, `none`,
 		 * or a registry name; `type: "navigate"` with a `target` URL opens
 		 * that URL in a new tab. Every click also emits `header-action`
-		 * `{ action, id }`, except for `handler: "none"`.
+		 * `{ action, id }`, except for `handler: "none"`. An entry with `href`
+		 * makes its button a real link that runs and emits nothing: an
+		 * absolute `http(s)`, `mailto:`, `tel:` or `//host/...` URL as written,
+		 * an instance path (leading `/`) through `generateUrl()`, in a new tab with
+		 * `target: '_blank'`.
 		 *
 		 * @spec openspec/changes/screens-reports-header-buttons/specs/reports-page/spec.md#requirement-a-reports-page-carries-header-buttons
 		 * @type {Array<object>|null}
@@ -451,24 +458,31 @@ export default {
 
 		/**
 		 * The declared header buttons that have a label and an action,
-		 * translated, each with a stable key and a variant.
+		 * translated, each with a stable key and a variant. A button naming a
+		 * header action with `href` carries that `link`.
 		 *
 		 * @spec openspec/changes/screens-reports-header-buttons/specs/reports-page/spec.md#requirement-a-reports-page-carries-header-buttons
-		 * @return {Array<{key: string, label: string, action: string, variant: string, icon: string}>} The buttons.
+		 * @spec openspec/changes/header-action-href/specs/header-action-href/spec.md#requirement-a-header-action-with-href-is-a-link-that-runs-and-emits-nothing
+		 * @return {Array<{key: string, label: string, action: string, variant: string, icon: string, link: ({href: string, target: string}|null)}>} The buttons.
 		 */
 		resolvedHeaderButtons() {
 			const declared = Array.isArray(this.config.headerButtons) ? this.config.headerButtons : []
+			const actions = Array.isArray(this.config.headerActions) ? this.config.headerActions : []
 			return declared
 				.filter((button) => button && typeof button === 'object'
 					&& typeof button.action === 'string' && button.action !== ''
 					&& typeof button.label === 'string' && button.label !== '')
-				.map((button) => ({
-					key: String(button.id || button.action),
-					label: this.tr(button.label),
-					action: button.action,
-					variant: button.variant === 'primary' ? 'primary' : 'secondary',
-					icon: typeof button.icon === 'string' ? button.icon : '',
-				}))
+				.map((button) => {
+					const entry = headerActionAsLink(actions.find((action) => action && action.id === button.action))
+					return {
+						key: String(button.id || button.action),
+						label: this.tr(button.label),
+						action: button.action,
+						variant: button.variant === 'primary' ? 'primary' : 'secondary',
+						icon: typeof button.icon === 'string' ? button.icon : '',
+						link: entry && typeof entry.href === 'string' && entry.href !== '' ? { href: entry.href, target: entry.target } : null,
+					}
+				})
 		},
 
 		/**
@@ -685,13 +699,18 @@ export default {
 
 		/**
 		 * A header button was clicked: run the `headerActions` entry it names
-		 * and emit `header-action`, as an index page's header button does.
+		 * and emit `header-action`, as an index page's header button does. A
+		 * button that is a link is left to the browser.
 		 *
 		 * @spec openspec/changes/screens-reports-header-buttons/specs/reports-page/spec.md#requirement-a-reports-page-carries-header-buttons
-		 * @param {{action: string}} button The resolved button.
+		 * @spec openspec/changes/header-action-href/specs/header-action-href/spec.md#requirement-a-header-action-with-href-is-a-link-that-runs-and-emits-nothing
+		 * @param {{action: string, link?: object}} button The resolved button.
 		 * @return {void}
 		 */
 		onHeaderButton(button) {
+			if (button.link) {
+				return
+			}
 			const id = button.action
 			const actions = Array.isArray(this.config.headerActions) ? this.config.headerActions : []
 			const entry = actions.find((action) => action && action.id === id) || null

package/src/css/badge.css

@@ -3,12 +3,14 @@
    ======================================== */
 
 /* The two board tones without a Nextcloud colour role (screens-cell-pill-parity).
-   A theme may redefine them; the six role variants below use Nextcloud's own. */
+   A theme may redefine them, or name the NL Design System hue tint and pill
+   text (`--nl-color-<hue>-light`, `--nl-color-<hue>-text`), which the tones
+   and the four role variants below read first (status-badge-hue-tokens). */
 :root {
-	--cn-status-purple-bg: #e8e6f6;
-	--cn-status-purple-text: #4a3f8f;
-	--cn-status-teal-bg: #e3f1f3;
-	--cn-status-teal-text: #1d5e66;
+	--cn-status-purple-bg: var(--nl-color-purple-light, #e8e6f6);
+	--cn-status-purple-text: var(--nl-color-purple-text, #4a3f8f);
+	--cn-status-teal-bg: var(--nl-color-teal-light, #e3f1f3);
+	--cn-status-teal-text: var(--nl-color-teal-text, #1d5e66);
 }
 
 .cn-status-badge {
@@ -43,26 +45,26 @@
 }
 
 .cn-status-badge--success {
-	--cn-status-badge-ink: var(--color-success-text, var(--color-success));
-	background-color: var(--color-success-light, rgba(70, 186, 97, 0.15));
+	--cn-status-badge-ink: var(--nl-color-green-text, var(--color-success-text, var(--color-success)));
+	background-color: var(--nl-color-green-light, var(--color-success-light, rgba(70, 186, 97, 0.15)));
 	color: var(--cn-status-badge-ink);
 }
 
 .cn-status-badge--warning {
-	--cn-status-badge-ink: var(--color-warning-text, var(--color-warning));
-	background-color: var(--color-warning-light, rgba(232, 163, 39, 0.15));
+	--cn-status-badge-ink: var(--nl-color-orange-text, var(--color-warning-text, var(--color-warning)));
+	background-color: var(--nl-color-orange-light, var(--color-warning-light, rgba(232, 163, 39, 0.15)));
 	color: var(--cn-status-badge-ink);
 }
 
 .cn-status-badge--error {
-	--cn-status-badge-ink: var(--color-error-text, var(--color-error));
-	background-color: var(--color-error-light, rgba(224, 68, 68, 0.15));
+	--cn-status-badge-ink: var(--nl-color-red-text, var(--color-error-text, var(--color-error)));
+	background-color: var(--nl-color-red-light, var(--color-error-light, rgba(224, 68, 68, 0.15)));
 	color: var(--cn-status-badge-ink);
 }
 
 .cn-status-badge--info {
-	--cn-status-badge-ink: var(--color-info-text, var(--color-info, #0082c9));
-	background-color: var(--color-info-light, rgba(0, 130, 201, 0.15));
+	--cn-status-badge-ink: var(--nl-color-blue-text, var(--color-info-text, var(--color-info, #0082c9)));
+	background-color: var(--nl-color-blue-light, var(--color-info-light, rgba(0, 130, 201, 0.15)));
 	color: var(--cn-status-badge-ink);
 }
 

package/src/css/board.css

@@ -55,7 +55,6 @@
 	margin-inline-start: auto;
 	padding: 1px 8px;
 	border-radius: 10px;
-	--nldesign-color-on-surface: var(--cn-board-text-soft, var(--color-main-text));
 	background-color: var(--color-main-background);
 	color: var(--cn-board-text-soft, var(--color-main-text));
 	font-size: 12px;

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

@@ -205,26 +205,19 @@
 	outline-offset: 2px;
 }
 
-/* The selected chip is light on dark, so it hands its ink to
-   --nldesign-color-on-surface: thematiq forces the body ink onto every span
-   with `!important` and reads it from that property, which left the label
-   dark on dark. */
+/* The selected chip is light on dark. */
 .cn-look-board .cn-saved-views__chips .cn-saved-views__chip--selected,
 .cn-look-board .cn-saved-views__chips .cn-saved-views__chip--selected:hover,
 .cn-look-board .cn-quick-filter-bar .cn-quick-filter-bar__tab--active,
 .cn-look-board .cn-quick-filter-bar .cn-quick-filter-bar__tab--active:hover {
-	--nldesign-color-on-surface: var(--color-main-background);
 	border-color: transparent;
 	background: var(--color-main-text);
 	color: var(--color-main-background);
 }
 
-/* The count badge: grey on an idle chip, soft text colour on the selected one.
-   Its ink also goes to --nldesign-color-on-surface, which a theme that forces
-   the body ink onto every span (thematiq) reads. */
+/* The count badge: grey on an idle chip, soft text colour on the selected one. */
 .cn-look-board .cn-saved-views__chip .cn-saved-views__chip-count,
 .cn-look-board .cn-quick-filter-bar .cn-quick-filter-bar__count {
-	--nldesign-color-on-surface: var(--cn-board-text-soft);
 	min-width: 0;
 	padding: 1px 7px;
 	border: 0;
@@ -242,7 +235,6 @@
 /* On the selected chip the count is the soft ink as a lighter bubble on the
    dark chip (DqZaken: #3d4047 on #1b1c1d). */
 .cn-look-board .cn-quick-filter-bar .cn-quick-filter-bar__tab--active .cn-quick-filter-bar__count {
-	--nldesign-color-on-surface: var(--color-primary-element-text);
 	background: var(--cn-board-text-soft);
 	color: var(--color-primary-element-text);
 }
@@ -322,8 +314,6 @@
 	margin-inline-start: 6px;
 	padding: 0 6px;
 	border-radius: 10px;
-	/* A theme that forces the body ink onto every span reads it from here. */
-	--nldesign-color-on-surface: var(--color-primary-element-text);
 	background: var(--color-primary-element);
 	color: var(--color-primary-element-text);
 	font-size: 12px;
@@ -553,15 +543,13 @@
 }
 
 /* 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.
+   its labels 14px muted.
    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;
@@ -695,7 +683,6 @@
 }
 
 .cn-look-board .cn-table-container--board .cn-data-table td.cn-table-col--title .cn-table-cell__secondary {
-	--nldesign-color-on-surface: var(--color-text-maxcontrast);
 	color: var(--color-text-maxcontrast);
 	font-size: 14px;
 	font-weight: 400;
@@ -740,7 +727,6 @@
 /* The initials sit on the light primary tint in the primary ink, the board's
    person chip (DqZaken's Behandelaar, and most boards' people). */
 .cn-look-board .cn-table-container--board .cn-data-table .cn-cell-renderer__avatar-initials {
-	--nldesign-color-on-surface: var(--color-primary-element-light-text);
 	background: var(--color-primary-element-light);
 	color: var(--color-primary-element-light-text);
 	font-size: 12px;