@conduction/nextcloud-vue 2.147.0 → 2.149.0

package/src/components/CnRecordListWidget/CnRecordListWidget.vue

@@ -61,7 +61,8 @@
 								:data-testid="`cn-record-list-sort-${col.key}`"
 								@click="toggleTableSort(col.key)">
 								{{ col.label }}
-								<span class="cn-record-list__sort-mark" aria-hidden="true">{{ sortMarkOf(col.key) }}</span>
+								<ChevronUp v-if="sortStateOf(col.key) === 'ascending'" class="cn-record-list__sort-mark" :size="14" />
+								<ChevronDown v-else class="cn-record-list__sort-mark" :size="14" />
 							</button>
 							<template v-else>
 								{{ col.label }}
@@ -575,7 +576,9 @@ import { generateUrl } from '@nextcloud/router'
 import { NcActionButton, NcActionCheckbox, NcActionLink, NcActions, NcButton, NcLoadingIcon } from '@nextcloud/vue'
 import { inject, ref } from 'vue'
 import Check from 'vue-material-design-icons/Check.vue'
+import ChevronDown from 'vue-material-design-icons/ChevronDown.vue'
 import ChevronRight from 'vue-material-design-icons/ChevronRight.vue'
+import ChevronUp from 'vue-material-design-icons/ChevronUp.vue'
 import FilterOutline from 'vue-material-design-icons/FilterOutline.vue'
 import CnIcon from '../CnIcon/CnIcon.vue'
 import CnStatusBadge from '../CnStatusBadge/CnStatusBadge.vue'
