@conduction/nextcloud-vue 2.83.0 → 2.85.0

package/src/css/form-widget.css

@@ -37,6 +37,7 @@
 }
 
 .cn-form-widget__textarea {
+	box-sizing: border-box;
 	width: 100%;
 	min-height: 80px;
 	padding: 8px;
@@ -58,3 +59,13 @@
 	color: var(--color-error);
 	margin: 0;
 }
+
+/* A select takes its field's width, however narrow the card. NcSelect is at
+   least 260px wide on its own, so in pipelinq's 234px "Nieuw contactmoment"
+   card at 1100 wide the channel and client selects ran 40px past the card's
+   edge. The client picker (CnResourceSelect) is an NcSelect too.
+   @spec openspec/changes/interaction-form-fits-and-reads-dutch/specs/interaction-form-widget/spec.md#requirement-the-interaction-form-fits-its-card-and-reads-in-the-readers-language */
+.cn-form-widget .v-select.select {
+	min-width: 0;
+	width: 100%;
+}

package/src/css/index-page.css

@@ -104,6 +104,19 @@
 	margin-top: 0;
 }
 
+/* The board view's footer: how many rows it holds of how many match, and
+   "Load more" while the list is not complete. */
+.cn-index-page__board-load {
+	display: flex;
+	flex-wrap: wrap;
+	align-items: center;
+	justify-content: space-between;
+	gap: 8px 16px;
+	padding: 12px 16px;
+	color: var(--color-text-maxcontrast);
+	font-size: 14px;
+}
+
 /* Table view owns both scroll axes. With the page column scrolling instead, the
    table's horizontal scrollbar sat at the bottom of the (taller-than-viewport)
    table, so it only appeared after scrolling down, and the pagination was
@@ -369,3 +382,39 @@
 	outline: 2px solid var(--color-primary-element);
 	outline-offset: 2px;
 }
+
+/*
+ * screens-board-reference-columns: the board view's controls after the
+ * search (board DqWerkbord): "Case type:" and "Columns:" as a 600 label and a
+ * 36px select, then the hint in the secondary text colour.
+ */
+.cn-index-page__board-control {
+	display: inline-flex;
+	align-items: center;
+	gap: 8px;
+	font-size: 14px;
+	font-weight: 600;
+	color: var(--color-main-text);
+}
+
+.cn-index-page__board-select {
+	height: 36px;
+	min-height: 36px;
+	margin: 0;
+	padding: 0 10px;
+	border: 1px solid var(--color-border-maxcontrast);
+	border-radius: 8px;
+	background-color: var(--color-main-background);
+	color: var(--color-main-text);
+	font: inherit;
+	font-weight: 400;
+}
+
+.cn-index-page__board-select--strong {
+	font-weight: 500;
+}
+
+.cn-index-page__board-hint {
+	font-size: 14px;
+	color: var(--color-text-maxcontrast);
+}

package/src/css/kpi-card.css

@@ -444,6 +444,19 @@ a.cn-kpi-card--stacked:focus-visible {
 	color: var(--color-main-text);
 }
 
