@conduction/nextcloud-vue 2.60.0 → 2.62.0

package/src/components/CnBannerWidget/CnBannerWidget.vue

@@ -36,6 +36,16 @@
 			</component>
 		</div>
 	</section>
+	<!-- The count could not be read. One quiet line, not the card and not an
+	     alarm: hidden would read as "nothing to report", which is not known. -->
+	<p
+		v-else-if="checkFailed"
+		class="cn-banner-widget cn-banner-widget--unchecked"
+		:title="failureTooltip"
+		data-testid="cn-banner-widget-unchecked">
+		<span class="cn-banner-widget__unchecked-text">{{ uncheckedText }}</span>
+		<span class="cn-banner-widget__unchecked-reason">{{ failureTooltip }}</span>
+	</p>
 	<div v-else-if="visible" class="cn-banner-widget">
 		<NcNoteCard :type="resolvedVariant" class="cn-banner-widget__card">
 			<component
@@ -52,6 +62,7 @@
 </template>
 
 <script>
+import { translate as t } from '@nextcloud/l10n'
 import { NcNoteCard } from '@nextcloud/vue'
 import { followLinkClick, resolveHref } from '../../utils/linkNavigation.js'
 import { safeHref } from '../../utils/safeHref.js'
@@ -97,6 +108,12 @@ const MAX_ACTIONS = 2
  * condition evaluates true — a failed fetch never breaks (or spams) a
  * dashboard.
  *
