@conduction/nextcloud-vue 2.97.0 → 2.98.0

package/dist/esm/components/CnOrderedListField/CnOrderedListField.vue.js

@@ -0,0 +1,9 @@
+import script from './CnOrderedListField.vue2.js';
+import { render } from './CnOrderedListField.vue3.js';
+
+script.render = render;
+script.__scopeId = "data-v-81cf425a";
+const __sfc_main = script;
+
+export { __sfc_main as default };
+//# sourceMappingURL=CnOrderedListField.vue.js.map

package/dist/esm/components/CnOrderedListField/CnOrderedListField.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CnOrderedListField.vue.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;"}

package/dist/esm/components/CnOrderedListField/CnOrderedListField.vue2.js

@@ -0,0 +1,220 @@
+import { translate } from '@nextcloud/l10n';
+import { NcSelect } from '@nextcloud/vue';
+import ChevronDown from 'vue-material-design-icons/ChevronDown.vue';
+import ChevronUp from 'vue-material-design-icons/ChevronUp.vue';
+import Close from 'vue-material-design-icons/Close.vue';
+
+let orderedListUid = 0;
+
+/**
+ * CnOrderedListField - an ordered list a user keeps for themselves: rows in
+ * their order with a move up, a move down and a remove button each, and a
+ * search-as-you-type picker under it that adds a row (board
+ * DqPersoonlijkeInstellingen, "Zaaktypen in mijn menu").
+ *
+ * The app supplies the choices (`options`) and keeps the value: every change
+ * emits `update:modelValue` with the new list of values. With `searchable`
+ * the picker emits `search` as the user types, so the app can fetch matching
+ * choices itself; otherwise it filters `options`. Every move is announced in a
+ * polite live region, so reordering works with the keyboard and a screen
+ * reader, not by dragging.
+ *
+ * ```vue
+ * <CnOrderedListField
+ *   v-model="menuCaseTypes"
+ *   label="Case types in my menu"
+ *   add-label="Add case type"
+ *   :options="caseTypes" />
+ * ```
+ *
+ * @spec openspec/changes/ordered-list-field/specs/ordered-list-field/spec.md#requirement-a-user-keeps-an-ordered-list-with-the-keyboard
+ */
+var script = {
+	name: 'CnOrderedListField',
+
+	components: { ChevronDown, ChevronUp, Close, NcSelect },
+
+	props: {
+		/** The values in their order. */
+		modelValue: {
+			type: Array,
+			default: () => [],
+		},
+
+		/**
+		 * The choices, `{ value, label }` (a plain string is its own label).
+		 * A value in `modelValue` without a choice shows the value itself.
+		 */
+		options: {
+			type: Array,
+			default: () => [],
+		},
+
+		/** The list's label, also its accessible name. */
+		label: {
+			type: String,
+			default: '',
+		},
+
+		/** The picker's label. */
+		addLabel: {
+			type: String,
+			default: '',
+		},
+
+		/** Placeholder in the picker. */
+		addPlaceholder: {
+			type: String,
+			default: '',
+		},
+
+		/** Shown when the list is empty. */
+		emptyText: {
+			type: String,
+			default: '',
+		},
+
+		/** Whether the app searches (`search` event) instead of the picker filtering `options`. */
+		searchable: {
+			type: Boolean,
+			default: false,
+		},
+
+		/** Whether the app is fetching choices. */
+		loading: {
+			type: Boolean,
+			default: false,
+		},
+
+		/** A read-only list: no buttons and no picker. */
+		disabled: {
+			type: Boolean,
+			default: false,
+		},
+	},
+
+	emits: ['update:modelValue', 'search'],
+
+	data() {
+		orderedListUid += 1;
+		return {
+			labelId: `cn-ordered-list-label-${orderedListUid}`,
+			announcement: '',
+		}
+	},
+
+	computed: {
+		/** @return {Array<{value: string, label: string}>} The choices in one shape. */
+		choices() {
+			return (Array.isArray(this.options) ? this.options : [])
+				.map((option) => (option && typeof option === 'object'
+					? { value: String(option.value ?? option.id ?? ''), label: String(option.label ?? option.title ?? option.value ?? '') }
+					: { value: String(option), label: String(option) }))
+				.filter((option) => option.value !== '')
+		},
+
+		/** @return {Array<{value: string, label: string}>} The rows, in order. */
+		rows() {
+			return (Array.isArray(this.modelValue) ? this.modelValue : []).map((value) => {
+				const key = String(value);
+				const choice = this.choices.find((option) => option.value === key);
+				return { value: key, label: choice ? choice.label : key }
+			})
+		},
+
+		/** @return {Array<{value: string, label: string}>} The choices not in the list yet. */
+		available() {
+			const taken = new Set(this.rows.map((row) => row.value));
+			return this.choices.filter((option) => !taken.has(option.value))
+		},
+
+		/** @return {string} The list's accessible name without a label. */
+		listLabel() {
+			return translate('nextcloud-vue', 'Ordered list')
+		},
+	},
+
+	methods: {
+		t: translate,
+
+		/**
+		 * Emit the new order.
+		 *
+		 * @param {Array<string>} values The values.
+		 */
+		emitValue(values) {
+			/**
+			 * @event update:modelValue The list changed. Payload: the values in their order.
+			 */
+			this.$emit('update:modelValue', values);
+		},
+
+		/**
+		 * Move a row to another place and keep focus on the pressed button
+		 * where it still makes sense.
+		 *
+		 * @param {number} from Its index.
+		 * @param {number} to The index it moves to.
+		 */
+		move(from, to) {
+			if (to < 0 || to >= this.rows.length) {
+				return
+			}
+			const values = this.rows.map((row) => row.value);
+			const [value] = values.splice(from, 1);
+			values.splice(to, 0, value);
+			const row = this.rows[from];
+			this.emitValue(values);
+			this.announcement = translate('nextcloud-vue', '{item} moved to position {position} of {total}', { item: row.label, position: to + 1, total: values.length });
+			this.$nextTick(() => {
+				const direction = to < from ? 'up' : 'down';
+				const atEdge = (direction === 'up' && to === 0) || (direction === 'down' && to === values.length - 1);
+				const target = this.$el.querySelector(`[data-testid="cn-ordered-list-${atEdge ? (direction === 'up' ? 'down' : 'up') : direction}-${row.value}"]`);
+				if (target && !target.disabled) {
+					target.focus();
+				}
+			});
+		},
+
+		/**
+		 * Remove a row.
+		 *
+		 * @param {number} index Its index.
+		 */
+		remove(index) {
+			const row = this.rows[index];
+			this.emitValue(this.rows.filter((_, i) => i !== index).map((r) => r.value));
+			this.announcement = translate('nextcloud-vue', '{item} removed', { item: row.label });
+		},
+
+		/**
+		 * Add the picked choice at the end.
+		 *
+		 * @param {{value: string, label: string}|null} option The choice.
+		 */
+		add(option) {
+			if (!option) {
+				return
+			}
+			this.emitValue([...this.rows.map((row) => row.value), option.value]);
+			this.announcement = translate('nextcloud-vue', '{item} added', { item: option.label });
+		},
+
+		/**
+		 * Pass the typed text on when the app searches.
+		 *
+		 * @param {string} query The text.
+		 */
+		onSearch(query) {
+			if (this.searchable) {
+				/**
+				 * @event search The user typed in the picker (with `searchable`). Payload: the text.
+				 */
+				this.$emit('search', query);
+			}
+		},
+	},
+};
+
+export { script as default };
+//# sourceMappingURL=CnOrderedListField.vue2.js.map