+/* A board tile whose label wraps grows into its cell instead of clipping its
+   own last line. dossiq's "Afgehandeld deze maand" at 1100 wide held 129px of
+   content in a 114px tile and lost its caption's bottom. The tile still fills
+   a cell it fits (`min-height: 100%`), so every tile that fits keeps its
+   size; one that does not takes the height of its content, and the card-fit
+   cell's `safe center` keeps its top in view.
+   @spec openspec/changes/board-stat-tile-grows/specs/stat-tile-board-look/spec.md#requirement-a-board-stat-tile-shows-all-its-lines */
+.cn-kpi-card--board.cn-kpi-card--stacked {
+	flex: 0 0 auto;
+	height: auto;
+	min-height: 100%;
+}
+
 .cn-kpi-card--board.cn-kpi-card--stacked .cn-kpi-card__caption-line,
 .cn-kpi-card--board.cn-kpi-card--stacked .cn-stats-block__count-label {
 	font-size: 13px;

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

@@ -115,3 +115,61 @@
 .cn-look-board .cn-reports-page:not(.cn-look-nextcloud *) .cn-dashboard-page {
 	padding: 0;
 }
+
+/* The widget area draws no panel of its own (board DcRapportages: the
+   highlighted report's card sits straight on the page ground). A theme's
+   catch-all for anything named like a widget (nldesign's element overrides:
+   `[class*="widget"]:not([class*="widget__"]):not(#header *)`, an id
+   specificity no class rule outranks) painted `__widgets` white, hence the
+   `!important`. */
+.cn-look-board .cn-reports-page:not(.cn-look-nextcloud *) .cn-reports-page__widgets {
+	background: transparent !important;
+}
+
+/* The grid insets every card by its 12px margin (CnDashboardPage's default
+   `gridMargin`); the page padding already places the area, so the card's
+   edges line up with the report cards above it. */
+.cn-look-board .cn-reports-page:not(.cn-look-nextcloud *) .cn-reports-page__widgets .cn-dashboard-grid {
+	width: calc(100% + 24px);
+	margin: -12px;
+}
+
+/* A report card is a link, but its title and description read as text, as on
+   the board: no underline, whatever a theme does to links. */
+.cn-look-board .cn-reports-page:not(.cn-look-nextcloud *) .cn-reports-page__card,
+.cn-look-board .cn-reports-page:not(.cn-look-nextcloud *) .cn-reports-page__card * {
+	text-decoration: none !important;
+}
+
+/* The header buttons beside the title (screens-reports-header-buttons, board
+   DcRapportages "Downloaden"): the board's 40px button with a grey border on
+   the main background, the primary one in the primary fill, as on the index
+   header. `!important` holds them under a theme that restyles every button
+   (nldesign). The buildiq square keeps its own rule. */
+.cn-look-board .cn-reports-page:not(.cn-look-nextcloud *) .cn-reports-page__header-buttons > .button-vue--secondary {
+	height: var(--cn-board-control-height) !important;
+	min-height: var(--cn-board-control-height) !important;
+	padding: 0 14px !important;
+	border: 1px solid var(--color-border-dark) !important;
+	border-radius: var(--cn-board-control-radius) !important;
+	background: var(--color-main-background) !important;
+	color: var(--color-main-text) !important;
+}
+
+.cn-look-board .cn-reports-page:not(.cn-look-nextcloud *) .cn-reports-page__header-buttons > .button-vue--secondary:hover {
+	background: var(--color-background-hover) !important;
+}
+
+.cn-look-board .cn-reports-page:not(.cn-look-nextcloud *) .cn-reports-page__header-buttons > .button-vue--primary {
+	height: var(--cn-board-control-height) !important;
+	min-height: var(--cn-board-control-height) !important;
+	padding: 0 16px !important;
+	border: 0 !important;
+	border-radius: var(--cn-board-control-radius) !important;
+	background: var(--color-primary-element) !important;
+	color: var(--color-primary-element-text) !important;
+}
+
+.cn-look-board .cn-reports-page:not(.cn-look-nextcloud *) .cn-reports-page__header-buttons > .button-vue--primary:hover {
+	background: var(--color-primary-element-hover) !important;
+}

package/src/css/look-board.css

@@ -422,6 +422,7 @@
    `.cn-look-board.cn-admin-settings-shell` is a shell told `look: "board"`
    itself, on an admin page no CnAppRoot wraps. */
 .cn-look-board .cn-admin-settings-shell:not(.cn-look-nextcloud *) > .cn-admin-settings-shell__header,
+.cn-look-board .cn-admin-settings-shell__panel:not(.cn-look-nextcloud *) > :not(.settings-section):not(.cn-credentials),
 .cn-look-board .cn-admin-settings-shell:not(.cn-look-nextcloud *) > :not(.settings-section):not(.cn-credentials),
 .cn-look-board.cn-admin-settings-shell:not(.cn-look-nextcloud *) > :not(.settings-section):not(.cn-credentials) {
 	grid-column: 1 / -1;
@@ -429,6 +430,7 @@
 
 .cn-look-board .cn-admin-settings-shell:not(.cn-look-nextcloud *),
 .cn-look-board.cn-admin-settings-shell:not(.cn-look-nextcloud *),
+.cn-look-board .cn-admin-settings-shell__panel:not(.cn-look-nextcloud *),
 .cn-look-board .cn-settings-page__sections:not(.cn-look-nextcloud *) {
 	display: grid;
 	grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
@@ -440,14 +442,17 @@
    Settings.vue) takes no box of its own: its sections are grid items and
    cards, as if the shell held them directly. Only an element whose own
    children are sections; anything else keeps spanning the grid. */
+.cn-look-board .cn-admin-settings-shell__panel:not(.cn-look-nextcloud *) > :not(.settings-section):has(> .settings-section),
 .cn-look-board .cn-admin-settings-shell:not(.cn-look-nextcloud *) > :not(.settings-section):has(> .settings-section),
 .cn-look-board.cn-admin-settings-shell:not(.cn-look-nextcloud *) > :not(.settings-section):has(> .settings-section) {
 	display: contents;
 }
 
-/* The card: a section of the shell (also one inside a wrapping element), or a CnSettingsCard of the page. */
+/* The card: a section of the shell or of one of its tab panels (also one inside a wrapping element), or a CnSettingsCard of the page. */
+.cn-look-board .cn-admin-settings-shell__panel:not(.cn-look-nextcloud *) > .settings-section,
 .cn-look-board .cn-admin-settings-shell:not(.cn-look-nextcloud *) > .settings-section,
 .cn-look-board.cn-admin-settings-shell:not(.cn-look-nextcloud *) > .settings-section,
+.cn-look-board .cn-admin-settings-shell__panel:not(.cn-look-nextcloud *) > :not(.settings-section):has(> .settings-section) > .settings-section,
 .cn-look-board .cn-admin-settings-shell:not(.cn-look-nextcloud *) > :not(.settings-section):has(> .settings-section) > .settings-section,
 .cn-look-board.cn-admin-settings-shell:not(.cn-look-nextcloud *) > :not(.settings-section):has(> .settings-section) > .settings-section,
 .cn-look-board .cn-settings-page__sections:not(.cn-look-nextcloud *) > .cn-settings-card {
@@ -483,7 +488,7 @@
 	justify-content: flex-start;
 	text-align: start;
 	margin: 0;
-	font-size: 19px;
+	font-size: 17px;
 	font-weight: 700;
 	line-height: 1.3;
 }
@@ -491,18 +496,83 @@
 .cn-look-board .settings-section:not(.cn-look-nextcloud *) .settings-section__desc {
 	margin: 4px 0 0;
 	font-size: 14px;
-	line-height: 1.45;
+	line-height: 1.5;
 	color: var(--color-text-maxcontrast);
 }
 
-/* Section actions sit at the end of the title row. */
+/* Section actions sit at the end of the title row. The row is a grid, so a
+   long title wraps beside the buttons instead of running under them, and in a
+   narrow card the buttons drop under the title and description. */
+.cn-look-board .settings-section:not(.cn-look-nextcloud *):has(> .cn-settings-section__actions) {
+	/* `!important`: the card rules above set `display: flex` at higher specificity for a section in a wrapping element. */
+	display: grid !important;
+	grid-template-columns: minmax(0, 1fr) auto;
+	align-items: start;
+	column-gap: 16px;
+	container-type: inline-size;
+}
+
+.cn-look-board .settings-section:not(.cn-look-nextcloud *):has(> .cn-settings-section__actions) > * {
+	grid-column: 1 / -1;
+}
+
+.cn-look-board .settings-section:not(.cn-look-nextcloud *):has(> .cn-settings-section__actions) > .settings-section__name {
+	grid-row: 1;
+	grid-column: 1;
+}
+
 .cn-look-board .settings-section:not(.cn-look-nextcloud *) > .cn-settings-section__actions {
-	position: absolute;
-	inset-block-start: 22px;
-	inset-inline-end: 24px;
+	grid-row: 1;
+	grid-column: 2;
+	position: static;
+	flex-wrap: wrap;
+	justify-self: end;
 	float: none;
 }
 
+@container (max-width: 520px) {
+	.cn-look-board .settings-section:not(.cn-look-nextcloud *) > .cn-settings-section__actions {
+		grid-row: auto;
+		grid-column: 1 / -1;
+		justify-self: start;
+		justify-content: flex-start;
+	}
+}
+
+/* An admin settings card as the board draws it (PtBeheerinstellingen,
+   KqBeheerAlgemeen, HuInstellingen): 20px 22px padding, and the title and
+   description one group, 4px apart, spaced from the rest of the card by the
+   card's 14px gap. The description is a sibling of the title in that column,
+   so it pulls itself back up to 4px under the title. The gap spaces the
+   content, so a note card adds no margin of its own (NcNoteCard draws 16px
+   above and below). A CnSettingsPage card keeps 22px 24px. */
+.cn-look-board .cn-admin-settings-shell__panel:not(.cn-look-nextcloud *) > .settings-section,
+.cn-look-board .cn-admin-settings-shell:not(.cn-look-nextcloud *) > .settings-section,
+.cn-look-board.cn-admin-settings-shell:not(.cn-look-nextcloud *) > .settings-section,
+.cn-look-board .cn-admin-settings-shell__panel:not(.cn-look-nextcloud *) > :not(.settings-section):has(> .settings-section) > .settings-section,
+.cn-look-board .cn-admin-settings-shell:not(.cn-look-nextcloud *) > :not(.settings-section):has(> .settings-section) > .settings-section,
+.cn-look-board.cn-admin-settings-shell:not(.cn-look-nextcloud *) > :not(.settings-section):has(> .settings-section) > .settings-section {
+	padding: 20px 22px;
+}
+
+.cn-look-board .cn-admin-settings-shell__panel:not(.cn-look-nextcloud *) > .settings-section > .settings-section__desc,
+.cn-look-board .cn-admin-settings-shell:not(.cn-look-nextcloud *) > .settings-section > .settings-section__desc,
+.cn-look-board.cn-admin-settings-shell:not(.cn-look-nextcloud *) > .settings-section > .settings-section__desc,
+.cn-look-board .cn-admin-settings-shell__panel:not(.cn-look-nextcloud *) > :not(.settings-section):has(> .settings-section) > .settings-section > .settings-section__desc,
+.cn-look-board .cn-admin-settings-shell:not(.cn-look-nextcloud *) > :not(.settings-section):has(> .settings-section) > .settings-section > .settings-section__desc,
+.cn-look-board.cn-admin-settings-shell:not(.cn-look-nextcloud *) > :not(.settings-section):has(> .settings-section) > .settings-section > .settings-section__desc {
+	margin-top: -10px;
+}
+
+.cn-look-board .cn-admin-settings-shell__panel:not(.cn-look-nextcloud *) > .settings-section > .notecard,
+.cn-look-board .cn-admin-settings-shell:not(.cn-look-nextcloud *) > .settings-section > .notecard,
+.cn-look-board.cn-admin-settings-shell:not(.cn-look-nextcloud *) > .settings-section > .notecard,
+.cn-look-board .cn-admin-settings-shell__panel:not(.cn-look-nextcloud *) > :not(.settings-section):has(> .settings-section) > .settings-section > .notecard,
+.cn-look-board .cn-admin-settings-shell:not(.cn-look-nextcloud *) > :not(.settings-section):has(> .settings-section) > .settings-section > .notecard,
+.cn-look-board.cn-admin-settings-shell:not(.cn-look-nextcloud *) > :not(.settings-section):has(> .settings-section) > .settings-section > .notecard {
+	margin-block: 0;
+}
+
 .cn-look-board .settings-section.cn-settings-section--wide:not(.cn-look-nextcloud *),
 .cn-look-board .cn-settings-card:has(.cn-settings-section--wide):not(.cn-look-nextcloud *) {
 	grid-column: 1 / -1;
@@ -616,6 +686,18 @@
 	font-weight: 600;
 }
 
+/* ---- Dashboard card titles --------------------------------------------- */
+/* A card's title on a dashboard (and on the widgets under a reports page) is
+   the board's card h2: 17px weight 700 (boards PqMijnWerk, DcRapportages and
+   the app dashboards; `--cn-board-heading-size`, as on a detail page's cards).
+   The wrapper's own 14px weight 600 stays for the Nextcloud look, and the
+   native-dashboard chrome keeps its 20px. */
+.cn-look-board .cn-dashboard-page:not(.cn-look-nextcloud *) .cn-widget-wrapper:not(.cn-widget-wrapper--nc-dashboard) .cn-widget-wrapper__title {
+	font-size: var(--cn-board-heading-size, 17px);
+	font-weight: 700;
+	line-height: 1.3;
+}
+
 /* ---- Record list on a dashboard card (PtDashboard) ---------------------- */
 /* The dashboard's card body is flush, so the rows carry their own inset: the
    board's card pads 24px at the sides and each row 14px, a soft hairline
@@ -702,3 +784,22 @@
 .cn-look-board .cn-dashboard-page:not(.cn-look-nextcloud *) .cn-record-list__chevron {
 	display: none;
 }
+
+/* ---- Week strip (DqMijnWerk "Termijnen deze week") ---------------------- */
+/* The days wrap inside the card instead of scrolling sideways: a row holds
+   as many days of at least 120px as the card fits, and the rest go to the
+   next row (dossiq at 1100 wide held 680px of days in a 494px card and
+   scrolled; now three days and two). 120px keeps a case title's words whole;
+   five 88px days fitted one row but broke "Bezwaar" mid-word. A card wide
+   enough for the week draws it as before, one row of equal columns. The
+   day's head wraps its "today" badge under the label when the day is
+   narrow.
+   @spec openspec/changes/board-week-strip-fits/specs/week-strip-board-look/spec.md#requirement-a-board-week-strip-fits-its-card */
+.cn-look-board .cn-week-strip:not(.cn-look-nextcloud *) .cn-week-strip__days {
+	grid-template-columns: repeat(auto-fit, minmax(min(100%, 120px), 1fr));
+	min-width: 0;
+}
+
+.cn-look-board .cn-week-strip:not(.cn-look-nextcloud *) .cn-week-strip__head {
+	flex-wrap: wrap;
+}

package/src/dialogs/CnTransitionInputDialog.vue

@@ -14,6 +14,7 @@
 		@closing="$emit('close')">
 		<div
 			class="cn-transition-input"
+			:aria-busy="busy ? 'true' : null"
 			data-testid="cn-modal"
 			data-testid-modal="cn-transition-input-dialog">
 			<!-- A refusal keeps this dialog open with what was typed still in
@@ -29,8 +30,18 @@
 				class="cn-transition-input__field"
 				:class="{ 'cn-transition-input__field--refused': isRefused(field.key) }"
 				:data-testid="`cn-transition-input-${field.key}`">
+				<!-- An input that declares its choices is picked from them. -->
+				<NcSelect v-if="field.widget === 'select'"
+					:modelValue="selectedOption(field)"
+					:options="field.options"
+					label="label"
+					:inputLabel="requiredLabel(field)"
+					:clearable="!field.required"
+					:data-testid="`cn-transition-input-select-${field.key}`"
+					@update:modelValue="setValue(field.key, $event && $event.value !== undefined ? $event.value : '')" />
+
 				<!-- An input that points at another record is picked, never typed. -->
-				<div v-if="field.widget === 'reference'" class="cn-transition-input__reference">
+				<div v-else-if="field.widget === 'reference'" class="cn-transition-input__reference">
 					<label class="cn-transition-input__label">{{ requiredLabel(field) }}</label>
 					<CnResourceSelect
 						:register="field.referenceRegister"
@@ -128,11 +139,18 @@
 				@click="$emit('close')">
 				{{ t('nextcloud-vue', 'Cancel') }}
 			</NcButton>
+			<!-- Busy while the parent's POST runs: a transition can take
+			     seconds, and a confirm button that only greys out reads as one
+			     that did nothing. -->
 			<NcButton
 				variant="primary"
 				:disabled="!canConfirm"
+				:aria-busy="busy ? 'true' : null"
 				data-testid="cn-transition-input-confirm"
 				@click="onConfirm">
+				<template v-if="busy" #icon>
+					<NcLoadingIcon :size="20" data-testid="cn-transition-input-busy" />
+				</template>
 				{{ confirmLabel }}
 			</NcButton>
 		</template>
@@ -141,7 +159,7 @@
 
 <script>
 import { translate as t } from '@nextcloud/l10n'
-import { NcButton, NcCheckboxRadioSwitch, NcTextArea, NcTextField } from '@nextcloud/vue'
+import { NcButton, NcCheckboxRadioSwitch, NcLoadingIcon, NcSelect, NcTextArea, NcTextField } from '@nextcloud/vue'
 import CnDialog from '../components/CnDialog/CnDialog.vue'
 import CnResourceSelect from '../components/CnResourceSelect/CnResourceSelect.vue'
 import { dialogBoardMixin } from '../mixins/dialogBoard.js'
@@ -164,7 +182,13 @@ import { fieldsFromSchema } from '../utils/schema.js'
  * from the property `title`, booleans render as a switch, numbers as a number
  * field, and long text (`maxLength > 255` or a `textarea`/`markdown` format)
  * as a textarea. Anything else — including a field the schema does not
- * declare — falls back to a plain labelled text input. Deliberately minimal:
+ * declare — falls back to a plain labelled text input.
+ *
+ * An input may also say how it is asked for, which matters when the choices
+ * depend on the record rather than on its schema: `label` names the field,
+ * and `options: [{ value, label }]` turns it into a picker that shows each
+ * `label` and sends the chosen `value`. An input that declares neither is
+ * rendered from the schema as before. Deliberately minimal:
  * text, textarea, number and checkbox cover transition inputs; this is not a
  * form engine (use `CnFormDialog` for full object forms).
  *
@@ -186,9 +210,11 @@ export default {
 		CnResourceSelect,
 		CnDialog,
 		NcButton,
+		NcLoadingIcon,
 		NcTextField,
 		NcTextArea,
 		NcCheckboxRadioSwitch,
+		NcSelect,
 	},
 
 	mixins: [dialogBoardMixin],
@@ -199,7 +225,11 @@ export default {
 		 * `x-openregister-lifecycle.transitions.<action>.inputs` (server-derived
 		 * or config-declared); `label` doubles as dialog title + confirm label.
 		 *
-		 * @type {{action?: string, label?: string, inputs?: Array<{field: string, required?: boolean}>}}
+		 * An input may carry a `label` for its field and `options` to pick
+		 * from, each `{ value, label }`; the picker shows the label and sends
+		 * the value.
+		 *
+		 * @type {{action?: string, label?: string, inputs?: Array<{field: string, required?: boolean, label?: string, options?: Array<{value: string, label?: string}>}>}}
 		 */
 		transition: {
 			type: Object,
@@ -296,6 +326,8 @@ export default {
 					required: input.required === true,
 					picker: input.picker && typeof input.picker === 'object' ? input.picker : null,
 					fields: Array.isArray(input.fields) ? input.fields.filter((f) => typeof f === 'string') : null,
+					label: typeof input.label === 'string' && input.label.trim() !== '' ? input.label.trim() : null,
+					options: this.declaredOptions(input.options),
 				}))
 		},
 
@@ -305,26 +337,40 @@ export default {
 		 * widget from the type/format); the widget is then clamped to the minimal
 		 * set this dialog renders (text / textarea / number / checkbox). Fields
 		 * the schema does not declare fall back to a plain text input.
+		 *
+		 * An input that declares `options` is a picker whatever the schema
+		 * says, because its choices are the ones this transition offers on
+		 * this record. A declared `label` names the field over the schema's.
 		 */
 		fields() {
 			const keys = this.inputs.map((input) => input.field)
 			const resolved = fieldsFromSchema(this.schema, { include: keys, includeReadOnly: true })
 			return this.inputs.map((input) => {
 				const field = resolved.find((f) => f.key === input.field)
+				if (input.options) {
+					return {
+						key: input.field,
+						label: input.label || (field && field.label) || input.field,
+						description: (field && field.description) || '',
+						widget: 'select',
+						options: input.options,
+						required: input.required,
+					}
+				}
 				const prop = (this.schema && this.schema.properties && this.schema.properties[input.field]) || null
 				if (prop && prop.type === 'object' && prop.properties && typeof prop.properties === 'object') {
 					return this.objectField(input, prop)
 				}
 				if (!field) {
-					return { key: input.field, label: input.field, description: '', widget: 'text', required: input.required }
+					return { key: input.field, label: input.label || input.field, description: '', widget: 'text', required: input.required }
 				}
 				if (field.reference && field.reference.multiple !== true) {
 					const register = field.reference.register || this.register
 					if (register !== '') {
-						return { ...field, widget: 'reference', referenceRegister: register, picker: input.picker, required: input.required }
+						return { ...field, label: input.label || field.label, widget: 'reference', referenceRegister: register, picker: input.picker, required: input.required }
 					}
 				}
-				return { ...field, widget: this.clampWidget(field.widget), required: input.required }
+				return { ...field, label: input.label || field.label, widget: this.clampWidget(field.widget), required: input.required }
 			})
 		},
 
@@ -438,6 +484,40 @@ export default {
 			}
 		},
 
