@ixfx/components 0.11.6 → 0.11.8

package/dist/{grid-list-3fGhdaFA.js → grid-list-Bwaf61is.js}

@@ -3,19 +3,388 @@ import { n as tickledStyles, t as tickledItemStyles } from "./tickled-styles-BrA
 import { t as themeFallbacks } from "./fallbacks-DQ_5OsmR.js";
 import { n as safeCustomElement, t as __decorate } from "./decorate-VRK8rslU.js";
 import { c as createElementListSearchAdapter, d as createDataListSearchAdapter, i as ListSearchController, n as listSearchStyles, o as registerListSearchCommands, r as LIST_SEARCH_MODES, u as keyForElement } from "./incr-search-D91M4Ozq.js";
+import { i as resolveGroupKey, r as partitionByGroup } from "./grouping-RYPnHkrS.js";
 import { t as ListNativeDragController } from "./list-native-drag-controller-B9xO0XWn.js";
-import { r as ListDragSelectController, t as ListSelectionController } from "./list-selection-controller-SA4piSBi.js";
+import { r as ListDragSelectController, t as ListSelectionController } from "./list-selection-controller-BeE70lbB.js";
 import { i as listItemFadeKeyframes } from "./list-item-animation-BUoEKi5s.js";
 import "./interaction-BskmlA9t.js";
 import { t as scrollFadeStyles } from "./scroll-fade-BrNUIYnm.js";
 import { n as appearanceColor, t as appearanceAbsent } from "./item-appearance-BjcMyauw.js";
 import "./pan-text-CqtvjPyK.js";
+import "./list-group-header.js";
 import { LitElement, css, html, nothing } from "lit";
 import { property, state } from "lit/decorators.js";
 import { createCommandRegistry } from "@clinth/ui-commands";
 import { repeat } from "lit/directives/repeat.js";
 import { createRef, ref } from "lit/directives/ref.js";
