@ixfx/components 0.7.5 → 0.8.0

package/dist/grid-list.js

@@ -1,994 +1,2 @@
-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, i as ListSearchController, n as listSearchStyles, o as registerListSearchCommands, r as LIST_SEARCH_MODES, u as keyForElement } from "./incr-search-DpbSJtgj.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.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.search = 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.#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);
-					this.#scrollItemIntoView(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`);
-					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._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,
-			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;
-      }
-      :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;
-	/**
-	* 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;
-	#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) 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;
-		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.#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();
-		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(`searchModes`)) this.#syncSearchCommands();
-		if (changed.has(`filterPredicate`)) this.#syncItems();
-		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)).filter((el) => !el.hidden && (this.filterPredicate === void 0 || this.filterPredicate(el)));
-		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>
-      ${this.search.renderField()}
-    `;
-	}
-	#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([property({ attribute: false })], GridListElement.prototype, "filterPredicate", void 0);
-__decorate([property({
-	type: String,
-	attribute: `search-modes`,
-	reflect: true
-})], GridListElement.prototype, "searchModes", 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
+import { t as GridListElement } from "./grid-list-nRUQOcEL.js";
 export { GridListElement };
-
-//# sourceMappingURL=grid-list.js.map