package/dist/esm/components/CnOrderedListField/CnOrderedListField.vue2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CnOrderedListField.vue2.js","sources":["../../../../src/components/CnOrderedListField/CnOrderedListField.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2026 Conduction B.V.\n  - SPDX-License-Identifier: EUPL-1.2\n-->\n\n<template>\n\t<div class=\"cn-ordered-list-field\" data-testid=\"cn-ordered-list-field\">\n\t\t<p v-if=\"label\" :id=\"labelId\" class=\"cn-ordered-list-field__label\">\n\t\t\t{{ label }}\n\t\t</p>\n\t\t<ol\n\t\t\tv-if=\"rows.length > 0\"\n\t\t\tclass=\"cn-ordered-list-field__rows\"\n\t\t\t:aria-labelledby=\"label ? labelId : null\"\n\t\t\t:aria-label=\"label ? null : listLabel\">\n\t\t\t<li\n\t\t\t\tv-for=\"(row, index) in rows\"\n\t\t\t\t:key=\"row.value\"\n\t\t\t\tclass=\"cn-ordered-list-field__row\"\n\t\t\t\t:data-testid=\"`cn-ordered-list-row-${row.value}`\">\n\t\t\t\t<span class=\"cn-ordered-list-field__position\" aria-hidden=\"true\">{{ index + 1 }}</span>\n\t\t\t\t<span class=\"cn-ordered-list-field__text\">{{ row.label }}</span>\n\t\t\t\t<span class=\"cn-ordered-list-field__actions\">\n\t\t\t\t\t<button\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\tclass=\"cn-ordered-list-field__button\"\n\t\t\t\t\t\t:disabled=\"disabled || index === 0\"\n\t\t\t\t\t\t:aria-label=\"t('nextcloud-vue', 'Move {item} up', { item: row.label })\"\n\t\t\t\t\t\t:data-testid=\"`cn-ordered-list-up-${row.value}`\"\n\t\t\t\t\t\t@click=\"move(index, index - 1)\">\n\t\t\t\t\t\t<ChevronUp :size=\"20\" />\n\t\t\t\t\t</button>\n\t\t\t\t\t<button\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\tclass=\"cn-ordered-list-field__button\"\n\t\t\t\t\t\t:disabled=\"disabled || index === rows.length - 1\"\n\t\t\t\t\t\t:aria-label=\"t('nextcloud-vue', 'Move {item} down', { item: row.label })\"\n\t\t\t\t\t\t:data-testid=\"`cn-ordered-list-down-${row.value}`\"\n\t\t\t\t\t\t@click=\"move(index, index + 1)\">\n\t\t\t\t\t\t<ChevronDown :size=\"20\" />\n\t\t\t\t\t</button>\n\t\t\t\t\t<button\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\tclass=\"cn-ordered-list-field__button\"\n\t\t\t\t\t\t:disabled=\"disabled\"\n\t\t\t\t\t\t:aria-label=\"t('nextcloud-vue', 'Remove {item}', { item: row.label })\"\n\t\t\t\t\t\t:data-testid=\"`cn-ordered-list-remove-${row.value}`\"\n\t\t\t\t\t\t@click=\"remove(index)\">\n\t\t\t\t\t\t<Close :size=\"20\" />\n\t\t\t\t\t</button>\n\t\t\t\t</span>\n\t\t\t</li>\n\t\t</ol>\n\t\t<p v-else class=\"cn-ordered-list-field__empty\" data-testid=\"cn-ordered-list-empty\">\n\t\t\t{{ emptyText || t('nextcloud-vue', 'Nothing added yet.') }}\n\t\t</p>\n\t\t<div v-if=\"!disabled\" class=\"cn-ordered-list-field__add\">\n\t\t\t<NcSelect\n\t\t\t\t:modelValue=\"null\"\n\t\t\t\t:options=\"available\"\n\t\t\t\tlabel=\"label\"\n\t\t\t\t:inputLabel=\"addLabel || t('nextcloud-vue', 'Add')\"\n\t\t\t\t:placeholder=\"addPlaceholder\"\n\t\t\t\t:loading=\"loading\"\n\t\t\t\t:clearable=\"false\"\n\t\t\t\t:filterable=\"!searchable\"\n\t\t\t\tdata-testid=\"cn-ordered-list-add\"\n\t\t\t\t@search=\"onSearch\"\n\t\t\t\t@update:modelValue=\"add\" />\n\t\t</div>\n\t\t<p class=\"hidden-visually\" aria-live=\"polite\" data-testid=\"cn-ordered-list-live\">\n\t\t\t{{ announcement }}\n\t\t</p>\n\t</div>\n</template>\n\n<script>\nimport { translate as t } from '@nextcloud/l10n'\nimport { NcSelect } from '@nextcloud/vue'\nimport ChevronDown from 'vue-material-design-icons/ChevronDown.vue'\nimport ChevronUp from 'vue-material-design-icons/ChevronUp.vue'\nimport Close from 'vue-material-design-icons/Close.vue'\n\nlet orderedListUid = 0\n\n/**\n * CnOrderedListField - an ordered list a user keeps for themselves: rows in\n * their order with a move up, a move down and a remove button each, and a\n * search-as-you-type picker under it that adds a row (board\n * DqPersoonlijkeInstellingen, \"Zaaktypen in mijn menu\").\n *\n * The app supplies the choices (`options`) and keeps the value: every change\n * emits `update:modelValue` with the new list of values. With `searchable`\n * the picker emits `search` as the user types, so the app can fetch matching\n * choices itself; otherwise it filters `options`. Every move is announced in a\n * polite live region, so reordering works with the keyboard and a screen\n * reader, not by dragging.\n *\n * ```vue\n * <CnOrderedListField\n *   v-model=\"menuCaseTypes\"\n *   label=\"Case types in my menu\"\n *   add-label=\"Add case type\"\n *   :options=\"caseTypes\" />\n * ```\n *\n * @spec openspec/changes/ordered-list-field/specs/ordered-list-field/spec.md#requirement-a-user-keeps-an-ordered-list-with-the-keyboard\n */\nexport default {\n\tname: 'CnOrderedListField',\n\n\tcomponents: { ChevronDown, ChevronUp, Close, NcSelect },\n\n\tprops: {\n\t\t/** The values in their order. */\n\t\tmodelValue: {\n\t\t\ttype: Array,\n\t\t\tdefault: () => [],\n\t\t},\n\n\t\t/**\n\t\t * The choices, `{ value, label }` (a plain string is its own label).\n\t\t * A value in `modelValue` without a choice shows the value itself.\n\t\t */\n\t\toptions: {\n\t\t\ttype: Array,\n\t\t\tdefault: () => [],\n\t\t},\n\n\t\t/** The list's label, also its accessible name. */\n\t\tlabel: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/** The picker's label. */\n\t\taddLabel: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/** Placeholder in the picker. */\n\t\taddPlaceholder: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/** Shown when the list is empty. */\n\t\temptyText: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/** Whether the app searches (`search` event) instead of the picker filtering `options`. */\n\t\tsearchable: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/** Whether the app is fetching choices. */\n\t\tloading: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/** A read-only list: no buttons and no picker. */\n\t\tdisabled: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t},\n\n\temits: ['update:modelValue', 'search'],\n\n\tdata() {\n\t\torderedListUid += 1\n\t\treturn {\n\t\t\tlabelId: `cn-ordered-list-label-${orderedListUid}`,\n\t\t\tannouncement: '',\n\t\t}\n\t},\n\n\tcomputed: {\n\t\t/** @return {Array<{value: string, label: string}>} The choices in one shape. */\n\t\tchoices() {\n\t\t\treturn (Array.isArray(this.options) ? this.options : [])\n\t\t\t\t.map((option) => (option && typeof option === 'object'\n\t\t\t\t\t? { value: String(option.value ?? option.id ?? ''), label: String(option.label ?? option.title ?? option.value ?? '') }\n\t\t\t\t\t: { value: String(option), label: String(option) }))\n\t\t\t\t.filter((option) => option.value !== '')\n\t\t},\n\n\t\t/** @return {Array<{value: string, label: string}>} The rows, in order. */\n\t\trows() {\n\t\t\treturn (Array.isArray(this.modelValue) ? this.modelValue : []).map((value) => {\n\t\t\t\tconst key = String(value)\n\t\t\t\tconst choice = this.choices.find((option) => option.value === key)\n\t\t\t\treturn { value: key, label: choice ? choice.label : key }\n\t\t\t})\n\t\t},\n\n\t\t/** @return {Array<{value: string, label: string}>} The choices not in the list yet. */\n\t\tavailable() {\n\t\t\tconst taken = new Set(this.rows.map((row) => row.value))\n\t\t\treturn this.choices.filter((option) => !taken.has(option.value))\n\t\t},\n\n\t\t/** @return {string} The list's accessible name without a label. */\n\t\tlistLabel() {\n\t\t\treturn t('nextcloud-vue', 'Ordered list')\n\t\t},\n\t},\n\n\tmethods: {\n\t\tt,\n\n\t\t/**\n\t\t * Emit the new order.\n\t\t *\n\t\t * @param {Array<string>} values The values.\n\t\t */\n\t\temitValue(values) {\n\t\t\t/**\n\t\t\t * @event update:modelValue The list changed. Payload: the values in their order.\n\t\t\t */\n\t\t\tthis.$emit('update:modelValue', values)\n\t\t},\n\n\t\t/**\n\t\t * Move a row to another place and keep focus on the pressed button\n\t\t * where it still makes sense.\n\t\t *\n\t\t * @param {number} from Its index.\n\t\t * @param {number} to The index it moves to.\n\t\t */\n\t\tmove(from, to) {\n\t\t\tif (to < 0 || to >= this.rows.length) {\n\t\t\t\treturn\n\t\t\t}\n\t\t\tconst values = this.rows.map((row) => row.value)\n\t\t\tconst [value] = values.splice(from, 1)\n\t\t\tvalues.splice(to, 0, value)\n\t\t\tconst row = this.rows[from]\n\t\t\tthis.emitValue(values)\n\t\t\tthis.announcement = t('nextcloud-vue', '{item} moved to position {position} of {total}', { item: row.label, position: to + 1, total: values.length })\n\t\t\tthis.$nextTick(() => {\n\t\t\t\tconst direction = to < from ? 'up' : 'down'\n\t\t\t\tconst atEdge = (direction === 'up' && to === 0) || (direction === 'down' && to === values.length - 1)\n\t\t\t\tconst target = this.$el.querySelector(`[data-testid=\"cn-ordered-list-${atEdge ? (direction === 'up' ? 'down' : 'up') : direction}-${row.value}\"]`)\n\t\t\t\tif (target && !target.disabled) {\n\t\t\t\t\ttarget.focus()\n\t\t\t\t}\n\t\t\t})\n\t\t},\n\n\t\t/**\n\t\t * Remove a row.\n\t\t *\n\t\t * @param {number} index Its index.\n\t\t */\n\t\tremove(index) {\n\t\t\tconst row = this.rows[index]\n\t\t\tthis.emitValue(this.rows.filter((_, i) => i !== index).map((r) => r.value))\n\t\t\tthis.announcement = t('nextcloud-vue', '{item} removed', { item: row.label })\n\t\t},\n\n\t\t/**\n\t\t * Add the picked choice at the end.\n\t\t *\n\t\t * @param {{value: string, label: string}|null} option The choice.\n\t\t */\n\t\tadd(option) {\n\t\t\tif (!option) {\n\t\t\t\treturn\n\t\t\t}\n\t\t\tthis.emitValue([...this.rows.map((row) => row.value), option.value])\n\t\t\tthis.announcement = t('nextcloud-vue', '{item} added', { item: option.label })\n\t\t},\n\n\t\t/**\n\t\t * Pass the typed text on when the app searches.\n\t\t *\n\t\t * @param {string} query The text.\n\t\t */\n\t\tonSearch(query) {\n\t\t\tif (this.searchable) {\n\t\t\t\t/**\n\t\t\t\t * @event search The user typed in the picker (with `searchable`). Payload: the text.\n\t\t\t\t */\n\t\t\t\tthis.$emit('search', query)\n\t\t\t}\n\t\t},\n\t},\n}\n</script>\n\n<style scoped>\n.cn-ordered-list-field {\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 10px;\n}\n\n.cn-ordered-list-field__label {\n\tmargin: 0;\n\tfont-weight: 600;\n}\n\n.cn-ordered-list-field__rows {\n\tdisplay: flex;\n\tflex-direction: column;\n\tmargin: 0;\n\tpadding: 0;\n\tborder: 1px solid var(--color-border);\n\tborder-radius: var(--border-radius-element, 8px);\n\tlist-style: none;\n}\n\n.cn-ordered-list-field__row {\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 10px;\n\tmin-height: 44px;\n\tpadding: 2px 6px 2px 12px;\n}\n\n.cn-ordered-list-field__row + .cn-ordered-list-field__row {\n\tborder-top: 1px solid var(--color-border);\n}\n\n.cn-ordered-list-field__position {\n\tflex: none;\n\tmin-width: 18px;\n\tcolor: var(--color-text-maxcontrast);\n\tfont-size: 13px;\n\tfont-variant-numeric: tabular-nums;\n}\n\n.cn-ordered-list-field__text {\n\tflex: 1 1 auto;\n\tmin-width: 0;\n\toverflow-wrap: anywhere;\n}\n\n.cn-ordered-list-field__actions {\n\tdisplay: flex;\n\tflex: none;\n\tgap: 2px;\n}\n\n.cn-ordered-list-field__button {\n\tdisplay: inline-flex;\n\talign-items: center;\n\tjustify-content: center;\n\twidth: 40px;\n\tmin-width: 40px;\n\theight: 40px;\n\tmin-height: 40px;\n\tmargin: 0;\n\tpadding: 0;\n\tborder: 0;\n\tborder-radius: var(--border-radius-element, 8px);\n\tbackground: transparent;\n\tcolor: var(--color-main-text);\n\tcursor: pointer;\n}\n\n.cn-ordered-list-field__button:hover:not(:disabled) {\n\tbackground: var(--color-background-hover);\n}\n\n.cn-ordered-list-field__button:focus-visible {\n\toutline: 2px solid var(--color-primary-element);\n\toutline-offset: 1px;\n}\n\n.cn-ordered-list-field__button:disabled {\n\topacity: 0.4;\n\tcursor: default;\n}\n\n.cn-ordered-list-field__empty {\n\tmargin: 0;\n\tcolor: var(--color-text-maxcontrast);\n}\n</style>\n"],"names":["t"],"mappings":"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"}

