@ixfx/components 0.13.1 → 0.13.3

package/dist/{grid-list-DjIl910A.js → grid-list-DeqAd9-h.js}

@@ -2,7 +2,7 @@ import { t as TickledController } from "./tickled-controller-D-HZymaZ.js";
 import { n as tickledStyles, t as tickledItemStyles } from "./tickled-styles-BrAHEj1q.js";
 import { t as themeFallbacks } from "./fallbacks-DQ_5OsmR.js";
 import { n as safeCustomElement, t as __decorate } from "./decorate-VRK8rslU.js";
-import { c as createElementListSearchAdapter, d as createDataListSearchAdapter, i as ListSearchController, n as listSearchStyles, o as registerListSearchCommands, r as LIST_SEARCH_MODES, u as keyForElement } from "./incr-search-D91M4Ozq.js";
+import { 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-JIhwB49y.js";
 import { i as resolveGroupKey, r as partitionByGroup } from "./grouping-RYPnHkrS.js";
 import { t as ListNativeDragController } from "./list-native-drag-controller-B9xO0XWn.js";
 import { r as ListDragSelectController, t as ListSelectionController } from "./list-selection-controller-BeE70lbB.js";
@@ -401,16 +401,24 @@ function warnDuplicateKeys(keys) {
 	}
 	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.`);
 }
+/** Key → first effective index, built from `keys` (first occurrence wins on duplicates). */
+function indexByKey(keys) {
+	const index = /* @__PURE__ */ new Map();
+	keys.forEach((k, i) => {
+		if (!index.has(k)) index.set(k, i);
+	});
+	return index;
+}
 var ElementGridListSource = class {
 	#host;
 	#items = [];
-	#slotNames = /* @__PURE__ */ new WeakMap();
 	#syntheticKeys = /* @__PURE__ */ new WeakMap();
 	#seq = 0;
 	#predicate;
 	#searchKeys;
 	#effectiveIndices = [];
 	#keysCache;
+	#indexCache;
 	#grouping;
 	#groups = [];
 	#groupByKey = /* @__PURE__ */ new Map();
@@ -429,7 +437,8 @@ var ElementGridListSource = class {
 		return eff === void 0 ? `` : this.#itemKey(this.#items[eff]);
 	}
 	indexOfKey(key) {
-		return this.#effectiveIndices.findIndex((i) => this.#itemKey(this.#items[i]) === key);
+		this.#indexCache ??= indexByKey(this.keys());
+		return this.#indexCache.get(key) ?? -1;
 	}
 	keys() {
 		this.#keysCache ??= this.#effectiveIndices.map((i) => this.#itemKey(this.#items[i]));
@@ -452,11 +461,11 @@ var ElementGridListSource = class {
 		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>`;
-	}
+	/**
+	* Element mode cells project their item through a per-cell `<slot>` that
+	* `GridListElement` renders and assigns itself (see its `#applyCellSlots`).
+	*/
+	renderCellContent(_index) {}
 	iconAt(_index) {}
 	iconColorAt(_index) {}
 	textColorAt(_index) {}
@@ -478,10 +487,6 @@ var ElementGridListSource = class {
 	}
 	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();
 	}
@@ -493,16 +498,6 @@ var ElementGridListSource = class {
 	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);
@@ -520,6 +515,7 @@ var ElementGridListSource = class {
 		}
 		this.#applyGroupingTo(effective);
 		this.#keysCache = void 0;
+		this.#indexCache = void 0;
 	}
 	#applyGroupingTo(effective) {
 		if (this.#grouping === void 0) {
@@ -555,6 +551,7 @@ var DataGridListSource = class {
 	#searchKeys;
 	#effectiveIndices = [];
 	#keysCache;
+	#indexCache;
 	#grouping;
 	#groups = [];
 	#groupByKey = /* @__PURE__ */ new Map();
@@ -575,7 +572,8 @@ var DataGridListSource = class {
 		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);
+		this.#indexCache ??= indexByKey(this.keys());
+		return this.#indexCache.get(key) ?? -1;
 	}
 	keys() {
 		this.#keysCache ??= this.#effectiveIndices.map((i) => this.#adapter.key(this.#items[i], i));
@@ -668,6 +666,7 @@ var DataGridListSource = class {
 			this.#groupByKey = grouped.groupByKey;
 		}
 		this.#keysCache = void 0;
+		this.#indexCache = void 0;
 	}
 };
 //#endregion
