@conduction/nextcloud-vue 2.89.1 → 2.90.0

package/dist/nextcloud-vue.css

@@ -34796,28 +34796,28 @@ to {
 }
 
 
-.cn-admin-settings-shell[data-v-c3ceda64] {
+.cn-admin-settings-shell[data-v-038f200a] {
 	max-width: 900px;
 }
 
 /* The board look lifts the width and lays the header and cards on a grid (look-board.css). */
-.cn-support-info[data-v-c3ceda64] {
+.cn-support-info[data-v-038f200a] {
 	margin-top: 16px;
 	padding-top: 16px;
 	border-top: 1px solid var(--color-border);
 }
-.cn-support-info h4[data-v-c3ceda64] {
+.cn-support-info h4[data-v-038f200a] {
 	margin: 0 0 8px 0;
 	font-size: 14px;
 	font-weight: 600;
 	color: var(--color-main-text);
 }
-.cn-support-info p[data-v-c3ceda64] {
+.cn-support-info p[data-v-038f200a] {
 	margin: 4px 0;
 	color: var(--color-text-maxcontrast);
 	font-size: 14px;
 }
-.cn-support-info a[data-v-c3ceda64] {
+.cn-support-info a[data-v-038f200a] {
 	color: var(--color-primary-element);
 }
 
@@ -38141,17 +38141,17 @@ button.cn-object-calendar__overflow[data-v-e1c69ee2] {
 }
 
 
-.cn-dashboard-grid[data-v-a91998fc] {
+.cn-dashboard-grid[data-v-a76b6fc6] {
 	width: 100%;
 	min-height: 200px;
 }
-.grid-stack[data-v-a91998fc] {
+.grid-stack[data-v-a76b6fc6] {
 	background: transparent;
 }
 
 /* Screen-reader-only text: the keyboard key map and the live region. Kept in
    the layout (not `display: none`) so assistive tech still reads it. */
-.cn-dashboard-grid__sr-only[data-v-a91998fc] {
+.cn-dashboard-grid__sr-only[data-v-a76b6fc6] {
 	position: absolute;
 	width: 1px;
 	height: 1px;
@@ -38166,7 +38166,7 @@ button.cn-object-calendar__overflow[data-v-e1c69ee2] {
 /* Grid items become tab stops in edit mode — give them a visible focus ring
    that satisfies WCAG 2.1 SC 2.4.7 without relying on the widget's own
    styling. `outline-offset` keeps the ring outside the rounded card. */
-.grid-stack-item[data-v-a91998fc]:focus-visible {
+.grid-stack-item[data-v-a76b6fc6]:focus-visible {
 	outline: 2px solid var(--color-primary-element, #0082c9);
 	outline-offset: 2px;
 	border-radius: var(--border-radius-container-large, 16px);
@@ -38178,19 +38178,19 @@ button.cn-object-calendar__overflow[data-v-e1c69ee2] {
    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-a91998fc] >  .grid-stack-item-content > * {
+.cn-dashboard-grid__item--fit[data-v-a76b6fc6] >  .grid-stack-item-content > * {
 	height: auto;
 }
-[data-v-a91998fc] .grid-stack-item-content {
+[data-v-a76b6fc6] .grid-stack-item-content {
 	background: var(--color-main-background);
 	border: none;
 	box-shadow: none;
 	overflow: hidden;
 }
-[data-v-a91998fc] .grid-stack-item-content:has(.cn-widget-wrapper--borderless) {
+[data-v-a76b6fc6] .grid-stack-item-content:has(.cn-widget-wrapper--borderless) {
 	background: transparent;
 }
-[data-v-a91998fc] .grid-stack-placeholder > .placeholder-content {
+[data-v-a76b6fc6] .grid-stack-placeholder > .placeholder-content {
 	background: var(--color-primary-element-light);
 	border: 2px dashed var(--color-primary-element);
 	border-radius: var(--border-radius-large);
@@ -38458,7 +38458,7 @@ button.cn-object-calendar__overflow[data-v-e1c69ee2] {
 }
 
 
-.cn-dashboard-page[data-v-20ca81f3] {
+.cn-dashboard-page[data-v-42bc14a4] {
 	padding: 20px;
 	max-width: 1800px;
 	/* Centre the leftover space once the cap engages, so a wide screen shows
@@ -38472,7 +38472,7 @@ button.cn-object-calendar__overflow[data-v-e1c69ee2] {
 	overflow-y: auto;
 	box-sizing: border-box;
 }
-.cn-dashboard-page__header[data-v-20ca81f3] {
+.cn-dashboard-page__header[data-v-42bc14a4] {
 	display: flex;
 	justify-content: space-between;
 	align-items: flex-start;
@@ -38484,21 +38484,21 @@ button.cn-object-calendar__overflow[data-v-e1c69ee2] {
 	   room. Only the HEADER shifts right — body widgets keep full width. */
 	padding-inline-start: 56px;
 }
-.cn-dashboard-page__header-left[data-v-20ca81f3] {
+.cn-dashboard-page__header-left[data-v-42bc14a4] {
 	min-width: 0;
 }
-.cn-dashboard-page__title-row[data-v-20ca81f3] {
+.cn-dashboard-page__title-row[data-v-42bc14a4] {
 	display: flex;
 	align-items: center;
 	flex-wrap: wrap;
 	gap: 12px;
 }
-.cn-dashboard-page__title[data-v-20ca81f3] {
+.cn-dashboard-page__title[data-v-42bc14a4] {
 	margin: 0;
 	font-size: 20px;
 	font-weight: 700;
 }
-.cn-dashboard-page__description[data-v-20ca81f3] {
+.cn-dashboard-page__description[data-v-42bc14a4] {
 	margin: 4px 0 0;
 	font-size: 14px;
 	color: var(--color-text-maxcontrast);
@@ -38506,19 +38506,19 @@ button.cn-object-calendar__overflow[data-v-e1c69ee2] {
 
 /* Board look (screens-dashboard-parity): h1 28/700, a 15px grey subtitle 6px
    under it, and 40px buttons with a 10px gap. */
-.cn-dashboard-page--board .cn-dashboard-page__title[data-v-20ca81f3] {
+.cn-dashboard-page--board .cn-dashboard-page__title[data-v-42bc14a4] {
 	font-size: 28px;
 	font-weight: 700;
 	line-height: 1.2;
 }
-.cn-dashboard-page--board .cn-dashboard-page__description[data-v-20ca81f3] {
+.cn-dashboard-page--board .cn-dashboard-page__description[data-v-42bc14a4] {
 	margin: 6px 0 0;
 	font-size: 15px;
 }
-.cn-dashboard-page--board .cn-dashboard-page__header-actions[data-v-20ca81f3] {
+.cn-dashboard-page--board .cn-dashboard-page__header-actions[data-v-42bc14a4] {
 	gap: 10px;
 }
-.cn-dashboard-page--board .cn-dashboard-page__header-actions[data-v-20ca81f3] .button-vue {
+.cn-dashboard-page--board .cn-dashboard-page__header-actions[data-v-42bc14a4] .button-vue {
 	min-height: var(--cn-board-control-height, 40px);
 	height: var(--cn-board-control-height, 40px);
 }
@@ -38526,17 +38526,17 @@ button.cn-object-calendar__overflow[data-v-e1c69ee2] {
 /* The switch row under the header (screens-dashboard-greeting-header): the
    view switch left, the `viewLinks` pills right (DqMijnWerk: pills 34px high,
    radius 17, 13px/600, a 14px icon, primary light on primary deep). */
-.cn-dashboard-page__switch-row[data-v-20ca81f3] {
+.cn-dashboard-page__switch-row[data-v-42bc14a4] {
 	display: flex;
 	flex-wrap: wrap;
 	align-items: center;
 	gap: 10px;
 	margin-bottom: var(--cn-board-section-gap, 20px);
 }
-.cn-dashboard-page__switch-row-spacer[data-v-20ca81f3] {
+.cn-dashboard-page__switch-row-spacer[data-v-42bc14a4] {
 	flex: 1 1 auto;
 }
-.cn-dashboard-page__view-link[data-v-20ca81f3] {
+.cn-dashboard-page__view-link[data-v-42bc14a4] {
 	display: inline-flex;
 	align-items: center;
 	gap: 6px;
@@ -38550,36 +38550,36 @@ button.cn-object-calendar__overflow[data-v-e1c69ee2] {
 	white-space: nowrap;
 	text-decoration: none !important;
 }
-.cn-dashboard-page__view-link[data-v-20ca81f3]:hover {
+.cn-dashboard-page__view-link[data-v-42bc14a4]:hover {
 	background: var(--color-primary-element-light-hover, var(--color-primary-element-light));
 }
-.cn-dashboard-page__view-link[data-v-20ca81f3]:focus-visible {
+.cn-dashboard-page__view-link[data-v-42bc14a4]:focus-visible {
 	outline: 2px solid var(--color-main-text);
 	outline-offset: 2px;
 }
-.cn-dashboard-page__view-link-icon[data-v-20ca81f3] {
+.cn-dashboard-page__view-link-icon[data-v-42bc14a4] {
 	display: inline-flex;
 }
 
 /* The period group, in a row of its own between the header and the KPI row. */
-.cn-dashboard-page__date-range--segmented[data-v-20ca81f3] {
+.cn-dashboard-page__date-range--segmented[data-v-42bc14a4] {
 	margin-bottom: 16px;
 }
-.cn-dashboard-page__date-segmented[data-v-20ca81f3] {
+.cn-dashboard-page__date-segmented[data-v-42bc14a4] {
 	display: flex;
 	align-items: center;
 	gap: 8px;
 }
 
 /* The KPI row above the grid: tiles are cells of the auto-fit grid. */
-.cn-dashboard-page__kpi-row[data-v-20ca81f3] {
+.cn-dashboard-page__kpi-row[data-v-42bc14a4] {
 	margin-bottom: var(--cn-board-section-gap, 16px);
 }
-.cn-dashboard-page__kpi-cell[data-v-20ca81f3] {
+.cn-dashboard-page__kpi-cell[data-v-42bc14a4] {
 	display: flex;
 	min-width: 0;
 }
-.cn-dashboard-page__kpi-cell[data-v-20ca81f3] > * {
+.cn-dashboard-page__kpi-cell[data-v-42bc14a4] > * {
 	flex: 1 1 auto;
 	min-width: 0;
 }
@@ -38592,7 +38592,7 @@ button.cn-object-calendar__overflow[data-v-e1c69ee2] {
    scoped chip rules then silently don't match and the chip collapses into
    NcActions' ~30px icon slot (text wraps to "Last / 30 / days"). The
    data-testid is stable across chunks, so those rules match regardless. */
-.cn-dashboard-page__header-actions[data-v-20ca81f3] {
+.cn-dashboard-page__header-actions[data-v-42bc14a4] {
 	display: flex;
 	align-items: center;
 	gap: 8px;
@@ -38608,19 +38608,19 @@ button.cn-object-calendar__overflow[data-v-e1c69ee2] {
 
 /* Date-range header band. Kept compact so it doesn't open a tall gap
    above the grid; the pills variant is a single tidy toggle row. */
-.cn-dashboard-page__date-range[data-v-20ca81f3] {
+.cn-dashboard-page__date-range[data-v-42bc14a4] {
 	margin-bottom: 12px;
 }
-.cn-dashboard-page__date-range--pills[data-v-20ca81f3] {
+.cn-dashboard-page__date-range--pills[data-v-42bc14a4] {
 	margin-bottom: 8px;
 }
-.cn-dashboard-page__date-pills[data-v-20ca81f3] {
+.cn-dashboard-page__date-pills[data-v-42bc14a4] {
 	display: flex;
 	align-items: center;
 	flex-wrap: wrap;
 	gap: 6px;
 }
-.cn-dashboard-page__date-pill[data-v-20ca81f3] {
+.cn-dashboard-page__date-pill[data-v-42bc14a4] {
 	display: inline-flex;
 	align-items: center;
 	padding: 5px 14px;
@@ -38635,77 +38635,77 @@ button.cn-object-calendar__overflow[data-v-e1c69ee2] {
 	cursor: pointer;
 	transition: background-color 100ms ease, border-color 100ms ease, color 100ms ease;
 }
-.cn-dashboard-page__date-pill[data-v-20ca81f3]:hover {
+.cn-dashboard-page__date-pill[data-v-42bc14a4]:hover {
 	background: var(--color-background-hover);
 }
-.cn-dashboard-page__date-pill[data-v-20ca81f3]:focus-visible {
+.cn-dashboard-page__date-pill[data-v-42bc14a4]:focus-visible {
 	outline: 2px solid var(--color-primary-element);
 	outline-offset: 2px;
 }
-.cn-dashboard-page__date-pill--active[data-v-20ca81f3] {
+.cn-dashboard-page__date-pill--active[data-v-42bc14a4] {
 	background: var(--color-primary-element);
 	border-color: var(--color-primary-element);
 	color: var(--color-primary-element-text);
 }
-.cn-dashboard-page__date-pill--active[data-v-20ca81f3]:hover {
+.cn-dashboard-page__date-pill--active[data-v-42bc14a4]:hover {
 	background: var(--color-primary-element-hover, var(--color-primary-element));
 }
 
 /* The custom-range pill is de-emphasised — dashed outline, muted text —
    so it reads as an escape hatch rather than a primary option. */
-.cn-dashboard-page__date-pill--custom[data-v-20ca81f3] {
+.cn-dashboard-page__date-pill--custom[data-v-42bc14a4] {
 	border-style: dashed;
 	color: var(--color-text-maxcontrast);
 }
-.cn-dashboard-page__date-pill-custom[data-v-20ca81f3] .action-item__menutoggle {
+.cn-dashboard-page__date-pill-custom[data-v-42bc14a4] .action-item__menutoggle {
 	min-width: 0;
 	min-height: 0;
 	padding: 0;
 	background: transparent;
 	border: none;
 }
-.cn-dashboard-page__date-pill-custom[data-v-20ca81f3] .button-vue,
-.cn-dashboard-page__date-pill-custom[data-v-20ca81f3] .button-vue__wrapper,
-.cn-dashboard-page__date-pill-custom[data-v-20ca81f3] .button-vue__icon {
+.cn-dashboard-page__date-pill-custom[data-v-42bc14a4] .button-vue,
+.cn-dashboard-page__date-pill-custom[data-v-42bc14a4] .button-vue__wrapper,
+.cn-dashboard-page__date-pill-custom[data-v-42bc14a4] .button-vue__icon {
 	width: auto !important;
 	min-width: 0 !important;
 	overflow: visible !important;
 }
-.cn-dashboard-page__empty[data-v-20ca81f3] {
+.cn-dashboard-page__empty[data-v-42bc14a4] {
 	padding: 60px 20px;
 }
 
 /* The page's view switch on a page without a header row: at the end of its
    own row, above the grids, where the header would have put it. */
-.cn-dashboard-page__view-switch[data-v-20ca81f3] {
+.cn-dashboard-page__view-switch[data-v-42bc14a4] {
 	display: flex;
 	justify-content: flex-end;
 	margin-bottom: 12px;
 }
 
 /* A view the switch shows with nothing to draw. */
-.cn-page-view-region--empty[data-v-20ca81f3] {
+.cn-page-view-region--empty[data-v-42bc14a4] {
 	padding: 40px 20px;
 }
-.cn-dashboard-page__page-filters[data-v-20ca81f3] {
+.cn-dashboard-page__page-filters[data-v-42bc14a4] {
 	display: flex;
 	flex-wrap: wrap;
 	gap: 16px;
 	align-items: flex-end;
 	margin-bottom: 12px;
 }
-.cn-dashboard-page__page-filter[data-v-20ca81f3] {
+.cn-dashboard-page__page-filter[data-v-42bc14a4] {
 	display: flex;
 	flex-direction: column;
 	gap: 4px;
 	min-width: 200px;
 }
-.cn-dashboard-page__page-filter-label[data-v-20ca81f3] {
+.cn-dashboard-page__page-filter-label[data-v-42bc14a4] {
 	font-size: 0.85em;
 	font-weight: 600;
 	color: var(--color-text-maxcontrast);
 }
-.cn-dashboard-page__widget-edit[data-v-20ca81f3] {
+.cn-dashboard-page__widget-edit[data-v-42bc14a4] {
 	position: absolute;
 	top: 4px;
 	inset-inline-end: 4px;
@@ -38724,8 +38724,8 @@ button.cn-object-calendar__overflow[data-v-e1c69ee2] {
    and centre the card. */
 /* `safe` centre so an overflowing tile does not spill out of the top, where
    flex overflow cannot be scrolled back to. Same as detail-page.css. */
-.cn-dashboard-page__card-fit[data-v-20ca81f3] .cn-widget-wrapper__content,
-.cn-dashboard-page__card-fit.cn-widget-wrapper--flush[data-v-20ca81f3] .cn-widget-wrapper__content {
+.cn-dashboard-page__card-fit[data-v-42bc14a4] .cn-widget-wrapper__content,
+.cn-dashboard-page__card-fit.cn-widget-wrapper--flush[data-v-42bc14a4] .cn-widget-wrapper__content {
 	overflow: hidden;
 	display: flex;
 	flex-direction: column;
@@ -38741,7 +38741,7 @@ button.cn-object-calendar__overflow[data-v-e1c69ee2] {
    shows up as a scrollbar the user has to drag to see the whole graph. Same
    shape as the card-fit rule above, minus the padding: chart tiles render
    `flush`, and apexcharts already draws its own margins. */
-.cn-dashboard-page__chart-fit[data-v-20ca81f3] .cn-widget-wrapper__content {
+.cn-dashboard-page__chart-fit[data-v-42bc14a4] .cn-widget-wrapper__content {
 	overflow: hidden;
 	display: flex;
 	flex-direction: column;
@@ -38751,13 +38751,13 @@ button.cn-object-calendar__overflow[data-v-e1c69ee2] {
 /* Card content (stat / gauge / delta) must fit the tile width: let the
    widget shrink and its value/label truncate instead of pushing past the
    tile edge (the horizontal clip on long currency values). */
-.cn-dashboard-page__card-fit[data-v-20ca81f3] .cn-stat-widget,
-.cn-dashboard-page__card-fit[data-v-20ca81f3] .cn-gauge-widget,
-.cn-dashboard-page__card-fit[data-v-20ca81f3] .cn-delta-widget {
+.cn-dashboard-page__card-fit[data-v-42bc14a4] .cn-stat-widget,
+.cn-dashboard-page__card-fit[data-v-42bc14a4] .cn-gauge-widget,
+.cn-dashboard-page__card-fit[data-v-42bc14a4] .cn-delta-widget {
 	min-width: 0;
 	max-width: 100%;
 }
-.cn-dashboard-page__unknown[data-v-20ca81f3] {
+.cn-dashboard-page__unknown[data-v-42bc14a4] {
 	display: flex;
 	align-items: center;
 	justify-content: center;
@@ -38768,29 +38768,29 @@ button.cn-object-calendar__overflow[data-v-e1c69ee2] {
 }
 
 /* widget-ref content items */
-.cn-dashboard-page__content[data-v-20ca81f3] {
+.cn-dashboard-page__content[data-v-42bc14a4] {
 	display: flex;
 	flex-direction: column;
 	gap: 16px;
 }
-.cn-dashboard-page__content-item[data-v-20ca81f3] {
+.cn-dashboard-page__content-item[data-v-42bc14a4] {
 	width: 100%;
 }
 /* On a phone (screens-dashboard-phone) the touch targets of a board dashboard
    are 44px: the widget Actions menu and the KPI tiles. */
 @media (max-width: 640px) {
-.cn-dashboard-page--board[data-v-20ca81f3] .cn-widget-wrapper__actions .action-item__menutoggle,
-	.cn-dashboard-page--board[data-v-20ca81f3] .cn-widget-wrapper__actions .button-vue {
+.cn-dashboard-page--board[data-v-42bc14a4] .cn-widget-wrapper__actions .action-item__menutoggle,
+	.cn-dashboard-page--board[data-v-42bc14a4] .cn-widget-wrapper__actions .button-vue {
 		min-height: 44px;
 }
-.cn-dashboard-page--board .cn-dashboard-page__kpi-cell[data-v-20ca81f3] {
+.cn-dashboard-page--board .cn-dashboard-page__kpi-cell[data-v-42bc14a4] {
 		min-height: 44px;
 }
 }
 
 /* What a registry widget reports for its card header (`header` event): the
    note beside the link ("3 in total") and one action, as on a detail page. */
-.cn-dashboard-page__widget-count[data-v-20ca81f3] {
+.cn-dashboard-page__widget-count[data-v-42bc14a4] {
 	align-self: center;
 	padding: 1px 8px;
 	border-radius: 10px;
@@ -38799,13 +38799,13 @@ button.cn-object-calendar__overflow[data-v-e1c69ee2] {
 	font-size: 13px;
 	font-weight: 600;
 }
-.cn-dashboard-page__widget-note[data-v-20ca81f3] {
+.cn-dashboard-page__widget-note[data-v-42bc14a4] {
 	align-self: center;
 	color: var(--color-text-maxcontrast);
 	font-size: 14px;
 	white-space: nowrap;
 }
-.cn-dashboard-page__widget-action[data-v-20ca81f3] {
+.cn-dashboard-page__widget-action[data-v-42bc14a4] {
 	display: inline-flex;
 	align-items: center;
 	align-self: center;
@@ -38821,7 +38821,7 @@ button.cn-object-calendar__overflow[data-v-e1c69ee2] {
 	white-space: nowrap;
 	cursor: pointer;
 }
-.cn-dashboard-page__widget-action[data-v-20ca81f3]:focus-visible {
+.cn-dashboard-page__widget-action[data-v-42bc14a4]:focus-visible {
 	outline: 2px solid var(--color-primary-element);
 	outline-offset: 2px;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@conduction/nextcloud-vue",
-  "version": "2.89.1",
+  "version": "2.90.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/CnAdminSettingsShell/CnAdminSettingsShell.vue

@@ -76,7 +76,7 @@
 				:active="tab.id === activeTabId">
 				<div class="cn-admin-settings-shell__panel" :data-tab="tab.id">
 					<!-- @slot tab-<id> The panel of the tab with that `id` in `tabs`. -->
-					<slot :name="`tab-${tab.id}`" />
+					<slot v-if="!lazyTabs || tab.id === activeTabId" :name="`tab-${tab.id}`" />
 				</div>
 			</CnTab>
 		</CnTabs>
@@ -491,6 +491,19 @@ export default {
 			default: '',
 		},
 
+		/**
+		 * Mount a tab's `tab-<id>` slot only while that tab is open, and
+		 * unmount it when another tab opens, so each visit mounts it afresh
+		 * and the page does not load every tab at once. Off (the default),
+		 * every panel stays mounted and only the open one shows.
+		 *
+		 * @spec openspec/changes/admin-settings-lazy-tabs/specs/settings-board-look/spec.md#requirement-the-admin-shell-can-mount-only-the-open-tab
+		 */
+		lazyTabs: {
+			type: Boolean,
+			default: false,
+		},
+
 		/**
 		 * How the `tabs` strip is drawn, as CnTabs' `variant`: `line`, the
 		 * folder tabs (the default), or `underline`, plain labels on a rule

package/src/components/CnDashboardGrid/CnDashboardGrid.vue

@@ -71,6 +71,7 @@
 <script>
 import { translate as t } from '@nextcloud/l10n'
 import { GridStack } from 'gridstack'
+import { toRaw } from 'vue'
 import { planGrowth } from '../../utils/gridStack.js'
 // `gridstack` is a peerDependency (see package.json), not bundled — this
 // component's JS and the consumer's GridStack stylesheet MUST come from the
@@ -683,16 +684,27 @@ export default {
 		 * (`itemsInRowOrder`). A cell that shrinks is left to GridStack as
 		 * before.
 		 *
+		 * The grid is read raw: through Vue's proxy `engine.nodes` holds proxies
+		 * while `el.gridstackNode` is the plain node, so the growing cell would
+		 * not be recognised among the nodes and would be moved down by its own
+		 * growth. Moving a cell makes GridStack measure it again, so a cell the
+		 * wrapper is already growing goes straight to GridStack.
+		 *
 		 * @spec openspec/changes/dashboard-growth-keeps-order/specs/dashboard-grid/spec.md#requirement-a-growing-cell-keeps-the-order-of-the-cards-under-it
 		 * @return {void}
 		 */
 		keepOrderOnGrowth() {
-			const grid = this.grid
+			const grid = toRaw(this.grid)
 			if (!grid || typeof grid.resizeToContent !== 'function' || typeof grid.update !== 'function') {
 				return
 			}
 			const resize = grid.resizeToContent.bind(grid)
+			const growing = new Set()
 			grid.resizeToContent = (el) => {
+				if (growing.has(el)) {
+					resize(el)
+					return
+				}
 				const node = el && el.gridstackNode
 				const nodes = grid.engine && Array.isArray(grid.engine.nodes) ? grid.engine.nodes : null
 				const rows = node && nodes ? this.contentRows(el, node) : null
@@ -703,15 +715,20 @@ export default {
 				}
 				// Inside a batch the moves are not packed until the cell has grown.
 				const batching = Boolean(grid.engine.batchMode)
-				if (!batching) {
-					grid.batchUpdate()
-				}
-				for (const step of plan) {
-					grid.update(step.node.el, { y: step.y })
-				}
-				resize(el)
-				if (!batching) {
-					grid.batchUpdate(false)
+				growing.add(el)
+				try {
+					if (!batching) {
+						grid.batchUpdate()
+					}
+					for (const step of plan) {
+						grid.update(step.node.el, { y: step.y })
+					}
+					resize(el)
+					if (!batching) {
+						grid.batchUpdate(false)
+					}
+				} finally {
+					growing.delete(el)
 				}
 			}
 		},

package/src/components/CnDashboardPage/CnDashboardPage.vue

@@ -421,7 +421,7 @@
 						:is="registryRenderer(item)"
 						:widgetId="item.widgetId"
 						:content="registryWidgetBindings(item)"
-						v-bind="{ ...registryWidgetBindings(item), ...containerBindings(item) }"
+						v-bind="{ ...registryWidgetProps(item), ...containerBindings(item) }"
 						@header="onWidgetHeader(item, $event)" />
 				</CnWidgetWrapper>
 				<CnWidgetWrapper
@@ -882,7 +882,7 @@
 							:is="registryRenderer(item)"
 							:widgetId="item.widgetId"
 							:content="registryWidgetBindings(item)"
-							v-bind="{ ...registryWidgetBindings(item), ...containerBindings(item), ...cellChromeBindings(item) }"
+							v-bind="{ ...registryWidgetProps(item), ...containerBindings(item), ...cellChromeBindings(item) }"
 							@header="onWidgetHeader(item, $event)" />
 					</CnWidgetWrapper>
 				</template>
@@ -984,6 +984,7 @@ import { pageViews } from '../../mixins/pageViews.js'
 import { mergeUserLayout, resolveUserLayoutApi } from '../../store/plugins/dashboardLayouts.js'
 import { isAppInstalled } from '../../utils/appInstalled.js'
 import { contentHeaderLink } from '../../utils/contentHeaderLink.js'
+import { pickDeclaredProps } from '../../utils/declaredProps.js'
 import { userLocale } from '../../utils/userLocale.js'
 import { compareVisibleWhen, evaluateWorkspaceCondition, isWorkspaceCondition, readVisibleWhenValue } from '../../utils/visibleWhen.js'
 import { canonicalWidgetType } from '../../utils/widgetTypeAliases.js'
@@ -3642,6 +3643,23 @@ export default {
 			return outcome ? { ...content, conditionOutcome: outcome } : content
 		},
 
+		/**
+		 * The content keys a registry widget receives as props: only the ones
+		 * its renderer declares. An undeclared key would otherwise fall through
+		 * as an attribute onto the renderer's root component and could override
+		 * a value the widget computes for it. The whole content still arrives
+		 * as `content`. A renderer that forwards its own attributes
+		 * (`inheritAttrs: false`) keeps receiving every key.
+		 *
+		 * @param {object} item Layout item.
+		 * @return {object} The bindings the renderer declares.
+		 * @spec openspec/changes/dashboard-declared-widget-props/specs/dashboard-page/spec.md#requirement-a-dashboard-widget-receives-only-the-content-keys-it-declares
+		 */
+		registryWidgetProps(item) {
+			const def = this.getWidgetDef(item.widgetId)
+			return pickDeclaredProps(this.registryRenderer(item), this.registryWidgetBindings(item), def?.type || item.widgetId)
+		},
+
 		/**
 		 * What a container widget (registry `container`, such as `tabs`) needs
 		 * beside its content: the page's widget definitions, so its tabs find