+ * An attention card (`layout: "attention"`) whose `visibleWhen` request
+ * FAILS renders one quiet line instead, "Could not check", with the reason as
+ * a tooltip. A hidden card reads as "nothing needs attention", and a failed
+ * count does not know that. A request that succeeds with a value that does
+ * not meet the condition still renders nothing.
+ *
  * `layout: "attention"` turns the banner into an attention card: a card with
  * a coloured edge by severity, a `kicker` label, a `title`, a `reason` line
  * and up to two `actions` (the first is the primary one unless an action says
@@ -238,7 +255,9 @@ export default {
 		 * the banner renders from this verdict instead of fetching again —
 		 * no duplicate request and no hidden-until-self-evaluated flash —
 		 * and `value` feeds the `{value}` text placeholder. `null` (the
-		 * default) keeps the banner self-evaluating.
+		 * default) keeps the banner self-evaluating. A host whose request
+		 * failed passes `{ met: false, value: null, failed: true, reason }`,
+		 * and an attention card then says it could not check.
 		 *
 		 * @type {object|null}
 		 */
@@ -259,6 +278,13 @@ export default {
 		'action',
 	],
 
+	/**
+	 * The banner's own state: the evaluated condition, the value it read,
+	 * and whether the request for it failed.
+	 *
+	 * @return {object} The state.
+	 * @spec openspec/changes/live-check-follow-ups/specs/live-check-follow-ups/spec.md#requirement-an-attention-card-says-when-it-could-not-check
+	 */
 	data() {
 		return {
 			/** Id that ties the attention card's region to its title. */
@@ -271,6 +297,10 @@ export default {
 			 * the text wherever it says `{value}`.
 			 */
 			conditionValue: null,
+			/** Whether the visibleWhen request itself failed (not: answered "no"). */
+			conditionFailed: false,
+			/** Why it failed, as the request reported it. */
+			conditionFailureReason: '',
 		}
 	},
 
@@ -359,7 +389,9 @@ export default {
 				return this.fillValue(reason)
 			}
 			const title = this.title || (this.content && this.content.title) || ''
-			return title ? this.displayText : ''
+			// A card that sets `text` to the same words as its `title` says
+			// them once.
+			return title && this.displayText !== this.displayTitle ? this.displayText : ''
 		},
 
 		/**
@@ -417,6 +449,52 @@ export default {
 			return this.conditionMet === true
 		},
 
+		/**
+		 * Whether to say the check failed: an attention card, with words to
+		 * show, whose `visibleWhen` request failed. A plain banner stays
+		 * hidden on failure, as it always did.
+		 *
+		 * @return {boolean}
+		 * @spec openspec/changes/live-check-follow-ups/specs/live-check-follow-ups/spec.md#requirement-an-attention-card-says-when-it-could-not-check
+		 */
+		checkFailed() {
+			const title = this.title || (this.content && this.content.title) || ''
+			return this.isAttention
+				&& !!this.resolvedVisibleWhen
+				&& this.conditionFailed
+				&& (title !== '' || this.resolvedText !== '')
+		},
+
+		/**
+		 * The one line shown when the check failed. It names the card by its
+		 * title, unless the title needs the value that could not be read.
+		 *
+		 * @return {string}
+		 * @spec openspec/changes/live-check-follow-ups/specs/live-check-follow-ups/spec.md#requirement-an-attention-card-says-when-it-could-not-check
+		 */
+		uncheckedText() {
+			const title = this.title || (this.content && this.content.title) || this.resolvedText
+			if (!title || title.includes('{value}')) {
+				return t('nextcloud-vue', 'Could not check')
+			}
+			// `escape: false`: the result is rendered through `{{ }}`, which escapes.
+			return t('nextcloud-vue', 'Could not check: {subject}', { subject: title }, undefined, { escape: false })
+		},
+
+		/**
+		 * The reason the check failed, for the tooltip and for assistive
+		 * technology.
+		 *
+		 * @return {string}
+		 * @spec openspec/changes/live-check-follow-ups/specs/live-check-follow-ups/spec.md#requirement-an-attention-card-says-when-it-could-not-check
+		 */
+		failureTooltip() {
+			if (!this.conditionFailureReason) {
+				return t('nextcloud-vue', 'The check failed.')
+			}
+			return t('nextcloud-vue', 'The check failed: {reason}', { reason: this.conditionFailureReason }, undefined, { escape: false })
+		},
+
 		/** Whether the banner navigates on click (route set + router present). */
 		clickable() {
 			return !!this.resolvedRoute && !!this.$router
@@ -491,30 +569,46 @@ export default {
 		 * modes — the Wave-1 banner shape is the canonical one, extracted to
 		 * `utils/visibleWhen.js` in Wave 3 so manifest actions reuse it),
 		 * keeping the read VALUE for the `{value}` text placeholder.
-		 * Fail-safe: any fetch/shape error leaves the banner hidden.
+		 * Fail-safe: any fetch/shape error leaves the banner hidden. The
+		 * failure is kept (`conditionFailed`, with its reason) so an
+		 * attention card can say it could not check.
 		 *
 		 * @return {Promise<void>}
+		 * @spec openspec/changes/live-check-follow-ups/specs/live-check-follow-ups/spec.md#requirement-an-attention-card-says-when-it-could-not-check
 		 */
 		async evaluateCondition() {
 			const outcome = this.resolvedConditionOutcome
 			if (outcome) {
 				this.conditionMet = outcome.met === true
 				this.conditionValue = outcome.value !== undefined ? outcome.value : null
+				this.conditionFailed = outcome.failed === true
+				this.conditionFailureReason = outcome.failed === true && typeof outcome.reason === 'string' ? outcome.reason : ''
 				return
 			}
 			const cond = this.resolvedVisibleWhen
 			if (!cond) {
 				this.conditionMet = null
 				this.conditionValue = null
+				this.conditionFailed = false
+				this.conditionFailureReason = ''
 				return
 			}
 			try {
 				const value = await readVisibleWhenValue(cond)
 				this.conditionValue = value
 				this.conditionMet = compareVisibleWhen(value, cond.op || 'eq', cond.value)
-			} catch {
+				this.conditionFailed = false
+				this.conditionFailureReason = ''
+			} catch (error) {
+				// Still hidden: a banner that cannot tell whether it applies
+				// should not claim attention. But not silently, because a
+				// failed count and "nothing to report" look the same on screen.
+				// eslint-disable-next-line no-console
+				console.warn('[CnBannerWidget] visibleWhen could not be evaluated, banner hidden:', error?.message || error)
 				this.conditionMet = false
 				this.conditionValue = null
+				this.conditionFailed = true
+				this.conditionFailureReason = typeof error?.message === 'string' ? error.message : String(error ?? '')
 			}
 		},
 
@@ -550,6 +644,30 @@ export default {
 	color: inherit;
 }
 
+/* The check failed. Muted text, no fill, no severity colour: it is a note
+   that something is not known, not a warning. */
+.cn-banner-widget--unchecked {
+	box-sizing: border-box;
+	margin: 0;
+	padding: 8px 12px;
+	color: var(--color-text-maxcontrast);
+	font-size: 0.9em;
+	cursor: help;
+}
+
+/* The reason, for assistive technology; sighted readers get the tooltip. */
+.cn-banner-widget__unchecked-reason {
+	position: absolute;
+	width: 1px;
+	height: 1px;
+	margin: -1px;
+	padding: 0;
+	overflow: hidden;
+	clip-path: inset(50%);
+	white-space: nowrap;
+	border: 0;
+}
+
 /* Attention card. The severity edge is an inset shadow, so it takes no width. */
 .cn-banner-widget--attention {
 	--cn-banner-accent: var(--color-primary-element);

package/src/components/CnBrandStripe/CnBrandStripe.md

@@ -20,3 +20,19 @@ Down the side of a panel, with `orientation="vertical"`:
   <span>Content beside the stripe</span>
 </div>
 ```
+
+A theme whose motif is not three bands names an image. Here the canal of a school: a blue line, its bank and the water:
+
+```vue
+<div style="--cn-brand-stripe-image: linear-gradient(to bottom, #1f4fd8 0 4px, transparent 4px 7px, #1fb5a8 7px 9px); --cn-brand-stripe-height: 9px">
+  <CnBrandStripe />
+</div>
+```
+
+On a dark band, such as a footer, `variant="inverse"` draws the theme's `--cn-brand-stripe-image-inverse`, else the one image, else the bands:
+
+```vue
+<div style="background: #14338f; padding-bottom: 16px; --cn-brand-stripe-image: linear-gradient(to bottom, #1f4fd8 0 4px, transparent 4px 7px, #1fb5a8 7px 9px); --cn-brand-stripe-image-inverse: linear-gradient(to bottom, #1f4fd8 0 4px, #ffffff 4px 7px, #1fb5a8 7px 9px); --cn-brand-stripe-height: 9px">
+  <CnBrandStripe variant="inverse" />
+</div>
+```

package/src/components/CnBrandStripe/CnBrandStripe.vue

@@ -5,7 +5,10 @@
 <template>
 	<div
 		class="cn-brand-stripe"
-		:class="{ 'cn-brand-stripe--vertical': orientation === 'vertical' }"
+		:class="{
+			'cn-brand-stripe--vertical': orientation === 'vertical',
+			'cn-brand-stripe--inverse': variant === 'inverse',
+		}"
 		aria-hidden="true"
 		data-testid="cn-brand-stripe">
 		<span class="cn-brand-stripe__band cn-brand-stripe__band--1" />
@@ -17,7 +20,8 @@
 <script>
 /**
  * CnBrandStripe draws the organisation's brand stripe: up to three coloured
- * bands next to each other, for the top of a page, a card or a sidebar.
+ * bands next to each other, or the organisation's own motif, for the top of a
+ * page, a card or a sidebar.
  *
  * The theme decides what it looks like, through the library's own custom
  * properties: `--cn-brand-stripe-color-1/2/3` (the colours, start to end),
@@ -26,6 +30,12 @@
  * tokens onto these; the library never reads a theme's tokens. Without them the
  * stripe is one band in the Nextcloud primary colour, 4px high.
  *
+ * A theme whose motif is not three bands (hanging twigs, a canal and its bank,
+ * a slanted cut) names it in `--cn-brand-stripe-image`, any background-image
+ * value; the stripe then draws that image in the same box instead of the
+ * bands. `--cn-brand-stripe-image-inverse` is the same motif for a dark band;
+ * the `inverse` variant draws it, else the one image, else the bands.
+ *
  * The stripe is decoration: it carries no meaning and is hidden from
  * assistive technology.
  *
@@ -49,6 +59,19 @@ export default {
 			default: 'horizontal',
 			validator: (v) => ['horizontal', 'vertical'].includes(v),
 		},
+
+		/**
+		 * The ground the stripe sits on: `default` (a light surface) or
+		 * `inverse` (a dark band such as a footer), which draws the theme's
+		 * `--cn-brand-stripe-image-inverse` when it names one.
+		 *
+		 * @type {'default'|'inverse'}
+		 */
+		variant: {
+			type: String,
+			default: 'default',
+			validator: (v) => ['default', 'inverse'].includes(v),
+		},
 	},
 }
 </script>
@@ -56,19 +79,52 @@ export default {
 <!--
   The stripe reads the library's own `--cn-brand-stripe-*` properties, each
   with a Nextcloud fallback. A theming app sets them from its own tokens.
+
+  THE ROOT PAINTS, NOT THE BANDS. The three bands are one background on the
+  root, a gradient with hard stops computed from the ratios, so a theme's
+  motif image can take its place with one `var()` fallback. A band painted on
+  its own element could not be switched off by the presence of an image: CSS
+  cannot ask whether a custom property is set. The band elements stay, empty,
+  so markup and tests that count them keep working.
 -->
 <style scoped>
 .cn-brand-stripe {
+	--cn-brand-stripe-first: var(--cn-brand-stripe-ratio-1, 1);
+	--cn-brand-stripe-second: var(--cn-brand-stripe-ratio-2, 1);
+	--cn-brand-stripe-total: calc(
+		var(--cn-brand-stripe-first) + var(--cn-brand-stripe-second) + var(--cn-brand-stripe-ratio-3, 1)
+	);
+	--cn-brand-stripe-stop-1: calc(var(--cn-brand-stripe-first) / var(--cn-brand-stripe-total) * 100%);
+	--cn-brand-stripe-stop-2: calc(
+		(var(--cn-brand-stripe-first) + var(--cn-brand-stripe-second)) / var(--cn-brand-stripe-total) * 100%
+	);
+	--cn-brand-stripe-direction: to right;
+	--cn-brand-stripe-bands: linear-gradient(
+		var(--cn-brand-stripe-direction),
+		var(--cn-brand-stripe-color-1, var(--color-primary-element)) 0 var(--cn-brand-stripe-stop-1),
+		var(--cn-brand-stripe-color-2, var(--color-primary-element)) var(--cn-brand-stripe-stop-1) var(--cn-brand-stripe-stop-2),
+		var(--cn-brand-stripe-color-3, var(--color-primary-element)) var(--cn-brand-stripe-stop-2) 100%
+	);
 	display: flex;
 	flex: none;
 	width: 100%;
 	height: var(--cn-brand-stripe-height, 4px);
+	background-image: var(--cn-brand-stripe-image, var(--cn-brand-stripe-bands));
+	background-repeat: repeat-x;
+	background-size: auto 100%;
+}
+
+.cn-brand-stripe--inverse {
+	background-image: var(--cn-brand-stripe-image-inverse, var(--cn-brand-stripe-image, var(--cn-brand-stripe-bands)));
 }
 
 .cn-brand-stripe--vertical {
+	--cn-brand-stripe-direction: to bottom;
 	flex-direction: column;
 	width: var(--cn-brand-stripe-height, 4px);
 	height: 100%;
+	background-repeat: repeat-y;
+	background-size: 100% auto;
 }
 
 .cn-brand-stripe__band {
@@ -78,17 +134,14 @@ export default {
 
 .cn-brand-stripe__band--1 {
 	flex-grow: var(--cn-brand-stripe-ratio-1, 1);
-	background-color: var(--cn-brand-stripe-color-1, var(--color-primary-element));
 }
 
 .cn-brand-stripe__band--2 {
 	flex-grow: var(--cn-brand-stripe-ratio-2, 1);
-	background-color: var(--cn-brand-stripe-color-2, var(--color-primary-element));
 }
 
 .cn-brand-stripe__band--3 {
 	flex-grow: var(--cn-brand-stripe-ratio-3, 1);
-	background-color: var(--cn-brand-stripe-color-3, var(--color-primary-element));
 }
 
 @media print {

package/src/components/CnDashboardPage/CnDashboardPage.vue

@@ -2748,17 +2748,30 @@ export default {
 		 * the registry branch forwards to CnBannerWidget), or in the legacy
 		 * manifest `props` blob (the fallback getStatsBlockProps and
 		 * getChartProps already honour for their own widget types). `text`
-		 * is only meaningful for banners.
+		 * is only meaningful for banners: it is what the banner would show,
+		 * which for an attention card is its `title` when it has no `text`.
 		 *
 		 * @param {object} def Widget definition.
-		 * @return {{ text: string, visibleWhen: (object|null) }}
+		 * `layout` is returned so the page can tell an attention card from a
+		 * plain banner: only the former keeps its cell when its check fails.
+		 *
+		 * @spec openspec/changes/link-cards-page/specs/link-cards-page/spec.md#requirement-an-attention-card-with-a-title-keeps-its-cell
+		 * @spec openspec/changes/live-check-follow-ups/specs/live-check-follow-ups/spec.md#requirement-an-attention-card-says-when-it-could-not-check
+		 * @return {{ text: string, visibleWhen: (object|null), layout: string }}
 		 */
 		widgetDisplayConfig(def) {
 			const content = (def && typeof def.content === 'object' && def.content) || {}
 			const props = (def && typeof def.props === 'object' && def.props) || {}
+			// An attention card (`layout: "attention"`) is headed by `title`,
+			// and its title only FALLS BACK to `text`. Reading `text` alone
+			// called a card with a title and a reason empty, and gave its cell
+			// up before its `visibleWhen` was even looked at.
+			const layout = content.layout || props.layout || ''
+			const title = layout === 'attention' ? (content.title || props.title || '') : ''
 			return {
-				text: content.text || props.text || '',
+				text: content.text || props.text || title || '',
 				visibleWhen: (def && def.visibleWhen) || content.visibleWhen || props.visibleWhen || null,
+				layout,
 			}
 		},
 
@@ -2768,15 +2781,22 @@ export default {
 		 * text at all — and must therefore surrender its grid cell in live
 		 * mode instead of leaving an empty card behind.
 		 *
+		 * One exception: an attention card whose `visibleWhen` request FAILED
+		 * keeps its cell, so the card can say it could not check. A collapsed
+		 * cell reads as "nothing needs attention", which a failed count does
+		 * not know. A count that was read and does not meet the condition
+		 * still collapses.
+		 *
 		 * @param {object} item Layout item.
 		 * @return {boolean} true when the cell must collapse.
+		 * @spec openspec/changes/live-check-follow-ups/specs/live-check-follow-ups/spec.md#requirement-an-attention-card-says-when-it-could-not-check
 		 */
 		isCollapsedWidget(item) {
 			const def = this.getWidgetDef(item.widgetId)
 			if (!def || !def.type) {
 				return false
 			}
-			const { text, visibleWhen } = this.widgetDisplayConfig(def)
+			const { text, visibleWhen, layout } = this.widgetDisplayConfig(def)
 			if (this.isBannerDef(def) && text === '') {
 				return true
 			}
@@ -2784,6 +2804,9 @@ export default {
 				return false
 			}
 			const outcome = this.widgetConditionOutcome[item.widgetId]
+			if (outcome && outcome.failed === true && layout === 'attention' && this.isBannerDef(def)) {
+				return false
+			}
 			return !outcome || outcome.met !== true
 		},
 
@@ -2794,13 +2817,17 @@ export default {
 		 * Runs on created() and again whenever `widgets` changes (the
 		 * in-app editor mutates defs in place). Fail-safe like the banner
 		 * itself: any fetch/shape error counts as "not met", so a broken
-		 * predicate collapses the cell rather than breaking the page.
+		 * predicate collapses the cell rather than breaking the page. The
+		 * outcome of a failed read carries `failed: true` and the `reason`,
+		 * which `isCollapsedWidget` and CnBannerWidget use to show an
+		 * attention card's "Could not check" line instead of nothing.
 		 *
 		 * Flips `widgetConditionsSettled` when the initial round is done —
 		 * synchronously when there is nothing to evaluate, so a dashboard
 		 * without conditional widgets never waits.
 		 *
 		 * @return {Promise<void>}
+		 * @spec openspec/changes/live-check-follow-ups/specs/live-check-follow-ups/spec.md#requirement-an-attention-card-says-when-it-could-not-check
 		 */
 		async evaluateWidgetConditions() {
 			const conditional = (this.widgets || []).filter((def) => def && def.id && def.type
@@ -2822,12 +2849,17 @@ export default {
 			}
 			await Promise.all(conditional.map(async (def) => {
 				const cond = this.widgetDisplayConfig(def).visibleWhen
-				let outcome = { met: false, value: null }
+				let outcome
 				try {
 					const value = await readVisibleWhenValue(cond)
 					outcome = { met: compareVisibleWhen(value, cond.op || 'eq', cond.value), value }
-				} catch {
-					// fail-safe: hidden
+				} catch (error) {
+					// Fail-safe: not met. But the failure is kept, and said
+					// out loud: a failed count and "nothing to report" look
+					// the same on screen.
+					outcome = { met: false, value: null, failed: true, reason: typeof error?.message === 'string' ? error.message : String(error ?? '') }
+					// eslint-disable-next-line no-console
+					console.warn(`[CnDashboardPage] visibleWhen of widget "${def.id}" could not be evaluated:`, error?.message || error)
 				}
 				// A newer run owns the map now — a stale verdict (possibly for
 				// a def that no longer exists) must not overwrite its writes.

package/src/components/CnDataTable/CnDataTable.md

@@ -186,7 +186,7 @@ export default {
 | `includeColumns` | Array | `null` | Column keys to include (whitelist) in schema mode |
 | `sortKey` | String | `null` | Currently active sort column key (controlled) |
 | `sortOrder` | String | `'asc'` | Current sort direction: `'asc'` or `'desc'` |
-| `sortKeys` | Array | `[]` | Ordered multi-column ("shift+click") sort key list, `[{ key, order }, …]` (0–3 entries); takes precedence over `sortKey`/`sortOrder` when non-empty |
+| `sortKeys` | Array | `[]` | Ordered multi-column ("shift+click") sort key list, `[{ key, order }, …]` (0–3 entries); takes precedence over `sortKey`/`sortOrder` when non-empty. Priority badges show only when two or more rendered, sortable columns are sorted; a key whose column is not rendered or not sortable (such as a `_uuid` tie-break) still sorts, but is not counted or numbered |
 | `selectedIds` | Array | `[]` | Array of selected row IDs (controlled) |
 | `rowClass` | Function | `null` | `(row) => string` — CSS class(es) applied to each `<tr>` |
 | `rowClickToView` | Boolean | `false` | Emit `row-click` on a row-body click even while `selectable` (selection then via the checkbox column only) |

package/src/components/CnDataTable/CnDataTable.vue

@@ -104,9 +104,9 @@
 								{{ effectiveSortKeys[sortKeyIndex(col.key)].order === 'asc' ? '▲' : '▼' }}
 							</span>
 							<span
-								v-if="col.sortable && effectiveSortKeys.length > 1 && sortKeyIndex(col.key) !== -1"
+								v-if="col.sortable && sortBadgeFor(col.key) !== null"
 								class="cn-table-sort-badge">
-								{{ sortKeyIndex(col.key) + 1 }}
+								{{ sortBadgeFor(col.key) }}
 							</span>
 						</th>
 
@@ -309,15 +309,12 @@ import '../../css/table.css'
  * row selection, custom cell rendering via scoped slots, loading states,
  * and empty states.
  *
- * Sorting: a plain click on a sortable header is single-sort (cycle asc →
- * desc → cleared), unchanged from before. Shift+click (or Shift+Enter on a
- * focused header) appends the column as a secondary/tertiary sort key —
- * capped at 3 — with numbered priority badges (1, 2, 3) once more than one
- * key is active. Pass `sortKeys: [{key, order}, ...]` for multi-sort (falls
- * back to the legacy `sortKey`/`sortOrder` props when empty). The `sort`
- * event payload is extended, not replaced: `{key, order}` still mirrors the
- * primary key exactly as before; a new `keys` field carries the full
- * ordered list. See `src/utils/multiColumnSort.js` for the state machine.
+ * Sorting: a plain click on a sortable header is single-sort (cycle asc → desc → cleared), unchanged from before.
+ * Shift+click (or Shift+Enter on a focused header) appends the column as a secondary/tertiary sort key, capped at 3, with numbered priority badges (1, 2, 3) once two or more rendered, sortable columns are sorted.
+ * A sort key whose column is not rendered, or not sortable, still sorts, but is not counted or numbered.
+ * Pass `sortKeys: [{key, order}, ...]` for multi-sort (falls back to the legacy `sortKey`/`sortOrder` props when empty).
+ * The `sort` event payload is extended, not replaced: `{key, order}` still mirrors the primary key exactly as before; a new `keys` field carries the full ordered list.
+ * See `src/utils/multiColumnSort.js` for the state machine.
  *
  * When a `schema` prop is provided, columns are auto-generated from schema
  * properties and cells render through CnCellRenderer for type-aware formatting
@@ -918,6 +915,23 @@ export default {
 			return []
 		},
 
+		/**
+		 * The active sort keys whose column renders a sort indicator, in priority order and deduplicated by first occurrence. Only these are counted and numbered by the priority badge.
+		 *
+		 * @return {Array<{key: string, order: 'asc'|'desc'}>}
+		 */
+		renderedSortKeys() {
+			const shown = new Set(this.effectiveColumns.filter((c) => c && c.sortable).map((c) => c.key))
+			const seen = new Set()
+			return this.effectiveSortKeys.filter((k) => {
+				if (!k || !shown.has(k.key) || seen.has(k.key)) {
+					return false
+				}
+				seen.add(k.key)
+				return true
+			})
+		},
+
 		totalColumns() {
 			let count = this.effectiveColumns.length
 			if (this.selectable) {
@@ -1513,7 +1527,7 @@ export default {
 
 		/**
 		 * Index of `key` within `effectiveSortKeys`, or -1 when not active.
-		 * Used by the template for the arrow, the numbered badge, and aria-sort.
+		 * Used by the template for the arrow.
 		 *
 		 * @param {string} key Column key.
 		 * @return {number}
@@ -1523,11 +1537,22 @@ export default {
 		},
 
 		/**
-		 * `aria-sort` value for a column header: `'ascending'`/`'descending'`
-		 * for the PRIMARY (index 0) active sort key only — secondary/tertiary
-		 * keys carry the visible numbered badge instead, per WCAG guidance
-		 * that `aria-sort` describes single-column sort state. `null` omits
-		 * the attribute entirely (unsorted / not sortable).
+		 * The 1-based priority badge for `key` among the rendered sort keys, or null when fewer than two rendered columns are sorted or `key` is not one of them.
+		 *
+		 * @param {string} key Column key.
+		 * @return {number|null}
+		 */
+		sortBadgeFor(key) {
+			if (this.renderedSortKeys.length < 2) {
+				return null
+			}
+			const index = this.renderedSortKeys.findIndex((k) => k.key === key)
+			return index === -1 ? null : index + 1
+		},
+
+		/**
+		 * `aria-sort` value for a column header: `'ascending'`/`'descending'` for the PRIMARY (index 0) active sort key only, per WCAG guidance that `aria-sort` describes single-column sort state.
+		 * `null` omits the attribute entirely (unsorted, not sortable, or not the primary key).
 		 *
 		 * @param {object} col Column definition.
 		 * @return {string|null}

package/src/components/CnDetailPage/CnDetailPage.vue

@@ -103,7 +103,10 @@
 							data-testid="cn-detail-page-type-eyebrow">
 							{{ typeEyebrow }}
 						</p>
-						<h2 v-if="displayTitle" class="cn-detail-page__title">
+						<h2
+							v-if="displayTitle"
+							class="cn-detail-page__title"
+							:title="displayTitle">
 							{{ displayTitle }}
 						</h2>
 						<!--

package/src/components/CnHeaderWidget/CnHeaderWidget.vue

@@ -496,7 +496,9 @@ export default {
 				'flex-direction': 'column',
 				'align-items': this.flexAlignFromTextAlign,
 				'justify-content': VERTICAL_ALIGN_FLEX[this.verticalAlign],
-				padding: this.isPlain ? '0' : '16px 24px',
+				// Plain drops the coloured background, not the card padding:
+				// at 0 the greeting sat flush against the card's left edge.
+				padding: this.isPlain ? '16px' : '16px 24px',
 				'box-sizing': 'border-box',
 				gap: '8px',
 				'text-align': this.textAlign,