@ixfx/components 0.13.2 → 0.13.4

package/dist/drag-ghost-DtSDvjri.js

@@ -81,5 +81,3 @@ function createDragGhost(opts) {
 }
 //#endregion
 export { createDragGhost as t };
-
-//# sourceMappingURL=drag-ghost-DtSDvjri.js.map

package/dist/editable-label-rzXkjf1H.d.ts

@@ -71,5 +71,4 @@ declare global {
   }
 }
 //#endregion
-export { EditableMode as a, EditableLabelChangeEvent as i, EditableLabel as n, EntryMode as o, EditableLabelChangeDetail as r, DisplayTextLogic as t };
-//# sourceMappingURL=editable-label-rzXkjf1H.d.ts.map
+export { EditableMode as a, EditableLabelChangeEvent as i, EditableLabel as n, EntryMode as o, EditableLabelChangeDetail as r, DisplayTextLogic as t };

package/dist/editable-label.js

@@ -324,5 +324,3 @@ function _selectAll(el) {
 }
 //#endregion
 export { EditableLabel };
-
-//# sourceMappingURL=editable-label.js.map

package/dist/fallbacks-DQ_5OsmR.js

@@ -418,5 +418,3 @@ _registerThemeFallbacksOnce();
 const themeFallbacks = css``;
 //#endregion
 export { themeFallbacks as t };
-
-//# sourceMappingURL=fallbacks-DQ_5OsmR.js.map

package/dist/{flat-list-Ohxqsy0g.d.ts → flat-list-DNnTQ65v.d.ts}

@@ -1,9 +1,9 @@
-import "./icon-DR_3rSyZ.js";
+import "./icon-CDGprSdE.js";
 import { k as TreeDataModel } from "./tree-component-Cj8V3uar.js";
 import { o as TreeNode, r as TreeFilterPredicate, t as LoadChildrenCallback } from "./types-DQ7KOUIj.js";
 import "./crumbs.js";
 import { i as ListInteractionMode, l as ListSelectionMode } from "./list-selection-types-PjKdhF-a.js";
-import { r as VerticalListElement } from "./vertical-list-CqBc-t8w.js";
+import { r as VerticalListElement } from "./vertical-list-m7GJtXwv.js";
 import { LitElement, PropertyValues } from "lit";
 //#region src/flat-list/types.d.ts
 /** How branches and leaves are ordered within one level. */
@@ -180,5 +180,4 @@ interface FlatListElement {
   addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
 }
 //#endregion
-export { FlatListSelectEvent as _, FlatListContextMenuDetail as a, FlatListDropEvent as c, FlatListEditCommitDetail as d, FlatListEditCommitEvent as f, FlatListSelectDetail as g, FlatListNavigateEvent as h, FlatListBranchOrder as i, FlatListEditCancelDetail as l, FlatListNavigateDetail as m, FlatListActivateDetail as n, FlatListContextMenuEvent as o, FlatListElementEventMap as p, FlatListActivateEvent as r, FlatListDropDetail as s, FlatListElement as t, FlatListEditCancelEvent as u };
-//# sourceMappingURL=flat-list-Ohxqsy0g.d.ts.map
+export { FlatListSelectEvent as _, FlatListContextMenuDetail as a, FlatListDropEvent as c, FlatListEditCommitDetail as d, FlatListEditCommitEvent as f, FlatListSelectDetail as g, FlatListNavigateEvent as h, FlatListBranchOrder as i, FlatListEditCancelDetail as l, FlatListNavigateDetail as m, FlatListActivateDetail as n, FlatListContextMenuEvent as o, FlatListElementEventMap as p, FlatListActivateEvent as r, FlatListDropDetail as s, FlatListElement as t, FlatListEditCancelEvent as u };

package/dist/flat-list.d.ts

