@conduction/nextcloud-vue 2.97.0 → 2.99.0

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

@@ -152,6 +152,32 @@
 	margin-top: 16px;
 }
 
+/* ---- The stages bars (CnStagesWidget `variant: "bars"`) ---------------- */
+/* DqZaak's "Voortgang": the bars sit flush with the content edge (the
+   widget's 4px pad is room for the 32px circles, which the bars variant does
+   not draw), the label 8px under its bar and the date 8px under the label at
+   the normal line height, open steps muted and the done and current ones in
+   the main text. Each hands its ink to --nldesign-color-on-surface, which a
+   theme that forces the body ink onto every span (thematiq) reads instead. */
+.cn-look-board .cn-stages-widget:has(> .cn-stages-widget__bars):not(.cn-look-nextcloud *) {
+	padding: 0;
+}
+
+.cn-look-board .cn-stages-widget__bars .cn-stages-widget__bar-label:not(.cn-look-nextcloud *) {
+	--nldesign-color-on-surface: var(--color-text-maxcontrast);
+	line-height: normal;
+}
+
+.cn-look-board .cn-stages-widget__bars .cn-stages-widget__bar-step--done .cn-stages-widget__bar-label:not(.cn-look-nextcloud *),
+.cn-look-board .cn-stages-widget__bars .cn-stages-widget__bar-step--current .cn-stages-widget__bar-label:not(.cn-look-nextcloud *) {
+	--nldesign-color-on-surface: var(--color-main-text);
+}
+
+.cn-look-board .cn-stages-widget__bars .cn-stages-widget__bar-date:not(.cn-look-nextcloud *) {
+	--nldesign-color-on-surface: var(--color-text-maxcontrast);
+	line-height: normal;
+}
+
 /* ---- The body and the side column ------------------------------------- */
 
 .cn-look-board.cn-detail-page--with-side {
@@ -185,6 +211,7 @@
    The open tab overlaps that top border by 1px (the nav's -1px margin) and
    paints over it, so it flows into the card as a folder tab. */
 .cn-look-board .cn-tabs--board .cn-tabs__bar {
+	align-items: flex-end;
 	border-bottom: none;
 	gap: 4px;
 	position: relative;
@@ -227,6 +254,9 @@
 	row-gap: 4px;
 }
 
+/* `margin: 0`: a tab is a <button>, and Nextcloud's core stylesheet gives
+   every `button:not(.button-vue)` `margin: 3px 3px 3px 0`, which put the strip
+   3px low and the tabs 7px apart instead of 4 (DqZaak "Zaakonderdelen"). */
 .cn-look-board .cn-tabs--board .cn-tabs__nav-item {
 	background-color: var(--color-background-dark);
 	border: 1px solid var(--color-border-dark);
@@ -234,6 +264,7 @@
 	border-radius: 8px 8px 0 0;
 	font-size: 14px;
 	font-weight: 400;
+	margin: 0;
 	min-height: 34px;
 	padding: 8px 12px;
 }
@@ -267,9 +298,12 @@
 	padding: 0 6px;
 }
 
-/* The Actions button at the end of the strip, level with the tabs. */
+/* The Actions button at the end of the strip: at the top, 8px in from the
+   end and 8px clear of the card, so the tabs, aligned to the bottom, sit 6px
+   lower than the button (DqZaak "Acties"). */
 .cn-look-board .cn-tabs--board .cn-tabs__nav-end {
 	align-self: flex-start;
+	margin: 0 8px 8px 0;
 }
 
 .cn-look-board .cn-tabs--board .cn-tabs__nav-end .button-vue {
@@ -327,21 +361,26 @@
 
 /* ---- Body cards and side cards ----------------------------------------- */
 
+/* A CnDetailCard takes the board card wherever it sits, not only on a detail
+   page: a dashboard or a custom page that mounts one drew the Nextcloud card
+   (a 12px 16px header over a rule). The doubled class keeps the specificity
+   the page-scoped rule had. */
+
 .cn-look-board .cn-detail-page .cn-widget-wrapper,
-.cn-look-board .cn-detail-page .cn-detail-card {
+.cn-look-board .cn-detail-card.cn-detail-card:not(.cn-detail-card--chromeless) {
 	background: var(--color-main-background);
 	border: 1px solid var(--color-border);
 	border-radius: var(--cn-board-card-radius);
 }
 
 .cn-look-board .cn-detail-page .cn-widget-wrapper__header,
-.cn-look-board .cn-detail-page .cn-detail-card__header {
+.cn-look-board .cn-detail-card .cn-detail-card__header {
 	border-bottom: none;
 	padding: 20px 22px 0;
 }
 
 .cn-look-board .cn-detail-page .cn-widget-wrapper__title,
-.cn-look-board .cn-detail-page .cn-detail-card__title {
+.cn-look-board .cn-detail-card .cn-detail-card__title {
 	font-size: var(--cn-board-heading-size);
 	font-weight: 700;
 	line-height: 1.3;
@@ -351,7 +390,7 @@
 	padding: 12px 22px 20px;
 }
 
-.cn-look-board .cn-detail-page .cn-detail-card__content {
+.cn-look-board .cn-detail-card .cn-detail-card__content {
 	padding: 12px 22px 20px;
 }
 
@@ -398,10 +437,12 @@
 	font-weight: 500;
 }
 
-/* Side cards: the heading is a 15px muted label, not a title. */
+/* Side cards: the heading is a 15px muted label, not a title. The tone
+   carries `!important` against a theme that colours every h3 that way
+   (thematiq's heading colour). */
 .cn-look-board .cn-detail-page__side .cn-widget-wrapper__title,
 .cn-look-board .cn-detail-page__side .cn-detail-card__title {
-	color: var(--color-text-maxcontrast);
+	color: var(--color-text-maxcontrast) !important;
 	font-size: var(--cn-board-side-heading-size);
 	font-weight: 600;
 }
@@ -456,17 +497,23 @@
 
 /* ---- The next-step card ------------------------------------------------- */
 
+/* The board sets the card at the browser's normal line height: a step row is
+   the 20px marker, 28px apart (DqZaak "Wat nu?"). */
 .cn-look-board .cn-next-step-card--board {
 	border-radius: 12px;
 	gap: 16px 32px;
+	line-height: normal;
 	padding: 20px 24px 20px 28px;
 }
 
+/* The kicker keeps its tone under a theme that colours every h3 with
+   `!important` (thematiq's heading colour); only `!important` beats it. */
 .cn-look-board .cn-next-step-card--board .cn-next-step-card__title.cn-next-step-card__title {
-	color: var(--color-primary-element-light-text);
+	color: var(--color-primary-element-light-text) !important;
 	font-size: 13px !important;
 	font-weight: 700;
 	letter-spacing: 0.06em;
+	line-height: normal;
 	text-transform: uppercase;
 }
 
@@ -497,11 +544,36 @@
 	padding: 0 20px;
 }
 
+/* The label alone sets the width (DqZaak: 198px for "Verder met beoordelen"):
+   NcButton pads its text 4px a side inside the button's own padding, from a
+   rule that reaches it through `:has()`, hence the doubled class. */
+.cn-look-board .cn-next-step-card--board .cn-next-step-card__side .button-vue .button-vue__text.button-vue__text {
+	margin-inline: 0;
+	padding-inline: 0;
+}
+
 .cn-look-board .cn-next-step-card--board .cn-next-step-card__after {
 	color: var(--color-text-maxcontrast);
 	font-size: 13px;
 }
 
+/* Done and open steps are muted, the current one in the main text. Each hands
+   its ink to --nldesign-color-on-surface, which a theme that forces the body
+   ink onto every li and span (thematiq) reads instead. */
+.cn-look-board .cn-next-step-card--board .cn-next-step-card__item,
+.cn-look-board .cn-next-step-card--board .cn-next-step-card__hint,
+.cn-look-board .cn-next-step-card--board .cn-next-step-card__after {
+	--nldesign-color-on-surface: var(--color-text-maxcontrast);
+}
+
+.cn-look-board .cn-next-step-card--board .cn-next-step-card__item--current {
+	--nldesign-color-on-surface: var(--color-main-text);
+}
+
+.cn-look-board .cn-next-step-card--board .cn-next-step-card__item--current .cn-next-step-card__hint {
+	--nldesign-color-on-surface: var(--color-text-maxcontrast);
+}
+
 /* ---- History: the activity tab ------------------------------------------ */
 
 .cn-look-board .cn-activity-tab--board .cn-activity-tab__board-head {

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

@@ -184,10 +184,15 @@
 	outline-offset: 2px;
 }
 
+/* The selected chip is light on dark, so it hands its ink to
+   --nldesign-color-on-surface: thematiq forces the body ink onto every span
+   with `!important` and reads it from that property, which left the label
+   dark on dark. */
 .cn-look-board .cn-saved-views__chips .cn-saved-views__chip--selected,
 .cn-look-board .cn-saved-views__chips .cn-saved-views__chip--selected:hover,
 .cn-look-board .cn-quick-filter-bar .cn-quick-filter-bar__tab--active,
 .cn-look-board .cn-quick-filter-bar .cn-quick-filter-bar__tab--active:hover {
+	--nldesign-color-on-surface: var(--color-main-background);
 	border-color: transparent;
 	background: var(--color-main-text);
 	color: var(--color-main-background);
@@ -208,8 +213,12 @@
 }
 
 .cn-look-board .cn-saved-views__chip--selected .cn-saved-views__chip-count,
+/* On the selected chip the count is a lighter bubble on the dark chip
+   (DqZaken: #3d4047 on #1b1c1d); --cn-board-text-soft resolves to the main
+   text, the chip's own colour, which hid the bubble. */
 .cn-look-board .cn-quick-filter-bar .cn-quick-filter-bar__tab--active .cn-quick-filter-bar__count {
-	background: var(--cn-board-text-soft);
+	--nldesign-color-on-surface: var(--color-primary-element-text);
+	background: color-mix(in srgb, var(--color-main-background) 15%, var(--color-main-text));
 	color: var(--color-primary-element-text);
 }
 
@@ -481,12 +490,16 @@
 	border-radius: 0;
 }
 
-/* The header row is near-white on the boards (#fafbfc), not the hover grey. */
+/* The header row is near-white on the boards (#fafbfc), not the hover grey,
+   its labels 14px muted. The ink also goes to --nldesign-color-on-surface,
+   which a theme that forces the body ink onto every span (thematiq) reads. */
 .cn-look-board .cn-table-container--board .cn-data-table th {
+	--nldesign-color-on-surface: var(--color-text-maxcontrast);
 	padding: 12px 16px;
 	border-bottom: 0;
 	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;
 }
 
@@ -497,6 +510,20 @@
 	font-size: 14px;
 }
 
+/* The board sets its table at the normal line height: a row with a title and
+   a secondary line is 66px and the header row 50px (DqZaken). Nextcloud's 1.5
+   made them 71px and 67px, and the header's sort button kept the 34px
+   clickable area. */
+.cn-look-board .cn-table-container--board .cn-data-table {
+	line-height: normal;
+}
+
+.cn-look-board .cn-table-container--board .cn-data-table th .cn-table-header__sort {
+	min-height: 0;
+	height: auto;
+	line-height: inherit;
+}
+
 .cn-look-board .cn-table-container--board .cn-data-table .cn-table-row {
 	border-bottom: 0;
 }
@@ -552,7 +579,9 @@
 	margin-inline-start: 4px;
 }
 
-/* The selection column: 18px checkboxes, 28px of content after 16px of padding.
+/* The selection column: 18px checkboxes, 28px of content between 16px of
+   padding either side, 60px in all (DqZaken and 130 other boards; the title
+   column starts 77px in).
    The box model is set with `!important` and the widths include the padding:
    Nextcloud's server.css sets `box-sizing: border-box` on everything under
    `#content[class*="app-"]`, an id selector no class rule outranks, so a plain
@@ -560,9 +589,9 @@
    header's checkbox showed as a stray bracket). */
 .cn-look-board .cn-table-container--board .cn-data-table .cn-table-col--checkbox {
 	box-sizing: border-box !important;
-	width: 44px;
-	min-width: 44px;
-	padding-inline: 16px 0;
+	width: 60px;
+	min-width: 60px;
+	padding-inline: 16px;
 	text-align: start;
 }
 
@@ -570,6 +599,16 @@
 	--icon-size: 18px;
 }
 
