@conduction/nextcloud-vue 2.56.0-beta.65 → 2.56.0-beta.67

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

@@ -20,6 +20,12 @@
 	/* Card h2 and side heading. */
 	--cn-board-heading-size: 17px;
 	--cn-board-side-heading-size: 15px;
+	/* The boards set text at the font's normal line height (1.2 for Fira
+	   Sans), Nextcloud at 1.5: a card body's first line carries this much
+	   half-leading above its glyphs that a board does not draw. A gap the
+	   boards measure from a title to the text under it is the board's value
+	   minus this. Resolved in the element that uses it. */
+	--cn-board-first-line-leading: 0.15em;
 }
 
 /* ---- The header: two rows on the ground ------------------------------- */
@@ -212,24 +218,27 @@
    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. */
+   the main text. Each sets its ink as `color`, and also hands it to
+   --nldesign-color-on-surface for a theme that still forces the body ink. */
 .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);
+	color: 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);
+	color: 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);
+	color: var(--color-text-maxcontrast);
 	line-height: normal;
 }
 
@@ -367,13 +376,15 @@
    The nldesign theme sets every button's weight and radius with `!important`
    through its button tokens, which drew every tab bold with four rounded
    corners; the tab hands the board's values to those tokens. A tab is 37px
-   with or without a count (DqZaak), not 34px without one.
+   with or without a count (DqZaak), not 34px without one. Its outline is
+   the widget card's border, so tab and card meet in one line.
+   @spec openspec/changes/board-tabs-widget-border/specs/board-tabs-widget-border/spec.md#requirement-board-folder-tabs-draw-the-widget-card-border
    @spec openspec/changes/board-tabs-theme/specs/board-tabs-theme/spec.md#requirement-board-folder-tabs-keep-the-boards-weight-shape-and-height-under-a-theme */
 .cn-look-board .cn-tabs--board .cn-tabs__nav-item {
 	--nldesign-component-button-font-weight: 400;
 	--nldesign-component-button-border-radius: 8px 8px 0 0;
 	background-color: var(--color-background-dark);
-	border: 1px solid var(--color-border-dark);
+	border: 1px solid var(--color-border);
 	border-bottom: none;
 	border-radius: 8px 8px 0 0;
 	font-size: 14px;
@@ -388,7 +399,7 @@
 	--nldesign-component-button-font-weight: 700;
 	background-color: var(--color-main-background);
 	border-bottom: 1px solid var(--color-main-background);
-	border-top: 1px solid var(--color-border-dark);
+	border-top: 1px solid var(--color-border);
 	font-weight: 700;
 	min-height: 38px;
 	padding-bottom: 9px;
@@ -499,15 +510,17 @@
 .cn-look-board .cn-detail-card .cn-detail-card__title {
 	font-size: var(--cn-board-heading-size);
 	font-weight: 700;
-	line-height: 1.3;
+	line-height: normal;
 }
 
+/* 12px from the title's glyphs to the first line's glyphs, as drawn.
+   @spec openspec/changes/board-card-title-gap/specs/board-card-title-gap/spec.md#requirement-a-board-cards-body-starts-the-boards-gap-below-its-title */
 .cn-look-board .cn-detail-page .cn-widget-wrapper__content {
-	padding: 12px 22px 20px;
+	padding: calc(12px - var(--cn-board-first-line-leading)) 22px 20px;
 }
 
 .cn-look-board .cn-detail-card .cn-detail-card__content {
-	padding: 12px 22px 20px;
+	padding: calc(12px - var(--cn-board-first-line-leading)) 22px 20px;
 }
 
 /* A header-less card keeps the full 20px 22px. */
@@ -515,13 +528,18 @@
 	padding: var(--cn-board-card-padding);
 }
 
