@conduction/nextcloud-vue 2.143.0 → 2.145.0

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

@@ -77,7 +77,7 @@
 	grid-column: 1 / -1;
 	grid-row: 2;
 	justify-self: start;
-	margin-block: 6px 3px;
+	margin-block: 6px 0;
 }
 
 .cn-look-board.cn-index-page--sidebar-open .cn-page-header .cn-header-trail,
@@ -90,6 +90,13 @@
 	grid-row: 4;
 }
 
+/* Without a breadcrumb trail the count line takes the trail's row, so no
+   empty row adds a second gap (DqZakenSorteren: 58px under the title). */
+.cn-look-board.cn-index-page--sidebar-open .cn-page-header:not(:has(.cn-header-trail)) .cn-page-header__text > .cn-page-header__description,
+.cn-look-board .cn-index-page--sidebar-open .cn-page-header:not(:has(.cn-header-trail)) .cn-page-header__text > .cn-page-header__description {
+	grid-row: 3;
+}
+
 /* The header buttons keep the board's button under a theme that styles every
    secondary or primary button with `!important` (the nldesign theme: a
    primary border, 8px 16px padding): Download and the Actions menu are 40px,
@@ -190,6 +197,15 @@
 	gap: 8px;
 }
 
+/* With the side panel open the boards keep Filter on row 1 after Save view
+   and wrap the view switch alone to row 2 (DqFilterBeheren, DqZakenSorteren):
+   the unit dissolves into the bar's flex row.
+   @spec openspec/changes/board-filter-row-one-beside-side-panel/specs/board-filter-row-one-beside-side-panel/spec.md */
+.cn-look-board.cn-index-page--sidebar-open .cn-actions-bar--board .cn-actions-bar__view-controls,
+.cn-look-board .cn-index-page--sidebar-open .cn-actions-bar--board .cn-actions-bar__view-controls {
+	display: contents;
+}
+
 /* `quickFilterPlacement: "toolbar"` (DqTeamwachtrij): the chips take the room
    the Filter button and the view switch leave on row 1, so the three stay on
    one row in the column beside a side panel; the chips that do not fit move
@@ -909,16 +925,21 @@
    `#content[class*="app-"]`, an id selector no class rule outranks, so a plain
    `content-box` here was ignored and the cell left 12px for the checkbox (the
    header's checkbox showed as a stray bracket). */
-/* The checkbox starts 20px in, as the boards draw a native checkbox (16px of
-   cell padding and its 4px margin; DqZoekresultaten), in the same 60px. */
+/* The cell pads 16px as the boards do and the checkbox starts 4px further in,
+   a native checkbox's margin (DqZoekresultaten, DqPostvak, DqContracten), in
+   the same 60px. */
 .cn-look-board .cn-table-container--board .cn-data-table .cn-table-col--checkbox {
 	box-sizing: border-box !important;
 	width: 60px;
 	min-width: 60px;
-	padding-inline: 20px 12px;
+	padding-inline: 16px;
 	text-align: start;
 }
 
+.cn-look-board .cn-table-container--board .cn-data-table .cn-table-col--checkbox .checkbox-radio-switch {
+	margin-inline-start: 4px;
+}
+
 .cn-look-board .cn-table-container--board .cn-data-table .checkbox-radio-switch {
 	--icon-size: 18px;
 }
@@ -991,6 +1012,20 @@
 	text-decoration: none;
 }
 
