@conduction/nextcloud-vue 2.100.0 → 2.102.0

package/l10n/en.json

@@ -1700,7 +1700,31 @@
     "Run test": "Run test",
     "Test with a record": "Test with a record",
     "admin": "admin",
-    "Wizard": "Wizard"
+    "Wizard": "Wizard",
+    "{done} of {total} reviewed": "{done} of {total} reviewed",
+    "{open} still to review": "{open} still to review",
+    "{action}: {name}": "{action}: {name}",
+    "On the map": "On the map",
+    "Show them in the table": "Show them in the table",
+    "Linked": "Linked",
+    "Now": "Now",
+    "Tell me above a number": "Tell me above a number",
+    "Threshold": "Threshold",
+    "A message to you when there are {threshold} or more": "A message to you when there are {threshold} or more",
+    "Save this search or open a saved one to set an alert on it.": "Save this search or open a saved one to set an alert on it.",
+    "The alert could not be saved.": "The alert could not be saved.",
+    "Your exports could not be loaded.": "Your exports could not be loaded.",
+    "You have no exports here.": "You have no exports here.",
+    "Expires today": "Expires today",
+    "Download": "Download",
+    "Made {date}": "Made {date}",
+    "expires {date}": "expires {date}",
+    "Loading …": "Loading …",
+    "Reorder {item}: drag, or press the up and down arrow keys": "Reorder {item}: drag, or press the up and down arrow keys",
+    "No contacts linked": "No contacts linked",
+    "No relations yet": "No relations yet",
+    "Period": "Period",
+    "On": "On"
   },
   "plurals": {
     "{count} selected": [
@@ -1798,6 +1822,22 @@
     "Showing %n flow": [
       "Showing %n flow",
       "Showing %n flows"
+    ],
+    "%n without an address": [
+      "%n without an address",
+      "%n without an address"
+    ],
+    "%n with an address on the map": [
+      "%n with an address on the map",
+      "%n with an address on the map"
+    ],
+    "%n result": [
+      "%n result",
+      "%n results"
+    ],
+    "downloaded %n time": [
+      "downloaded %n time",
+      "downloaded %n times"
     ]
   }
 }

package/l10n/nl.json

@@ -1915,7 +1915,29 @@
     "Run test": "Test uitvoeren",
     "Test with a record": "Testen met een record",
     "admin": "beheerder",