@@ -1,2 +1,2 @@
-import { _ as FlatListSelectEvent, a as FlatListContextMenuDetail, c as FlatListDropEvent, d as FlatListEditCommitDetail, f as FlatListEditCommitEvent, g as FlatListSelectDetail, h as FlatListNavigateEvent, i as FlatListBranchOrder, l as FlatListEditCancelDetail, m as FlatListNavigateDetail, n as FlatListActivateDetail, o as FlatListContextMenuEvent, p as FlatListElementEventMap, r as FlatListActivateEvent, s as FlatListDropDetail, t as FlatListElement, u as FlatListEditCancelEvent } from "./flat-list-Ohxqsy0g.js";
+import { _ as FlatListSelectEvent, a as FlatListContextMenuDetail, c as FlatListDropEvent, d as FlatListEditCommitDetail, f as FlatListEditCommitEvent, g as FlatListSelectDetail, h as FlatListNavigateEvent, i as FlatListBranchOrder, l as FlatListEditCancelDetail, m as FlatListNavigateDetail, n as FlatListActivateDetail, o as FlatListContextMenuEvent, p as FlatListElementEventMap, r as FlatListActivateEvent, s as FlatListDropDetail, t as FlatListElement, u as FlatListEditCancelEvent } from "./flat-list-DNnTQ65v.js";
 export { type FlatListActivateDetail, type FlatListActivateEvent, type FlatListBranchOrder, type FlatListContextMenuDetail, type FlatListContextMenuEvent, type FlatListDropDetail, type FlatListDropEvent, type FlatListEditCancelDetail, type FlatListEditCancelEvent, type FlatListEditCommitDetail, type FlatListEditCommitEvent, FlatListElement, type FlatListElementEventMap, type FlatListNavigateDetail, type FlatListNavigateEvent, type FlatListSelectDetail, type FlatListSelectEvent };

package/dist/flat-list.js

@@ -414,12 +414,16 @@ let FlatListElement = class FlatListElement extends LitElement {
 	#onKeyDown;
 	/** A crumb was chosen (or the Up button used): go to that node, or to its parent and select it if it is a leaf. */
 	#onCrumbSelect;
+	#markedEl;
 	/** Flag the marked row. Rows are rebuilt with the level, so this runs after each rebuild. */
 	async #applyMarked() {
 		const list = this.list;
 		if (!list) return;
 		await list.updateComplete;
-		for (const row of list.querySelectorAll(`li[data-key]`)) row.toggleAttribute(`data-marked`, row.getAttribute(`data-key`) === this.markedKey);
+		this.#markedEl?.removeAttribute(`data-marked`);
+		const key = this.markedKey;
+		this.#markedEl = key === void 0 ? void 0 : list.getItemByKey(key);
+		this.#markedEl?.setAttribute(`data-marked`, ``);
 	}
 	/** After the inner list has rebuilt, place the cursor / selection / focus. */
 	async #settleList() {
@@ -678,5 +682,3 @@ __decorate([state()], FlatListElement.prototype, "_loading", void 0);
 FlatListElement = __decorate([safeCustomElement(`ixfx-flat-list`)], FlatListElement);
 //#endregion
 export { FlatListElement };
-
-//# sourceMappingURL=flat-list.js.map

package/dist/form-CsXJX15p.js

@@ -60,5 +60,3 @@ let FormElement = class FormElement extends LitElement {
 FormElement = __decorate([safeCustomElement(`ixfx-form`)], FormElement);
 //#endregion
 export { FormElement as t };
-
-//# sourceMappingURL=form-CsXJX15p.js.map

package/dist/form.d.ts

@@ -11,5 +11,4 @@ declare global {
   }
 }
 //#endregion
-export { FormElement };
-//# sourceMappingURL=form.d.ts.map
+export { FormElement };

package/dist/{grid-list-pefLORIr.d.ts → grid-list-BLnV9oZE.d.ts}

@@ -1,5 +1,5 @@
 import { F as ListDragPreviewSourceResolver, P as ListDragPreviewRenderer, R as ListNativeDragStartEvent } from "./tree-component-Cj8V3uar.js";
-import { S as ListSearchController } from "./index-CxZ61DO1.js";
+import { S as ListSearchController } from "./index-BYIRgv49.js";
 import "./pan-text-CoYmt2qd.js";
 import { i as ListGroupChangeEvent, n as ListGroupBy, o as ListGroupInfo, s as ListGroupLabel, u as ListGroupToggleEvent } from "./grouping-CUKgmkMm.js";
 import { i as ListInteractionMode, l as ListSelectionMode } from "./list-selection-types-PjKdhF-a.js";
