@conduction/nextcloud-vue 2.56.0-beta.12 → 2.56.0-beta.14

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: 35197196 bytes
-sha256: 893c086c8da03029e46dfe50d98a24e639f212abee995c1345acd72a41ab45be
+size: 35372297 bytes
+sha256: 7065df25e721d338e4612aac2ee75c58c87fb5e17477c811e7bcf66cee41783d

package/dist/nextcloud-vue.css

@@ -1283,6 +1283,53 @@
 	font-size: var(--cn-kpi-value-size-stacked, 2rem);
 }
 
+/* Stacked: the board's tile (`content.layout: 'stacked'`). A plain muted
+   label, the number at 34px/700 in the text colour, and the caption on a line
+   of its own; CnStatWidget draws no icon circle in this layout. The padding
+   adds up with a dashboard card-fit cell's 8px 14px to the board's 18px 20px.
+   Every value is a token so a theme can move it. */
+.cn-kpi-card--stacked {
+	flex-direction: column;
+	align-items: stretch;
+	justify-content: center;
+	gap: 0;
+	padding: var(--cn-kpi-stacked-padding, 10px 6px);
+}
+
+.cn-kpi-card--stacked .cn-kpi-card__body {
+	gap: var(--cn-kpi-stacked-gap, 6px);
+}
+
+.cn-kpi-card--stacked .cn-kpi-card__title {
+	font-size: var(--cn-kpi-stacked-title-size, 14px);
+	font-weight: var(--cn-kpi-stacked-title-weight, 400);
+	color: var(--color-text-maxcontrast);
+}
+
+.cn-kpi-card--stacked .cn-kpi-card__value {
+	font-size: var(--cn-kpi-stacked-value-size, 34px);
+	font-weight: var(--cn-kpi-value-weight, 700);
+	line-height: 1;
+	letter-spacing: -0.01em;
+	color: var(--cn-kpi-stacked-value-color, var(--color-main-text));
+}
+
+.cn-kpi-card--stacked .cn-kpi-card__caption-line {
+	flex: 0 0 auto;
+	max-width: 100%;
+	font-size: var(--cn-kpi-label-size, 13px);
+	font-weight: 500;
+}
+
+/* A linked stacked tile reads as a tile, not as underlined link text. The
+   NL Design theme underlines every `a` with `!important`, so the opt-out
+   needs it too; it only applies to this opt-in layout. */
+a.cn-kpi-card--stacked,
+a.cn-kpi-card--stacked:hover,
+a.cn-kpi-card--stacked:focus-visible {
+	text-decoration: none !important;
+}
+
 /* Filled: the card draws its own grey box, for a KPI that is NOT already
    inside a wrapper that draws one. Opt-in via `content.flat: false`. */
 .cn-kpi-card--filled {
@@ -1893,6 +1940,23 @@
 	color: var(--color-text-maxcontrast);
 }
 
+/* Beside the inline search (`showCountWithSearch`): the search field shrinks
+   first and the counter stays on one line. */
+.cn-actions-bar__count--beside-search {
+	flex-shrink: 0;
+	white-space: nowrap;
+}
+
+/* Taken out of the flex row so it adds no gap, but kept in the accessibility
+   tree so the live region exists before a total appears. */
+.cn-actions-bar__count--empty {
+	position: absolute;
+	width: 1px;
+	height: 1px;
+	overflow: hidden;
+	clip-path: inset(50%);
+}
+
 /* Inline search field */
 .cn-actions-bar__search {
 	position: relative;
@@ -2152,8 +2216,9 @@
 		display: contents;
 	}
 
-	/* #after-search filter buttons + the view toggle ride beside the
-	   search field (DOM order — search first via its own order). */
+	/* #after-search filter buttons, the beside-search counter and the view
+	   toggle ride beside the search field (DOM order — search first via its
+	   own order). */
 	.cn-actions-bar__info > * {
 		order: 1;
 	}
@@ -2790,6 +2855,28 @@
 	min-width: 0;
 }
 