-    "Wizard": "Assistent"
+    "Wizard": "Assistent",
+    "{done} of {total} reviewed": "{done} van {total} beoordeeld",
+    "{open} still to review": "Nog {open} te beoordelen",
+    "{action}: {name}": "{action}: {name}",
+    "On the map": "Op de kaart",
+    "Show them in the table": "Toon ze in de tabel",
+    "Linked": "Gekoppeld",
+    "Now": "Nu",
+    "Tell me above a number": "Melden boven een aantal",
+    "Threshold": "Grens",
+    "A message to you when there are {threshold} or more": "Bericht aan u als het er {threshold} of meer zijn",
+    "Save this search or open a saved one to set an alert on it.": "Sla deze zoekopdracht op of open een opgeslagen zoekopdracht om er een melding op te zetten.",
+    "The alert could not be saved.": "De melding kon niet worden opgeslagen.",
+    "Your exports could not be loaded.": "Uw exports konden niet worden geladen.",
+    "You have no exports here.": "U heeft hier geen exports.",
+    "Expires today": "Verloopt vandaag",
+    "Made {date}": "Gemaakt {date}",
+    "expires {date}": "verloopt {date}",
+    "Reorder {item}: drag, or press the up and down arrow keys": "{item} verplaatsen: slepen, of de pijltoetsen omhoog en omlaag",
+    "No contacts linked": "Geen contacten gekoppeld",
+    "No relations yet": "Nog geen relaties",
+    "Period": "Periode",
+    "On": "Aan"
   },
   "plurals": {
     "{count} selected": [
@@ -2013,6 +2035,22 @@
     "Showing %n flow": [
       "%n flow",
       "%n flows"
+    ],
+    "%n without an address": [
+      "%n zonder adres",
+      "%n zonder adres"
+    ],
+    "%n with an address on the map": [
+      "%n met een adres op de kaart",
+      "%n met een adres op de kaart"
+    ],
+    "%n result": [
+      "%n resultaat",
+      "%n resultaten"
+    ],
+    "downloaded %n time": [
+      "%n keer gedownload",
+      "%n keer gedownload"
     ]
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@conduction/nextcloud-vue",
-  "version": "2.100.0",
+  "version": "2.102.0",
   "description": "Shared Vue component library for Conduction Nextcloud apps — complements @nextcloud/vue with higher-level components, OpenRegister integration, and NL Design System support",
   "homepage": "https://github.com/ConductionNL/nextcloud-vue#readme",
   "bugs": {

package/src/components/CnActionsBar/CnActionsBar.md

@@ -217,6 +217,7 @@ Controlling the inline action button count — `inlineActionCount` sets how many
 | `showBuildiqButton` | Boolean | `true` | Whether the buildiq square renders in the bar (the index page takes it into its header under the board look) |
 | `bulkNoun` | String | `''` | The plural in the bulk band lead, "With the selected <noun>" (default "items") |
 | `bulkHint` | String | `''` | The 13px hint after the bulk band's buttons |
+| `bulkBandAlways` | Boolean | `false` | Board look: draw the bulk band before anything is selected too, its buttons disabled until there is a selection (DqZaken, DqWerkbord). Only when the band has an action to offer. |
 
 
 `showBuildiqButton` is documented in the prop table of the component reference (board look, screens-chrome-parity).

package/src/components/CnActionsBar/CnActionsBar.vue

@@ -507,12 +507,15 @@
 
 	<!--
 		Board look: the bulk band is its own row between the toolbar and the
-		table card, outside the toolbar element, and only while rows are
-		selected. The count stays announced by the live region above.
+		table card, outside the toolbar element, while rows are selected; with
+		`bulkBandAlways` also before, its buttons disabled until there is a
+		selection (DqZaken, DqWerkbord). The count stays announced by the live
+		region above.
 	-->
 	<div
-		v-if="isBoardLayout && selectable && selectedIds.length > 0"
+		v-if="isBoardLayout && selectable && (selectedIds.length > 0 || (bulkBandAlways && bulkBandHasActions))"
 		class="cn-actions-bar__band"
+		:class="{ 'cn-actions-bar__band--idle': selectedIds.length === 0 }"
 		role="region"
 		:aria-label="t('nextcloud-vue', 'Actions for the selection')"
 		data-testid="cn-bulk-band">
@@ -520,12 +523,14 @@
 		<NcButton
 			v-if="showMassCopy"
 			variant="secondary"
+			:disabled="selectedIds.length === 0"
 			@click="$emit('show-copy')">
 			{{ t('nextcloud-vue', 'Copy selected') }}
 		</NcButton>
 		<NcButton
 			v-if="showMassDelete"
 			variant="secondary"
+			:disabled="selectedIds.length === 0"
 			@click="$emit('show-delete')">
 			{{ t('nextcloud-vue', 'Delete selected') }}
 		</NcButton>
@@ -533,7 +538,7 @@
 			v-for="entry in bulkActions"
 			:key="entry.id"
 			variant="secondary"
-			:disabled="entry.disabled === true"
+			:disabled="entry.disabled === true || selectedIds.length === 0"
 			:data-testid="`cn-bulk-action-${entry.id}`"
 			:lang="bulkLang(entry)"
 			@click="$emit('bulk-action', { id: entry.id, action: entry.id, selectedIds, count: selectedIds.length })">
@@ -719,6 +724,16 @@ export default {
 			default: '',
 		},
 
+		/**
+		 * Board look: draw the bulk band also before anything is selected, its
+		 * buttons disabled until there is a selection, as DqZaken and DqWerkbord
+		 * draw it. Only when the band has an action to offer.
+		 */
+		bulkBandAlways: {
+			type: Boolean,
+			default: false,
+		},
+
 		/** The 13px hint after the board bulk band's buttons (`config.bulkHint`). */
 		bulkHint: {
 			type: String,
@@ -1117,6 +1132,18 @@ export default {
 			return t('nextcloud-vue', '{count} active', { count: this.filterCount })
 		},
 
+		/**
+		 * Whether the bulk band has an action to offer: copy, delete, a
+		 * declared bulk action or the host's own buttons.
+		 *
+		 * @return {boolean}
+		 */
+		bulkBandHasActions() {
+			return this.showMassCopy || this.showMassDelete
+				|| (Array.isArray(this.bulkActions) && this.bulkActions.length > 0)
+				|| Boolean(this.$slots['selection-actions'])
+		},
+
 		/**
 		 * The bold lead of the board bulk band.
 		 *

package/src/components/CnChartWidget/CnChartWidget.md

@@ -18,7 +18,7 @@ When `CnDashboardPage` resolves a widget definition with `type: "chart"`, it mou
 }
 ```
 
-Supported `props` keys forwarded by the dispatcher: `chartKind` (→ `type`), `series`, `categories`, `labels`, `options`, `colors`, `toolbar`, `legend`, `height`, `width`, `unavailableLabel`, plus the display passthrough `horizontal`, `legendPosition`, `valueAxisBaseline`, `valueFormat`, `colorMap`, `emptyLabel`, `views`, `endpointSource`, `barMax`, `footnote`, `highlight`, `cellSource`. The `dataSource` field resolves declaratively: `aggregate: 'count'` / raw `graphql` via GraphQL, `bucket` / `groupBy` / the OBJECT-form `aggregate` (Wave 3: group-by + topN/Other + labelResolve) via OpenRegister's REST aggregation facets, with an optional sibling `drilldown: { route, filterParam }` that navigates on segment/bar click with the raw category key in the query.
+Supported `props` keys forwarded by the dispatcher: `chartKind` (→ `type`), `series`, `categories`, `labels`, `options`, `colors`, `toolbar`, `legend`, `height`, `width`, `unavailableLabel`, plus the display passthrough `horizontal`, `legendPosition`, `valueAxisBaseline`, `valueFormat`, `colorMap`, `emptyLabel`, `views`, `endpointSource`, `barMax`, `footnote`, `highlight`, `cellSource`, `emptyCellLabel`. The `dataSource` field resolves declaratively: `aggregate: 'count'` / raw `graphql` via GraphQL, `bucket` / `groupBy` / the OBJECT-form `aggregate` (Wave 3: group-by + topN/Other + labelResolve) via OpenRegister's REST aggregation facets, with an optional sibling `drilldown: { route, filterParam }` that navigates on segment/bar click with the raw category key in the query.
 
 Area chart — time series data:
 
@@ -107,7 +107,8 @@ Fallback slot — shown when ApexCharts is not available:
 | `horizontal` | Boolean | `false` | Render `type: "bar"` charts horizontally (row bars); an explicit `options.plotOptions.bar.horizontal` still wins |
 | `legendPosition` | String | `''` | Legend placement override (`top`/`bottom`/`left`/`right`); empty keeps the automatic placement |
 | `barMax` | Number | `null` | `bar-list`: the value a full track stands for (100 for percentages); null takes the largest value |
-| `footnote` | String | `''` | `bar-list` / `matrix`: a line under the rows, through the host's translate |
+| `footnote` | String | `''` | A line under the chart, through the host's translate: under the rows of a `bar-list` or `matrix`, under the plot of a `line`, `area` or `bar` chart |
+| `emptyCellLabel` | String | `''` | `matrix`: the text of a cell without a value ("geen"), through the host's translate. Empty leaves the cell blank |
 | `highlight` | Object | `null` | `matrix`: the cell to outline, `{ row, column, columnKeys? }`, tokens such as `@object.behaviour` resolved |
 | `cellSource` | Object | `null` | `matrix`: read the cells from records that each hold one cell (`{ register, schema, filter?, rowField, columnField, valueField, … }`), or with `cellsPath` from the cells inside one record, see [Bar list and matrix](#bar-list-and-matrix) |
 | `valueAxisBaseline` | String | `'auto'` | How the value axis picks its baseline, so a small difference cannot read as a dramatic one. `'auto'` anchors magnitude marks (bar/area) at zero and stops line charts zooming past a quarter of the data's magnitude; `'zero'` always anchors at zero; `'fit'` restores plain ApexCharts autoscaling — use it for series that live far from zero (a percentage hovering 95–99), where a zero baseline flattens the signal. Pie-family charts, negative series, empty data and stacked charts (`options.chart.stacked` — where the visible height is the per-category sum, not the largest datapoint) always autoscale; an explicit `options.yaxis.min`/`max` still wins. The ceiling rounds up to a nice number (7 → 8, 62 → 80). |

package/src/components/CnChartWidget/CnChartWidget.vue

@@ -126,6 +126,12 @@
 				</p>
 			</slot>
 		</div>
+		<p
+			v-if="footnote && chartComponent && !showEmptyState && type !== 'bar-list' && type !== 'matrix'"
+			class="cn-chart-widget__footnote"
+			data-testid="cn-chart-widget-footnote">
+			{{ hostTranslate(footnote) }}
+		</p>
 	</div>
 </template>
 
@@ -368,8 +374,9 @@ export default {
 		},
 
 		/**
-		 * A line under a `bar-list` or `matrix` ("Klik een balk om de zaken
-		 * te zien"), through the host's translate.
+		 * A line under the chart ("Klik een balk om de zaken te zien"),
+		 * through the host's translate: under the rows of a `bar-list` or
+		 * `matrix`, and under the plot of an ApexCharts type.
 		 *
 		 * @spec openspec/changes/chart-bar-list-and-matrix/specs/chart-bar-list-and-matrix/spec.md#requirement-a-chart-can-draw-a-bar-list
 		 */
@@ -605,6 +612,17 @@ export default {
 			default: '',
 		},
 
+		/**
+		 * `matrix`: the text of a cell without a value ("geen"), through the
+		 * host's translate. Empty (the default) leaves the cell blank.
+		 *
+		 * @spec openspec/changes/chart-bar-list-and-matrix/specs/chart-bar-list-and-matrix/spec.md#requirement-a-chart-can-draw-a-matrix
+		 */
+		emptyCellLabel: {
+			type: String,
+			default: '',
+		},
+
 		/**
 		 * Manifest dataSource block. When set, `series` /
 		 * `categories` / `labels` are resolved from the GraphQL
@@ -1442,7 +1460,7 @@ export default {
 						const value = Number(raw)
 						return Number.isFinite(value) && raw !== null && raw !== undefined
 							? { text: this.formatPlain(value), level: levelOf(value), color: '', current: isCurrent }
-							: { text: '', level: 0, color: '', current: isCurrent }
+							: { text: this.emptyCellLabel ? this.hostTranslate(this.emptyCellLabel) : '', level: 0, color: '', current: isCurrent }
 					}),
 				})),
 			}
@@ -2388,6 +2406,8 @@ export default {
 		 * Map an endpoint payload whose `rowsPath` names an array of rows:
 		 * each row is a series (name at `rowLabelPath`, values at
 		 * `rowValuesPath`), the categories are at `labelsPath`.
+		 * A missing value stays null; a `matrix` keeps a text value ("none")
+		 * as text, other types read it as 0.
 		 *
 		 * @param {unknown} payload The plucked payload.
 		 * @param {object} es The `endpointSource` block.
@@ -2398,12 +2418,23 @@ export default {
 			const rows = getByPath(payload, es.rowsPath)
 			const rawLabels = es.labelsPath ? getByPath(payload, es.labelsPath) : undefined
 			const labels = Array.isArray(rawLabels) ? rawLabels.map((v) => ((v === null || v === undefined) ? '' : String(v))) : []
+			const keepText = this.type === 'matrix'
+			const cellOf = (v) => {
+				if (v === null || v === undefined) {
+					return null
+				}
+				const num = typeof v === 'string' && v.trim() === '' ? NaN : Number(v)
+				if (Number.isFinite(num)) {
+					return num
+				}
+				return keepText && typeof v === 'string' ? v : 0
+			}
 			const series = (Array.isArray(rows) ? rows : []).map((row) => {
 				const name = getByPath(row, es.rowLabelPath || 'label')
 				const values = getByPath(row, es.rowValuesPath || 'values')
 				return {
 					name: (name === null || name === undefined) ? '' : String(name),
-					data: Array.isArray(values) ? values.map((v) => (v === null || v === undefined ? null : Number(v) || 0)) : [],
+					data: Array.isArray(values) ? values.map(cellOf) : [],
 				}
 			})
 			return { series, categories: labels, labels }
@@ -2690,6 +2721,13 @@ export default {
 	margin: 0;
 }
 
+/* Under an ApexCharts plot the footnote is a sibling of the canvas, so it keeps
+   its own line height while the canvas takes the rest of a fitted column. */
+.cn-chart-widget > .cn-chart-widget__footnote {
+	flex: 0 0 auto;
+	margin-top: 8px;
+}
+
 .cn-chart-widget__matrix {
 	display: grid;
 	gap: 4px;

package/src/components/CnChoiceCards/CnChoiceCards.md

@@ -87,4 +87,43 @@ under it through the `option-actions` slot (scope `{ option, selected }`):
 </div>
 ```
 
+The chosen option's own fields can also sit inside its frame, under its text,
+through the `option-details` slot (scope `{ option }`): rendered only for the
+selected option, and outside the radio's label.
+
+```vue
+<div style="max-width: 560px;">
+  <CnChoiceCards
+    label="Next step"
+    layout="rows"
+    :model-value="'suspend'"
+    :options="[
+      { value: 'suspend', label: 'Suspend', description: 'The term stops until the answer is in.' },
+      { value: 'abort', label: 'Abort' },
+    ]">
+    <template #option-details="{ option }">
+      <p v-if="option.value === 'suspend'" style="margin: 0;">Reason and return date go here.</p>
+    </template>
+  </CnChoiceCards>
+</div>
+```
+
+A recorded choice shown back with `readonly`: every option at full contrast, the
+chosen one marked, nothing pickable. `disabled` greys the options out instead.
+
+```vue
+<div style="max-width: 560px;">
+  <CnChoiceCards
+    label="Outcome"
+    layout="rows"
+    :readonly="true"
+    :model-value="'partial'"
+    :options="[
+      { value: 'public', label: 'Made public' },
+      { value: 'partial', label: 'Partly made public' },
+      { value: 'none', label: 'Not made public' },
+    ]" />
+</div>
+```
+
 `columns` fixes the card grid's column count; `:columns="1"` stacks the cards in one column.

package/src/components/CnChoiceCards/CnChoiceCards.vue

@@ -20,17 +20,18 @@
 			<div
 				v-for="option in normalizedOptions"
 				:key="String(option.value)"
-				class="cn-choice-cards__cell">
+				class="cn-choice-cards__cell"
+				:class="{ 'cn-choice-cards__cell--with-details': hasDetails(option) }">
 				<label
 					class="cn-choice-cards__row"
-					:class="{ 'cn-choice-cards__row--selected': isSelected(option), 'cn-choice-cards__row--disabled': isDisabled(option) }">
+					:class="{ 'cn-choice-cards__row--selected': isSelected(option), 'cn-choice-cards__row--disabled': isDisabled(option), 'cn-choice-cards__row--readonly': readonly }">
 					<input
 						class="cn-choice-cards__row-input"
 						:type="multiple ? 'checkbox' : 'radio'"
 						:name="groupName"
 						:value="String(option.value)"
 						:checked="isSelected(option)"
-						:disabled="isDisabled(option)"
+						:disabled="isDisabled(option) || readonly"
 						:aria-describedby="option.disabled && option.disabledReason ? reasonId(option) : null"
 						@change="onToggle(option)">
 					<CnIcon v-if="option.icon"
@@ -47,6 +48,16 @@
 							data-testid="cn-choice-cards-reason">{{ option.disabledReason }}</span>
 					</span>
 				</label>
+				<div v-if="hasDetails(option)"
+					class="cn-choice-cards__details"
+					:data-testid="`cn-choice-cards-details-${option.value}`">
+					<!-- @slot option-details The chosen option's own fields, drawn
+					     inside the selected row's frame under its text (DqVolgendeStap:
+					     Opschorten's reason, days and return date). Rendered only for a
+					     selected option, outside the label so a field is not part of
+					     the radio's label. Scope: `{ option }`. -->
+					<slot name="option-details" :option="option" />
+				</div>
 				<div v-if="$slots['option-actions']" class="cn-choice-cards__actions">
 					<slot name="option-actions" :option="option" :selected="isSelected(option)" />
 				</div>
@@ -64,7 +75,7 @@
 				class="cn-choice-cards__cell">
 				<label
 					class="cn-choice-cards__option"
-					:class="{ 'cn-choice-cards__option--selected': isSelected(option) }">
+					:class="{ 'cn-choice-cards__option--selected': isSelected(option), 'cn-choice-cards__option--disabled': isDisabled(option) }">
 					<!-- A REAL, VISIBLE input, not a styled div with a click handler.
 					     It carries the checked state to assistive technology and to
 					     Windows high-contrast mode for free, and it keeps the
@@ -76,7 +87,7 @@
 						:name="groupName"
 						:value="String(option.value)"
 						:checked="isSelected(option)"
-						:disabled="isDisabled(option)"
+						:disabled="isDisabled(option) || readonly"
 						:aria-describedby="option.disabled && option.disabledReason ? reasonId(option) : null"
 						@change="onToggle(option)">
 					<CnCard
@@ -191,6 +202,16 @@ export default {
 			default: false,
 		},
 
+		/**
+		 * Show the choice without letting it change: every option at full
+		 * contrast, the selected one marked, nothing pickable (DqBesluit's
+		 * recorded outcome). `disabled` greys the options out instead.
+		 */
+		readonly: {
+			type: Boolean,
+			default: false,
+		},
+
 		/** Show a spinner instead of the grid while options are being fetched. */
 		loading: {
 			type: Boolean,
@@ -311,6 +332,17 @@ export default {
 		 * @param {object} option The normalised option.
 		 * @return {boolean} True when selected.
 		 */
+		/**
+		 * Whether a rows option draws the `option-details` slot in its frame:
+		 * the slot is given and the option is the chosen one.
+		 *
+		 * @param {object} option The option.
+		 * @return {boolean}
+		 */
+		hasDetails(option) {
+			return Boolean(this.$slots['option-details']) && this.isSelected(option)
+		},
+
 		/**
 		 * Whether an option cannot be picked: the whole group is disabled, or the option is.
 		 *
@@ -342,7 +374,7 @@ export default {
 		 * @return {void}
 		 */
 		onToggle(option) {
-			if (this.isDisabled(option)) {
+			if (this.readonly || this.isDisabled(option)) {
 				return
 			}
 			if (!this.multiple) {
@@ -452,7 +484,7 @@ export default {
 	cursor: default;
 }
 
-.cn-choice-cards__input:disabled + :deep(.cn-card) {
+.cn-choice-cards__option--disabled .cn-choice-cards__input + :deep(.cn-card) {
 	opacity: 0.6;
 }
 
@@ -462,11 +494,12 @@ export default {
 	gap: 8px;
 }
 
+/* 12px 14px, as the boards draw an option row (DqVolgendeStap, DqBesluit). */
 .cn-choice-cards__row {
 	display: flex;
 	align-items: flex-start;
 	gap: 12px;
-	padding: 14px 16px;
+	padding: 12px 14px;
 	border: 1px solid var(--color-border);
 	border-radius: var(--border-radius-large, 8px);
 	background: var(--color-main-background);
@@ -485,9 +518,54 @@ export default {
 	background: var(--color-primary-element-light);
 }
 
-.cn-choice-cards__row--disabled {
+/* An option this record does not allow: the grey ground and the muted ink,
+   still legible (DqVolgendeStap), not faded. */
+.cn-choice-cards__row--disabled,
+.cn-choice-cards__row--disabled:hover {
+	--nldesign-color-on-surface: var(--color-text-maxcontrast);
+	border-color: var(--color-border);
+	background: var(--color-background-hover);
+	color: var(--color-text-maxcontrast);
 	cursor: default;
-	opacity: 0.6;
+}
+
+/* The title takes the muted ink itself: a theme that colours every label
+   with `!important` (thematiq) would otherwise hand it the label colour. */
+.cn-choice-cards__row--disabled .cn-choice-cards__row-title {
+	--nldesign-color-on-surface: var(--color-text-maxcontrast);
+	color: var(--color-text-maxcontrast);
+}
+
+/* The chosen option's fields share the selected row's frame: the cell draws
+   the 2px primary border and the ground, the row inside it draws none, and
+   the fields sit under the text, indented to it (DqVolgendeStap). */
+.cn-choice-cards__cell--with-details {
+	border: 1px solid var(--color-primary-element);
+	border-radius: var(--border-radius-large, 8px);
+	box-shadow: inset 0 0 0 1px var(--color-primary-element);
+	background: var(--color-primary-element-light);
+}
+
+.cn-choice-cards__cell--with-details .cn-choice-cards__row,
+.cn-choice-cards__cell--with-details .cn-choice-cards__row:hover {
+	border-color: transparent;
+	box-shadow: none;
+	background: transparent;
+}
+
+.cn-choice-cards__details {
+	display: flex;
+	flex-direction: column;
+	gap: 14px;
+	padding: 0 14px 14px 44px;
+}
+
+.cn-choice-cards__row--readonly {
+	cursor: default;
+}
+
+.cn-choice-cards__row--readonly:not(.cn-choice-cards__row--selected):hover {
+	border-color: var(--color-border);
 }
 
 .cn-choice-cards__row:has(.cn-choice-cards__row-input:focus-visible) {
@@ -518,15 +596,14 @@ export default {
 	font-weight: 600;
 }
 
-.cn-choice-cards__row-description {
-	font-size: 13px;
-	color: var(--color-text-maxcontrast);
-}
-
+/* Regular weight on the span itself: a theme that sets every label bold
+   with `!important` (thematiq) reaches a span that only inherits. */
+.cn-choice-cards__row-description,
 .cn-choice-cards__reason {
+	--nldesign-color-on-surface: var(--color-text-maxcontrast);
 	font-size: 13px;
+	font-weight: 400;
 	color: var(--color-text-maxcontrast);
-	font-style: italic;
 }
 
 .cn-choice-cards__reason--card {