@conduction/nextcloud-vue 2.139.0 → 2.141.0

package/src/components/CnObjectListWidget/CnObjectListWidget.vue

@@ -669,14 +669,14 @@ export default {
 		},
 
 		/**
-		 * How the table draws its title column (`content.rowTitle`: link, plain
-		 * or text), link when unset or unknown.
+		 * How the table draws its title column (`content.rowTitle`: link, plain,
+		 * text or strong), link when unset or unknown.
 		 *
 		 * @return {string}
 		 * @spec openspec/changes/board-log-table-plain-cells/specs/board-log-table-plain-cells/spec.md#requirement-a-tables-title-column-can-read-as-plain-text
 		 */
 		rowTitle() {
-			return ['plain', 'text'].includes(this.content.rowTitle) ? this.content.rowTitle : 'link'
+			return ['plain', 'text', 'strong'].includes(this.content.rowTitle) ? this.content.rowTitle : 'link'
 		},
 
 		/**

package/src/components/CnRecordListWidget/CnRecordListWidget.vue

@@ -6,7 +6,7 @@
 <template>
 	<div
 		class="cn-record-list"
-		:class="[`cn-record-list--${presentation}`, { 'cn-record-list--compact': content.density === 'compact', 'cn-record-list--tiles': presentation === 'rows' && content.tiles === true, 'cn-record-list--rule-above': content.ruleAbove === true, 'cn-record-list--data-table': presentation === 'table' && content.tableLook === 'data' }]"
+		:class="[`cn-record-list--${presentation}`, { 'cn-record-list--compact': content.density === 'compact', 'cn-record-list--stacked': content.density === 'stacked', 'cn-record-list--tiles': presentation === 'rows' && content.tiles === true, 'cn-record-list--rule-above': content.ruleAbove === true, 'cn-record-list--data-table': presentation === 'table' && content.tableLook === 'data' }]"
 		data-testid="cn-record-list">
 		<p v-if="intro && !absent" class="cn-record-list__intro" data-testid="cn-record-list-intro">
 			{{ intro }}
@@ -713,6 +713,8 @@ export default {
 		 * without a value.
 		 * `density: "compact"` draws the rows 10px above and below, at least
 		 * 56px tall, with the title at 500 (DqProcesanalyse).
+		 * `density: "stacked"` stands the rows 10px apart with no rule and no
+		 * row padding (DqDagAfsluiten "Morgen eerst").
 		 * In `rows`, `text` is a line under the meta line ("12 dagen stil"),
 		 * and `chevron: false` leaves the chevron off a linked row
 		 * (DqDashboard).
@@ -3103,6 +3105,23 @@ export default {
 	font-weight: 500;
 }
 
+/* `density: "stacked"`: the rows stand 10px apart with no rule and no row
+   padding, a short side list (DqDagAfsluiten "Morgen eerst"). */
+.cn-record-list--stacked .cn-record-list__list {
+	display: flex;
+	flex-direction: column;
+	gap: 10px;
+}
+
+.cn-record-list--stacked .cn-record-list__row {
+	min-height: 0;
+	padding: 0;
+}
+
+.cn-record-list--stacked .cn-record-list__item + .cn-record-list__item {
+	border-top: 0;
+}
+
 .cn-record-list__meta {
 	color: var(--color-text-maxcontrast);
 	font-size: 13px;

package/src/components/CnRecordListWidget/CnRecordNoteRows.vue

@@ -37,15 +37,20 @@
 					data-testid="cn-record-list-due">{{ item.due.text }}</span>
 			</div>
 			<div class="cn-record-notes__fields">
-				<NcTextField
-					class="cn-record-notes__field"
-					:modelValue="drafts[item.key] || ''"
-					:label="fieldLabel"
-					:labelOutside="false"
-					:placeholder="placeholder"
-					:disabled="busy"
-					:data-testid="`cn-record-list-note-${item.key}`"
-					@update:modelValue="setDraft(item.key, $event)" />
+				<!-- The label stands above the field, as the leaf's own beside it
+				     (humaniq "Uren"), so both fields share one line. -->
+				<div class="cn-record-notes__field">
+					<label :for="fieldId(item.key)" class="cn-record-notes__field-label">{{ fieldLabel }}</label>
+					<NcTextField
+						:id="fieldId(item.key)"
+						:modelValue="drafts[item.key] || ''"
+						:label="fieldLabel"
+						labelOutside
+						:placeholder="placeholder"
+						:disabled="busy"
+						:data-testid="`cn-record-list-note-${item.key}`"
+						@update:modelValue="setDraft(item.key, $event)" />
+				</div>
 				<div v-if="leaf && leafProvider" class="cn-record-notes__leaf" :data-testid="`cn-record-list-leaf-${item.key}`">
 					<CnLeafMountHost
 						v-if="leafIsMount"
@@ -117,6 +122,13 @@ import { readPath } from '../../utils/readPath.js'
 /** The bus channel every endpoint-bound widget on the page refetches on. */
 const PAGE_REFRESH_CHANNEL = 'cn:page:refresh'
 
+/**
+ * The document event a recorded note sends, so a row's leaf (humaniq's
+ * hours) can record what it holds for the same object at the same moment.
+ * `detail` is the row's leaf props plus `note`.
+ */
+const NOTE_RECORDED_EVENT = 'cn-record-notes:recorded'
+
 /**
  * The rows of a record list drawn as notes to record (`presentation:
  * "notes"`, DqDagAfsluiten "Nog open van vandaag"): per row its pill, title,
@@ -294,6 +306,16 @@ export default {
 			this.drafts = { ...this.drafts, [key]: String(value ?? '') }
 		},
 
+		/**
+		 * The id of a row's note field, for its label.
+		 *
+		 * @param {string} key The row key.
+		 * @return {string} The id.
+		 */
+		fieldId(key) {
+			return `cn-record-notes-${this.$.uid}-${String(key).replace(/[^A-Za-z0-9_-]/g, '-')}`
+		},
+
 		/**
 		 * @param {string} key The row key.
 		 * @return {boolean} Whether the row has a note typed.
@@ -351,6 +373,9 @@ export default {
 			try {
 				const { default: axios } = await import('@nextcloud/axios')
 				await axios.post(prefixUrl(url), { [this.action.bodyField || 'message']: text })
+				if (this.leaf) {
+					document.dispatchEvent(new CustomEvent(NOTE_RECORDED_EVENT, { detail: { ...this.leafProps(item.row), note: text } }))
+				}
 				const { [item.key]: done, ...rest } = this.drafts
 				this.drafts = rest
 				if (refresh) {
@@ -462,7 +487,16 @@ export default {
 }
 
 .cn-record-notes__field {
+	display: flex;
 	flex: 1 1 260px;
+	flex-direction: column;
+	gap: 6px;
+}
+
+.cn-record-notes__field-label {
+	color: var(--color-main-text);
+	font-size: 14px;
+	font-weight: 600;
 }
 
 .cn-record-notes__leaf {

package/src/components/CnStackedBarWidget/CnStackedBarWidget.vue

@@ -3,7 +3,7 @@
   SPDX-License-Identifier: EUPL-1.2
 -->
 <template>
-	<div class="cn-stacked-bar" :class="{ 'cn-stacked-bar--inset': inset }" data-testid="cn-stacked-bar">
+	<div class="cn-stacked-bar" :class="{ 'cn-stacked-bar--inset': inset, 'cn-stacked-bar--compact': compact }" data-testid="cn-stacked-bar">
 		<div v-if="isLoading" class="cn-stacked-bar__state" role="status">
 			<NcLoadingIcon :size="20" />
 			<span>{{ loadingLabel }}</span>
@@ -183,7 +183,7 @@ export default {
 		 * segments to the card (`header` event, `count`), for a chip after the
 		 * title or a `{count}` in it.
 		 *
-		 * @type {{inset?: boolean, headerCount?: boolean, source?: {register?: string, schema?: string, groupBy?: string, filter?: object}, segments?: Array<{key?: string, label: string, value: number}>, order?: Array<string>, labels?: {[key: string]: string}, emptyText?: string}}
+		 * @type {{inset?: boolean, compact?: boolean, headerCount?: boolean, source?: {register?: string, schema?: string, groupBy?: string, filter?: object}, segments?: Array<{key?: string, label: string, value: number}>, order?: Array<string>, labels?: {[key: string]: string}, emptyText?: string}}
 		 */
 		content: {
 			type: Object,
@@ -241,6 +241,17 @@ export default {
 			return Boolean(this.content && this.content.inset === true)
 		},
 
+		/**
+		 * Whether the widget is the compact summary box (`content.compact`):
+		 * a 15px heading, one thin bar and the legend on one line.
+		 *
+		 * @spec openspec/changes/stacked-bar-compact/specs/stacked-bar-compact/spec.md#requirement-a-stacked-bar-can-be-drawn-as-the-compact-summary-box
+		 * @return {boolean}
+		 */
+		compact() {
+			return Boolean(this.content && this.content.compact === true)
+		},
+
 		/**
 		 * The translate function in use.
 		 *
@@ -651,4 +662,59 @@ export default {
 	line-height: 1.2;
 	color: var(--color-main-text);
 }
+
+/* `content.compact: true`: the summary box (DqZaakDocumenten "4 van 7
+   beoordeeld"): the sunken ground, a 15px heading, one 8px bar of joined
+   segments and the legend on one line, each count beside its label. */
+.cn-stacked-bar--compact {
+	box-sizing: border-box;
+	gap: 10px;
+	padding: 14px 16px;
+	border-radius: 10px;
+	background: var(--cn-board-sunken-ground, var(--color-background-hover));
+}
+
+.cn-stacked-bar--compact .cn-stacked-bar__heading {
+	flex-wrap: wrap;
+	gap: 8px;
+	font-size: 15px;
+}
+
+.cn-stacked-bar--compact .cn-stacked-bar__bar {
+	gap: 0;
+	height: 8px;
+	border-radius: 4px;
+	overflow: hidden;
+}
+
+.cn-stacked-bar--compact .cn-stacked-bar__segment {
+	border-radius: 0;
+}
+
+.cn-stacked-bar--compact .cn-stacked-bar__legend {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 8px 18px;
+	font-size: 14px;
+}
+
+.cn-stacked-bar--compact .cn-stacked-bar__legend-item {
+	flex-direction: row;
+	align-items: center;
+	gap: 8px;
+}
+
+.cn-stacked-bar--compact .cn-stacked-bar__label {
+	color: var(--color-main-text);
+	font-size: 1em;
+}
+
+.cn-stacked-bar--compact .cn-stacked-bar__dot {
+	border-radius: 50%;
+}
+
+.cn-stacked-bar--compact .cn-stacked-bar__count {
+	font-size: 1em;
+	line-height: inherit;
+}
 </style>

package/src/components/CnTransitionInputFields/CnTransitionInputFields.vue

@@ -162,6 +162,26 @@
 				</p>
 			</div>
 
+			<!-- A days input set as a date (`dateField`): today plus the days,
+			     and a chosen date sets the days. -->
+			<div v-if="field.input.dateField"
+				:key="`${field.key}-date`"
+				class="cn-transition-input-fields__field cn-transition-input-fields__wide"
+				:data-testid="field.input.dateField.testid || `cn-transition-input-date-${field.key}`">
+				<label class="cn-transition-input-fields__label"
+					:for="`${inputId(field)}-date`">{{ dateFieldLabel(field) }}</label>
+				<NcTextField :id="`${inputId(field)}-date`"
+					:modelValue="field.dateValue"
+					type="date"
+					:label="dateFieldLabel(field)"
+					:labelOutside="true"
+					:disabled="disabled"
+					@update:modelValue="setValue(field.key, daysUntilIso($event))" />
+				<span v-if="field.input.dateField.note" class="cn-transition-input-fields__muted">
+					{{ field.input.dateField.note }}
+				</span>
+			</div>
+
 			<!-- What the input means once filled in, such as the day a paused
 			     term comes back. Shown only once it can be worked out. -->
 			<div v-if="field.previewText"
@@ -209,7 +229,7 @@ import { NcCheckboxRadioSwitch, NcSelect, NcTextArea, NcTextField } from '@nextc
 import CnResourceSelect from '../CnResourceSelect/CnResourceSelect.vue'
 import CnTemplateSelect from '../CnTemplateSelect/CnTemplateSelect.vue'
 import { readPath } from '../../utils/readPath.js'
-import { applyTemplateText, isInputFilled, resolveInputFields } from '../../utils/transitionInputs.js'
+import { applyTemplateText, daysUntilIso, isInputFilled, resolveInputFields } from '../../utils/transitionInputs.js'
 import { CnIcon } from '../CnIcon/index.js'
 
 let uid = 0
@@ -505,6 +525,28 @@ export default {
 			return this.markOptional && !field.required ? `${field.label} (${t('nextcloud-vue', 'optional')})` : field.label
 		},
 
+		/**
+		 * The label of a days input's date field (`dateField`), with the
+		 * optional marker when asked for: the date is never required.
+		 *
+		 * @param {object} field The descriptor.
+		 * @return {string}
+		 */
+		dateFieldLabel(field) {
+			const label = String(field.input.dateField.label || '')
+			return this.markOptional ? `${label} (${t('nextcloud-vue', 'optional')})` : label
+		},
+
+		/**
+		 * The days a chosen date stands for.
+		 *
+		 * @param {string} iso The date input's value.
+		 * @return {string} The days, '' without a date.
+		 */
+		daysUntilIso(iso) {
+			return daysUntilIso(iso)
+		},
+
 		/**
 		 * Label of a sub-field, with the required marker.
 		 *

package/src/composables/indexSources.js

@@ -702,12 +702,15 @@ function tasksSource() {
 		 *
 		 * @param {string} key The column key.
 		 * @param {string} order `asc` or `desc`.
-		 * @return {{sort: string}|null} The parameter, or null for a column the inbox cannot sort by.
+		 * Open tasks come before finished ones (`openFirst`), each in that order.
+		 *
+		 * @return {{sort: string, openFirst: boolean}|null} The parameters, or null for a column the inbox cannot sort by.
 		 * @spec openspec/changes/tasks-source-sorts-on-server/specs/index-sources/spec.md#requirement-a-named-source-can-sort-on-the-server
+		 * @spec openspec/changes/tasks-source-open-first/specs/index-sources/spec.md#requirement-a-sorted-task-list-puts-open-tasks-first
 		 */
 		sortParam: (key, order) => {
 			const field = TASK_SORT_FIELDS[key]
-			return field ? { sort: (order === 'desc' ? '-' : '') + field } : null
+			return field ? { sort: (order === 'desc' ? '-' : '') + field, openFirst: true } : null
 		},
 
 		// The scope tabs. Each tab's filter is merged over the page's

package/src/composables/useTaskInboxStore.js

@@ -41,7 +41,8 @@ export const FLOW_TASKS_URL = '/apps/openregister/api/flow-tasks'
 // creating app named it, so it is the one filter that lets a Tasks page say
 // "the reminders" without the engine learning what a reminder is. It widens
 // nothing: it narrows within the inbox the session already decides.
-const ALLOWED_PARAMS = ['scope', 'state', 'isTerminal', 'priority', 'kind', 'overdue', 'dueAfter', 'dueBefore', 'objectUuid', 'sort', 'limit', 'offset']
+// `openFirst` asks open tasks before finished ones, a sort the engine applies.
+const ALLOWED_PARAMS = ['scope', 'state', 'isTerminal', 'priority', 'kind', 'overdue', 'dueAfter', 'dueBefore', 'objectUuid', 'sort', 'openFirst', 'limit', 'offset']
 
 /**
  * The flat body `POST /api/flow-tasks` takes for a task on a record.
@@ -178,7 +179,7 @@ export const useTaskInboxStore = defineStore('cnTaskInbox', {
 				if (value === undefined || value === null || value === '') {
 					continue
 				}
-				params[key] = (key === 'overdue' || key === 'isTerminal') ? String(value) : value
+				params[key] = (key === 'overdue' || key === 'isTerminal' || key === 'openFirst') ? String(value) : value
 			}
 			const response = await axios.get(generateUrl(FLOW_TASKS_URL), { params })
 			const results = response.data?.results || []
@@ -358,7 +359,7 @@ export const useTaskInboxStore = defineStore('cnTaskInbox', {
 				}
 				// The endpoint reads `overdue` as a boolean-ish string; a quick
 				// filter authors it as `true` for legibility.
-				params[key] = (key === 'overdue' || key === 'isTerminal') ? String(value) : value
+				params[key] = (key === 'overdue' || key === 'isTerminal' || key === 'openFirst') ? String(value) : value
 			}
 
 			this.loading = true

package/src/css/dialog.css

@@ -238,8 +238,11 @@ body:has(.cn-look-board):not(:has(.cn-look-nextcloud)) .modal-mask {
 	padding-inline-end: 24px;
 }
 
+/* The body starts 22px under the header, as most dialog boards draw it
+   (header padding-bottom 4px + form padding-top 18px; DqBerichtVersturen,
+   DqOverdragen, DqNieuweZaak, DqBesluit): the 18px gap plus 4px. */
 .cn-dialog-board .dialog__content > .cn-dialog-header {
-	margin-bottom: -2px;
+	margin-bottom: 4px;
 }
 
 /* Footer: 16px 24px, hairline on top, right aligned, 40px buttons, 10px gap. */
@@ -344,6 +347,15 @@ body:has(.cn-look-board):not(:has(.cn-look-nextcloud)) .modal-mask {
 	margin-block-start: 26px;
 }
 
+/* A select in a form dialog sits under its label and over its help line
+   as a text field does (DqNieuweZaak "Zaaktype", "Intakekanaal"): the
+   form's label stands outside the select, so NcSelect's own 6px/4px margins
+   only pushed the control 6px below the text fields beside it and its help
+   line 4px further down. */
+.cn-dialog-board .dialog__content .cn-form-dialog__select-wrapper > .v-select.select:not(:has(.input-field__label)) {
+	margin-block: 0;
+}
+
 /* A multiple select is the board's 40px field too (DqFilterDelen "Delen
    met"). The edge goes on the toggle, which holds the chips and the search,
    so the chosen people and groups sit inside the field; the search inside it

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

@@ -721,6 +721,13 @@
 	padding-top: calc(14px - var(--cn-board-first-line-leading));
 }
 
+/* A table (an object list) starts 12px below the title's box: its head has
+   a fill and no leading, so the glyph-to-glyph gap above left it 2px short
+   (DqZaaktypeStatussen "Statussen", "Resultaten"). */
+.cn-look-board .cn-detail-page .cn-widget-wrapper__content:has(> .cn-object-list-widget):not(.cn-detail-page__side *) {
+	padding-top: 12px;
+}
+
 /* Running text (DqZaak "Het verzoek") sits 12px below the title's box and
    keeps its own half-leading, at 1.6 as drawn.
    @spec openspec/changes/board-card-title-gap-variants/specs/board-card-title-gap-variants/spec.md#requirement-a-board-card-starts-its-body-as-drawn-for-its-kind-of-body */
@@ -1527,12 +1534,12 @@
 }
 
 /* ---- A card's Add ------------------------------------------------------ */
-/* The board draws a list card's Add as the neutral secondary at the 40px
-   control height, right-aligned in the title row (DqZaakGerelateerd
-   "Deelzaak aanmaken", DqZaakTaken "Toevoegen"). CnDetailWidgetHost renders
+/* The board draws a list card's Add as the neutral secondary right-aligned
+   in the title row, at the title row's 34px (DqZaaktypeStatussen "Status
+   toevoegen", DqZaaktype "Taak toevoegen", DqCatalogus "Objecttype
+   toevoegen": 13 of the 15 boards that draw one). CnDetailWidgetHost renders
    that button in the board look, so the list's footer Add bar, which ADR-062
-   draws in the Nextcloud look, is hidden in the card. The size outranks a
-   card title row's 34px buttons.
+   draws in the Nextcloud look, is hidden in the card.
    @spec openspec/changes/board-object-list-add-button/specs/board-object-list-add-button/spec.md#requirement-the-board-look-draws-a-cards-add-as-a-title-row-button */
 .cn-look-board .cn-detail-page__catalog-card:not(.cn-look-nextcloud *) .cn-object-list-widget__add {
 	display: none;
@@ -1544,10 +1551,6 @@
 	display: none;
 }
 
-.cn-look-board .cn-widget-wrapper__actions .button-vue.cn-detail-page__catalog-add:has(> .button-vue__wrapper > .button-vue__text:not(:empty)):where(:not(.cn-look-nextcloud *)) {
-	--button-size: var(--cn-board-control-height);
-}
-
 /* A map in a board card has the board's control corners (DqZaak, DqZaakMeer
    "Locaties"); overflow keeps the tiles inside them. */
 .cn-look-board .cn-map-widget:not(.cn-map-widget--fullscreen) {

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

@@ -52,13 +52,11 @@
 	grid-row: 2;
 }
 
-/* A list page's breadcrumb and note read 15px; the case page's row stays 14px. */
-.cn-look-board .cn-index-page .cn-page-header .cn-header-trail.cn-detail-page__header-row2 {
-	font-size: 15px;
-}
-
-.cn-look-board .cn-index-page .cn-header-trail.cn-detail-page__header-row2 .cn-detail-page__breadcrumbs .vue-crumb .button-vue.button-vue {
-	font-size: 15px;
+/* The note after the breadcrumb ("38 contracten bij 21 leveranciers") is 14px
+   muted on every Dq list board (37 of 37).
+   @spec openspec/changes/board-index-header-meta-14/specs/index-page/spec.md */
+.cn-look-board .cn-index-page .cn-page-header .cn-header-trail .cn-detail-page__header-meta {
+	font-size: 14px;
 }
 
 .cn-look-board .cn-index-page .cn-page-header .cn-header-trail ~ .cn-page-header__description {
@@ -982,6 +980,17 @@
 	text-decoration: none;
 }
 
+/* `rowTitle: "strong"` (DqZaaktypeStatussen "Statussen", "Resultaten"): the
+   name column of a card's list, the cell's 14px at weight 600 in the main
+   ink, no underline; the row stays a link.
+   @spec openspec/changes/table-strong-title/specs/table-strong-title/spec.md#requirement-a-tables-title-column-can-read-as-a-strong-name */
+.cn-look-board .cn-table-container--board.cn-table-container--title-strong .cn-data-table td.cn-table-col--title {
+	color: var(--color-main-text);
+	font-size: 14px;
+	font-weight: 600;
+	text-decoration: none;
+}
+
 /* An avatar in the title column (PtAccounts): a 32px chip circle, 10px before
    the name, the e-mail under the name beside it. The name keeps the title's
    weight and size, and its underline: an inline-flex box is atomic, so the
@@ -2101,3 +2110,77 @@
 .cn-look-board .cn-index-page--with-side-panel:not(.cn-look-nextcloud *) > .cn-index-page__quick-filter-row {
 	margin-bottom: calc(var(--cn-board-section-gap) + 12px);
 }
+
+/* ---- The side panel's filters as checkbox lists (DqZakenSorteren) ------- */
+/* "Filters" with "Alles wissen" beside it; per field its 14px semibold label
+   over rows of a checkbox, the value and its count in 13px muted at the end,
+   32px each.
+   @spec openspec/changes/board-sidebar-filters-as-checkbox-lists/specs/index-sidebar/spec.md#requirement-the-board-look-draws-a-short-filter-as-a-checkbox-list-with-counts */
+.cn-look-board .cn-index-sidebar__filters-head {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: 8px;
+	margin-bottom: 14px;
+}
+
+.cn-look-board .cn-index-sidebar__filters-head h3 {
+	margin: 0;
+	font-size: 15px;
+	font-weight: 700;
+}
+
+.cn-look-board .cn-index-sidebar__filters-clear {
+	min-height: 0;
+	margin: 0;
+	padding: 0;
+	border: 0;
+	background: transparent;
+	color: var(--color-primary-element);
+	font-size: 14px;
+	font-weight: 600;
+	text-decoration: underline;
+	cursor: pointer;
+}
+
+.cn-look-board .cn-index-sidebar__filter-group:has(> .cn-index-sidebar__checklist) .cn-index-sidebar__filter-label {
+	font-size: 14px;
+	font-weight: 600;
+}
+
+.cn-look-board .cn-index-sidebar__checklist {
+	display: flex;
+	flex-direction: column;
+	gap: 4px;
+	margin: 0;
+	padding: 0;
+	border: 0;
+}
+
+.cn-look-board .cn-index-sidebar__checklist-row {
+	display: flex;
+	align-items: center;
+	gap: 10px;
+	min-height: 32px;
+	font-size: 14px;
+	cursor: pointer;
+}
+
+.cn-look-board .cn-index-sidebar__checklist-row > input[type='checkbox'] {
+	width: 18px;
+	min-width: 18px;
+	height: 18px;
+	min-height: 18px;
+	margin: 0;
+	accent-color: var(--color-primary-element);
+}
+
+.cn-look-board .cn-index-sidebar__checklist-label {
+	flex: 1;
+	min-width: 0;
+}
+
+.cn-look-board .cn-index-sidebar__checklist-count {
+	color: var(--color-text-maxcontrast);
+	font-size: 13px;
+}