+/* In such a plain log an icon-and-name cell is regular too (DqZaakContact
+   Kanaal "Mijn Zuiddrecht"); elsewhere the icon label stays 600.
+   @spec openspec/changes/board-log-table-icon-label-regular/specs/board-log-table-icon-label-regular/spec.md#requirement-a-plain-logs-icon-label-cell-is-regular */
+.cn-look-board .cn-table-container--board.cn-table-container--title-text .cn-cell-renderer__icon-label:not(.cn-look-nextcloud *) {
+	font-weight: 400;
+}
+
+/* In such a plain log a wrapping prose cell runs at line height 1.45, as
+   DqZaakContact draws the contact summary (rows 61.6 high, not 57).
+   @spec openspec/changes/board-log-table-prose-line-height/specs/board-log-table-prose-line-height/spec.md#requirement-a-plain-logs-prose-cell-runs-at-line-height-1-45 */
+.cn-look-board .cn-table-container--board.cn-table-container--title-text .cn-data-table td.cn-cell--wrap:not(.cn-look-nextcloud *) {
+	line-height: 1.45;
+}
+
 /* `rowTitle: "strong"` (DqZaaktypeStatussen "Statussen", "Resultaten"): the
    name column of a card's list, the cell's 14px at weight 600 in the main
    ink, no underline; the row stays a link.
@@ -1414,6 +1449,19 @@
 	padding-top: 0;
 }
 
+/* The selection box sits flush where the boards draw it: NcCheckbox pads its
+   content 7px on each side (DqAanMijToegewezen card head, DqTeamwachtrij rows,
+   whose box starts 18px in).
+   @spec openspec/changes/board-selection-box-flush/specs/board-selection-box-flush/spec.md#requirement-a-cards-and-a-rows-selection-box-sits-where-the-board-draws-it */
+.cn-look-board .cn-object-card__record-head > .cn-object-card__checkbox .checkbox-radio-switch__content,
+.cn-look-board .cn-object-row__checkbox .checkbox-radio-switch__content {
+	padding-inline: 0;
+}
+
+.cn-look-board .cn-object-row__checkbox {
+	margin-inline-start: 6px;
+}
+
 .cn-look-board .cn-object-card--board .cn-object-card__record-head > .cn-object-card__checkbox ~ .cn-object-card__record-pill {
 	margin-inline-start: auto;
 }

package/src/css/look-board.css

@@ -329,9 +329,11 @@
 .cn-look-board .cn-dashboard-page:not(.cn-look-nextcloud *) .cn-banner-widget__kicker {
 	--nldesign-component-paragraph-font-size: 13px;
 	--nldesign-component-paragraph-font-weight: 700;
+	--nldesign-component-paragraph-line-height: normal;
 	font-size: 13px;
 	font-weight: 700;
 	letter-spacing: 0;
+	line-height: normal;
 	text-transform: none;
 }
 
@@ -662,12 +664,17 @@
 }
 
 /* Two buttons in a card's title row stand 8px apart (DqZaakContact "Live
-   gesprek", DqZaakEmail "Mail koppelen" / "Mail opstellen").
+   gesprek", DqZaakEmail "Mail koppelen" / "Mail opstellen"), also in an
+   integration card's CnDetailCard header (DqZaakTaken "Afspraken", "Kaarten").
    @spec openspec/changes/board-card-header-actions-gap/specs/board-card-header-actions-gap/spec.md#requirement-a-board-cards-title-row-buttons-stand-8px-apart */
 .cn-look-board .cn-widget-wrapper__actions:not(.cn-look-nextcloud *) {
 	gap: 8px;
 }
 