+//#region src/grid-list/grid-list-layout.ts
+/**
+* `itemWidth` is the square's width; `rowHeight` is the full cell height
+* (square, plus the caption band in `separate` / `under` styles).
+* `scrollOffset` is `scrollTop` for `grid`/`column` and `scrollLeft` for `row`.
+*/
+function computeGridWindow(count, itemWidth, rowHeight, gap, viewportWidth, viewportHeight, scrollOffset, orientation, overscan = 2) {
+	const w = Math.max(1, itemWidth);
+	const h = Math.max(1, rowHeight);
+	const g = Math.max(0, gap);
+	const colStride = w + g;
+	const rowStride = h + g;
+	const offset = Math.max(0, scrollOffset);
+	if (orientation === `row`) {
+		const rows = count === 0 ? 0 : 1;
+		const totalWidth = count === 0 ? 0 : (count - 1) * colStride + w;
+		if (count === 0 || viewportWidth <= 0) return {
+			cols: count,
+			rows,
+			totalHeight: 0,
+			totalWidth,
+			startIndex: 0,
+			endIndex: 0,
+			colStride,
+			rowStride,
+			horizontal: true
+		};
+		const firstVisible = Math.max(0, Math.floor(offset / colStride));
+		const lastVisible = Math.ceil((offset + viewportWidth) / colStride);
+		return {
+			cols: count,
+			rows,
+			totalHeight: 0,
+			totalWidth,
+			startIndex: Math.max(0, firstVisible - overscan),
+			endIndex: Math.min(count, lastVisible + overscan),
+			colStride,
+			rowStride,
+			horizontal: true
+		};
+	}
+	const cols = orientation === `column` ? 1 : Math.max(1, Math.floor((Math.max(0, viewportWidth) + g) / colStride));
+	const rows = count === 0 ? 0 : Math.ceil(count / cols);
+	const totalHeight = rows === 0 ? 0 : (rows - 1) * rowStride + h;
+	if (count === 0 || viewportHeight <= 0) return {
+		cols,
+		rows,
+		totalHeight,
+		totalWidth: 0,
+		startIndex: 0,
+		endIndex: 0,
+		colStride,
+		rowStride,
+		horizontal: false
+	};
+	const firstVisibleRow = Math.max(0, Math.floor(offset / rowStride));
+	const lastVisibleRow = Math.ceil((offset + viewportHeight) / rowStride);
+	const rowStart = Math.max(0, firstVisibleRow - overscan);
+	const rowEnd = Math.min(rows, lastVisibleRow + overscan);
+	return {
+		cols,
+		rows,
+		totalHeight,
+		totalWidth: 0,
+		startIndex: rowStart * cols,
+		endIndex: Math.min(count, rowEnd * cols),
+		colStride,
+		rowStride,
+		horizontal: false
+	};
+}
+function buildSections(p, cols, stride, itemExtent) {
+	const g = Math.max(0, p.gap);
+	const horizontal = p.orientation === `row`;
+	const lineCount = (n) => horizontal ? n : Math.ceil(n / cols);
+	const extentFor = (n) => n === 0 ? 0 : (lineCount(n) - 1) * stride + itemExtent;
+	if (!p.groups) {
+		const end = extentFor(p.count);
+		return {
+			sections: [{
+				group: void 0,
+				first: 0,
+				count: p.count,
+				headerOffset: 0,
+				itemsOffset: 0,
+				end
+			}],
+			total: end,
+			count: p.count
+		};
+	}
+	const headerSize = horizontal ? p.headerWidth : p.headerHeight;
+	const sections = [];
+	let cursor = 0;
+	let first = 0;
+	for (const group of p.groups) {
+		const count = group.collapsed ? 0 : group.count;
+		const itemsOffset = cursor + headerSize + g;
+		const end = count === 0 ? cursor + headerSize : itemsOffset + extentFor(count);
+		sections.push({
+			group,
+			first,
+			count,
+			headerOffset: cursor,
+			itemsOffset,
+			end
+		});
+		first += count;
+		cursor = end + g;
+	}
+	return {
+		sections,
+		total: sections.length === 0 ? 0 : sections[sections.length - 1].end,
+		count: first
+	};
+}
+/** Index of the last section whose `headerOffset` is <= `offset` (0 when before all). */
+function sectionAtOffset(sections, offset) {
+	let lo = 0;
+	let hi = sections.length - 1;
+	while (lo < hi) {
+		const mid = lo + hi + 1 >> 1;
+		if (sections[mid].headerOffset <= offset) lo = mid;
+		else hi = mid - 1;
+	}
+	return lo;
+}
+/** Index of the section holding effective item `index` (skips empty sections). */
+function sectionOfIndex(sections, index) {
+	let lo = 0;
+	let hi = sections.length - 1;
+	while (lo < hi) {
+		const mid = lo + hi + 1 >> 1;
+		if (sections[mid].first <= index) lo = mid;
+		else hi = mid - 1;
+	}
+	let s = lo;
+	while (s < sections.length - 1 && sections[s].count === 0) s++;
+	return s;
+}
+function buildLayout(p) {
+	const horizontal = p.orientation === `row`;
+	const w = Math.max(1, p.itemWidth);
+	const h = Math.max(1, p.rowHeight);
+	const g = Math.max(0, p.gap);
+	const colStride = w + g;
+	const rowStride = h + g;
+	const cols = horizontal ? 1 : p.orientation === `column` ? 1 : Math.max(1, Math.floor((Math.max(0, p.viewportWidth) + g) / colStride));
+	const stride = horizontal ? colStride : rowStride;
+	const itemExtent = horizontal ? w : h;
+	const { sections, total, count } = buildSections(p, cols, stride, itemExtent);
+	const grouped = p.groups !== void 0;
+	const headerSize = horizontal ? p.headerWidth : p.headerHeight;
+	const viewportMain = horizontal ? p.viewportWidth : p.viewportHeight;
+	const cellHeight = rowStride - g;
+	const rowY = Math.max(0, (p.viewportHeight - cellHeight) / 2);
+	const positionOf = (index) => {
+		const si = sectionOfIndex(sections, index);
+		const s = sections[si];
+		const local = Math.max(0, index - s.first);
+		if (horizontal) return {
+			x: s.itemsOffset + local * colStride,
+			y: rowY,
+			col: 0,
+			line: local,
+			section: si
+		};
+		const col = cols <= 1 ? 0 : local % cols;
+		const line = cols <= 1 ? local : Math.floor(local / cols);
+		return {
+			x: col * colStride,
+			y: s.itemsOffset + line * rowStride,
+			col,
+			line,
+			section: si
+		};
+	};
+	const window = (offset, overscan = 2) => {
+		const off = Math.max(0, offset);
+		const headers = [];
+		const ranges = [];
+		const lo = off - overscan * stride;
+		const hi = off + viewportMain + overscan * stride;
+		let firstSection = 0;
+		if (sections.length > 1) {
+			let a = 0;
+			let b = sections.length - 1;
+			while (a < b) {
+				const mid = a + b >> 1;
+				if (sections[mid].end >= lo) b = mid;
+				else a = mid + 1;
+			}
+			firstSection = a;
+		}
+		if (viewportMain > 0) for (let si = firstSection; si < sections.length; si++) {
+			const s = sections[si];
+			if (s.headerOffset > hi) break;
+			if (s.group && s.headerOffset + headerSize >= lo) headers.push({
+				key: s.group.key,
+				label: s.group.label,
+				count: s.group.count,
+				collapsed: s.group.collapsed,
+				offset: s.headerOffset,
+				size: headerSize
+			});
+			if (s.count === 0) continue;
+			const rel = off - s.itemsOffset;
+			const viewport = rel < 0 ? viewportMain + rel : viewportMain;
+			if (viewport <= 0) continue;
+			const sw = computeGridWindow(s.count, w, h, g, horizontal ? viewport : p.viewportWidth, horizontal ? p.viewportHeight : viewport, Math.max(0, rel), p.orientation, overscan);
+			if (sw.endIndex > sw.startIndex) ranges.push([s.first + sw.startIndex, s.first + sw.endIndex]);
+		}
+		return {
+			cols: horizontal ? count : cols,
+			rows: 0,
+			totalHeight: horizontal ? 0 : total,
+			totalWidth: horizontal ? total : 0,
+			startIndex: ranges.length > 0 ? ranges[0][0] : 0,
+			endIndex: ranges.length > 0 ? ranges[ranges.length - 1][1] : 0,
+			colStride,
+			rowStride,
+			horizontal,
+			headers,
+			ranges
+		};
+	};
+	const extentOf = (index) => {
+		const { line, section } = positionOf(index);
+		const s = sections[section];
+		const start = s.itemsOffset + line * stride;
+		return [line === 0 && s.group ? s.headerOffset : start, start + itemExtent];
+	};
+	const neighbour = (index, dLine) => {
+		if (count === 0) return index;
+		const si = sectionOfIndex(sections, index);
+		const s = sections[si];
+		const local = index - s.first;
+		const col = local % cols;
+		if (dLine > 0) {
+			const t = local + cols;
+			if (t <= s.count - 1) return s.first + t;
+			const lastLine = Math.floor((s.count - 1) / cols);
+			if (Math.floor(local / cols) < lastLine) return s.first + s.count - 1;
+			for (let n = si + 1; n < sections.length; n++) if (sections[n].count > 0) return sections[n].first + Math.min(col, sections[n].count - 1);
+			return s.first + s.count - 1;
+		}
+		const t = local - cols;
+		if (t >= 0) return s.first + t;
+		for (let n = si - 1; n >= 0; n--) {
+			const prev = sections[n];
+			if (prev.count > 0) {
+				const line = Math.floor((prev.count - 1) / cols);
+				return prev.first + Math.min(line * cols + col, prev.count - 1);
+			}
+		}
+		return s.first;
+	};
+	const hitTest = (x0, x1, y0, y1) => {
+		const out = [];
+		if (count === 0) return out;
+		const main0 = horizontal ? x0 : y0;
+		const main1 = horizontal ? x1 : y1;
+		const start = sectionAtOffset(sections, main0 - stride);
+		for (let si = Math.max(0, start); si < sections.length; si++) {
+			const s = sections[si];
+			if (s.itemsOffset > main1) break;
+			if (s.count === 0 || s.end < main0) continue;
+			if (horizontal) {
+				const a = Math.max(0, Math.floor((x0 - s.itemsOffset) / colStride));
+				const b = Math.min(s.count - 1, Math.floor((x1 - s.itemsOffset) / colStride));
+				for (let i = a; i <= b; i++) out.push(s.first + i);
+			} else {
+				const colLo = Math.max(0, Math.floor(x0 / colStride));
+				const colHi = Math.min(cols - 1, Math.floor(x1 / colStride));
+				const rowLo = Math.max(0, Math.floor((y0 - s.itemsOffset) / rowStride));
+				const rowHi = Math.floor((y1 - s.itemsOffset) / rowStride);
+				for (let row = rowLo; row <= rowHi; row++) for (let col = colLo; col <= colHi; col++) {
+					const local = row * cols + col;
+					if (local >= 0 && local < s.count) out.push(s.first + local);
+				}
+			}
+		}
+		return out;
+	};
+	const anchorAt = (mainOffset) => {
+		if (count === 0) return {
+			index: 0,
+			lineFrac: 0
+		};
+		let si = sectionAtOffset(sections, mainOffset);
+		while (si < sections.length - 1 && sections[si].count === 0) si++;
+		const s = sections[si];
+		if (s.count === 0) return {
+			index: 0,
+			lineFrac: 0
+		};
+		const centreLine = Math.max(0, mainOffset - s.itemsOffset) / stride;
+		const lineFloor = Math.max(0, Math.floor(centreLine));
+		const local = horizontal ? Math.min(s.count - 1, lineFloor) : Math.min(s.count - 1, lineFloor * cols + Math.max(0, Math.floor((cols - 1) / 2)));
+		return {
+			index: s.first + local,
+			lineFrac: centreLine - lineFloor
+		};
+	};
+	const offsetOfAnchor = (index, lineFrac) => {
+		const { line, section } = positionOf(index);
+		return sections[section].itemsOffset + (line + lineFrac) * stride;
+	};
+	const snapTarget = (offset) => {
+		const si = sectionAtOffset(sections, offset);
+		const s = sections[si];
+		let rel = Math.round((offset - s.itemsOffset) / stride);
+		if (grouped) {
+			const lines = s.count === 0 ? 0 : horizontal ? s.count : Math.ceil(s.count / cols);
+			rel = Math.max(0, Math.min(Math.max(0, lines - 1), rel));
+		}
+		const candidates = [s.itemsOffset + rel * stride];
+		if (grouped) {
+			candidates.push(s.headerOffset);
+			if (si + 1 < sections.length) candidates.push(sections[si + 1].headerOffset);
+		}
+		return candidates.reduce((best, c) => Math.abs(c - offset) < Math.abs(best - offset) ? c : best);
+	};
+	return {
+		horizontal,
+		cols,
+		colStride,
+		rowStride,
+		grouped,
+		count,
+		totalExtent: total,
+		window,
+		positionOf,
+		extentOf,
+		neighbour,
+		hitTest,
+		anchorAt,
+		offsetOfAnchor,
+		snapTarget
+	};
+}
+//#endregion
 //#region src/grid-list/grid-list-source.ts
