@conduction/nextcloud-vue 2.103.0 → 2.105.0

package/src/components/CnIndexPage/CnIndexPage.vue

@@ -191,8 +191,9 @@
 			:listIcon="listIcon"
 			:showSortSelect="showSortSelect"
 			:sortOptions="sortSelectOptions"
-			:sortValue="sortSelectValue"
-			:showSearch="inlineSearch || isBoardLook"
+			:sortValue="effectiveSortSelectValue"
+			:showSearch="search !== false && (inlineSearch || isBoardLook)"
+			:searchPlacement="searchPlacement"
 			:searchValue="effectiveSearchValue"
 			:searchPlaceholder="presented('searchPlaceholder') ? cnTranslate(presented('searchPlaceholder')) : presented('searchPlaceholder')"
 			:showCountWithSearch="showCountWithSearch"
@@ -209,7 +210,7 @@
 			:bulkActions="mergedBulkActions"
 			:documentationUrl="documentationUrl"
 			:documentationLabel="documentationLabel || undefined"
-			@sortChange="$emit('sort-change', $event)"
+			@sortChange="onSortSelectChange"
 			@add="onAddClick"
 			@clearSelection="onSelect([])"
 			@removeFilter="onRemoveActiveFilter"
@@ -675,8 +676,8 @@
 					:partial="folderSidebarPartial"
 					:filesPath="folderSidebar.filesPath || '/'"
 					:selectedId="selectedFolderId"
-					:allLabel="folderSidebar.allLabel || undefined"
-					:title="folderSidebar.title || ''"
+					:allLabel="folderSidebar.allLabel ? cnTranslate(folderSidebar.allLabel) : undefined"
+					:title="folderSidebar.title ? cnTranslate(folderSidebar.title) : ''"
 					:idField="folderPassthroughIdField"
 					:nameField="folderPassthroughNameField"
 					:allowCreate="Boolean(folderSidebar.allowCreate)"
@@ -701,6 +702,15 @@
 				<!-- @slot before-collection Content rendered above the collection in EVERY view mode (table, cards, list, map) — e.g. a folder/group strip that must stay visually separate from the objects instead of masquerading as rows or cards. -->
 				<slot name="before-collection" />
 
+				<!-- The selected folder as a heading above the list (a group on
+				     DqAfdelingen: its name, then its parent and member count). -->
+				<div v-if="scopeHeading" class="cn-index-page__scope-heading" data-testid="cn-index-page-scope-heading">
+					<h2 class="cn-index-page__scope-title">
+						{{ scopeHeading.name }}
+					</h2>
+					<span v-if="scopeHeading.subtitle" class="cn-index-page__scope-subtitle" data-testid="cn-index-page-scope-subtitle">{{ scopeHeading.subtitle }}</span>
+				</div>
+
 				<!-- Loading state — initial fetch only; a background refresh keeps the table visible -->
 				<div v-if="showInitialLoader" class="cn-index-page__loading">
 					<!-- name gives NcLoadingIcon a non-empty aria-label (WCAG role-img-alt); empty name ships an unlabeled role="img" -->
