@conduction/nextcloud-vue 2.56.0-beta.26 → 2.56.0-beta.27

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: 38337896 bytes
-sha256: a7d0d4bb2ccffd14adbe47978a666f89a6e3b1376dfecb854356280ac6440360
+size: 38439854 bytes
+sha256: 786f8e09d174b307bccce4e6dd2b99e2fb7b74a581decb90037b07c807a5c510

package/dist/nextcloud-vue.css

@@ -2198,9 +2198,64 @@
 	background-color: var(--color-background-hover);
 }
 
-.cn-table-sort-indicator {
-	margin-inline-start: var(--default-grid-baseline);
-	opacity: 0.6;
+/* The sort control: a real button that looks like the header text, the label
+   followed by a 14px chevron 4px after it (the "Wettelijke termijn" header on
+   the DqWooVerzoeken board). Selector scoped under the table so it outranks
+   Nextcloud's own `button` rule, which would otherwise give it a border, a
+   fill, a 34px min-height and a margin. */
+.cn-data-table th .cn-table-header__sort {
+	display: inline-flex;
+	align-items: center;
+	gap: 4px;
+	max-width: 100%;
+	min-width: 0;
+	min-height: 0;
+	margin: 0;
+	padding: 0;
+	border: 0;
+	border-radius: var(--border-radius, 4px);
+	background: transparent;
+	color: inherit;
+	font: inherit;
+	font-weight: inherit;
+	text-align: start;
+	vertical-align: middle;
+	cursor: pointer;
+}
+
+.cn-data-table th .cn-table-header__sort:hover,
+.cn-data-table th .cn-table-header__sort:focus {
+	background: transparent;
+}
+
+.cn-data-table th .cn-table-header__sort:focus-visible {
+	outline: 2px solid var(--color-main-text);
+	outline-offset: 2px;
+}
+
+.cn-data-table th .cn-table-header__sort > :first-child {
+	min-width: 0;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
+/* The chevron. Unsorted columns show a pale down chevron, so every sortable
+   column says it sorts; the sorted column shows the direction at full text
+   colour. The direction is also in the header's `aria-sort`. */
+.cn-table-header__chevron {
+	display: inline-flex;
+	flex: none;
+	color: var(--color-main-text);
+}
+
+.cn-table-header__chevron--idle {
+	color: var(--color-text-maxcontrast);
+	opacity: 0.5;
+}
+
+.cn-data-table th.cn-table-header--sortable:hover .cn-table-header__chevron--idle,
+.cn-data-table th .cn-table-header__sort:focus-visible .cn-table-header__chevron--idle {
+	opacity: 1;
 }
 
 /* A column carrying a `description` gets a dotted underline — the long-standing
@@ -2216,15 +2271,12 @@
 	cursor: help;
 }
 
-.cn-data-table th.cn-table-header--sortable:focus-visible {
-	outline: 2px solid var(--color-main-text);
-	outline-offset: -2px;
-}
-
-/* Header filter button (CnDataTable `filterable`). 24px hit area with the
-   16px icon; the filled icon plus the primary colour marks an active filter,
-   so the state never rests on colour alone. */
-.cn-table-header__filter {
+/* Header filter button (CnDataTable `filterable`): a 14px funnel directly
+   after the sort chevron, in a 24px hit area. Muted with no filter set; with
+   a filter set it takes the dark primary and a dot, so the state never rests
+   on colour alone. */
+.cn-data-table th .cn-table-header__filter {
+	position: relative;
 	display: inline-flex;
 	align-items: center;
 	justify-content: center;
@@ -2232,7 +2284,7 @@
 	min-width: 24px;
 	height: 24px;
 	min-height: 24px;
-	margin: 0 0 0 4px;
+	margin: 0 0 0 2px;
 	padding: 0;
 	border: none;
 	border-radius: var(--border-radius, 4px);
@@ -2242,18 +2294,31 @@
 	cursor: pointer;
 }
 
-.cn-table-header__filter:hover {
+.cn-data-table th .cn-table-header__filter:hover {
 	background-color: var(--color-background-hover);
 	color: var(--color-main-text);
 }
 
-.cn-table-header__filter:focus-visible {
+.cn-data-table th .cn-table-header__filter:focus-visible {
 	outline: 2px solid var(--color-main-text);
 	outline-offset: 0;
 }
 
-.cn-table-header__filter--active {
-	color: var(--color-primary-element);
+.cn-data-table th .cn-table-header__filter--active,
+.cn-data-table th .cn-table-header__filter--active:hover {
+	color: var(--color-primary-element-light-text, var(--color-primary-element));
+}
+
+/* The active-filter dot, on the funnel's top right. */
+.cn-table-header__filter-dot {
+	position: absolute;
+	inset-block-start: 3px;
+	inset-inline-end: 3px;
+	width: 6px;
+	height: 6px;
+	border-radius: 50%;
+	background-color: var(--color-primary-element);
+	pointer-events: none;
 }
 
 /* Active header filters above the table, one removable chip each. */
@@ -5503,12 +5568,26 @@ a.cn-kpi-card--stacked:focus-visible {
 
 /* ---- Folder tabs ------------------------------------------------------- */
 
+/* The strip draws no line of its own (design-system pull request 147). The card under it
+   carries its full border, top included, so the top-right corner is the
+   card's own rounded corner instead of a strip rule running straight past it.
+   The open tab overlaps that top border by 1px (the nav's -1px margin) and
+   paints over it, so it flows into the card as a folder tab. */
 .cn-look-board .cn-tabs--board .cn-tabs__bar {
-	border-bottom: 1px solid var(--color-border-dark);
+	border-bottom: none;
 	gap: 4px;
+	position: relative;
 }
 
+.cn-look-board .cn-tabs.cn-tabs--board .cn-tabs__bar::after {
+	content: none;
+}
+
+/* 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
+   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;
 	gap: 4px;
 }
 
@@ -5529,7 +5608,11 @@ a.cn-kpi-card--stacked:focus-visible {
 	border-bottom: 1px solid var(--color-main-background);
 	border-top: 1px solid var(--color-border-dark);
 	font-weight: 700;
+	min-height: 35px;
+	padding-bottom: 9px;
 	padding-top: 8px;
+	position: relative;
+	z-index: 1;
 }
 
 /* The count: a grey, borderless 20px badge 8px after the label. */
@@ -5566,10 +5649,30 @@ a.cn-kpi-card--stacked:focus-visible {
 .cn-look-board .cn-tabs--board .cn-tabs__content > .cn-tab > :first-child .cn-widget-wrapper,
 .cn-look-board .cn-tabs--board .cn-tabs__content > .cn-tab > .cn-widget-wrapper,
 .cn-look-board .cn-tabs--board .cn-tabs__content > .cn-tab > .cn-detail-card {
-	border-top: none;
+	border-top: 1px solid var(--color-border);
+	border-radius: 0 12px 12px 12px;
+}
+
+/* A CnTabsWidget panel is the card itself: the same full border, so it joins
+   the open tab the same way. The top-left stays square under the first tab. */
+.cn-look-board .cn-tabs--board.cn-tabs-widget__tabs .cn-tabs__content {
+	border: 1px solid var(--color-border);
 	border-radius: 0 12px 12px 12px;
 }
 
+/* A panel of CnTabsWidget is the content block itself: the open tab flows
+   straight into it. The widget in the panel renders chromeless, but the board
+   card rule below (and the first-card rule above) used to give its wrapper a
+   border and a 12px radius again, so a second card sat inside the panel. Its
+   left edge ran down from the open tab and its rounded top-right drew a line
+   across the top right of the content block, where DqZaak shows one sheet.
+   Same specificity as the first-card rule and later, so it wins on order. */
+.cn-look-board .cn-tabs--board.cn-tabs-widget__tabs .cn-tabs__content .cn-widget-wrapper.cn-widget-wrapper--chromeless {
+	background: transparent;
+	border: 0;
+	border-radius: 0;
+}
+
 /* ---- Body cards and side cards ----------------------------------------- */
 
 .cn-look-board .cn-detail-page .cn-widget-wrapper,
@@ -9356,9 +9459,64 @@ svg.leaflet-image-layer.leaflet-interactive path {
 	background-color: var(--color-background-hover);
 }
 
-.cn-table-sort-indicator {
-	margin-inline-start: var(--default-grid-baseline);
-	opacity: 0.6;
+/* The sort control: a real button that looks like the header text, the label
+   followed by a 14px chevron 4px after it (the "Wettelijke termijn" header on
+   the DqWooVerzoeken board). Selector scoped under the table so it outranks
+   Nextcloud's own `button` rule, which would otherwise give it a border, a
+   fill, a 34px min-height and a margin. */
+.cn-data-table th .cn-table-header__sort {
+	display: inline-flex;
+	align-items: center;
+	gap: 4px;
+	max-width: 100%;
+	min-width: 0;
+	min-height: 0;
+	margin: 0;
+	padding: 0;
+	border: 0;
+	border-radius: var(--border-radius, 4px);
+	background: transparent;
+	color: inherit;
+	font: inherit;
+	font-weight: inherit;
+	text-align: start;
+	vertical-align: middle;
+	cursor: pointer;
+}
+
+.cn-data-table th .cn-table-header__sort:hover,
+.cn-data-table th .cn-table-header__sort:focus {
+	background: transparent;
+}
+
+.cn-data-table th .cn-table-header__sort:focus-visible {
+	outline: 2px solid var(--color-main-text);
+	outline-offset: 2px;
+}
+
+.cn-data-table th .cn-table-header__sort > :first-child {
+	min-width: 0;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
+/* The chevron. Unsorted columns show a pale down chevron, so every sortable
+   column says it sorts; the sorted column shows the direction at full text
+   colour. The direction is also in the header's `aria-sort`. */
+.cn-table-header__chevron {
+	display: inline-flex;
+	flex: none;
+	color: var(--color-main-text);
+}
+
+.cn-table-header__chevron--idle {
+	color: var(--color-text-maxcontrast);
+	opacity: 0.5;
+}
+
+.cn-data-table th.cn-table-header--sortable:hover .cn-table-header__chevron--idle,
+.cn-data-table th .cn-table-header__sort:focus-visible .cn-table-header__chevron--idle {
+	opacity: 1;
 }
 
 /* A column carrying a `description` gets a dotted underline — the long-standing
@@ -9374,15 +9532,12 @@ svg.leaflet-image-layer.leaflet-interactive path {
 	cursor: help;
 }
 
-.cn-data-table th.cn-table-header--sortable:focus-visible {
-	outline: 2px solid var(--color-main-text);
-	outline-offset: -2px;
-}
-
-/* Header filter button (CnDataTable `filterable`). 24px hit area with the
-   16px icon; the filled icon plus the primary colour marks an active filter,
-   so the state never rests on colour alone. */
-.cn-table-header__filter {
+/* Header filter button (CnDataTable `filterable`): a 14px funnel directly
+   after the sort chevron, in a 24px hit area. Muted with no filter set; with
+   a filter set it takes the dark primary and a dot, so the state never rests
+   on colour alone. */
+.cn-data-table th .cn-table-header__filter {
+	position: relative;
 	display: inline-flex;
 	align-items: center;
 	justify-content: center;
@@ -9390,7 +9545,7 @@ svg.leaflet-image-layer.leaflet-interactive path {
 	min-width: 24px;
 	height: 24px;
 	min-height: 24px;
-	margin: 0 0 0 4px;
+	margin: 0 0 0 2px;
 	padding: 0;
 	border: none;
 	border-radius: var(--border-radius, 4px);
@@ -9400,18 +9555,31 @@ svg.leaflet-image-layer.leaflet-interactive path {
 	cursor: pointer;
 }
 
-.cn-table-header__filter:hover {
+.cn-data-table th .cn-table-header__filter:hover {
 	background-color: var(--color-background-hover);
 	color: var(--color-main-text);
 }
 
-.cn-table-header__filter:focus-visible {
+.cn-data-table th .cn-table-header__filter:focus-visible {
 	outline: 2px solid var(--color-main-text);
 	outline-offset: 0;
 }
 
-.cn-table-header__filter--active {
-	color: var(--color-primary-element);
+.cn-data-table th .cn-table-header__filter--active,
+.cn-data-table th .cn-table-header__filter--active:hover {
+	color: var(--color-primary-element-light-text, var(--color-primary-element));
+}
+
+/* The active-filter dot, on the funnel's top right. */
+.cn-table-header__filter-dot {
+	position: absolute;
+	inset-block-start: 3px;
+	inset-inline-end: 3px;
+	width: 6px;
+	height: 6px;
+	border-radius: 50%;
+	background-color: var(--color-primary-element);
+	pointer-events: none;
 }
 
 /* Active header filters above the table, one removable chip each. */
@@ -14188,12 +14356,55 @@ button.cn-files-card__open[data-v-46f7e3c9]:hover {
 	flex-direction: column;
 	gap: 8px;
 	min-width: 0;
+	position: relative;
 	border-radius: var(--border-radius-large, 8px);
 }
 .cn-files-browser--dragging[data-v-f5bdd9e2] {
 	outline: 2px dashed var(--color-primary-element);
 	outline-offset: 4px;
 }
+.cn-files-browser__drop-overlay[data-v-f5bdd9e2] {
+	position: absolute;
+	inset: 0;
+	z-index: 2;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	gap: 10px;
+	padding: 24px;
+	box-sizing: border-box;
+	border: 2px dashed var(--color-primary-element);
+	border-radius: var(--border-radius-large, 8px);
+	background: var(--color-primary-element-light);
+	color: var(--color-primary-element-light-text, var(--color-main-text));
+	text-align: center;
+	pointer-events: none;
+}
+.cn-files-browser__drop-icon[data-v-f5bdd9e2] {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 56px;
+	height: 56px;
+	border-radius: 50%;
+	background: var(--color-main-background);
+	color: var(--color-primary-element);
+}
+.cn-files-browser__drop-label[data-v-f5bdd9e2] {
+	font-size: 20px;
+	font-weight: 700;
+}
+.cn-files-browser__drop-hint[data-v-f5bdd9e2] {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	margin: 0;
+	padding-top: 12px;
+	border-top: 1px solid var(--color-border);
+	font-size: 13px;
+	color: var(--color-text-maxcontrast);
+}
 .cn-files-browser__bar[data-v-f5bdd9e2] {
 	display: flex;
 	align-items: center;
@@ -32093,8 +32304,42 @@ button.cn-object-calendar__overflow[data-v-bea31862] {
 }
 
 
-.cn-favourite-toggle__star[data-v-836dad16] {
-	color: var(--color-warning);
+.cn-follow-toggle[data-v-eec896e2] {
+	display: inline-flex;
+	align-items: center;
+	gap: 4px;
+}
+.cn-follow-toggle__on[data-v-eec896e2] {
+	color: var(--color-primary-element);
+}
+.cn-follow-toggle__popover[data-v-eec896e2] {
+	min-width: 260px;
+	padding: 12px;
+}
+.cn-follow-toggle__list[data-v-eec896e2] {
+	list-style: none;
+	margin: 0 0 8px;
+	padding: 0;
+}
+.cn-follow-toggle__row[data-v-eec896e2] {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	padding: 4px 0;
+}
+.cn-follow-toggle__who[data-v-eec896e2] {
+	display: flex;
+	flex-direction: column;
+	flex: 1 1 auto;
+	min-width: 0;
+}
+.cn-follow-toggle__since[data-v-eec896e2] {
+	color: var(--color-text-maxcontrast);
+	font-size: var(--font-size-small, 13px);
+}
+.cn-follow-toggle__error[data-v-eec896e2] {
+	margin: 8px 0 0;
+	color: var(--color-error-text);
 }
 
 
@@ -34239,42 +34484,6 @@ button.cn-object-calendar__overflow[data-v-bea31862] {
 }
 
 
-.cn-follow-toggle[data-v-eec896e2] {
-	display: inline-flex;
-	align-items: center;
-	gap: 4px;
-}
-.cn-follow-toggle__popover[data-v-eec896e2] {
-	min-width: 260px;
-	padding: 12px;
-}
-.cn-follow-toggle__list[data-v-eec896e2] {
-	list-style: none;
-	margin: 0 0 8px;
-	padding: 0;
-}
-.cn-follow-toggle__row[data-v-eec896e2] {
-	display: flex;
-	align-items: center;
-	gap: 8px;
-	padding: 4px 0;
-}
-.cn-follow-toggle__who[data-v-eec896e2] {
-	display: flex;
-	flex-direction: column;
-	flex: 1 1 auto;
-	min-width: 0;
-}
-.cn-follow-toggle__since[data-v-eec896e2] {
-	color: var(--color-text-maxcontrast);
-	font-size: var(--font-size-small, 13px);
-}
-.cn-follow-toggle__error[data-v-eec896e2] {
-	margin: 8px 0 0;
-	color: var(--color-error-text);
-}
-
-
 .cn-lifecycle-actions[data-v-a62ad362] {
 	display: flex;
 	flex-wrap: wrap;
@@ -35948,6 +36157,11 @@ button.cn-object-calendar__overflow[data-v-bea31862] {
 }
 
 
+.cn-favourite-toggle__star[data-v-836dad16] {
+	color: var(--color-warning);
+}
+
+
 .cn-journey-review-list__items[data-v-d3c04832] {
 	list-style: none;
 	margin: 8px 0 0;

package/l10n/en.json

@@ -1290,7 +1290,19 @@
     "Test environment": "Test environment",
     "Acceptance environment": "Acceptance environment",
     "About {label}": "About {label}",
-    "Could not load the form for this item.": "Could not load the form for this item."
+    "Could not load the form for this item.": "Could not load the form for this item.",
+    "Drop to add": "Drop to add",
+    "Or drag files onto this list.": "Or drag files onto this list.",
+    "This server does not keep track of what you open.": "This server does not keep track of what you open.",
+    "Log in to see what you opened recently.": "Log in to see what you opened recently.",
+    "Your recent items are not available right now.": "Your recent items are not available right now.",
+    "yesterday": "yesterday",
+    "tomorrow": "tomorrow",
+    "Filter by {column}": "Filter by {column}",
+    "Filter by {column}, active": "Filter by {column}, active",
+    "Turn notifications off": "Turn notifications off",
+    "Turn notifications on": "Turn notifications on",
+    "Could not change notifications.": "Could not change notifications."
   },
   "plurals": {
     "%n year": [
@@ -1344,6 +1356,18 @@
     "You see {count} capability of {total}.": [
       "You see {count} capability of {total}.",
       "You see {count} capabilities of {total}."
+    ],
+    "%n file added": [
+      "%n file added",
+      "%n files added"
+    ],
+    "{count} day ago": [
+      "{count} day ago",
+      "{count} days ago"
+    ],
+    "in {count} day": [
+      "in {count} day",
+      "in {count} days"
     ]
   }
 }

package/l10n/nl.json

@@ -1341,7 +1341,19 @@
     "Test environment": "Testomgeving",
     "Acceptance environment": "Acceptatieomgeving",
     "About {label}": "Over {label}",
-    "Could not load the form for this item.": "Kon het formulier voor dit item niet laden."
+    "Could not load the form for this item.": "Kon het formulier voor dit item niet laden.",
+    "Drop to add": "Laat los om toe te voegen",
+    "Or drag files onto this list.": "Of sleep bestanden op deze lijst.",
+    "This server does not keep track of what you open.": "Deze server houdt niet bij welke items je opent.",
+    "Log in to see what you opened recently.": "Log in om te zien wat je onlangs opende.",
+    "Your recent items are not available right now.": "Je recente items zijn nu niet beschikbaar.",
+    "yesterday": "gisteren",
+    "tomorrow": "morgen",
+    "Filter by {column}": "Filteren op {column}",
+    "Filter by {column}, active": "Filteren op {column}, actief",
+    "Turn notifications off": "Meldingen uitzetten",
+    "Turn notifications on": "Meldingen aanzetten",
+    "Could not change notifications.": "Meldingen konden niet worden gewijzigd."
   },
   "plurals": {
     "%n year": [
@@ -1395,6 +1407,18 @@
     "You see {count} capability of {total}.": [
       "Je ziet {count} functionaliteit van {total}.",
       "Je ziet {count} functionaliteiten van {total}."
+    ],
+    "%n file added": [
+      "%n bestand toegevoegd",
+      "%n bestanden toegevoegd"
+    ],
+    "{count} day ago": [
+      "{count} dag geleden",
+      "{count} dagen geleden"
+    ],
+    "in {count} day": [
+      "over {count} dag",
+      "over {count} dagen"
     ]
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@conduction/nextcloud-vue",
-  "version": "2.56.0-beta.26",
+  "version": "2.56.0-beta.27",
   "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/CnAppNav/CnAppNav.vue

@@ -183,7 +183,19 @@
 					v-if="isCaption(item)"
 					:key="item.id"
 					:name="resolveLabel(item)"
-					:data-testid="`cn-nav-caption-${item.id}`" />
+					:data-testid="`cn-nav-caption-${item.id}`">
+					<template v-if="item.href" #actions>
+						<NcActionLink
+							:href="item.href"
+							:aria-label="captionEditLabel(item)"
+							:data-testid="`cn-nav-caption-edit-${item.id}`">
+							<template #icon>
+								<Pencil :size="20" />
+							</template>
+							{{ captionEditLabel(item) }}
+						</NcActionLink>
+					</template>
+				</NcAppNavigationCaption>
 				<NcAppNavigationItem
 					v-else
 					:key="item.id"
@@ -424,7 +436,19 @@
 							v-if="isCaption(item)"
 							:key="item.id"
 							:name="resolveLabel(item)"
-							:data-testid="`cn-nav-caption-${item.id}`" />
+							:data-testid="`cn-nav-caption-${item.id}`">
+							<template v-if="item.href" #actions>
+								<NcActionLink
+									:href="item.href"
+									:aria-label="captionEditLabel(item)"
+									:data-testid="`cn-nav-caption-edit-${item.id}`">
+									<template #icon>
+										<Pencil :size="20" />
+									</template>
+									{{ captionEditLabel(item) }}
+								</NcActionLink>
+							</template>
+						</NcAppNavigationCaption>
 						<NcAppNavigationItem
 							v-else
 							:key="item.id"
@@ -466,7 +490,7 @@
 <script>
 import { translate as t } from '@nextcloud/l10n'
 import { generateUrl } from '@nextcloud/router'
-import { NcAppNavigation, NcAppNavigationCaption, NcAppNavigationItem, NcAppNavigationList, NcAppNavigationNew, NcAppNavigationSettings, NcButton, NcCounterBubble } from '@nextcloud/vue'
+import { NcActionLink, NcAppNavigation, NcAppNavigationCaption, NcAppNavigationItem, NcAppNavigationList, NcAppNavigationNew, NcAppNavigationSettings, NcButton, NcCounterBubble } from '@nextcloud/vue'
 import { toRaw } from 'vue'
 import BookOpenVariant from 'vue-material-design-icons/BookOpenVariant.vue'
 import Cog from 'vue-material-design-icons/Cog.vue'
@@ -474,6 +498,7 @@ import Cog from 'vue-material-design-icons/Cog.vue'
 import HelpCircleOutline from 'vue-material-design-icons/HelpCircleOutline.vue'
 import MapMarkerPath from 'vue-material-design-icons/MapMarkerPath.vue'
 import OpenInNew from 'vue-material-design-icons/OpenInNew.vue'
+import Pencil from 'vue-material-design-icons/Pencil.vue'
 import Plus from 'vue-material-design-icons/Plus.vue'
 import ShieldAccountOutline from 'vue-material-design-icons/ShieldAccountOutline.vue'
 import { ICON_MAP } from '../CnIcon/CnIcon.vue'
@@ -560,6 +585,8 @@ export default {
 	name: 'CnAppNav',
 
 	components: {
+		NcActionLink,
+		Pencil,
 		NcAppNavigation,
 		NcAppNavigationCaption,
 		NcAppNavigationItem,
@@ -1921,8 +1948,10 @@ export default {
 		/**
 		 * Whether a menu entry renders as a `NcAppNavigationCaption`
 		 * (`type: "caption"`) rather than a clickable
-		 * `NcAppNavigationItem`. Caption entries ignore `route`, `href`,
-		 * `action`, `icon`, `count`, `children`, and `pinned`.
+		 * `NcAppNavigationItem`. Caption entries ignore `route`, `action`,
+		 * `icon`, `count`, `children`, and `pinned`. A caption's `href` is
+		 * drawn as a pencil link beside the heading: the place where what
+		 * stands under it is changed (a user's own choice of entries, say).
 		 *
 		 * @param {{ type?: string }} item Menu entry descriptor.
 		 * @return {boolean}
@@ -1931,6 +1960,16 @@ export default {
 			return item?.type === 'caption'
 		},
 
+		/**
+		 * The accessible name of a caption's pencil link.
+		 *
+		 * @param {object} item The caption entry.
+		 * @return {string} "Change {caption}", translated.
+		 */
+		captionEditLabel(item) {
+			return t('nextcloud-vue', 'Change {name}', { name: this.resolveLabel(item) })
+		},
+
 		/**
 		 * Whether the host has registered a scoped slot named
 		 * `item-${id}-actions` for this menu item. Used to gate template