+/* The checkbox is the 18px box alone, as the board draws it: NcCheckboxRadioSwitch
+   wraps it in a 34px clickable area with 4px 7px of padding, a 42px block that
+   set every row's height (71px where DqZaken's rows are 66). The cell around it
+   stays the click target's room: 44px wide, a full row high. */
+.cn-look-board .cn-table-container--board .cn-data-table .checkbox-radio-switch .checkbox-radio-switch__content {
+	min-height: 0;
+	height: auto;
+	padding: 0;
+}
+
 /* The title column: a 15px weight 600 link, the secondary line under it. */
 .cn-look-board .cn-table-container--board .cn-data-table td.cn-table-col--title {
 	color: var(--color-main-text);
@@ -580,6 +619,7 @@
 }
 
 .cn-look-board .cn-table-container--board .cn-data-table td.cn-table-col--title .cn-table-cell__secondary {
+	--nldesign-color-on-surface: var(--color-text-maxcontrast);
 	color: var(--color-text-maxcontrast);
 	font-size: 14px;
 	font-weight: 400;
@@ -621,10 +661,14 @@
 	gap: 10px;
 }
 
+/* The initials sit on the light primary tint in the primary ink, the board's
+   person chip (DqZaken's Behandelaar, and most boards' people). */
 .cn-look-board .cn-table-container--board .cn-data-table .cn-cell-renderer__avatar-initials {
-	background: var(--color-background-dark);
-	color: var(--color-main-text);
+	--nldesign-color-on-surface: var(--color-primary-element-light-text);
+	background: var(--color-primary-element-light);
+	color: var(--color-primary-element-light-text);
 	font-size: 12px;
+	font-weight: 700;
 }
 
 .cn-look-board .cn-table-container--board .cn-data-table td.cn-table-col--title .cn-cell-renderer__avatar-name {

package/src/css/look-board.css

@@ -141,6 +141,50 @@
 	color: var(--color-primary-element-text);
 }
 