+.cn-look-board .cn-detail-card__header-right:not(.cn-look-nextcloud *) {
+	gap: 8px;
+}
+
 /* A detail page marked `cardButtons: "regular"` draws them at the 40px
    control height: the case page's tab cards (DqZaakContact "Live gesprek",
    DqZaakHistorie, DqZaakBetrokkenen), where setting and case-type pages keep 34.
@@ -1465,6 +1472,90 @@ body:has(.cn-look-board):not(:has(.cn-look-nextcloud)) .v-popper__popper.action-
 	text-decoration: underline;
 }
 
+/* A plain table an app draws in a settings card (dossiq's ZGW mapping, StUF
+   endpoints and audit log, AWB terms) reads as the board's settings tables:
+   14px, a near-white head with muted 600 labels, 10px 12px cells, soft rules.
+   The theme paints every th through its table header tokens, so the head
+   hands those tokens the board's values too.
+   @spec openspec/changes/board-settings-plain-tables/specs/settings-board-look/spec.md */
+.cn-look-board .settings-section table:not(.cn-data-table):not(.cn-look-nextcloud *) {
+	width: 100%;
+	border-collapse: collapse;
+	font-size: 14px;
+	line-height: 1.2;
+}
+
+.cn-look-board .settings-section table:not(.cn-data-table):not(.cn-look-nextcloud *) th {
+	--nldesign-component-table-header-background-color: var(--cn-board-table-head-bg, color-mix(in srgb, var(--color-background-hover) 40%, var(--color-main-background)));
+	--nldesign-component-table-header-color: var(--color-text-maxcontrast);
+	--nldesign-component-table-header-font-weight: 600;
+	padding: 10px 12px;
+	border-bottom: 1px solid var(--color-border);
+	background: var(--cn-board-table-head-bg, color-mix(in srgb, var(--color-background-hover) 40%, var(--color-main-background)));
+	color: var(--color-text-maxcontrast);
+	font-size: 14px;
+	font-weight: 600;
+	line-height: 1.2;
+	text-align: start;
+}
+
+/* The working calendar's month reads as the board draws it: the month name
+   first, at the content edge, with the previous and next month buttons after
+   it, and the buttons add no height to the line, so the month sits 20px under
+   the card title (DqInstellingenAlgemeen "Werkdagen en feestdagen": the
+   arrow put the month 30px in and 28px down).
+   @spec openspec/changes/working-calendar-board-head/specs/settings-board-look/spec.md */
+.cn-look-board .cn-working-calendar__title:not(.cn-look-nextcloud *) {
+	order: -1;
+	min-width: 0;
+	margin-inline-end: 4px;
+	line-height: 1.2;
+	text-align: start;
+}
+
+.cn-look-board .settings-section table:not(.cn-data-table):not(.cn-look-nextcloud *) td {
+	padding: 10px 12px;
+	border-bottom: 1px solid var(--color-background-dark);
+	color: var(--color-main-text);
+	font-size: 14px;
+	line-height: 1.2;
+	vertical-align: middle;
+}
+
+/* A strong cell's name in a settings card reads 15px bold over its muted
+   second line, as the boards draw a connection's name (DqInstellingen
+   "Koppelingen": <strong> 15px), not the index tables' 14px 500.
+   @spec openspec/changes/board-settings-strong-cell-name/specs/settings-board-look/spec.md */
+.cn-look-board .settings-section .cn-data-table td.cn-cell--strong:not(.cn-look-nextcloud *) {
+	font-weight: 400;
+}
+
+.cn-look-board .settings-section .cn-data-table td.cn-cell--strong:not(.cn-look-nextcloud *) > .cn-cell-renderer {
+	font-size: 15px;
+	font-weight: 700;
+}
+
+.cn-look-board .cn-working-calendar__head:not(.cn-look-nextcloud *) > .button-vue:not(.cn-working-calendar__add) {
+	margin-block: -8px;
+}
+
+/* In a one-column settings card a single-line field is at most 560px wide,
+   its hint under it, as the boards draw a field on its own row
+   (DqBeheerGeavanceerd "Financiële integratie", "Storeregister"); a text
+   area, a note or a switch still spans the card.
+   @spec openspec/changes/board-settings-single-field-width/specs/settings-board-look/spec.md */
+.cn-look-board .cn-settings-fields__grid--1:not(.cn-look-nextcloud *) > .cn-settings-field--text,
+.cn-look-board .cn-settings-fields__grid--1:not(.cn-look-nextcloud *) > .cn-settings-field--password,
+.cn-look-board .cn-settings-fields__grid--1:not(.cn-look-nextcloud *) > .cn-settings-field--secret,
+.cn-look-board .cn-settings-fields__grid--1:not(.cn-look-nextcloud *) > .cn-settings-field--number,
+.cn-look-board .cn-settings-fields__grid--1:not(.cn-look-nextcloud *) > .cn-settings-field--email,
+.cn-look-board .cn-settings-fields__grid--1:not(.cn-look-nextcloud *) > .cn-settings-field--url,
+.cn-look-board .cn-settings-fields__grid--1:not(.cn-look-nextcloud *) > .cn-settings-field--select,
+.cn-look-board .cn-settings-fields__grid--1:not(.cn-look-nextcloud *) > .cn-settings-field--date,
+.cn-look-board .cn-settings-fields__grid--1:not(.cn-look-nextcloud *) > .cn-settings-field--datetime-local {
+	max-width: 560px;
+}
+
 /* 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. A
    half-width card keeps them there (DqVthInstellingen "Inspectiechecklists",
@@ -1513,6 +1604,42 @@ body:has(.cn-look-board):not(:has(.cn-look-nextcloud)) .v-popper__popper.action-
 	align-self: center;
 }
 
+/* Without a subtitle the title centres on the title-row buttons, as the boards
+   draw the card head (DqVthInstellingen "Inspectiechecklists",
+   DqInstellingenAlgemeen "Werkdagen en feestdagen": title 27.5px down, live 21).
+   @spec openspec/changes/board-settings-title-centred-and-link-flush/specs/settings-board-look/spec.md */
+.cn-look-board .settings-section:not(.cn-look-nextcloud *):has(> .cn-settings-section__actions):not(:has(> .settings-section__desc)) > .settings-section__name {
+	align-self: center;
+}
+
+/* A switch or radio in a board settings card starts at the card's content
+   edge, its label 12px (switch) or 10px (radio) after the control, as the
+   boards draw them (DqBeheerinstellingen "AI-ondersteunde verwerking").
+   NcCheckboxRadioSwitch pads its content 9px on each side, which set the
+   control 9px in from the fields above and below it.
+   @spec openspec/changes/board-settings-switch-radio-flush/specs/settings-board-look/spec.md */
+.cn-look-board .cn-settings-fields:not(.cn-look-nextcloud *) .checkbox-content {
+	padding-inline: 0;
+}
+
+.cn-look-board .cn-settings-fields:not(.cn-look-nextcloud *) .checkbox-content-switch {
+	gap: 12px;
+}
+
+.cn-look-board .cn-settings-fields:not(.cn-look-nextcloud *) .checkbox-content-radio {
+	gap: 10px;
+}
+
+/* The "Uitleg tonen" toggle is a text link flush with the card's right edge
+   (DqBeheerinstellingen Zaak-e-mail), not a padded tertiary button.
+   @spec openspec/changes/board-settings-title-centred-and-link-flush/specs/settings-board-look/spec.md */
+.cn-look-board .cn-settings-fields__hints-toggle:not(.cn-look-nextcloud *) .button-vue {
+	--button-padding: 0px;
+	--button-padding-default: 0px;
+	padding-inline: 0;
+	min-width: 0;
+}
+
 @container (max-width: 400px) {
 	.cn-look-board .settings-section:not(.cn-look-nextcloud *) > .cn-settings-section__actions,
 	.cn-look-board .settings-section:not(.cn-look-nextcloud *):has(> .settings-section__desc) > .cn-settings-section__actions {
@@ -1576,8 +1703,12 @@ body:has(.cn-look-board):not(:has(.cn-look-nextcloud)) .v-popper__popper.action-
 	max-width: none;
 }
 
-.cn-look-board .settings-section.cn-settings-section--wide:not(.cn-look-nextcloud *) .settings-section__name,
-.cn-look-board .settings-section.cn-settings-section--wide:not(.cn-look-nextcloud *) .settings-section__desc {
+/* A board card's title and subtitle run the card's width, wide or not
+   (DqBeheerGeavanceerd "Eerste keer", "StUF-ZKN-endpoints": the subtitle
+   wrapped at NcSettingsSection's 900px measure, the board's does not).
+   @spec openspec/changes/board-settings-desc-full-width/specs/settings-board-look/spec.md */
+.cn-look-board .settings-section:not(.cn-look-nextcloud *) .settings-section__name,
+.cn-look-board .settings-section:not(.cn-look-nextcloud *) .settings-section__desc {
 	max-width: none;
 }
 
@@ -2136,7 +2267,7 @@ body:has(.cn-look-board):not(:has(.cn-look-nextcloud)) .v-popper__popper.action-
    12px follows it: the boards' card is title, 6px, rule, row (DqMijnTeam
    "Vastgelopen zaken", DqMijnWerk "Zaken die u volgt").
    @spec openspec/changes/board-card-title-above-ruled-list/specs/board-card-title-above-ruled-list/spec.md#requirement-a-ruled-list-starts-6px-under-the-card-title */
-.cn-look-board .cn-dashboard-page:not(.cn-look-nextcloud *) .cn-widget-wrapper:not(.cn-widget-wrapper--nc-dashboard):not(.cn-widget-wrapper--borderless):has(> .cn-widget-wrapper__content .cn-record-list--rule-above, > .cn-widget-wrapper__content .cn-tasks-widget__list, > .cn-widget-wrapper__content .cn-decision-list__rows) .cn-widget-wrapper__header {
+.cn-look-board .cn-dashboard-page:not(.cn-look-nextcloud *) .cn-widget-wrapper:not(.cn-widget-wrapper--nc-dashboard):not(.cn-widget-wrapper--borderless):has(> .cn-widget-wrapper__content .cn-record-list--rule-above, > .cn-widget-wrapper__content .cn-tasks-widget__list, > .cn-widget-wrapper__content .cn-decision-list__rows, > .cn-widget-wrapper__content .cn-nc-widget-widget__body--vertical) .cn-widget-wrapper__header {
 	padding-bottom: 6px;
 }
 
@@ -2672,13 +2803,13 @@ body:has(.cn-look-board):not(:has(.cn-look-nextcloud)) .v-popper__popper.action-
 
 /* A vertical NC widget is the board's activity list (DqMijnWerk "Recente
    activiteit"): hairline rows 12px above and below the text, a 10px dot in
-   the icon's place, the title 14px in the main ink and wrapping, the first
-   hairline 12px under the title. Thematiq underlines links with a heavier
-   selector, hence the !important.
+   the icon's place, the title 14px in the main ink and wrapping. Thematiq underlines links with a heavier
+   selector, hence the !important. The first hairline stands 6px under the
+   title, as on every Dq list card (design-system #432).
    @spec openspec/changes/board-nc-widget-activity-rows/specs/board-nc-widget-activity-rows/spec.md#requirement-a-board-dashboard-nc-widget-draws-its-items-as-activity-rows */
 .cn-look-board .cn-dashboard-page:not(.cn-look-nextcloud *) .cn-widget-wrapper:not(.cn-widget-wrapper--borderless) .cn-nc-widget-widget__body--vertical {
 	gap: 0;
-	padding: 2px var(--cn-board-dashboard-card-inset) 10px;
+	padding: 0 var(--cn-board-dashboard-card-inset) 10px;
 }
 
 .cn-look-board .cn-dashboard-page:not(.cn-look-nextcloud *) .cn-nc-widget-widget__body--vertical a.cn-nc-widget-widget__item--vertical {
@@ -3112,6 +3243,25 @@ body:has(.cn-look-board):not(:has(.cn-look-nextcloud)) .v-popper__popper.action-
 	line-height: normal;
 }
 
+/* A bar list in a framed section of a sections card is the board's small
+   list: 13px rows 8px apart, a 150px label column, a 10px bar and a 48px
+   value column (DqDoorlooptijd "Naleving per zaaktype").
+   @spec openspec/changes/board-section-bar-list-compact/specs/board-section-bar-list-compact/spec.md#requirement-a-bar-list-in-a-sections-card-section-is-compact */
+.cn-look-board .cn-sections-widget__section .cn-chart-widget__bar-list:not(.cn-look-nextcloud *) {
+	gap: 8px;
+}
+
+.cn-look-board .cn-sections-widget__section .cn-chart-widget__bar-list:not(.cn-look-nextcloud *) .cn-chart-widget__bar-line {
+	grid-template-columns: 150px minmax(0, 1fr) 48px;
+	gap: 10px;
+	font-size: 13px;
+}
+
+.cn-look-board .cn-sections-widget__section .cn-chart-widget__bar-list:not(.cn-look-nextcloud *) .cn-chart-widget__bar-track {
+	height: 10px;
+	border-radius: 5px;
+}
+
 /* A bar list with the value at the bar's end (DqProcesanalyse "Doorlooptijd
    per status") sets its rows in 13px, the label in the secondary text, the
    value in the main ink at 600, rows 34px apart.
@@ -3157,6 +3307,11 @@ body:has(.cn-look-board):not(:has(.cn-look-nextcloud)) .v-popper__popper.action-
 	line-height: 1.2;
 }
 
+/* An option's title bold, as the dialog boards draw it (a <strong>). */
+.cn-look-board .cn-choice-cards .cn-choice-cards__row-title:not(.cn-look-nextcloud *) {
+	font-weight: 700;
+}
+
 .cn-look-board .cn-choice-cards .cn-choice-cards__row-icon:not(.cn-look-nextcloud *) {
 	align-self: flex-start;
 }

package/src/css/table.css

@@ -310,7 +310,7 @@
 .cn-data-table--fit td.cn-table-col--grow.cn-cell--wrap {
 	min-width: 8em;
 	max-width: none;
-	overflow-wrap: anywhere;
+	overflow-wrap: break-word;
 	white-space: normal;
 }
 
@@ -359,6 +359,13 @@
 	font-weight: 500;
 }
 
+/* A lead cell's value reads 15px, a person's name over their function
+   (DqAfdelingen). */
+.cn-data-table td.cn-cell--lead > .cn-cell-renderer,
+.cn-data-table td.cn-cell--lead .cn-table-row__link > .cn-cell-renderer {
+	font-size: 15px;
+}
+
 .cn-data-table td.cn-cell--muted {
 	color: var(--color-text-maxcontrast);
 }

package/src/integrations/builtin/calendar/CnCalendarCard.vue

@@ -83,22 +83,42 @@
 				v-for="ev in displayedEvents"
 				:key="rowKey(ev)"
 				class="cn-calendar-card__row">
-				<div class="cn-calendar-card__row-icon">
-					<CalendarClock v-if="isUpcoming(ev)" :size="20" class="cn-calendar-card__icon--upcoming" />
-					<CalendarCheck v-else :size="20" class="cn-calendar-card__icon--past" />
-				</div>
-				<div class="cn-calendar-card__row-main">
-					<span class="cn-calendar-card__title">{{ ev.summary || untitledLabel }}</span>
-					<div class="cn-calendar-card__meta">
-						<span v-if="ev.dtstart" class="cn-calendar-card__when">{{ formatShort(ev.dtstart) }}</span>
-						<span v-if="ev.location" class="cn-calendar-card__location">· {{ ev.location }}</span>
+				<!-- The board look draws a meeting as a ruled row: its title, one
+				     meta line (when, where, who) and its status at the end. -->
+				<template v-if="boardRows">
+					<div class="cn-calendar-card__row-main">
+						<span class="cn-calendar-card__title">{{ ev.summary || untitledLabel }}</span>
+						<span class="cn-calendar-card__meta" data-testid="cn-calendar-card-meta">{{ boardMetaOf(ev) }}</span>
 					</div>
-				</div>
+					<span v-if="statusOf(ev)"
+						class="cn-status-badge"
+						:class="`cn-status-badge--${statusVariantOf(ev)}`"
+						data-testid="cn-calendar-card-status">{{ statusOf(ev) }}</span>
+				</template>
+				<template v-else>
+					<div class="cn-calendar-card__row-icon">
+						<CalendarClock v-if="isUpcoming(ev)" :size="20" class="cn-calendar-card__icon--upcoming" />
+						<CalendarCheck v-else :size="20" class="cn-calendar-card__icon--past" />
+					</div>
+					<div class="cn-calendar-card__row-main">
+						<span class="cn-calendar-card__title">{{ ev.summary || untitledLabel }}</span>
+						<div class="cn-calendar-card__meta">
+							<span v-if="ev.dtstart" class="cn-calendar-card__when">{{ formatShort(ev.dtstart) }}</span>
+							<span v-if="ev.location" class="cn-calendar-card__location">· {{ ev.location }}</span>
+						</div>
+					</div>
+				</template>
 			</div>
+			<a v-if="boardRows"
+				class="cn-calendar-card__open"
+				:href="calendarAppUrl"
+				target="_blank"
+				rel="noopener"
+				data-testid="cn-calendar-card-open">{{ openInCalendarLabel }}</a>
 		</div>
 
 		<!-- Footer: detail surface gets "Open in NC Calendar" CTA -->
-		<template v-if="surface === 'detail-page'" #footer>
+		<template v-if="surface === 'detail-page' && !isBoard" #footer>
 			<a
 				class="cn-calendar-card__cta"
 				:href="calendarAppUrl"
@@ -144,9 +164,12 @@ import CnCalendarEventCreate from '../../../components/CnCalendarEventCreate/CnC
 import CnCalendarEventPicker from '../../../components/CnCalendarEventPicker/CnCalendarEventPicker.vue'
 import CnDetailCard from '../../../components/CnDetailCard/CnDetailCard.vue'
 import CnIcon from '../../../components/CnIcon/CnIcon.vue'
+import { normalizeLook } from '../../../composables/useLook.js'
+import { formatBoardDate, formatTimeOfDay } from '../../../utils/boardDate.js'
 import { buildHeaders, prefixUrl } from '../../../utils/index.js'
 import { userLocale } from '../../../utils/userLocale.js'
 import { linkCalendarEvent } from './calendarEventLink.js'
+import { eventAttendeeNames, eventStatusLabel, eventStatusVariant } from './eventStatus.js'
 
 /**
  * CnCalendarCard — surface-aware compact widget for the calendar
@@ -158,6 +181,10 @@ export default {
 
 	components: { CnCalendarEventCreate, CnCalendarEventPicker, CnDetailCard, CnIcon, LinkVariant, NcButton, NcLoadingIcon, Plus, CalendarClock, CalendarCheck },
 
+	inject: {
+		cnLook: { default: 'nextcloud' },
+	},
+
 	props: {
 		/** OpenRegister register id (slug or uuid). Optional for user-dashboard. */
 		register: { type: String, default: '' },
@@ -233,6 +260,16 @@ export default {
 		 *
 		 * @return {Array<string>}
 		 */
+		/** @return {boolean} The board look draws ruled rows. */
+		isBoard() {
+			return normalizeLook(this.cnLook) === 'board'
+		},
+
+		/** @return {boolean} The meetings are ruled rows: the board look on a detail page. */
+		boardRows() {
+			return this.isBoard && this.surface === 'detail-page'
+		},
+
 		shownHeaderActions() {
 			if (this.surface !== 'detail-page' || !this.objectId || !Array.isArray(this.headerActions)) {
 				return []
@@ -292,6 +329,34 @@ export default {
 	},
 
 	methods: {
+		/**
+		 * A meeting's meta line in the board look: "14 okt, 10:00 tot 10:30",
+		 * its place and its attendees, separated by middots.
+		 *
+		 * @param {object} ev The event.
+		 * @return {string}
+		 */
+		boardMetaOf(ev) {
+			const start = ev.dtstart ? new Date(ev.dtstart) : null
+			const end = ev.dtend ? new Date(ev.dtend) : null
+			let when = ''
+			if (start && !Number.isNaN(start.getTime())) {
+				when = `${formatBoardDate(start)}, ${formatTimeOfDay(start)}`
+				if (end && !Number.isNaN(end.getTime())) {
+					when = t('nextcloud-vue', '{start} until {end}', { start: when, end: formatTimeOfDay(end) })
+				}
+			}
+			return [when, ev.location, ...eventAttendeeNames(ev)].filter(Boolean).join(' · ')
+		},
+
+		statusOf(ev) {
+			return eventStatusLabel(ev)
+		},
+
+		statusVariantOf(ev) {
+			return eventStatusVariant(ev)
+		},
+
 		/**
 		 * A meeting was made on this object: close the form, read the list again.
 		 *

package/src/integrations/builtin/calendar/CnCalendarTab.vue

@@ -242,6 +242,7 @@ import CnStatusBadge from '../../../components/CnStatusBadge/CnStatusBadge.vue'
 import { buildHeaders, prefixUrl } from '../../../utils/index.js'
 import { userLocale } from '../../../utils/userLocale.js'
 import { linkCalendarEvent } from './calendarEventLink.js'
+import { eventStatusLabel, eventStatusVariant } from './eventStatus.js'
 
 const MAX_AVATARS = 3
 
@@ -542,31 +543,11 @@ export default {
 		},
 
 		statusLabel(ev) {
-			const status = (ev.status || '').toString().toLowerCase()
-			if (status === 'confirmed') {
-				return t('nextcloud-vue', 'Confirmed')
-			}
-			if (status === 'tentative') {
-				return t('nextcloud-vue', 'Tentative')
-			}
-			if (status === 'cancelled') {
-				return t('nextcloud-vue', 'Cancelled')
-			}
-			return ''
+			return eventStatusLabel(ev)
 		},
 
 		statusVariant(ev) {
-			const status = (ev.status || '').toString().toLowerCase()
-			if (status === 'confirmed') {
-				return 'success'
-			}
-			if (status === 'tentative') {
-				return 'warning'
-			}
-			if (status === 'cancelled') {
-				return 'error'
-			}
-			return 'default'
+			return eventStatusVariant(ev)
 		},
 
 		attendeeList(ev) {

package/src/integrations/builtin/calendar/__tests__/CnCalendarCardBoardRows.spec.js

@@ -0,0 +1,52 @@
+/**
+ * CnCalendarCard in the board look on a detail page (DqZaakTaken
+ * "Afspraken"): each meeting is a ruled row with its title, one meta line
+ * (when, where, who) and its status at the end, and "Open in Calendar" is a
+ * link under the rows rather than a card footer.
+ *
+ * @spec openspec/changes/board-deck-calendar-rows/specs/integrations/spec.md
+ */
+
+const { flushPromises, mount } = require('@vue/test-utils')
+
+jest.mock('@nextcloud/router', () => ({ generateUrl: (path) => path }))
+
+const CnCalendarCard = require('../CnCalendarCard.vue').default
+
+const EVENT = { id: 'e1', summary: 'Toelichting stukken', dtstart: '2026-10-14T10:00:00', dtend: '2026-10-14T10:30:00', location: 'stadskantoor, balie 3', attendees: [{ name: 'Sanne de Vries' }], status: 'TENTATIVE' }
+
+function mountCard(look) {
+	global.fetch = jest.fn().mockResolvedValue({ ok: true, json: () => Promise.resolve({ results: [EVENT] }) })
+	return mount(CnCalendarCard, {
+		props: { register: 'reg', schema: 'case', objectId: 'c-1', surface: 'detail-page' },
+		global: { provide: { cnLook: look }, stubs: { NcLoadingIcon: true } },
+	})
+}
+
+describe('CnCalendarCard board rows', () => {
+	afterEach(() => {
+		delete global.fetch
+	})
+
+	it('draws the meeting as a row with its meta line and status, and the link under the rows', async () => {
+		const w = mountCard('board')
+		await flushPromises()
+		const row = w.find('.cn-calendar-card__row')
+		expect(row.find('.cn-calendar-card__row-icon').exists()).toBe(false)
+		const meta = row.find('[data-testid="cn-calendar-card-meta"]').text()
+		expect(meta).toContain('stadskantoor, balie 3')
+		expect(meta).toContain('Sanne de Vries')
+		expect(row.find('[data-testid="cn-calendar-card-status"]').text()).toBe('Tentative')
+		expect(w.find('[data-testid="cn-calendar-card-open"]').exists()).toBe(true)
+		expect(w.find('.cn-detail-card__footer').exists()).toBe(false)
+		w.unmount()
+	})
+
+	it('keeps the icon rows and the footer in the Nextcloud look', async () => {
+		const w = mountCard('nextcloud')
+		await flushPromises()
+		expect(w.find('.cn-calendar-card__row-icon').exists()).toBe(true)
+		expect(w.find('.cn-detail-card__footer').exists()).toBe(true)
+		w.unmount()
+	})
+})

package/src/integrations/builtin/calendar/eventStatus.js

@@ -0,0 +1,63 @@
+/**
+ * SPDX-FileCopyrightText: 2026 Conduction B.V.
+ * SPDX-License-Identifier: EUPL-1.2
+ *
+ * A calendar event's status as a label and a badge tone, shared by the
+ * calendar tab and the calendar card.
+ */
+
+import { translate as t } from '@nextcloud/l10n'
+
+/**
+ * The event's status in words, or '' when it has none the reader needs.
+ *
+ * @param {object} ev The event.
+ * @return {string}
+ */
+export function eventStatusLabel(ev) {
+	const status = String(ev?.status || '').toLowerCase()
+	if (status === 'confirmed') {
+		return t('nextcloud-vue', 'Confirmed')
+	}
+	if (status === 'tentative') {
+		return t('nextcloud-vue', 'Tentative')
+	}
+	if (status === 'cancelled') {
+		return t('nextcloud-vue', 'Cancelled')
+	}
+	return ''
+}
+
+/**
+ * The badge tone of the event's status.
+ *
+ * @param {object} ev The event.
+ * @return {string} `success`, `warning`, `error` or `default`.
+ */
+export function eventStatusVariant(ev) {
+	const status = String(ev?.status || '').toLowerCase()
+	if (status === 'confirmed') {
+		return 'success'
+	}
+	if (status === 'tentative') {
+		return 'warning'
+	}
+	if (status === 'cancelled') {
+		return 'error'
+	}
+	return 'default'
+}
+
+/**
+ * The names of the event's attendees.
+ *
+ * @param {object} ev The event.
+ * @return {Array<string>}
+ */
+export function eventAttendeeNames(ev) {
+	const raw = ev?.attendees || ev?.participants || []
+	if (!Array.isArray(raw)) {
+		return []
+	}
+	return raw.map((att) => (typeof att === 'string' ? att : (att.name || att.displayName || att.cn || att.email || ''))).filter(Boolean)
+}