package/dist/esm/components/CnOrderedListField/CnOrderedListField.vue3.js

@@ -0,0 +1,121 @@
+import { resolveComponent, openBlock, createElementBlock, toDisplayString, createCommentVNode, Fragment, renderList, createElementVNode, createVNode } from 'vue';
+
+const _hoisted_1 = {
+  class: "cn-ordered-list-field",
+  "data-testid": "cn-ordered-list-field"
+};
+const _hoisted_2 = ["id"];
+const _hoisted_3 = ["aria-labelledby", "aria-label"];
+const _hoisted_4 = ["data-testid"];
+const _hoisted_5 = {
+  class: "cn-ordered-list-field__position",
+  "aria-hidden": "true"
+};
+const _hoisted_6 = { class: "cn-ordered-list-field__text" };
+const _hoisted_7 = { class: "cn-ordered-list-field__actions" };
+const _hoisted_8 = ["disabled", "aria-label", "data-testid", "onClick"];
+const _hoisted_9 = ["disabled", "aria-label", "data-testid", "onClick"];
+const _hoisted_10 = ["disabled", "aria-label", "data-testid", "onClick"];
+const _hoisted_11 = {
+  key: 2,
+  class: "cn-ordered-list-field__empty",
+  "data-testid": "cn-ordered-list-empty"
+};
+const _hoisted_12 = {
+  key: 3,
+  class: "cn-ordered-list-field__add"
+};
+const _hoisted_13 = {
+  class: "hidden-visually",
+  "aria-live": "polite",
+  "data-testid": "cn-ordered-list-live"
+};
+
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_ChevronUp = resolveComponent("ChevronUp");
+  const _component_ChevronDown = resolveComponent("ChevronDown");
+  const _component_Close = resolveComponent("Close");
+  const _component_NcSelect = resolveComponent("NcSelect");
+
+  return (openBlock(), createElementBlock("div", _hoisted_1, [
+    ($props.label)
+      ? (openBlock(), createElementBlock("p", {
+          key: 0,
+          id: $data.labelId,
+          class: "cn-ordered-list-field__label"
+        }, toDisplayString($props.label), 9 /* TEXT, PROPS */, _hoisted_2))
+      : createCommentVNode("v-if", true),
+    ($options.rows.length > 0)
+      ? (openBlock(), createElementBlock("ol", {
+          key: 1,
+          class: "cn-ordered-list-field__rows",
+          "aria-labelledby": $props.label ? $data.labelId : null,
+          "aria-label": $props.label ? null : $options.listLabel
+        }, [
+          (openBlock(true), createElementBlock(Fragment, null, renderList($options.rows, (row, index) => {
+            return (openBlock(), createElementBlock("li", {
+              key: row.value,
+              class: "cn-ordered-list-field__row",
+              "data-testid": `cn-ordered-list-row-${row.value}`
+            }, [
+              createElementVNode("span", _hoisted_5, toDisplayString(index + 1), 1 /* TEXT */),
+              createElementVNode("span", _hoisted_6, toDisplayString(row.label), 1 /* TEXT */),
+              createElementVNode("span", _hoisted_7, [
+                createElementVNode("button", {
+                  type: "button",
+                  class: "cn-ordered-list-field__button",
+                  disabled: $props.disabled || index === 0,
+                  "aria-label": $options.t('nextcloud-vue', 'Move {item} up', { item: row.label }),
+                  "data-testid": `cn-ordered-list-up-${row.value}`,
+                  onClick: $event => ($options.move(index, index - 1))
+                }, [
+                  createVNode(_component_ChevronUp, { size: 20 })
+                ], 8 /* PROPS */, _hoisted_8),
+                createElementVNode("button", {
+                  type: "button",
+                  class: "cn-ordered-list-field__button",
+                  disabled: $props.disabled || index === $options.rows.length - 1,
+                  "aria-label": $options.t('nextcloud-vue', 'Move {item} down', { item: row.label }),
+                  "data-testid": `cn-ordered-list-down-${row.value}`,
+                  onClick: $event => ($options.move(index, index + 1))
+                }, [
+                  createVNode(_component_ChevronDown, { size: 20 })
+                ], 8 /* PROPS */, _hoisted_9),
+                createElementVNode("button", {
+                  type: "button",
+                  class: "cn-ordered-list-field__button",
+                  disabled: $props.disabled,
+                  "aria-label": $options.t('nextcloud-vue', 'Remove {item}', { item: row.label }),
+                  "data-testid": `cn-ordered-list-remove-${row.value}`,
+                  onClick: $event => ($options.remove(index))
+                }, [
+                  createVNode(_component_Close, { size: 20 })
+                ], 8 /* PROPS */, _hoisted_10)
+              ])
+            ], 8 /* PROPS */, _hoisted_4))
+          }), 128 /* KEYED_FRAGMENT */))
+        ], 8 /* PROPS */, _hoisted_3))
+      : (openBlock(), createElementBlock("p", _hoisted_11, toDisplayString($props.emptyText || $options.t('nextcloud-vue', 'Nothing added yet.')), 1 /* TEXT */)),
+    (!$props.disabled)
+      ? (openBlock(), createElementBlock("div", _hoisted_12, [
+          createVNode(_component_NcSelect, {
+            modelValue: null,
+            options: $options.available,
+            label: "label",
+            inputLabel: $props.addLabel || $options.t('nextcloud-vue', 'Add'),
+            placeholder: $props.addPlaceholder,
+            loading: $props.loading,
+            clearable: false,
+            filterable: !$props.searchable,
+            "data-testid": "cn-ordered-list-add",
+            onSearch: $options.onSearch,
+            "onUpdate:modelValue": $options.add
+          }, null, 8 /* PROPS */, ["options", "inputLabel", "placeholder", "loading", "filterable", "onSearch", "onUpdate:modelValue"])
+        ]))
+      : createCommentVNode("v-if", true),
+    createElementVNode("p", _hoisted_13, toDisplayString($data.announcement), 1 /* TEXT */)
+  ]))
+}
+
+export { render };
+//# sourceMappingURL=CnOrderedListField.vue3.js.map

