@conduction/nextcloud-vue 2.86.0 → 2.87.0

package/dist/nextcloud-vue.cjs.js.map

@@ -1,4 +1,4 @@
 [diffend] Oversized file quarantined before diffing.
 name: package/dist/nextcloud-vue.cjs.js.map
-size: 40715087 bytes
-sha256: 8426db04864fe758f3dab19db500166a8077780a7ff5b82ed8e0426c5a18fb9e
+size: 40733961 bytes
+sha256: b2553a52f3be9cab59141f90ce15f9187f55454f0b96154befc4aab1ccf8c601

package/dist/nextcloud-vue.css

@@ -21010,7 +21010,7 @@ a.cn-xwiki-card__title[data-v-1a6b61fd]:hover {
 }
 
 
-.cn-widget-wrapper[data-v-b19b1aa6] {
+.cn-widget-wrapper[data-v-4f6c55f6] {
 	position: relative;
 	height: 100%;
 	display: flex;
@@ -21024,13 +21024,13 @@ a.cn-xwiki-card__title[data-v-1a6b61fd]:hover {
 }
 
 /* Headerless date chip — floated over the top-right of a flush card. */
-.cn-widget-wrapper__floating-meta[data-v-b19b1aa6] {
+.cn-widget-wrapper__floating-meta[data-v-4f6c55f6] {
 	position: absolute;
 	top: 8px;
 	inset-inline-end: 10px;
 	z-index: 2;
 }
-.cn-widget-wrapper__content[data-v-b19b1aa6] {
+.cn-widget-wrapper__content[data-v-4f6c55f6] {
 	flex: 1;
 	overflow: auto;
 	min-height: 0;
@@ -21046,24 +21046,24 @@ a.cn-xwiki-card__title[data-v-1a6b61fd]:hover {
    So it is structural instead. `:has()` keys on the table component's own root
    class, which means a table is flush by construction and no caller can
    reintroduce the gap by forgetting a prop. */
-.cn-widget-wrapper__content[data-v-b19b1aa6]:has(> .cn-table-container),
-.cn-widget-wrapper__content[data-v-b19b1aa6]:has(> .cn-widget-object-table) {
+.cn-widget-wrapper__content[data-v-4f6c55f6]:has(> .cn-table-container),
+.cn-widget-wrapper__content[data-v-4f6c55f6]:has(> .cn-widget-object-table) {
 	padding: 0;
 }
 
 /* Keyboard focus ring for the now-focusable scrollable content region. */
-.cn-widget-wrapper__content[data-v-b19b1aa6]:focus-visible {
+.cn-widget-wrapper__content[data-v-4f6c55f6]:focus-visible {
 	outline: 2px solid var(--color-primary-element);
 	outline-offset: -2px;
 }
-.cn-widget-wrapper--borderless[data-v-b19b1aa6] {
+.cn-widget-wrapper--borderless[data-v-4f6c55f6] {
 	border: none;
 	background: transparent;
 }
-.cn-widget-wrapper--borderless .cn-widget-wrapper__content[data-v-b19b1aa6] {
+.cn-widget-wrapper--borderless .cn-widget-wrapper__content[data-v-4f6c55f6] {
 	padding: 0;
 }
-.cn-widget-wrapper--flush .cn-widget-wrapper__content[data-v-b19b1aa6] {
+.cn-widget-wrapper--flush .cn-widget-wrapper__content[data-v-4f6c55f6] {
 	padding: 0;
 }
 
@@ -21071,8 +21071,8 @@ a.cn-xwiki-card__title[data-v-1a6b61fd]:hover {
    above. A dashboard renders every widget `flush`, and without this their
    fields touch the card's edges. Borderless and chromeless cards, and the
    Nextcloud dashboard variant, keep their own padding. */
-.cn-widget-wrapper--flush:not(.cn-widget-wrapper--borderless, .cn-widget-wrapper--nc-dashboard) > .cn-widget-wrapper__content[data-v-b19b1aa6]:has(> .cn-form-widget),
-.cn-widget-wrapper--flush:not(.cn-widget-wrapper--borderless, .cn-widget-wrapper--nc-dashboard) > .cn-widget-wrapper__content[data-v-b19b1aa6]:has(> .cn-kb-search-widget) {
+.cn-widget-wrapper--flush:not(.cn-widget-wrapper--borderless, .cn-widget-wrapper--nc-dashboard) > .cn-widget-wrapper__content[data-v-4f6c55f6]:has(> .cn-form-widget),
+.cn-widget-wrapper--flush:not(.cn-widget-wrapper--borderless, .cn-widget-wrapper--nc-dashboard) > .cn-widget-wrapper__content[data-v-4f6c55f6]:has(> .cn-kb-search-widget) {
 	padding: 16px;
 }
 
@@ -21083,7 +21083,7 @@ a.cn-xwiki-card__title[data-v-1a6b61fd]:hover {
    a square panel, which is the last visible piece of a card that is supposed
    to be absent. `CnDetailCard.cn-detail-card--chromeless` zeroes the same
    thing for the same reason. */
-.cn-widget-wrapper--chromeless[data-v-b19b1aa6] {
+.cn-widget-wrapper--chromeless[data-v-4f6c55f6] {
 	border-radius: 0;
 }
 
@@ -21095,7 +21095,7 @@ a.cn-xwiki-card__title[data-v-1a6b61fd]:hover {
  * so users can override any token. Combined selector raises specificity above
  * the base `.cn-widget-wrapper` rules it supersedes.
  */
-.cn-widget-wrapper__header[data-v-b19b1aa6] {
+.cn-widget-wrapper__header[data-v-4f6c55f6] {
 	display: flex;
 	align-items: center;
 	justify-content: space-between;
@@ -21111,7 +21111,7 @@ a.cn-xwiki-card__title[data-v-1a6b61fd]:hover {
 /* Actions with no title beside them. `header-left` is not rendered at all in
    this mode, and the header is `space-between`, so a single child would sit
    flush LEFT where every other surface puts its actions on the right. */
-.cn-widget-wrapper__header--actions-only[data-v-b19b1aa6] {
+.cn-widget-wrapper__header--actions-only[data-v-4f6c55f6] {
 	justify-content: flex-end;
 }
 
@@ -21127,11 +21127,11 @@ a.cn-xwiki-card__title[data-v-1a6b61fd]:hover {
    no-descending-specificity asks for. The cascade did not need it (this
    selector is more specific either way), a reader does: an override written
    above the thing it overrides has to be read twice. */
-.cn-widget-wrapper--chromeless .cn-widget-wrapper__header[data-v-b19b1aa6] {
+.cn-widget-wrapper--chromeless .cn-widget-wrapper__header[data-v-4f6c55f6] {
 	border-bottom: none;
 	padding-inline: 0;
 }
-.cn-widget-wrapper__header-left[data-v-b19b1aa6] {
+.cn-widget-wrapper__header-left[data-v-4f6c55f6] {
 	display: flex;
 	align-items: center;
 	gap: 8px;
@@ -21140,19 +21140,19 @@ a.cn-xwiki-card__title[data-v-1a6b61fd]:hover {
 	   of centering between icon and actions (header is space-between). */
 	flex: 1 1 auto;
 }
-.cn-widget-wrapper__icon[data-v-b19b1aa6] {
+.cn-widget-wrapper__icon[data-v-4f6c55f6] {
 	width: 24px;
 	height: 24px;
 	flex-shrink: 0;
 	color: var(--cn-widget-icon-color, var(--color-primary-element));
 }
-.cn-widget-wrapper__title-stack[data-v-b19b1aa6] {
+.cn-widget-wrapper__title-stack[data-v-4f6c55f6] {
 	display: flex;
 	flex-direction: column;
 	gap: 2px;
 	min-width: 0;
 }
-.cn-widget-wrapper__eyebrow[data-v-b19b1aa6] {
+.cn-widget-wrapper__eyebrow[data-v-4f6c55f6] {
 	font-size: 13px;
 	line-height: 1.3;
 	color: var(--color-text-maxcontrast);
@@ -21160,7 +21160,7 @@ a.cn-xwiki-card__title[data-v-1a6b61fd]:hover {
 	overflow: hidden;
 	text-overflow: ellipsis;
 }
-.cn-widget-wrapper__title[data-v-b19b1aa6] {
+.cn-widget-wrapper__title[data-v-4f6c55f6] {
 	font-weight: 600;
 	font-size: 14px;
 	margin: 0;
@@ -21168,34 +21168,34 @@ a.cn-xwiki-card__title[data-v-1a6b61fd]:hover {
 	overflow: hidden;
 	text-overflow: ellipsis;
 }
-.cn-widget-wrapper.cn-widget-wrapper--nc-dashboard[data-v-b19b1aa6] {
+.cn-widget-wrapper.cn-widget-wrapper--nc-dashboard[data-v-4f6c55f6] {
 	background: var(--color-main-background-blur, var(--color-main-background));
 	-webkit-backdrop-filter: var(--filter-background-blur, none);
 	backdrop-filter: var(--filter-background-blur, none);
 	border: none;
 	border-radius: var(--border-radius-container-large, 16px);
 }
-.cn-widget-wrapper--nc-dashboard .cn-widget-wrapper__header[data-v-b19b1aa6] {
+.cn-widget-wrapper--nc-dashboard .cn-widget-wrapper__header[data-v-4f6c55f6] {
 	padding: 16px;
 	border-bottom: none;
 }
-.cn-widget-wrapper--nc-dashboard .cn-widget-wrapper__header-left[data-v-b19b1aa6] {
+.cn-widget-wrapper--nc-dashboard .cn-widget-wrapper__header-left[data-v-4f6c55f6] {
 	gap: 16px;
 }
-.cn-widget-wrapper--nc-dashboard .cn-widget-wrapper__icon[data-v-b19b1aa6] {
+.cn-widget-wrapper--nc-dashboard .cn-widget-wrapper__icon[data-v-4f6c55f6] {
 	width: 32px;
 	height: 32px;
 	background-size: 32px;
 }
-.cn-widget-wrapper--nc-dashboard .cn-widget-wrapper__title[data-v-b19b1aa6] {
+.cn-widget-wrapper--nc-dashboard .cn-widget-wrapper__title[data-v-4f6c55f6] {
 	font-size: 20px;
 	font-weight: 700;
 	line-height: 24px;
 }
-.cn-widget-wrapper--nc-dashboard .cn-widget-wrapper__content[data-v-b19b1aa6] {
+.cn-widget-wrapper--nc-dashboard .cn-widget-wrapper__content[data-v-4f6c55f6] {
 	padding: 0 16px 16px;
 }
-.cn-widget-wrapper__title-meta[data-v-b19b1aa6] {
+.cn-widget-wrapper__title-meta[data-v-4f6c55f6] {
 	display: flex;
 	align-items: center;
 	gap: 4px;
@@ -21204,7 +21204,7 @@ a.cn-xwiki-card__title[data-v-1a6b61fd]:hover {
 	white-space: nowrap;
 	flex-shrink: 0;
 }
-.cn-widget-wrapper__actions[data-v-b19b1aa6] {
+.cn-widget-wrapper__actions[data-v-4f6c55f6] {
 	display: flex;
 	gap: 4px;
 	flex-shrink: 0;
@@ -21212,7 +21212,7 @@ a.cn-xwiki-card__title[data-v-1a6b61fd]:hover {
 
 /* The header's text link (`headerLink`). Theme hooks: --cn-widget-header-link-size
    and --cn-widget-header-link-weight. */
-.cn-widget-wrapper__header-link[data-v-b19b1aa6] {
+.cn-widget-wrapper__header-link[data-v-4f6c55f6] {
 	align-self: center;
 	padding: 0 calc(1 * var(--default-grid-baseline));
 	color: var(--color-primary-element);
@@ -21221,11 +21221,11 @@ a.cn-xwiki-card__title[data-v-1a6b61fd]:hover {
 	text-decoration: none;
 	white-space: nowrap;
 }
-.cn-widget-wrapper__header-link[data-v-b19b1aa6]:hover,
-.cn-widget-wrapper__header-link[data-v-b19b1aa6]:focus-visible {
+.cn-widget-wrapper__header-link[data-v-4f6c55f6]:hover,
+.cn-widget-wrapper__header-link[data-v-4f6c55f6]:focus-visible {
 	text-decoration: underline;
 }
-.cn-widget-wrapper__header-link[data-v-b19b1aa6]:focus-visible {
+.cn-widget-wrapper__header-link[data-v-4f6c55f6]:focus-visible {
 	outline: 2px solid var(--color-primary-element);
 	outline-offset: 2px;
 	border-radius: var(--border-radius-small, 4px);
@@ -21236,7 +21236,7 @@ a.cn-xwiki-card__title[data-v-1a6b61fd]:hover {
    wrapper is ever rendered without it. Material-design-icon components paint
    with `fill: currentColor`, so this reaches them; the :deep rule below makes
    it reach a raw <svg> in the slot too. */
-.cn-widget-wrapper__title-icon[data-v-b19b1aa6] {
+.cn-widget-wrapper__title-icon[data-v-4f6c55f6] {
 	display: flex;
 	align-items: center;
 	flex-shrink: 0;
@@ -21256,17 +21256,17 @@ a.cn-xwiki-card__title[data-v-1a6b61fd]:hover {
 
 /* Right-positioned title icons sit AFTER the actions, so the margin belongs on
    the other side or it pushes the icon off the header's right edge. */
-.cn-widget-wrapper__title-icon[data-v-b19b1aa6]:last-child {
+.cn-widget-wrapper__title-icon[data-v-4f6c55f6]:last-child {
 	margin-inline-end: 0;
 	margin-inline-start: 8px;
 }
 
 /* Material-design-icon components paint with `fill: currentColor`, so the
    colour above reaches them; this makes it reach a raw <svg> in the slot too. */
-.cn-widget-wrapper__title-icon[data-v-b19b1aa6] svg {
+.cn-widget-wrapper__title-icon[data-v-4f6c55f6] svg {
 	fill: currentcolor;
 }
-.cn-widget-wrapper__footer[data-v-b19b1aa6] {
+.cn-widget-wrapper__footer[data-v-4f6c55f6] {
 	display: flex;
 	justify-content: flex-end;
 	gap: 8px;
@@ -21274,12 +21274,12 @@ a.cn-xwiki-card__title[data-v-1a6b61fd]:hover {
 	border-top: 1px solid var(--color-border);
 	flex-shrink: 0;
 }
-.cn-widget-wrapper__footer-link[data-v-b19b1aa6] {
+.cn-widget-wrapper__footer-link[data-v-4f6c55f6] {
 	font-size: 13px;
 	color: var(--color-primary-element);
 	text-decoration: none;
 }
-.cn-widget-wrapper__footer-link[data-v-b19b1aa6]:hover {
+.cn-widget-wrapper__footer-link[data-v-4f6c55f6]:hover {
 	text-decoration: underline;
 }
 
@@ -25328,7 +25328,7 @@ button.cn-stepper__step[data-v-776581d4] {
 
 
 /* A stack (`widgetIds`): the panel's widget, then cards 20px apart. */
-.cn-tabs-widget__stack[data-v-72f3975c] {
+.cn-tabs-widget__stack[data-v-4294c502] {
 	display: flex;
 	flex-direction: column;
 	gap: 20px;
@@ -25337,19 +25337,19 @@ button.cn-stepper__step[data-v-776581d4] {
 /* A gridded stack (`columns` / `layout` on the tab): 12 columns, widgets wrap
    onto the next row, a row's cards as tall as the tallest. Narrow, it is the
    plain stack again. */
-.cn-tabs-widget__stack--grid[data-v-72f3975c] {
+.cn-tabs-widget__stack--grid[data-v-4294c502] {
 	display: grid;
 	grid-template-columns: repeat(12, minmax(0, 1fr));
 	align-items: stretch;
 }
-.cn-tabs-widget__stack--grid[data-v-72f3975c] > * {
+.cn-tabs-widget__stack--grid[data-v-4294c502] > * {
 	min-width: 0;
 }
 @media (max-width: 700px) {
-.cn-tabs-widget__stack--grid[data-v-72f3975c] {
+.cn-tabs-widget__stack--grid[data-v-4294c502] {
 		grid-template-columns: minmax(0, 1fr);
 }
-.cn-tabs-widget__stack--grid[data-v-72f3975c] > * {
+.cn-tabs-widget__stack--grid[data-v-4294c502] > * {
 		grid-column: auto !important;
 }
 }
@@ -25383,7 +25383,7 @@ button.cn-stepper__step[data-v-776581d4] {
    `!important` or on load order this library does not control. The same
    technique, for the same reason, is used on `.cn-tabs__nav .cn-tabs__nav-item`
    in CnTabs to beat Nextcloud's own button margin. */
-.cn-tabs-widget.cn-tabs-widget[data-v-72f3975c] {
+.cn-tabs-widget.cn-tabs-widget[data-v-4294c502] {
 	background-color: transparent;
 	border: 0;
 	border-radius: 0;
@@ -25407,12 +25407,12 @@ button.cn-stepper__step[data-v-776581d4] {
    below it: the rule ran straight on to the widget's edge and read as a
    border sticking out past a rounded corner (Ruben, 2026-09-13). Ending it
    where the curve begins makes the rule and the curve one continuous edge. */
-.cn-tabs-widget__tabs[data-v-72f3975c] .cn-tabs__bar {
+.cn-tabs-widget__tabs[data-v-4294c502] .cn-tabs__bar {
 	border-bottom: none;
 	padding: 0;
 	position: relative;
 }
-.cn-tabs-widget__tabs[data-v-72f3975c] .cn-tabs__bar::after {
+.cn-tabs-widget__tabs[data-v-4294c502] .cn-tabs__bar::after {
 	border-bottom: 1px solid var(--color-border);
 	content: '';
 	inset-block-end: 0;
@@ -25425,11 +25425,11 @@ button.cn-stepper__step[data-v-776581d4] {
    own background-coloured bottom edge, which only works if it paints ABOVE the
    pseudo-element: a positioned pseudo-element otherwise paints over every
    in-flow sibling, rule included. */
-.cn-tabs-widget__tabs[data-v-72f3975c] .cn-tabs__nav-item--active {
+.cn-tabs-widget__tabs[data-v-4294c502] .cn-tabs__nav-item--active {
 	position: relative;
 	z-index: 1;
 }
-.cn-tabs-widget__tabs[data-v-72f3975c] {
+.cn-tabs-widget__tabs[data-v-4294c502] {
 	display: flex;
 	flex-direction: column;
 	/* Grow to the widget's height, so the panel fills the grid cell the
@@ -25447,7 +25447,7 @@ button.cn-stepper__step[data-v-776581d4] {
    the open tab, but padding sits inside the painted box — only a margin would
    have opened that gap, and a zero top put every panel's content against the
    strip. */
-.cn-tabs-widget__tabs[data-v-72f3975c] .cn-tabs__content {
+.cn-tabs-widget__tabs[data-v-4294c502] .cn-tabs__content {
 	background-color: var(--color-main-background);
 	/* Three sides only: the bar's rule (redrawn above, stopping at the corner)
 	   is this sheet's top edge, and the open tab erases the slice of it
@@ -25467,7 +25467,7 @@ button.cn-stepper__step[data-v-776581d4] {
 	overflow: auto;
 	padding: 12px;
 }
-.cn-tabs-widget__tabs[data-v-72f3975c] .cn-tab {
+.cn-tabs-widget__tabs[data-v-4294c502] .cn-tab {
 	height: 100%;
 }
 
@@ -25475,15 +25475,36 @@ button.cn-stepper__step[data-v-776581d4] {
    (margin 0 -16px -16px). The panel of a tab pads 12px, so on a tab that
    holds the list directly the footer stuck out 4px on the right and at the
    bottom and made the panel scroll. It bleeds exactly the panel's padding. */
-.cn-tabs-widget__tabs[data-v-72f3975c] .cn-tabs__content > .cn-tab > .cn-detail-widget-host--bare .cn-object-list-widget__add {
+.cn-tabs-widget__tabs[data-v-4294c502] .cn-tabs__content > .cn-tab > .cn-detail-widget-host--bare .cn-object-list-widget__add {
 	margin: auto -12px -12px;
 }
-.cn-tabs-widget__title[data-v-72f3975c] {
+
+/* The open panel's header link, beside the strip. Same look and theme hooks
+   as a card header link (CnWidgetWrapper). */
+.cn-tabs-widget__header-link[data-v-4294c502] {
+	align-self: center;
+	padding: 0 calc(1 * var(--default-grid-baseline));
+	color: var(--color-primary-element);
+	font-size: var(--cn-widget-header-link-size, 14px);
+	font-weight: var(--cn-widget-header-link-weight, 600);
+	text-decoration: none;
+	white-space: nowrap;
+}
+.cn-tabs-widget__header-link[data-v-4294c502]:hover,
+.cn-tabs-widget__header-link[data-v-4294c502]:focus-visible {
+	text-decoration: underline;
+}
+.cn-tabs-widget__header-link[data-v-4294c502]:focus-visible {
+	outline: 2px solid var(--color-primary-element);
+	outline-offset: 2px;
+	border-radius: var(--border-radius-small, 4px);
+}
+.cn-tabs-widget__title[data-v-4294c502] {
 	align-items: center;
 	display: inline-flex;
 	gap: 6px;
 }
-.cn-tabs-widget__title-icon[data-v-72f3975c] {
+.cn-tabs-widget__title-icon[data-v-4294c502] {
 	flex: 0 0 auto;
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@conduction/nextcloud-vue",
-  "version": "2.86.0",
+  "version": "2.87.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/CnIndexPage/CnIndexPage.vue

@@ -4242,6 +4242,8 @@ export default {
 				narrowBy,
 				narrowValue: narrowBy ? this.boardNarrowValue : '',
 				capacityField: source.capacityField || '',
+				neutralColor: typeof source.neutralColor === 'string' ? source.neutralColor : '',
+				colorMap: source.colorMap && typeof source.colorMap === 'object' ? source.colorMap : null,
 			})
 		},
 

package/src/components/CnTabsWidget/CnTabsWidget.vue

@@ -15,7 +15,19 @@
 			     is showing. This is the point of the component: six tabbed
 			     widgets used to mean six card headers stacked down the page. -->
 			<template #nav-end>
+				<!-- The open panel's header link ("All sales invoices"): a panel
+				     draws no card header, so the link its widget declares is
+				     drawn here, and changes with the tab. -->
+				<component
+					:is="activeHeaderLinkTarget.tag"
+					v-if="activeHeaderLinkTarget.tag"
+					class="cn-tabs-widget__header-link"
+					data-testid="cn-tabs-widget-header-link"
+					v-bind="activeHeaderLinkTarget.attrs">
+					{{ cnTranslate(activeHeaderLink.label) }}
+				</component>
 				<CnActionsMenu
+					v-if="showActions"
 					:showRefresh="showRefresh"
 					:showRequestFeature="showRequestFeature"
 					:showDocumentation="showDocumentation"
@@ -169,6 +181,7 @@ import CnIcon from '../CnIcon/CnIcon.vue'
 import CnTab from '../CnTabs/CnTab.vue'
 import CnTabs from '../CnTabs/CnTabs.vue'
 import { normalizeLook } from '../../composables/useLook.js'
+import { headerLinkTarget, widgetHeaderLink } from '../../utils/contentHeaderLink.js'
 import { resolveTabCount } from '../../utils/detailActionModel.js'
 import { fetchListTotal } from '../../utils/fetchFilterCounts.js'
 import { isActivityWidget } from '../../utils/headerMeta.js'
@@ -430,6 +443,18 @@ export default {
 			default: () => ({}),
 		},
 
+		/**
+		 * Whether the strip draws its Actions menu at all. `false` drops the
+		 * whole menu, the open panel's own items included, for a board that
+		 * draws none. Manifest: `content.showActions` on the tabs widget.
+		 *
+		 * @spec openspec/changes/tabs-widget-actions-off/specs/tabs-widget-actions-off/spec.md#requirement-a-manifest-can-turn-off-the-tab-strips-actions-menu
+		 */
+		showActions: {
+			type: Boolean,
+			default: true,
+		},
+
 		/** Show the Refresh entry in the hoisted Actions menu. */
 		showRefresh: {
 			type: Boolean,
@@ -654,6 +679,29 @@ export default {
 			return this.activeTab?.widgetId || ''
 		},
 
+		/**
+		 * The header link the open tab's widget declares (`headerLink` on the
+		 * definition, or in its content), or null. For a stack, the first
+		 * widget's.
+		 *
+		 * @spec openspec/changes/tabs-widget-header-link/specs/tabs-widget-header-link/spec.md#requirement-the-tab-strip-draws-the-open-panels-header-link
+		 * @return {object|null}
+		 */
+		activeHeaderLink() {
+			return widgetHeaderLink(this.activeTab?.widget)
+		},
+
+		/**
+		 * How to draw the open panel's header link: a router link for a
+		 * route, an anchor for an href, nothing otherwise.
+		 *
+		 * @spec openspec/changes/tabs-widget-header-link/specs/tabs-widget-header-link/spec.md#requirement-the-tab-strip-draws-the-open-panels-header-link
+		 * @return {{tag: string, attrs: object}}
+		 */
+		activeHeaderLinkTarget() {
+			return headerLinkTarget(this.activeHeaderLink, Boolean(this.$router))
+		},
+
 		/**
 		 * The active child's label, so the Actions menu names what it acts on.
 		 *
@@ -1231,6 +1279,29 @@ export default {
 	margin: auto -12px -12px;
 }
 
+/* The open panel's header link, beside the strip. Same look and theme hooks
+   as a card header link (CnWidgetWrapper). */
+.cn-tabs-widget__header-link {
+	align-self: center;
+	padding: 0 calc(1 * var(--default-grid-baseline));
+	color: var(--color-primary-element);
+	font-size: var(--cn-widget-header-link-size, 14px);
+	font-weight: var(--cn-widget-header-link-weight, 600);
+	text-decoration: none;
+	white-space: nowrap;
+}
+
+.cn-tabs-widget__header-link:hover,
+.cn-tabs-widget__header-link:focus-visible {
+	text-decoration: underline;
+}
+
+.cn-tabs-widget__header-link:focus-visible {
+	outline: 2px solid var(--color-primary-element);
+	outline-offset: 2px;
+	border-radius: var(--border-radius-small, 4px);
+}
+
 .cn-tabs-widget__title {
 	align-items: center;
 	display: inline-flex;

package/src/components/CnWidgetWrapper/CnWidgetWrapper.vue

@@ -176,6 +176,7 @@
 
 <script>
 import { translate as t } from '@nextcloud/l10n'
+import { headerLinkTarget } from '../../utils/contentHeaderLink.js'
 import { slotRenders } from '../../utils/slotContent.js'
 import { CnActionsMenu } from '../CnActionsMenu/index.js'
 
@@ -686,17 +687,7 @@ export default {
 		 * @return {string}
 		 */
 		headerLinkTag() {
-			const link = this.headerLink
-			if (!link || typeof link.label !== 'string' || link.label === '') {
-				return ''
-			}
-			if (link.route && this.$router) {
-				return 'router-link'
-			}
-			if (typeof link.href === 'string' && link.href !== '') {
-				return 'a'
-			}
-			return ''
+			return headerLinkTarget(this.headerLink, Boolean(this.$router)).tag
 		},
 
 		/**
@@ -706,21 +697,7 @@ export default {
 		 * @return {object}
 		 */
 		headerLinkAttrs() {
-			const link = this.headerLink || {}
-			if (this.headerLinkTag === 'router-link') {
-				const to = { name: link.route }
-				if (link.params && typeof link.params === 'object') {
-					to.params = link.params
-				}
-				if (link.query && typeof link.query === 'object') {
-					to.query = link.query
-				}
-				return { to }
-			}
-			if (this.headerLinkTag === 'a') {
-				return { href: link.href }
-			}
-			return {}
+			return headerLinkTarget(this.headerLink, Boolean(this.$router)).attrs
 		},
 
 		/**

package/src/schemas/app-manifest-v2.schema.json

@@ -3,7 +3,7 @@
 	"$id": "https://raw.githubusercontent.com/ConductionNL/nextcloud-vue/main/src/schemas/app-manifest-v2.schema.json",
 	"title": "Conduction App Manifest v2",
 	"description": "v2 schema for the JSON-driven page and navigation manifest consumed by @conduction/nextcloud-vue. Introduces a uniform widgets[] array on every page type with a per-slot grid coordinate system, a typed actions[] discriminator, and the required $schema field for version detection. v1 manifests continue to validate against app-manifest.schema.json (unchanged).",
-	"version": "2.100.0",
+	"version": "2.102.0",
 	"type": "object",
 	"required": ["$schema", "version"],
 	"allOf": [
@@ -1177,6 +1177,8 @@
 									"colorField": { "type": "string", "description": "The referenced row's field that holds the column's dot colour (a badge variant or a CSS colour)." },
 									"filter": { "type": "object", "description": "Equality filters on the referenced rows, e.g. `{ \"isFinal\": false }` to leave out end states.", "additionalProperties": { "type": ["string", "number", "boolean"] } },
 									"capacityField": { "type": "string", "minLength": 1, "description": "board-column-capacity (2.100.0): the referenced row's numeric field that holds the column's limit. The header reads \"count / capacity\" and turns full at the limit, and a move into a full row is refused before it is written (the server still guards). A column merged from several rows shows no limit, but each row's own limit still refuses a move into it. A row without a number above 0 has no limit." },
+									"neutralColor": { "type": "string", "minLength": 1, "description": "board-neutral-column-colour (2.101.0): the colour a referenced row holds when nobody chose one (the schema default, e.g. \"grey\"). A column merged from several rows (`mergeBy`) then takes the first row colour that is not this one, and this one only when every row has it. Compared as written: \"Grey\" is not \"grey\", and a hex value is not a name. Unset, a merged column takes its first row's colour." },
+									"colorMap": { "type": "object", "description": "board-column-colour-map (2.102.0): a stored row colour to the CSS colour its column is drawn in, e.g. `{ \"orange\": \"var(--nl-color-orange, #e17000)\" }`, so a palette name draws a theme token. Applied after the merge, so `neutralColor` still compares the stored values. A colour it does not map draws as before.", "additionalProperties": { "type": "string", "minLength": 1 } },
 									"mergeBy": { "type": "string", "description": "Merge referenced rows with the same value of this field into one column (statuses of every case type by `name`). A drop then writes the row of the card's own parent (`narrowBy`), and is refused when that parent has none." },
 									"narrowBy": {
 										"type": "object",