@ixfx/components 0.16.5 → 0.17.1

package/dist/{form-CY0nibZ5.js → form-Cxx2sO8_.js}

@@ -1,7 +1,7 @@
-import { n as safeCustomElement, t as __decorate } from "./decorate-VRK8rslU.js";
+import { n as safeCustomElement, t as __decorate } from "./decorate-Dxs8sFX8.js";
 import { LitElement, css } from "lit";
 import { property } from "lit/decorators.js";
-//#region src/util/light-dom-styles.ts
+// src/util/light-dom-styles.ts
 const adoptedRoots = /* @__PURE__ */ new WeakMap();
 /**
 * Makes styles available to a light-DOM component, wherever it is rendered.
@@ -32,8 +32,7 @@ function adoptLightDomStyles(host, styles) {
 		root.prepend(style);
 	}
 }
-//#endregion
-//#region src/form/form-styles.ts
+// src/form/form-styles.ts
 /**
 * Layout rules for the light-DOM form components. Light DOM means Lit's
 * `static styles` can't apply them, so each component calls
@@ -271,8 +270,7 @@ ixfx-form-options[orientation="vertical"] ixfx-form-part > label {
   }
 }
 `;
-//#endregion
-//#region src/form/form-values.ts
+// src/form/form-values.ts
 function collectFormValues(root, options = {}) {
 	const values = {};
 	root.querySelectorAll(`[name]`).forEach((el) => {
@@ -317,8 +315,7 @@ function applyFormValues(root, data) {
 		} else if (`value` in el) el.value = value;
 	});
 }
-//#endregion
-//#region src/form/form.ts
+// src/form/form.ts
 /** Input types where Enter does not mean "submit". */
 const NON_SUBMITTING_INPUTS = /* @__PURE__ */ new Set([
 	`button`,
@@ -414,5 +411,4 @@ __decorate([property({
 	reflect: true
 })], FormElement.prototype, "noValidate", void 0);
 FormElement = __decorate([safeCustomElement(`ixfx-form`)], FormElement);
-//#endregion
 export { formStyles as n, adoptLightDomStyles as r, FormElement as t };

package/dist/{form-BGZK3jZd.d.ts → form-raTQNAWF.d.ts}

@@ -1,11 +1,8 @@
 import { LitElement } from "lit";
-//#region src/form/form-values.d.ts
 type CollectFormValuesOptions = {
   /** Return numbers (or `null` when empty) for `number` and `range` inputs, instead of strings. */
   typed?: boolean;
 };
-//#endregion
-//#region src/form/form.d.ts
 /**
  * Wraps its content in a native `<form>`, so submit, Enter-to-submit,
  * validation, `FormData` and `form.elements` behave as they do for any form.
@@ -50,5 +47,4 @@ declare global {
     'ixfx-form': FormElement;
   }
 }
-//#endregion
 export { FormElement as t };

package/dist/form.d.ts

@@ -1,2 +1,2 @@
-import { t as FormElement } from "./form-BGZK3jZd.js";
+import { t as FormElement } from "./form-raTQNAWF.js";
 export { FormElement };

package/dist/form.js

@@ -1,2 +1 @@
-import { t as FormElement } from "./form-CY0nibZ5.js";
-export { FormElement };
+export { t as FormElement } from "./form-Cxx2sO8_.js";

package/dist/{grid-list-Cz2tKcNZ.js → grid-list-D2hinM64.js}

@@ -1,26 +1,123 @@
-import { t as TickledController } from "./tickled-controller-D-HZymaZ.js";
-import { n as tickledStyles, t as tickledItemStyles } from "./tickled-styles-BrAHEj1q.js";
-import { t as themeFallbacks } from "./fallbacks-DQ_5OsmR.js";
-import { n as safeCustomElement, t as __decorate } from "./decorate-VRK8rslU.js";
-import { c as createElementListSearchAdapter, f as createDataListSearchAdapter, i as ListSearchController, n as listSearchStyles, o as registerListSearchCommands, r as LIST_SEARCH_MODES, u as keyForElement } from "./incr-search-Dc6gYpJG.js";
-import { i as resolveGroupKey, r as partitionByGroup } from "./grouping-RYPnHkrS.js";
-import { a as listItemFadeKeyframes, t as ListNativeDragController } from "./list-native-drag-controller-CcXoS0YX.js";
-import { i as ListDragSelectController, n as gestureOf, t as ListSelectionController } from "./list-selection-controller-D4iIrvJH.js";
-import { c as keysAsFlags, f as withoutFlag, i as capFlags, l as keysToArray, o as flagsFromRecord, s as flagsToRecord, t as EMPTY_FLAGS } from "./pending-BGidHppL.js";
-import { i as sameKeySet, r as isPartialKey, t as PARTIAL_DESCRIPTION } from "./partial-keys-Ck6CiprB.js";
-import { n as createScrollHoverGuard } from "./scroll-hover-guard-Cjw6179Q.js";
-import "./interaction-E-uMGHkJ.js";
-import { t as scrollFadeStyles } from "./scroll-fade-Xx28D7mH.js";
-import { t as ViewStateController } from "./view-state-controller-BdyXWUUM.js";
-import { n as appearanceColor, t as appearanceAbsent } from "./item-appearance-BjcMyauw.js";
-import "./pan-text-CqtvjPyK.js";
+import { n as appearanceColor, t as appearanceAbsent } from "./item-appearance-FRO3TRFI.js";
+import { n as tickledStyles, t as tickledItemStyles } from "./tickled-styles-pnieYweS.js";
+import { c as createElementListSearchAdapter, f as createDataListSearchAdapter, i as ListSearchController, n as listSearchStyles, o as registerListSearchCommands, r as LIST_SEARCH_MODES, u as keyForElement } from "./incr-search-C5114RxZ.js";
+import { i as resolveGroupKey, r as partitionByGroup } from "./grouping-kENdqzSV.js";
+import "./interaction-8Kbbf6xN.js";
+import { i as ListDragSelectController, n as gestureOf, t as ListSelectionController } from "./list-selection-controller-Dkh3m3hX.js";
+import { a as listItemFadeKeyframes, t as ListNativeDragController } from "./list-native-drag-controller-ByftBooJ.js";
+import { i as sameKeySet, r as isPartialKey, t as PARTIAL_DESCRIPTION } from "./partial-keys-D4l_ede_.js";
+import { c as keysAsFlags, f as withoutFlag, i as capFlags, l as keysToArray, o as flagsFromRecord, s as flagsToRecord, t as EMPTY_FLAGS } from "./pending-Afl4LT64.js";
+import { n as createScrollHoverGuard } from "./scroll-hover-guard-BGAjtyXT.js";
+import { t as TickledController } from "./tickled-controller-BVhGKzjZ.js";
+import { t as themeFallbacks } from "./fallbacks-BPjjBoED.js";
+import { t as scrollFadeStyles } from "./scroll-fade-DH8OXSqL.js";
+import { t as ViewStateController } from "./view-state-controller-DiPAPiA7.js";
+import { n as safeCustomElement, t as __decorate } from "./decorate-Dxs8sFX8.js";
 import "./list-group-header.js";
+import "./pan-text-DrJYKQKN.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 { keyed } from "lit/directives/keyed.js";
 import { createRef, ref } from "lit/directives/ref.js";
-//#region src/grid-list/grid-list-layout.ts
+// src/grid-list/grid-list-key-index.ts
+var KeyIndex = class {
+	/** Key → raw index. The first occurrence of a key wins. */
+	#map = /* @__PURE__ */ new Map();
+	/** The items array the map was built from. */
+	#source = void 0;
+	/** The adapter the map was built with. */
+	#adapter = void 0;
+	/**
+	* Rebuild the map if `items` or `adapter` changed since it was built.
+	*
+	* The map is keyed on the identity of the array / adapter it was built from,
+	* so it stays correct even when the items are replaced between Lit update
+	* cycles (a host may assign `items` and then call `updateItem` before the
+	* update flushes).
+	*
+	* One pass — the adapter's `key` is called once per item.
+	*/
+	ensure(items, adapter) {
+		if (this.#source === items && this.#adapter === adapter) return;
+		if (!adapter) {
+			this.#map = /* @__PURE__ */ new Map();
+			this.#source = items;
+			this.#adapter = void 0;
+			return;
+		}
+		const map = /* @__PURE__ */ new Map();
+		for (let i = 0; i < items.length; i++) {
+			const key = adapter.key(items[i], i);
+			if (!map.has(key)) map.set(key, i);
+		}
+		this.#map = map;
+		this.#source = items;
+		this.#adapter = adapter;
+	}
+	/** Raw index of `key`, or `-1`. O(1). */
+	get(key) {
+		return this.#map.get(key) ?? -1;
+	}
+	/** Whether `key` is known. */
+	has(key) {
+		return this.#map.has(key);
+	}
+	/**
+	* Record that `items` is now `next`, after `patch` updated the map.
+	*
+	* `patch` receives the live map so a mutation can adjust only the entries
+	* it touched. The map's "built from" pointer is updated to `next`, so the
+	* next {@link ensure} does not rebuild it.
+	*/
+	commit(next, patch) {
+		if (patch) patch(this.#map);
+		this.#source = next;
+	}
+	/**
+	* Update the map after the item at `idx` changed.
+	*
+	* `next` is the new array; `oldKey` is the key the item had before the
+	* change, and the new key is derived from the item. If the item kept its key
+	* the map is untouched. If it was re-keyed, the old entry is dropped and the
+	* new one added — but only when no *earlier* item already claims the new
+	* key, so "the first occurrence wins" still holds.
+	*/
+	rekey(next, idx, oldKey, item, adapter) {
+		const newKey = adapter.key(item, idx);
+		if (newKey === oldKey) return;
+		this.#map.delete(oldKey);
+		if (!this.#map.has(oldKey)) {
+			for (let i = idx + 1; i < next.length; i++) if (adapter.key(next[i], i) === oldKey) {
+				this.#map.set(oldKey, i);
+				break;
+			}
+		}
+		if (!this.#map.has(newKey)) this.#map.set(newKey, idx);
+	}
+	/**
+	* Rebuild the map from `items` — used after a removal, which shifts every
+	* later item down.
+	*/
+	rebuild(items, adapter) {
+		const map = /* @__PURE__ */ new Map();
+		for (let i = 0; i < items.length; i++) {
+			const key = adapter.key(items[i], i);
+			if (!map.has(key)) map.set(key, i);
+		}
+		this.#map = map;
+		this.#source = items;
+	}
+	/** Add the keys of `items`, which were appended at `base`. */
+	addAppended(items, base, adapter) {
+		for (let i = 0; i < items.length; i++) {
+			const key = adapter.key(items[i], base + i);
+			if (!this.#map.has(key)) this.#map.set(key, base + i);
+		}
+	}
+};
+// 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).
@@ -361,8 +458,7 @@ function buildLayout(p) {
 		snapTarget
 	};
 }
-//#endregion
-//#region src/grid-list/grid-list-source.ts
+// 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);
@@ -394,15 +490,25 @@ const SYNTHETIC_PREFIX = `gl-auto-`;
 function isSyntheticKey(key) {
 	return key.startsWith(SYNTHETIC_PREFIX);
 }
-function warnDuplicateKeys(keys) {
-	const seen = /* @__PURE__ */ new Set();
+/**
+* Warn about duplicate keys while building the key → raw index map, in a single
+* pass. Avoids the throwaway key array `items.map(adapter.key)` used to build.
+* The map keeps the **first** occurrence of each key, matching the
+* "first occurrence wins" contract the warning states.
+*/
+function rawIndexByKey(items, keyOf) {
+	const index = /* @__PURE__ */ new Map();
 	const dupes = /* @__PURE__ */ new Set();
-	for (const k of keys) {
-		if (isSyntheticKey(k)) continue;
-		if (seen.has(k)) dupes.add(k);
-		else seen.add(k);
+	for (let i = 0; i < items.length; i++) {
+		const key = keyOf(items[i], i);
+		if (index.has(key)) {
+			if (!isSyntheticKey(key)) dupes.add(key);
+			continue;
+		}
+		index.set(key, i);
 	}
 	if (dupes.size > 0) console.warn(`ixfx-grid-list: duplicate item key(s) ${[...dupes].map((k) => `"${k}"`).join(`, `)} — the first occurrence wins for key-based operations.`);
+	return index;
 }
 /** Key → first effective index, built from `keys` (first occurrence wins on duplicates). */
 function indexByKey(keys) {
@@ -422,6 +528,8 @@ var ElementGridListSource = class {
 	#effectiveIndices = [];
 	#keysCache;
 	#indexCache;
+	/** Key → raw index, rebuilt with the items (first occurrence wins). */
+	#rawIndexByKey = /* @__PURE__ */ new Map();
 	#grouping;
 	#groups = [];
 	#groupByKey = /* @__PURE__ */ new Map();
@@ -443,6 +551,9 @@ var ElementGridListSource = class {
 		this.#indexCache ??= indexByKey(this.keys());
 		return this.#indexCache.get(key) ?? -1;
 	}
+	rawIndexOfKey(key) {
+		return this.#rawIndexByKey.get(key) ?? -1;
+	}
 	keys() {
 		this.#keysCache ??= this.#effectiveIndices.map((i) => this.#itemKey(this.#items[i]));
 		return this.#keysCache;
@@ -490,7 +601,7 @@ var ElementGridListSource = class {
 	}
 	refresh() {
 		this.#items = Array.from(this.#host.querySelectorAll(ITEM_SELECTOR$1)).filter((el) => !el.hidden);
-		warnDuplicateKeys(this.#items.map((el) => this.#itemKey(el)));
+		this.#rawIndexByKey = rawIndexByKey(this.#items, (el) => this.#itemKey(el));
 		this.#recomputeEffective();
 	}
 	/** Effective-order elements — the array `GridListElement` renders and slices. */
@@ -555,13 +666,20 @@ var DataGridListSource = class {
 	#effectiveIndices = [];
 	#keysCache;
 	#indexCache;
+	/**
+	* Key → **raw** index, built in one pass over the items. The first
+	* occurrence of a key wins (same contract as the duplicate-key warning).
+	* Lets `resolveKeyToData` and the host's `updateItem` find an item without
+	* an O(n) scan per call.
+	*/
+	#rawIndexByKey;
 	#grouping;
 	#groups = [];
 	#groupByKey = /* @__PURE__ */ new Map();
 	constructor(items, adapter) {
 		this.#items = items;
 		this.#adapter = adapter;
-		warnDuplicateKeys(items.map((it, i) => adapter.key(it, i)));
+		this.#rawIndexByKey = rawIndexByKey(items, (it, i) => adapter.key(it, i));
 		this.#recomputeEffective();
 	}
 	get count() {
@@ -648,8 +766,16 @@ var DataGridListSource = class {
 	}
 	resolveKeyToElement(_key) {}
 	resolveKeyToData(key) {
-		const idx = this.#items.findIndex((item, i) => this.#adapter.key(item, i) === key);
-		return idx >= 0 ? this.#items[idx] : void 0;
+		const idx = this.#rawIndexByKey.get(key);
+		return idx === void 0 ? void 0 : this.#items[idx];
+	}
+	/**
+	* Raw (unfiltered) index of `key`, or `-1`. O(1) — the key → raw index map
+	* is built in one pass over the items. The first occurrence of a duplicate
+	* key wins.
+	*/
+	rawIndexOfKey(key) {
+		return this.#rawIndexByKey.get(key) ?? -1;
 	}
 	#recomputeEffective() {
 		const effective = [];
@@ -672,8 +798,7 @@ var DataGridListSource = class {
 		this.#indexCache = void 0;
 	}
 };
-//#endregion
-//#region src/grid-list/grid-list-view-state.ts
+// src/grid-list/grid-list-view-state.ts
 /**
 * - live collapsed groups that no longer exist → pending `false`
 * - pending groups that now exist → applied (`false` collapses, `true` opens)
@@ -756,8 +881,7 @@ function gridScrollTarget(scroll, layout, indexOfKey, extent) {
 		reached: target <= max + 1
 	};
 }
-//#endregion
-//#region src/grid-list/grid-list.ts
+// src/grid-list/grid-list.ts
 const ITEM_SELECTOR = `:scope > *`;
 const MIN_ITEM_SIZE = 16;
 /** How long scrolling must be idle before `snap-to-item` settles the viewport. */
@@ -967,6 +1091,8 @@ let GridListElement = class GridListElement extends LitElement {
 			}
 		});
 		this.#groupByChanged = false;
+		this.#keyIndex = new KeyIndex();
+		this.#cellRevisions = /* @__PURE__ */ new Map();
 		this.#resolveKey = (key) => this.#source.indexOfKey(key) >= 0 ? key : void 0;
 		this.#markedTickled = /* @__PURE__ */ new Set();
 		this.#markedSelected = /* @__PURE__ */ new Set();
@@ -1896,13 +2022,17 @@ let GridListElement = class GridListElement extends LitElement {
 		const dataModeChanged = changed.has(`items`) || changed.has(`itemAdapter`);
 		if (dataModeChanged) {
 			this.#zoomAnchor = void 0;
+			this.#ensureRawIndex();
 			const prevKeys = this.#source?.keys() ?? [];
 			const modeFlipped = this.itemAdapter !== void 0 !== this.#source instanceof DataGridListSource;
 			this.#rebuildSource();
 			const nextKeys = this.#source.keys();
 			const nextKeySet = new Set(nextKeys);
 			const removedKeys = prevKeys.filter((k) => !nextKeySet.has(k));
-			if (removedKeys.length > 0) this.#demoteGone(removedKeys);
+			if (removedKeys.length > 0) {
+				this.#demoteGone(removedKeys);
+				for (const key of removedKeys) this.#cellRevisions.delete(key);
+			}
 			const tickledId = this.tickled.tickledId;
 			if (tickledId && !nextKeySet.has(tickledId)) this.#demoteFocus(tickledId);
 			this._syncItemStates();
@@ -2202,11 +2332,19 @@ let GridListElement = class GridListElement extends LitElement {
 	/**
 	* Data mode only: raw index of `key` in `this.items`, or `-1`. Data-mode keys
 	* come straight from the adapter, so this is exact even under a filter/search.
+	*
+	* O(1) — backed by {@link #keyIndex}, a key → raw index map kept in sync
+	* with `items`.
 	*/
 	#rawIndexOfKey(key) {
-		const adapter = this.itemAdapter;
-		if (!adapter) return -1;
-		return this.items.findIndex((it, i) => adapter.key(it, i) === key);
+		this.#ensureRawIndex();
+		return this.#keyIndex.get(key);
+	}
+	/** Key → raw index for the current `items`. See `grid-list-key-index.ts`. */
+	#keyIndex;
+	/** Rebuild the key → raw index map if `items` / `itemAdapter` changed. */
+	#ensureRawIndex() {
+		this.#keyIndex.ensure(this.items, this.itemAdapter);
 	}
 	/**
 	* Data mode: replace the whole item array. Selection and cursor keep any key
@@ -2223,23 +2361,104 @@ let GridListElement = class GridListElement extends LitElement {
 	* A no-op in element mode.
 	*/
 	appendItems(items) {
-		if (this.itemAdapter && items.length > 0) this.items = [...this.items, ...items];
+		if (this.itemAdapter && items.length > 0) {
+			const base = this.items.length;
+			const next = [...this.items, ...items];
+			this.#ensureRawIndex();
+			this.#keyIndex.addAppended(items, base, this.itemAdapter);
+			this.#keyIndex.commit(next);
+			this.items = next;
+		}
 	}
 	/**
 	* Data mode: replace the item carrying `key`. A visible cell re-renders in
 	* place (the keyed subtree is kept); an offscreen item shows its new content
 	* when scrolled into view. Scroll and selection are untouched. Unknown keys
 	* are ignored.
+	*
+	* Passing the **same object** that is already at `key` is a no-op: the
+	* `items` array is left untouched (same identity) and nothing is emitted.
+	* Use {@link refreshItem} to re-render a cell without changing the data.
+	*
+	* Updating many items one by one? Use {@link updateItems} — it applies them
+	* with a single array copy and a single rebuild.
 	*/
 	updateItem(key, item) {
 		if (!this.itemAdapter) return;
 		const idx = this.#rawIndexOfKey(key);
 		if (idx < 0) return;
+		if (this.items[idx] === item) return;
 		const next = [...this.items];
 		next[idx] = item;
+		this.#ensureRawIndex();
+		this.#keyIndex.rekey(next, idx, key, item, this.itemAdapter);
+		this.#keyIndex.commit(next);
 		this.items = next;
 	}
 	/**
+	* Data mode: replace several items at once — the batched form of
+	* {@link updateItem}.
+	*
+	* `entries` is an array of `{ key, item }` pairs (a `Map<key, item>` is
+	* accepted too). All the replacements are applied with **one** array copy
+	* and **one** source rebuild, so a host that must refresh n rows does not
+	* pay n copies and n scans.
+	*
+	* Semantics match n sequential {@link updateItem} calls:
+	* - unknown keys are ignored;
+	* - an entry whose `item` is the identical object already at that key is
+	*   skipped (it cannot change anything);
+	* - selection, cursor and scroll are untouched;
+	* - if no entry changes anything, `items` is left untouched (same identity)
+	*   and nothing is emitted.
+	*/
+	updateItems(entries) {
+		if (!this.itemAdapter) return;
+		const pairs = [];
+		for (const entry of entries) if (Array.isArray(entry)) pairs.push([entry[0], entry[1]]);
+		else pairs.push([entry.key, entry.item]);
+		if (pairs.length === 0) return;
+		this.#ensureRawIndex();
+		const next = [...this.items];
+		const touched = [];
+		for (const [key, item] of pairs) {
+			const idx = this.#keyIndex.get(key);
+			if (idx < 0) continue;
+			if (next[idx] === item) continue;
+			next[idx] = item;
+			touched.push([
+				idx,
+				key,
+				item
+			]);
+		}
+		if (touched.length === 0) return;
+		for (const [idx, key, item] of touched) this.#keyIndex.rekey(next, idx, key, item, this.itemAdapter);
+		this.#keyIndex.commit(next);
+		this.items = next;
+	}
+	/**
+	* Data mode: re-render the cell for `key` without touching `items`.
+	*
+	* Use this when the *data* is unchanged but the cell should be redrawn — for
+	* example after mutating something the adapter reads from outside the item
+	* (a thumbnail's load state). The `items` array keeps its identity, so the
+	* collection is not copied and no source rebuild is triggered.
+	*
+	* The adapter's `render` is called again for that cell on the next render,
+	* so the cell picks up the new state. Other cells are left alone.
+	*
+	* Unknown keys are ignored. A no-op in element mode.
+	*/
+	refreshItem(key) {
+		if (!this.itemAdapter) return;
+		if (this.#rawIndexOfKey(key) < 0) return;
+		this.#cellRevisions.set(key, (this.#cellRevisions.get(key) ?? 0) + 1);
+		this.requestUpdate();
+	}
+	/** Per-key revision, bumped by {@link refreshItem}. */
+	#cellRevisions;
+	/**
 	* Data mode: remove the items carrying these keys. Removed keys leave the
 	* selection and cursor silently (via the `items` change) and are held as
 	* pending view state. A no-op in element mode.
@@ -2248,7 +2467,12 @@ let GridListElement = class GridListElement extends LitElement {
 		if (!this.itemAdapter) return;
 		const adapter = this.itemAdapter;
 		const keySet = new Set(keys);
-		this.items = this.items.filter((it, i) => !keySet.has(adapter.key(it, i)));
+		const kept = this.items.filter((it, i) => !keySet.has(adapter.key(it, i)));
+		if (kept.length === this.items.length) return;
+		this.#ensureRawIndex();
+		this.#keyIndex.rebuild(kept, adapter);
+		this.#keyIndex.commit(kept);
+		this.items = kept;
 	}
 	/**
 	* Data mode: drop every item. Selection and cursor are reset and one
@@ -2711,13 +2935,24 @@ let GridListElement = class GridListElement extends LitElement {
       >
         <div class="content${icon === void 0 ? `` : ` has-icon`}" part="content">
           ${icon === void 0 ? nothing : html`<span class="cell-icon" part="icon" style=${this.#colorStyle(this.#source.iconColorAt(index))}>${icon}</span>`}
-          ${this.#source.renderCellContent(index)}
+          ${this.#renderCellBody(index, key)}
         </div>
         ${showCaption ? this.#renderCaption(caption, captionCss, tickled, this.#source.badgeAt(index), this.#source.textColorAt(index)) : ``}
       </div>
     `;
 	}
 	/**
+	* The cell's content, keyed by the cell's revision so {@link refreshItem}
+	* can force it to be re-evaluated (and its DOM re-created) even though
+	* `items` did not change. Without a revision change the content is bound
+	* normally, so Lit keeps it in place.
+	*/
+	#renderCellBody(index, key) {
+		const revision = this.#cellRevisions.get(key);
+		if (revision === void 0) return this.#source.renderCellContent(index);
+		return keyed(revision, this.#source.renderCellContent(index));
+	}
+	/**
 	* A tickled cell swaps its plain label for an `ixfx-pan-text` in loop mode
 	* so a truncated label scrolls instead of staying an ellipsis. Unticked
 	* cells keep the cheap plain-text caption.
@@ -3045,5 +3280,4 @@ __decorate([state()], GridListElement.prototype, "_scrollLeft", void 0);
 __decorate([state()], GridListElement.prototype, "_viewportHeight", void 0);
 __decorate([state()], GridListElement.prototype, "_viewportWidth", void 0);
 GridListElement = __decorate([safeCustomElement(`ixfx-grid-list`)], GridListElement);
-//#endregion
 export { GridListElement as t };