@conduction/nextcloud-vue 2.56.0-beta.11 → 2.56.0-beta.13

package/src/components/CnHeaderWidget/CnHeaderWidget.vue

@@ -4,7 +4,7 @@
 -->
 
 <template>
-	<div class="cn-header-widget" :class="{ 'cn-header-widget--plain': isPlain }" :style="wrapperStyle">
+	<div class="cn-header-widget" :class="{ 'cn-header-widget--plain': isPlain, 'cn-header-widget--ground': isGround, 'cn-header-widget--with-views': viewOptions.length > 0 }" :style="wrapperStyle">
 		<div
 			v-if="hasOverlay"
 			class="cn-header-widget__overlay"
@@ -34,6 +34,19 @@
 				{{ ctaLabel }}
 			</a>
 		</div>
+		<!-- A view switch at the right of the heading (`content.views`): "My
+		     work / My team" as a segmented control whose options are routes,
+		     or views of the page the widget sits on (`option.view`); a view
+		     option controls the page's view region. -->
+		<div v-if="viewOptions.length > 0" class="cn-header-widget__views">
+			<CnSegmentedControl
+				:options="viewOptions"
+				:modelValue="activeView"
+				:ariaLabel="viewsLabel"
+				:controls="viewsRegionId"
+				data-testid="cn-header-widget-views"
+				@update:modelValue="onViewChange" />
+		</div>
 		<img
 			v-if="hasBackgroundImage"
 			class="cn-header-widget__probe"
@@ -47,6 +60,7 @@
 <script>
 import { getCurrentUser } from '@nextcloud/auth'
 import { getCanonicalLocale, translate as t } from '@nextcloud/l10n'
+import CnSegmentedControl from '../CnSegmentedControl/CnSegmentedControl.vue'
 import { resolveImageUrl } from '../../utils/resolveImageUrl.js'
 
 const ALLOWED_OVERLAY_MODES = ['none', 'tint', 'gradient-bottom']
@@ -55,6 +69,9 @@ const ALLOWED_TEXT_ALIGN = ['left', 'center', 'right']
 const ALLOWED_VERTICAL_ALIGN = ['top', 'middle', 'bottom']
 const ALLOWED_CTA_STYLES = ['primary', 'secondary', 'ghost']
 