@@ -667,6 +667,13 @@ declare class GridListElement<T = unknown> extends LitElement {
    * Auto-assigned keyless-item keys are omitted.
    */
   visibleKeys(): string[];
+  /**
+   * 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.
+   */
   private _syncItemStates;
   private _dispatch;
   protected render(): ReturnType<typeof html>;
@@ -682,5 +689,4 @@ interface GridListElement {
   addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
 }
 //#endregion
-export { DragSelectRect as A, TreeKeyboardNavControllerConfig as C, ListSelectionGesture as D, ListSelectionControllerConfig as E, ListDragSelectControllerConfig as M, ListSelectionModes as O, TreeKeyboardNavController as S, ListSelectionController as T, GridListTickleDetail as _, GridListCaptionBackdrop as a, GridListViewportChangeEvent as b, GridListDataAdapter as c, GridListItemClickDetail as d, GridListItemClickEvent as f, GridListSelectEvent as g, GridListSelectDetail as h, GridListCaptionAlign as i, ListDragSelectController as j, isMultiMode as k, GridListElementEventMap as l, GridListOrientation as m, GridListActivateDetail as n, GridListCaptionPosition as o, GridListItemEventDetail as p, GridListActivateEvent as r, GridListCaptionStyle as s, GridListElement as t, GridListFullElementEventMap as u, GridListTickleEvent as v, TreeKeyboardNavItemId as w, TreeKeyboardNavCallbacks as x, GridListViewportChangeDetail as y };
-//# sourceMappingURL=grid-list-pefLORIr.d.ts.map
+export { DragSelectRect as A, TreeKeyboardNavControllerConfig as C, ListSelectionGesture as D, ListSelectionControllerConfig as E, ListDragSelectControllerConfig as M, ListSelectionModes as O, TreeKeyboardNavController as S, ListSelectionController as T, GridListTickleDetail as _, GridListCaptionBackdrop as a, GridListViewportChangeEvent as b, GridListDataAdapter as c, GridListItemClickDetail as d, GridListItemClickEvent as f, GridListSelectEvent as g, GridListSelectDetail as h, GridListCaptionAlign as i, ListDragSelectController as j, isMultiMode as k, GridListElementEventMap as l, GridListOrientation as m, GridListActivateDetail as n, GridListCaptionPosition as o, GridListItemEventDetail as p, GridListActivateEvent as r, GridListCaptionStyle as s, GridListElement as t, GridListFullElementEventMap as u, GridListTickleEvent as v, TreeKeyboardNavItemId as w, TreeKeyboardNavCallbacks as x, GridListViewportChangeDetail as y };

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

@@ -2,13 +2,13 @@ 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";
 import { i as listItemFadeKeyframes } from "./list-item-animation-BUoEKi5s.js";
 import "./interaction-ZTh4htzr.js";
-import { t as scrollFadeStyles } from "./scroll-fade-BrNUIYnm.js";
+import { t as scrollFadeStyles } from "./scroll-fade-Xx28D7mH.js";
 import { n as appearanceColor, t as appearanceAbsent } from "./item-appearance-BjcMyauw.js";
 import "./pan-text-CqtvjPyK.js";
 import "./list-group-header.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>
@@ -2659,5 +2808,3 @@ __decorate([state()], GridListElement.prototype, "_viewportWidth", void 0);
 GridListElement = __decorate([safeCustomElement(`ixfx-grid-list`)], GridListElement);
 //#endregion
 export { GridListElement as t };
-
-//# sourceMappingURL=grid-list-DjIl910A.js.map

package/dist/grid-list.d.ts

@@ -1,5 +1,5 @@
 import { I as ListDragSource, L as ListNativeDragStartDetail, M as ListDragPreview, N as ListDragPreviewContext, P as ListDragPreviewRenderer, R as ListNativeDragStartEvent, j as ListDragEntry } from "./tree-component-Cj8V3uar.js";
 import { i as ListGroupChangeEvent, l as ListGroupToggleDetail, n as ListGroupBy, o as ListGroupInfo, r as ListGroupChangeDetail, s as ListGroupLabel, u as ListGroupToggleEvent } from "./grouping-CUKgmkMm.js";
 import { i as ListInteractionMode, l as ListSelectionMode } from "./list-selection-types-PjKdhF-a.js";
-import { _ as GridListTickleDetail, a as GridListCaptionBackdrop, b as GridListViewportChangeEvent, c as GridListDataAdapter, d as GridListItemClickDetail, f as GridListItemClickEvent, g as GridListSelectEvent, h as GridListSelectDetail, i as GridListCaptionAlign, l as GridListElementEventMap, m as GridListOrientation, n as GridListActivateDetail, o as GridListCaptionPosition, p as GridListItemEventDetail, r as GridListActivateEvent, s as GridListCaptionStyle, t as GridListElement, u as GridListFullElementEventMap, v as GridListTickleEvent, y as GridListViewportChangeDetail } from "./grid-list-pefLORIr.js";
+import { _ as GridListTickleDetail, a as GridListCaptionBackdrop, b as GridListViewportChangeEvent, c as GridListDataAdapter, d as GridListItemClickDetail, f as GridListItemClickEvent, g as GridListSelectEvent, h as GridListSelectDetail, i as GridListCaptionAlign, l as GridListElementEventMap, m as GridListOrientation, n as GridListActivateDetail, o as GridListCaptionPosition, p as GridListItemEventDetail, r as GridListActivateEvent, s as GridListCaptionStyle, t as GridListElement, u as GridListFullElementEventMap, v as GridListTickleEvent, y as GridListViewportChangeDetail } from "./grid-list-BLnV9oZE.js";
 export { type GridListActivateDetail, type GridListActivateEvent, type GridListCaptionAlign, type GridListCaptionBackdrop, type GridListCaptionPosition, type GridListCaptionStyle, type GridListDataAdapter, GridListElement, type GridListElementEventMap, type GridListFullElementEventMap, type GridListItemClickDetail, type GridListItemClickEvent, type GridListItemEventDetail, type GridListOrientation, type GridListSelectDetail, type GridListSelectEvent, type GridListTickleDetail, type GridListTickleEvent, type GridListViewportChangeDetail, type GridListViewportChangeEvent, type ListDragEntry, type ListDragPreview, type ListDragPreviewContext, type ListDragPreviewRenderer, type ListDragSource, type ListGroupBy, type ListGroupChangeDetail, type ListGroupChangeEvent, type ListGroupInfo, type ListGroupLabel, type ListGroupToggleDetail, type ListGroupToggleEvent, type ListInteractionMode, type ListNativeDragStartDetail, type ListNativeDragStartEvent, type ListSelectionMode };

package/dist/grid-list.js

@@ -1,3 +1,3 @@
 import "./list-group-header.js";
-import { t as GridListElement } from "./grid-list-DjIl910A.js";
+import { t as GridListElement } from "./grid-list-CkU8gHCh.js";
 export { GridListElement };

package/dist/{grouped-item-lister-Bhyo-dkH.d.ts → grouped-item-lister-DETte0Dh.d.ts}

@@ -106,7 +106,7 @@ declare class GroupedItemListerElement<T = unknown> extends LitElement {
   connectedCallback(): void;
   disconnectedCallback(): void;
   protected updated(changed: PropertyValues): void;
-  protected render(): import("lit").TemplateResult<1> | typeof nothing;
+  protected render(): typeof nothing | import("lit").TemplateResult<1>;
 }
 declare global {
   interface HTMLElementTagNameMap {
@@ -117,5 +117,4 @@ interface GroupedItemListerElement<T> {
   addEventListener: (<K extends keyof GroupedItemListerElementEventMap<T>>(type: K, listener: (this: GroupedItemListerElement<T>, event: GroupedItemListerElementEventMap<T>[K]) => void, options?: boolean | AddEventListenerOptions) => void) & ((type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions) => void);
 }
 //#endregion
-export { IGroupedSubComponent as a, SubComponentActivateEvent as c, SubComponentItemClickEvent as d, SubComponentSelectDetail as f, SubComponentTickleEvent as h, GroupedSelectEvent as i, SubComponentFactory as l, SubComponentTickleDetail as m, GroupedItemListerElementEventMap as n, IGroupedSubComponentEventMap as o, SubComponentSelectEvent as p, GroupedSelectDetail as r, SubComponentActivateDetail as s, GroupedItemListerElement as t, SubComponentItemClickDetail as u };
-//# sourceMappingURL=grouped-item-lister-Bhyo-dkH.d.ts.map
+export { IGroupedSubComponent as a, SubComponentActivateEvent as c, SubComponentItemClickEvent as d, SubComponentSelectDetail as f, SubComponentTickleEvent as h, GroupedSelectEvent as i, SubComponentFactory as l, SubComponentTickleDetail as m, GroupedItemListerElementEventMap as n, IGroupedSubComponentEventMap as o, SubComponentSelectEvent as p, GroupedSelectDetail as r, SubComponentActivateDetail as s, GroupedItemListerElement as t, SubComponentItemClickDetail as u };

package/dist/grouped-item-lister.d.ts

@@ -1,2 +1,2 @@
-import { a as IGroupedSubComponent, c as SubComponentActivateEvent, d as SubComponentItemClickEvent, f as SubComponentSelectDetail, h as SubComponentTickleEvent, i as GroupedSelectEvent, l as SubComponentFactory, m as SubComponentTickleDetail, n as GroupedItemListerElementEventMap, o as IGroupedSubComponentEventMap, p as SubComponentSelectEvent, r as GroupedSelectDetail, s as SubComponentActivateDetail, t as GroupedItemListerElement, u as SubComponentItemClickDetail } from "./grouped-item-lister-Bhyo-dkH.js";
+import { a as IGroupedSubComponent, c as SubComponentActivateEvent, d as SubComponentItemClickEvent, f as SubComponentSelectDetail, h as SubComponentTickleEvent, i as GroupedSelectEvent, l as SubComponentFactory, m as SubComponentTickleDetail, n as GroupedItemListerElementEventMap, o as IGroupedSubComponentEventMap, p as SubComponentSelectEvent, r as GroupedSelectDetail, s as SubComponentActivateDetail, t as GroupedItemListerElement, u as SubComponentItemClickDetail } from "./grouped-item-lister-DETte0Dh.js";
 export { GroupedItemListerElement, type GroupedItemListerElementEventMap, type GroupedSelectDetail, type GroupedSelectEvent, type IGroupedSubComponent, type IGroupedSubComponentEventMap, type SubComponentActivateDetail, type SubComponentActivateEvent, type SubComponentFactory, type SubComponentItemClickDetail, type SubComponentItemClickEvent, type SubComponentSelectDetail, type SubComponentSelectEvent, type SubComponentTickleDetail, type SubComponentTickleEvent };

package/dist/grouped-item-lister.js

@@ -173,5 +173,3 @@ __decorate([property({
 GroupedItemListerElement = __decorate([safeCustomElement(`ixfx-grouped-item-lister`)], GroupedItemListerElement);
 //#endregion
 export { GroupedItemListerElement };
-
-//# sourceMappingURL=grouped-item-lister.js.map

package/dist/grouping-CUKgmkMm.d.ts

@@ -59,5 +59,4 @@ declare function partitionByGroup<T>(items: readonly T[], keyOf: (item: T, index
 /** Immutable toggle of `key` in `set`. */
 declare function toggleInSet(set: ReadonlySet<string>, key: string): Set<string>;
 //#endregion
-export { ListGroupEventMap as a, ListGroupPartition as c, defaultGroupLabel as d, partitionByGroup as f, toggleInSet as h, ListGroupChangeEvent as i, ListGroupToggleDetail as l, toGroupKey as m, ListGroupBy as n, ListGroupInfo as o, resolveGroupKey as p, ListGroupChangeDetail as r, ListGroupLabel as s, EMPTY_GROUP_LABEL as t, ListGroupToggleEvent as u };
-//# sourceMappingURL=grouping-CUKgmkMm.d.ts.map
+export { ListGroupEventMap as a, ListGroupPartition as c, defaultGroupLabel as d, partitionByGroup as f, toggleInSet as h, ListGroupChangeEvent as i, ListGroupToggleDetail as l, toGroupKey as m, ListGroupBy as n, ListGroupInfo as o, resolveGroupKey as p, ListGroupChangeDetail as r, ListGroupLabel as s, EMPTY_GROUP_LABEL as t, ListGroupToggleEvent as u };

package/dist/grouping-RYPnHkrS.js

@@ -49,5 +49,3 @@ function toggleInSet(set, key) {
 }
 //#endregion
 export { toGroupKey as a, resolveGroupKey as i, defaultGroupLabel as n, toggleInSet as o, partitionByGroup as r, EMPTY_GROUP_LABEL as t };
-
-//# sourceMappingURL=grouping-RYPnHkrS.js.map

package/dist/handle-DAXs7kbJ.js

@@ -652,5 +652,3 @@ const handleStyles = css`
 `;
 //#endregion
 export { handleStyles as t };
-
-//# sourceMappingURL=handle-DAXs7kbJ.js.map