@@ -672,7 +675,7 @@ function unwrap(value) {
 export default {
 	name: 'CnRecordListWidget',
 
-	components: { Check, ChevronRight, CnIcon, CnRecordNoteRows, CnStatusBadge, FilterOutline, NcActionButton, NcActionCheckbox, NcActionLink, NcActions, NcButton, NcLoadingIcon },
+	components: { Check, ChevronDown, ChevronRight, ChevronUp, CnIcon, CnRecordNoteRows, CnStatusBadge, FilterOutline, NcActionButton, NcActionCheckbox, NcActionLink, NcActions, NcButton, NcLoadingIcon },
 
 	inject: {
 		/** Detail-page object context (`{ objectId, object, register, schema }`). */
@@ -2269,20 +2272,6 @@ export default {
 			return this.tableSort.key === key && this.tableSort.dir ? this.tableSort.dir : 'none'
 		},
 
-		/**
-		 * The arrow after a sortable column's label.
-		 *
-		 * @param {string} key The column key.
-		 * @return {string} An up or down arrow, or '' while the column is not the sort.
-		 */
-		sortMarkOf(key) {
-			const state = this.sortStateOf(key)
-			if (state === 'ascending') {
-				return '▲'
-			}
-			return state === 'descending' ? '▼' : ''
-		},
-
 		/**
 		 * Sort the `table` by a column: ascending first, then descending.
 		 *
@@ -3312,7 +3301,7 @@ export default {
 }
 
 .cn-record-list__sort-mark {
-	font-size: 10px;
+	color: var(--color-text-maxcontrast);
 }
 
 .cn-record-list__head {
@@ -3321,8 +3310,14 @@ export default {
 	align-items: center;
 }
 
-.cn-record-list__head-filter {
+/* The funnel is a 22px control, as the boards draw it beside a head, not
+   NcActions' 34px trigger that made the head row 54px. */
+.cn-record-list__head-filter :deep(.button-vue) {
 	--button-size: 22px;
+	width: 22px;
+	min-width: 22px;
+	height: 22px;
+	min-height: 22px;
 }
 
 .cn-record-list__table .cn-record-list__cell--end {
@@ -3413,11 +3408,16 @@ export default {
 	font-weight: 600;
 	height: 34px;
 	justify-content: center;
-	margin: 0;
 	padding: 0 14px;
 	text-decoration: none;
 }
 
+/* server.css gives every button `margin: 3px 3px 3px 0` at (0,2,1); the
+   doubled class outranks it. */
+.cn-record-list__action.cn-record-list__action {
+	margin: 0;
+}
+
 .cn-record-list__action:hover,
 .cn-record-list__action:focus-visible {
 	background: var(--color-primary-element-light-hover, var(--color-primary-element-light));

package/src/components/CnRegisterMapping/CnRegisterMapping.vue

@@ -1094,6 +1094,10 @@ export default {
 				const results = data.results || data
 				this.registers = Array.isArray(results) ? results : []
 				this.registersLoaded = true
+				// A configuration that arrived while the registers were loading
+				// skipped its schema read (the watcher waits for the registers),
+				// so read the mapped registers' schemas now.
+				this.mappedRegisterIds().forEach((id) => this.loadSchemasForRegister(id))
 			} catch (error) {
 				this.registersError = error.message || t('nextcloud-vue', 'The registers could not be loaded: {reason}', { reason: t('nextcloud-vue', 'no connection') })
 			} finally {

package/src/components/CnStepper/CnStepper.vue

@@ -154,6 +154,14 @@ export default {
 	font: inherit;
 }
 
+/* Nextcloud's server.css gives every plain button a 3px margin and the
+   clickable-area height (`button:not(.button-vue, …):not(…)`, 0,2,1), which
+   made a done step 40px tall around its 28px circle. Two classes outrank it. */
+.cn-stepper button.cn-stepper__step {
+	margin: 0;
+	min-height: 0;
+}
+
 button.cn-stepper__step {
 	cursor: pointer;
 }
@@ -230,14 +238,14 @@ button.cn-stepper__step {
 }
 
 /* The board look: one row, 28px circles, the label beside the circle. */
-/* The board leaves 20px between the stepper and the step's body (DqInstellen). */
+/* The board leaves 16px between the stepper and the step's body (DqInstellen). */
 .cn-stepper--board {
 	flex-wrap: wrap;
 	align-items: center;
 	justify-content: flex-start;
 	gap: 8px;
 	padding: 0;
-	margin: 0 0 20px;
+	margin: 0 0 16px;
 }
 
 .cn-stepper--board .cn-stepper__item {

package/src/css/dialog.css

@@ -265,8 +265,11 @@ body:has(.cn-look-board):not(:has(.cn-look-nextcloud)) .modal-mask {
 	margin-bottom: 4px;
 }
 
-/* Footer: 16px 24px, hairline on top, right aligned, 40px buttons, 10px gap. */
-.cn-dialog-board .dialog__actions {
+/* Footer: 16px 24px, hairline on top, right aligned, 40px buttons, 10px gap,
+   flush with the dialog's bottom. NcDialog's own footer rule (6px 0 12px
+   margin, 12px end padding) ties a two-class selector and wins when its
+   stylesheet loads later, so `.dialog` is added to outrank it. */
+.cn-dialog-board .dialog .dialog__actions {
 	display: flex;
 	flex-wrap: wrap;
 	align-items: center;
@@ -592,3 +595,20 @@ body:has(.cn-look-board):not(:has(.cn-look-nextcloud)) .modal-mask {
 		max-height: calc(100% - var(--cn-dialog-top, 88px) - 24px);
 	}
 }
+
+/* The chosen option's fields start 12px under its description, the label on
+   the normal line, as DqVolgendeStap draws "Opschorten": the row's 12px
+   bottom padding plus the cell's 8px gap and a 21px label line put them
+   11.6px lower (r31).
+   @spec openspec/changes/board-choice-card-fields-under-the-text/specs/dialog/spec.md */
+.cn-dialog-board .cn-choice-cards .cn-choice-cards__cell--with-details {
+	gap: 12px;
+}
+
+.cn-dialog-board .cn-choice-cards .cn-choice-cards__cell--with-details .cn-choice-cards__row {
+	padding-bottom: 0;
+}
+
+.cn-dialog-board .cn-transition-input-fields .cn-transition-input-fields__label {
+	line-height: normal;
+}

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

@@ -751,6 +751,14 @@
 	padding: calc(12px - var(--cn-board-first-line-leading)) var(--cn-board-card-inline-padding) 20px;
 }
 
+/* A card that opens on a record-list table starts 12px under its title: the
+   table's head row sets its own padding and line height, so no first line
+   carries the half-leading the rule above takes off (r31 DqZaaktype
+   "Berichten aan de aanvrager" sat 2.2px high). */
+.cn-look-board .cn-detail-page .cn-widget-wrapper__content:has(> .cn-record-list > .cn-record-list__table:first-child):not(.cn-look-nextcloud *) {
+	padding-top: 12px;
+}
+
 /* A history card with stacked rows (DqTaak "Historie") opens on the first
    row's hairline 6px under the title, the row's own 12px padding above its
    text, as drawn: 19px from the title to the first action.
@@ -841,6 +849,15 @@
 	font-weight: 500;
 }
 
+/* The files table's checkbox column is the board's 42px (12px either side
+   of the 18px box): DqZaakDocumenten and DqDocumentenBeheer both draw it so.
+   The component's 36px pushed the file icon and name 6px left (r31: name 96
+   vs 100; probed with the rule: icon 54 as drawn, name 102).
+   @spec openspec/changes/board-files-select-column-42/specs/board-files-select-column-42/spec.md#requirement-the-files-tables-checkbox-column-is-42px */
+.cn-look-board .cn-files-browser__col-select:not(.cn-look-nextcloud *) {
+	width: 42px;
+}
+
 /* A labelled select in a page card is the board's field, as in a board
    dialog (dialog.css): its label above the control at 14px/600 on the normal
    line (the theme's label weight token set to 600 here), the control 40px,
@@ -1584,10 +1601,10 @@
 
 /* The buttons above the groups are the card's 34px controls ("Bekijken als
    flow", "Taak toevoegen"), not the page's 40px ones. */
-/* The buttons sit 14px under the subtitle and 14px above the groups, the
-   card's gap (the content's own 12px top padding plus 2px). */
+/* The buttons sit 14px above the groups, the card's gap; above them the
+   content's own top padding is the space under the subtitle. */
 .cn-look-board .cn-grouped-cards__actions.cn-grouped-cards__actions:not(.cn-look-nextcloud *) {
-	margin-block: 2px 14px;
+	margin-block: 0 14px;
 }
 
 .cn-look-board .cn-grouped-cards__actions:not(.cn-look-nextcloud *) .button-vue {
@@ -2379,3 +2396,35 @@
 .cn-look-board .cn-timeline-manage__draft-label:not(.cn-look-nextcloud *) {
 	line-height: 1.2;
 }
+
+/* A facts card's link with an icon (Werkinstructie) sets the icon beside its
+   text, 10px apart, the text on the normal line starting 10px under the
+   title, as the Dq boards draw it. The anchor was a block, so the icon stood
+   on its own line above the text (r31).
+   @spec openspec/changes/board-facts-link-icon-beside-text/specs/facts-widget/spec.md */
+.cn-look-board .cn-facts-widget .cn-facts-widget__link:has(> .material-design-icon):not(.cn-look-nextcloud *) {
+	display: flex;
+	align-items: center;
+	gap: 10px;
+	margin-top: var(--cn-board-first-line-leading);
+	line-height: normal;
+}
+
+/* A table in a detail page card names each row in the link colour at 14px,
+   as DqZaakGerelateerd draws "Deelzaken" and "Objecten" (r31: 15px in the
+   body ink). The row opens the record, so its name reads as the link.
+   @spec openspec/changes/board-detail-table-title-cells/specs/board-tables/spec.md */
+.cn-look-board .cn-detail-page .cn-object-list-widget td.cn-table-col--title:not(.cn-look-nextcloud *),
+.cn-look-board .cn-detail-page .cn-object-list-widget td.cn-table-col--title .cn-cell-renderer:not(.cn-look-nextcloud *) {
+	font-size: 14px;
+	line-height: 1.2;
+	color: var(--color-primary-element);
+}
+
+/* A data card keeps its 14px under a subtitle too (DqZaakBetrokkenen
+   "Zetels"): the subtitle rule's 12px won over the data card's 14px, so the
+   labels sat 2.2px high (r31).
+   @spec openspec/changes/board-data-card-under-subtitle/specs/board-card/spec.md */
+.cn-look-board .cn-detail-page .cn-widget-wrapper:not(.cn-detail-page__side *):has(> .cn-widget-wrapper__header .cn-widget-wrapper__subtitle) > .cn-widget-wrapper__content:has(> .cn-object-data-widget__grid-wrap) {
+	padding-top: 14px;
+}

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

@@ -1079,8 +1079,9 @@
    @spec openspec/changes/board-avatar-chip/specs/data-table/spec.md#requirement-a-board-avatar-cell-draws-the-initials-chip */
 .cn-look-board .cn-table-container--board .cn-data-table .cn-cell-renderer__avatar-initials--neutral {
 	background: var(--color-background-dark);
-	color: var(--color-main-text);
+	color: var(--cn-board-text-soft);
 	font-size: 13px;
+	line-height: normal;
 }
 
 .cn-look-board .cn-table-container--board .cn-data-table .cn-cell-renderer__avatar:has(.cn-cell-renderer__avatar-initials--neutral) {
@@ -1703,9 +1704,19 @@
 	--app-sidebar-width: 360px;
 }
 
+/* The subtitle 2px under the title at a normal line height, and the tab's
+   content 20px in from the panel edge (the tab's 10px and 10px here), as
+   DqFilterBeheren draws the side panel.
+   @spec openspec/changes/board-side-panel-rhythm/specs/board-side-panel-rhythm/spec.md */
 .cn-look-board:has(.cn-index-page) > .app-sidebar .app-sidebar-header__subname {
+	margin-top: 2px;
 	color: var(--color-text-maxcontrast);
 	font-size: 14px;
+	line-height: normal;
+}
+
+.cn-look-board:has(.cn-index-page) > .app-sidebar .cn-index-sidebar__section {
+	padding: 10px;
 }
 
 .cn-look-board:has(.cn-index-page) > .app-sidebar .app-sidebar__close {
@@ -1924,9 +1935,33 @@
    @spec openspec/changes/board-index-sidebar-title-inset/specs/board-index-sidebar-title-inset/spec.md#requirement-the-index-side-panel-title-is-inset-as-the-board-draws-it */
 .cn-look-board .cn-index-sidebar-panel .app-sidebar-header.app-sidebar-header .app-sidebar-header__info .app-sidebar-header__desc.app-sidebar-header__desc {
 	padding-block-start: 15px;
+	padding-block-end: 0;
 	padding-inline-start: 20px;
 }
 
+/* The line under the title is a paragraph the theme sets with `!important`
+   (15px, its own leading): 14px muted at its normal leading, 2px under the
+   title, so the tab row starts 14px under it and the first field 20px under
+   the tabs (DqZakenSorteren, DqFilterBeheren: title 20, line 46, tabs 77,
+   search field 137).
+   @spec openspec/changes/board-side-panel-header-rhythm/specs/board-side-panel-header-rhythm/spec.md#requirement-the-side-panel-header-and-first-field-sit-as-the-boards-draw-them */
+.cn-look-board .cn-index-sidebar-panel .app-sidebar-header__subname {
+	--nldesign-component-paragraph-font-size: 14px;
+	--nldesign-component-paragraph-line-height: normal;
+	--nldesign-component-paragraph-color: var(--color-text-maxcontrast);
+	font-size: 14px !important;
+	line-height: normal !important;
+	margin-block-start: -3px !important;
+}
+
+.cn-look-board .cn-index-sidebar-panel .cn-index-sidebar__tab-content > .cn-index-sidebar__section:first-child {
+	padding-top: 8px;
+}
+
+.cn-look-board .cn-index-sidebar-panel .cn-index-sidebar__tab-content > .cn-index-sidebar__section:first-child > .input-field {
+	margin-top: 0;
+}
+
 .cn-look-board .cn-index-sidebar-panel .app-sidebar-tabs__nav[role="tablist"] {
 	justify-content: flex-start;
 	gap: 4px;
@@ -2119,6 +2154,7 @@
 .cn-look-board .cn-saved-views-panel:not(.cn-look-nextcloud *) .cn-saved-views-panel__name-text {
 	font-size: 14px;
 	font-weight: 600;
+	line-height: normal;
 }
 
 /* A view's count: a grey pill at the end of its row (DqFilterBeheren). */
@@ -2363,6 +2399,20 @@
 	padding-inline-start: 12px;
 }
 
+/* The boards draw the leading icon inside the title cell, so the title's
+   heading starts over the icon (DqOrganisaties "Naam" at 76, the icon's x),
+   as an avatar shares its column's heading (DqContacten). The blank icon
+   heading stays for the column count; the title heading reaches back over it.
+   @spec openspec/changes/board-head-over-row-icon/specs/data-table/spec.md#requirement-a-board-title-heading-starts-over-the-row-icon */
+.cn-look-board .cn-table-container--board .cn-data-table th.cn-table-col--icon + th:not(.cn-look-nextcloud *) {
+	padding-inline-start: 0;
+	overflow: visible;
+}
+
+.cn-look-board .cn-table-container--board .cn-data-table th.cn-table-col--icon + th:not(.cn-look-nextcloud *) > :first-child {
+	margin-inline-start: -32px;
+}
+
 /* ---- The table beside the open side panel (DqZakenSorteren, DqFilterBeheren) */
 /* The table takes its column's width: its configured column widths make way
    for the content, titles and names wrap (a long word hyphenated, an

package/src/css/look-board.css

@@ -942,14 +942,15 @@ body:has(.cn-look-board):not(:has(.cn-look-nextcloud)) .v-popper__popper.action-
 }
 
 /* A saved view's manage menu (DqFilterBeheren, DqFilterInMenu "Beheer
-   <view>"): 264px wide, rows of at least 40px, 6px 10px in, 8px rounded,
+   <view>"): 278px wide outside (the board's 264px of content, 6px in and a
+   1px line), rows of at least 40px, 6px 10px in, 8px rounded,
    the icon 12px before a 14px label at 600 with its explanation under it in
    12px muted text at 400; the separator in the soft line, and Delete in the
    error red. Its rows carry the panel's `cn-saved-views-` test ids.
    @spec openspec/changes/board-saved-view-manage-menu/specs/board-saved-view-manage-menu/spec.md#requirement-a-saved-views-manage-menu-is-the-boards-menu */
 body:has(.cn-look-board):not(:has(.cn-look-nextcloud)) .v-popper__popper.action-item__popper:has(li[data-testid^="cn-saved-views-"]) .v-popper__wrapper .v-popper__inner {
 	box-sizing: border-box;
-	width: 264px;
+	width: 278px;
 	max-width: calc(100vw - 32px);
 }
 
@@ -1520,8 +1521,8 @@ body:has(.cn-look-board):not(:has(.cn-look-nextcloud)) .v-popper__popper.action-
 	text-align: start;
 }
 
-/* Body rows are 42px as on the boards (10px, a 21px line, 10px, the rule).
-   A row header (dossiq's prerequisites) reads as a strong cell, not as a
+/* Body cells read 14px at 1.2, as the boards' settings tables do; a row's
+   height comes from its content (a pill or a 34px button). A row header (dossiq's prerequisites) reads as a strong cell, not as a
    head: the theme paints every th, so its tokens are handed the cell's. */
 .cn-look-board .settings-section table:not(.cn-data-table):not(.cn-look-nextcloud *) td,
 .cn-look-board .settings-section table:not(.cn-data-table):not(.cn-look-nextcloud *) tbody th {
@@ -1529,7 +1530,7 @@ body:has(.cn-look-board):not(:has(.cn-look-nextcloud)) .v-popper__popper.action-
 	border-bottom: 1px solid var(--color-background-dark);
 	color: var(--color-main-text);
 	font-size: 14px;
-	line-height: 1.5;
+	line-height: 1.2;
 	vertical-align: middle;
 }
 
@@ -1660,6 +1661,38 @@ body:has(.cn-look-board):not(:has(.cn-look-nextcloud)) .v-popper__popper.action-
 	min-width: 0;
 }
 
+/* A settings card's first line sits where the boards draw it: an
+   "Uitleg tonen" link, a switch or a note adds no height beyond its text, so
+   the first text is 16px under the subtitle (DqBeheerinstellingen
+   "Zaak-e-mail" and "AI-ondersteunde verwerking", DqBeheerGeavanceerd "KCC"
+   and "Storeregister": 7px and 29px lower live). The controls keep their full
+   hit area; the negative margin only takes it out of the line.
+   @spec openspec/changes/board-settings-first-line/specs/settings-board-look/spec.md */
+.cn-look-board .cn-settings-fields__hints-toggle:not(.cn-look-nextcloud *) {
+	margin-block: -8px;
+}
+
+.cn-look-board .cn-settings-field--switch:not(.cn-look-nextcloud *) > .checkbox-radio-switch {
+	margin-block: -8px;
+}
+
+.cn-look-board .cn-settings-field--status:not(.cn-look-nextcloud *) > .notecard {
+	margin: 0;
+}
+
+/* A card's longer explanation reads as the boards' second paragraph: 14px
+   muted at 1.5, the fields 14px under it (DqBeheerGeavanceerd "Urgentie in de
+   werkvoorraad": 15px and 30px live). The theme sizes every paragraph through
+   its tokens. */
+.cn-look-board .cn-settings-section__description-text:not(.cn-look-nextcloud *) {
+	--nldesign-component-paragraph-font-size: 14px;
+	--nldesign-component-paragraph-line-height: 1.5;
+	--nldesign-component-paragraph-color: var(--color-text-maxcontrast);
+	margin: 0;
+	font-size: 14px;
+	line-height: 1.5;
+}
+
 @container (max-width: 400px) {
 	.cn-look-board .settings-section:not(.cn-look-nextcloud *) > .cn-settings-section__actions,
 	.cn-look-board .settings-section:not(.cn-look-nextcloud *):has(> .settings-section__desc) > .cn-settings-section__actions {
@@ -2614,6 +2647,12 @@ body:has(.cn-look-board):not(:has(.cn-look-nextcloud)) .v-popper__popper.action-
 	font-weight: 500;
 }
 
+/* A compact card keeps its 15px/700 title on a dashboard page too (DqInspectie). */
+.cn-look-board .cn-dashboard-page:not(.cn-look-nextcloud *) .cn-record-list--compact .cn-record-list__card .cn-record-list__title {
+	font-weight: 700;
+	line-height: 1.2;
+}
+
 .cn-look-board .cn-dashboard-page:not(.cn-look-nextcloud *) .cn-record-list--compact .cn-record-list__main {
 	gap: 2px;
 }
@@ -3220,6 +3259,8 @@ body:has(.cn-look-board):not(:has(.cn-look-nextcloud)) .v-popper__popper.action-
    Nextcloud's input height stretched it to 13x36. Its weight outranks the
    18px other native radios take.
    @spec openspec/changes/board-setup-choice-radio/specs/board-setup-choice-radio/spec.md#requirement-a-setup-steps-choice-radio-is-20px */
+/* The board's native radio keeps the browser's 3px end margin before the
+   12px gap, so the option title starts 56px in (DqInstellen), not 53. */
 .cn-look-board .cn-setup-step .cn-choice-cards input.cn-choice-cards__row-input:not(.cn-look-nextcloud *) {
 	box-sizing: border-box;
 	width: 20px;
@@ -3227,6 +3268,7 @@ body:has(.cn-look-board):not(:has(.cn-look-nextcloud)) .v-popper__popper.action-
 	height: 20px;
 	min-height: 20px;
 	accent-color: var(--color-primary-element);
+	margin-inline-end: 3px;
 }
 
 /* The chosen setup choice is edged by a real 2px border, as DqInstellen
@@ -3469,4 +3511,5 @@ html :where(.cn-look-board) :is(h2, h3, h5, h6):where(.cn-inner-heading) {
 .cn-look-board .cn-saved-view-share__mode:not(.cn-look-nextcloud *) {
 	border-radius: 8px;
 	background: var(--cn-board-sunken-ground);
+	line-height: normal;
 }

package/src/css/table.css

@@ -616,10 +616,13 @@
 	cursor: grab;
 }
 
-/* The handle before a reorderable row's name: a muted 16px grip 10px before it. */
+/* The handle before a reorderable row's name: a muted 16px grip 10px before
+   it. It floats, so a name that wraps in a narrow cell wraps beside the grip
+   instead of dropping under it. */
 .cn-table-row__handle {
 	display: inline-flex;
-	vertical-align: middle;
+	float: inline-start;
+	margin-block-start: 1px;
 	margin-inline-end: 10px;
 	color: var(--color-text-maxcontrast);
 	cursor: grab;

package/src/dialogs/CnAccessPurposeDialog.vue

@@ -17,17 +17,23 @@
 			<legend class="cn-access-purpose__legend">
 				{{ t('nextcloud-vue', 'Purpose') }}
 			</legend>
-			<NcCheckboxRadioSwitch
-				v-for="option in choices"
-				:key="option.value"
-				v-model="purpose"
-				type="radio"
-				name="cn-access-purpose"
-				:value="option.value"
-				:disabled="loading"
-				:data-testid="`cn-access-purpose-option-${option.value}`">
-				{{ option.label }}
-			</NcCheckboxRadioSwitch>
+			<template v-for="option in choices" :key="option.value">
+				<NcCheckboxRadioSwitch
+					v-model="purpose"
+					type="radio"
+					name="cn-access-purpose"
+					:value="option.value"
+					:disabled="loading"
+					:data-testid="`cn-access-purpose-option-${option.value}`">
+					{{ option.label }}
+				</NcCheckboxRadioSwitch>
+				<!-- What choosing this purpose does besides recording it ("you become this case's handler"). -->
+				<p v-if="option.hint"
+					class="cn-access-purpose__hint"
+					:data-testid="`cn-access-purpose-hint-${option.value}`">
+					{{ option.hint }}
+				</p>
+			</template>
 		</fieldset>
 		<NcTextArea
 			v-if="purpose === OTHER"
@@ -94,8 +100,10 @@ export default {
 
 		/**
 		 * The purposes offered, already translated. "Other" is added at the end.
+		 * A `hint` is a line under the option that says what choosing it does
+		 * besides recording it.
 		 *
-		 * @type {Array<{value: string, label: string}>}
+		 * @type {Array<{value: string, label: string, hint?: string}>}
 		 */
 		options: {
 			type: Array,
@@ -176,6 +184,13 @@ export default {
 	border: 0;
 }
 
+.cn-access-purpose__hint {
+	margin: 0 0 6px;
+	padding-inline-start: 36px;
+	color: var(--color-text-maxcontrast);
+	font-size: 13px;
+}
+
 .cn-access-purpose__legend {
 	margin-bottom: 4px;
 	font-weight: 600;

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

@@ -3,7 +3,7 @@
 	"$id": "https://raw.githubusercontent.com/ConductionNL/nextcloud-vue/main/src/schemas/app-manifest-v2.schema.json",
 	"title": "Conduction App Manifest v2",
 	"description": "v2 schema for the JSON-driven page and navigation manifest consumed by @conduction/nextcloud-vue. Introduces a uniform widgets[] array on every page type with a per-slot grid coordinate system, a typed actions[] discriminator, and the required $schema field for version detection. v1 manifests continue to validate against app-manifest.schema.json (unchanged).",
-	"version": "2.156.0",
+	"version": "2.157.0",
 	"type": "object",
 	"required": ["$schema", "version"],
 	"allOf": [
@@ -5811,11 +5811,13 @@
 										"additionalProperties": false,
 										"properties": {
 											"value": { "type": "string", "minLength": 1 },
-											"label": { "type": "string", "minLength": 1, "description": "i18n key." }
+											"label": { "type": "string", "minLength": 1, "description": "i18n key." },
+											"hint": { "type": "string", "description": "i18n key of a line under the option: what choosing it does besides recording it." }
 										}
 									}
 								},
 								"url": { "type": "string", "minLength": 1, "description": "App endpoint that records the purpose; {objectId} is filled in." },
+								"checkUrl": { "type": "string", "minLength": 1, "description": "App endpoint asked first (GET, {objectId} filled in): an answer { required: false } opens the record without the dialog, because the app recorded the purpose itself." },
 								"title": { "type": "string", "description": "i18n key of the dialog's title." },
 								"description": { "type": "string", "description": "i18n key of the sentence under the title." }
 							}

package/src/utils/builtInFormatters.js

@@ -524,6 +524,57 @@ export function formatIsoDuration(value) {
 	return words[period.unit] ? words[period.unit]() : String(value)
 }
 
+/** The ISO designator of each date unit a term is written in. */
+const UNIT_DESIGNATOR = { years: 'Y', months: 'M', weeks: 'W', days: 'D' }
+
+/**
+ * A one-unit ISO-8601 period, a day count that is whole weeks read as weeks
+ * (a term of `P28D` is "4 weeks"); null when it is not a one-unit period.
+ *
+ * @param {unknown} value The stored period.
+ * @return {{amount: number, unit: string}|null}
+ */
+function termPeriod(value) {
+	if (value === null || value === undefined || value === '') {
+		return null
+	}
+	const period = parseDuration(String(value))
+	if (period === null || !UNIT_DESIGNATOR[period.unit]) {
+		return null
+	}
+	if (period.unit === 'days' && period.amount > 0 && period.amount % 7 === 0) {
+		return { amount: period.amount / 7, unit: 'weeks' }
+	}
+	return period
+}
+
+/**
+ * A term in words, with the extension it may get (`format: 'duration'`):
+ * `P28D` reads "4 weeks", and with an extension of `P14D` "4 weeks,
+ * extendable by 2" (the unit is said once when both share it). A value that
+ * is not a one-unit period is returned as written, '' for null or empty.
+ *
+ * @spec openspec/changes/data-widget-duration-format/specs/data-widget/spec.md#requirement-a-term-reads-in-words-with-its-extension
+ * @param {unknown} value The stored term.
+ * @param {unknown} [extension] The stored extension period, if any.
+ * @return {string}
+ */
+export function formatTermDuration(value, extension = null) {
+	const term = termPeriod(value)
+	if (term === null) {
+		return value === null || value === undefined ? '' : String(value)
+	}
+	const words = formatIsoDuration(`P${term.amount}${UNIT_DESIGNATOR[term.unit]}`)
+	const extra = termPeriod(extension)
+	if (extra === null || extra.amount === 0) {
+		return words
+	}
+	const extraWords = extra.unit === term.unit
+		? String(extra.amount)
+		: formatIsoDuration(`P${extra.amount}${UNIT_DESIGNATOR[extra.unit]}`)
+	return t('nextcloud-vue', '{term}, extendable by {extension}', { term: words, extension: extraWords })
+}
+
 /**
  * A Nextcloud user id as its display name (`userName` registry key): the id
  * while the name is looked up, and for a user nobody answers for.
@@ -553,6 +604,7 @@ export const BUILT_IN_FORMATTERS = {
 	connectionSettingsLabel: formatConnectionSettingsLabel,
 	masked: formatMasked,
 	isoDuration: formatIsoDuration,
+	termDuration: formatTermDuration,
 	valueMap: formatValueMap,
 	userName: formatUserName,
 }