@@ -1278,6 +1288,7 @@ import {
 import { reportBindingProblems } from '../../utils/diagnostics.js'
 import { fetchGroupedCounts } from '../../utils/fetchAggregate.js'
 import { fetchFilterCounts, fetchListTotal } from '../../utils/fetchFilterCounts.js'
+import { unwrapAppConfig } from '../../utils/formatMetric.js'
 import { buildExportUrl } from '../../utils/indexExportHelpers.js'
 import { lensUnavailableText } from '../../utils/lensAvailability.js'
 import { isModifiedClick, openRowTarget } from '../../utils/linkNavigation.js'
@@ -1300,6 +1311,7 @@ import { DEFAULT_ROW_INDICATOR_CAP } from '../../utils/rowIndicators.js'
 import { buildRouteQueryFromViewState, buildViewCreatePayload, extractViewState, extractViewStateFromRouteQuery, normalizeSharedWith, savedViewScope, viewMatchesScope } from '../../utils/savedViewHelpers.js'
 import { columnsFromSchema, fieldsFromSchema } from '../../utils/schema.js'
 import { resolveScopeLayout, resolveScopePresentation } from '../../utils/scopeListLayout.js'
+import { orderToSortKeys, sameSortKeys } from '../../utils/sortOrder.js'
 import { dispatchObjectCreated } from '../../utils/walkthroughSignals.js'
 import { CnActionButtons } from '../CnActionButtons/index.js'
 import { CnActionsBar } from '../CnActionsBar/index.js'
@@ -1666,6 +1678,8 @@ export default {
 		cnCustomComponents: { default: () => ({}) },
 		/** The permissions the user holds, provided by CnAppRoot; for gated page tabs. */
 		cnPermissions: { default: () => [] },
+		/** The app config an ancestor provides, for `@config.<key>` in quick-filter labels. */
+		cnAppConfig: { default: null },
 		/** The app id CnAppRoot provides, for the plural form of `countSubtitle`. */
 		cnAppId: { default: '' },
 		/**
@@ -1969,7 +1983,10 @@ export default {
 		 * case" (manifest `config.headerButtons`). Each is `{ label?, action,
 		 * variant?, icon?, format?, id? }`: `action` is `add` (the Add flow;
 		 * its label defaults to the Add label), `export` (the export leaf in
-		 * `format`, `csv` by default, else the export dialog), `import`,
+		 * `format`, `csv` by default, else the export dialog; with `run` the
+		 * `headerActions` entry of that id; on an `entitySource` page without
+		 * `run` and without a `@mass-export` listener it is not drawn),
+		 * `import`,
 		 * `refresh`, `save-view` (the save-current-view dialog: the board's
 		 * "Zoekopdracht opslaan", label "Save view" by default), or the id of a
 		 * `headerActions` entry; `variant` is
@@ -2149,6 +2166,20 @@ export default {
 			validator: (v) => ['', 'toolbar'].includes(v),
 		},
 
+		/**
+		 * Where the board look's search field sits (manifest
+		 * `config.searchPlacement`): `''` (the default) opens row 2 with it,
+		 * `'toolbar'` puts it on row 1 before the Filter button and the view
+		 * switch (DqTeamwachtrij).
+		 *
+		 * @type {''|'toolbar'}
+		 */
+		searchPlacement: {
+			type: String,
+			default: '',
+			validator: (v) => ['', 'toolbar'].includes(v),
+		},
+
 		/**
 		 * How the quick filters render: `'chips'` (pill strip, default) or
 		 * `'dropdown'` (a single `NcSelect`). Sourced from the manifest as
@@ -3095,6 +3126,29 @@ export default {
 			default: false,
 		},
 
+		/**
+		 * `false` draws no inline search in the actions bar, also in the board
+		 * look, which otherwise draws one on every index page. Fed from the
+		 * manifest as `pages[].config.search`.
+		 */
+		search: {
+			type: Boolean,
+			default: true,
+		},
+
+		/**
+		 * The app config `@config.<key>` tokens resolve against, in quick-filter
+		 * filters and labels (`"Residence @config.municipality"`), as on the
+		 * dashboard and detail pages. Merged over a config an ancestor provides
+		 * on `cnAppConfig`. Manifest: `config.appConfig`.
+		 *
+		 * @type {object}
+		 */
+		appConfig: {
+			type: Object,
+			default: () => ({}),
+		},
+
 		/**
 		 * Keep the "Showing X of Y" counter visible beside the inline search field,
 		 * after any `#after-search` controls (only relevant with `inlineSearch`,
@@ -3162,12 +3216,28 @@ export default {
 			default: () => [],
 		},
 
-		/** Selected value of the standalone sort dropdown (controlled). */
+		/**
+		 * Selected value of the standalone sort dropdown. Empty lets a
+		 * self-fetch page show the option matching its current order.
+		 */
 		sortSelectValue: {
 			type: String,
 			default: '',
 		},
 
+		/**
+		 * The order a self-fetch page opens on when neither the address nor
+		 * `sortKeys`/`sortKey` gives one (manifest `config.defaultOrder`):
+		 * `"-createdAt"`, `"priority:desc,title"`, an `_order` map or a
+		 * `[{ key, order }]` list.
+		 *
+		 * @type {string|object|Array}
+		 */
+		defaultOrder: {
+			type: [String, Object, Array],
+			default: '',
+		},
+
 		/** MDI icon name for the list view-toggle option (manifest `config.listIcon`) */
 		listIcon: {
 			type: String,
@@ -4896,6 +4966,60 @@ export default {
 			return match || null
 		},
 
+		/**
+		 * The heading above the list for the selected folder: on a `groups`
+		 * pane (or with `folderSidebar.heading: true`), its name and, under
+		 * it, its parent folder and its count. The count reads
+		 * `folderSidebar.countText` (`{count}`, through the app's translate),
+		 * else "{count} members" on a groups pane.
+		 *
+		 * @return {{name: string, subtitle: string}|null} The heading, or null on All.
+		 */
+		scopeHeading() {
+			const cfg = this.folderSidebar
+			const scope = this.activeScope
+			if (!cfg || !scope || !(cfg.source === 'groups' || cfg.heading === true)) {
+				return null
+			}
+			const idField = this.folderPassthroughIdField
+			const name = String(this.getByPath(scope, this.folderPassthroughNameField) ?? this.selectedFolderId)
+			const parentId = scope.parentId ?? scope.parent ?? null
+			const parent = parentId === null || parentId === undefined
+				? null
+				: this.folderSidebarFolders.find((f) => f && String(this.getByPath(f, idField)) === String(parentId))
+			const parts = []
+			if (parent) {
+				parts.push(String(this.getByPath(parent, this.folderPassthroughNameField) ?? parentId))
+			}
+			if (typeof scope.count === 'number') {
+				if (cfg.countText) {
+					parts.push(this.cnTranslate(cfg.countText).replace('{count}', String(scope.count)))
+				} else if (cfg.source === 'groups') {
+					parts.push(n('nextcloud-vue', '{count} member', '{count} members', scope.count, { count: scope.count }))
+				}
+			}
+			return { name, subtitle: parts.join(' · ') }
+		},
+
+		/**
+		 * The sort select's shown value: `sortSelectValue` when the host
+		 * controls it, else on a self-fetch page the option whose order is the
+		 * list's current order (a header click that matches one shows it).
+		 *
+		 * @return {string} The option value, or '' when none matches.
+		 */
+		effectiveSortSelectValue() {
+			if (this.sortSelectValue) {
+				return this.sortSelectValue
+			}
+			if (!this.isSelfFetchMode || !this.list || !this.list.sortKeys) {
+				return ''
+			}
+			const current = this.list.sortKeys.value || []
+			const match = (this.sortSelectOptions || []).find((o) => o && sameSortKeys(this.sortSelectKeys(o), current))
+			return match ? match.value : ''
+		},
+
 		/**
 		 * The `x-index` block the active scope's own schema row carries, for a
 		 * folder list derived from a register. Empty for every other source:
@@ -6570,11 +6694,21 @@ export default {
 		effectiveQuickFilters() {
 			const own = withPersonalLenses(this.presented('quickFilters') || this.generatedQuickFilters, this.personalLenses)
 			if (own && own.length > 0) {
-				return own
+				return own.map((tab) => this.withConfigLabels(tab))
 			}
 			return (this.isNamedSource && this.namedQuickFilters) || null
 		},
 
+		/**
+		 * The app config `@config.<key>` tokens resolve against: the `appConfig`
+		 * prop over a config an ancestor provides.
+		 *
+		 * @return {object} The config.
+		 */
+		effectiveAppConfig() {
+			return { ...unwrapAppConfig(this.cnAppConfig), ...(this.appConfig || {}) }
+		},
+
 		/**
 		 * Whether the Add button renders. A named source that declares
 		 * `showAdd: false` suppresses it (a task is created by a flow, never
@@ -6669,6 +6803,7 @@ export default {
 						variant: button.variant === 'primary' ? 'primary' : 'secondary',
 						icon,
 						format: button.format === 'excel' ? 'excel' : 'csv',
+						run: typeof button.run === 'string' ? button.run : '',
 						items: Array.isArray(button.items)
 							? button.items.filter((item) => (typeof item === 'string' && item !== '')
 								|| (item && typeof item === 'object' && typeof item.heading === 'string' && item.heading !== ''))
@@ -6676,6 +6811,10 @@ export default {
 					}
 				})
 				.filter((button) => button.label !== '')
+				// An Export with nothing to export through is not drawn: a
+				// named or endpoint source with no `run` and no `@mass-export`
+				// listener.
+				.filter((button) => button.action !== 'export' || this.headerExportAvailable(button))
 				// The Actions menu lists the page's header actions (or the
 				// entries its `items` name), so a menu with nothing to list
 				// is not drawn.
@@ -8464,7 +8603,9 @@ export default {
 			if (button.action === 'add') {
 				this.onAddClick()
 			} else if (button.action === 'export') {
-				if (this.register && this.exportSchemaSlug) {
+				if (button.run) {
+					this.onHeaderAction({ action: button.run, id: button.run })
+				} else if (this.register && this.exportSchemaSlug) {
 					this.onExportClick(button.format)
 				} else {
 					this.showExportDialog = true
@@ -8480,6 +8621,25 @@ export default {
 			}
 		},
 
+		/**
+		 * Whether a header Export has something to export through. Any page
+		 * listing OpenRegister objects (self-fetch or the consumer's
+		 * `objects`) keeps it; a named or endpoint source (`entitySource`)
+		 * needs a `run` naming one of the page's header actions, or a
+		 * `@mass-export` listener.
+		 *
+		 * @spec openspec/changes/index-header-export-source/specs/index-page/spec.md#requirement-a-header-export-is-drawn-only-when-it-can-export
+		 * @param {{run?: string}} button The resolved header button.
+		 * @return {boolean}
+		 */
+		headerExportAvailable(button) {
+			if (!this.isNamedSource || (button && button.run)) {
+				return true
+			}
+			const props = this.$ && this.$.vnode && this.$.vnode.props
+			return Boolean(props && typeof props.onMassExport === 'function')
+		},
+
 		/**
 		 * Click dispatch from CnActionsBar's `@header-action`. Looks
 		 * up the resolved entry by id, invokes its handler if any,
@@ -8600,6 +8760,65 @@ export default {
 			this.$emit('quick-filter-change', this.selectedQuickFilterIndices)
 		},
 
+		/**
+		 * The sort keys a sort-select option stands for: its `order` (any
+		 * `orderToSortKeys` form), else its `value` read as an order.
+		 *
+		 * @param {object} option A `sortSelectOptions` entry.
+		 * @return {Array<{key: string, order: string}>} The sort keys.
+		 */
+		sortSelectKeys(option) {
+			if (!option) {
+				return []
+			}
+			return orderToSortKeys(option.order !== undefined ? option.order : option.value)
+		},
+
+		/**
+		 * A choice in the sort select. On a self-fetch page it orders the list
+		 * as a header click does (`_order`, kept in the address); every page
+		 * also emits `sort-change` with the value.
+		 *
+		 * @param {string} value The chosen option's value.
+		 * @return {void}
+		 */
+		onSortSelectChange(value) {
+			const option = (this.sortSelectOptions || []).find((o) => o && o.value === value)
+			const keys = this.sortSelectKeys(option)
+			if (option && keys.length > 0 && this.isSelfFetchMode && typeof this.list.onSort === 'function') {
+				this.list.onSort({ key: keys[0].key, order: keys[0].order, keys })
+				this.persistViewStateToRoute(this.currentViewState())
+			}
+			this.$emit('sort-change', value)
+		},
+
+		/**
+		 * A quick filter with `@config.<key>` in its `label` or `activeLabel`
+		 * (`"Residence @config.municipality"`): the label translated first, then
+		 * each token replaced by its configured value. A key the config does
+		 * not hold leaves its token in place. Other tabs pass unchanged.
+		 *
+		 * @param {object} tab A quick-filter tab.
+		 * @return {object} The tab, with its labels resolved.
+		 */
+		withConfigLabels(tab) {
+			if (!tab || typeof tab !== 'object') {
+				return tab
+			}
+			const hasToken = (value) => typeof value === 'string' && value.includes('@config.')
+			if (!hasToken(tab.label) && !hasToken(tab.activeLabel)) {
+				return tab
+			}
+			const config = this.effectiveAppConfig
+			const fill = (value) => (hasToken(value)
+				? this.cnTranslate(value).replace(/@config\.([A-Za-z0-9_.-]*[A-Za-z0-9_])/g, (token, key) => {
+						const found = this.getByPath(config, key)
+						return found === undefined || found === null || found === '' ? token : String(found)
+					})
+				: value)
+			return { ...tab, label: fill(tab.label), activeLabel: fill(tab.activeLabel) }
+		},
+
 		/**
 		 * @param {{key: string, order: string, keys?: Array<{key: string, order: string}>}} payload Sort change from CnDataTable.
 		 * @return {void}

package/src/components/CnIndexPage/useSelfFetchList.js

@@ -7,6 +7,7 @@ import { useObjectStore } from '../../store/index.js'
 // without pulling in this composable's index-only sidebar/subscription wiring.
 import { withPersonalLenses } from '../../utils/personalLenses.js'
 import { parseSortKeysFromQuery, resolveFilterMap, resolveQueryFilters } from '../../utils/routeFilters.js'
+import { orderToSortKeys } from '../../utils/sortOrder.js'
 
 function resolveInitialQuickFilterIndex(quickFilters) {
 	const tabs = Array.isArray(quickFilters) ? quickFilters : null
@@ -170,7 +171,8 @@ export function useSelfFetchList(props, instance, inject, extras = {}) {
 		const objCtx = unwrapCtx(objectCtxRaw)
 		const base = (objCtx && typeof objCtx === 'object') ? { ...objCtx } : {}
 		base.workspace = unwrapCtx(workspaceCtxRaw) || {}
-		base.config = unwrapCtx(appConfigRaw) || {}
+		// The page's own `appConfig` prop wins over a config an ancestor provides.
+		base.config = { ...(unwrapCtx(appConfigRaw) || {}), ...(props.appConfig || {}) }
 		return base
 	}
 
@@ -182,7 +184,7 @@ export function useSelfFetchList(props, instance, inject, extras = {}) {
 	// never again. Stringified (like CnDeltaWidget's `sourceKey`) so the
 	// watcher fires on real content changes only, not object identity.
 	const workspaceSignature = computed(() => JSON.stringify(unwrapCtx(workspaceCtxRaw) || {}))
-	const appConfigSignature = computed(() => JSON.stringify(unwrapCtx(appConfigRaw) || {}))
+	const appConfigSignature = computed(() => JSON.stringify({ ...(unwrapCtx(appConfigRaw) || {}), ...(props.appConfig || {}) }))
 
 	// Pass register/schema in their positional id slots (not as a {register, schema} object as
 	// second arg) — that previously made fetch URLs go to `/api/objects/undefined/[object Object]`.
@@ -219,9 +221,12 @@ export function useSelfFetchList(props, instance, inject, extras = {}) {
 	// legacy single-key `sortKey`/`sortOrder` props.
 	const initialRoute = instance && instance.proxy && instance.proxy.$route
 	// The page's own order, which a lens without a `sort` goes back to.
+	// `defaultOrder` (manifest `config.defaultOrder`) is the order of last
+	// resort, after `sortKeys` and `sortKey`.
+	const defaultOrderKeys = orderToSortKeys(props.defaultOrder)
 	const pageSortKeys = (Array.isArray(props.sortKeys) && props.sortKeys.length > 0)
 		? props.sortKeys
-		: (props.sortKey ? [{ key: props.sortKey, order: props.sortOrder || 'asc' }] : [])
+		: (props.sortKey ? [{ key: props.sortKey, order: props.sortOrder || 'asc' }] : defaultOrderKeys)
 	// The lens that is active on mount may set its own order.
 	const initialTabs = withPersonalLenses(props.quickFilters, props.personalLenses)
 	const initialTabSort = (!isMultiQuickFilter && Array.isArray(initialTabs))
@@ -230,6 +235,7 @@ export function useSelfFetchList(props, instance, inject, extras = {}) {
 	const initialSortKeys = parseSortKeysFromQuery(initialRoute)
 		|| initialTabSort
 		|| (Array.isArray(props.sortKeys) && props.sortKeys.length > 0 ? props.sortKeys : undefined)
+		|| (!props.sortKey && defaultOrderKeys.length > 0 ? defaultOrderKeys : undefined)
 	// Same deep-link restore for facet filters and search, so opening a
 	// shared/bookmarked URL reproduces the same view (CnIndexPage persists
 	// both back to the route on change).

package/src/components/CnNoticeWidget/CnNoticeWidget.vue

@@ -0,0 +1,153 @@
+<!--
+  - SPDX-FileCopyrightText: 2026 Conduction B.V.
+  - SPDX-License-Identifier: EUPL-1.2
+-->
+<template>
+	<section
+		v-if="resolvedText || resolvedTitle"
+		class="cn-notice-widget"
+		:class="`cn-notice-widget--${resolvedVariant}`"
+		:aria-label="resolvedTitle || null"
+		role="note"
+		data-testid="cn-notice-widget">
+		<CnIcon
+			class="cn-notice-widget__icon"
+			:name="resolvedIcon"
+			:size="18"
+			aria-hidden="true" />
+		<p class="cn-notice-widget__text">
+			<strong v-if="resolvedTitle" class="cn-notice-widget__title" data-testid="cn-notice-widget-title">{{ resolvedTitle }}</strong>{{ resolvedTitle && resolvedText ? ' ' : '' }}{{ resolvedText }}
+		</p>
+	</section>
+</template>
+
+<script>
+import { CnIcon } from '../CnIcon/index.js'
+
+/** The tones a notice takes, and the icon each shows by default. */
+const VARIANT_ICONS = Object.freeze({
+	info: 'InformationOutline',
+	warning: 'AlertOutline',
+	error: 'AlertCircleOutline',
+	success: 'CheckCircleOutline',
+})
+
+/**
+ * CnNoticeWidget — a toned notice box: an icon, a bold title and a line of
+ * text in one rounded box, as the boards draw a warning beside a record
+ * (DqSociaalDomein "Bijzondere persoonsgegevens: gezondheid. Elke inzage
+ * wordt gelogd met het doel."). Usable in a detail page's side column, its
+ * body grid and on a dashboard as widget type `notice`; the surface applies
+ * the widget's `visibleWhen`.
+ *
+ * `content`: `{ variant?, title?, text, icon? }`. `variant` is `info`
+ * (default), `warning`, `error` or `success`; `title` and `text` go through
+ * the host's translate; `icon` names a CnIcon instead of the variant's own.
+ *
+ * ```vue
+ * <CnNoticeWidget :content="{ variant: 'warning', title: 'Special category data: health.', text: 'Every view is logged with its purpose.' }" />
+ * ```
+ */
+export default {
+	name: 'CnNoticeWidget',
+
+	components: { CnIcon },
+
+	inject: {
+		/** The host app's translate function (CnAppRoot `cnTranslate`). */
+		cnTranslate: { default: () => (key) => key },
+	},
+
+	props: {
+		/**
+		 * The notice: `{ variant?, title?, text, icon? }`.
+		 *
+		 * @type {{variant?: string, title?: string, text?: string, icon?: string}}
+		 */
+		content: {
+			type: Object,
+			default: () => ({}),
+		},
+	},
+
+	computed: {
+		/** @return {string} `info`, `warning`, `error` or `success`. */
+		resolvedVariant() {
+			const variant = this.content && this.content.variant === 'danger' ? 'error' : this.content && this.content.variant
+			return Object.hasOwn(VARIANT_ICONS, variant) ? variant : 'info'
+		},
+
+		/** @return {string} The icon name. */
+		resolvedIcon() {
+			const icon = this.content && this.content.icon
+			return typeof icon === 'string' && icon !== '' ? icon : VARIANT_ICONS[this.resolvedVariant]
+		},
+
+		/** @return {string} The title through the host translate. */
+		resolvedTitle() {
+			return this.translate(this.content && this.content.title)
+		},
+
+		/** @return {string} The text through the host translate. */
+		resolvedText() {
+			return this.translate(this.content && this.content.text)
+		},
+	},
+
+	methods: {
+		/**
+		 * @param {unknown} text A manifest string.
+		 * @return {string} Its translation, '' for anything but a non-empty string.
+		 */
+		translate(text) {
+			if (typeof text !== 'string' || text === '') {
+				return ''
+			}
+			return typeof this.cnTranslate === 'function' ? this.cnTranslate(text) : text
+		},
+	},
+}
+</script>
+
+<style scoped>
+.cn-notice-widget {
+	display: flex;
+	align-items: flex-start;
+	gap: 10px;
+	padding: 14px 16px;
+	border-radius: var(--cn-board-card-radius, 12px);
+	font-size: 14px;
+	line-height: 1.5;
+	background: color-mix(in srgb, var(--color-info, #0071ad) 10%, var(--color-main-background));
+	color: var(--color-main-text);
+}
+
+.cn-notice-widget--warning {
+	background: var(--color-warning-light, #fff4de);
+	color: var(--color-warning-text, #7a4f00);
+}
+
+.cn-notice-widget--error {
+	background: color-mix(in srgb, var(--color-error, #db0606) 10%, var(--color-main-background));
+	color: var(--color-error-text, var(--color-main-text));
+}
+
+.cn-notice-widget--success {
+	background: color-mix(in srgb, var(--color-success, #2d7b41) 10%, var(--color-main-background));
+	color: var(--color-success-text, var(--color-main-text));
+}
+
+.cn-notice-widget__icon {
+	flex: 0 0 auto;
+	margin-top: 2px;
+}
+
+.cn-notice-widget__text {
+	margin: 0;
+	overflow-wrap: anywhere;
+}
+
+.cn-notice-widget__title {
+	font-weight: 700;
+}
+</style>

package/src/components/CnNoticeWidget/index.js

@@ -0,0 +1,12 @@
+/**
+ * SPDX-FileCopyrightText: 2026 Conduction B.V.
+ * SPDX-License-Identifier: EUPL-1.2
+ *
+ * CnNoticeWidget — a toned notice box (icon, bold title, text) for a side
+ * column, a detail body or a dashboard (widget type `notice`).
+ */
+
+import CnNoticeWidget from './CnNoticeWidget.vue'
+
+export { CnNoticeWidget }
+export default CnNoticeWidget