package/dist/esm/components/CnOrderedListField/CnOrderedListField.vue3.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CnOrderedListField.vue3.js","sources":["../../../../src/components/CnOrderedListField/CnOrderedListField.vue?vue&type=template&id=81cf425a&lang.js"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2026 Conduction B.V.\n  - SPDX-License-Identifier: EUPL-1.2\n-->\n\n<template>\n\t<div class=\"cn-ordered-list-field\" data-testid=\"cn-ordered-list-field\">\n\t\t<p v-if=\"label\" :id=\"labelId\" class=\"cn-ordered-list-field__label\">\n\t\t\t{{ label }}\n\t\t</p>\n\t\t<ol\n\t\t\tv-if=\"rows.length > 0\"\n\t\t\tclass=\"cn-ordered-list-field__rows\"\n\t\t\t:aria-labelledby=\"label ? labelId : null\"\n\t\t\t:aria-label=\"label ? null : listLabel\">\n\t\t\t<li\n\t\t\t\tv-for=\"(row, index) in rows\"\n\t\t\t\t:key=\"row.value\"\n\t\t\t\tclass=\"cn-ordered-list-field__row\"\n\t\t\t\t:data-testid=\"`cn-ordered-list-row-${row.value}`\">\n\t\t\t\t<span class=\"cn-ordered-list-field__position\" aria-hidden=\"true\">{{ index + 1 }}</span>\n\t\t\t\t<span class=\"cn-ordered-list-field__text\">{{ row.label }}</span>\n\t\t\t\t<span class=\"cn-ordered-list-field__actions\">\n\t\t\t\t\t<button\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\tclass=\"cn-ordered-list-field__button\"\n\t\t\t\t\t\t:disabled=\"disabled || index === 0\"\n\t\t\t\t\t\t:aria-label=\"t('nextcloud-vue', 'Move {item} up', { item: row.label })\"\n\t\t\t\t\t\t:data-testid=\"`cn-ordered-list-up-${row.value}`\"\n\t\t\t\t\t\t@click=\"move(index, index - 1)\">\n\t\t\t\t\t\t<ChevronUp :size=\"20\" />\n\t\t\t\t\t</button>\n\t\t\t\t\t<button\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\tclass=\"cn-ordered-list-field__button\"\n\t\t\t\t\t\t:disabled=\"disabled || index === rows.length - 1\"\n\t\t\t\t\t\t:aria-label=\"t('nextcloud-vue', 'Move {item} down', { item: row.label })\"\n\t\t\t\t\t\t:data-testid=\"`cn-ordered-list-down-${row.value}`\"\n\t\t\t\t\t\t@click=\"move(index, index + 1)\">\n\t\t\t\t\t\t<ChevronDown :size=\"20\" />\n\t\t\t\t\t</button>\n\t\t\t\t\t<button\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\tclass=\"cn-ordered-list-field__button\"\n\t\t\t\t\t\t:disabled=\"disabled\"\n\t\t\t\t\t\t:aria-label=\"t('nextcloud-vue', 'Remove {item}', { item: row.label })\"\n\t\t\t\t\t\t:data-testid=\"`cn-ordered-list-remove-${row.value}`\"\n\t\t\t\t\t\t@click=\"remove(index)\">\n\t\t\t\t\t\t<Close :size=\"20\" />\n\t\t\t\t\t</button>\n\t\t\t\t</span>\n\t\t\t</li>\n\t\t</ol>\n\t\t<p v-else class=\"cn-ordered-list-field__empty\" data-testid=\"cn-ordered-list-empty\">\n\t\t\t{{ emptyText || t('nextcloud-vue', 'Nothing added yet.') }}\n\t\t</p>\n\t\t<div v-if=\"!disabled\" class=\"cn-ordered-list-field__add\">\n\t\t\t<NcSelect\n\t\t\t\t:modelValue=\"null\"\n\t\t\t\t:options=\"available\"\n\t\t\t\tlabel=\"label\"\n\t\t\t\t:inputLabel=\"addLabel || t('nextcloud-vue', 'Add')\"\n\t\t\t\t:placeholder=\"addPlaceholder\"\n\t\t\t\t:loading=\"loading\"\n\t\t\t\t:clearable=\"false\"\n\t\t\t\t:filterable=\"!searchable\"\n\t\t\t\tdata-testid=\"cn-ordered-list-add\"\n\t\t\t\t@search=\"onSearch\"\n\t\t\t\t@update:modelValue=\"add\" />\n\t\t</div>\n\t\t<p class=\"hidden-visually\" aria-live=\"polite\" data-testid=\"cn-ordered-list-live\">\n\t\t\t{{ announcement }}\n\t\t</p>\n\t</div>\n</template>\n\n<script>\nimport { translate as t } from '@nextcloud/l10n'\nimport { NcSelect } from '@nextcloud/vue'\nimport ChevronDown from 'vue-material-design-icons/ChevronDown.vue'\nimport ChevronUp from 'vue-material-design-icons/ChevronUp.vue'\nimport Close from 'vue-material-design-icons/Close.vue'\n\nlet orderedListUid = 0\n\n/**\n * CnOrderedListField - an ordered list a user keeps for themselves: rows in\n * their order with a move up, a move down and a remove button each, and a\n * search-as-you-type picker under it that adds a row (board\n * DqPersoonlijkeInstellingen, \"Zaaktypen in mijn menu\").\n *\n * The app supplies the choices (`options`) and keeps the value: every change\n * emits `update:modelValue` with the new list of values. With `searchable`\n * the picker emits `search` as the user types, so the app can fetch matching\n * choices itself; otherwise it filters `options`. Every move is announced in a\n * polite live region, so reordering works with the keyboard and a screen\n * reader, not by dragging.\n *\n * ```vue\n * <CnOrderedListField\n *   v-model=\"menuCaseTypes\"\n *   label=\"Case types in my menu\"\n *   add-label=\"Add case type\"\n *   :options=\"caseTypes\" />\n * ```\n *\n * @spec openspec/changes/ordered-list-field/specs/ordered-list-field/spec.md#requirement-a-user-keeps-an-ordered-list-with-the-keyboard\n */\nexport default {\n\tname: 'CnOrderedListField',\n\n\tcomponents: { ChevronDown, ChevronUp, Close, NcSelect },\n\n\tprops: {\n\t\t/** The values in their order. */\n\t\tmodelValue: {\n\t\t\ttype: Array,\n\t\t\tdefault: () => [],\n\t\t},\n\n\t\t/**\n\t\t * The choices, `{ value, label }` (a plain string is its own label).\n\t\t * A value in `modelValue` without a choice shows the value itself.\n\t\t */\n\t\toptions: {\n\t\t\ttype: Array,\n\t\t\tdefault: () => [],\n\t\t},\n\n\t\t/** The list's label, also its accessible name. */\n\t\tlabel: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/** The picker's label. */\n\t\taddLabel: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/** Placeholder in the picker. */\n\t\taddPlaceholder: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/** Shown when the list is empty. */\n\t\temptyText: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/** Whether the app searches (`search` event) instead of the picker filtering `options`. */\n\t\tsearchable: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/** Whether the app is fetching choices. */\n\t\tloading: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/** A read-only list: no buttons and no picker. */\n\t\tdisabled: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t},\n\n\temits: ['update:modelValue', 'search'],\n\n\tdata() {\n\t\torderedListUid += 1\n\t\treturn {\n\t\t\tlabelId: `cn-ordered-list-label-${orderedListUid}`,\n\t\t\tannouncement: '',\n\t\t}\n\t},\n\n\tcomputed: {\n\t\t/** @return {Array<{value: string, label: string}>} The choices in one shape. */\n\t\tchoices() {\n\t\t\treturn (Array.isArray(this.options) ? this.options : [])\n\t\t\t\t.map((option) => (option && typeof option === 'object'\n\t\t\t\t\t? { value: String(option.value ?? option.id ?? ''), label: String(option.label ?? option.title ?? option.value ?? '') }\n\t\t\t\t\t: { value: String(option), label: String(option) }))\n\t\t\t\t.filter((option) => option.value !== '')\n\t\t},\n\n\t\t/** @return {Array<{value: string, label: string}>} The rows, in order. */\n\t\trows() {\n\t\t\treturn (Array.isArray(this.modelValue) ? this.modelValue : []).map((value) => {\n\t\t\t\tconst key = String(value)\n\t\t\t\tconst choice = this.choices.find((option) => option.value === key)\n\t\t\t\treturn { value: key, label: choice ? choice.label : key }\n\t\t\t})\n\t\t},\n\n\t\t/** @return {Array<{value: string, label: string}>} The choices not in the list yet. */\n\t\tavailable() {\n\t\t\tconst taken = new Set(this.rows.map((row) => row.value))\n\t\t\treturn this.choices.filter((option) => !taken.has(option.value))\n\t\t},\n\n\t\t/** @return {string} The list's accessible name without a label. */\n\t\tlistLabel() {\n\t\t\treturn t('nextcloud-vue', 'Ordered list')\n\t\t},\n\t},\n\n\tmethods: {\n\t\tt,\n\n\t\t/**\n\t\t * Emit the new order.\n\t\t *\n\t\t * @param {Array<string>} values The values.\n\t\t */\n\t\temitValue(values) {\n\t\t\t/**\n\t\t\t * @event update:modelValue The list changed. Payload: the values in their order.\n\t\t\t */\n\t\t\tthis.$emit('update:modelValue', values)\n\t\t},\n\n\t\t/**\n\t\t * Move a row to another place and keep focus on the pressed button\n\t\t * where it still makes sense.\n\t\t *\n\t\t * @param {number} from Its index.\n\t\t * @param {number} to The index it moves to.\n\t\t */\n\t\tmove(from, to) {\n\t\t\tif (to < 0 || to >= this.rows.length) {\n\t\t\t\treturn\n\t\t\t}\n\t\t\tconst values = this.rows.map((row) => row.value)\n\t\t\tconst [value] = values.splice(from, 1)\n\t\t\tvalues.splice(to, 0, value)\n\t\t\tconst row = this.rows[from]\n\t\t\tthis.emitValue(values)\n\t\t\tthis.announcement = t('nextcloud-vue', '{item} moved to position {position} of {total}', { item: row.label, position: to + 1, total: values.length })\n\t\t\tthis.$nextTick(() => {\n\t\t\t\tconst direction = to < from ? 'up' : 'down'\n\t\t\t\tconst atEdge = (direction === 'up' && to === 0) || (direction === 'down' && to === values.length - 1)\n\t\t\t\tconst target = this.$el.querySelector(`[data-testid=\"cn-ordered-list-${atEdge ? (direction === 'up' ? 'down' : 'up') : direction}-${row.value}\"]`)\n\t\t\t\tif (target && !target.disabled) {\n\t\t\t\t\ttarget.focus()\n\t\t\t\t}\n\t\t\t})\n\t\t},\n\n\t\t/**\n\t\t * Remove a row.\n\t\t *\n\t\t * @param {number} index Its index.\n\t\t */\n\t\tremove(index) {\n\t\t\tconst row = this.rows[index]\n\t\t\tthis.emitValue(this.rows.filter((_, i) => i !== index).map((r) => r.value))\n\t\t\tthis.announcement = t('nextcloud-vue', '{item} removed', { item: row.label })\n\t\t},\n\n\t\t/**\n\t\t * Add the picked choice at the end.\n\t\t *\n\t\t * @param {{value: string, label: string}|null} option The choice.\n\t\t */\n\t\tadd(option) {\n\t\t\tif (!option) {\n\t\t\t\treturn\n\t\t\t}\n\t\t\tthis.emitValue([...this.rows.map((row) => row.value), option.value])\n\t\t\tthis.announcement = t('nextcloud-vue', '{item} added', { item: option.label })\n\t\t},\n\n\t\t/**\n\t\t * Pass the typed text on when the app searches.\n\t\t *\n\t\t * @param {string} query The text.\n\t\t */\n\t\tonSearch(query) {\n\t\t\tif (this.searchable) {\n\t\t\t\t/**\n\t\t\t\t * @event search The user typed in the picker (with `searchable`). Payload: the text.\n\t\t\t\t */\n\t\t\t\tthis.$emit('search', query)\n\t\t\t}\n\t\t},\n\t},\n}\n</script>\n\n<style scoped>\n.cn-ordered-list-field {\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 10px;\n}\n\n.cn-ordered-list-field__label {\n\tmargin: 0;\n\tfont-weight: 600;\n}\n\n.cn-ordered-list-field__rows {\n\tdisplay: flex;\n\tflex-direction: column;\n\tmargin: 0;\n\tpadding: 0;\n\tborder: 1px solid var(--color-border);\n\tborder-radius: var(--border-radius-element, 8px);\n\tlist-style: none;\n}\n\n.cn-ordered-list-field__row {\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 10px;\n\tmin-height: 44px;\n\tpadding: 2px 6px 2px 12px;\n}\n\n.cn-ordered-list-field__row + .cn-ordered-list-field__row {\n\tborder-top: 1px solid var(--color-border);\n}\n\n.cn-ordered-list-field__position {\n\tflex: none;\n\tmin-width: 18px;\n\tcolor: var(--color-text-maxcontrast);\n\tfont-size: 13px;\n\tfont-variant-numeric: tabular-nums;\n}\n\n.cn-ordered-list-field__text {\n\tflex: 1 1 auto;\n\tmin-width: 0;\n\toverflow-wrap: anywhere;\n}\n\n.cn-ordered-list-field__actions {\n\tdisplay: flex;\n\tflex: none;\n\tgap: 2px;\n}\n\n.cn-ordered-list-field__button {\n\tdisplay: inline-flex;\n\talign-items: center;\n\tjustify-content: center;\n\twidth: 40px;\n\tmin-width: 40px;\n\theight: 40px;\n\tmin-height: 40px;\n\tmargin: 0;\n\tpadding: 0;\n\tborder: 0;\n\tborder-radius: var(--border-radius-element, 8px);\n\tbackground: transparent;\n\tcolor: var(--color-main-text);\n\tcursor: pointer;\n}\n\n.cn-ordered-list-field__button:hover:not(:disabled) {\n\tbackground: var(--color-background-hover);\n}\n\n.cn-ordered-list-field__button:focus-visible {\n\toutline: 2px solid var(--color-primary-element);\n\toutline-offset: 1px;\n}\n\n.cn-ordered-list-field__button:disabled {\n\topacity: 0.4;\n\tcursor: default;\n}\n\n.cn-ordered-list-field__empty {\n\tmargin: 0;\n\tcolor: var(--color-text-maxcontrast);\n}\n</style>\n"],"names":["_openBlock","_createElementBlock","_Fragment","_renderList","_createElementVNode","_toDisplayString","_createVNode"],"mappings":"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"}