+/* ---- Header action buttons (CnActionButtons) ----------------------------- */
+/* The board draws a page's secondary actions as neutral 40px buttons: the
+   main background, a grey border, the main text at 600 (DqZaak "Bericht",
+   "Document", "Contact vastleggen", "Bewerken"). Nextcloud's secondary button
+   is a primary tint. The label hands its ink to --nldesign-color-on-surface,
+   which a theme that forces the body ink onto every span (thematiq) reads. */
+.cn-look-board .cn-action-buttons .button-vue--secondary:not(.cn-look-nextcloud *),
+.cn-look-board .cn-action-buttons .button-vue--vue-secondary:not(.cn-look-nextcloud *) {
+	--nldesign-color-on-surface: var(--color-main-text);
+	height: var(--cn-board-control-height);
+	min-height: var(--cn-board-control-height);
+	padding: 0 14px;
+	border: 1px solid var(--color-border-dark);
+	border-radius: var(--cn-board-control-radius);
+	background: var(--color-main-background);
+	color: var(--color-main-text);
+	font-size: 14px;
+	font-weight: 600;
+}
+
+/* Buttons 10px apart, each icon 16px with 8px to its label (DqZaak's header,
+   DqZaken's "Downloaden"); NcButton draws a 20px icon in a 30px slot. */
+.cn-look-board .cn-action-buttons:not(.cn-look-nextcloud *) {
+	gap: 10px;
+}
+
+.cn-look-board .cn-action-buttons .button-vue .button-vue__icon:not(.cn-look-nextcloud *) {
+	width: 16px;
+	min-width: 16px;
+	height: 16px;
+	min-height: 16px;
+	margin-inline-end: 8px;
+}
+
+.cn-look-board .cn-action-buttons .button-vue .button-vue__icon:not(.cn-look-nextcloud *) svg {
+	width: 16px;
+	height: 16px;
+}
+
+.cn-look-board .cn-action-buttons .button-vue--secondary:not(.cn-look-nextcloud *):hover,
+.cn-look-board .cn-action-buttons .button-vue--vue-secondary:not(.cn-look-nextcloud *):hover {
+	background: var(--color-background-hover);
+}
+
 /* ---- The buildiq square ------------------------------------------------ */
 .cn-look-board .cn-buildiq-edit .cn-buildiq-edit__actions .button-vue {
 	box-sizing: border-box;
@@ -153,6 +197,34 @@
 	border-radius: var(--cn-board-control-radius);
 }
 