+/** Marks a switch option that selects a page view rather than a route. */
+const VIEW_OPTION_PREFIX = 'view:'
+
 const HEIGHT_PIXELS = Object.freeze({
 	small: 120,
 	medium: 200,
@@ -99,6 +116,8 @@ const VERTICAL_ALIGN_FLEX = Object.freeze({
 export default {
 	name: 'CnHeaderWidget',
 
+	components: { CnSegmentedControl },
+
 	inject: {
 		/**
 		 * Host translate function provided by CnAppRoot as
@@ -108,6 +127,12 @@ export default {
 		 * untranslated key renders as itself.
 		 */
 		cnTranslate: { default: () => (key) => key },
+		/**
+		 * The views of the page this widget sits on, provided by
+		 * CnDashboardPage / CnDetailPage (`views`). An option with a `view`
+		 * selects one of them. Null outside such a page.
+		 */
+		cnPageViews: { default: null },
 	},
 
 	props: {
@@ -115,9 +140,18 @@ export default {
 		 * Persisted widget content: `{title, subtitle, backgroundImageUrl,
 		 * backgroundImageFileId, backgroundColor, overlayMode, overlayColor,
 		 * overlayOpacity, textColor, textAlign, verticalAlign, height, cta,
-		 * greeting, showDate, plain}`. All fields are optional except `title`
-		 * (or `greeting`); unknown enum values collapse to documented defaults
-		 * and the renderer never throws.
+		 * greeting, showDate, plain, ground, views}`. All fields are optional except
+		 * `title` (or `greeting`); unknown enum values collapse to documented
+		 * defaults and the renderer never throws. `views` is
+		 * `{ ariaLabel?, options: [{ label, route, params? } | { label, view }] }`:
+		 * a segmented control at the right of the heading whose checked option
+		 * is the current route; choosing another pushes its route. An option
+		 * with `view` selects that view of the page the widget sits on (the
+		 * page's `views`) instead, and the page then draws no switch of its
+		 * own. `ground: true`
+		 * draws the greeting on the page ground: the plain look with no
+		 * padding, a 32px heading and the date line 6px above it (a dashboard
+		 * also drops the widget's card for it).
 		 *
 		 * @type {object}
 		 */
@@ -198,13 +232,113 @@ export default {
 			return this.now instanceof Date ? this.now : new Date()
 		},
 
+		/**
+		 * The view switch's options from `content.views.options`: each
+		 * `{ label, route, params? }` with a non-empty label and route becomes
+		 * a segmented-control option keyed on its route name (the label goes
+		 * through the host translate function). Empty without a router, so
+		 * the switch cannot offer routes it cannot follow.
+		 *
+		 * @spec openspec/changes/zuiddrecht-pixel-gaps/specs/zuiddrecht-pixel-gaps/spec.md#requirement-a-greeting-header-switches-views
+		 * @return {Array<{value: string, label: string}>}
+		 */
+		viewOptions() {
+			const raw = this.content && this.content.views && this.content.views.options
+			if (!Array.isArray(raw)) {
+				return []
+			}
+			const pageViewIds = this.pageViewIds
+			return raw
+				.filter((o) => o && typeof o.label === 'string' && o.label !== '')
+				.map((o) => {
+					if (typeof o.view === 'string' && o.view !== '') {
+						return pageViewIds.includes(o.view) ? { value: VIEW_OPTION_PREFIX + o.view, label: this.cnTranslate(o.label) } : null
+					}
+					if (typeof o.route === 'string' && o.route !== '' && this.$router) {
+						return { value: o.route, label: this.cnTranslate(o.label) }
+					}
+					return null
+				})
+				.filter(Boolean)
+		},
+
+		/**
+		 * The ids of the page's views, empty outside a page with views.
+		 *
+		 * @spec openspec/changes/view-switch-containers/specs/view-switch-containers/spec.md#requirement-a-greeting-header-can-switch-the-pages-views
+		 * @return {string[]}
+		 */
+		pageViewIds() {
+			const views = this.cnPageViews && Array.isArray(this.cnPageViews.views) ? this.cnPageViews.views : []
+			return views.map((view) => view.id)
+		},
+
+		/**
+		 * The id of the page's view region when an option selects a view,
+		 * for the options' `aria-controls`; '' otherwise.
+		 *
+		 * @spec openspec/changes/view-switch-containers/specs/view-switch-containers/spec.md#requirement-the-view-switch-is-accessible
+		 * @return {string}
+		 */
+		viewsRegionId() {
+			const hasViewOption = this.viewOptions.some((o) => o.value.startsWith(VIEW_OPTION_PREFIX))
+			return hasViewOption && this.cnPageViews ? (this.cnPageViews.regionId || '') : ''
+		},
+
+		/**
+		 * The checked view: the option whose route is the current route, else
+		 * the first option (a switch always has one checked option).
+		 *
+		 * @spec openspec/changes/zuiddrecht-pixel-gaps/specs/zuiddrecht-pixel-gaps/spec.md#requirement-a-greeting-header-switches-views
+		 * @return {string|null}
+		 */
+		activeView() {
+			const options = this.viewOptions
+			if (options.length === 0) {
+				return null
+			}
+			const activeView = this.cnPageViews ? this.cnPageViews.activeId : null
+			const viewMatch = activeView ? options.find((o) => o.value === VIEW_OPTION_PREFIX + activeView) : null
+			if (viewMatch) {
+				return viewMatch.value
+			}
+			const current = this.$route && this.$route.name
+			const match = options.find((o) => o.value === current)
+			return match ? match.value : options[0].value
+		},
+
+		/**
+		 * Accessible name of the view switch: `content.views.ariaLabel`
+		 * through the host translate function, else "View".
+		 *
+		 * @spec openspec/changes/zuiddrecht-pixel-gaps/specs/zuiddrecht-pixel-gaps/spec.md#requirement-a-greeting-header-switches-views
+		 * @return {string}
+		 */
+		viewsLabel() {
+			const label = this.content && this.content.views && this.content.views.ariaLabel
+			return label ? this.cnTranslate(label) : t('nextcloud-vue', 'Views')
+		},
+
 		/**
 		 * Whether the plain presentation is on (no coloured background).
 		 *
 		 * @return {boolean}
 		 */
 		isPlain() {
-			return Boolean(this.content && this.content.plain === true)
+			return Boolean(this.content && (this.content.plain === true || this.content.ground === true))
+		},
+
+		/**
+		 * Whether the greeting sits on the page ground (`content.ground`):
+		 * the plain look without the card padding, so the date line and the
+		 * heading align with the page edge as the board draws them. Off by
+		 * default.
+		 *
+		 * @spec openspec/changes/zuiddrecht-pixel-gaps-2/specs/zuiddrecht-pixel-gaps-2/spec.md#requirement-a-greeting-can-sit-on-the-page-ground
+		 * @return {boolean}
+		 */
+		isGround() {
+			return Boolean(this.content && this.content.ground === true)
 		},
 
 		/**
@@ -490,7 +624,9 @@ export default {
 			return {
 				position: 'relative',
 				'z-index': 1,
-				width: '100%',
+				// Beside a view switch the content shares the row instead of
+				// taking the whole width (see .cn-header-widget--with-views).
+				width: this.viewOptions.length > 0 ? 'auto' : '100%',
 				height: '100%',
 				display: 'flex',
 				'flex-direction': 'column',
@@ -498,9 +634,10 @@ export default {
 				'justify-content': VERTICAL_ALIGN_FLEX[this.verticalAlign],
 				// 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',
+				// Ground has no card, so it has no padding either.
+				padding: this.isGround ? '0' : (this.isPlain ? '16px' : '16px 24px'),
 				'box-sizing': 'border-box',
-				gap: '8px',
+				gap: this.isGround ? '6px' : '8px',
 				'text-align': this.textAlign,
 			}
 		},
@@ -604,6 +741,32 @@ export default {
 	},
 
 	methods: {
+		/**
+		 * Follow the chosen view: push its route (with the option's `params`
+		 * when declared). Nothing happens for the route already shown.
+		 *
+		 * @spec openspec/changes/zuiddrecht-pixel-gaps/specs/zuiddrecht-pixel-gaps/spec.md#requirement-a-greeting-header-switches-views
+		 * @param {string} route The chosen option's route name.
+		 * @return {void}
+		 */
+		onViewChange(route) {
+			if (typeof route === 'string' && route.startsWith(VIEW_OPTION_PREFIX)) {
+				if (this.cnPageViews && typeof this.cnPageViews.select === 'function') {
+					this.cnPageViews.select(route.slice(VIEW_OPTION_PREFIX.length))
+				}
+				return
+			}
+			if (!this.$router || !route || route === (this.$route && this.$route.name)) {
+				return
+			}
+			const declared = (this.content.views.options || []).find((o) => o && o.route === route) || {}
+			const target = { name: route }
+			if (declared.params && typeof declared.params === 'object') {
+				target.params = declared.params
+			}
+			this.$router.push(target)
+		},
+
 		/**
 		 * Mark the background image as broken so the renderer falls back to
 		 * the solid colour.
@@ -655,6 +818,40 @@ export default {
 	border-radius: 0;
 }
 
+/* With a view switch the heading and the switch share one row, the switch
+   at the right and bottom-aligned with the heading; on a narrow card the
+   switch wraps under it. */
+.cn-header-widget--with-views {
+	display: flex;
+	flex-wrap: wrap;
+	align-items: flex-end;
+	justify-content: space-between;
+	gap: calc(2 * var(--default-grid-baseline)) calc(4 * var(--default-grid-baseline));
+}
+
+.cn-header-widget--with-views .cn-header-widget__content {
+	flex: 1 1 320px;
+	width: auto;
+}
+
+.cn-header-widget__views {
+	position: relative;
+	z-index: 1;
+	flex: 0 0 auto;
+	padding: 16px;
+}
+
+/* On the page ground (`content.ground`): no card, so no inset around the
+   view switch, and the heading at the board's 32px. */
+.cn-header-widget--ground .cn-header-widget__views {
+	padding: 0;
+}
+
+.cn-header-widget--ground .cn-header-widget__title {
+	font-size: var(--cn-header-ground-title-size, 32px);
+	letter-spacing: -0.01em;
+}
+
 .cn-header-widget__date {
 	font-size: 14px;
 	line-height: 1.4;
@@ -726,7 +923,7 @@ export default {
 	height: 1px;
 	opacity: 0;
 	pointer-events: none;
-	left: -9999px;
+	inset-inline-start: -9999px;
 	top: -9999px;
 }
 

package/src/components/CnIndexPage/CnIndexPage.vue

@@ -13,12 +13,12 @@
 		<slot
 			name="header"
 			:title="title"
-			:description="description"
+			:description="headerDescription"
 			:icon="resolvedIcon"
 			:showTitle="showTitle">
 			<CnPageHeader
 				:title="title"
-				:description="description"
+				:description="headerDescription"
 				:icon="resolvedIcon"
 				:visuallyHidden="!showTitle" />
 		</slot>
@@ -1177,6 +1177,21 @@ export default {
 			default: '',
 		},
 
+		/**
+		 * A description that carries the collection's total: `{total}` in
+		 * the text is replaced by the current pagination total ("{total}
+		 * open cases" reads "48 open cases"). Rendered in place of
+		 * `description` once a total is known; before that, `description`
+		 * shows. Manifest key `config.countSubtitle`. Goes through the host
+		 * translate function.
+		 *
+		 * @spec openspec/changes/zuiddrecht-pixel-gaps/specs/zuiddrecht-pixel-gaps/spec.md#requirement-an-index-page-title-is-a-manifest-key
+		 */
+		countSubtitle: {
+			type: String,
+			default: '',
+		},
+
 		/**
 		 * Whether to show the page header (icon, title, description) inline.
 		 * When false (default), only the sidebar header shows the title
@@ -4231,6 +4246,21 @@ export default {
 			return resolveDeepTokens(seed, {})
 		},
 
+		/**
+		 * The header's description line: `countSubtitle` with the total
+		 * filled in when one is known, else `description`.
+		 *
+		 * @spec openspec/changes/zuiddrecht-pixel-gaps/specs/zuiddrecht-pixel-gaps/spec.md#requirement-an-index-page-title-is-a-manifest-key
+		 * @return {string}
+		 */
+		headerDescription() {
+			const total = this.effectivePagination?.total
+			if (this.countSubtitle && typeof total === 'number' && total >= 0) {
+				return this.cnTranslate(this.countSubtitle).replace('{total}', String(total))
+			}
+			return this.description
+		},
+
 		/** Add button label — derived from schema.title if not explicitly set */
 		resolvedAddLabel() {
 			if (this.addLabel) {

package/src/components/CnObjectListWidget/CnObjectListWidget.vue

@@ -151,6 +151,7 @@
 						:sortKey="localSort.field || null"
 						:sortOrder="localSort.dir || 'asc'"
 						borderless
+						:hideHeader="content.hideHeader === true"
 						@rowClick="onRowClick"
 						@rowAuxClick="onRowAuxClick"
 						@select="onSelect"
@@ -172,6 +173,7 @@
 					:sortKey="localSort.field || null"
 					:sortOrder="localSort.dir || 'asc'"
 					borderless
+					:hideHeader="content.hideHeader === true"
 					@rowClick="onRowClick"
 					@rowAuxClick="onRowAuxClick"
 					@select="onSelect"
@@ -419,7 +421,11 @@ export default {
 		 * those carrying a selected value. Client-side over the fetched page,
 		 * like the rest of this widget's row set.
 		 *
-		 * @type {{register?: string, schema?: string, filter?: object, sort?: {field?: string, dir?: string}, limit?: number, extend?: Array<string>, columns?: Array, rowActions?: Array<object>, dropZone?: object, upload?: boolean, groupBy?: string, groupLabel?: string, groupLabelResolve?: {register: string, schema: string, labelField?: string}, selectable?: boolean, bulkActions?: Array<object>, sortable?: boolean, facet?: {field: string, label?: string}, rowRoute?: string, prompt?: string, emptyText?: string, viewAllRoute?: string, viewAllQuery?: object}}
+		 * `hideHeader: true` drops the table's column header row (CnDataTable's
+		 * `hideHeader`), for a short list that reads as rows, not as a table.
+		 *
+		 * @spec openspec/changes/zuiddrecht-pixel-gaps/specs/zuiddrecht-pixel-gaps/spec.md#requirement-small-opt-ins-from-the-decidiq-and-learniq-lanes
+		 * @type {{register?: string, schema?: string, filter?: object, sort?: {field?: string, dir?: string}, limit?: number, extend?: Array<string>, columns?: Array, rowActions?: Array<object>, dropZone?: object, upload?: boolean, groupBy?: string, groupLabel?: string, groupLabelResolve?: {register: string, schema: string, labelField?: string}, selectable?: boolean, bulkActions?: Array<object>, sortable?: boolean, facet?: {field: string, label?: string}, rowRoute?: string, prompt?: string, emptyText?: string, viewAllRoute?: string, viewAllQuery?: object, hideHeader?: boolean}}
 		 */
 		content: {
 			type: Object,

package/src/components/CnSegmentedControl/CnSegmentedControl.md

@@ -43,4 +43,4 @@ export default {
 </script>
 ```
 
-Props: `options` lists the choices, `modelValue` is the chosen value (use `v-model`), `aria-label` names the group (or point `aria-labelledby` at a visible heading), and `stretch` fills the width.
+Props: `options` lists the choices, `modelValue` is the chosen value (use `v-model`), `aria-label` names the group (or point `aria-labelledby` at a visible heading), `controls` names the id of the element the options switch (set as `aria-controls` on every option), and `stretch` fills the width.

package/src/components/CnSegmentedControl/CnSegmentedControl.vue

@@ -20,6 +20,7 @@
 			:aria-checked="isChecked(option) ? 'true' : 'false'"
 			:tabindex="index === focusableIndex ? 0 : -1"
 			:disabled="option.disabled || null"
+			:aria-controls="controls || null"
 			:data-value="option.key"
 			@click="select(option)">
 			<!-- @slot option Replaces the content of one option. -->
@@ -95,6 +96,17 @@ export default {
 			default: '',
 		},
 
+		/**
+		 * Id of the element the options switch, such as the region holding a
+		 * page view's widgets. Set as `aria-controls` on every option.
+		 *
+		 * @spec openspec/changes/view-switch-containers/specs/view-switch-containers/spec.md#requirement-the-view-switch-is-accessible
+		 */
+		controls: {
+			type: String,
+			default: '',
+		},
+
 		/** Stretch the control to the full width, with options of equal width. */
 		stretch: {
 			type: Boolean,

package/src/components/CnStagesWidget/CnStagesWidget.vue

@@ -35,7 +35,45 @@
 			{{ tr('No stages to show') }}
 		</p>
 		<template v-else>
+			<!-- The bars variant (`variant: "bars"`): equal columns, a thin bar
+			     per step coloured by state, the label under it and an optional
+			     date line. No description: eight Woo steps with their
+			     descriptions crowded into five lines and clipped the first
+			     label. The current step says so for a screen reader. -->
+			<ol
+				v-if="isBars"
+				class="cn-stages-widget__bars"
+				:aria-label="ariaLabel"
+				data-testid="cn-stages-widget-bars">
+				<li
+					v-for="stage in barStages"
+					:key="stage.id"
+					class="cn-stages-widget__bar-step"
+					:class="`cn-stages-widget__bar-step--${stage.state}`"
+					:aria-current="stage.state === 'current' ? 'step' : null"
+					:data-testid="`cn-stages-widget-bar-${stage.id}`">
+					<span class="cn-stages-widget__bar" aria-hidden="true" />
+					<component
+						:is="stage.clickable ? 'button' : 'span'"
+						:type="stage.clickable ? 'button' : null"
+						class="cn-stages-widget__bar-label"
+						:title="stage.hint || stage.label"
+						:aria-disabled="stage.disabled && stage.clickable ? 'true' : null"
+						:data-testid="`cn-stages-widget-stage-${stage.id}`"
+						@click="onBarClick(stage)">
+						{{ stage.label }}<span v-if="stage.state === 'current'" class="cn-stages-widget__sr-only"> ({{ tr('current step') }})</span>
+					</component>
+					<span v-if="stage.date" class="cn-stages-widget__bar-date">{{ stage.date }}</span>
+					<span
+						v-if="stage.reason"
+						:class="stage.reasonVisible ? 'cn-stages-widget__reason' : 'cn-stages-widget__sr-only'"
+						:data-testid="`cn-stages-widget-reason-${stage.id}`">
+						{{ stage.reason }}
+					</span>
+				</li>
+			</ol>
 			<CnTimelineStages
+				v-else
 				:stages="timelineStages"
 				:currentStage="currentStageId"
 				:orientation="orientation"
@@ -310,13 +348,15 @@ export default {
 		 * `currentField`, `stagesEndpoint` or `stagesSource`, `transition`
 		 * (`{ kind: 'lifecycle' }` by default, or `{ kind: 'field' }`, or
 		 * absent for a read-only strip), `unreachableReason`, `orientation`,
-		 * `size`, `ariaLabel` and `label`.
+		 * `size`, `ariaLabel`, `label` and `variant` (`"bars"` draws a thin
+		 * coloured bar per step with the label under it and no description;
+		 * the source's `dateField` adds a date line).
 		 *
 		 * `ariaLabel` names the strip for a screen reader. It falls back to
 		 * `label`, the placement's own title, so a titled card does not have to
 		 * repeat itself, and then to "Stages".
 		 *
-		 * @type {{currentField?: string, stagesEndpoint?: object, stagesSource?: object, transition?: object, unreachableReason?: string, orientation?: ('horizontal'|'vertical'), size?: ('medium'|'small'), ariaLabel?: string, label?: string}}
+		 * @type {{currentField?: string, stagesEndpoint?: object, stagesSource?: object, transition?: object, unreachableReason?: string, orientation?: ('horizontal'|'vertical'), size?: ('medium'|'small'), ariaLabel?: string, label?: string, variant?: ('dots'|'bars')}}
 		 */
 		content: {
 			type: Object,
@@ -723,6 +763,45 @@ export default {
 			return label ? this.effectiveTranslate(label) : this.tr('Stages')
 		},
 
+		/**
+		 * Whether the bars variant is on (`content.variant: "bars"`). Off by
+		 * default: the dot strip renders as it always has.
+		 *
+		 * @spec openspec/changes/zuiddrecht-pixel-gaps/specs/zuiddrecht-pixel-gaps/spec.md#requirement-a-stages-widget-draws-bars
+		 * @return {boolean}
+		 */
+		isBars() {
+			return this.content.variant === 'bars'
+		},
+
+		/**
+		 * The stages for the bars variant: each with its `state` (`done`
+		 * before the current stage, `current`, `todo` after it, every stage
+		 * `todo` when none is current), its `date`, and whether it is a
+		 * button (the strip is interactive and the stage is not the current
+		 * one).
+		 *
+		 * @spec openspec/changes/zuiddrecht-pixel-gaps/specs/zuiddrecht-pixel-gaps/spec.md#requirement-a-stages-widget-draws-bars
+		 * @return {Array<object>}
+		 */
+		barStages() {
+			const current = this.stages.findIndex((s) => s.id === this.currentStageId)
+			return this.timelineStages.map((stage, index) => {
+				let state = 'todo'
+				if (current >= 0 && index < current) {
+					state = 'done'
+				} else if (index === current) {
+					state = 'current'
+				}
+				return {
+					...stage,
+					date: this.stages[index]?.date || '',
+					state,
+					clickable: this.interactive && state !== 'current',
+				}
+			})
+		},
+
 		/** @return {'horizontal'|'vertical'} The layout direction. */
 		orientation() {
 			return this.content.orientation === 'vertical' ? 'vertical' : 'horizontal'
@@ -969,6 +1048,26 @@ export default {
 		 * @param {{stage: {id: string}}} payload The CnTimelineStages event.
 		 * @return {void}
 		 */
+		/**
+		 * A click on a bar-variant step: a disabled step reports why (as
+		 * CnTimelineStages does through `stage-blocked`), any other goes
+		 * through the shared move path.
+		 *
+		 * @spec openspec/changes/zuiddrecht-pixel-gaps/specs/zuiddrecht-pixel-gaps/spec.md#requirement-a-stages-widget-draws-bars
+		 * @param {object} stage The bar step.
+		 * @return {void}
+		 */
+		onBarClick(stage) {
+			if (!stage.clickable) {
+				return
+			}
+			if (stage.disabled) {
+				this.onStageBlocked({ stage })
+				return
+			}
+			this.onStageClick({ stage })
+		},
+
 		onStageClick({ stage }) {
 			if (!this.canMove || !stage) {
 				return
@@ -1340,6 +1439,94 @@ export default {
 	color: var(--color-text-maxcontrast);
 }
 
+/* The bars variant: equal columns, a thin bar per step. Theme hooks:
+   --cn-stages-bar-height, --cn-stages-bar-radius, --cn-stages-bar-done,
+   --cn-stages-bar-current, --cn-stages-bar-todo. */
+.cn-stages-widget__bars {
+	display: grid;
+	grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
+	grid-auto-flow: column;
+	gap: 8px;
+	margin: 0;
+	padding: 0;
+	list-style: none;
+}
+
+.cn-stages-widget__bar-step {
+	display: flex;
+	flex-direction: column;
+	gap: 8px;
+	min-width: 0;
+}
+
+.cn-stages-widget__bar {
+	display: block;
+	height: var(--cn-stages-bar-height, 6px);
+	border-radius: var(--cn-stages-bar-radius, 3px);
+	background: var(--cn-stages-bar-todo, var(--color-border));
+}
+
+.cn-stages-widget__bar-step--done .cn-stages-widget__bar {
+	background: var(--cn-stages-bar-done, var(--color-primary-element));
+}
+
+.cn-stages-widget__bar-step--current .cn-stages-widget__bar {
+	background: var(--cn-stages-bar-current, var(--color-error));
+}
+
+.cn-stages-widget__bar-label {
+	display: block;
+	margin: 0;
+	padding: 0;
+	border: 0;
+	background: none;
+	color: var(--color-text-maxcontrast);
+	font: inherit;
+	font-size: 14px;
+	text-align: start;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+/* A clickable label is a <button>, and Nextcloud's core stylesheet gives
+   every `button:not(.button-vue)` a min-height of the clickable area (34 to
+   44px) with the text centred in it. That pushed each reachable stage's label
+   about 12px below the current one, which is a <span>. Zeroed here so all
+   labels sit 8px under their bar, as the board draws them. The visually
+   hidden "(current step)" is absolutely positioned and takes no space. */
+button.cn-stages-widget__bar-label {
+	min-height: 0;
+	height: auto;
+	line-height: inherit;
+	cursor: pointer;
+}
+
+button.cn-stages-widget__bar-label[aria-disabled="true"] {
+	cursor: not-allowed;
+}
+
+button.cn-stages-widget__bar-label:focus-visible {
+	outline: 2px solid var(--color-primary-element);
+	outline-offset: 2px;
+	border-radius: var(--border-radius-small, 4px);
+}
+
+.cn-stages-widget__bar-step--done .cn-stages-widget__bar-label {
+	color: var(--color-main-text);
+	font-weight: 600;
+}
+
+.cn-stages-widget__bar-step--current .cn-stages-widget__bar-label {
+	color: var(--color-main-text);
+	font-weight: 700;
+}
+
+.cn-stages-widget__bar-date {
+	font-size: 12px;
+	color: var(--color-text-maxcontrast);
+}
+
 /* Text for screen readers only. */
 .cn-stages-widget__sr-only {
 	position: absolute;

package/src/components/CnStagesWidget/stagesModel.js

@@ -85,8 +85,9 @@ export function isTrue(value) {
  * the rows keep the order they arrived in.
  *
  * @param {Array<object>} rows The stage rows.
- * @param {{idField?: string, labelField?: string, descriptionField?: string, orderField?: string, finalField?: string}} [cfg] The field mapping.
- * @return {Array<{id: string, label: string, subtitle: string, final: boolean}>} The stages.
+ * @spec openspec/changes/zuiddrecht-pixel-gaps/specs/zuiddrecht-pixel-gaps/spec.md#requirement-a-stages-widget-draws-bars
+ * @param {{idField?: string, labelField?: string, descriptionField?: string, dateField?: string, orderField?: string, finalField?: string}} [cfg] The field mapping.
+ * @return {Array<{id: string, label: string, subtitle: string, date: string, final: boolean}>} The stages.
  */
 export function normalizeStages(rows, cfg = {}) {
 	const list = Array.isArray(rows) ? rows.filter((r) => r && typeof r === 'object') : []
@@ -108,6 +109,8 @@ export function normalizeStages(rows, cfg = {}) {
 				id: rowId(row, cfg.idField),
 				label,
 				subtitle: cfg.descriptionField ? labelText(getByPath(row, cfg.descriptionField)) : '',
+				// An optional date line (`dateField`), drawn by the bars variant.
+				date: cfg.dateField ? labelText(getByPath(row, cfg.dateField)) : '',
 				final: cfg.finalField ? isTrue(getByPath(row, cfg.finalField)) : false,
 			}
 		})