package/dist/esm/components/CnUserSettingsDialog/CnUserSettingsDialog.vue.js

@@ -2,7 +2,7 @@ import script from './CnUserSettingsDialog.vue2.js';
 import { render } from './CnUserSettingsDialog.vue3.js';
 
 script.render = render;
-script.__scopeId = "data-v-8ebfd3c8";
+script.__scopeId = "data-v-e537e50a";
 const __sfc_main = script;
 
 export { __sfc_main as default };

package/dist/esm/components/CnUserSettingsDialog/CnUserSettingsDialog.vue2.js

@@ -1,7 +1,9 @@
 import { translate } from '@nextcloud/l10n';
+import { generateUrl } from '@nextcloud/router';
 import { NcButton } from '@nextcloud/vue';
-import { markRaw } from 'vue';
+import { ref, markRaw, cloneVNode } from 'vue';
 import __sfc_main from '../CnDialog/CnDialog.vue.js';
+import __sfc_main$1 from '../CnIcon/CnIcon.vue.js';
 
 /**
  * The key NcAppSettingsSection injects to register itself with its dialog
@@ -9,20 +11,26 @@ import __sfc_main from '../CnDialog/CnDialog.vue.js';
  */
 const REGISTRATION_KEY = Symbol.for('NcAppSettingsDialog:registration');
 