+/* ---- The Actions menu trigger (CnActionsMenu) ---------------------------- */
+/* A menu asked for as `secondary` ("Meer" in a detail header, "Acties" at the
+   end of a tab strip) is the board's neutral control: the main background, a
+   grey border, the main text at 600 (DqZaak), not Nextcloud's primary tint.
+   NcActions marks a secondary menu `action-item--secondary` on its root and
+   keeps a class given to it off, so the rule reads that marker. The label
+   hands its ink to --nldesign-color-on-surface for a theme that forces the
+   body ink onto every span (thematiq). */
+.cn-look-board .action-item.action-item--secondary .action-item__menutoggle.button-vue--secondary:not(.cn-look-nextcloud *) {
+	--nldesign-color-on-surface: var(--color-main-text);
+	border: 1px solid var(--color-border-dark);
+	border-radius: var(--cn-board-control-radius);
+	background: var(--color-main-background);
+	color: var(--color-main-text);
+	font-size: 14px;
+	font-weight: 600;
+}
+
+.cn-look-board .action-item.action-item--secondary .action-item__menutoggle.button-vue--secondary:not(.cn-look-nextcloud *):hover {
+	background: var(--color-background-hover);
+}
+
+/* A trailing chevron ("Meer ⌄") follows the label, 6px after it. */
+.cn-look-board .action-item.action-item--secondary .action-item__menutoggle:has(.chevron-down-icon) .button-vue__wrapper:not(.cn-look-nextcloud *) {
+	flex-direction: row-reverse;
+	gap: 6px;
+}
+
 /* ---- The navigation ---------------------------------------------------- */
 .cn-look-board .app-navigation[data-testid="cn-nav"] {
 	--app-navigation-padding: 0px;
@@ -374,6 +446,71 @@
 	font-weight: 600;
 }
 