-/* The data card: 200px columns, a 12px 24px gap, label over value, hairline. */
-.cn-look-board .cn-object-data-widget__grid {
+/* The data card: 200px columns, a 12px 24px gap, label over value, hairline.
+   Each selector holds one class more than the component's scoped rule
+   (`.cn-object-data-widget__cell[data-v-...]`), which loads after this sheet:
+   at equal specificity the cell kept its 8px top padding and the grid its 8px
+   gap, so the first label sat 8px further below the card's title.
+   @spec openspec/changes/board-card-title-gap/specs/board-card-title-gap/spec.md#requirement-the-data-cards-grid-keeps-the-boards-gap-and-cell-padding */
+.cn-look-board .cn-object-data-widget__grid-wrap .cn-object-data-widget__grid {
 	font-size: 15px;
 	gap: 12px 24px;
 }
 
-.cn-look-board .cn-object-data-widget__cell {
+.cn-look-board .cn-object-data-widget__grid .cn-object-data-widget__cell {
 	border-bottom: 1px solid var(--cn-board-hairline);
 	gap: 2px;
 	padding: 0 0 10px;
@@ -569,7 +587,7 @@
 }
 
 .cn-look-board .cn-detail-page__side .cn-widget-wrapper__content {
-	padding: 10px 22px 20px;
+	padding: calc(10px - var(--cn-board-first-line-leading)) 22px 20px;
 }
 
 /* A stat tile in a side card (DqZaak "Termijn") sits on the card's inset as
@@ -686,21 +704,24 @@
 	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. */
+/* Done and open steps are muted, the current one in the main text. Each sets
+   its ink as `color`, and also hands it to --nldesign-color-on-surface for a
+   theme that still forces the body ink. */
 .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);
+	color: 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);
+	color: 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);
+	color: var(--color-text-maxcontrast);
 }
 
 /* ---- History: the activity tab ------------------------------------------ */

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

@@ -205,15 +205,11 @@
 	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. */
+/* The selected chip is light 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);
@@ -226,7 +222,6 @@
 	padding: 1px 7px;
 	border: 0;
 	border-radius: 10px;
-	--nldesign-color-on-surface: var(--cn-board-text-soft);
 	background: var(--color-border);
 	color: var(--cn-board-text-soft);
 	font-size: 12px;
@@ -240,14 +235,15 @@
 /* On the selected chip the count is the soft ink as a lighter bubble on the
    dark chip (DqZaken: #3d4047 on #1b1c1d). */
 .cn-look-board .cn-quick-filter-bar .cn-quick-filter-bar__tab--active .cn-quick-filter-bar__count {
-	--nldesign-color-on-surface: var(--color-primary-element-text);
 	background: var(--cn-board-text-soft);
 	color: var(--color-primary-element-text);
 }
 
 /* Save view: a ghost button, 34px, radius 17, no border, on the light primary
-   tint, a 14px icon 6px before the label, on one line. */
+   tint, a 14px icon 6px before the label, on one line. The label is a span,
+   so its ink also goes to --nldesign-color-on-surface. */
 .cn-look-board .cn-saved-views__save .button-vue {
+	--nldesign-color-on-surface: var(--color-primary-element-light-text);
 	min-height: 34px;
 	height: 34px;
 	padding: 0 12px;
@@ -288,6 +284,7 @@
    @spec openspec/changes/board-toolbar-buttons-theme/specs/board-toolbar-buttons-theme/spec.md#requirement-board-toolbar-buttons-are-neutral-under-a-theme */
 .cn-look-board .cn-actions-bar:not(.cn-look-nextcloud *) {
 	--nldesign-component-button-font-weight: 600;
+	--nldesign-component-button-color: var(--color-main-text);
 	--nldesign-component-button-secondary-action-color: var(--color-main-text);
 	--nldesign-component-button-secondary-action-background-color: var(--color-main-background);
 	--nldesign-component-button-secondary-action-border-color: var(--cn-board-control-border);
@@ -317,8 +314,6 @@
 	margin-inline-start: 6px;
 	padding: 0 6px;
 	border-radius: 10px;
-	/* A theme that forces the body ink onto every span reads it from here. */
-	--nldesign-color-on-surface: var(--color-primary-element-text);
 	background: var(--color-primary-element);
 	color: var(--color-primary-element-text);
 	font-size: 12px;
@@ -437,7 +432,10 @@
 	font-size: 14px;
 }
 
+/* An active filter: the light primary tint, its label (a span) in the tint's
+   ink through --nldesign-color-on-surface too. */
 .cn-look-board .cn-actions-bar--board .cn-actions-bar__filter-chip {
+	--nldesign-color-on-surface: var(--color-primary-element-light-text);
 	display: inline-flex;
 	align-items: center;
 	gap: 6px;
@@ -545,15 +543,13 @@
 }
 
 /* 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.
+   its labels 14px muted.
    The nldesign theme paints every `th` with `!important` through its table
    header tokens, and the sort button in it through its button weight token
    (bold), so the cell hands the board's ground, ink and weight to those
    tokens too.
    @spec openspec/changes/board-table-head-theme/specs/board-table-head-theme/spec.md#requirement-a-board-table-header-keeps-the-boards-ground-ink-and-weight-under-a-theme */
 .cn-look-board .cn-table-container--board .cn-data-table th {
-	--nldesign-color-on-surface: var(--color-text-maxcontrast);
 	--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;
@@ -581,9 +577,13 @@
 	line-height: normal;
 }
 
+/* The sort button is the bare label, square (the boards draw no box round
+   it); the funnel after it is a 22px button with a 4px radius. Both outrank
+   the 8px element radius the table and Nextcloud's `button` rule give them. */
 .cn-look-board .cn-table-container--board .cn-data-table th .cn-table-header__sort {
 	min-height: 0;
 	height: auto;
+	border-radius: 0;
 	line-height: inherit;
 }
 
@@ -639,6 +639,7 @@
 	min-width: 22px;
 	height: 22px;
 	min-height: 22px;
+	border-radius: 4px;
 	margin-inline-start: 4px;
 }
 
