@conduction/nextcloud-vue 2.111.0 → 2.112.0

package/src/css/dialog.css

@@ -20,7 +20,7 @@
 	--nldesign-component-dialog-border-radius: var(--cn-board-card-radius, 12px);
 	--cn-dialog-width: 640px;
 	--cn-dialog-danger: var(--color-error);
-	--cn-dialog-eyebrow-color: var(--color-primary-element-text, var(--color-main-text));
+	--cn-dialog-eyebrow-color: var(--color-primary-element-light-text, var(--color-main-text));
 	--cn-dialog-eyebrow-transform: none;
 	--cn-dialog-eyebrow-tracking: 0;
 }
@@ -86,6 +86,7 @@
 }
 
 .cn-dialog-header__eyebrow {
+	--nldesign-color-on-surface: var(--cn-dialog-eyebrow-color, var(--color-main-text));
 	margin-bottom: 4px;
 	font-size: 13px;
 	font-weight: 700;
@@ -101,13 +102,24 @@
 	color: var(--color-main-text);
 }
 
+/* The subtitle is a <p>, which the nldesign theme sizes and inks with
+   `!important` through its paragraph tokens: the board's 14px muted line
+   goes to those tokens too (DqOverdragen, DqDocumentGenereren). */
 .cn-dialog-header__subtitle {
+	--nldesign-component-paragraph-font-size: 14px;
+	--nldesign-component-paragraph-color: var(--color-text-maxcontrast);
+	--nldesign-color-on-surface: var(--color-text-maxcontrast);
 	margin: 4px 0 0;
 	font-size: 14px;
 	color: var(--color-text-maxcontrast);
 }
 
-.cn-dialog-header__close {
+/* The close button is a 36px circle. NcButton sizes an icon-only button by
+   --button-size with `!important`, so the size goes through that; the radius
+   also goes to the nldesign theme's button radius token. */
+.cn-dialog-header .cn-dialog-header__close.button-vue {
+	--button-size: 36px;
+	--nldesign-component-button-border-radius: 50%;
 	flex: 0 0 auto;
 	width: 36px;
 	min-width: 36px;
@@ -147,6 +159,28 @@
 	border-radius: var(--cn-board-control-radius, 8px);
 }
 
+/* The footer buttons set 14px text, 16px in at both sides, and 18px when
+   they carry an icon (DqOverdragen "Annuleren" and "Overdragen"). The padding
+   goes through NcButton's --button-padding. The mask class and the doubled
+   class outrank NcButton's text-only rule, `.button-vue[data-v-…]:has(…:empty)`
+   (four classes, in a stylesheet a spawned dialog loads later), and the board
+   look's general icon-and-label rule.
+   @spec openspec/changes/board-dialog-controls/specs/board-dialog-controls/spec.md#requirement-a-board-dialog-draws-its-controls-as-the-boards-do */
+.modal-mask.cn-dialog-board .dialog__actions .button-vue.button-vue {
+	--button-padding: 16px;
+	font-size: 14px;
+}
+
+.modal-mask.cn-dialog-board .dialog__actions .button-vue.button-vue:has(> .button-vue__wrapper > .button-vue__icon:not(:empty)):has(> .button-vue__wrapper > .button-vue__text:not(:empty)) {
+	--button-padding: 18px;
+}
+
+/* NcButton pads a text-only label 4px a side inside the button's own padding;
+   the board's 16px is the whole inset. */
+.modal-mask.cn-dialog-board .dialog__actions .button-vue .button-vue__text.button-vue__text {
+	padding-inline: 0;
+}
+
 /* Cancel is an outlined secondary, never a text link. */
 .cn-dialog-board .dialog__actions .button-vue--vue-secondary,
 .cn-dialog-board .dialog__actions .button-vue--secondary {
@@ -223,15 +257,31 @@
 	height: calc(var(--cn-field-height, 40px) + 2 * var(--border-width-input-focused, 2px));
 }
 
+/* The board draws the control's edge as a 1px border (DqOverdragen "Waarom de
+   zaak verhuist", DqBesluit); NcInputField and NcTextArea draw it as a shadow.
+   The colour is the one that meets WCAG's 3:1 for a control's edge, as the
+   footer's secondary button. Focus keeps NcInputField's own ring, which
+   carries `!important`. */
 .cn-dialog-board .dialog__content .input-field__input,
 .cn-dialog-board .dialog__content .input-field__input:hover:not([disabled]),
 .cn-dialog-board .dialog__content .textarea__input,
 .cn-dialog-board .dialog__content .textarea__input:hover:not([disabled]) {
+	border: 1px solid var(--color-border-maxcontrast);
 	border-radius: 8px;
-	box-shadow: 0 0 0 1px var(--color-border-dark);
+	box-shadow: none;
 	font-size: var(--cn-field-text-size, 15px);
 }
 
+/* A plain input an app puts in a board dialog (a date, a number) is the same
+   40px control; Nextcloud's core stylesheet makes it 34px. */
+.cn-dialog-board .dialog__content input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=file]):not([type=range]):not([type=color]):not([type=submit]):not([type=button]):not([type=reset]):not([type=image]):not(.input-field__input) {
+	box-sizing: border-box;
+	height: var(--cn-field-height, 40px);
+	min-height: var(--cn-field-height, 40px);
+	border: 1px solid var(--color-border-maxcontrast);
+	border-radius: 8px;
+}
+
 .cn-dialog-board .dialog__content .input-field:has(.input-field__label) .input-field__input:not(:focus)::placeholder,
 .cn-dialog-board .dialog__content .textarea__input:not(:focus)::placeholder {
 	opacity: 1 !important;

package/src/css/index-page.css

@@ -102,11 +102,17 @@
 	overflow-y: auto;
 }
 