+/* ---- Breadcrumbs (CnBreadcrumbs) ----------------------------------------- */
+/* The board draws a trail as a line of 14px text, 8px apart: the crumbs that
+   lead somewhere as underlined links in the primary colour, the current one
+   as plain muted text (DqZaak "Alle zaken / 2026-0082"). NcBreadcrumbs draws
+   each crumb as a 34px tertiary button. The doubled classes outrank its
+   scoped rules; the ink goes through --nldesign-color-on-surface as well, for
+   a theme that forces the body ink onto every link and span (thematiq). */
+.cn-look-board .cn-breadcrumbs.cn-breadcrumbs:not(.cn-look-nextcloud *) {
+	min-height: 0;
+	height: auto;
+	color: var(--color-text-maxcontrast);
+	font-size: 14px;
+	line-height: normal;
+}
+
+.cn-look-board .cn-breadcrumbs .breadcrumb__crumbs:not(.cn-look-nextcloud *) {
+	gap: 8px;
+	min-height: 0;
+	margin: 0;
+	padding: 0;
+}
+
+.cn-look-board .cn-breadcrumbs .vue-crumb.vue-crumb:not(.cn-look-nextcloud *) {
+	gap: 8px;
+	min-width: 0;
+	min-height: 0;
+	height: auto;
+}
+
+.cn-look-board .cn-breadcrumbs .vue-crumb .button-vue.button-vue:not(.cn-look-nextcloud *) {
+	--nldesign-color-on-surface: var(--color-primary-element);
+	min-width: 0;
+	min-height: 0;
+	height: auto;
+	padding: 0;
+	border: 0;
+	background: transparent;
+	color: var(--color-primary-element);
+	font-size: 14px;
+	font-weight: 400;
+	line-height: inherit;
+}
+
+.cn-look-board .cn-breadcrumbs .vue-crumb .button-vue.button-vue:not(.cn-look-nextcloud *) .button-vue__text {
+	padding: 0;
+	font-weight: inherit;
+	line-height: inherit;
+	text-decoration: underline;
+}
+
+.cn-look-board .cn-breadcrumbs .vue-crumb .button-vue.button-vue[aria-current='page']:not(.cn-look-nextcloud *) {
+	--nldesign-color-on-surface: var(--color-text-maxcontrast);
+	color: var(--color-text-maxcontrast);
+	cursor: default;
+}
+
+.cn-look-board .cn-breadcrumbs .vue-crumb .button-vue.button-vue[aria-current='page']:not(.cn-look-nextcloud *) .button-vue__text {
+	text-decoration: none;
+}
+
+.cn-look-board .cn-breadcrumbs .vue-crumb__separator:not(.cn-look-nextcloud *) {
+	margin: 0;
+	color: var(--color-text-maxcontrast);
+}
+
 /* ---- Settings: header, cards in a grid, version card ------------------- */
 .cn-look-board .cn-admin-settings-shell__header:not(.cn-look-nextcloud *),
 .cn-look-board .cn-settings-page__header:not(.cn-look-nextcloud *) {
@@ -792,7 +929,26 @@
    ground ("Verzoek", "Nieuw"); the default look keeps the brighter
    primary-element text. The other tones already match the board. */
 .cn-look-board .cn-status-badge--primary:not(.cn-status-badge--solid):not(.cn-look-nextcloud *) {
-	color: var(--color-primary-element-light-text);
+	--cn-status-badge-ink: var(--color-primary-element-light-text);
+	color: var(--cn-status-badge-ink);
+}
+
+/* Every board pill is 13px at 600 on a 3px 10px pad with a 12px corner
+   (DqZaak's header pills, DqZaken's status column). */
+.cn-look-board .cn-status-badge:not(.cn-status-badge--small):not(.cn-look-nextcloud *) {
+	padding: 3px 10px;
+	border-radius: 12px;
+	font-size: 13px;
+	font-weight: 600;
+	line-height: normal;
+}
+
+/* A pill paints its own pairing of ink and fill. A theme that forces the body
+   ink onto every span (thematiq's text rule, `!important` at id level) reads
+   that ink from --nldesign-color-on-surface when the surface sets it, so the
+   pill hands it its own ink: "In behandeling" stays purple on purple. */
+.cn-look-board .cn-status-badge:not(.cn-look-nextcloud *) {
+	--nldesign-color-on-surface: var(--cn-status-badge-ink);
 }
 
 /* ---- Date and age cells (screens-cell-date-parity) ---------------------- */
@@ -802,6 +958,68 @@
 	font-weight: 600;
 }
 
