@conduction/nextcloud-vue 2.56.0-beta.35 → 2.56.0-beta.36

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: 40322776 bytes
-sha256: fe28d43fed94e91ceb0fddfbc8246cdd8b80464acec068fbd89bd0a6b10bac77
+size: 40354945 bytes
+sha256: 3646bf9e9127562ff3251fd58ad2051364849075f480ed05940d41a724726042

package/dist/nextcloud-vue.css

@@ -781,6 +781,25 @@
 .cn-look-board .cn-dashboard-page:not(.cn-look-nextcloud *) .cn-record-list__chevron {
 	display: none;
 }
+
+/* ---- Week strip (DqMijnWerk "Termijnen deze week") ---------------------- */
+/* The days wrap inside the card instead of scrolling sideways: a row holds
+   as many days of at least 120px as the card fits, and the rest go to the
+   next row (dossiq at 1100 wide held 680px of days in a 494px card and
+   scrolled; now three days and two). 120px keeps a case title's words whole;
+   five 88px days fitted one row but broke "Bezwaar" mid-word. A card wide
+   enough for the week draws it as before, one row of equal columns. The
+   day's head wraps its "today" badge under the label when the day is
+   narrow.
+   @spec openspec/changes/board-week-strip-fits/specs/week-strip-board-look/spec.md#requirement-a-board-week-strip-fits-its-card */
+.cn-look-board .cn-week-strip:not(.cn-look-nextcloud *) .cn-week-strip__days {
+	grid-template-columns: repeat(auto-fit, minmax(min(100%, 120px), 1fr));
+	min-width: 0;
+}
+
+.cn-look-board .cn-week-strip:not(.cn-look-nextcloud *) .cn-week-strip__head {
+	flex-wrap: wrap;
+}
 /*
  * The board dialog (screens-dialog-parity, canon section 5).
  *
@@ -3949,6 +3968,19 @@ a.cn-kpi-card--stacked:focus-visible {
 	color: var(--color-main-text);
 }
 
+/* A board tile whose label wraps grows into its cell instead of clipping its
+   own last line. dossiq's "Afgehandeld deze maand" at 1100 wide held 129px of
+   content in a 114px tile and lost its caption's bottom. The tile still fills
+   a cell it fits (`min-height: 100%`), so every tile that fits keeps its
+   size; one that does not takes the height of its content, and the card-fit
+   cell's `safe center` keeps its top in view.
+   @spec openspec/changes/board-stat-tile-grows/specs/stat-tile-board-look/spec.md#requirement-a-board-stat-tile-shows-all-its-lines */
+.cn-kpi-card--board.cn-kpi-card--stacked {
+	flex: 0 0 auto;
+	height: auto;
+	min-height: 100%;
+}
+
 .cn-kpi-card--board.cn-kpi-card--stacked .cn-kpi-card__caption-line,
 .cn-kpi-card--board.cn-kpi-card--stacked .cn-stats-block__count-label {
 	font-size: 13px;
@@ -22309,6 +22341,19 @@ a.cn-kpi-card--stacked:focus-visible {
 	color: var(--color-main-text);
 }
 
+/* A board tile whose label wraps grows into its cell instead of clipping its
+   own last line. dossiq's "Afgehandeld deze maand" at 1100 wide held 129px of
+   content in a 114px tile and lost its caption's bottom. The tile still fills
+   a cell it fits (`min-height: 100%`), so every tile that fits keeps its
+   size; one that does not takes the height of its content, and the card-fit
+   cell's `safe center` keeps its top in view.
+   @spec openspec/changes/board-stat-tile-grows/specs/stat-tile-board-look/spec.md#requirement-a-board-stat-tile-shows-all-its-lines */
+.cn-kpi-card--board.cn-kpi-card--stacked {
+	flex: 0 0 auto;
+	height: auto;
+	min-height: 100%;
+}
+
 .cn-kpi-card--board.cn-kpi-card--stacked .cn-kpi-card__caption-line,
 .cn-kpi-card--board.cn-kpi-card--stacked .cn-stats-block__count-label {
 	font-size: 13px;
@@ -23136,7 +23181,7 @@ a.cn-kpi-card--board * {
 }
 
 
-.cn-object-data-widget__image[data-v-76edf75d] {
+.cn-object-data-widget__image[data-v-324e1a00] {
 	max-width: 100%;
 	max-height: 160px;
 	border-radius: 8px;
@@ -23144,33 +23189,33 @@ a.cn-kpi-card--board * {
 }
 
 /* Shimmering placeholder while a relation's display name resolves. */
-.cn-object-data-widget__skeleton[data-v-76edf75d] {
+.cn-object-data-widget__skeleton[data-v-324e1a00] {
 	display: inline-block;
 	width: 90px;
 	height: 1em;
 	border-radius: 4px;
 	background: linear-gradient(90deg, var(--color-background-dark) 25%, var(--color-background-hover) 50%, var(--color-background-dark) 75%);
 	background-size: 200% 100%;
-	animation: cn-odw-shimmer-76edf75d 1.2s ease-in-out infinite;
+	animation: cn-odw-shimmer-324e1a00 1.2s ease-in-out infinite;
 }
-@keyframes cn-odw-shimmer-76edf75d {
+@keyframes cn-odw-shimmer-324e1a00 {
 from { background-position: 200% 0;
 }
 to { background-position: -200% 0;
 }
 }
 @media (prefers-reduced-motion: reduce) {
-.cn-object-data-widget__skeleton[data-v-76edf75d] { animation: none;
+.cn-object-data-widget__skeleton[data-v-324e1a00] { animation: none;
 }
 }
-.cn-object-data-widget__grid[data-v-76edf75d] {
+.cn-object-data-widget__grid[data-v-324e1a00] {
 	display: grid;
 	gap: calc(2 * var(--default-grid-baseline, 4px)) calc(4 * var(--default-grid-baseline, 4px));
 }
-.cn-object-data-widget__toggle[data-v-76edf75d] {
+.cn-object-data-widget__toggle[data-v-324e1a00] {
 	margin-top: 4px;
 }
-.cn-object-data-widget__cell[data-v-76edf75d] {
+.cn-object-data-widget__cell[data-v-324e1a00] {
 	display: flex;
 	flex-direction: column;
 	gap: 2px;
@@ -23178,12 +23223,12 @@ to { background-position: -200% 0;
 	border-bottom: 1px solid var(--color-border-dark);
 	min-width: 0;
 }
-.cn-object-data-widget__label[data-v-76edf75d] {
+.cn-object-data-widget__label[data-v-324e1a00] {
 	font-size: 0.85em;
 	color: var(--color-text-maxcontrast);
 	font-weight: 500;
 }
-.cn-object-data-widget__value[data-v-76edf75d] {
+.cn-object-data-widget__value[data-v-324e1a00] {
 	font-size: 1em;
 	color: var(--color-main-text);
 	overflow-wrap: anywhere;
@@ -23197,24 +23242,24 @@ to { background-position: -200% 0;
    which drew a horizontal scrollbar under every data widget in a tab (dossiq's
    case page, Data tab). The end padding drops by the same 4px so the text and
    the edit icon sit where they sat. */
-.cn-object-data-widget__value--editable[data-v-76edf75d] {
+.cn-object-data-widget__value--editable[data-v-324e1a00] {
 	cursor: pointer;
 	border-radius: var(--border-radius);
 	padding: 4px 20px 4px 4px;
 	margin: -4px 0 -4px -4px;
 }
-.cn-object-data-widget__value--editable[data-v-76edf75d]:hover {
+.cn-object-data-widget__value--editable[data-v-324e1a00]:hover {
 	background: var(--color-background-dark);
 }
-.cn-object-data-widget__value--editable[data-v-76edf75d]:focus-visible {
+.cn-object-data-widget__value--editable[data-v-324e1a00]:focus-visible {
 	outline: 2px solid var(--color-primary-element);
 	outline-offset: 2px;
 }
-.cn-object-data-widget__value--empty[data-v-76edf75d] {
+.cn-object-data-widget__value--empty[data-v-324e1a00] {
 	color: var(--color-text-maxcontrast);
 	font-style: italic;
 }
-.cn-object-data-widget__edit-icon[data-v-76edf75d] {
+.cn-object-data-widget__edit-icon[data-v-324e1a00] {
 	position: absolute;
 	right: 4px;
 	top: 50%;
@@ -23223,21 +23268,21 @@ to { background-position: -200% 0;
 	opacity: 0;
 	transition: opacity 0.15s ease;
 }
-.cn-object-data-widget__value--editable:hover .cn-object-data-widget__edit-icon[data-v-76edf75d],
-.cn-object-data-widget__value--editable:focus-visible .cn-object-data-widget__edit-icon[data-v-76edf75d] {
+.cn-object-data-widget__value--editable:hover .cn-object-data-widget__edit-icon[data-v-324e1a00],
+.cn-object-data-widget__value--editable:focus-visible .cn-object-data-widget__edit-icon[data-v-324e1a00] {
 	opacity: 1;
 }
-.cn-object-data-widget__editor[data-v-76edf75d] {
+.cn-object-data-widget__editor[data-v-324e1a00] {
 	display: flex;
 	flex-direction: column;
 	gap: 4px;
 }
-.cn-object-data-widget__editor-actions[data-v-76edf75d] {
+.cn-object-data-widget__editor-actions[data-v-324e1a00] {
 	display: flex;
 	gap: 2px;
 	justify-content: flex-end;
 }
-.cn-object-data-widget__textarea[data-v-76edf75d] {
+.cn-object-data-widget__textarea[data-v-324e1a00] {
 	width: 100%;
 	min-height: 80px;
 	padding: 8px;
@@ -23249,11 +23294,11 @@ to { background-position: -200% 0;
 	font-size: inherit;
 	resize: vertical;
 }
-.cn-object-data-widget__textarea[data-v-76edf75d]:focus {
+.cn-object-data-widget__textarea[data-v-324e1a00]:focus {
 	border-color: var(--color-primary-element);
 	outline: none;
 }
-.cn-object-data-widget__empty[data-v-76edf75d] {
+.cn-object-data-widget__empty[data-v-324e1a00] {
 	color: var(--color-text-maxcontrast);
 	font-style: italic;
 	padding: calc(2 * var(--default-grid-baseline, 4px));
@@ -23261,16 +23306,16 @@ to { background-position: -200% 0;
 
 /* Compact inline table for array-of-objects values. Dense + unstyled-simple;
    fits the card and participates in the whole-row overflow handling. */
-.cn-object-data-widget__mini-table-wrap[data-v-76edf75d] {
+.cn-object-data-widget__mini-table-wrap[data-v-324e1a00] {
 	max-width: 100%;
 }
-.cn-object-data-widget__mini-table[data-v-76edf75d] {
+.cn-object-data-widget__mini-table[data-v-324e1a00] {
 	width: 100%;
 	border-collapse: collapse;
 	font-size: 0.9em;
 }
-.cn-object-data-widget__mini-table th[data-v-76edf75d],
-.cn-object-data-widget__mini-table td[data-v-76edf75d] {
+.cn-object-data-widget__mini-table th[data-v-324e1a00],
+.cn-object-data-widget__mini-table td[data-v-324e1a00] {
 	text-align: start;
 	padding: 2px 8px 2px 0;
 	border-bottom: 1px solid var(--color-border);
@@ -23281,23 +23326,23 @@ to { background-position: -200% 0;
 	   cell, and the card 8px wider than its cell (pipelinq's ticket page). */
 	white-space: normal;
 }
-.cn-object-data-widget__mini-table th[data-v-76edf75d] {
+.cn-object-data-widget__mini-table th[data-v-324e1a00] {
 	color: var(--color-text-maxcontrast);
 	font-weight: 500;
 }
-.cn-object-data-widget__more[data-v-76edf75d] {
+.cn-object-data-widget__more[data-v-324e1a00] {
 	margin-top: 2px;
 	font-size: 0.85em;
 	color: var(--color-text-maxcontrast);
 }
 
 /* Comma-less chip row for array-of-scalars values. */
-.cn-object-data-widget__chips[data-v-76edf75d] {
+.cn-object-data-widget__chips[data-v-324e1a00] {
 	display: flex;
 	flex-wrap: wrap;
 	gap: 4px;
 }
-.cn-object-data-widget__chip[data-v-76edf75d] {
+.cn-object-data-widget__chip[data-v-324e1a00] {
 	padding: 1px 8px;
 	border-radius: 12px;
 	background: var(--color-background-dark);
@@ -23305,27 +23350,37 @@ to { background-position: -200% 0;
 }
 
 /* Key: value definition list for a single plain-object value. */
-.cn-object-data-widget__deflist[data-v-76edf75d] {
+.cn-object-data-widget__deflist[data-v-324e1a00] {
 	display: grid;
 	grid-template-columns: auto 1fr;
 	gap: 2px 8px;
 	margin: 0;
 }
-.cn-object-data-widget__deflist dt[data-v-76edf75d] {
+.cn-object-data-widget__deflist dt[data-v-324e1a00] {
 	color: var(--color-text-maxcontrast);
 	font-size: 0.9em;
 }
-.cn-object-data-widget__deflist dd[data-v-76edf75d] {
+.cn-object-data-widget__deflist dd[data-v-324e1a00] {
 	margin: 0;
 	overflow-wrap: anywhere;
 }
 
+/* A long description keeps its own paragraphs. Set on an inline span with no
+   surrounding template whitespace, so only the value's own line breaks show. */
+.cn-object-data-widget__deflist-text[data-v-324e1a00] {
+	white-space: pre-wrap;
+}
+.cn-object-data-widget__deflist--nested[data-v-324e1a00] {
+	padding-inline-start: 8px;
+	border-inline-start: 2px solid var(--color-border);
+}
+
 /* Responsive: collapse to single column on narrow widths */
 @media (max-width: 600px) {
-.cn-object-data-widget__grid[data-v-76edf75d] {
+.cn-object-data-widget__grid[data-v-324e1a00] {
 		grid-template-columns: 1fr !important;
 }
-.cn-object-data-widget__cell[data-v-76edf75d] {
+.cn-object-data-widget__cell[data-v-324e1a00] {
 		grid-column: span 1 !important;
 		grid-row: span 1 !important;
 }
@@ -25216,18 +25271,18 @@ button.cn-stepper__step[data-v-776581d4] {
 }
 
 
-.cn-week-strip[data-v-b6c5e274] {
+.cn-week-strip[data-v-27a717bd] {
 	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-b6c5e274] {
+.cn-week-strip--inset[data-v-27a717bd] {
 	box-sizing: border-box;
 	padding: var(--cn-widget-board-inset, 16px 24px 22px);
 }
-.cn-week-strip__state[data-v-b6c5e274] {
+.cn-week-strip__state[data-v-27a717bd] {
 	display: flex;
 	align-items: center;
 	gap: 8px;
@@ -25235,15 +25290,15 @@ button.cn-stepper__step[data-v-776581d4] {
 	padding: 12px 4px;
 	color: var(--color-text-maxcontrast);
 }
-.cn-week-strip__scroll[data-v-b6c5e274] {
+.cn-week-strip__scroll[data-v-27a717bd] {
 	overflow-x: auto;
 	border-radius: var(--border-radius-large, 8px);
 }
-.cn-week-strip__scroll[data-v-b6c5e274]:focus-visible {
+.cn-week-strip__scroll[data-v-27a717bd]:focus-visible {
 	outline: 2px solid var(--color-primary-element);
 	outline-offset: 2px;
 }
-.cn-week-strip__days[data-v-b6c5e274] {
+.cn-week-strip__days[data-v-27a717bd] {
 	display: grid;
 	grid-template-columns: repeat(var(--cn-week-strip-columns, 5), minmax(128px, 1fr));
 	gap: 10px;
@@ -25253,7 +25308,7 @@ button.cn-stepper__step[data-v-776581d4] {
 	padding: 0;
 	list-style: none;
 }
-.cn-week-strip__day[data-v-b6c5e274] {
+.cn-week-strip__day[data-v-27a717bd] {
 	display: flex;
 	flex-direction: column;
 	gap: 8px;
@@ -25263,11 +25318,11 @@ button.cn-stepper__step[data-v-776581d4] {
 	border-radius: var(--border-radius-large, 8px);
 	background: var(--color-background-hover);
 }
-.cn-week-strip__day--today[data-v-b6c5e274] {
+.cn-week-strip__day--today[data-v-27a717bd] {
 	border-color: var(--color-primary-element);
 	background: var(--color-primary-element-light);
 }
-.cn-week-strip__head[data-v-b6c5e274] {
+.cn-week-strip__head[data-v-27a717bd] {
 	display: flex;
 	align-items: center;
 	justify-content: space-between;
@@ -25276,7 +25331,7 @@ button.cn-stepper__step[data-v-776581d4] {
 	font-weight: 600;
 	color: var(--color-main-text);
 }
-.cn-week-strip__today[data-v-b6c5e274] {
+.cn-week-strip__today[data-v-27a717bd] {
 	padding: 1px 8px;
 	border-radius: var(--border-radius-pill, 10px);
 	background: var(--color-primary-element);
@@ -25284,7 +25339,7 @@ button.cn-stepper__step[data-v-776581d4] {
 	font-size: 0.85em;
 	font-weight: 700;
 }
-.cn-week-strip__items[data-v-b6c5e274] {
+.cn-week-strip__items[data-v-27a717bd] {
 	display: flex;
 	flex-direction: column;
 	gap: 6px;
@@ -25292,7 +25347,7 @@ button.cn-stepper__step[data-v-776581d4] {
 	padding: 0;
 	list-style: none;
 }
-.cn-week-strip__item[data-v-b6c5e274] {
+.cn-week-strip__item[data-v-27a717bd] {
 	display: flex;
 	flex-direction: column;
 	gap: 4px;
@@ -25303,41 +25358,41 @@ button.cn-stepper__step[data-v-776581d4] {
 	color: var(--color-main-text);
 	text-decoration: none;
 }
-.cn-week-strip__item--link[data-v-b6c5e274]:hover {
+.cn-week-strip__item--link[data-v-27a717bd]:hover {
 	border-color: var(--color-primary-element);
 }
-.cn-week-strip__item--link[data-v-b6c5e274]:focus-visible {
+.cn-week-strip__item--link[data-v-27a717bd]:focus-visible {
 	outline: 2px solid var(--color-primary-element);
 	outline-offset: 2px;
 }
 
 /* The edge is drawn inside the box, so a late item is as wide as the others. */
-.cn-week-strip__item--late[data-v-b6c5e274] {
+.cn-week-strip__item--late[data-v-27a717bd] {
 	border-color: var(--color-element-error, var(--color-error));
 	box-shadow: inset 3px 0 0 0 var(--color-element-error, var(--color-error));
 }
-.cn-week-strip__title[data-v-b6c5e274] {
+.cn-week-strip__title[data-v-27a717bd] {
 	font-size: 0.95em;
 	line-height: 1.3;
 	overflow-wrap: anywhere;
 }
-.cn-week-strip__meta[data-v-b6c5e274] {
+.cn-week-strip__meta[data-v-27a717bd] {
 	font-size: 0.85em;
 	color: var(--color-text-maxcontrast);
 	overflow-wrap: anywhere;
 }
-.cn-week-strip__late[data-v-b6c5e274] {
+.cn-week-strip__late[data-v-27a717bd] {
 	font-size: 0.8em;
 	font-weight: 600;
 	color: var(--color-text-error, var(--color-error-text));
 }
-.cn-week-strip__empty[data-v-b6c5e274] {
+.cn-week-strip__empty[data-v-27a717bd] {
 	font-size: 0.9em;
 	color: var(--color-text-maxcontrast);
 }
 
 /* "+N more" under a capped day: a quiet text control, 24px high to click. */
-.cn-week-strip__more[data-v-b6c5e274] {
+.cn-week-strip__more[data-v-27a717bd] {
 	align-self: flex-start;
 	min-height: 24px;
 	margin: 0;
@@ -25352,10 +25407,10 @@ button.cn-stepper__step[data-v-776581d4] {
 	text-decoration: none;
 	cursor: pointer;
 }
-.cn-week-strip__more[data-v-b6c5e274]:hover {
+.cn-week-strip__more[data-v-27a717bd]:hover {
 	text-decoration: underline;
 }
-.cn-week-strip__more[data-v-b6c5e274]:focus-visible {
+.cn-week-strip__more[data-v-27a717bd]:focus-visible {
 	outline: 2px solid var(--color-primary-element);
 	outline-offset: 2px;
 }
@@ -37533,17 +37588,17 @@ button.cn-object-calendar__overflow[data-v-2735e5ef] {
 }
 
 
-.cn-dashboard-grid[data-v-ca2ae49c] {
+.cn-dashboard-grid[data-v-a91998fc] {
 	width: 100%;
 	min-height: 200px;
 }
-.grid-stack[data-v-ca2ae49c] {
+.grid-stack[data-v-a91998fc] {
 	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-ca2ae49c] {
+.cn-dashboard-grid__sr-only[data-v-a91998fc] {
 	position: absolute;
 	width: 1px;
 	height: 1px;
@@ -37558,7 +37613,7 @@ button.cn-object-calendar__overflow[data-v-2735e5ef] {
 /* 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-ca2ae49c]:focus-visible {
+.grid-stack-item[data-v-a91998fc]:focus-visible {
 	outline: 2px solid var(--color-primary-element, #0082c9);
 	outline-offset: 2px;
 	border-radius: var(--border-radius-container-large, 16px);
@@ -37570,19 +37625,19 @@ button.cn-object-calendar__overflow[data-v-2735e5ef] {
    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-ca2ae49c] >  .grid-stack-item-content > * {
+.cn-dashboard-grid__item--fit[data-v-a91998fc] >  .grid-stack-item-content > * {
 	height: auto;
 }
-[data-v-ca2ae49c] .grid-stack-item-content {
+[data-v-a91998fc] .grid-stack-item-content {
 	background: var(--color-main-background);
 	border: none;
 	box-shadow: none;
 	overflow: hidden;
 }
-[data-v-ca2ae49c] .grid-stack-item-content:has(.cn-widget-wrapper--borderless) {
+[data-v-a91998fc] .grid-stack-item-content:has(.cn-widget-wrapper--borderless) {
 	background: transparent;
 }
-[data-v-ca2ae49c] .grid-stack-placeholder > .placeholder-content {
+[data-v-a91998fc] .grid-stack-placeholder > .placeholder-content {
 	background: var(--color-primary-element-light);
 	border: 2px dashed var(--color-primary-element);
 	border-radius: var(--border-radius-large);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@conduction/nextcloud-vue",
-  "version": "2.56.0-beta.35",
+  "version": "2.56.0-beta.36",
   "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/CnDashboardGrid/CnDashboardGrid.vue

@@ -28,12 +28,12 @@
 
 		<div class="grid-stack">
 			<div
-				v-for="(item, index) in layout"
+				v-for="item in itemsInRowOrder"
 				:key="resolveItemKey(item)"
 				class="grid-stack-item"
 				:class="{ 'cn-dashboard-grid__item--fit': sizeToContentAttr(item) !== undefined }"
 				role="group"
-				:aria-label="resolveItemLabel(item, index)"
+				:aria-label="resolveItemLabel(item, layout.indexOf(item))"
 				:aria-describedby="itemDescribedBy"
 				:tabindex="itemTabindex"
 				:gs-id="item.id"
@@ -71,6 +71,7 @@
 <script>
 import { translate as t } from '@nextcloud/l10n'
 import { GridStack } from 'gridstack'
+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
 // exact same installed copy, because GridStack's JS writes layout state
@@ -333,6 +334,30 @@ export default {
 	},
 
 	computed: {
+		/**
+		 * The layout's items top to bottom, then left to right: the order the
+		 * items are in the page, so GridStack places them in that order.
+		 *
+		 * GridStack sizes a size-to-content cell while it adds the items, one
+		 * at a time, and an item it adds onto a cell that has already grown
+		 * moves itself below whatever it then collides with. In the layout's
+		 * own order a card declared after the lists (pipelinq's full-width
+		 * "client in focus" card) was added last, so when the banner above
+		 * it grew it skipped past the stat tiles AND the lists and landed at
+		 * the bottom. Added top to bottom, every card lands under the one
+		 * above it. It is also the order a screen reader and the Tab key
+		 * follow. An item without a row or column sorts after the items
+		 * that have one, in the layout's order.
+		 *
+		 * @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 {Array<object>} The items in row order.
+		 */
+		itemsInRowOrder() {
+			const items = Array.isArray(this.layout) ? [...this.layout] : []
+			const at = (value) => (Number.isFinite(value) ? value : Number.MAX_SAFE_INTEGER)
+			return items.sort((a, b) => (at(a.gridY) - at(b.gridY)) || (at(a.gridX) - at(b.gridX)))
+		},
+
 		/**
 		 * Whether the grid draws each layout row as ROW_SPLIT finer rows. A
 		 * size-to-content cell can only be a whole number of rows tall, so on
@@ -608,6 +633,13 @@ export default {
 			)
 		},
 
+		/**
+		 * Build the GridStack grid on the rendered items, install the growth
+		 * wrapper (`keepOrderOnGrowth`) and listen for its changes.
+		 *
+		 * @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}
+		 */
 		initGrid() {
 			if (this.cellHeightCssVar && typeof document !== 'undefined' && document.documentElement) {
 				document.documentElement.style.setProperty(this.cellHeightCssVar, `${this.cellHeight}px`)
@@ -624,6 +656,7 @@ export default {
 				removable: false,
 				...(this.columnOpts ? { columnOpts: this.columnOpts } : {}),
 			}, el)
+			this.keepOrderOnGrowth()
 
 			this.grid.on('change', (_event, items) => {
 				this.handleGridChange(items)
@@ -635,6 +668,87 @@ export default {
 			this.syncInteractivity()
 		},
 
+		/**
+		 * Let a size-to-content cell that grows push the cards under it down in
+		 * their order. GridStack resolves that collision itself, but not in
+		 * order: when pipelinq's banner grew from two rows to three, the
+		 * full-width card under the stat tiles landed below the lists, also
+		 * with `float: false`. Every grow after the grid is built, whether
+		 * GridStack measures it on resize or this grid's content observer asks
+		 * for it, now first moves the cards the growth reaches down by the
+		 * growth (`planGrowth`), bottom-most first, and only then grows the
+		 * cell, so GridStack has no collision left to resolve. The wrapper is
+		 * installed after `GridStack.init` has already measured the cells on
+		 * load; the order on load comes from adding the items in row order
+		 * (`itemsInRowOrder`). A cell that shrinks is left to GridStack as
+		 * before.
+		 *
+		 * @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
+			if (!grid || typeof grid.resizeToContent !== 'function' || typeof grid.update !== 'function') {
+				return
+			}
+			const resize = grid.resizeToContent.bind(grid)
+			grid.resizeToContent = (el) => {
+				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
+				const plan = rows ? planGrowth(nodes, node, rows) : []
+				if (plan.length === 0) {
+					resize(el)
+					return
+				}
+				// 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)
+				}
+			}
+		},
+
+		/**
+		 * The rows a size-to-content cell needs for its content, measured the
+		 * way GridStack's `resizeToContent` measures it (the content's first
+		 * child, plus the cell's own padding), within its size-to-content row
+		 * maximum and its minimum and maximum height.
+		 *
+		 * @spec openspec/changes/dashboard-growth-keeps-order/specs/dashboard-grid/spec.md#requirement-a-growing-cell-keeps-the-order-of-the-cards-under-it
+		 * @param {HTMLElement} el The cell.
+		 * @param {object} node Its GridStack node.
+		 * @return {number|null} The rows, or null when it cannot be measured.
+		 */
+		contentRows(el, node) {
+			const cell = this.grid.getCellHeight(true)
+			const item = el.querySelector('.grid-stack-item-content')
+			const child = item && item.firstElementChild
+			if (!el.clientHeight || !cell || !child || !Number.isFinite(node.h)) {
+				return null
+			}
+			const padding = el.clientHeight - item.clientHeight
+			const itemHeight = node.h * cell - padding
+			const wanted = child.getBoundingClientRect().height || itemHeight
+			let rows = Math.ceil((node.h * cell + wanted - itemHeight) / cell)
+			if (Number.isInteger(node.sizeToContent) && rows > node.sizeToContent) {
+				rows = node.sizeToContent
+			}
+			if (node.minH && rows < node.minH) {
+				rows = node.minH
+			} else if (node.maxH && rows > node.maxH) {
+				rows = node.maxH
+			}
+			return rows
+		},
+
 		/**
 		 * Keep both editing lanes in step with whether an edit could actually be
 		 * kept: the pointer's handles, and — through `reflowed` feeding