@ixfx/components 0.7.2 → 0.7.4

package/dist/grid-list.js

@@ -0,0 +1,933 @@
+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 { i as keyForElement, t as ListSelectionController } from "./list-selection-controller-CUo-Hhcm.js";
+import { i as listItemFadeKeyframes } from "./list-item-animation-DuiwgN3l.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 { repeat } from "lit/directives/repeat.js";
+import { createRef, ref } from "lit/directives/ref.js";
+//#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._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.#slotNames = /* @__PURE__ */ new WeakMap();
+		this.#slotSeq = 0;
+		this.selection = new ListSelectionController({
+			getOrderedItems: () => this._getVisibleItems(),
+			isSelectable: () => true,
+			getModes: () => ({
+				selectionMode: this.selectionMode,
+				interactionMode: this.interactionMode
+			}),
+			getKey: keyForElement,
+			onChange: (selected, previous) => {
+				this._syncItemStates();
+				this.requestUpdate();
+				this._dispatch(`list-select`, {
+					selected,
+					previous,
+					selectedKeys: this.selection.selectedKeys
+				});
+			}
+		});
+		this.tickled = new TickledController(this, {
+			getItems: () => this.#items.map((el) => ({
+				id: el,
+				enabled: !el.hasAttribute(`not-checked`)
+			})),
+			onTickle: (id) => {
+				if (id !== void 0) this._dispatch(`list-tickle`, { item: id });
+			},
+			onStateChange: () => this._syncItemStates(),
+			itemWrap: this.#itemWrap
+		});
+		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.#items.length;
+			if (count === 0) return;
+			const win = this.#currentWindow();
+			const move = (delta) => {
+				const from = this.tickled.tickledId ? this.#items.indexOf(this.tickled.tickledId) : -1;
+				const nextIndex = Math.max(0, Math.min(count - 1, from + delta));
+				const next = this.#items[nextIndex];
+				if (next) this.tickled.handleKeyboardNavigation(next);
+			};
+			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`);
+					break;
+				case `End`:
+					this.tickled.handleKeyboardNavigation(`last`);
+					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._dispatch(`list-item-click`, { item: 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,
+			css`
+      :host {
+        --grid-list-item-bg: var(--item-bg);
+        --grid-list-radius: var(--radius-m);
+        --grid-list-gap: var(--space-xs);
+        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;
+      }
+      :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 {
+        background: var(--item-bg-tickled);
+        border-color: 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.tickled {
+        box-shadow: inset 0 0 0 2px var(--accent);
+      }
+
+      /* 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 {
+        background: var(--item-bg-tickled);
+        border-color: 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,
+      :host([caption-style="separate"]) .cell.tickled .thumb {
+        outline: 2px solid var(--accent);
+        outline-offset: 2px;
+      }
+      :host([caption-style="separate"]) .cell.tickled .thumb {
+        outline-style: dashed;
+      }
+      :host([caption-style="separate"]) .cell.selected .caption {
+        background: var(--accent);
+        color: var(--accent-text, #000);
+      }
+      :host([caption-style="separate"]) .cell.tickled .caption {
+        outline: 1px dashed var(--accent);
+      }
+
+      /* ---- 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;
+	/**
+	* Per-item slot name. Each cell renders its own named `<slot>` and the
+	* matching light-DOM child carries `slot="<name>"`, so a child is projected
+	* into exactly one cell. (A single unnamed slot would collapse every child
+	* into the first cell.)
+	*/
+	#slotNames;
+	#slotSeq;
+	connectedCallback() {
+		super.connectedCallback();
+		if (!this.hasAttribute(`tabindex`)) this.tabIndex = 0;
+		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 });
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.removeEventListener(`keydown`, this._onKeyDown);
+		this.#resizeObserver?.disconnect();
+		this.#resizeObserver = void 0;
+		this.#mutationObserver?.disconnect();
+		this.#cancelScrollRaf();
+		if (this.#reflowTimer) {
+			clearTimeout(this.#reflowTimer);
+			this.#reflowTimer = 0;
+		}
+	}
+	#onChildrenChanged(records) {
+		const previousLength = this.#items.length;
+		this.#syncItems();
+		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`, { visibleKeys: this.visibleKeys() });
+	}
+	firstUpdated() {
+		const el = this.#viewportRef.value;
+		if (!el) return;
+		this._viewportWidth = el.clientWidth;
+		this._viewportHeight = el.clientHeight;
+		this.#resizeObserver = new ResizeObserver((entries) => {
+			for (const entry of entries) {
+				this._viewportWidth = entry.contentRect.width;
+				this._viewportHeight = entry.contentRect.height;
+			}
+		});
+		this.#resizeObserver.observe(el);
+		this.#syncItems();
+		this.requestUpdate();
+	}
+	willUpdate(changed) {
+		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.#items.length > 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;
+				const prevRowHeight = prevItemSize + (prevCaptionStyle === `separate` || prevCaptionStyle === `under` ? prevCaptionHeight : 0);
+				const prev = computeGridWindow(this.#items.length, 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(this.#items.length - 1, lineFloor) : Math.min(this.#items.length - 1, lineFloor * prev.cols + Math.max(0, Math.floor((prev.cols - 1) / 2)));
+				this.#zoomAnchor = {
+					index,
+					lineFrac: centerLine - lineFloor
+				};
+			}
+		}
+	}
+	/** 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();
+		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;
+				}
+			}
+		}
+		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;
+		}
+	}
+	#syncItems() {
+		this.#items = Array.from(this.querySelectorAll(ITEM_SELECTOR));
+		for (const el of this.#items) {
+			const name = this.#slotNameFor(el);
+			if (el.getAttribute(`slot`) !== name) el.setAttribute(`slot`, name);
+		}
+	}
+	#slotNameFor(el) {
+		let name = this.#slotNames.get(el);
+		if (name === void 0) {
+			this.#slotSeq += 1;
+			name = `gl-item-${this.#slotSeq}`;
+			this.#slotNames.set(el, name);
+		}
+		return name;
+	}
+	_getVisibleItems() {
+		return this.#items.filter((el) => {
+			if (el.hidden) return false;
+			return true;
+		});
+	}
+	get count() {
+		return this.#items.length;
+	}
+	/**
+	* 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() {
+		return this.selection.selected;
+	}
+	/** The selection as stable `data-key` / `data-value` strings. */
+	get selectedKeys() {
+		return this.selection.selectedKeys;
+	}
+	select(item) {
+		this.selection.replace(item);
+	}
+	selectMany(items) {
+		this.selection.selectMany(items);
+	}
+	deselect(item) {
+		this.selection.deselect(item);
+	}
+	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, (key) => this.getItem(key));
+	}
+	/** Add items by key to the selection (multi-select modes only). */
+	addSelectedKeys(keys) {
+		this.selection.addKeys(keys, (key) => this.getItem(key));
+	}
+	/** Remove items by key from the selection. */
+	removeSelectedKeys(keys) {
+		this.selection.removeKeys(keys, (key) => this.getItem(key));
+	}
+	/** Move the cursor to the item with this key and scroll it into view. */
+	focusKey(key) {
+		const el = this.getItem(key);
+		if (!el) return;
+		this.tickled.focus(el);
+		this.#scrollItemIntoView(el);
+	}
+	/** The key of the item under the cursor, or `undefined`. */
+	get tickledKey() {
+		const id = this.tickled.tickledId;
+		return id ? keyForElement(id) : void 0;
+	}
+	getItem(key) {
+		return this.#items.find((el) => keyForElement(el) === key);
+	}
+	getItemByIndex(index) {
+		return this.#items[index];
+	}
+	getKey(item) {
+		return keyForElement(item);
+	}
+	visibleKeys() {
+		const win = this.#currentWindow();
+		return this.#items.slice(win.startIndex, win.endIndex).map((el) => keyForElement(el)).filter((k) => k !== void 0);
+	}
+	/** Adjust the scroll offset so `el` is fully within the viewport. */
+	#scrollItemIntoView(el) {
+		const index = this.#items.indexOf(el);
+		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() {
+		for (const el of this.#items) {
+			el.toggleAttribute(`data-tickled`, this.tickled.isTickled(el));
+			el.toggleAttribute(`data-selected`, this.selection.selected.has(el));
+		}
+		this.setAttribute(`data-input-mode`, this.tickled.inputMode);
+	}
+	_dispatch(name, detail) {
+		this.dispatchEvent(new CustomEvent(name, {
+			detail,
+			bubbles: true,
+			composed: true
+		}));
+	}
+	render() {
+		const win = this.#currentWindow();
+		const slice = this.#items.slice(win.startIndex, win.endIndex);
+		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}>
+          ${repeat(slice, (el) => this.#slotNameFor(el), (el, i) => this.#renderCell(el, win.startIndex + i, win))}
+        </div>
+      </div>
+    `;
+	}
+	#renderCell(el, index, win) {
+		const selected = this.selection.selected.has(el);
+		const tickled = this.tickled.isTickled(el);
+		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"
+        style="width:${this.itemSize}px;height:${cellHeight}px;transform:translate(${x}px,${y}px)"
+        data-index=${index}
+        @click=${(e) => this.#onCellClick(e, el)}
+        @dblclick=${() => this.#onCellActivate(el)}
+        @pointerenter=${() => this.tickled.handlePointerEnter(el)}
+      >
+        <div class="thumb" part="thumb" style=${thumbStyle}>
+          <slot name=${this.#slotNameFor(el)}></slot>
+        </div>
+        ${showCaption ? html`<div class="caption" part="caption" style=${captionCss}>${caption}</div>` : ``}
+      </div>
+    `;
+	}
+	#onScroll;
+	#cancelScrollRaf() {
+		if (this.#scrollRaf !== 0) {
+			cancelAnimationFrame(this.#scrollRaf);
+			this.#scrollRaf = 0;
+		}
+	}
+	#onCellClick(e, item) {
+		this.selection.handleClick(item, e);
+		this._dispatch(`list-item-click`, { item });
+	}
+	#onCellActivate(item) {
+		if (this.interactionMode !== `manual`) this.selection.replace(item);
+		this._dispatch(`list-activate`, { item });
+	}
+	#currentWindow() {
+		return computeGridWindow(this.#items.length, this.itemSize, this.#rowHeight(), this.gap, this._viewportWidth, this._viewportHeight, this.orientation === `row` ? this._scrollLeft : this._scrollTop, this.orientation);
+	}
+};
+__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([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 };
+
+//# sourceMappingURL=grid-list.js.map