+/* ---- Label and value pairs (CnDetailGrid) -------------------------------- */
+/* The board draws pairs as plain text, not as grey cards with an accent bar:
+   the grid as a 13px muted label over a 15px value at weight 500 with a
+   hairline under each pair (DqZaak "Zaakgegevens"), the horizontal layout as
+   two columns of 14px text, the label column as wide as its longest label
+   (the side cards). Both at the board's line height, 1.2, not Nextcloud's 1.5:
+   a pair is 47px tall on the board. The muted label also hands its ink to
+   --nldesign-color-on-surface, which a theme that forces the body ink onto
+   every div (thematiq) reads. */
+.cn-look-board .cn-detail-grid.cn-detail-grid--grid:not(.cn-look-nextcloud *) {
+	gap: 12px 24px;
+	font-size: 15px;
+}
+
+.cn-look-board .cn-detail-grid.cn-detail-grid--horizontal:not(.cn-look-nextcloud *) {
+	display: grid;
+	grid-template-columns: max-content 1fr;
+	gap: 8px 16px;
+	font-size: 14px;
+}
+
+.cn-look-board .cn-detail-grid .cn-detail-grid__item:not(.cn-look-nextcloud *) {
+	gap: 3px;
+	padding: 0;
+	border-inline-start: none;
+	border-radius: 0;
+	background: none;
+}
+
+.cn-look-board .cn-detail-grid.cn-detail-grid--grid .cn-detail-grid__item:not(.cn-look-nextcloud *) {
+	padding-bottom: 10px;
+	border-bottom: 1px solid var(--cn-board-hairline);
+}
+
+.cn-look-board .cn-detail-grid.cn-detail-grid--horizontal .cn-detail-grid__item:not(.cn-look-nextcloud *) {
+	display: contents;
+}
+
+.cn-look-board .cn-detail-grid .cn-detail-grid__label:not(.cn-look-nextcloud *) {
+	--nldesign-color-on-surface: var(--color-text-maxcontrast);
+	min-width: 0;
+	color: var(--color-text-maxcontrast);
+	font-size: 13px;
+	font-weight: 400;
+	line-height: 1.2;
+}
+
+.cn-look-board .cn-detail-grid.cn-detail-grid--horizontal .cn-detail-grid__label:not(.cn-look-nextcloud *) {
+	font-size: inherit;
+}
+
+.cn-look-board .cn-detail-grid .cn-detail-grid__value:not(.cn-look-nextcloud *) {
+	margin: 0;
+	font-size: inherit;
+	font-weight: 500;
+	line-height: 1.2;
+}
+
+.cn-look-board .cn-detail-grid.cn-detail-grid--horizontal .cn-detail-grid__value:not(.cn-look-nextcloud *) {
+	font-weight: 400;
+}
+
 /* ---- Dashboard card titles --------------------------------------------- */
 /* A card's title on a dashboard (and on the widgets under a reports page) is
    the board's card h2: 17px weight 700 (boards PqMijnWerk, DcRapportages and

package/src/index.js

@@ -59,6 +59,7 @@ export {
 	CnChartWidget,
 	CnChartWidgetForm,
 	CnChatPage,
+	CnChecklistRunWidget,
 	CnChildRecordsField,
 	CnChipsFieldWidget,
 	CnChoiceCards,
@@ -236,6 +237,7 @@ export {
 	CnObjectRow,
 	CnObjectSidebar,
 	CnOfflineQueue,
+	CnOrderedListField,
 	CnPageHeader,
 	CnPageRenderer,
 	CnPagination,
@@ -278,6 +280,8 @@ export {
 	CnSearchPage,
 	CnSectionsWidget,
 	CnSettingsCard,
+	CnSettingsField,
+	CnSettingsFieldsSection,
 	CnSettingsFormWidget,
 	CnSettingsPage,
 	CnSettingsSection,
@@ -342,6 +346,7 @@ export {
 	CnWidgetVisibilityRulesModal,
 	CnWidgetWrapper,
 	CnWizardDialog,
+	CnWorkingCalendarWidget,
 	CnWorkspaceFilterWidget,
 	DEFAULT_DATE_RANGE_PRESETS,
 	defaultPageTypes,

package/src/schemas/app-manifest-v2.schema.json

@@ -3,7 +3,7 @@
 	"$id": "https://raw.githubusercontent.com/ConductionNL/nextcloud-vue/main/src/schemas/app-manifest-v2.schema.json",
 	"title": "Conduction App Manifest v2",
 	"description": "v2 schema for the JSON-driven page and navigation manifest consumed by @conduction/nextcloud-vue. Introduces a uniform widgets[] array on every page type with a per-slot grid coordinate system, a typed actions[] discriminator, and the required $schema field for version detection. v1 manifests continue to validate against app-manifest.schema.json (unchanged).",
-	"version": "2.121.0",
+	"version": "2.122.0",
 	"type": "object",
 	"required": ["$schema", "version"],
 	"allOf": [
@@ -1296,6 +1296,7 @@
 						"filter": { "type": "object", "additionalProperties": true }
 					}
 				},
+				"resolve": { "type": "object", "additionalProperties": false, "required": ["register", "schema"], "description": "detail-pill-resolve: the field holds the id of a record of this register and schema; the pill shows that record's `labelField` (else its title or name) and keys `colorMap` by it. The raw value shows while the lookup runs and when it finds nothing.", "properties": { "register": { "type": "string", "minLength": 1 }, "schema": { "type": "string", "minLength": 1 }, "labelField": { "type": "string", "minLength": 1 } } },
 				"countLabel": {
 					"type": "object",
 					"additionalProperties": false,
@@ -2229,6 +2230,35 @@
 											"columnKeys": { "type": "array", "items": { "type": ["string", "number"] } }
 										}
 									},
+									"cellSource": {
+										"type": "object",
+										"additionalProperties": false,
+										"required": ["register", "schema", "rowField", "columnField", "valueField"],
+										"description": "chartKind 'matrix': read the cells from records that each hold one cell. The records are listed from register/schema with `filter` (tokens such as '@object.matrixVersion' resolved; the list waits while one is unresolved), then laid out by rowField / columnField with valueField as the cell. Labels come from rowLabels / columnLabels maps or rowLabelField / columnLabelField; order from rowOrder / columnOrder lists, else rowOrderField / columnOrderField, else natural order. valueLabels maps a stored value to the text shown; colorMap may key on either. With cellsPath the matrix sits inside ONE record: the first record filter finds (else fallbackFilter), its array at cellsPath narrowed by cellFilter (tokens allowed), and the axis order from rowOrderPath / columnOrderPath on that record. Wins over series / categories.",
+										"properties": {
+											"register": { "type": "string" },
+											"schema": { "type": "string" },
+											"filter": { "type": "object", "additionalProperties": true },
+											"rowField": { "type": "string" },
+											"columnField": { "type": "string" },
+											"valueField": { "type": "string" },
+											"rowLabelField": { "type": "string" },
+											"columnLabelField": { "type": "string" },
+											"rowLabels": { "type": "object", "additionalProperties": { "type": "string" } },
+											"columnLabels": { "type": "object", "additionalProperties": { "type": "string" } },
+											"valueLabels": { "type": "object", "additionalProperties": { "type": "string" } },
+											"rowOrder": { "type": "array", "items": { "type": ["string", "number"] } },
+											"columnOrder": { "type": "array", "items": { "type": ["string", "number"] } },
+											"rowOrderField": { "type": "string" },
+											"columnOrderField": { "type": "string" },
+											"limit": { "type": "integer", "minimum": 1 },
+											"cellsPath": { "type": "string", "description": "Path of the cells array inside the one record the source finds." },
+											"cellFilter": { "type": "object", "additionalProperties": true, "description": "Equality filter on the cells of that record, e.g. { actorType: '@object.actorType' }." },
+											"fallbackFilter": { "type": "object", "additionalProperties": true, "description": "Filter used when `filter` finds no record, e.g. { active: true }." },
+											"rowOrderPath": { "type": "string", "description": "Path of an array on that record giving the row order." },
+											"columnOrderPath": { "type": "string", "description": "Path of an array on that record giving the column order." }
+										}
+									},
 									"endpointSource": {
 										"$ref": "#/$defs/chartEndpointSource",
 										"description": "Wave 2 (#91): endpoint-bound series/labels — the shared endpoint transport plus the labelsPath / series[] {name, path} response mapping. Exactly one of dataSource | endpointSource (post-schema check)."
@@ -3702,8 +3732,8 @@
 						},
 						"entitySource": {
 							"type": "string",
-							"enum": ["flows", "flowRuns", "tasks", "endpoint", "search", "users"],
-							"description": "Name a registered NON-OBJECT entity collection for a type='index' page, instead of register+schema. Deliberately NOT called `source`: that key is already taken on page config and is polymorphic (a URL string in some manifests, an object with `params` in others), so reusing it would give one key two meanings and break six deployed shillinq pages. A flow definition is deliberately not an OpenRegister object, so an index had nothing to bind to and such lists became bespoke type='custom' pages. With a source the index loads the list itself. Takes precedence over register/schema; non-empty `objects` still wins over both. Registered sources live in src/composables/indexSources.js. `tasks` lists the viewer's task inbox from OpenRegister's flow-tasks read (cn-tasks-entity-source)."
+							"enum": ["flows", "flowRuns", "tasks", "endpoint", "search", "users", "organisations"],
+							"description": "Name a registered NON-OBJECT entity collection for a type='index' page, instead of register+schema. Deliberately NOT called `source`: that key is already taken on page config and is polymorphic (a URL string in some manifests, an object with `params` in others), so reusing it would give one key two meanings and break six deployed shillinq pages. A flow definition is deliberately not an OpenRegister object, so an index had nothing to bind to and such lists became bespoke type='custom' pages. With a source the index loads the list itself. Takes precedence over register/schema; non-empty `objects` still wins over both. Registered sources live in src/composables/indexSources.js. `tasks` lists the viewer's task inbox from OpenRegister's flow-tasks read (cn-tasks-entity-source). `organisations` lists the OpenRegister organisations the viewer belongs to. On a type='detail' page a source that reads one record (today `organisations`) loads the record whose id is the route's objectId, instead of register+schema, and feeds the header, pills, widgets and @objectId / @object.* tokens like a fetched object (organisations-entity-source)."
 						},
 						"sourceConfig": { "type": "object", "additionalProperties": true, "description": "type='index' with `entitySource`: what the named source loads with. `endpoint`: `url` (an app path, required) and `rowsPath` (default `results`); its other keys go along as query parameters. `search`: `kinds` (`{ id, label, register, schema, titleField?, subtitleField?, statusField?, href?, limit? }` or `{ id, label, files: true }`), `term` and `termQuery` (default `q`). `users`: `defaultGroup`, `functionField`, `rolesField`. `flows` / `tasks`: `app`, `scope`. Maps to CnIndexPage `sourceConfig`.", "properties": { "url": { "type": "string", "minLength": 1 }, "rowsPath": { "type": "string", "minLength": 1 }, "kinds": { "type": "array", "items": { "type": "object", "required": ["id"], "additionalProperties": true, "properties": { "id": { "type": "string", "minLength": 1 }, "label": { "type": "string" }, "register": { "type": "string" }, "schema": { "type": "string" }, "files": { "type": "boolean" } } } }, "term": { "type": "string" }, "termQuery": { "type": "string", "minLength": 1 }, "defaultGroup": { "type": "string", "minLength": 1 } } },
 						"app": {