@@ -682,7 +683,6 @@
 }
 
 .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;
@@ -727,7 +727,6 @@
 /* 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 {
-	--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;
@@ -847,6 +846,8 @@
 	margin-inline-start: auto;
 }
 
+/* A page link is a <button>: Nextcloud's `button` rule sets it bold, the
+   boards set the links at the regular weight and only the current page at 600. */
 .cn-look-board .cn-pagination--board .cn-pagination__board-link {
 	box-sizing: border-box;
 	min-width: 34px;
@@ -859,6 +860,7 @@
 	background: var(--color-main-background);
 	color: var(--color-main-text);
 	font-size: 14px;
+	font-weight: 400;
 	cursor: pointer;
 }
 
@@ -1279,3 +1281,53 @@
 	font-size: 20px;
 	font-weight: 700;
 }
+
+/* ---- Side panel cards --------------------------------------------------- */
+/* A card beside the list is the board's side card (DqTeamwachtrij "Team
+   vandaag", "Werkvoorraad per zaaktype"): no rule under the header, the
+   title a 15px muted label on the card's 20px 22px inset, 12px above the
+   body, 20px between cards. The wrapper drew the Nextcloud panel: a 14px
+   dark title on a 12px 16px header over a rule, 16px between cards. The
+   tone carries `!important` against a theme that colours every h3.
+   @spec openspec/changes/board-index-side-panel-cards/specs/board-index-side-panel-cards/spec.md#requirement-a-board-index-side-panel-card-is-the-boards-side-card */
+.cn-look-board .cn-index-page-widgets--side-panel:not(.cn-look-nextcloud *) {
+	gap: var(--cn-board-section-gap, 20px);
+}
+
+.cn-look-board .cn-index-page-widgets--side-panel:not(.cn-look-nextcloud *) .cn-widget-wrapper__header {
+	border-bottom: none;
+	padding: 20px 22px 0;
+}
+
+.cn-look-board .cn-index-page-widgets--side-panel:not(.cn-look-nextcloud *) .cn-widget-wrapper__title {
+	color: var(--color-text-maxcontrast) !important;
+	font-size: var(--cn-board-side-heading-size, 15px);
+	font-weight: 600;
+	line-height: normal;
+}
+
+.cn-look-board .cn-index-page-widgets--side-panel:not(.cn-look-nextcloud *) .cn-widget-wrapper__content {
+	padding: calc(12px - var(--cn-board-first-line-leading, 0.15em)) 22px 20px;
+}
+
+.cn-look-board .cn-index-page-widgets--side-panel:not(.cn-look-nextcloud *) .cn-index-page-widgets__note {
+	font-size: 13px;
+}
+
+/* A record list drawn as a table (DqTeamwachtrij "Werkvoorraad per
+   zaaktype") is the board's compact grid: a 13px muted header at regular
+   weight, rows 8px apart, no rules between them. Line heights differ from
+   the board's normal ones, so the cell padding sets the board's row pitch.
+   One class more than the component's scoped rules, which load later.
+   @spec openspec/changes/board-index-side-panel-cards/specs/board-index-side-panel-cards/spec.md#requirement-a-board-record-list-table-is-the-boards-compact-grid */
+.cn-look-board .cn-record-list--table .cn-record-list__table th {
+	border-bottom: none;
+	font-size: 13px;
+	font-weight: 400;
+	padding-block: 0 2px;
+}
+
+.cn-look-board .cn-record-list--table .cn-record-list__table td {
+	border-bottom: none;
+	padding-block: 2px;
+}

