@conduction/nextcloud-vue 2.69.0 → 2.70.0

package/dist/nextcloud-vue.cjs.js.map

@@ -1,4 +1,4 @@
 [diffend] Oversized file quarantined before diffing.
 name: package/dist/nextcloud-vue.cjs.js.map
-size: 35499103 bytes
-sha256: fe1cf925335eec45a51c59903eb32d313c16bdcbdaf047c4b80fad05712db22a
+size: 35617052 bytes
+sha256: 8d17da3a5f3f43dba63932341520f63af085b4d61c1b614631488abb6ecd41d8

package/dist/nextcloud-vue.css

@@ -1330,6 +1330,21 @@ a.cn-kpi-card--stacked:focus-visible {
 	text-decoration: none !important;
 }
 
+/* A stacked stats block (CnStatsBlock `layout: "stacked"`): its unit
+   ("decisions") goes on a muted line of its own under the number, where the
+   stat tile puts its caption (zuiddrecht-pixel-gaps-3). */
+.cn-kpi-card--stacked .cn-stats-block__count {
+	flex-direction: column;
+	align-items: flex-start;
+	gap: var(--cn-kpi-stacked-gap, 6px);
+}
+
+.cn-kpi-card--stacked .cn-stats-block__count-label {
+	font-size: var(--cn-kpi-label-size, 13px);
+	font-weight: 500;
+	color: var(--color-text-maxcontrast);
+}
+
 /* Filled: the card draws its own grey box, for a KPI that is NOT already
    inside a wrapper that draws one. Opt-in via `content.flat: false`. */
 .cn-kpi-card--filled {
@@ -2283,6 +2298,18 @@ a.cn-kpi-card--stacked:focus-visible {
 	padding: calc(5 * var(--default-grid-baseline));
 }
 
+/* The board's header buttons (`headerButtons`) at the end of the title row,
+   centred on the title and its count line. They wrap under the title on a
+   narrow page. */
+.cn-index-page__header-buttons {
+	display: flex;
+	flex-wrap: wrap;
+	align-items: center;
+	align-self: center;
+	gap: calc(2 * var(--default-grid-baseline));
+	margin-inline-start: auto;
+}
+
 .cn-index-page__below-header {
     margin-bottom: calc(4 * var(--default-grid-baseline));
 }
@@ -2862,6 +2889,16 @@ a.cn-kpi-card--stacked:focus-visible {
 	row-gap: var(--cn-detail-header-row-gap, 22px);
 }
 
+/* That wrap must not take the actions off the title row. With `flex-basis:
+   auto` a long title claimed its whole text width, so the actions wrapped
+   under it. From a zero basis the title takes what the actions leave and
+   wraps (two lines, then an ellipsis) inside it; only on a page too narrow
+   for 16rem of title beside the actions do the actions drop a row. */
+.cn-detail-page__header--with-widget > :first-child {
+	flex: 1 1 0;
+	min-width: min(100%, 16rem);
+}
+
 .cn-detail-page__header-widget {
 	flex: 1 0 100%;
 	min-width: 0;
@@ -6173,6 +6210,17 @@ svg.leaflet-image-layer.leaflet-interactive path {
 	margin: 0;
 	text-transform: uppercase;
 }
+
+/* The title is a small kicker, not a section heading, but it is an <h3> (or
+   whatever `titleTag` says) for the outline, and a theme that sizes every
+   heading with !important (thematiq's nldesign sheet: `h3 { font-size:
+   var(--nldesign-component-heading-3-font-size) !important }`) blew it up to
+   an 18px uppercase heading. Only !important beats !important; the doubled
+   class makes this the more specific rule. Without such a theme the size is
+   the 0.85em above, unchanged. */
+.cn-next-step-card__title.cn-next-step-card__title[data-v-3a9ce962] {
+	font-size: 0.85em !important;
+}
 .cn-next-step-card__list[data-v-3a9ce962] {
 	display: grid;
 	gap: calc(2 * var(--default-grid-baseline));
@@ -16465,6 +16513,14 @@ a.cn-xwiki-card__title[data-v-54e85fe3]:hover {
 	gap: 16px;
 	width: 100%;
 }
+
+/* `content.inset: true`: the board's inset inside the card (zuiddrecht-pixel-
+   gaps-3). A dashboard renders its widgets flush, so without it the strip ran
+   from card edge to card edge. Theme hook: --cn-widget-board-inset. */
+.cn-stacked-bar--inset[data-v-c0bac1a2] {
+	box-sizing: border-box;
+	padding: var(--cn-widget-board-inset, 16px 24px 22px);
+}
 .cn-stacked-bar__state[data-v-c0bac1a2] {
 	display: flex;
 	align-items: center;
@@ -16980,6 +17036,25 @@ button.cn-stages-widget__bar-label[data-v-358fde0f] {
 	line-height: inherit;
 	cursor: pointer;
 }
+
+/* The same label under a theme that restyles every button with !important
+   (thematiq's nldesign sheet: `button:not(.action-button)` gets 8px 16px
+   padding, `min-width: max-content` and `overflow: visible`), and under core's
+   `margin: 3px 3px 3px 0`, which outranks the scoped base rule. Together they
+   put each clickable label about 10px below the current step's <span> and let
+   a long label run over its neighbours, so eight Woo steps overlapped instead
+   of ending in an ellipsis. Only !important beats !important; this selector is
+   the more specific of the two. Without such a theme nothing changes: these
+   are the values the base rule already sets. */
+button.cn-stages-widget__bar-label.cn-stages-widget__bar-label[data-v-358fde0f] {
+	min-width: 0 !important;
+	margin: 0 !important;
+	padding: 0 !important;
+	border-width: 0 !important;
+	overflow: hidden !important;
+	text-overflow: ellipsis !important;
+	white-space: nowrap !important;
+}
 button.cn-stages-widget__bar-label[aria-disabled="true"][data-v-358fde0f] {
 	cursor: not-allowed;
 }
@@ -17459,6 +17534,21 @@ a.cn-kpi-card--stacked:focus-visible {
 	text-decoration: none !important;
 }
 
+/* A stacked stats block (CnStatsBlock `layout: "stacked"`): its unit
+   ("decisions") goes on a muted line of its own under the number, where the
+   stat tile puts its caption (zuiddrecht-pixel-gaps-3). */
+.cn-kpi-card--stacked .cn-stats-block__count {
+	flex-direction: column;
+	align-items: flex-start;
+	gap: var(--cn-kpi-stacked-gap, 6px);
+}
+
+.cn-kpi-card--stacked .cn-stats-block__count-label {
+	font-size: var(--cn-kpi-label-size, 13px);
+	font-weight: 500;
+	color: var(--color-text-maxcontrast);
+}
+
 /* Filled: the card draws its own grey box, for a KPI that is NOT already
    inside a wrapper that draws one. Opt-in via `content.flat: false`. */
 .cn-kpi-card--filled {
@@ -18405,6 +18495,30 @@ to { background-position: -200% 0;
 	flex: 1 1 320px;
 	width: auto;
 }
+
+/* The emblem beside the greeting (`content.emblem`): on one row with the
+   date line and heading, centred on them, as LpStart draws it. */
+.cn-header-widget--with-emblem[data-v-1b97430f] {
+	display: flex;
+	column-gap: var(--cn-header-emblem-gap, 16px);
+}
+.cn-header-widget--with-emblem .cn-header-widget__content[data-v-1b97430f] {
+	flex: 1 1 auto;
+	width: auto;
+	min-width: 0;
+}
+.cn-header-widget__emblem[data-v-1b97430f] {
+	position: relative;
+	z-index: 1;
+	flex: none;
+	align-self: center;
+	height: var(--cn-header-emblem-size, 52px);
+	width: auto;
+}
+.cn-header-widget__emblem--theme[data-v-1b97430f] {
+	width: var(--cn-header-emblem-size, 52px);
+	background: var(--nldesign-emblem-url) center / contain no-repeat;
+}
 .cn-header-widget__views[data-v-1b97430f] {
 	position: relative;
 	z-index: 1;
@@ -19507,6 +19621,14 @@ to { background-position: -200% 0;
 .cn-week-strip[data-v-153dd4cb] {
 	width: 100%;
 }
+
+/* `content.inset: true`: the board's inset inside the card (zuiddrecht-pixel-
+   gaps-3). A dashboard renders its widgets flush, so without it the strip ran
+   from card edge to card edge. Theme hook: --cn-widget-board-inset. */
+.cn-week-strip--inset[data-v-153dd4cb] {
+	box-sizing: border-box;
+	padding: var(--cn-widget-board-inset, 16px 24px 22px);
+}
 .cn-week-strip__state[data-v-153dd4cb] {
 	display: flex;
 	align-items: center;
@@ -30052,6 +30174,19 @@ to {
 }
 
 
+/* `separator`: a text separator in place of the chevron. The chevron's own
+   element stays (it carries NcBreadcrumbs' spacing and its "no separator after
+   the last crumb" rule); only its icon gives way to the text. */
+.cn-breadcrumbs--text-separator[data-v-296fde9b] .vue-crumb__separator svg {
+	display: none;
+}
+.cn-breadcrumbs--text-separator[data-v-296fde9b] .vue-crumb__separator::before {
+	content: var(--cn-breadcrumbs-separator);
+	padding-inline: var(--cn-breadcrumbs-separator-gap, 0);
+	color: var(--color-text-maxcontrast);
+}
+
+
 .cn-run-node-dialog__form[data-v-3eb7c55d] {
 	display: flex;
 	flex-direction: column;
@@ -30223,6 +30358,16 @@ to {
 	outline-offset: 2px;
 	border-radius: var(--border-radius-container-large, 16px);
 }
+
+/* A size-to-content cell (`sizeToContent`) is measured by GridStack from the
+   content's first child, and a widget wrapper there filled the cell
+   (`height: 100%`), so the measure returned the cell's own height and the
+   cell never shrank: "Waiting for me" stayed a tall card around one row. In
+   such a cell the child takes its own height. A cell without the key keeps
+   the filling child. */
+.cn-dashboard-grid__item--fit[data-v-9f6b1a22] >  .grid-stack-item-content > * {
+	height: auto;
+}
 [data-v-9f6b1a22] .grid-stack-item-content {
 	background: var(--color-main-background);
 	border: none;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@conduction/nextcloud-vue",
-  "version": "2.69.0",
+  "version": "2.70.0",
   "description": "Shared Vue component library for Conduction Nextcloud apps — complements @nextcloud/vue with higher-level components, OpenRegister integration, and NL Design System support",
   "homepage": "https://github.com/ConductionNL/nextcloud-vue#readme",
   "bugs": {

package/src/components/CnActionsBar/CnActionsBar.md

@@ -204,3 +204,5 @@ Controlling the inline action button count — `inlineActionCount` sets how many
 | `sortOptions` | Array | `[]` | Options `{ value, label }` for the sort dropdown. |
 | `sortValue` | String | `''` | Selected sort option value (controlled). |
 | `sortLabel` | String | *(i18n)* | Accessible label for the sort dropdown. |
+
+`showCount` (Boolean, default `true`): `false` drops the "Showing 20 of 258" line. `showActionsMenu` (Boolean, default `true`): `false` drops the overflow Actions menu, for a page that offers its actions as buttons elsewhere (CnIndexPage `headerButtons`).

package/src/components/CnActionsBar/CnActionsBar.vue

@@ -12,13 +12,13 @@
 					:aria-label="searchPlaceholder || t('nextcloud-vue', 'Search')"
 					@input="onSearchInput">
 			</div>
-			<span v-else-if="hasTotal" class="cn-actions-bar__count">
+			<span v-else-if="showCount && hasTotal" class="cn-actions-bar__count">
 				{{ countText }}
 			</span>
 			<!-- @slot after-search Refinement controls rendered beside the search field on the LEFT side of the bar (e.g. a filter menu button). Convention: the left side groups the VISUAL controls — search, filters, view toggle — while the right cluster holds the ACT controls (add, overflow); the standalone sort select is a display control too but keeps its legacy right-side placement. -->
 			<slot name="after-search" />
 			<!-- Counter beside the search (`showCountWithSearch`): after the search and its #after-search controls. The live region stays mounted while there is no total, so results coming back after none are announced too. -->
-			<span v-if="showSearch && showCountWithSearch"
+			<span v-if="showCount && showSearch && showCountWithSearch"
 				class="cn-actions-bar__count cn-actions-bar__count--beside-search"
 				:class="{ 'cn-actions-bar__count--empty': !hasTotal }"
 				aria-live="polite">{{ hasTotal ? countText : '' }}</span>
@@ -140,6 +140,7 @@
 
 			<!-- Actions menu (Refresh, Import, Export, mass actions) -->
 			<NcActions
+				v-if="showActionsMenu"
 				:forceName="true"
 				:inline="inlineActionCount"
 				:menuName="actionsMenuName"
@@ -683,6 +684,31 @@ export default {
 			default: true,
 		},
 
+		/**
+		 * Whether the "Showing 20 of 258" line renders where the search field
+		 * is not. `false` drops it, for a page whose title line already says
+		 * how many there are. True by default.
+		 *
+		 * @spec openspec/changes/zuiddrecht-pixel-gaps-3/specs/zuiddrecht-pixel-gaps-3/spec.md#requirement-an-index-page-can-take-the-board-header
+		 */
+		showCount: {
+			type: Boolean,
+			default: true,
+		},
+
+		/**
+		 * Whether the overflow Actions menu (Refresh, Import, Export, mass
+		 * actions, header actions) renders. `false` drops it, for a page that
+		 * offers its actions as buttons elsewhere (CnIndexPage
+		 * `headerButtons`). True by default.
+		 *
+		 * @spec openspec/changes/zuiddrecht-pixel-gaps-3/specs/zuiddrecht-pixel-gaps-3/spec.md#requirement-an-index-page-can-take-the-board-header
+		 */
+		showActionsMenu: {
+			type: Boolean,
+			default: true,
+		},
+
 		/**
 		 * Whether to show the Search/Columns sidebar toggle button. Lets the
 		 * index sidebar default to closed and be opened on demand.

package/src/components/CnAppNav/CnAppNav.vue

@@ -188,8 +188,8 @@
 					v-else
 					:key="item.id"
 					:name="resolveLabel(item)"
-					:to="itemTo(item)"
-					:href="itemHref(item)"
+					:to="linkTo(item)"
+					:href="linkHref(item)"
 					:icon="cssIconClass(item)"
 					:active="isActive(item)"
 					:pinned="Boolean(item.pinned)"
@@ -224,8 +224,8 @@
 						v-for="child in visibleChildren(item)"
 						:key="child.id"
 						:name="resolveLabel(child)"
-						:to="itemTo(child)"
-						:href="itemHref(child)"
+						:to="linkTo(child)"
+						:href="linkHref(child)"
 						:icon="cssIconClass(child)"
 						:active="isActive(child)"
 						:pinned="Boolean(child.pinned)"
@@ -304,8 +304,8 @@
 					v-for="item in footerItems"
 					:key="item.id"
 					:name="resolveLabel(item)"
-					:to="itemTo(item)"
-					:href="itemHref(item)"
+					:to="linkTo(item)"
+					:href="linkHref(item)"
 					:icon="cssIconClass(item)"
 					:active="isActive(item)"
 					:data-testid="`cn-nav-entry-${item.id}`"
@@ -402,8 +402,8 @@
 							v-else
 							:key="item.id"
 							:name="resolveLabel(item)"
-							:to="itemTo(item)"
-							:href="itemHref(item)"
+							:to="linkTo(item)"
+							:href="linkHref(item)"
 							:icon="cssIconClass(item)"
 							:active="isActive(item)"
 							:data-cn-route="item.route"
@@ -2026,6 +2026,72 @@ export default {
 			return to
 		},
 
+		/**
+		 * Whether another visible entry links to the same route, so the two
+		 * differ only in `query` or `params` ("All cases" and "Woo requests"
+		 * on one list).
+		 *
+		 * @param {object} item Menu entry.
+		 * @return {boolean} True when the route is shared.
+		 * @spec openspec/changes/zuiddrecht-pixel-gaps-3/specs/zuiddrecht-pixel-gaps-3/spec.md#requirement-only-the-best-matching-menu-entry-is-active
+		 */
+		sharesRoute(item) {
+			if (!item || item.href || item.action || !item.route) {
+				return false
+			}
+			return this.flatEntries.some((entry) => entry !== item && !entry.href && !entry.action && entry.route === item.route)
+		},
+
+		/**
+		 * The app's router, or null when the nav is mounted without one. Read
+		 * from the app's global properties: `this.$router` warns during render
+		 * on an instance that has none.
+		 *
+		 * @return {object|null} The router.
+		 * @spec openspec/changes/zuiddrecht-pixel-gaps-3/specs/zuiddrecht-pixel-gaps-3/spec.md#requirement-only-the-best-matching-menu-entry-is-active
+		 */
+		appRouter() {
+			return this.$?.appContext?.config?.globalProperties?.$router ?? null
+		},
+
+		/**
+		 * The `:to` an entry renders with. An entry that shares its route
+		 * renders as a plain link instead (see `linkHref`): NcAppNavigationItem
+		 * marks a router link active whenever vue-router calls it active, and
+		 * vue-router ignores the query, so "Woo requests" lit up beside "All
+		 * cases" on the unfiltered list. As a plain link only `isActive`
+		 * decides, which marks the entry that matches best.
+		 *
+		 * @param {object} item Menu entry.
+		 * @return {object|null} The router target, or null.
+		 * @spec openspec/changes/zuiddrecht-pixel-gaps-3/specs/zuiddrecht-pixel-gaps-3/spec.md#requirement-only-the-best-matching-menu-entry-is-active
+		 */
+		linkTo(item) {
+			if (this.appRouter() && this.sharesRoute(item)) {
+				return null
+			}
+			return this.itemTo(item)
+		},
+
+		/**
+		 * The `:href` an entry renders with: `itemHref`, or for an entry that
+		 * shares its route the address vue-router resolves its target to (a
+		 * click on it is still routed in the app, see `onItemClick`).
+		 *
+		 * @param {object} item Menu entry.
+		 * @return {string|null} The address, or null.
+		 * @spec openspec/changes/zuiddrecht-pixel-gaps-3/specs/zuiddrecht-pixel-gaps-3/spec.md#requirement-only-the-best-matching-menu-entry-is-active
+		 */
+		linkHref(item) {
+			const own = this.itemHref(item)
+			const router = this.appRouter()
+			if (own || !router || !this.sharesRoute(item)) {
+				return own
+			}
+			const to = this.itemTo(item)
+			return to ? router.resolve(to).href : null
+		},
+
 		/**
 		 * Build the `:href` value for an `NcAppNavigationItem`. Returns
 		 * the item's `href` so the entry renders as a real anchor whose
@@ -2175,6 +2241,17 @@ export default {
 				this.cnReplayWalkthrough(item.tourId)
 				return
 			}
+			// An entry that shares its route is a plain link (see linkTo); a
+			// plain click still navigates inside the app. A modified click
+			// (new tab, new window) is left to the browser.
+			if (this.appRouter() && this.sharesRoute(item) && event && !event.defaultPrevented
+				&& !(event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) && event.button !== 1) {
+				const to = this.itemTo(item)
+				if (to) {
+					event.preventDefault()
+					this.appRouter().push(to).catch(() => {})
+				}
+			}
 			// An entry left without a link (see itemTo) renders a `#` anchor;
 			// following it would change the address, so the click goes nowhere.
 			if (!item.href && this.unfilledRouteParam(item) && event && typeof event.preventDefault === 'function') {

package/src/components/CnBreadcrumbs/CnBreadcrumbs.vue

@@ -19,6 +19,8 @@
 		v-if="crumbs.length > 0"
 		:aria-label="ariaLabel"
 		:rootIcon="rootText ? '' : undefined"
+		:class="{ 'cn-breadcrumbs--text-separator': separator !== '' }"
+		:style="separatorStyle"
 		data-testid="cn-breadcrumbs">
 		<!-- `name` falls back to '' because NcBreadcrumb declares it a REQUIRED
 		     String and warns per render on the label-less icon-only crumb. The
@@ -111,6 +113,34 @@ export default {
 			type: Boolean,
 			default: false,
 		},
+
+		/**
+		 * Draw this text between the crumbs (for example `/`) instead of
+		 * NcBreadcrumbs' chevron. Empty (the default) keeps the chevron. The
+		 * separator is decoration: it is not read out.
+		 *
+		 * @spec openspec/changes/zuiddrecht-pixel-gaps-3/specs/zuiddrecht-pixel-gaps-3/spec.md#requirement-a-breadcrumb-can-name-the-record-by-a-field-and-use-a-text-separator
+		 */
+		separator: {
+			type: String,
+			default: '',
+		},
+	},
+
+	computed: {
+		/**
+		 * The separator handed to the stylesheet as a CSS string, or nothing
+		 * without a `separator`.
+		 *
+		 * @spec openspec/changes/zuiddrecht-pixel-gaps-3/specs/zuiddrecht-pixel-gaps-3/spec.md#requirement-a-breadcrumb-can-name-the-record-by-a-field-and-use-a-text-separator
+		 * @return {object|undefined}
+		 */
+		separatorStyle() {
+			if (this.separator === '') {
+				return undefined
+			}
+			return { '--cn-breadcrumbs-separator': JSON.stringify(this.separator) }
+		},
 	},
 
 	methods: {
@@ -127,3 +157,18 @@ export default {
 	},
 }
 </script>
+
+<style scoped>
+/* `separator`: a text separator in place of the chevron. The chevron's own
+   element stays (it carries NcBreadcrumbs' spacing and its "no separator after
+   the last crumb" rule); only its icon gives way to the text. */
+.cn-breadcrumbs--text-separator :deep(.vue-crumb__separator svg) {
+	display: none;
+}
+
+.cn-breadcrumbs--text-separator :deep(.vue-crumb__separator)::before {
+	content: var(--cn-breadcrumbs-separator);
+	padding-inline: var(--cn-breadcrumbs-separator-gap, 0);
+	color: var(--color-text-maxcontrast);
+}
+</style>

package/src/components/CnCalendarWidget/CnCalendarWidget.vue

@@ -5,9 +5,13 @@
 
 <template>
 	<div class="cn-calendar-widget">
-		<header class="cn-calendar-widget__header">
-			<span class="cn-calendar-widget__title">{{ t('nextcloud-vue', 'Calendar') }}</span>
-			<div class="cn-calendar-widget__modes">
+		<!-- `content.showTitle: false` and `content.showViewModes: false` drop
+		     the sub-heading and the Month / Week / Agenda buttons, for an agenda
+		     placement whose card already names it; without both the header
+		     row goes. -->
+		<header v-if="showsTitle || showsViewModes" class="cn-calendar-widget__header">
+			<span v-if="showsTitle" class="cn-calendar-widget__title">{{ t('nextcloud-vue', 'Calendar') }}</span>
+			<div v-if="showsViewModes" class="cn-calendar-widget__modes">
 				<button
 					v-for="mode in viewModes"
 					:key="mode"
@@ -160,7 +164,10 @@ export default {
 
 	props: {
 		/**
-		 * Persisted widget content `{viewMode, daysAhead, colorByCalendar}`.
+		 * Persisted widget content `{viewMode, daysAhead, colorByCalendar,
+		 * showTitle, showViewModes}`. `showTitle: false` drops the "Calendar"
+		 * sub-heading and `showViewModes: false` the Month / Week / Agenda
+		 * buttons (both shown by default).
 		 *
 		 * @type {object}
 		 */
@@ -197,6 +204,27 @@ export default {
 	},
 
 	computed: {
+		/**
+		 * Whether the "Calendar" sub-heading renders (`content.showTitle`).
+		 *
+		 * @spec openspec/changes/zuiddrecht-pixel-gaps-3/specs/zuiddrecht-pixel-gaps-3/spec.md#requirement-an-agenda-placement-can-drop-the-calendar-chrome
+		 * @return {boolean}
+		 */
+		showsTitle() {
+			return !(this.content && this.content.showTitle === false)
+		},
+
+		/**
+		 * Whether the Month / Week / Agenda buttons render
+		 * (`content.showViewModes`).
+		 *
+		 * @spec openspec/changes/zuiddrecht-pixel-gaps-3/specs/zuiddrecht-pixel-gaps-3/spec.md#requirement-an-agenda-placement-can-drop-the-calendar-chrome
+		 * @return {boolean}
+		 */
+		showsViewModes() {
+			return !(this.content && this.content.showViewModes === false)
+		},
+
 		/**
 		 * The available view modes.
 		 *

package/src/components/CnCapabilityTable/CnCapabilityTable.vue

@@ -187,6 +187,7 @@ import {
 	hasProviders,
 	RATINGS,
 	resolveProvider,
+	warnCapabilityComparisonDeprecated,
 } from '../../utils/capabilityComparison.js'
 
 /**
@@ -212,6 +213,13 @@ export default {
 		 * document without them renders the table this component's consumers
 		 * already had.
 		 *
+		 * Deprecated, with the whole component: publish the comparison on the
+		 * app's docs site and link to it (as dossiq #3312 and pipelinq #2195
+		 * did). Still rendered; removal waits for a major version. A
+		 * development build warns once when a comparison is given.
+		 *
+		 * @deprecated since 2.66.0, publish the comparison on the app's docs site and link to it.
+		 * @spec openspec/changes/zuiddrecht-pixel-gaps-3/specs/zuiddrecht-pixel-gaps-3/spec.md#requirement-the-in-app-capability-comparison-is-deprecated
 		 * @type {object}
 		 */
 		comparison: {
@@ -437,6 +445,12 @@ export default {
 		}
 	},
 
+	mounted() {
+		if (this.comparison) {
+			warnCapabilityComparisonDeprecated('CnCapabilityTable')
+		}
+	},
+
 	methods: {
 		/**
 		 * Debounce the reader's typing into `query`.

package/src/components/CnDashboardGrid/CnDashboardGrid.md

@@ -158,3 +158,5 @@ explicit event when you are writing new code:
   @item-activate="({ item, clientX, clientY }) => openMenu(item, clientX, clientY)"
   @layout-change="onLayoutChange" />
 ```
+
+`float` (Boolean, default `true`): GridStack's `float`. `false` packs items upward, so a size-to-content cell that shrinks, or a widget that is not shown, closes its gap.