+/** The key NcAppSettingsSection injects for the legacy design flag. */
+const LEGACY_DESIGN_KEY = Symbol.for('NcAppSettingsDialog:legacy');
+
 /** Renders a section's icon vnodes as they were registered. */
 const CnVNodes = {
 	name: 'CnVNodes',
 	props: { vnodes: { type: [Array, Object], default: null } },
 	render() {
-		return this.vnodes
+		// A section's icon is drawn twice (navigation and heading), so each draw gets its own copy.
+		const list = Array.isArray(this.vnodes) ? this.vnodes : [this.vnodes];
+		return list.map((vnode) => (vnode && typeof vnode === 'object' ? cloneVNode(vnode) : vnode))
 	},
 };
 
 /**
  * CnUserSettingsDialog - the user settings dialog in the board look (board
  * PqPersoonlijk): eyebrow, title and subtitle, a left navigation listing the
- * sections with their icons, the sections themselves, and a footer with a
- * note that changes save straight away and a Close button.
+ * sections with their icons, the current section (the others stay mounted
+ * but hidden), and a footer with a note that changes save straight away and
+ * a Close button.
  *
  * The sections stay the app's: any `NcAppSettingsSection` in the default slot
  * registers itself with this dialog exactly as it does with
@@ -36,7 +44,7 @@ const CnVNodes = {
 var script = {
 	name: 'CnUserSettingsDialog',
 
-	components: { CnDialog: __sfc_main, CnVNodes, NcButton },
+	components: { CnDialog: __sfc_main, CnIcon: __sfc_main$1, CnVNodes, NcButton },
 
 	provide() {
 		return {
@@ -44,6 +52,9 @@ var script = {
 				registerSection: this.registerSection,
 				unregisterSection: this.unregisterSection,
 			},
+
+			// NcAppSettingsSection also asks its dialog whether to use the legacy design.
+			[LEGACY_DESIGN_KEY]: ref(false),
 		}
 	},
 
@@ -56,8 +67,15 @@ var script = {
 		eyebrow: { type: String, default: () => translate('nextcloud-vue', 'Your account') },
 		/** Sentence under the title. */
 		subtitle: { type: String, default: () => translate('nextcloud-vue', 'Only for you. Colleagues keep their own settings.') },