package/src/css/look-board.css

@@ -219,6 +219,16 @@
 	height: 16px;
 }
 
+/* ---- A single select -------------------------------------------------- */
+/* NcSelect draws a single select as its search field with the clear and
+   open buttons laid over its end. A legacy vue-select rule that Nextcloud
+   still loads caps the field at the width less one clickable area, which
+   left those buttons outside the field's border (DqNieuweZaak "Zaaktype",
+   "Intakekanaal"). */
+.cn-look-board .nc-select.v-select.select.vs--single .vs__selected-options {
+	max-width: none;
+}
+
 /* ---- The header button ------------------------------------------------- */
 .cn-look-board .cn-index-page__header-buttons:not(.cn-look-nextcloud *),
 .cn-look-board .cn-detail-page__header-actions:not(.cn-look-nextcloud *),
@@ -343,11 +353,8 @@
    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). */
+   keeps a class given to it off, so the rule reads that marker. */
 .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(--cn-board-control-border);
 	border-radius: var(--cn-board-control-radius);
 	background: var(--color-main-background);
@@ -1154,14 +1161,6 @@
 	color: var(--cn-status-badge-ink);
 }
 
-/* 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);
-}
-
 /* ---- Info notes (NcNoteCard type="info") -------------------------------- */
 /* The board's info note is a light-blue rounded box: no edge bar, 12px 14px
    of padding, radius 8, an 18px icon 10px before the text, 14px text in the
@@ -1213,9 +1212,7 @@
    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. */
+   a pair is 47px tall on the board. */
 .cn-look-board .cn-detail-grid.cn-detail-grid--grid:not(.cn-look-nextcloud *) {
 	gap: 12px 24px;
 	font-size: 15px;
@@ -1246,7 +1243,6 @@
 }
 
 .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;
@@ -1278,7 +1274,7 @@
 .cn-look-board .cn-dashboard-page:not(.cn-look-nextcloud *) .cn-widget-wrapper:not(.cn-widget-wrapper--nc-dashboard) .cn-widget-wrapper__title {
 	font-size: var(--cn-board-heading-size, 17px);
 	font-weight: 700;
-	line-height: 1.3;
+	line-height: normal;
 }
 
 /* The board draws no rule under a dashboard card's title (DqMijnWerk,
@@ -1292,7 +1288,7 @@
 }
 
 .cn-look-board .cn-dashboard-page:not(.cn-look-nextcloud *) .cn-widget-wrapper:not(.cn-widget-wrapper--nc-dashboard):not(.cn-widget-wrapper--borderless) .cn-widget-wrapper__header {
-	padding: 20px var(--cn-board-dashboard-card-inset) 12px;
+	padding: 20px var(--cn-board-dashboard-card-inset) calc(12px - var(--cn-board-first-line-leading, 0.15em));
 }
 
 /* ---- Record list on a dashboard card (PtDashboard) ---------------------- */