+		/**
+		 * The choices an input declares, as `[{ value, label }]`, or null when
+		 * it declares none. An option without a value is dropped, because it
+		 * cannot be sent; one without a label shows its value.
+		 *
+		 * @param {unknown} options The input's declared `options`.
+		 * @return {Array<{value: string, label: string}>|null}
+		 */
+		declaredOptions(options) {
+			if (!Array.isArray(options)) {
+				return null
+			}
+			const usable = options
+				.filter((option) => option && typeof option === 'object'
+					&& (typeof option.value === 'string' || typeof option.value === 'number')
+					&& String(option.value).trim() !== '')
+				.map((option) => ({
+					value: String(option.value),
+					label: typeof option.label === 'string' && option.label.trim() !== '' ? option.label.trim() : String(option.value),
+				}))
+			return usable.length > 0 ? usable : null
+		},
+
+		/**
+		 * The option a picker field currently holds, or null.
+		 *
+		 * @param {object} field The select field descriptor.
+		 * @return {{value: string, label: string}|null}
+		 */
+		selectedOption(field) {
+			const value = this.values[field.key]
+			return field.options.find((option) => option.value === String(value ?? '')) || null
+		},
+
 		/**
 		 * Ids a reference picker must not offer: the current record, when the
 		 * input's `picker.excludeSelf` says so.

package/src/index.js

@@ -542,6 +542,8 @@ export { currentTheme, useCurrentTheme } from './composables/useCurrentTheme.js'
 export { ROADMAP_LABEL_BLOCKLIST } from './utils/roadmapLabelBlocklist.js'
 // The words a person reads for a notification rule key (never the raw key).
 export { humaniseRuleKey, notificationRuleLabel } from './utils/notificationRuleLabel.js'
+// An identifier-shaped key made readable (`shortDescription` → "Short description").
+export { humaniseKey } from './utils/humaniseKey.js'
 
 // Shared field validators. These are UX affordances that run in the browser —
 // they do NOT replace server-side validation, which stays authoritative at the