-		/** The app's name, after the footer note. */
+		/** The app's name, after the footer note and as the navigation entry holding its sections. */
 		appName: { type: String, default: '' },
+		/**
+		 * Nextcloud's own personal settings, listed first in the navigation as
+		 * links: `[{ label, section? | href?, icon? }]`. `section` is a
+		 * personal settings section id (`/settings/user/<section>`). With any,
+		 * the app's sections sit under one entry named after the app.
+		 */
+		nextcloudLinks: { type: Array, default: () => [] },
 	},
 
 	emits: ['update:open'],
@@ -66,11 +84,30 @@ var script = {
 		return {
 			sections: [],
 			selected: '',
+			/** Ids of the sections whose heading is in the page, for the heading icons. */
+			headingTargets: [],
 			picked: false,
 		}
 	},
 
 	computed: {
+		/**
+		 * The Nextcloud links with their URL.
+		 *
+		 * @spec openspec/changes/user-settings-nav-groups/specs/user-settings-board-dialog/spec.md#requirement-the-board-user-settings-navigation-can-list-nextclouds-own-sections-first
+		 * @return {Array<{key: string, label: string, href: string, icon: string}>}
+		 */
+		ncLinks() {
+			return (Array.isArray(this.nextcloudLinks) ? this.nextcloudLinks : [])
+				.filter((link) => link && typeof link === 'object' && typeof link.label === 'string' && link.label !== '' && (link.href || link.section))
+				.map((link, index) => ({
+					key: String(link.section || link.href || index),
+					label: link.label,
+					href: link.href || generateUrl('/settings/user/{section}', { section: String(link.section) }),
+					icon: typeof link.icon === 'string' ? link.icon : '',
+				}))
+		},
+
 		/** @return {object} The board's eyebrow: muted, in sentence case. */
 		eyebrowStyle() {
 			return { '--cn-dialog-eyebrow-transform': 'none', '--cn-dialog-eyebrow-color': 'var(--color-text-maxcontrast)' }
@@ -93,6 +130,21 @@ var script = {
 		},
 	},
 
+	watch: {
+		sections() {
+			this.$nextTick(() => {
+				this.headingTargets = typeof document === 'undefined'
+					? []
+					: this.sections.filter((section) => section.icon && document.getElementById(`settings-section_${section.id}--label`)).map((section) => section.id);
+				this.showSelected();
+			});
+		},
+
+		selected() {
+			this.$nextTick(() => this.showSelected());
+		},
+	},
+
 	methods: {
 		/**
 		 * Add a section to the navigation, kept in `order`; a section
@@ -133,9 +185,31 @@ var script = {
 		selectSection(id) {
 			this.picked = true;
 			this.selected = id;
-			const target = typeof document !== 'undefined' ? document.getElementById(`settings-section_${id}`) : null;
-			if (target && typeof target.scrollIntoView === 'function') {
-				target.scrollIntoView({ behavior: 'smooth', block: 'start' });
+			this.$nextTick(() => {
+				this.showSelected();
+				const heading = typeof document !== 'undefined' ? document.getElementById(`settings-section_${id}--label`) : null;
+				if (heading) {
+					heading.setAttribute('tabindex', '-1');
+					heading.focus();
+				}
+			});
+		},
+
+		/**
+		 * Show the current section and hide the others. They stay mounted,
+		 * so what a reader typed in one survives a switch.
+		 *
+		 * @spec openspec/changes/user-settings-one-section/specs/user-settings-board-dialog/spec.md#requirement-the-board-user-settings-dialog-shows-one-section-at-a-time
+		 */
+		showSelected() {
+			if (typeof document === 'undefined') {
+				return
+			}
+			for (const section of this.sections) {
+				const el = document.getElementById(`settings-section_${section.id}`);
+				if (el) {
+					el.hidden = section.id !== this.selected;
+				}
 			}
 		},