@@ -1487,3 +1483,21 @@
 .cn-look-board .cn-dashboard-page:not(.cn-look-nextcloud *) .cn-stats-block-widget--tiles-box {
 	padding: 14px 22px 20px;
 }
+
+/* ---- Matrix chart (DqProcesanalyse "Dagen per fase") -------------------- */
+/* The board sets the matrix at 14px and the font's normal line height: the
+   column heads and the cell figures at 600, a cell 37px with its 10px
+   padding. Nextcloud's 15px at 1.5 made each row 42.5px.
+   @spec openspec/changes/board-matrix-cells/specs/board-matrix-cells/spec.md#requirement-a-board-matrix-takes-the-boards-type */
+.cn-look-board .cn-chart-widget__matrix:not(.cn-look-nextcloud *) {
+	font-size: 14px;
+	line-height: normal;
+}
+
+.cn-look-board .cn-chart-widget__matrix:not(.cn-look-nextcloud *) .cn-chart-widget__matrix-head {
+	font-weight: 600;
+}
+
+.cn-look-board .cn-chart-widget__matrix:not(.cn-look-nextcloud *) .cn-chart-widget__matrix-cell:not(.cn-chart-widget__matrix-cell--current) {
+	font-weight: 600;
+}

package/src/integrations/registry.js

@@ -89,6 +89,7 @@ export function createIntegrationRegistry() {
 	 * @param {?object} [entry.offlineConfig] Opaque per-integration config bag forwarded verbatim to the integration's components (e.g. the field-inspection leaf's offline schema/filter config). A consuming app overrides it by pre-registering the same id.
 	 * @param {'component'|'mount'} [entry.renderMode] Render strategy (openregister#2127 / ADR-066). `'component'` (default) interprets the SFC `tab`/`widget` under the host's own Vue runtime. `'mount'` hands the leaf a bare host-owned DOM element via `mount`/`unmount`, so a leaf built against a different Vue major than the host renders its own framework instance inside that element.
 	 * @param {(el: Element, props: object) => void} [entry.mount] Mount hand-off. Required together with `unmount` when `renderMode` is `'mount'`; the host calls it against a bare element with the same context an SFC widget/tab receives (`{ register, schema, objectId, surface, integrationContext, … }`). May also be supplied alongside an SFC pair as a same-major fast path.
+	 * @param {'card'} [entry.chrome] `'card'` when a mount-mode leaf draws no card of its own: a detail page then hosts it in the library card and hands it `onHeader(header)` to report its count, actions and empty state.
 	 * @param {(el: Element) => void} [entry.unmount] Teardown hand-off, called by the host before it removes the element and on surface hide / bound-object change. Travels as a pair with `mount`.
 	 *
 	 * @return {?object} Normalised entry, or null on collision / malformed mount pair in prod.
@@ -209,6 +210,9 @@ export function createIntegrationRegistry() {
 			// registration, with the tabbed panel silently keeping the sidebar
 			// component.
 			bareWidget: entry.bareWidget === true,
+			// `card`: a mount-mode leaf that draws no card of its own, so a
+			// detail page hosts it in the library card (CnDetailWidgetHost).
+			chrome: entry.chrome === 'card' ? 'card' : null,
 			// Marker set by `registerBuiltinIntegrations` /
 			// `registerLeafIntegrations` so `useIntegrationRegistry` can
 			// distinguish lib-owned registrations (whose components must