@@ -694,6 +693,15 @@ function sameKeys(a, b) {
 	for (let i = 0; i < a.length; i++) if (a[i] !== b[i]) return false;
 	return true;
 }
+/**
+* Set `attr` on exactly the elements in `now`, removing it from those in
+* `previous` that no longer qualify. Returns the new marked set.
+*/
+function syncMarker(attr, previous, now) {
+	for (const el of previous) if (!now.has(el)) el.removeAttribute(attr);
+	for (const el of now) if (!el.hasAttribute(attr)) el.setAttribute(attr, ``);
+	return now;
+}
 let GridListElement = class GridListElement extends LitElement {
 	constructor(..._args) {
 		super(..._args);
@@ -728,6 +736,11 @@ let GridListElement = class GridListElement extends LitElement {
 		this.#snapTimer = 0;
 		this.#items = [];
 		this.#itemWrap = `stop`;
+		this.#cellIds = /* @__PURE__ */ new Map();
+		this.#nextCellId = 0;
+		this.#recycledKeys = /* @__PURE__ */ new Set();
+		this.#windowSlots = [];
+		this.#slottedItems = /* @__PURE__ */ new Map();
 		this.#entering = /* @__PURE__ */ new Set();
 		this.#reflowTimer = 0;
 		this.#sourceElement = new ElementGridListSource(this);
@@ -851,6 +864,8 @@ let GridListElement = class GridListElement extends LitElement {
 			}
 		});
 		this.#groupByChanged = false;
+		this.#markedTickled = /* @__PURE__ */ new Set();
+		this.#markedSelected = /* @__PURE__ */ new Set();
 		this.#selectedSnapshot = /* @__PURE__ */ new Set();
 		this.#onScroll = (e) => {
 			const el = e.target;
@@ -1340,6 +1355,14 @@ let GridListElement = class GridListElement extends LitElement {
       .cell.entering {
         animation: ixfx-list-item-in var(--grid-list-item-move-duration, 200ms) ease both;
       }
+      /* A recycled cell has just been handed from one item to another (see
+         #assignCellIds); it must not animate from the previous item's state
+         or position. */
+      .cell.recycled,
+      .cell.recycled > .thumb,
+      .cell.recycled > .thumb::after {
+        transition: none !important;
+      }
       @media (prefers-reduced-motion: reduce) {
         :host([reflowing]) .group-header { transition: none; }
         :host([reflowing]) .cell { transition: background var(--transition), border-color var(--transition); }
@@ -1371,11 +1394,39 @@ let GridListElement = class GridListElement extends LitElement {
 	#viewportRef;
 	#resizeObserver;
 	#mutationObserver;
+	/**
+	* Watches item (direct child) attributes that change the item set: `hidden`
+	* drops an item from layout, `data-key` / `data-value` change its identity.
+	* Separate from {@link #mutationObserver} because attribute observation of
+	* children needs `subtree`, which must not apply to the child list.
+	*/
+	#itemAttrObserver;
 	#scrollRaf;
 	/** Debounce handle for {@link snapToItem} — fires once scrolling settles. */
 	#snapTimer;
 	#items;
 	#itemWrap;
+	/**
+	* Cell recycling. Each rendered key holds a stable cell id, and `repeat` is
+	* keyed by that id rather than the item key, so a cell scrolled out of the
+	* window hands its DOM to an item scrolling in instead of being destroyed and
+	* recreated. Item-keyed `repeat` gets steadily slower in Chrome when every key
+	* in the window is new (a scrollbar drag / fling), and recreating ~100 cells a
+	* frame is costly in any case. See {@link #assignCellIds}.
+	*/
+	#cellIds;
+	#nextCellId;
+	/** Keys whose cell was taken over from another item in the latest render. */
+	#recycledKeys;
+	/**
+	* Element mode: each cell has a fixed `<slot name="gl-cell-<id>">`, and the
+	* light-DOM item it shows is pointed at it via its `slot` attribute. Moving
+	* that attribute is far cheaper than renaming slots, which makes the browser
+	* re-match every light-DOM child. `#windowSlots` is the assignment the latest
+	* render wants (applied in `updated()`); `#slottedItems` is what's applied.
+	*/
+	#windowSlots;
+	#slottedItems;
 	/** Items added mid-list that are still playing their enter animation. */
 	#entering;
 	/** Timer that ends the `[reflowing]` window opened by a mid-list insertion. */
@@ -1563,9 +1614,15 @@ let GridListElement = class GridListElement extends LitElement {
 		this.addEventListener(`pointermove`, this.#onHostPointerMove, { passive: true });
 		this.addEventListener(`pointerleave`, this.#onHostPointerLeave);
 		this.#mutationObserver ??= new MutationObserver((records) => this.#onChildrenChanged(records));
-		this.#mutationObserver.observe(this, {
-			childList: true,
-			attributeFilter: [`hidden`]
+		this.#mutationObserver.observe(this, { childList: true });
+		this.#itemAttrObserver ??= new MutationObserver((records) => this.#onItemAttributesChanged(records));
+		this.#itemAttrObserver.observe(this, {
+			subtree: true,
+			attributeFilter: [
+				`hidden`,
+				`data-key`,
+				`data-value`
+			]
 		});
 		this.#searchRegistry ??= createCommandRegistry();
 		this.#ensureSearch();
@@ -1581,6 +1638,7 @@ let GridListElement = class GridListElement extends LitElement {
 		this.#resizeObserver?.disconnect();
 		this.#resizeObserver = void 0;
 		this.#mutationObserver?.disconnect();
+		this.#itemAttrObserver?.disconnect();
 		this.#cancelScrollRaf();
 		this.#cancelSnapTimer();
 		this.#unregisterSearchCommands?.();
@@ -1592,6 +1650,10 @@ let GridListElement = class GridListElement extends LitElement {
 		}
 		if (this.#nativeDragging || this.#nativeDrag.isDragging) this.#clearNativeDragState();
 	}
+	/** Only attribute changes on items themselves matter, not on their content. */
+	#onItemAttributesChanged(records) {
+		if (records.some((r) => r.target.parentNode === this)) this.#onChildrenChanged([]);
+	}
 	#onChildrenChanged(records) {
 		const previousLength = this.#items.length;
 		this.#syncItems();
@@ -1608,7 +1670,7 @@ let GridListElement = class GridListElement extends LitElement {
 			const tickledId = this.tickled.tickledId;
 			if (tickledId && gone.includes(tickledId)) this.tickled.focus(void 0);
 		}
-		this._syncItemStates();
+		this._syncItemStates(true);
 		this.#noteChildMutation(previousLength, records);
 		this.requestUpdate();
 		this.updateComplete.then(() => this.#emitViewportChange());
@@ -1680,6 +1742,11 @@ let GridListElement = class GridListElement extends LitElement {
 				const w = entry.contentRect.width;
 				const h = entry.contentRect.height;
 				if (w <= 0 || h <= 0) return;
+				if (w === this._viewportWidth && h === this._viewportHeight) continue;
+				const horizontal = this.orientation === `row`;
+				const prevOffset = horizontal ? this._scrollLeft : this._scrollTop;
+				const prevExtent = horizontal ? this._viewportWidth : this._viewportHeight;
+				if (prevExtent > 0 && prevOffset > 1) this.#captureCentreAnchor(prevOffset, prevExtent, this.itemSize, this.gap, this.captionStyle, this.captionHeight, this.orientation);
 				this._viewportWidth = w;
 				this._viewportHeight = h;
 			}
@@ -1841,7 +1908,11 @@ let GridListElement = class GridListElement extends LitElement {
 	}
 	updated(changed) {
 		super.updated(changed);
-		this.#syncItems();
+		const pending = this.#mutationObserver?.takeRecords();
+		const pendingAttrs = this.#itemAttrObserver?.takeRecords();
+		if (pending !== void 0 && pending.length > 0) this.#onChildrenChanged(pending);
+		else if (pendingAttrs !== void 0 && pendingAttrs.length > 0) this.#onItemAttributesChanged(pendingAttrs);
+		if (this.#source instanceof ElementGridListSource) this.#applyCellSlots();
 		if (changed.has(`selectionMode`) || changed.has(`interactionMode`)) {
 			this.selection.clearAnchor();
 			this.#syncAriaMultiselectable();
@@ -2193,13 +2264,36 @@ let GridListElement = class GridListElement extends LitElement {
 			this._scrollTop = next;
 		}
 	}
-	_syncItemStates() {
+	/** Light-DOM items currently carrying `data-tickled` / `data-selected`. */
+	#markedTickled;
+	#markedSelected;
+	/**
+	* Mirror cursor / selection onto the light-DOM items as `data-tickled` /
+	* `data-selected`. Only the items whose state changed are touched, so a
+	* cursor move costs O(selection), not O(items). `full` re-checks every item —
+	* used when the child list changes, so markers set before the item was
+	* ours (or left on a removed item) are corrected.
+	*/
+	_syncItemStates(full = false) {
 		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));
+		const tickledId = this.tickled.tickledId;
+		const elementFor = (key) => {
+			if (isSyntheticKey(key)) return void 0;
+			const index = this.#source.indexOfKey(key);
+			return index < 0 ? void 0 : this.#items[index];
+		};
+		const tickledEl = tickledId === void 0 ? void 0 : elementFor(tickledId);
+		const selectedEls = /* @__PURE__ */ new Set();
+		for (const key of selected) {
+			const el = elementFor(key);
+			if (el) selectedEls.add(el);
 		}
+		if (full) for (const el of this.#items) {
+			this.#markedTickled.add(el);
+			this.#markedSelected.add(el);
+		}
+		this.#markedTickled = syncMarker(`data-tickled`, this.#markedTickled, tickledEl ? /* @__PURE__ */ new Set([tickledEl]) : /* @__PURE__ */ new Set());
+		this.#markedSelected = syncMarker(`data-selected`, this.#markedSelected, selectedEls);
 		this.setAttribute(`data-input-mode`, this.tickled.inputMode);
 	}
 	#emitSelect(selected, previous) {
@@ -2269,8 +2363,57 @@ let GridListElement = class GridListElement extends LitElement {
     `;
 	}
 	#renderDataCells(win) {
+		const slice = this.#windowSlice(win);
+		return repeat(slice, (index) => this.#cellIds.get(this.#source.keyAt(index)), (index) => this.#renderDataCell(index, win));
+	}
+	#cellSlotName(key) {
+		return `gl-cell-${this.#cellIds.get(key)}`;
+	}
+	/**
+	* Element mode: point each rendered item's `slot` at its cell, and clear it on
+	* items that left the window (or the DOM) so they project nowhere.
+	*/
+	#applyCellSlots() {
+		const next = /* @__PURE__ */ new Map();
+		for (const [el, name] of this.#windowSlots) {
+			next.set(el, name);
+			if (el.getAttribute(`slot`) !== name) el.setAttribute(`slot`, name);
+		}
+		for (const el of this.#slottedItems.keys()) if (!next.has(el)) el.removeAttribute(`slot`);
+		this.#slottedItems = next;
+	}
+	/** Effective indices in the rendered window, with cell ids assigned to their keys. */
+	#windowSlice(win) {
 		const slice = win.ranges.flatMap(([start, end]) => Array.from({ length: end - start }, (_, i) => start + i));
-		return repeat(slice, (index) => this.#source.keyAt(index), (index) => this.#renderDataCell(index, win));
+		this.#assignCellIds(slice.map((index) => this.#source.keyAt(index)));
+		return slice;
+	}
+	/**
+	* Give every key in the window a cell id: keys already rendered keep theirs;
+	* new keys take the ids freed by keys that left the window (recycling that
+	* cell's DOM), and only mint a fresh id when none is free.
+	*/
+	#assignCellIds(keys) {
+		const inWindow = new Set(keys);
+		const free = [];
+		for (const [key, id] of this.#cellIds) if (!inWindow.has(key)) free.push(id);
+		const next = /* @__PURE__ */ new Map();
+		for (const key of keys) {
+			const id = this.#cellIds.get(key);
+			if (id !== void 0) next.set(key, id);
+		}
+		const recycled = /* @__PURE__ */ new Set();
+		for (const key of keys) {
+			if (next.has(key)) continue;
+			const id = free.pop();
+			if (id === void 0) next.set(key, this.#nextCellId++);
+			else {
+				next.set(key, id);
+				recycled.add(key);
+			}
+		}
+		this.#cellIds = next;
+		this.#recycledKeys = recycled;
 	}
 	#renderDataCell(index, win) {
 		const key = this.#source.keyAt(index);
@@ -2290,10 +2433,12 @@ let GridListElement = class GridListElement extends LitElement {
 		const icon = appearanceAbsent(rawIcon) ? void 0 : rawIcon;
 		return html`
       <div
-        class="cell${selected ? ` selected` : ``}${tickled ? ` tickled` : ``}${marquee ? ` marquee` : ``}${this.#nativeDragging && key === this.#dragOriginKey ? ` dragging-origin` : ``}"
+        class="cell${selected ? ` selected` : ``}${tickled ? ` tickled` : ``}${marquee ? ` marquee` : ``}${this.#recycledKeys.has(key) ? ` recycled` : ``}${this.#nativeDragging && key === this.#dragOriginKey ? ` dragging-origin` : ``}"
         part="item${selected ? ` selected` : ``}${tickled ? ` tickled` : ``}"
         role="option"
         aria-selected=${selected ? `true` : `false`}
+        aria-setsize=${this.#source.count}
+        aria-posinset=${index + 1}
         style="width:${this.itemSize}px;height:${cellHeight}px;transform:translate(${x}px,${y}px)"
         data-index=${index}
         data-key=${key}
@@ -2370,8 +2515,9 @@ let GridListElement = class GridListElement extends LitElement {
 		current.startLoop?.();
 	}
 	#renderElementCells(win) {
-		const slice = win.ranges.flatMap(([start, end]) => Array.from({ length: end - start }, (_, i) => start + i));
-		return repeat(slice, (index) => this.#source.keyAt(index), (index) => this.#renderCell(this.#items[index], index, win));
+		const slice = this.#windowSlice(win);
+		this.#windowSlots = slice.map((index) => [this.#items[index], this.#cellSlotName(this.#source.keyAt(index))]);
+		return repeat(slice, (index) => this.#cellIds.get(this.#source.keyAt(index)), (index) => this.#renderCell(this.#items[index], index, win));
 	}
 	#renderHeaders(win) {
 		if (win.headers.length === 0) return nothing;
@@ -2380,6 +2526,7 @@ let GridListElement = class GridListElement extends LitElement {
         <ixfx-list-group-header
           class="group-header"
           part="group-header"
+          role="presentation"
           data-group-key=${h.key}
           label=${h.label}
           count=${h.count}
@@ -2408,10 +2555,12 @@ let GridListElement = class GridListElement extends LitElement {
 		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` : ``}${marquee ? ` marquee` : ``}${this.#nativeDragging && key === this.#dragOriginKey ? ` dragging-origin` : ``}"
+        class="cell${selected ? ` selected` : ``}${tickled ? ` tickled` : ``}${entering ? ` entering` : ``}${marquee ? ` marquee` : ``}${this.#recycledKeys.has(key) ? ` recycled` : ``}${this.#nativeDragging && key === this.#dragOriginKey ? ` dragging-origin` : ``}"
         part="item${selected ? ` selected` : ``}${tickled ? ` tickled` : ``}"
         role="option"
         aria-selected=${selected ? `true` : `false`}
+        aria-setsize=${this.#source.count}
+        aria-posinset=${index + 1}
         style="width:${this.itemSize}px;height:${cellHeight}px;transform:translate(${x}px,${y}px)"
         data-index=${index}
         data-key=${key}
@@ -2424,7 +2573,7 @@ let GridListElement = class GridListElement extends LitElement {
         @pointerenter=${() => this.#handleCellPointerEnter(key)}
       >
         <div class="thumb" part="thumb" style=${thumbStyle}>
-          ${this.#source.renderCellContent(index)}
+          <slot name=${this.#cellSlotName(key)}></slot>
         </div>
         ${showCaption ? this.#renderCaption(caption, captionCss, tickled) : ``}
       </div>
@@ -2660,4 +2809,4 @@ GridListElement = __decorate([safeCustomElement(`ixfx-grid-list`)], GridListElem
 //#endregion
 export { GridListElement as t };
 
-//# sourceMappingURL=grid-list-DjIl910A.js.map
+//# sourceMappingURL=grid-list-DeqAd9-h.js.map