+/* The list scrolls inside the side column and the card for the rows without
+   a place stays under it, as the board draws it (DqZakenKaart). Scrolling the
+   column as a whole pushed that card below a page's worth of rows. */
 .cn-index-page__map-list {
 	display: flex;
+	flex: 0 1 auto;
 	flex-direction: column;
+	min-height: 0;
 	margin: 0;
 	padding: 0;
+	overflow-y: auto;
 	border: 1px solid var(--color-border);
 	border-radius: 10px;
 	list-style: none;
@@ -114,6 +120,7 @@
 
 .cn-index-page__map-item {
 	display: flex;
+	flex: none;
 	gap: 12px;
 	padding: 12px 14px;
 }
@@ -152,11 +159,22 @@
 	min-width: 0;
 }
 
-.cn-index-page__map-title {
+/* The title is a button for the keyboard but reads as the row's title text.
+   Nextcloud styles every `button:not(.button-vue, ...)` (specificity 0,2,1)
+   as a 34px tinted pill with a 3px margin, which outranked a single class and
+   turned each title into a blue block (DqZakenKaart rows 111px against 89).
+   Three classes outrank it, and the box properties it sets are reset.
+   @spec openspec/changes/map-list-title-button/specs/map-list-title-button/spec.md#requirement-a-map-list-title-reads-as-text-not-as-a-button */
+.cn-index-page__map-list .cn-index-page__map-item .cn-index-page__map-title {
+	width: auto;
+	height: auto;
+	min-height: 0;
 	margin: 0;
 	padding: 0;
 	border: 0;
+	border-radius: 0;
 	background: none;
+	box-shadow: none;
 	color: var(--color-main-text);
 	font: inherit;
 	font-size: 15px;
@@ -166,6 +184,12 @@
 	cursor: pointer;
 }
 
+.cn-index-page__map-list .cn-index-page__map-item .cn-index-page__map-title:hover,
+.cn-index-page__map-list .cn-index-page__map-item .cn-index-page__map-title:focus {
+	background: none;
+	color: var(--color-main-text);
+}
+
 .cn-index-page__map-sub,
 .cn-index-page__map-due {
 	color: var(--color-text-maxcontrast);
@@ -181,6 +205,7 @@
 
 .cn-index-page__map-missing {
 	display: flex;
+	flex: none;
 	flex-direction: column;
 	align-items: flex-start;
 	gap: 8px;

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

@@ -219,14 +219,16 @@
 	color: var(--color-main-background);
 }
 
-/* The count badge: grey on an idle chip, soft text colour on the selected one. */
+/* The count badge: grey on an idle chip, soft text colour on the selected one.
+   Its 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-saved-views__chip .cn-saved-views__chip-count,
 .cn-look-board .cn-quick-filter-bar .cn-quick-filter-bar__count {
+	--nldesign-color-on-surface: var(--cn-board-text-soft);
 	min-width: 0;
 	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;
@@ -246,8 +248,10 @@
 }
 
 /* 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 +292,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);
@@ -437,7 +442,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;
@@ -581,9 +589,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 +651,7 @@
 	min-width: 22px;
 	height: 22px;
 	min-height: 22px;
+	border-radius: 4px;
 	margin-inline-start: 4px;
 }
 
@@ -847,6 +860,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 +874,7 @@
 	background: var(--color-main-background);
 	color: var(--color-main-text);
 	font-size: 14px;
+	font-weight: 400;
 	cursor: pointer;
 }
 
@@ -1279,3 +1295,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 *),
@@ -1278,7 +1288,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 +1302,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 +1497,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

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.133.0",
+	"version": "2.134.0",
 	"type": "object",
 	"required": ["$schema", "version"],
 	"allOf": [
@@ -1212,6 +1212,7 @@
 							]
 						},
 						"pill": { "type": "string", "description": "The field shown as a status pill." },
+						"resolve": { "type": "object", "additionalProperties": false, "description": "pill-color-field: the `pill` field holds the id of a record; the pill takes the tone that record's colour maps onto and shows its icon. Register and schema default to the field's reference.", "properties": { "register": { "type": "string", "minLength": 1 }, "schema": { "type": "string", "minLength": 1 }, "colorField": { "type": "string", "minLength": 1 }, "iconField": { "type": "string", "minLength": 1 } } },
 						"pillColors": {
 							"type": "object",
 							"description": "Pill value to badge variant. A value without an entry takes the default variant.",
@@ -1378,7 +1379,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 } } },
+				"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 }, "colorField": { "type": "string", "minLength": 1, "description": "pill-color-field: the referenced record's property holding a colour name (an NL Design System hue such as `red` or `blue-light`, or a badge role); the pill takes the tone it maps onto." }, "iconField": { "type": "string", "minLength": 1, "description": "pill-color-field: the referenced record's property holding a registered icon name, shown before the label." } } },
 				"countLabel": {
 					"type": "object",
 					"additionalProperties": false,
@@ -4694,6 +4695,11 @@
 										"type": "string",
 										"description": "One label for the control's label filter."
 									},
+									"icon": {
+										"type": "string",
+										"minLength": 1,
+										"description": "pill-color-field: a registered icon name the view's My views menu entry shows instead of the filter icon (a case type's own icon, say)."
+									},
 									"overrides": {
 										"type": "object",
 										"additionalProperties": false,
@@ -5339,14 +5345,14 @@
 							"additionalProperties": false,
 							"description": "type='index', board look: the record layout of each card in the cards view (board-record-card-layout): a pill and the number on the head row, the title, a meta line, and a footer with a pill and a date. Each part names a field (a dot path) and is left out while it is empty; a pill maps values to a badge variant (`colorMap`, ignoring case) and to shown text (`labels`). Maps to CnIndexPage `cardLayout`.",
 							"properties": {
-								"headPill": { "type": "object", "additionalProperties": false, "required": ["field"], "properties": { "field": { "type": "string", "minLength": 1 }, "colorMap": { "type": "object", "additionalProperties": { "type": "string", "enum": ["default", "primary", "success", "warning", "error", "info", "purple", "teal"] } }, "labels": { "type": "object", "additionalProperties": { "type": "string" } }, "variant": { "type": "string", "enum": ["default", "primary", "success", "warning", "error", "info", "purple", "teal"] }, "due": { "type": "object", "description": "Read the field as a due date: overdue gives the error variant, within `soonWithin` days the warning one; any other date draws no pill.", "properties": { "soonWithin": { "type": "number", "minimum": 0 } } }, "variantWhen": { "type": "array", "description": "Rules on the days left until the field's date, `{ op, value, variant }`; the first match gives the variant, no match draws no pill.", "items": { "type": "object", "required": ["op", "value", "variant"], "properties": { "op": { "type": "string" }, "value": { "type": "number" }, "variant": { "type": "string" } } } } } },
+								"headPill": { "type": "object", "additionalProperties": false, "required": ["field"], "properties": { "field": { "type": "string", "minLength": 1 }, "resolve": { "type": "object", "additionalProperties": false, "description": "pill-color-field: the field holds the id of a record; the pill takes the tone that record's colour maps onto and shows its icon. Register and schema default to the field's reference.", "properties": { "register": { "type": "string", "minLength": 1 }, "schema": { "type": "string", "minLength": 1 }, "colorField": { "type": "string", "minLength": 1 }, "iconField": { "type": "string", "minLength": 1 } } }, "colorMap": { "type": "object", "additionalProperties": { "type": "string", "enum": ["default", "primary", "success", "warning", "error", "info", "purple", "teal"] } }, "labels": { "type": "object", "additionalProperties": { "type": "string" } }, "variant": { "type": "string", "enum": ["default", "primary", "success", "warning", "error", "info", "purple", "teal"] }, "due": { "type": "object", "description": "Read the field as a due date: overdue gives the error variant, within `soonWithin` days the warning one; any other date draws no pill.", "properties": { "soonWithin": { "type": "number", "minimum": 0 } } }, "variantWhen": { "type": "array", "description": "Rules on the days left until the field's date, `{ op, value, variant }`; the first match gives the variant, no match draws no pill.", "items": { "type": "object", "required": ["op", "value", "variant"], "properties": { "op": { "type": "string" }, "value": { "type": "number" }, "variant": { "type": "string" } } } } } },
 								"number": { "type": "string", "minLength": 1 },
 								"title": { "type": "string", "minLength": 1 },
 								"meta": { "type": "array", "description": "The meta line's parts: a field name reads through the page column it names; `{ field, formatter?, formatterOptions? }` reads as plain text through its own formatter (card-layout-part-formatter).", "items": { "oneOf": [ { "type": "string", "minLength": 1 }, { "type": "object", "additionalProperties": false, "required": ["field"], "properties": { "field": { "type": "string", "minLength": 1 }, "formatter": { "type": "string", "minLength": 1 }, "formatterOptions": { "type": "object" } } } ] } },
-								"footerPill": { "type": "object", "additionalProperties": false, "required": ["field"], "properties": { "field": { "type": "string", "minLength": 1 }, "colorMap": { "type": "object", "additionalProperties": { "type": "string", "enum": ["default", "primary", "success", "warning", "error", "info", "purple", "teal"] } }, "labels": { "type": "object", "additionalProperties": { "type": "string" } }, "variant": { "type": "string", "enum": ["default", "primary", "success", "warning", "error", "info", "purple", "teal"] }, "due": { "type": "object", "description": "Read the field as a due date: overdue gives the error variant, within `soonWithin` days the warning one; any other date draws no pill.", "properties": { "soonWithin": { "type": "number", "minimum": 0 } } }, "variantWhen": { "type": "array", "description": "Rules on the days left until the field's date, `{ op, value, variant }`; the first match gives the variant, no match draws no pill.", "items": { "type": "object", "required": ["op", "value", "variant"], "properties": { "op": { "type": "string" }, "value": { "type": "number" }, "variant": { "type": "string" } } } } } },
+								"footerPill": { "type": "object", "additionalProperties": false, "required": ["field"], "properties": { "field": { "type": "string", "minLength": 1 }, "resolve": { "type": "object", "additionalProperties": false, "description": "pill-color-field: the field holds the id of a record; the pill takes the tone that record's colour maps onto and shows its icon. Register and schema default to the field's reference.", "properties": { "register": { "type": "string", "minLength": 1 }, "schema": { "type": "string", "minLength": 1 }, "colorField": { "type": "string", "minLength": 1 }, "iconField": { "type": "string", "minLength": 1 } } }, "colorMap": { "type": "object", "additionalProperties": { "type": "string", "enum": ["default", "primary", "success", "warning", "error", "info", "purple", "teal"] } }, "labels": { "type": "object", "additionalProperties": { "type": "string" } }, "variant": { "type": "string", "enum": ["default", "primary", "success", "warning", "error", "info", "purple", "teal"] }, "due": { "type": "object", "description": "Read the field as a due date: overdue gives the error variant, within `soonWithin` days the warning one; any other date draws no pill.", "properties": { "soonWithin": { "type": "number", "minimum": 0 } } }, "variantWhen": { "type": "array", "description": "Rules on the days left until the field's date, `{ op, value, variant }`; the first match gives the variant, no match draws no pill.", "items": { "type": "object", "required": ["op", "value", "variant"], "properties": { "op": { "type": "string" }, "value": { "type": "number" }, "variant": { "type": "string" } } } } } },
 								"footerDate": { "type": "object", "additionalProperties": false, "required": ["field"], "properties": { "field": { "type": "string", "minLength": 1 }, "label": { "type": "string", "minLength": 1 }, "overdueVariant": { "type": "string", "enum": ["error", "warning"], "description": "The date's tone once it has passed (2.132.0)." } } },
 								"description": { "description": "A line under the meta line: a field, or `{ field, maxLength? }` cut at maxLength characters (140 by default) with an ellipsis (2.132.0).", "anyOf": [{ "type": "string", "minLength": 1 }, { "type": "object", "additionalProperties": false, "required": ["field"], "properties": { "field": { "type": "string", "minLength": 1 }, "maxLength": { "type": "integer", "minimum": 1 } } }] },
-								"chips": { "type": "array", "description": "Pills under the description, one per entry whose field holds a value; the text reads through the entry's formatter, `colorMap` and `labels` work as on a pill (2.132.0).", "items": { "anyOf": [{ "type": "string", "minLength": 1 }, { "type": "object", "additionalProperties": false, "required": ["field"], "properties": { "field": { "type": "string", "minLength": 1 }, "formatter": { "type": "string", "minLength": 1 }, "formatterOptions": { "type": "object" }, "colorMap": { "type": "object", "additionalProperties": { "type": "string", "enum": ["default", "primary", "success", "warning", "error", "info", "purple", "teal"] } }, "labels": { "type": "object", "additionalProperties": { "type": "string" } }, "variant": { "type": "string", "enum": ["default", "primary", "success", "warning", "error", "info", "purple", "teal"] } } }] } }
+								"chips": { "type": "array", "description": "Pills under the description, one per entry whose field holds a value; the text reads through the entry's formatter, `colorMap` and `labels` work as on a pill (2.132.0).", "items": { "anyOf": [{ "type": "string", "minLength": 1 }, { "type": "object", "additionalProperties": false, "required": ["field"], "properties": { "field": { "type": "string", "minLength": 1 }, "resolve": { "type": "object", "additionalProperties": false, "description": "pill-color-field: the field holds the id of a record; the pill takes the tone that record's colour maps onto and shows its icon. Register and schema default to the field's reference.", "properties": { "register": { "type": "string", "minLength": 1 }, "schema": { "type": "string", "minLength": 1 }, "colorField": { "type": "string", "minLength": 1 }, "iconField": { "type": "string", "minLength": 1 } } }, "formatter": { "type": "string", "minLength": 1 }, "formatterOptions": { "type": "object" }, "colorMap": { "type": "object", "additionalProperties": { "type": "string", "enum": ["default", "primary", "success", "warning", "error", "info", "purple", "teal"] } }, "labels": { "type": "object", "additionalProperties": { "type": "string" } }, "variant": { "type": "string", "enum": ["default", "primary", "success", "warning", "error", "info", "purple", "teal"] } } }] } }
 							}
 						},
 						"afterList": { "type": "array", "description": "type='index': cards after the list, stacked full width in the listed order, the counterpart of statRow above it (index-scope-presentation). Each entry is a widget definition resolved like statRow's. A query preset or a folder scope can set its own. Maps to CnIndexPage `afterList`.", "items": { "type": "object", "required": ["id", "type"], "properties": { "id": { "type": "string", "minLength": 1 }, "type": { "type": "string", "minLength": 1 }, "title": { "type": "string" }, "subtitle": { "type": "string" }, "content": { "type": "object" }, "headerLink": { "type": "object" } } } },

package/src/store/plugins/liveUpdates.js

@@ -399,6 +399,8 @@ export function liveUpdatesPlugin(opts = {}) {
 			// Plain (non-reactive) Map: type → last params object
 			store.__lastCollectionParams = new Map()
 
+			// Detached: the store outlives the component whose setup first
+			// used it, and an attached observer is removed with that scope.
 			store.$onAction(({ name, args, after }) => {
 				if (name === 'fetchCollection') {
 					const [type, params = {}] = args
@@ -406,7 +408,7 @@ export function liveUpdatesPlugin(opts = {}) {
 						store.__lastCollectionParams.set(type, params)
 					})
 				}
-			})
+			}, true)
 
 			// -- In-flight dedup for fetchObject --
 			// Plain Map: dedupKey → Promise