+/* A widget in the header (`config.headerWidget`) takes a row of its own under
+   the title and the actions. */
+.cn-detail-page__header--with-widget {
+	flex-wrap: wrap;
+	row-gap: var(--cn-detail-header-row-gap, 22px);
+}
+
+.cn-detail-page__header-widget {
+	flex: 1 0 100%;
+	min-width: 0;
+}
+
+/* The header as a card (`config.headerCard`): the board's case header, a
+   bordered box on the surface colour. The 56px inset that clears the
+   navigation toggle is not needed inside a card that starts below it. */
+.cn-detail-page__header--card {
+	padding: var(--cn-detail-header-card-padding, 22px 24px);
+	border: 1px solid var(--color-border);
+	border-radius: var(--cn-detail-header-card-radius, 12px);
+	background: var(--color-main-background);
+}
+
 .cn-detail-page__header-left {
 	display: flex;
 	align-items: center;
@@ -3210,6 +3297,11 @@
 	font-size: 0.9em;
 	white-space: nowrap;
 }
+
+/* A page view the switch shows with nothing to draw (view-switch-containers). */
+.cn-detail-page .cn-page-view-region--empty {
+	padding: 40px 20px;
+}
 /* CnReferencePreview — a reference that shows what it points at. */
 
 .cn-reference-preview {
@@ -16875,7 +16967,17 @@ a.cn-xwiki-card__title[data-v-54e85fe3]:hover {
 	text-overflow: ellipsis;
 	white-space: nowrap;
 }
+
+/* A clickable label is a <button>, and Nextcloud's core stylesheet gives
+   every `button:not(.button-vue)` a min-height of the clickable area (34 to
+   44px) with the text centred in it. That pushed each reachable stage's label
+   about 12px below the current one, which is a <span>. Zeroed here so all
+   labels sit 8px under their bar, as the board draws them. The visually
+   hidden "(current step)" is absolutely positioned and takes no space. */
 button.cn-stages-widget__bar-label[data-v-358fde0f] {
+	min-height: 0;
+	height: auto;
+	line-height: inherit;
 	cursor: pointer;
 }
 button.cn-stages-widget__bar-label[aria-disabled="true"][data-v-358fde0f] {
@@ -17310,6 +17412,53 @@ button.cn-stages-widget__bar-label[data-v-358fde0f]:focus-visible {
 	font-size: var(--cn-kpi-value-size-stacked, 2rem);
 }
 
+/* Stacked: the board's tile (`content.layout: 'stacked'`). A plain muted
+   label, the number at 34px/700 in the text colour, and the caption on a line
+   of its own; CnStatWidget draws no icon circle in this layout. The padding
+   adds up with a dashboard card-fit cell's 8px 14px to the board's 18px 20px.
+   Every value is a token so a theme can move it. */
+.cn-kpi-card--stacked {
+	flex-direction: column;
+	align-items: stretch;
+	justify-content: center;
+	gap: 0;
+	padding: var(--cn-kpi-stacked-padding, 10px 6px);
+}
+
+.cn-kpi-card--stacked .cn-kpi-card__body {
+	gap: var(--cn-kpi-stacked-gap, 6px);
+}
+
+.cn-kpi-card--stacked .cn-kpi-card__title {
+	font-size: var(--cn-kpi-stacked-title-size, 14px);
+	font-weight: var(--cn-kpi-stacked-title-weight, 400);
+	color: var(--color-text-maxcontrast);
+}
+
+.cn-kpi-card--stacked .cn-kpi-card__value {
+	font-size: var(--cn-kpi-stacked-value-size, 34px);
+	font-weight: var(--cn-kpi-value-weight, 700);
+	line-height: 1;
+	letter-spacing: -0.01em;
+	color: var(--cn-kpi-stacked-value-color, var(--color-main-text));
+}
+
+.cn-kpi-card--stacked .cn-kpi-card__caption-line {
+	flex: 0 0 auto;
+	max-width: 100%;
+	font-size: var(--cn-kpi-label-size, 13px);
+	font-weight: 500;
+}
+
+/* A linked stacked tile reads as a tile, not as underlined link text. The
+   NL Design theme underlines every `a` with `!important`, so the opt-out
+   needs it too; it only applies to this opt-in layout. */
+a.cn-kpi-card--stacked,
+a.cn-kpi-card--stacked:hover,
+a.cn-kpi-card--stacked:focus-visible {
+	text-decoration: none !important;
+}
+
 /* Filled: the card draws its own grey box, for a KPI that is NOT already
    inside a wrapper that draws one. Opt-in via `content.flat: false`. */
 .cn-kpi-card--filled {
@@ -18262,6 +18411,16 @@ to { background-position: -200% 0;
 	flex: 0 0 auto;
 	padding: 16px;
 }
+
+/* On the page ground (`content.ground`): no card, so no inset around the
+   view switch, and the heading at the board's 32px. */
+.cn-header-widget--ground .cn-header-widget__views[data-v-1b97430f] {
+	padding: 0;
+}
+.cn-header-widget--ground .cn-header-widget__title[data-v-1b97430f] {
+	font-size: var(--cn-header-ground-title-size, 32px);
+	letter-spacing: -0.01em;
+}
 .cn-header-widget__date[data-v-1b97430f] {
 	font-size: 14px;
 	line-height: 1.4;
@@ -30431,6 +30590,19 @@ to {
 .cn-dashboard-page__empty[data-v-824052fe] {
 	padding: 60px 20px;
 }
+
+/* The page's view switch on a page without a header row: at the end of its
+   own row, above the grids, where the header would have put it. */
+.cn-dashboard-page__view-switch[data-v-824052fe] {
+	display: flex;
+	justify-content: flex-end;
+	margin-bottom: 12px;
+}
+
+/* A view the switch shows with nothing to draw. */
+.cn-page-view-region--empty[data-v-824052fe] {
+	padding: 40px 20px;
+}
 .cn-dashboard-page__page-filters[data-v-824052fe] {
 	display: flex;
 	flex-wrap: wrap;
@@ -33247,6 +33419,21 @@ a.cn-integration-card__title[data-v-f7e9bbfa]:hover {
 	padding: calc(var(--default-grid-baseline, 4px) * 2);
 }
 
+/*
+ * The primary action never shrinks out of sight. NcAppNavigation renders it in
+ * `.app-navigation__body`, a flex child with `overflow-y: scroll` (so its
+ * minimum height is 0) beside a list of `height: 100%` and the footer. With a
+ * card and footer entries below the list, the column overflows and the body
+ * gives up its share of the shrink: "New case" showed as a 24px sliver of a
+ * 42px button. All three forms carry `.app-navigation-new` (the solid and
+ * link wrappers mirror NcAppNavigationNew's class), and the rule is scoped to
+ * this component's navigation, so a navigation without a primary action lays
+ * out exactly as before.
+ */
+.app-navigation[data-testid="cn-nav"] .app-navigation__body:has(> .app-navigation-new) {
+	flex-shrink: 0;
+}
+
 /*
  * Footer-section items (section: "footer") render in NcAppNavigation's
  * #footer slot, outside the scroll container, so they stay visible above
@@ -33270,6 +33457,19 @@ a.cn-integration-card__title[data-v-f7e9bbfa]:hover {
 	overflow: visible !important;
 }
 
+/*
+ * A declared footer that names `settings` first (`nav.footer`) puts the
+ * foldout above the footer list. The two are siblings in NcAppNavigation's
+ * flex column, so `order` moves them without changing either's markup; the
+ * card above keeps order 0 and stays first.
+ */
+.cn-app-nav__settings--first {
+	order: 1;
+}
+.cn-app-nav__footer-list--after-settings {
+	order: 2;
+}
+
 /*
  * Align the settings foldout's items with the main/footer list items,
  * whose icons sit at a 16px inset. The foldout's items live in a bare

package/l10n/en.json

@@ -1,5 +1,6 @@
 {
   "translations": {
+    "Advanced": "Advanced",
     "The item could not be created.": "The item could not be created.",
     "Start over": "Start over",
     "Continue where you left off": "Continue where you left off",
@@ -49,6 +50,7 @@
     "This integration is not available.": "This integration is not available.",
     "Integrations": "Integrations",
     "View": "View",
+    "Views": "Views",
     "current step": "current step",
     "{app} not available": "{app} not available",
     "{app} not configured": "{app} not configured",
@@ -408,6 +410,7 @@
     "Any": "Any",
     "To": "To",
     "Equals": "Equals",
+    "Contains": "Contains",
     "Clear": "Clear",
     "Apply": "Apply",
     "This column cannot list its objects.": "This column cannot list its objects.",
@@ -1088,6 +1091,7 @@
     "The actions of an attention card are declared in the manifest.": "The actions of an attention card are declared in the manifest.",
     "An attention card needs a title": "An attention card needs a title",
     "Good morning, {name}": "Good morning, {name}",
+    "This view has no widgets yet.": "This view has no widgets yet.",
     "Good morning": "Good morning",
     "Good afternoon, {name}": "Good afternoon, {name}",
     "Good afternoon": "Good afternoon",
@@ -1097,7 +1101,9 @@
     "Show the date of today above the heading": "Show the date of today above the heading",
     "Plain header without a coloured background": "Plain header without a coloured background",
     "Loading…": "Loading…",
-    "A register and schema are required": "A register and schema are required"
+    "A register and schema are required": "A register and schema are required",
+    "Change the search or try again.": "Change the search or try again.",
+    "Try again later.": "Try again later."
   },
   "plurals": {
     "%n year": ["%n year", "%n years"],

package/l10n/nl.json

@@ -1,5 +1,6 @@
 {
   "translations": {
+    "Advanced": "Geavanceerd",
     "The item could not be created.": "Het item kon niet worden aangemaakt.",
     "Start over": "Opnieuw beginnen",
     "Continue where you left off": "Ga verder waar je was",
@@ -49,6 +50,7 @@
     "This integration is not available.": "Deze integratie is niet beschikbaar.",
     "Integrations": "Integraties",
     "View": "Weergave",
+    "Views": "Weergaven",
     "current step": "huidige stap",
     "{app} not available": "{app} niet beschikbaar",
     "{app} not configured": "{app} niet geconfigureerd",
@@ -408,6 +410,7 @@
     "Any": "Alle",
     "To": "Tot",
     "Equals": "Is gelijk aan",
+    "Contains": "Bevat",
     "Clear": "Wissen",
     "Apply": "Toepassen",
     "This column cannot list its objects.": "Deze kolom kan zijn objecten niet tonen.",
@@ -1132,6 +1135,7 @@
     "The actions of an attention card are declared in the manifest.": "De acties van een aandachtskaart staan in het manifest.",
     "An attention card needs a title": "Een aandachtskaart heeft een titel nodig",
     "Good morning, {name}": "Goedemorgen, {name}",
+    "This view has no widgets yet.": "Deze weergave heeft nog geen widgets.",
     "Good morning": "Goedemorgen",
     "Good afternoon, {name}": "Goedemiddag, {name}",
     "Good afternoon": "Goedemiddag",
@@ -1141,7 +1145,9 @@
     "Show the date of today above the heading": "Toon de datum van vandaag boven de kop",
     "Plain header without a coloured background": "Eenvoudige kop zonder gekleurde achtergrond",
     "Loading…": "Laden…",
-    "A register and schema are required": "Een register en schema zijn verplicht"
+    "A register and schema are required": "Een register en schema zijn verplicht",
+    "Change the search or try again.": "Pas de zoekopdracht aan of probeer het opnieuw.",
+    "Try again later.": "Probeer het later opnieuw."
   },
   "plurals": {
     "%n year": ["%n jaar", "%n jaar"],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@conduction/nextcloud-vue",
-  "version": "2.56.0-beta.12",
+  "version": "2.56.0-beta.14",
   "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/CnActionsBar/CnActionsBar.md

@@ -152,9 +152,10 @@ Controlling the inline action button count — `inlineActionCount` sets how many
 | `showMap` | `Boolean` | `false` | Whether to render the third "Map" view-toggle segment. Off by default so existing two-segment consumers are unchanged |
 | `mapLabel` | `String` | `''` | Label for the map view-toggle option (defaults to "Map"). Only shown when `showMap` |
 | `mapIcon` | `String` | `''` | MDI icon name for the map option (defaults to the built-in map-marker icon). Resolved via `CnIcon` |
-| `showSearch` | `Boolean` | `false` | Whether to show the inline search field on the left of the bar |
+| `showSearch` | `Boolean` | `false` | Whether to show the inline search field on the left of the bar. The field takes the place of the "Showing X of Y" counter unless `showCountWithSearch` is set |
 | `searchValue` | `String` | `''` | Current value of the inline search field (controlled) |
 | `searchPlaceholder` | `String` | `''` | Placeholder / accessible label for the inline search field |
+| `showCountWithSearch` | `Boolean` | `false` | Keep the "Showing X of Y" counter visible beside the inline search field, after the search and any `#after-search` controls. No effect without `showSearch` |
 | `headerActions` | `Array` | `[]` | Manifest-declared page-level actions rendered inside the overflow dropdown between the built-in Refresh and the `#action-items` slot. Each entry is `{ id, label, icon?, disabled? }` — the bar emits `@header-action({ action: id, id })` on click and the parent (e.g. `CnIndexPage`) dispatches the resolved handler. The `icon` field accepts EITHER an MDI Vue component name (e.g. `'History'`) — rendered via `CnIcon` — OR a Nextcloud core CSS icon class (e.g. `'icon-history'`) — rendered as a `<span>` carrying that class. An entry with `href` (URL) or `to` (vue-router location) renders as a real link, `linkTarget` as its `target`; it still emits `@header-action`, so the parent must not navigate for it again. |
 
 ## Manifest header actions example

package/src/components/CnActionsBar/CnActionsBar.vue

@@ -12,11 +12,16 @@
 					:aria-label="searchPlaceholder || t('nextcloud-vue', 'Search')"
 					@input="onSearchInput">
 			</div>
-			<span v-else-if="pagination && pagination.total > 0" class="cn-actions-bar__count">
+			<span v-else-if="hasTotal" class="cn-actions-bar__count">
 				{{ countText }}
 			</span>
 			<!-- @slot after-search Refinement controls rendered beside the search field on the LEFT side of the bar (e.g. a filter menu button). Convention: the left side groups the VISUAL controls — search, filters, view toggle — while the right cluster holds the ACT controls (add, overflow); the standalone sort select is a display control too but keeps its legacy right-side placement. -->
 			<slot name="after-search" />
+			<!-- Counter beside the search (`showCountWithSearch`): after the search and its #after-search controls. The live region stays mounted while there is no total, so results coming back after none are announced too. -->
+			<span v-if="showSearch && showCountWithSearch"
+				class="cn-actions-bar__count cn-actions-bar__count--beside-search"
+				:class="{ 'cn-actions-bar__count--empty': !hasTotal }"
+				aria-live="polite">{{ hasTotal ? countText : '' }}</span>
 
 			<!-- View mode toggle (Cards / Table / List) — segmented control with
 			     a sliding thumb that animates between the N segments. Lives in
@@ -644,6 +649,16 @@ export default {
 			default: '',
 		},
 
+		/**
+		 * Keep the "Showing X of Y" counter visible beside the inline search field,
+		 * after any `#after-search` controls. By default the search field takes the
+		 * counter's place. No effect without `showSearch`.
+		 */
+		showCountWithSearch: {
+			type: Boolean,
+			default: false,
+		},
+
 		/** Whether the refresh action is currently in progress */
 		refreshing: {
 			type: Boolean,
@@ -811,6 +826,15 @@ export default {
 			}))
 		},
 
+		/**
+		 * Whether there is a non-empty total for the "Showing X of Y" counter.
+		 *
+		 * @return {boolean}
+		 */
+		hasTotal() {
+			return Boolean(this.pagination && this.pagination.total > 0)
+		},
+
 		countText() {
 			if (!this.pagination) {
 				return ''

package/src/components/CnAppNav/CnAppNav.vue

@@ -246,7 +246,7 @@
 				</NcAppNavigationItem>
 			</template>
 		</template>
-		<template v-if="footerItems.length > 0 || showSettingsFoldout || resolvedCard || resolvedHelp" #footer>
+		<template v-if="footerItems.length > 0 || showSettingsFoldout || resolvedCard || showsHelp" #footer>
 			<!--
 				@slot card
 				@description Replace the card above the footer entries
@@ -282,11 +282,15 @@
 			     hover highlight are scoped to itself, so they survive being
 			     slotted. The main list's inset comes from NcAppNavigation's
 			     scope, which slot content does not carry. -->
-			<NcAppNavigationList v-if="footerItems.length > 0 || resolvedHelp" class="cn-app-nav__footer-list">
+			<NcAppNavigationList
+				v-if="footerItems.length > 0 || showsHelp"
+				class="cn-app-nav__footer-list"
+				:class="{ 'cn-app-nav__footer-list--after-settings': settingsFirst }">
 				<!-- The help entry (`nav.help`): a link to the app's own help
-				     with a help icon, above the footer entries. -->
+				     with a help icon, above the footer entries (or after them,
+				     when a declared `nav.footer` names it last). -->
 				<NcAppNavigationItem
-					v-if="resolvedHelp"
+					v-if="showsHelp && !helpAfterItems"
 					:name="resolvedHelp.label"
 					:to="resolvedHelp.to"
 					:href="resolvedHelp.href"
@@ -318,6 +322,17 @@
 							:active="isActive(item)" />
 					</template>
 				</NcAppNavigationItem>
+				<NcAppNavigationItem
+					v-if="showsHelp && helpAfterItems"
+					:name="resolvedHelp.label"
+					:to="resolvedHelp.to"
+					:href="resolvedHelp.href"
+					:target="resolvedHelp.href ? '_blank' : undefined"
+					data-testid="cn-nav-help">
+					<template #icon>
+						<HelpCircleOutline :size="20" />
+					</template>
+				</NcAppNavigationItem>
 			</NcAppNavigationList>
 			<!-- Settings foldout (section: "settings" items). NC-native
 			     gear-icon button that slides open a panel; the first entry
@@ -326,6 +341,7 @@
 			<NcAppNavigationSettings
 				v-if="showSettingsFoldout"
 				:name="settingsFoldoutLabel"
+				:class="{ 'cn-app-nav__settings--first': settingsFirst }"
 				data-testid="cn-nav-settings">
 				<ul class="cn-app-nav__settings-list">
 					<NcAppNavigationItem
@@ -958,17 +974,113 @@ export default {
 		 * Documentation, Features & Roadmap, About.
 		 */
 		footerItems() {
-			return this.visibleItems.filter((item) => item.section === 'footer')
+			const footer = this.visibleItems.filter((item) => item.section === 'footer')
+			const declared = this.declaredFooter
+			if (declared === null) {
+				return footer
+			}
+			// A declared footer (`nav.footer`) keeps only the entries it names,
+			// in the order it names them.
+			return declared
+				.map((id) => footer.find((item) => item.id === id))
+				.filter(Boolean)
+		},
+
+		/**
+		 * The footer the manifest declares (`nav.footer`): an ordered list of
+		 * menu entry ids plus the reserved ids `help` (the `nav.help` entry)
+		 * and `settings` (the settings foldout). Null when the manifest
+		 * declares none, which keeps today's footer: the help entry, then
+		 * every `section: "footer"` entry, then the foldout.
+		 *
+		 * @spec openspec/changes/zuiddrecht-pixel-gaps-2/specs/zuiddrecht-pixel-gaps-2/spec.md#requirement-the-navigation-footer-can-be-declared
+		 * @return {Array<string>|null}
+		 */
+		declaredFooter() {
+			const declared = this.effectiveManifest?.nav?.footer
+			if (!Array.isArray(declared)) {
+				return null
+			}
+			return declared.filter((id) => typeof id === 'string' && id !== '')
+		},
+
+		/**
+		 * Footer-section entries a declared footer leaves out. They move into
+		 * the settings foldout rather than disappearing, so a page such as
+		 * Store or Reports stays reachable. Empty without `nav.footer`.
+		 *
+		 * @spec openspec/changes/zuiddrecht-pixel-gaps-2/specs/zuiddrecht-pixel-gaps-2/spec.md#requirement-the-navigation-footer-can-be-declared
+		 * @return {Array<object>}
+		 */
+		undeclaredFooterItems() {
+			const declared = this.declaredFooter
+			if (declared === null) {
+				return []
+			}
+			return this.visibleItems.filter((item) => item.section === 'footer' && !declared.includes(item.id))
+		},
+
+		/**
+		 * Whether the help entry renders: whenever it resolves, unless a
+		 * declared footer leaves `help` out.
+		 *
+		 * @spec openspec/changes/zuiddrecht-pixel-gaps-2/specs/zuiddrecht-pixel-gaps-2/spec.md#requirement-the-navigation-footer-can-be-declared
+		 * @return {boolean}
+		 */
+		showsHelp() {
+			if (!this.resolvedHelp) {
+				return false
+			}
+			return this.declaredFooter === null || this.declaredFooter.includes('help')
+		},
+
+		/**
+		 * Whether the help entry goes AFTER the footer entries. Only a declared
+		 * footer that names an entry before `help` puts it there; by default
+		 * it leads the list.
+		 *
+		 * @spec openspec/changes/zuiddrecht-pixel-gaps-2/specs/zuiddrecht-pixel-gaps-2/spec.md#requirement-the-navigation-footer-can-be-declared
+		 * @return {boolean}
+		 */
+		helpAfterItems() {
+			const declared = this.declaredFooter
+			if (declared === null) {
+				return false
+			}
+			const help = declared.indexOf('help')
+			return this.footerItems.some((item) => declared.indexOf(item.id) < help)
+		},
+
+		/**
+		 * Whether the settings foldout goes ABOVE the footer list: only when a
+		 * declared footer names `settings` before every other entry
+		 * (`["settings", "help"]`, the board's "Instellingen" then "Hulp en
+		 * uitleg"). Done with CSS `order` on the two siblings, so the markup
+		 * of both stays as it is.
+		 *
+		 * @spec openspec/changes/zuiddrecht-pixel-gaps-2/specs/zuiddrecht-pixel-gaps-2/spec.md#requirement-the-navigation-footer-can-be-declared
+		 * @return {boolean}
+		 */
+		settingsFirst() {
+			const declared = this.declaredFooter
+			return declared !== null && declared.indexOf('settings') === 0
 		},
 
 		/**
 		 * Items that render INSIDE the NcAppNavigationSettings foldout
 		 * (section: "settings"). The foldout is the NC-native gear-icon
 		 * button that slides a panel open; these entries are app-level
-		 * configuration pages (Forms, Pipelines, Automations, …).
+		 * configuration pages (Forms, Pipelines, Automations, …). A declared
+		 * footer (`nav.footer`) adds the footer entries it leaves out.
+		 *
+		 * @spec openspec/changes/zuiddrecht-pixel-gaps-2/specs/zuiddrecht-pixel-gaps-2/spec.md#requirement-the-navigation-footer-can-be-declared
+		 * @return {Array<object>}
 		 */
 		settingsItems() {
-			return this.visibleItems.filter((item) => item.section === 'settings')
+			return [
+				...this.visibleItems.filter((item) => item.section === 'settings'),
+				...this.undeclaredFooterItems,
+			]
 		},
 
 		/**
@@ -1001,7 +1113,7 @@ export default {
 
 		/**
 		 * Label for the foldout's gear button. Manifest override:
-		 * `nav.settingsLabel`; defaults to "Settings".
+		 * `nav.settingsLabel`; defaults to "Advanced".
 		 *
 		 * @return {string}
 		 */
@@ -1010,7 +1122,7 @@ export default {
 			if (typeof custom === 'string' && custom.length > 0) {
 				return this.effectiveTranslate(custom)
 			}
-			return t('nextcloud-vue', 'Settings')
+			return t('nextcloud-vue', 'Advanced')
 		},
 
 		/**
@@ -2294,6 +2406,21 @@ export default {
 	padding: calc(var(--default-grid-baseline, 4px) * 2);
 }
 
+/*
+ * The primary action never shrinks out of sight. NcAppNavigation renders it in
+ * `.app-navigation__body`, a flex child with `overflow-y: scroll` (so its
+ * minimum height is 0) beside a list of `height: 100%` and the footer. With a
+ * card and footer entries below the list, the column overflows and the body
+ * gives up its share of the shrink: "New case" showed as a 24px sliver of a
+ * 42px button. All three forms carry `.app-navigation-new` (the solid and
+ * link wrappers mirror NcAppNavigationNew's class), and the rule is scoped to
+ * this component's navigation, so a navigation without a primary action lays
+ * out exactly as before.
+ */
+.app-navigation[data-testid="cn-nav"] .app-navigation__body:has(> .app-navigation-new) {
+	flex-shrink: 0;
+}
+
 /*
  * Footer-section items (section: "footer") render in NcAppNavigation's
  * #footer slot, outside the scroll container, so they stay visible above
@@ -2317,6 +2444,20 @@ export default {
 	overflow: visible !important;
 }
 
+/*
+ * A declared footer that names `settings` first (`nav.footer`) puts the
+ * foldout above the footer list. The two are siblings in NcAppNavigation's
+ * flex column, so `order` moves them without changing either's markup; the
+ * card above keeps order 0 and stays first.
+ */
+.cn-app-nav__settings--first {
+	order: 1;
+}
+
+.cn-app-nav__footer-list--after-settings {
+	order: 2;
+}
+
 /*
  * Align the settings foldout's items with the main/footer list items,
  * whose icons sit at a 16px inset. The foldout's items live in a bare