@ixfx/components 0.7.4 → 0.8.0

package/dist/grid-list-nRUQOcEL.js

@@ -0,0 +1,1537 @@
+import { t as TickledController } from "./tickled-controller-C66DgJHl.js";
+import { n as tickledStyles, t as tickledItemStyles } from "./tickled-styles-BrAHEj1q.js";
+import { t as themeFallbacks } from "./fallbacks-DNI9xt0F.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-C05WjbZh.js";
+import { i as listItemFadeKeyframes } from "./list-item-animation-DuiwgN3l.js";
+import { t as ListSelectionController } from "./list-selection-controller-DTFI40li.js";
+import "./interaction-Cr13azbM.js";
+import { t as scrollFadeStyles } from "./scroll-fade-CAs1EabA.js";
+import { LitElement, css, html } 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-source.ts
+const ITEM_SELECTOR$1 = `:scope > *`;
+const SYNTHETIC_PREFIX = `gl-auto-`;
+/** Whether `key` is an auto-assigned key for a keyless light-DOM item. */
+function isSyntheticKey(key) {
+	return key.startsWith(SYNTHETIC_PREFIX);
+}
+function warnDuplicateKeys(keys) {
+	const seen = /* @__PURE__ */ new Set();
+	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);
+	}
+	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.`);
+}
+var ElementGridListSource = class {
+	#host;
+	#items = [];
+	#slotNames = /* @__PURE__ */ new WeakMap();
+	#syntheticKeys = /* @__PURE__ */ new WeakMap();
+	#seq = 0;
+	#predicate;
+	#searchKeys;
+	#effectiveIndices = [];
+	#keysCache;
+	constructor(host) {
+		this.#host = host;
+		this.refresh();
+	}
+	get count() {
+		return this.#effectiveIndices.length;
+	}
+	get rawCount() {
+		return this.#items.length;
+	}
+	keyAt(index) {
+		const eff = this.#effectiveIndices[index];
+		return eff === void 0 ? `` : this.#itemKey(this.#items[eff]);
+	}
+	indexOfKey(key) {
+		return this.#effectiveIndices.findIndex((i) => this.#itemKey(this.#items[i]) === key);
+	}
+	keys() {
+		this.#keysCache ??= this.#effectiveIndices.map((i) => this.#itemKey(this.#items[i]));
+		return this.#keysCache;
+	}
+	labelAt(index) {
+		const eff = this.#effectiveIndices[index];
+		return eff === void 0 ? `` : this.#captionFor(this.#items[eff]);
+	}
+	rawKeyAt(index) {
+		const el = this.#items[index];
+		return el === void 0 ? `` : this.#itemKey(el);
+	}
+	rawSearchTextAt(index) {
+		const el = this.#items[index];
+		if (el === void 0) return ``;
+		return el.getAttribute(`data-search-label`) ?? el.getAttribute(`data-label`) ?? el.querySelector(`[data-grid-list-caption]`)?.textContent?.trim() ?? el.textContent?.trim() ?? ``;
+	}
+	isSelectable(index) {
+		const eff = this.#effectiveIndices[index];
+		return eff !== void 0 && !this.#items[eff].hasAttribute(`not-checked`);
+	}
+	renderCellContent(index) {
+		const eff = this.#effectiveIndices[index];
+		if (eff === void 0) return void 0;
+		return html`<slot name=${this.slotNameFor(this.#items[eff])}></slot>`;
+	}
+	setFilters(opts) {
+		if (`predicate` in opts) this.#predicate = opts.predicate;
+		if (`searchKeys` in opts) this.#searchKeys = opts.searchKeys;
+		this.#recomputeEffective();
+	}
+	refresh() {
+		this.#items = Array.from(this.#host.querySelectorAll(ITEM_SELECTOR$1)).filter((el) => !el.hidden);
+		for (const el of this.#items) {
+			const name = this.slotNameFor(el);
+			if (el.getAttribute(`slot`) !== name) el.setAttribute(`slot`, name);
+		}
+		warnDuplicateKeys(this.#items.map((el) => this.#itemKey(el)));
+		this.#recomputeEffective();
+	}
+	/** Effective-order elements — the array `GridListElement` renders and slices. */
+	effectiveElements() {
+		return this.#effectiveIndices.map((i) => this.#items[i]);
+	}
+	/** Raw-order element at `index`, or `undefined`. */
+	rawElementAt(index) {
+		return this.#items[index];
+	}
+	/** Stable per-element `<slot>` name. */
+	slotNameFor(el) {
+		let name = this.#slotNames.get(el);
+		if (name === void 0) {
+			this.#seq += 1;
+			name = `gl-item-${this.#seq}`;
+			this.#slotNames.set(el, name);
+		}
+		return name;
+	}
+	resolveKeyToElement(key) {
+		if (isSyntheticKey(key)) return this.#items.find((el) => this.#syntheticKeys.get(el) === key);
+		return this.#items.find((el) => keyForElement(el) === key);
+	}
+	resolveKeyToData(_key) {}
+	#recomputeEffective() {
+		const effective = [];
+		for (let i = 0; i < this.#items.length; i++) {
+			if (this.#predicate !== void 0 && !this.#predicate(i)) continue;
+			if (this.#searchKeys !== void 0) {
+				const key = this.#itemKey(this.#items[i]);
+				if (!isSyntheticKey(key) && !this.#searchKeys.has(key)) continue;
+			}
+			effective.push(i);
+		}
+		this.#effectiveIndices = effective;
+		this.#keysCache = void 0;
+	}
+	#itemKey(el) {
+		const userKey = keyForElement(el);
+		if (userKey !== void 0) return userKey;
+		let synthetic = this.#syntheticKeys.get(el);
+		if (synthetic === void 0) {
+			this.#seq += 1;
+			synthetic = `${SYNTHETIC_PREFIX}${this.#seq}`;
+			this.#syntheticKeys.set(el, synthetic);
+		}
+		return synthetic;
+	}
+	#captionFor(el) {
+		return el.getAttribute(`data-label`) ?? el.querySelector(`[data-grid-list-caption]`)?.textContent?.trim() ?? ``;
+	}
+};
+var DataGridListSource = class {
+	#items;
+	#adapter;
+	#predicate;
+	#searchKeys;
+	#effectiveIndices = [];
+	#keysCache;
+	constructor(items, adapter) {
+		this.#items = items;
+		this.#adapter = adapter;
+		warnDuplicateKeys(items.map((it, i) => adapter.key(it, i)));
+		this.#recomputeEffective();
+	}
+	get count() {
+		return this.#effectiveIndices.length;
+	}
+	get rawCount() {
+		return this.#items.length;
+	}
+	keyAt(index) {
+		const eff = this.#effectiveIndices[index];
+		return eff === void 0 ? `` : this.#adapter.key(this.#items[eff], eff);
+	}
+	indexOfKey(key) {
+		return this.#effectiveIndices.findIndex((i) => this.#adapter.key(this.#items[i], i) === key);
+	}
+	keys() {
+		this.#keysCache ??= this.#effectiveIndices.map((i) => this.#adapter.key(this.#items[i], i));
+		return this.#keysCache;
+	}
+	labelAt(index) {
+		const eff = this.#effectiveIndices[index];
+		if (eff === void 0) return ``;
+		return this.#adapter.label?.(this.#items[eff], eff) ?? this.#adapter.key(this.#items[eff], eff);
+	}
+	rawKeyAt(index) {
+		return index < 0 || index >= this.#items.length ? `` : this.#adapter.key(this.#items[index], index);
+	}
+	rawSearchTextAt(index) {
+		if (index < 0 || index >= this.#items.length) return ``;
+		const item = this.#items[index];
+		return this.#adapter.searchableText?.(item, index) ?? this.#adapter.label?.(item, index) ?? ``;
+	}
+	isSelectable(index) {
+		const eff = this.#effectiveIndices[index];
+		return eff !== void 0 && !this.#adapter.disabled?.(this.#items[eff], eff);
+	}
+	renderCellContent(index) {
+		const eff = this.#effectiveIndices[index];
+		return eff === void 0 ? void 0 : this.#adapter.render(this.#items[eff], eff);
+	}
+	setFilters(opts) {
+		if (`predicate` in opts) this.#predicate = opts.predicate;
+		if (`searchKeys` in opts) this.#searchKeys = opts.searchKeys;
+		this.#recomputeEffective();
+	}
+	refresh() {
+		this.#recomputeEffective();
+	}
+	/** Raw-order item at `index`, or `undefined`. */
+	rawItemAt(index) {
+		return this.#items[index];
+	}
+	/** Effective-order item at `index`, or `undefined`. */
+	getItemAt(index) {
+		const eff = this.#effectiveIndices[index];
+		return eff === void 0 ? void 0 : this.#items[eff];
+	}
+	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;
+	}
+	#recomputeEffective() {
+		const effective = [];
+		for (let i = 0; i < this.#items.length; i++) {
+			if (this.#predicate !== void 0 && !this.#predicate(i)) continue;
+			if (this.#searchKeys !== void 0 && !this.#searchKeys.has(this.#adapter.key(this.#items[i], i))) continue;
+			effective.push(i);
+		}
+		this.#effectiveIndices = effective;
+		this.#keysCache = void 0;
+	}
+};
+//#endregion
+//#region src/grid-list/grid-list.ts
+const ITEM_SELECTOR = `:scope > *`;
+const MIN_ITEM_SIZE = 16;
+/**
+* How long the host keeps the `[reflowing]` attribute after items are inserted
+* mid-list — long enough for the cell move-transition and the enter animation
+* 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 columnOf(index, cols) {
+	return cols <= 1 ? 0 : index % cols;
+}
+function rowOf(index, cols) {
+	return cols <= 1 ? index : Math.floor(index / cols);
+}
+let GridListElement = class GridListElement extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this.selectionMode = `single`;
+		this.interactionMode = `standard`;
+		this.itemSize = 160;
+		this.gap = 8;
+		this.orientation = `grid`;
+		this.captionStyle = `under`;
+		this.captionAlign = `middle`;
+		this.captionPosition = `bottom`;
+		this.captionBackdrop = `scrim`;
+		this.captionHeight = 24;
+		this.itemWrap = `stop`;
+		this.items = [];
+		this._scrollTop = 0;
+		this._scrollLeft = 0;
+		this._viewportHeight = 0;
+		this._viewportWidth = 0;
+		this.#viewportRef = createRef();
+		this.#scrollRaf = 0;
+		this.#items = [];
+		this.#itemWrap = `stop`;
+		this.#entering = /* @__PURE__ */ new Set();
+		this.#reflowTimer = 0;
+		this.#sourceElement = new ElementGridListSource(this);
+		this.#source = this.#sourceElement;
+		this.selection = new ListSelectionController({
+			getOrderedItems: () => this.#source.keys(),
+			isSelectable: (k) => {
+				const i = this.#source.indexOfKey(k);
+				return i >= 0 && this.#source.isSelectable(i);
+			},
+			getModes: () => ({
+				selectionMode: this.selectionMode,
+				interactionMode: this.interactionMode
+			}),
+			getKey: (k) => k,
+			onChange: (selected, previous) => {
+				this._syncItemStates();
+				this.requestUpdate();
+				this.#emitSelect(selected, previous);
+			}
+		});
+		this.tickled = new TickledController(this, {
+			getItems: () => this.#source.keys().map((k, i) => ({
+				id: k,
+				enabled: this.#source.isSelectable(i)
+			})),
+			onTickle: (k) => {
+				if (k !== void 0) this.#emitItemEvent(`list-tickle`, k);
+			},
+			onStateChange: () => this._syncItemStates(),
+			itemWrap: this.#itemWrap
+		});
+		this.#selectedSnapshot = /* @__PURE__ */ new Set();
+		this.#onScroll = (e) => {
+			const el = e.target;
+			this.#cancelScrollRaf();
+			this.#scrollRaf = requestAnimationFrame(() => {
+				this.#scrollRaf = 0;
+				this._scrollTop = el.scrollTop;
+				this._scrollLeft = el.scrollLeft;
+				this.#emitViewportChange();
+			});
+		};
+		this._onKeyDown = (e) => {
+			if ((e.ctrlKey || e.metaKey) && e.key === `f`) return;
+			if ((e.ctrlKey || e.metaKey) && e.key === `a`) {
+				if (this.selection.canSelectAll()) {
+					e.preventDefault();
+					this.selection.selectAll();
+				}
+				return;
+			}
+			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 nextKey = this.#source.keyAt(nextIndex);
+				if (nextKey) {
+					this.tickled.handleKeyboardNavigation(nextKey);
+					this.#scrollItemIntoView(nextKey);
+				}
+			};
+			const perLine = this.orientation === `grid` ? win.cols : 1;
+			switch (e.key) {
+				case `ArrowLeft`:
+					move(-1);
+					break;
+				case `ArrowRight`:
+					move(1);
+					break;
+				case `ArrowUp`:
+					move(-perLine);
+					break;
+				case `ArrowDown`:
+					move(perLine);
+					break;
+				case `Home`:
+					this.tickled.handleKeyboardNavigation(`first`);
+					if (this.tickled.tickledId) this.#scrollItemIntoView(this.tickled.tickledId);
+					break;
+				case `End`:
+					this.tickled.handleKeyboardNavigation(`last`);
+					if (this.tickled.tickledId) this.#scrollItemIntoView(this.tickled.tickledId);
+					break;
+				case `PageUp`:
+				case `PageDown`: {
+					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);
+					break;
+				}
+				case `Enter`: {
+					const id = this.tickled.tickledId;
+					if (id) {
+						e.preventDefault();
+						this.#emitItemEvent(`list-item-click`, id);
+						this.#onCellActivate(id);
+					}
+					break;
+				}
+				case ` `: {
+					const id = this.tickled.tickledId;
+					if (id) {
+						e.preventDefault();
+						this.selection.handleSpace(id);
+					}
+					break;
+				}
+				case `Escape`:
+					this.selection.clear();
+					break;
+				default: return;
+			}
+			e.preventDefault();
+		};
+	}
+	static {
+		this.styles = [
+			themeFallbacks,
+			tickledStyles,
+			tickledItemStyles,
+			scrollFadeStyles(`x`),
+			scrollFadeStyles(`y`),
+			listItemFadeKeyframes,
+			listSearchStyles,
+			css`
+      :host {
+        --grid-list-item-bg: var(--item-bg);
+        --grid-list-radius: var(--radius-m);
+        --grid-list-gap: var(--space-xs);
+        position: relative;
+        display: block;
+        height: 100%;
+        min-height: 2em;
+        overflow: hidden;
+        user-select: none;
+        background: var(--surface-3);
+        color: var(--surface-3-text);
+        border-radius: var(--radius-s);
+        border: 1px solid var(--border);
+      }
+      :host(:focus-visible) {
+        outline: 2px solid var(--accent);
+        outline-offset: -2px;
+      }
+      .viewport {
+        position: relative;
+        height: 100%;
+        overflow-y: auto;
+        overflow-x: hidden;
+        /* Consumer control over the native scrollbar (both orientations): set
+           --grid-list-scrollbar-width to "none" to hide it or "thin" to slim it.
+           The container is also exposed as ::part(viewport). */
+        scrollbar-width: var(--grid-list-scrollbar-width, auto);
+        scrollbar-gutter: var(--grid-list-scrollbar-gutter, auto);
+        scrollbar-color: var(--grid-list-scrollbar-color, auto);
+      }
+      :host([orientation="row"]) .viewport {
+        overflow-x: auto;
+        overflow-y: hidden;
+      }
+      .spacer {
+        position: relative;
+        width: 100%;
+      }
+      .cell {
+        position: absolute;
+        inset: 0 auto auto 0;
+        box-sizing: border-box;
+        display: flex;
+        flex-direction: column;
+        align-items: stretch;
+        contain: layout style;
+        border-radius: var(--grid-list-radius);
+      }
+
+      /* The square that holds the slotted content. */
+      .thumb {
+        position: relative;
+        flex: 1;
+        min-height: 0;
+        display: flex;
+        align-items: stretch;
+        box-sizing: border-box;
+        overflow: hidden;
+        border-radius: 0;
+        background: transparent;
+        border: 1px solid transparent;
+        transition: background var(--transition), border-color var(--transition);
+      }
+      .thumb ::slotted(*) {
+        flex: 1;
+        min-width: 0;
+        min-height: 0;
+        width: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        overflow: hidden;
+      }
+      .thumb ::slotted(*:empty)::after {
+        content: "Empty";
+        color: var(--surface-muted-text);
+        font-size: var(--text-s);
+      }
+      ::slotted([hidden]) {
+        display: none !important;
+      }
+
+      /* Selection / cursor wash — sits over the slotted content so it reads
+         on photos and arbitrary DOM alike. */
+      .thumb::after {
+        content: "";
+        position: absolute;
+        inset: 0;
+        pointer-events: none;
+        border-radius: inherit;
+        background: var(--accent);
+        opacity: 0;
+        transition: opacity var(--transition, 0.1s ease-out);
+      }
+      .cell.selected .thumb::after {
+        opacity: 0.18;
+      }
+
+      /* ---- Caption (base) ---- */
+      .caption {
+        box-sizing: border-box;
+        flex: none;
+        padding: 3px 6px;
+        font-size: var(--text-s, 0.8rem);
+        line-height: 1.3;
+        text-align: center;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        color: var(--surface-3-text);
+      }
+      :host([caption-align="left"]) .caption { text-align: left; }
+      :host([caption-align="right"]) .caption { text-align: right; }
+
+      /* ---- Box modes (hidden / under / overlaid): the cell is one box with a
+             single selection outline ---- */
+      :host(:not([caption-style="separate"])) .cell {
+        background: var(--grid-list-item-bg);
+        border: 1px solid transparent;
+        overflow: hidden;
+        transition: background var(--transition), border-color var(--transition);
+      }
+      :host(:not([caption-style="separate"])) .cell:hover,
+      :host(:not([caption-style="separate"])) .cell.tickled {
+        background: var(--item-bg-tickled);
+        border: var(--item-border-tickled);
+      }
+      :host(:not([caption-style="separate"])) .cell.selected {
+        outline: 2px solid var(--accent);
+        outline-offset: -2px;
+      }
+      :host(:not([caption-style="separate"])) .cell.selected.tickled {
+        background: var(--item-bg-selected-tickled);
+        outline: 2px dashed var(--surface-3);
+        outline-offset: -2px;
+      }
+
+      /* under: caption is a strip inside the box, below the content */
+      :host([caption-style="under"]) .caption {
+        border-top: 1px solid var(--border, rgba(128, 128, 128, 0.3));
+        background: var(--surface-4, transparent);
+      }
+
+      /* overlaid: caption floats over the content */
+      :host([caption-style="overlaid"]) .caption {
+        position: absolute;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        color: #fff;
+      }
+      :host([caption-style="overlaid"][caption-position="top"]) .caption {
+        top: 0;
+        bottom: auto;
+      }
+      :host([caption-style="overlaid"][caption-position="middle"]) .caption {
+        top: 50%;
+        bottom: auto;
+        transform: translateY(-50%);
+      }
+      /* overlaid backdrop */
+      :host([caption-style="overlaid"][caption-backdrop="scrim"]) .caption {
+        background: rgba(0, 0, 0, 0.55);
+      }
+      :host([caption-style="overlaid"][caption-backdrop="gradient"]) .caption {
+        background: linear-gradient(to top, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
+        padding-block: 10px 4px;
+      }
+      :host([caption-style="overlaid"][caption-backdrop="gradient"][caption-position="top"]) .caption {
+        background: linear-gradient(to bottom, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
+        padding-block: 4px 10px;
+      }
+      :host([caption-style="overlaid"][caption-backdrop="gradient"][caption-position="middle"]) .caption {
+        background: rgba(0, 0, 0, 0.5);
+        padding-block: 3px;
+      }
+      :host([caption-style="overlaid"][caption-backdrop="blur"]) .caption {
+        background: rgba(20, 20, 20, 0.3);
+        backdrop-filter: blur(6px);
+        -webkit-backdrop-filter: blur(6px);
+      }
+      :host([caption-style="overlaid"][caption-backdrop="none"]) .caption {
+        background: none;
+        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95), 0 0 6px rgba(0, 0, 0, 0.7);
+      }
+
+      /* ---- separate mode: square + detached caption, each highlighted ---- */
+      :host([caption-style="separate"]) .thumb {
+        flex: none;
+        border-radius: var(--grid-list-radius);
+        background: var(--grid-list-item-bg);
+        border: 1px solid transparent;
+      }
+      :host([caption-style="separate"]) .cell:hover .thumb,
+      :host([caption-style="separate"]) .cell.tickled .thumb {
+        background: var(--item-bg-tickled);
+        border: var(--item-border-tickled);
+      }
+      :host([caption-style="separate"]) .caption {
+        display: flex;
+        align-items: center;
+        align-self: center;
+        max-width: 100%;
+        margin-top: 4px;
+        border-radius: var(--radius-s, 4px);
+      }
+      :host([caption-style="separate"][caption-align="left"]) .caption { align-self: flex-start; }
+      :host([caption-style="separate"][caption-align="right"]) .caption { align-self: flex-end; }
+      :host([caption-style="separate"]) .cell.selected .thumb {
+        outline: 2px solid var(--accent);
+        outline-offset: 2px;
+      }
+      :host([caption-style="separate"]) .cell.selected.tickled .thumb {
+        background: var(--item-bg-selected-tickled);
+        outline: 2px dashed var(--surface-3);
+        outline-offset: 2px;
+      }
+      :host([caption-style="separate"]) .cell.selected .caption {
+        background: var(--accent);
+        color: var(--accent-text, #000);
+      }
+      :host([caption-style="separate"]) .cell.tickled .caption {
+        background: var(--item-bg-tickled);
+        outline: var(--item-border-tickled);
+      }
+      :host([caption-style="separate"]) .cell.selected.tickled .caption {
+        background: var(--item-bg-selected-tickled);
+        outline: 2px dashed var(--surface-3);
+        outline-offset: -2px;
+      }
+
+      /* ---- Insertion / removal animation ----
+         Active only while the host carries [reflowing] — the ~0.3s window after
+         the child list changes mid-list (see #noteChildMutation). Kept out of
+         the base rules so it never fires during scroll virtualisation, where
+         cells are recycled to wildly different positions every frame. Placed
+         last so it wins over the earlier cell transition rule regardless of
+         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]) .cell {
+        transition:
+          transform var(--grid-list-item-move-duration, 200ms) cubic-bezier(0.2, 0, 0, 1),
+          background var(--transition),
+          border-color var(--transition);
+      }
+      .cell.entering {
+        animation: ixfx-list-item-in var(--grid-list-item-move-duration, 200ms) ease both;
+      }
+      @media (prefers-reduced-motion: reduce) {
+        :host([reflowing]) .cell { transition: background var(--transition), border-color var(--transition); }
+        .cell.entering { animation: none; }
+      }
+    `
+		];
+	}
+	#viewportRef;
+	#resizeObserver;
+	#mutationObserver;
+	#scrollRaf;
+	#items;
+	#itemWrap;
+	/** Items added mid-list that are still playing their enter animation. */
+	#entering;
+	/** Timer that ends the `[reflowing]` window opened by a mid-list insertion. */
+	#reflowTimer;
+	/**
+	* When cell geometry changes (zoom), the item nearest the viewport centre is
+	* captured here in `willUpdate` and the scroll position is corrected in
+	* `updated` so that item stays put — rather than the grid anchoring to its
+	* top-left corner.
+	*/
+	#zoomAnchor;
+	/**
+	* The active view over the items. Element mode projects light-DOM children
+	* through named `<slot>`s (owned by {@link ElementGridListSource}); data mode
+	* renders from {@link items} via {@link itemAdapter}. Everything else here
+	* addresses items by effective index + key and never branches on the mode.
+	*
+	* Initialised eagerly (element mode) so the public getters — `count`,
+	* `selectedKeys`, … — are safe to touch before the first Lit update. The
+	* first `willUpdate` rebuilds it once the light DOM / `itemAdapter` is known.
+	*/
+	#sourceElement;
+	#source;
+	#searchMode;
+	#searchFilterKeys;
+	/** (Re)build {@link search} for the current mode; a no-op if it already matches. */
+	#ensureSearch() {
+		const mode = this.itemAdapter !== void 0 ? `data` : `element`;
+		if (this.#searchMode === mode && this.search !== void 0) return;
+		const previous = this.search;
+		if (previous) {
+			previous.hostDisconnected();
+			this.removeController(previous);
+		}
+		this.search = mode === `data` ? new ListSearchController(this, { adapter: createDataListSearchAdapter(this, {
+			rawCount: () => this.#source?.rawCount ?? 0,
+			rawKeyAt: (i) => this.#source?.rawKeyAt(i) ?? ``,
+			rawSearchTextAt: (i) => this.#source?.rawSearchTextAt(i) ?? ``,
+			onFilterChange: (keys) => {
+				this.#searchFilterKeys = keys;
+				this.#source?.setFilters({ searchKeys: keys });
+				this.requestUpdate();
+				this.updateComplete.then(() => this.#emitViewportChange());
+			},
+			onActivate: (key) => this.#onCellActivate(key),
+			getHighlightRoot: () => this.renderRoot
+		}) }) : new ListSearchController(this, { adapter: createElementListSearchAdapter(this, {
+			itemSelector: ITEM_SELECTOR,
+			getLabel: (el) => el.getAttribute(`data-label`) ?? el.querySelector(`[data-grid-list-caption]`)?.textContent?.trim() ?? el.getAttribute(`data-search-label`) ?? el.textContent?.trim() ?? ``,
+			highlightKey: `grid-list-search`
+		}) });
+		this.#searchMode = mode;
+	}
+	#searchRegistry;
+	#unregisterSearchCommands;
+	/** Command registry carrying this grid's `list.search.*` commands. */
+	get registry() {
+		return this.#searchRegistry;
+	}
+	/** Effective search modes: this component's capability (all three) ∩ the `search-modes` attribute. */
+	#effectiveSearchModes() {
+		const raw = this.searchModes?.trim();
+		if (raw === void 0) return [...LIST_SEARCH_MODES];
+		const requested = new Set(raw.split(/\s+/));
+		return LIST_SEARCH_MODES.filter((m) => requested.has(m));
+	}
+	#syncSearchCommands() {
+		if (!this.#searchRegistry || !this.search) return;
+		this.search.setModes(this.#effectiveSearchModes());
+		this.#unregisterSearchCommands?.();
+		this.#unregisterSearchCommands = registerListSearchCommands(this.#searchRegistry, this.search);
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		if (!this.hasAttribute(`tabindex`)) this.tabIndex = 0;
+		if (!this.hasAttribute(`role`)) this.setAttribute(`role`, `listbox`);
+		this.#syncAriaMultiselectable();
+		for (const [attr, value] of [
+			[`caption-style`, this.captionStyle],
+			[`caption-align`, this.captionAlign],
+			[`caption-position`, this.captionPosition],
+			[`caption-backdrop`, this.captionBackdrop]
+		]) if (!this.hasAttribute(attr)) this.setAttribute(attr, value);
+		this.addEventListener(`keydown`, this._onKeyDown);
+		this.#mutationObserver ??= new MutationObserver((records) => this.#onChildrenChanged(records));
+		this.#mutationObserver.observe(this, {
+			childList: true,
+			attributeFilter: [`hidden`]
+		});
+		this.#searchRegistry ??= createCommandRegistry();
+		this.#ensureSearch();
+		this.#syncSearchCommands();
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.removeEventListener(`keydown`, this._onKeyDown);
+		this.#resizeObserver?.disconnect();
+		this.#resizeObserver = void 0;
+		this.#mutationObserver?.disconnect();
+		this.#cancelScrollRaf();
+		this.#unregisterSearchCommands?.();
+		this.#unregisterSearchCommands = void 0;
+		this.#searchRegistry = void 0;
+		if (this.#reflowTimer) {
+			clearTimeout(this.#reflowTimer);
+			this.#reflowTimer = 0;
+		}
+	}
+	#onChildrenChanged(records) {
+		const previousLength = this.#items.length;
+		this.#syncItems();
+		const removedKeys = [];
+		for (const record of records ?? []) for (const node of record.removedNodes) {
+			if (node.nodeType !== Node.ELEMENT_NODE) continue;
+			const key = keyForElement(node);
+			if (key !== void 0) removedKeys.push(key);
+		}
+		if (removedKeys.length > 0) {
+			const present = new Set(this.#source.keys());
+			const gone = removedKeys.filter((k) => !present.has(k));
+			if (gone.length > 0) this.selection.removeKeys(gone, (k) => k);
+			const tickledId = this.tickled.tickledId;
+			if (tickledId && gone.includes(tickledId)) this.tickled.focus(void 0);
+		}
+		this._syncItemStates();
+		this.#noteChildMutation(previousLength, records);
+		this.requestUpdate();
+		this.updateComplete.then(() => this.#emitViewportChange());
+	}
+	/**
+	* When the child list changes mid-list — not a first populate or a wholesale
+	* replace — mark any newcomers for an enter animation and open a short
+	* `[reflowing]` window so the cells that shift slide to their new position
+	* instead of snapping. Removals get the same window (the survivors slide to
+	* close the gap). The window is bounded in time so the transform transition
+	* never bleeds into scroll virtualisation.
+	*
+	* Reads the `MutationRecord`s directly rather than diffing `#items`, because a
+	* `requestUpdate()` between the DOM change and this callback (e.g. a caller
+	* that clears the selection before removing) lets `updated()` re-sync `#items`
+	* first, which would hide the change from a naive diff.
+	*/
+	#noteChildMutation(previousLength, records) {
+		if (!this.hasUpdated || !records || records.length === 0) return;
+		const currentSet = new Set(this.#items);
+		const added = [];
+		let removedCount = 0;
+		for (const record of records) {
+			for (const node of record.addedNodes) if (node.nodeType === Node.ELEMENT_NODE && currentSet.has(node)) added.push(node);
+			for (const node of record.removedNodes) if (node.nodeType === Node.ELEMENT_NODE) removedCount++;
+		}
+		if (added.length === 0 && removedCount === 0) return;
+		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.toggleAttribute(`reflowing`, true);
+		if (this.#reflowTimer) clearTimeout(this.#reflowTimer);
+		this.#reflowTimer = window.setTimeout(() => {
+			this.#reflowTimer = 0;
+			this.#entering.clear();
+			this.toggleAttribute(`reflowing`, false);
+			this.requestUpdate();
+		}, REFLOW_WINDOW_MS);
+	}
+	#emitViewportChange() {
+		this._dispatch(`grid-list-viewport-change`, {
+			renderedKeys: this.renderedKeys(),
+			visibleKeys: this.visibleKeys()
+		});
+	}
+	firstUpdated() {
+		if (!this.#source) this.#rebuildSource();
+		const el = this.#viewportRef.value;
+		if (!el) return;
+		this.#resizeObserver = new ResizeObserver((entries) => {
+			for (const entry of entries) {
+				const w = entry.contentRect.width;
+				const h = entry.contentRect.height;
+				if (w <= 0 || h <= 0) return;
+				this._viewportWidth = w;
+				this._viewportHeight = h;
+			}
+		});
+		this.#resizeObserver.observe(el);
+		this.#measureViewport(false);
+		this.#syncItems();
+		this.requestUpdate();
+	}
+	/** (Re)construct {@link #source} for the current mode and re-apply the filters. */
+	#rebuildSource() {
+		if (this.itemAdapter !== void 0) {
+			this.#source = new DataGridListSource(this.items, this.itemAdapter);
+			this.#sourceElement = void 0;
+		} else {
+			this.#sourceElement = new ElementGridListSource(this);
+			this.#source = this.#sourceElement;
+		}
+		this.#applyFilters();
+		if (this.#searchFilterKeys) this.#source.setFilters({ searchKeys: this.#searchFilterKeys });
+	}
+	/** Push the current filter predicate into whichever source is active. */
+	#applyFilters() {
+		if (this.#source instanceof ElementGridListSource) {
+			const fp = this.filterPredicate;
+			const src = this.#source;
+			src.setFilters({ predicate: fp ? (i) => fp(src.rawElementAt(i)) : void 0 });
+			this.#items = src.effectiveElements();
+		} else if (this.#source instanceof DataGridListSource) {
+			const ip = this.itemFilterPredicate;
+			const src = this.#source;
+			src.setFilters({ predicate: ip ? (i) => ip(src.rawItemAt(i), i) : void 0 });
+		}
+	}
+	willUpdate(changed) {
+		if (changed.has(`searchModes`)) this.#syncSearchCommands();
+		if (changed.has(`filterPredicate`) || changed.has(`itemFilterPredicate`)) {
+			this.#applyFilters();
+			this.updateComplete.then(() => this.#emitViewportChange());
+		}
+		if (changed.has(`items`) || changed.has(`itemAdapter`)) {
+			this.#zoomAnchor = void 0;
+			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.selection.removeKeys(removedKeys, (k) => k);
+			const tickledId = this.tickled.tickledId;
+			if (tickledId && !nextKeySet.has(tickledId)) this.tickled.focus(void 0);
+			this._syncItemStates();
+			this.updateComplete.then(() => this.#emitViewportChange());
+			if (modeFlipped) {
+				this.#ensureSearch();
+				this.#syncSearchCommands();
+			}
+			this.search?.refresh();
+		}
+		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));
+		}
+		if (changed.has(`captionHeight`)) this.captionHeight = Math.max(0, Math.round(this.captionHeight));
+		if (changed.has(`itemWrap`)) this.#itemWrap = this.itemWrap;
+		if ((changed.has(`itemSize`) || changed.has(`gap`) || changed.has(`captionStyle`) || changed.has(`captionHeight`) || changed.has(`orientation`)) && this.hasUpdated && this.#source.count > 0) {
+			const prevOrientation = changed.get(`orientation`) ?? this.orientation;
+			const horizontal = prevOrientation === `row`;
+			const prevOffset = horizontal ? this._scrollLeft : this._scrollTop;
+			const prevExtent = horizontal ? this._viewportWidth : this._viewportHeight;
+			if (prevExtent > 0 && prevOffset > 1) {
+				const prevItemSize = changed.get(`itemSize`) ?? this.itemSize;
+				const prevGap = changed.get(`gap`) ?? this.gap;
+				const prevCaptionStyle = changed.get(`captionStyle`) ?? this.captionStyle;
+				const prevCaptionHeight = changed.get(`captionHeight`) ?? this.captionHeight;
+				this.#captureCentreAnchor(prevOffset, prevExtent, prevItemSize, prevGap, prevCaptionStyle, prevCaptionHeight, prevOrientation);
+			}
+		}
+	}
+	#syncAriaMultiselectable() {
+		this.setAttribute(`aria-multiselectable`, this.selection.canSelectMultiple() ? `true` : `false`);
+	}
+	/** Full cell height: the square, plus a caption band in `separate` / `under`. */
+	#rowHeight() {
+		const captionBand = this.captionStyle === `separate` || this.captionStyle === `under`;
+		return this.itemSize + (captionBand ? this.captionHeight : 0);
+	}
+	#captionFor(el) {
+		return el.getAttribute(`data-label`) ?? el.querySelector(`[data-grid-list-caption]`)?.textContent?.trim() ?? ``;
+	}
+	updated(changed) {
+		super.updated(changed);
+		this.#syncItems();
+		if (changed.has(`selectionMode`) || changed.has(`interactionMode`)) {
+			this.selection.clearAnchor();
+			this.#syncAriaMultiselectable();
+		}
+		if (changed.has(`orientation`)) {
+			const vp = this.#viewportRef.value;
+			if (vp) {
+				if (this.orientation === `row`) {
+					vp.scrollTop = 0;
+					this._scrollTop = 0;
+				} else {
+					vp.scrollLeft = 0;
+					this._scrollLeft = 0;
+				}
+			}
+		}
+		const vp = this.#viewportRef.value;
+		if (vp) {
+			if (Math.abs(vp.scrollTop - this._scrollTop) > .5) vp.scrollTop = this._scrollTop;
+			if (Math.abs(vp.scrollLeft - this._scrollLeft) > .5) vp.scrollLeft = this._scrollLeft;
+		}
+		this.#applyZoomAnchor();
+	}
+	/** Re-anchor the scroll so the item captured in `willUpdate` stays centred. */
+	#applyZoomAnchor() {
+		if (!this.#zoomAnchor) return;
+		const { index, lineFrac } = this.#zoomAnchor;
+		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));
+			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) {
+			vp.scrollTop = next;
+			this._scrollTop = next;
+		}
+	}
+	#captureCentreAnchor(prevOffset, prevExtent, prevItemSize, prevGap, prevCaptionStyle, prevCaptionHeight, prevOrientation) {
+		const count = this.#source?.count ?? 0;
+		if (count === 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
+		};
+	}
+	/**
+	* Re-read the viewport after an ancestor's visibility/layout changed.
+	* Safe while hidden (zero-sized reads are ignored); forces a repaint of the
+	* virtual window even when the size is unchanged.
+	*/
+	refreshLayout() {
+		this.#measureViewport(true);
+	}
+	/** Alias of {@link refreshLayout}. */
+	remeasure() {
+		this.#measureViewport(true);
+	}
+	#measureViewport(forceRender = false) {
+		const vp = this.#viewportRef.value;
+		if (!vp) return;
+		const w = vp.clientWidth;
+		const h = vp.clientHeight;
+		if (w <= 0 || h <= 0) return;
+		const horizontal = this.orientation === `row`;
+		const changed = w !== this._viewportWidth || h !== this._viewportHeight;
+		if (changed) {
+			const prevOffset = horizontal ? this._scrollLeft : this._scrollTop;
+			const prevExtent = horizontal ? w : h;
+			this.#captureCentreAnchor(prevOffset, prevExtent, this.itemSize, this.gap, this.captionStyle, this.captionHeight, this.orientation);
+			this._viewportWidth = w;
+			this._viewportHeight = h;
+		}
+		if (forceRender && !changed) {
+			this.#captureCentreAnchor(horizontal ? this._scrollLeft : this._scrollTop, horizontal ? w : h, this.itemSize, this.gap, this.captionStyle, this.captionHeight, this.orientation);
+			this.requestUpdate();
+		}
+		if (changed || forceRender) this.updateComplete.then(() => this.#emitViewportChange());
+	}
+	/**
+	* Element mode only: re-read the light DOM into the source and refresh the
+	* `#items` cache + filter. A no-op in data mode (the source is rebuilt through
+	* `#rebuildSource` when `items` / `itemAdapter` change).
+	*/
+	#syncItems() {
+		if (this.#source instanceof ElementGridListSource) {
+			this.#source.refresh();
+			this.#applyFilters();
+		}
+	}
+	get count() {
+		return this.#source.count;
+	}
+	/**
+	* Number of cells currently rendered in the shadow DOM. With virtualization
+	* this is roughly the visible rows plus overscan, regardless of how large
+	* `count` is — useful for demos/diagnostics.
+	*/
+	get renderedCount() {
+		return this.renderRoot.querySelectorAll(`.cell`).length;
+	}
+	get selectedItems() {
+		const els = /* @__PURE__ */ new Set();
+		for (const key of this.selection.selectedKeys) {
+			const el = this.#source.resolveKeyToElement(key);
+			if (el) els.add(el);
+		}
+		return els;
+	}
+	/**
+	* The selection as stable `data-key` / `data-value` strings. Auto-assigned
+	* keys for keyless light-DOM items are omitted (they are not a stable contract
+	* for the consumer).
+	*/
+	get selectedKeys() {
+		const out = /* @__PURE__ */ new Set();
+		for (const k of this.selection.selectedKeys) if (!isSyntheticKey(k)) out.add(k);
+		return out;
+	}
+	select(item) {
+		const key = keyForElement(item);
+		if (key) this.selection.replace(key);
+	}
+	selectMany(items) {
+		const keys = [];
+		for (const item of items) {
+			const key = keyForElement(item);
+			if (key) keys.push(key);
+		}
+		this.selection.selectMany(keys);
+	}
+	deselect(item) {
+		const key = keyForElement(item);
+		if (key) this.selection.deselect(key);
+	}
+	clearSelection() {
+		this.selection.clear();
+	}
+	selectAll() {
+		if (this.selection.canSelectAll()) this.selection.selectAll();
+	}
+	/**
+	* Replace the selection with the items carrying these keys. Unknown keys are
+	* ignored; survives the host rebuilding the item set. Requires each item to
+	* have a `data-key` (or `data-value`).
+	*/
+	selectKeys(keys) {
+		this.selection.selectKeys(keys, (k) => k);
+	}
+	/** Add items by key to the selection (multi-select modes only). */
+	addSelectedKeys(keys) {
+		this.selection.addKeys(keys, (k) => k);
+	}
+	/** Remove items by key from the selection. */
+	removeSelectedKeys(keys) {
+		this.selection.removeKeys(keys, (k) => k);
+	}
+	/**
+	* 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.
+	*/
+	#rawIndexOfKey(key) {
+		const adapter = this.itemAdapter;
+		if (!adapter) return -1;
+		return this.items.findIndex((it, i) => adapter.key(it, i) === key);
+	}
+	/**
+	* Data mode: replace the whole item array. Selection and cursor keep any key
+	* that is still present; keys that vanish are dropped (one `list-select`).
+	* A no-op in element mode.
+	*/
+	setItems(items) {
+		if (this.itemAdapter) this.items = items;
+	}
+	/**
+	* Data mode: append items to the end. Scroll position, selection and cursor
+	* are untouched; appended items don't play the mid-list `[reflowing]` slide.
+	* A no-op in element mode.
+	*/
+	appendItems(items) {
+		if (this.itemAdapter && items.length > 0) this.items = [...this.items, ...items];
+	}
+	/**
+	* 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.
+	*/
+	updateItem(key, item) {
+		if (!this.itemAdapter) return;
+		const idx = this.#rawIndexOfKey(key);
+		if (idx < 0) return;
+		const next = [...this.items];
+		next[idx] = item;
+		this.items = next;
+	}
+	/**
+	* Data mode: remove the items carrying these keys. Removed keys are dropped
+	* from selection and cursor (via the `items` change). A no-op in element mode.
+	*/
+	removeItems(keys) {
+		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)));
+	}
+	/**
+	* Data mode: drop every item. Selection and cursor are reset and one
+	* `list-select` with empty sets is emitted. A no-op in element mode.
+	*/
+	clearItems() {
+		if (!this.itemAdapter) return;
+		this.selection.reset();
+		this.tickled.focus(void 0);
+		this.items = [];
+		this.#emitSelect(/* @__PURE__ */ new Set(), /* @__PURE__ */ new Set());
+	}
+	/** Move the cursor to the item with this key and scroll it into view. */
+	focusKey(key) {
+		if (this.#source.indexOfKey(key) < 0) return;
+		this.tickled.focus(key);
+		this.#scrollItemIntoView(key);
+	}
+	/** The key of the item under the cursor, or `undefined`. */
+	get tickledKey() {
+		return this.tickled.tickledId;
+	}
+	/** Element mode: the light-DOM element carrying `key`, or `undefined`. */
+	getItem(key) {
+		return this.#source.resolveKeyToElement(key);
+	}
+	/** Element mode: the light-DOM element at effective index `index`. */
+	getItemByIndex(index) {
+		return this.#items[index];
+	}
+	/** Data mode: the data value carrying `key`, or `undefined`. */
+	getData(key) {
+		return this.#source.resolveKeyToData(key);
+	}
+	getKey(item) {
+		return keyForElement(item);
+	}
+	/**
+	* Keys of items in the rendered window (viewport + overscan) — the priority
+	* set for prefetching. Use {@link visibleKeys} for the strict viewport
+	* intersection. Auto-assigned keyless-item keys are omitted.
+	*/
+	renderedKeys() {
+		return this.#windowKeys(this.#currentWindow());
+	}
+	/**
+	* Keys of items actually intersecting the viewport (no overscan).
+	* Auto-assigned keyless-item keys are omitted.
+	*/
+	visibleKeys() {
+		return this.#windowKeys(this.#currentWindow(true));
+	}
+	#windowKeys(win) {
+		return this.#source.keys().slice(win.startIndex, win.endIndex).filter((k) => !isSyntheticKey(k));
+	}
+	#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);
+	}
+	/** 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 viewLeft = vp.scrollLeft;
+			let next = viewLeft;
+			if (left < viewLeft) next = left;
+			else if (right > viewLeft + this._viewportWidth) next = right - 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 (next !== viewTop) {
+			vp.scrollTop = next;
+			this._scrollTop = next;
+		}
+	}
+	_syncItemStates() {
+		const selected = this.selection.selectedKeys;
+		for (const el of this.#items) {
+			const key = keyForElement(el);
+			el.toggleAttribute(`data-tickled`, key !== void 0 && this.tickled.isTickled(key));
+			el.toggleAttribute(`data-selected`, key !== void 0 && selected.has(key));
+		}
+		this.setAttribute(`data-input-mode`, this.tickled.inputMode);
+	}
+	#emitSelect(selected, previous) {
+		const selectedEls = /* @__PURE__ */ new Set();
+		const previousEls = /* @__PURE__ */ new Set();
+		for (const key of selected) {
+			const el = this.#source.resolveKeyToElement(key);
+			if (el) selectedEls.add(el);
+		}
+		for (const key of previous) {
+			const el = this.#source.resolveKeyToElement(key);
+			if (el) previousEls.add(el);
+		}
+		this._dispatch(`list-select`, {
+			selected: selectedEls,
+			previous: previousEls,
+			selectedKeys: this.selectedKeys,
+			previousKeys: new Set([...previous].filter((k) => !isSyntheticKey(k)))
+		});
+	}
+	#emitItemEvent(name, key) {
+		const index = this.#source.indexOfKey(key);
+		const element = this.#source.resolveKeyToElement(key);
+		const item = element ?? this.#source.resolveKeyToData(key);
+		this._dispatch(name, {
+			item,
+			key,
+			index,
+			element
+		});
+	}
+	_dispatch(name, detail) {
+		this.dispatchEvent(new CustomEvent(name, {
+			detail,
+			bubbles: true,
+			composed: true
+		}));
+	}
+	/** Selected keys, snapshotted once per render so the cell renderers don't each rebuild the set. */
+	#selectedSnapshot;
+	render() {
+		const win = this.#currentWindow();
+		this.#selectedSnapshot = this.selection.selectedKeys;
+		const spacerStyle = win.horizontal ? `width:${win.totalWidth}px;height:100%` : `height:${win.totalHeight}px`;
+		const scrollFade = win.horizontal ? `scroll-fade-x` : `scroll-fade-y`;
+		return html`
+      <div
+        class="viewport ${scrollFade}"
+        part="viewport"
+        ${ref(this.#viewportRef)}
+        data-input-mode=${this.tickled.inputMode}
+        @scroll=${this.#onScroll}
+      >
+        <div class="spacer" style=${spacerStyle}>
+          ${this.#source instanceof DataGridListSource ? this.#renderDataCells(win) : this.#renderElementCells(win)}
+        </div>
+      </div>
+      ${this.search?.renderField()}
+    `;
+	}
+	#renderDataCells(win) {
+		const slice = Array.from({ length: win.endIndex - win.startIndex }, (_, i) => win.startIndex + i);
+		return repeat(slice, (index) => this.#source.keyAt(index), (index) => this.#renderDataCell(index, win));
+	}
+	#renderDataCell(index, win) {
+		const key = this.#source.keyAt(index);
+		const selected = this.#selectedSnapshot.has(key);
+		const tickled = this.tickled.isTickled(key);
+		const style = this.captionStyle;
+		const separate = style === `separate`;
+		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 captionCss = separate ? `height:${Math.max(0, this.captionHeight - 4)}px` : style === `under` ? `height:${this.captionHeight}px` : ``;
+		return html`
+      <div
+        class="cell${selected ? ` selected` : ``}${tickled ? ` tickled` : ``}"
+        part="item${selected ? ` selected` : ``}${tickled ? ` tickled` : ``}"
+        role="option"
+        aria-selected=${selected ? `true` : `false`}
+        style="width:${this.itemSize}px;height:${cellHeight}px;transform:translate(${x}px,${y}px)"
+        data-index=${index}
+        data-key=${key}
+        ?data-selected=${selected}
+        ?data-tickled=${tickled}
+        @click=${(e) => this.#onCellClick(e, key)}
+        @dblclick=${() => this.#onCellActivate(key)}
+        @pointerenter=${() => this.tickled.handlePointerEnter(key)}
+      >
+        <div class="content" part="content">${this.#source.renderCellContent(index)}</div>
+        ${showCaption ? html`<div class="caption" part="caption" style=${captionCss} title=${caption}>${caption}</div>` : ``}
+      </div>
+    `;
+	}
+	#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));
+	}
+	#renderCell(el, index, win) {
+		const key = this.#source.keyAt(index);
+		const selected = this.#selectedSnapshot.has(key);
+		const tickled = this.tickled.isTickled(key);
+		const entering = this.#entering.has(el);
+		const style = this.captionStyle;
+		const separate = style === `separate`;
+		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 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`
+      <div
+        class="cell${selected ? ` selected` : ``}${tickled ? ` tickled` : ``}${entering ? ` entering` : ``}"
+        part="item${selected ? ` selected` : ``}${tickled ? ` tickled` : ``}"
+        role="option"
+        aria-selected=${selected ? `true` : `false`}
+        style="width:${this.itemSize}px;height:${cellHeight}px;transform:translate(${x}px,${y}px)"
+        data-index=${index}
+        data-key=${key}
+        ?data-selected=${selected}
+        ?data-tickled=${tickled}
+        @click=${(e) => this.#onCellClick(e, key)}
+        @dblclick=${() => this.#onCellActivate(key)}
+        @pointerenter=${() => this.tickled.handlePointerEnter(key)}
+      >
+        <div class="thumb" part="thumb" style=${thumbStyle}>
+          ${this.#source.renderCellContent(index)}
+        </div>
+        ${showCaption ? html`<div class="caption" part="caption" style=${captionCss} title=${caption}>${caption}</div>` : ``}
+      </div>
+    `;
+	}
+	#onScroll;
+	#cancelScrollRaf() {
+		if (this.#scrollRaf !== 0) {
+			cancelAnimationFrame(this.#scrollRaf);
+			this.#scrollRaf = 0;
+		}
+	}
+	#onCellClick(e, key) {
+		this.selection.handleClick(key, e);
+		this.#emitItemEvent(`list-item-click`, key);
+	}
+	#onCellActivate(key) {
+		if (this.interactionMode !== `manual`) this.selection.replace(key);
+		this.#emitItemEvent(`list-activate`, key);
+	}
+};
+__decorate([property({
+	type: String,
+	attribute: `selection-mode`
+})], GridListElement.prototype, "selectionMode", void 0);
+__decorate([property({
+	type: String,
+	attribute: `interaction-mode`
+})], GridListElement.prototype, "interactionMode", void 0);
+__decorate([property({
+	type: Number,
+	attribute: `item-size`
+})], GridListElement.prototype, "itemSize", void 0);
+__decorate([property({ type: Number })], GridListElement.prototype, "gap", void 0);
+__decorate([property({
+	type: String,
+	reflect: true
+})], GridListElement.prototype, "orientation", void 0);
+__decorate([property({
+	type: String,
+	attribute: `caption-style`,
+	reflect: true
+})], GridListElement.prototype, "captionStyle", void 0);
+__decorate([property({
+	type: String,
+	attribute: `caption-align`,
+	reflect: true
+})], GridListElement.prototype, "captionAlign", void 0);
+__decorate([property({
+	type: String,
+	attribute: `caption-position`,
+	reflect: true
+})], GridListElement.prototype, "captionPosition", void 0);
+__decorate([property({
+	type: String,
+	attribute: `caption-backdrop`,
+	reflect: true
+})], GridListElement.prototype, "captionBackdrop", void 0);
+__decorate([property({
+	type: Number,
+	attribute: `caption-height`
+})], GridListElement.prototype, "captionHeight", void 0);
+__decorate([property({
+	type: String,
+	attribute: `item-wrap`
+})], GridListElement.prototype, "itemWrap", void 0);
+__decorate([property({ attribute: false })], GridListElement.prototype, "filterPredicate", void 0);
+__decorate([property({ attribute: false })], GridListElement.prototype, "itemFilterPredicate", void 0);
+__decorate([property({
+	type: String,
+	attribute: `search-modes`,
+	reflect: true
+})], GridListElement.prototype, "searchModes", void 0);
+__decorate([property({ attribute: false })], GridListElement.prototype, "items", void 0);
+__decorate([property({ attribute: false })], GridListElement.prototype, "itemAdapter", void 0);
+__decorate([state()], GridListElement.prototype, "_scrollTop", void 0);
+__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 };
+
+//# sourceMappingURL=grid-list-nRUQOcEL.js.map