+/** Reorder `effective` raw indices into contiguous groups, dropping collapsed ones. */
+function applyGrouping(effective, cfg, keyOfRaw) {
+	const parts = partitionByGroup(effective, (raw) => cfg.groupKeyOf(raw), cfg.labelOf ? (key, raws) => cfg.labelOf(key, raws.map((r) => cfg.itemAt(r))) : void 0);
+	const order = [];
+	const groups = [];
+	const groupByKey = /* @__PURE__ */ new Map();
+	for (const part of parts) {
+		const collapsed = cfg.collapsed.has(part.key);
+		groups.push({
+			key: part.key,
+			label: part.label,
+			count: part.items.length,
+			collapsed
+		});
+		for (const raw of part.items) {
+			groupByKey.set(keyOfRaw(raw), part.key);
+			if (!collapsed) order.push(raw);
+		}
+	}
+	return {
+		order,
+		groups,
+		groupByKey
+	};
+}
 const ITEM_SELECTOR$1 = `:scope > *`;
 const SYNTHETIC_PREFIX = `gl-auto-`;
 /** Whether `key` is an auto-assigned key for a keyless light-DOM item. */
@@ -42,6 +411,9 @@ var ElementGridListSource = class {
 	#searchKeys;
 	#effectiveIndices = [];
 	#keysCache;
+	#grouping;
+	#groups = [];
+	#groupByKey = /* @__PURE__ */ new Map();
 	constructor(host) {
 		this.#host = host;
 		this.refresh();
@@ -94,6 +466,16 @@ var ElementGridListSource = class {
 		if (`searchKeys` in opts) this.#searchKeys = opts.searchKeys;
 		this.#recomputeEffective();
 	}
+	setGrouping(config) {
+		this.#grouping = config;
+		this.#recomputeEffective();
+	}
+	groups() {
+		return this.#groups;
+	}
+	groupKeyOfKey(key) {
+		return this.#groupByKey.get(key) ?? null;
+	}
 	refresh() {
 		this.#items = Array.from(this.#host.querySelectorAll(ITEM_SELECTOR$1)).filter((el) => !el.hidden);
 		for (const el of this.#items) {
@@ -136,9 +518,21 @@ var ElementGridListSource = class {
 			}
 			effective.push(i);
 		}
-		this.#effectiveIndices = effective;
+		this.#applyGroupingTo(effective);
 		this.#keysCache = void 0;
 	}
+	#applyGroupingTo(effective) {
+		if (this.#grouping === void 0) {
+			this.#effectiveIndices = effective;
+			this.#groups = [];
+			this.#groupByKey = /* @__PURE__ */ new Map();
+			return;
+		}
+		const grouped = applyGrouping(effective, this.#grouping, (raw) => this.#itemKey(this.#items[raw]));
+		this.#effectiveIndices = grouped.order;
+		this.#groups = grouped.groups;
+		this.#groupByKey = grouped.groupByKey;
+	}
 	#itemKey(el) {
 		const userKey = keyForElement(el);
 		if (userKey !== void 0) return userKey;
@@ -161,6 +555,9 @@ var DataGridListSource = class {
 	#searchKeys;
 	#effectiveIndices = [];
 	#keysCache;
+	#grouping;
+	#groups = [];
+	#groupByKey = /* @__PURE__ */ new Map();
 	constructor(items, adapter) {
 		this.#items = items;
 		this.#adapter = adapter;
@@ -226,6 +623,16 @@ var DataGridListSource = class {
 		if (`searchKeys` in opts) this.#searchKeys = opts.searchKeys;
 		this.#recomputeEffective();
 	}
+	setGrouping(config) {
+		this.#grouping = config;
+		this.#recomputeEffective();
+	}
+	groups() {
+		return this.#groups;
+	}
+	groupKeyOfKey(key) {
+		return this.#groupByKey.get(key) ?? null;
+	}
 	refresh() {
 		this.#recomputeEffective();
 	}
@@ -250,7 +657,16 @@ var DataGridListSource = class {
 			if (this.#searchKeys !== void 0 && !this.#searchKeys.has(this.#adapter.key(this.#items[i], i))) continue;
 			effective.push(i);
 		}
-		this.#effectiveIndices = effective;
+		if (this.#grouping === void 0) {
+			this.#effectiveIndices = effective;
+			this.#groups = [];
+			this.#groupByKey = /* @__PURE__ */ new Map();
+		} else {
+			const grouped = applyGrouping(effective, this.#grouping, (raw) => this.#adapter.key(this.#items[raw], raw));
+			this.#effectiveIndices = grouped.order;
+			this.#groups = grouped.groups;
+			this.#groupByKey = grouped.groupByKey;
+		}
 		this.#keysCache = void 0;
 	}
 };
@@ -266,76 +682,11 @@ const SNAP_DEBOUNCE_MS = 120;
 * to finish. Kept a touch above the default `--grid-list-item-move-duration`.
 */
 const REFLOW_WINDOW_MS = 320;
-function computeGridWindow(count, itemWidth, rowHeight, gap, viewportWidth, viewportHeight, scrollOffset, orientation, overscan = 2) {
-	const w = Math.max(1, itemWidth);
-	const h = Math.max(1, rowHeight);
-	const g = Math.max(0, gap);
-	const colStride = w + g;
-	const rowStride = h + g;
-	const offset = Math.max(0, scrollOffset);
-	if (orientation === `row`) {
-		const rows = count === 0 ? 0 : 1;
-		const totalWidth = count === 0 ? 0 : (count - 1) * colStride + w;
-		if (count === 0 || viewportWidth <= 0) return {
-			cols: count,
-			rows,
-			totalHeight: 0,
-			totalWidth,
-			startIndex: 0,
-			endIndex: 0,
-			colStride,
-			rowStride,
-			horizontal: true
-		};
-		const firstVisible = Math.max(0, Math.floor(offset / colStride));
-		const lastVisible = Math.ceil((offset + viewportWidth) / colStride);
-		return {
-			cols: count,
-			rows,
-			totalHeight: 0,
-			totalWidth,
-			startIndex: Math.max(0, firstVisible - overscan),
-			endIndex: Math.min(count, lastVisible + overscan),
-			colStride,
-			rowStride,
-			horizontal: true
-		};
-	}
-	const cols = orientation === `column` ? 1 : Math.max(1, Math.floor((Math.max(0, viewportWidth) + g) / colStride));
-	const rows = count === 0 ? 0 : Math.ceil(count / cols);
-	const totalHeight = rows === 0 ? 0 : (rows - 1) * rowStride + h;
-	if (count === 0 || viewportHeight <= 0) return {
-		cols,
-		rows,
-		totalHeight,
-		totalWidth: 0,
-		startIndex: 0,
-		endIndex: 0,
-		colStride,
-		rowStride,
-		horizontal: false
-	};
-	const firstVisibleRow = Math.max(0, Math.floor(offset / rowStride));
-	const lastVisibleRow = Math.ceil((offset + viewportHeight) / rowStride);
-	const rowStart = Math.max(0, firstVisibleRow - overscan);
-	const rowEnd = Math.min(rows, lastVisibleRow + overscan);
-	return {
-		cols,
-		rows,
-		totalHeight,
-		totalWidth: 0,
-		startIndex: rowStart * cols,
-		endIndex: Math.min(count, rowEnd * cols),
-		colStride,
-		rowStride,
-		horizontal: false
-	};
+function readProperty(item, name) {
+	return typeof item === `object` && item !== null ? item[name] : void 0;
 }
-function columnOf(index, cols) {
-	return cols <= 1 ? 0 : index % cols;
-}
-function rowOf(index, cols) {
-	return cols <= 1 ? index : Math.floor(index / cols);
+function readAttribute(el, name) {
+	return el.getAttribute(`data-${name}`);
 }
 /** Shallow key-array equality, treating `undefined` (never dispatched) as different. */
 function sameKeys(a, b) {
@@ -363,6 +714,11 @@ let GridListElement = class GridListElement extends LitElement {
 		this.marqueeFromCellBlank = false;
 		this.snapToItem = false;
 		this.items = [];
+		this.groupBy = null;
+		this.crossGroupSelection = false;
+		this.groupHeaderHeight = 28;
+		this.groupHeaderWidth = 120;
+		this._collapsedGroups = /* @__PURE__ */ new Set();
 		this._scrollTop = 0;
 		this._scrollLeft = 0;
 		this._viewportHeight = 0;
@@ -387,6 +743,12 @@ let GridListElement = class GridListElement extends LitElement {
 				interactionMode: this.interactionMode
 			}),
 			getKey: (k) => k,
+			getGroupKey: (k) => this.groupBy === null ? null : this.#source.groupKeyOfKey(k),
+			crossGroupSelection: () => this.crossGroupSelection,
+			getFallbackGroupKey: () => {
+				const k = this.tickled.tickledId;
+				return k !== void 0 && this.groupBy !== null ? this.#source.groupKeyOfKey(k) : null;
+			},
 			onChange: (selected, previous) => {
 				this._syncItemStates();
 				this.requestUpdate();
@@ -484,10 +846,11 @@ let GridListElement = class GridListElement extends LitElement {
 			},
 			shouldStart: (event) => {
 				if (this.marqueeFromCellBlank && this.#isCellBlankPress(event)) return true;
-				for (const node of event.composedPath()) if (node instanceof Element && node.classList.contains(`cell`)) return false;
+				for (const node of event.composedPath()) if (node instanceof Element && (node.classList.contains(`cell`) || node.classList.contains(`group-header`))) return false;
 				return true;
 			}
 		});
+		this.#groupByChanged = false;
 		this.#selectedSnapshot = /* @__PURE__ */ new Set();
 		this.#onScroll = (e) => {
 			const el = e.target;
@@ -537,15 +900,25 @@ let GridListElement = class GridListElement extends LitElement {
 			const count = this.#source.count;
 			if (count === 0) return;
 			const win = this.#currentWindow();
-			const move = (delta) => {
-				const from = this.tickled.tickledId ? this.#source.indexOfKey(this.tickled.tickledId) : -1;
-				const nextIndex = Math.max(0, Math.min(count - 1, from + delta));
+			const layout = this.#layout();
+			const current = () => this.tickled.tickledId ? this.#source.indexOfKey(this.tickled.tickledId) : -1;
+			const goto = (nextIndex) => {
 				const nextKey = this.#source.keyAt(nextIndex);
 				if (nextKey) {
 					this.tickled.handleKeyboardNavigation(nextKey);
 					this.#scrollItemIntoView(nextKey);
 				}
 			};
+			const move = (delta) => goto(Math.max(0, Math.min(count - 1, current() + delta)));
+			const moveLines = (dir, lines = 1) => {
+				let index = current();
+				if (index < 0) {
+					move(dir * lines * win.cols);
+					return;
+				}
+				for (let i = 0; i < lines; i++) index = layout.neighbour(index, dir);
+				goto(index);
+			};
 			const perLine = this.orientation === `grid` ? win.cols : 1;
 			switch (e.key) {
 				case `ArrowLeft`:
@@ -555,10 +928,12 @@ let GridListElement = class GridListElement extends LitElement {
 					move(1);
 					break;
 				case `ArrowUp`:
-					move(-perLine);
+					if (this.orientation === `grid`) moveLines(-1);
+					else move(-perLine);
 					break;
 				case `ArrowDown`:
-					move(perLine);
+					if (this.orientation === `grid`) moveLines(1);
+					else move(perLine);
 					break;
 				case `Home`:
 					this.tickled.handleKeyboardNavigation(`first`);
@@ -573,7 +948,8 @@ let GridListElement = class GridListElement extends LitElement {
 					const mainExtent = win.horizontal ? this._viewportWidth : this._viewportHeight;
 					const mainStride = win.horizontal ? win.colStride : win.rowStride;
 					const visibleLines = Math.max(1, Math.floor(mainExtent / mainStride));
-					move((e.key === `PageDown` ? 1 : -1) * visibleLines * perLine);
+					if (this.orientation === `grid`) moveLines(e.key === `PageDown` ? 1 : -1, visibleLines);
+					else move((e.key === `PageDown` ? 1 : -1) * visibleLines * perLine);
 					break;
 				}
 				case `Enter`: {
@@ -654,6 +1030,11 @@ let GridListElement = class GridListElement extends LitElement {
         position: relative;
         width: 100%;
       }
+      .group-header {
+        position: absolute;
+        inset: 0 auto auto 0;
+        z-index: 1;
+      }
       .cell {
         position: absolute;
         inset: 0 auto auto 0;
@@ -947,6 +1328,9 @@ let GridListElement = class GridListElement extends LitElement {
          specificity. Survivors slide to their new slot; a freshly inserted cell
          also fades in. (A removed item's element is already gone, so there's
          nothing left to fade — the gap simply closes as the others slide.) */
+      :host([reflowing]) .group-header {
+        transition: transform var(--grid-list-item-move-duration, 200ms) cubic-bezier(0.2, 0, 0, 1);
+      }
       :host([reflowing]) .cell {
         transition:
           transform var(--grid-list-item-move-duration, 200ms) cubic-bezier(0.2, 0, 0, 1),
@@ -957,6 +1341,7 @@ let GridListElement = class GridListElement extends LitElement {
         animation: ixfx-list-item-in var(--grid-list-item-move-duration, 200ms) ease both;
       }
       @media (prefers-reduced-motion: reduce) {
+        :host([reflowing]) .group-header { transition: none; }
         :host([reflowing]) .cell { transition: background var(--transition), border-color var(--transition); }
         .cell.entering { animation: none; }
       }
@@ -1098,31 +1483,13 @@ let GridListElement = class GridListElement extends LitElement {
 	* so virtualized off-screen items are covered without DOM measurement.
 	*/
 	#marqueeHitTest(rect) {
-		const count = this.#source.count;
-		if (count === 0) return [];
+		if (this.#source.count === 0) return [];
 		const horizontal = this.orientation === `row`;
-		const win = computeGridWindow(count, this.itemSize, this.#rowHeight(), this.gap, Math.max(1, this._viewportWidth), Math.max(1, this._viewportHeight), horizontal ? this._scrollLeft : this._scrollTop, this.orientation, 0);
-		const out = [];
-		if (horizontal) {
-			const x0 = rect.x + this._scrollLeft;
-			const x1 = x0 + rect.width;
-			const lo = Math.max(0, Math.floor(x0 / win.colStride));
-			const hi = Math.min(count - 1, Math.floor(x1 / win.colStride));
-			for (let i = lo; i <= hi; i++) out.push(i);
-		} else {
-			const x0 = rect.x + this._scrollLeft;
-			const x1 = x0 + rect.width;
-			const y0 = rect.y + this._scrollTop;
-			const y1 = y0 + rect.height;
-			const colLo = Math.max(0, Math.floor(x0 / win.colStride));
-			const colHi = Math.min(win.cols - 1, Math.floor(x1 / win.colStride));
-			const rowLo = Math.max(0, Math.floor(y0 / win.rowStride));
-			const rowHi = Math.floor(y1 / win.rowStride);
-			for (let row = rowLo; row <= rowHi; row++) for (let col = colLo; col <= colHi; col++) {
-				const index = row * win.cols + col;
-				if (index >= 0 && index < count) out.push(index);
-			}
-		}
+		const x0 = rect.x + this._scrollLeft;
+		const x1 = x0 + rect.width;
+		const y0 = horizontal ? 0 : rect.y + this._scrollTop;
+		const y1 = horizontal ? 0 : y0 + rect.height;
+		const out = this.#layout().hitTest(x0, x1, y0, y1);
 		const keys = [];
 		for (const index of out) {
 			const key = this.#source.keyAt(index);
@@ -1272,6 +1639,10 @@ let GridListElement = class GridListElement extends LitElement {
 		if (previousLength === 0 && removedCount === 0) return;
 		if (added.length > 0 && added.length === this.#items.length) return;
 		for (const el of added) this.#entering.add(el);
+		this.#openReflowWindow();
+	}
+	/** Open (or extend) the `[reflowing]` window so moved cells and headers slide. */
+	#openReflowWindow() {
 		this.toggleAttribute(`reflowing`, true);
 		if (this.#reflowTimer) clearTimeout(this.#reflowTimer);
 		this.#reflowTimer = window.setTimeout(() => {
@@ -1328,6 +1699,7 @@ let GridListElement = class GridListElement extends LitElement {
 			this.#sourceElement = new ElementGridListSource(this);
 			this.#source = this.#sourceElement;
 		}
+		this.#source.setGrouping(this.#groupingConfig());
 		this.#applyFilters();
 		if (this.#searchFilterKeys) this.#source.setFilters({ searchKeys: this.#searchFilterKeys });
 	}
@@ -1369,6 +1741,17 @@ let GridListElement = class GridListElement extends LitElement {
 			}
 			this.search?.refresh();
 		}
+		const groupsChanged = changed.has(`groupBy`) || changed.has(`groupLabel`) || changed.has(`_collapsedGroups`);
+		if (groupsChanged && this.hasUpdated) {
+			if (changed.has(`groupBy`)) {
+				if (this._collapsedGroups.size > 0) this._collapsedGroups = /* @__PURE__ */ new Set();
+				this.#groupByChanged = true;
+			}
+			this.#applyGroupingToSource();
+			this.#dropUnreachableCursor();
+			this.#openReflowWindow();
+			this.updateComplete.then(() => this.#emitViewportChange());
+		} else if (groupsChanged) this.#applyGroupingToSource();
 		if (changed.has(`itemSize`) || changed.has(`gap`)) {
 			this.itemSize = Math.max(MIN_ITEM_SIZE, Math.round(this.itemSize));
 			this.gap = Math.max(0, Math.round(this.gap));
@@ -1389,6 +1772,62 @@ let GridListElement = class GridListElement extends LitElement {
 			}
 		}
 	}
+	#groupByChanged;
+	/** Grouping config for the active source, or `undefined` when ungrouped. */
+	#groupingConfig() {
+		const by = this.groupBy;
+		if (by === null || by === void 0 || by === ``) return void 0;
+		const collapsed = this._collapsedGroups;
+		const src = this.#source;
+		if (src instanceof DataGridListSource) return {
+			groupKeyOf: (raw) => resolveGroupKey(by, src.rawItemAt(raw), raw, readProperty),
+			itemAt: (raw) => src.rawItemAt(raw),
+			labelOf: this.groupLabel,
+			collapsed
+		};
+		const elements = src;
+		return {
+			groupKeyOf: (raw) => resolveGroupKey(by, elements.rawElementAt(raw), raw, readAttribute),
+			itemAt: (raw) => elements.rawElementAt(raw),
+			labelOf: this.groupLabel,
+			collapsed
+		};
+	}
+	/** Push the current grouping into the source and refresh the element-mode item cache. */
+	#applyGroupingToSource() {
+		this.#source.setGrouping(this.#groupingConfig());
+		if (this.#source instanceof ElementGridListSource) this.#items = this.#source.effectiveElements();
+	}
+	/** The cursor can't stay on an item that a collapsed group just removed. */
+	#dropUnreachableCursor() {
+		const id = this.tickled.tickledId;
+		if (id !== void 0 && this.#source.indexOfKey(id) < 0) this.tickled.focus(void 0);
+	}
+	/** Groups in display order (empty when ungrouped). */
+	get groups() {
+		return this.groupBy === null ? [] : this.#source.groups();
+	}
+	/** Collapse or expand one group. Fires `list-group-toggle` when the state changes. */
+	setGroupCollapsed(groupKey, collapsed) {
+		if (this._collapsedGroups.has(groupKey) === collapsed) return;
+		const next = new Set(this._collapsedGroups);
+		if (collapsed) next.add(groupKey);
+		else next.delete(groupKey);
+		this._collapsedGroups = next;
+		this._dispatch(`list-group-toggle`, {
+			groupKey,
+			collapsed
+		});
+	}
+	toggleGroup(groupKey) {
+		this.setGroupCollapsed(groupKey, !this._collapsedGroups.has(groupKey));
+	}
+	collapseAllGroups() {
+		for (const g of this.groups) this.setGroupCollapsed(g.key, true);
+	}
+	expandAllGroups() {
+		for (const key of [...this._collapsedGroups]) this.setGroupCollapsed(key, false);
+	}
 	#syncAriaMultiselectable() {
 		this.setAttribute(`aria-multiselectable`, this.selection.canSelectMultiple() ? `true` : `false`);
 	}
@@ -1428,6 +1867,10 @@ let GridListElement = class GridListElement extends LitElement {
 		}
 		this.#applyZoomAnchor();
 		this.#activateTickledPan();
+		if (this.#groupByChanged) {
+			this.#groupByChanged = false;
+			this._dispatch(`list-group-change`, { groupBy: this.groupBy });
+		}
 	}
 	/** Re-anchor the scroll so the item captured in `willUpdate` stays centred. */
 	#applyZoomAnchor() {
@@ -1436,41 +1879,33 @@ let GridListElement = class GridListElement extends LitElement {
 		this.#zoomAnchor = void 0;
 		const vp = this.#viewportRef.value;
 		if (!vp) return;
-		const win = this.#currentWindow();
-		if (win.horizontal) {
-			if (this._viewportWidth <= 0) return;
-			const targetCenter = (index + lineFrac) * win.colStride;
-			const maxScroll = Math.max(0, win.totalWidth - this._viewportWidth);
-			const next = Math.min(maxScroll, Math.max(0, targetCenter - this._viewportWidth / 2));
+		const layout = this.#layout();
+		const horizontal = layout.horizontal;
+		const extent = horizontal ? this._viewportWidth : this._viewportHeight;
+		if (extent <= 0) return;
+		const targetCenter = layout.offsetOfAnchor(index, lineFrac);
+		const maxScroll = Math.max(0, layout.totalExtent - extent);
+		const next = Math.min(maxScroll, Math.max(0, targetCenter - extent / 2));
+		if (horizontal) {
 			if (Math.abs(vp.scrollLeft - next) > .5) {
 				vp.scrollLeft = next;
 				this._scrollLeft = next;
 			}
-			return;
-		}
-		if (this._viewportHeight <= 0) return;
-		const targetCenter = ((win.cols > 0 ? Math.floor(index / win.cols) : 0) + lineFrac) * win.rowStride;
-		const maxScroll = Math.max(0, win.totalHeight - this._viewportHeight);
-		const next = Math.min(maxScroll, Math.max(0, targetCenter - this._viewportHeight / 2));
-		if (Math.abs(vp.scrollTop - next) > .5) {
+		} else if (Math.abs(vp.scrollTop - next) > .5) {
 			vp.scrollTop = next;
 			this._scrollTop = next;
 		}
 	}
 	#captureCentreAnchor(prevOffset, prevExtent, prevItemSize, prevGap, prevCaptionStyle, prevCaptionHeight, prevOrientation) {
-		const count = this.#source?.count ?? 0;
-		if (count === 0) return;
+		if ((this.#source?.count ?? 0) === 0) return;
 		const prevRowHeight = prevItemSize + (prevCaptionStyle === `separate` || prevCaptionStyle === `under` ? prevCaptionHeight : 0);
-		const horizontal = prevOrientation === `row`;
-		const prev = computeGridWindow(count, prevItemSize, prevRowHeight, prevGap, this._viewportWidth, this._viewportHeight, prevOffset, prevOrientation);
-		const mainStride = horizontal ? prev.colStride : prev.rowStride;
-		const centerLine = (prevOffset + prevExtent / 2) / mainStride;
-		const lineFloor = Math.max(0, Math.floor(centerLine));
-		const index = horizontal ? Math.min(count - 1, lineFloor) : Math.min(count - 1, lineFloor * prev.cols + Math.max(0, Math.floor((prev.cols - 1) / 2)));
-		this.#zoomAnchor = {
-			index,
-			lineFrac: centerLine - lineFloor
-		};
+		const prev = this.#buildLayout({
+			itemWidth: prevItemSize,
+			rowHeight: prevRowHeight,
+			gap: prevGap,
+			orientation: prevOrientation
+		});
+		this.#zoomAnchor = prev.anchorAt(prevOffset + prevExtent / 2);
 	}
 	/**
 	* Re-read the viewport after an ancestor's visibility/layout changed.
@@ -1684,37 +2119,75 @@ let GridListElement = class GridListElement extends LitElement {
 		return this.#windowKeys(this.#currentWindow(true));
 	}
 	#windowKeys(win) {
-		return this.#source.keys().slice(win.startIndex, win.endIndex).filter((k) => !isSyntheticKey(k));
+		const keys = this.#source.keys();
+		const out = [];
+		for (const [start, end] of win.ranges) for (let i = start; i < end; i++) if (!isSyntheticKey(keys[i])) out.push(keys[i]);
+		return out;
+	}
+	/** Layout params for the current geometry, with optional overrides (used for zoom anchoring). */
+	#layoutParams(over = {}) {
+		return {
+			count: this.#source.count,
+			groups: this.groupBy === null ? void 0 : this.#source.groups(),
+			itemWidth: this.itemSize,
+			rowHeight: this.#rowHeight(),
+			gap: this.gap,
+			viewportWidth: this._viewportWidth,
+			viewportHeight: this._viewportHeight,
+			orientation: this.orientation,
+			headerHeight: this.groupHeaderHeight,
+			headerWidth: this.groupHeaderWidth,
+			...over
+		};
+	}
+	#buildLayout(over = {}) {
+		return buildLayout(this.#layoutParams(over));
+	}
+	#layoutCache;
+	/** The current layout, rebuilt only when its inputs change (never per scroll). */
+	#layout() {
+		const params = this.#layoutParams();
+		const cached = this.#layoutCache;
+		if (cached) {
+			const a = cached.params;
+			let same = a.groups === params.groups;
+			for (const k of Object.keys(params)) {
+				if (!same) break;
+				same = a[k] === params[k];
+			}
+			if (same) return cached.layout;
+		}
+		const layout = buildLayout(params);
+		this.#layoutCache = {
+			params,
+			layout
+		};
+		return layout;
 	}
 	#currentWindow(noOverscan = false) {
-		const overscan = noOverscan ? 0 : 2;
-		return computeGridWindow(this.#source.count, this.itemSize, this.#rowHeight(), this.gap, this._viewportWidth, this._viewportHeight, this.orientation === `row` ? this._scrollLeft : this._scrollTop, this.orientation, overscan);
+		return this.#layout().window(this.orientation === `row` ? this._scrollLeft : this._scrollTop, noOverscan ? 0 : 2);
 	}
 	/** Adjust the scroll offset so `key` is fully within the viewport. */
 	#scrollItemIntoView(key) {
 		const index = this.#source.indexOfKey(key);
 		const vp = this.#viewportRef.value;
 		if (index < 0 || !vp) return;
-		const win = this.#currentWindow();
-		if (win.horizontal) {
-			const left = index * win.colStride;
-			const right = left + this.itemSize;
+		const [start, end] = this.#layout().extentOf(index);
+		if (this.orientation === `row`) {
 			const viewLeft = vp.scrollLeft;
 			let next = viewLeft;
-			if (left < viewLeft) next = left;
-			else if (right > viewLeft + this._viewportWidth) next = right - this._viewportWidth;
+			if (start < viewLeft) next = start;
+			else if (end > viewLeft + this._viewportWidth) next = end - this._viewportWidth;
 			if (next !== viewLeft) {
 				vp.scrollLeft = next;
 				this._scrollLeft = next;
 			}
 			return;
 		}
-		const top = (win.cols > 0 ? Math.floor(index / win.cols) : 0) * win.rowStride;
-		const bottom = top + this.#rowHeight();
 		const viewTop = vp.scrollTop;
 		let next = viewTop;
-		if (top < viewTop) next = top;
-		else if (bottom > viewTop + this._viewportHeight) next = bottom - this._viewportHeight;
+		if (start < viewTop) next = start;
+		else if (end > viewTop + this._viewportHeight) next = end - this._viewportHeight;
 		if (next !== viewTop) {
 			vp.scrollTop = next;
 			this._scrollTop = next;
@@ -1788,6 +2261,7 @@ let GridListElement = class GridListElement extends LitElement {
       >
         <div class="spacer" style=${spacerStyle}>
           ${this.#source instanceof DataGridListSource ? this.#renderDataCells(win) : this.#renderElementCells(win)}
+          ${this.#renderHeaders(win)}
         </div>
         ${this.#marqueeRect ? html`<div class="marquee" part="marquee" style=${this.#marqueeStyle(this.#marqueeRect)}></div>` : ``}
       </div>
@@ -1795,7 +2269,7 @@ let GridListElement = class GridListElement extends LitElement {
     `;
 	}
 	#renderDataCells(win) {
-		const slice = Array.from({ length: win.endIndex - win.startIndex }, (_, i) => win.startIndex + i);
+		const slice = win.ranges.flatMap(([start, end]) => Array.from({ length: end - start }, (_, i) => start + i));
 		return repeat(slice, (index) => this.#source.keyAt(index), (index) => this.#renderDataCell(index, win));
 	}
 	#renderDataCell(index, win) {
@@ -1810,8 +2284,7 @@ let GridListElement = class GridListElement extends LitElement {
 		const caption = style === `hidden` ? `` : this.#source.labelAt(index);
 		const showCaption = caption !== ``;
 		const cellHeight = win.rowStride - this.gap;
-		const x = win.horizontal ? index * win.colStride : columnOf(index, win.cols) * win.colStride;
-		const y = win.horizontal ? Math.max(0, (this._viewportHeight - cellHeight) / 2) : rowOf(index, win.cols) * win.rowStride;
+		const { x, y } = this.#layout().positionOf(index);
 		const captionCss = separate ? `height:${Math.max(0, this.captionHeight - 4)}px` : style === `under` ? `height:${this.captionHeight}px` : ``;
 		const rawIcon = this.#source.iconAt(index);
 		const icon = appearanceAbsent(rawIcon) ? void 0 : rawIcon;
@@ -1897,8 +2370,25 @@ let GridListElement = class GridListElement extends LitElement {
 		current.startLoop?.();
 	}
 	#renderElementCells(win) {
-		const slice = this.#items.slice(win.startIndex, win.endIndex);
-		return repeat(slice, (_el, i) => this.#source.keyAt(win.startIndex + i), (el, i) => this.#renderCell(el, win.startIndex + i, win));
+		const slice = win.ranges.flatMap(([start, end]) => Array.from({ length: end - start }, (_, i) => start + i));
+		return repeat(slice, (index) => this.#source.keyAt(index), (index) => this.#renderCell(this.#items[index], index, win));
+	}
+	#renderHeaders(win) {
+		if (win.headers.length === 0) return nothing;
+		const horizontal = win.horizontal;
+		return repeat(win.headers, (h) => `__group__${h.key}`, (h) => html`
+        <ixfx-list-group-header
+          class="group-header"
+          part="group-header"
+          data-group-key=${h.key}
+          label=${h.label}
+          count=${h.count}
+          orientation=${horizontal ? `vertical` : `horizontal`}
+          ?collapsed=${h.collapsed}
+          style=${horizontal ? `width:${h.size}px;height:100%;transform:translate(${h.offset}px,0)` : `width:100%;height:${h.size}px;transform:translate(0,${h.offset}px)`}
+          @click=${() => this.toggleGroup(h.key)}
+        ></ixfx-list-group-header>
+      `);
 	}
 	#renderCell(el, index, win) {
 		const key = this.#source.keyAt(index);
@@ -1913,8 +2403,7 @@ let GridListElement = class GridListElement extends LitElement {
 		const caption = style === `hidden` ? `` : this.#captionFor(el);
 		const showCaption = caption !== ``;
 		const cellHeight = win.rowStride - this.gap;
-		const x = win.horizontal ? index * win.colStride : columnOf(index, win.cols) * win.colStride;
-		const y = win.horizontal ? Math.max(0, (this._viewportHeight - cellHeight) / 2) : rowOf(index, win.cols) * win.rowStride;
+		const { x, y } = this.#layout().positionOf(index);
 		const thumbStyle = separate ? `height:${this.itemSize}px` : ``;
 		const captionCss = separate ? `height:${Math.max(0, this.captionHeight - 4)}px` : style === `under` ? `height:${this.captionHeight}px` : ``;
 		return html`
@@ -2013,16 +2502,12 @@ let GridListElement = class GridListElement extends LitElement {
 	#snapToNearestLine() {
 		const vp = this.#viewportRef.value;
 		if (!vp) return;
-		const win = this.#currentWindow();
-		const horizontal = win.horizontal;
-		const stride = horizontal ? win.colStride : win.rowStride;
-		if (stride <= 0) return;
+		const layout = this.#layout();
+		const horizontal = layout.horizontal;
 		const offset = horizontal ? vp.scrollLeft : vp.scrollTop;
-		const extent = horizontal ? win.totalWidth : win.totalHeight;
 		const viewportExtent = horizontal ? this._viewportWidth : this._viewportHeight;
-		const maxScroll = Math.max(0, extent - viewportExtent);
-		const index = Math.round(offset / stride);
-		const target = Math.min(maxScroll, Math.max(0, index * stride));
+		const maxScroll = Math.max(0, layout.totalExtent - viewportExtent);
+		const target = Math.min(maxScroll, Math.max(0, layout.snapTarget(offset)));
 		if (Math.abs(target - offset) < .5) return;
 		vp.scrollTo(horizontal ? {
 			left: target,
@@ -2050,7 +2535,7 @@ let GridListElement = class GridListElement extends LitElement {
 		if (mode === `manual`) return;
 		if (this.selectionMode === `none` && mode !== `checked` && mode !== `sticky`) return;
 		if (this.#dragSelect.isDragging || this.#nativeDragging || this.#nativeDrag.isDragging || this.#postDragSuppressTimer !== 0) return;
-		for (const node of e.composedPath()) if (node instanceof Element && node.classList.contains(`cell`)) return;
+		for (const node of e.composedPath()) if (node instanceof Element && (node.classList.contains(`cell`) || node.classList.contains(`group-header`))) return;
 		this.selection.clear();
 	}
 	#startPostDragSuppressTimer() {
@@ -2151,6 +2636,22 @@ __decorate([property({
 })], GridListElement.prototype, "snapToItem", void 0);
 __decorate([property({ attribute: false })], GridListElement.prototype, "items", void 0);
 __decorate([property({ attribute: false })], GridListElement.prototype, "itemAdapter", void 0);
+__decorate([property({ attribute: `group-by` })], GridListElement.prototype, "groupBy", void 0);
+__decorate([property({ attribute: false })], GridListElement.prototype, "groupLabel", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: `cross-group-selection`,
+	reflect: true
+})], GridListElement.prototype, "crossGroupSelection", void 0);
+__decorate([property({
+	type: Number,
+	attribute: `group-header-height`
+})], GridListElement.prototype, "groupHeaderHeight", void 0);
+__decorate([property({
+	type: Number,
+	attribute: `group-header-width`
+})], GridListElement.prototype, "groupHeaderWidth", void 0);
+__decorate([state()], GridListElement.prototype, "_collapsedGroups", void 0);
 __decorate([state()], GridListElement.prototype, "_scrollTop", void 0);
 __decorate([state()], GridListElement.prototype, "_scrollLeft", void 0);
 __decorate([state()], GridListElement.prototype, "_viewportHeight", void 0);
@@ -2159,4 +2660,4 @@ GridListElement = __decorate([safeCustomElement(`ixfx-grid-list`)], GridListElem
 //#endregion
 export { GridListElement as t };
 
-//# sourceMappingURL=grid-list-3fGhdaFA.js.map
+//# sourceMappingURL=grid-list-Bwaf61is.js.map