@ixfx/components 0.16.2 → 0.16.4

package/dist/{tree-C_H1COTf.js → tree-BaXYyt5U.js}

@@ -2,9 +2,10 @@ 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 { i as ListSearchController, n as listSearchStyles, o as registerListSearchCommands, r as LIST_SEARCH_MODES, t as createTreeListSearchAdapter } from "./incr-search-2YaxUUA9.js";
+import { i as ListSearchController, n as listSearchStyles, o as registerListSearchCommands, r as LIST_SEARCH_MODES, t as createTreeListSearchAdapter } from "./incr-search-Dc6gYpJG.js";
 import { i as animateListItemOut, o as prefersReducedMotion, r as animateListItemIn, t as ListNativeDragController } from "./list-native-drag-controller-CcXoS0YX.js";
 import { a as capKeys, c as keysAsFlags, f as withoutFlag, i as capFlags, l as keysToArray, n as EMPTY_KEYS, o as flagsFromRecord, s as flagsToRecord, t as EMPTY_FLAGS } from "./pending-BGidHppL.js";
+import { i as sameKeySet, r as isPartialKey, t as PARTIAL_DESCRIPTION } from "./partial-keys-Ck6CiprB.js";
 import { n as createScrollHoverGuard } from "./scroll-hover-guard-Cjw6179Q.js";
 import "./interaction-E-uMGHkJ.js";
 import { t as collectDataResult } from "./data-provider-35TyWclX.js";
@@ -1320,7 +1321,12 @@ let TreeBaseElement = class TreeBaseElement extends LitElement {
 			if (nodes.length === 0) return;
 			if ((event.ctrlKey || event.metaKey) && event.key === `a`) {
 				event.preventDefault();
-				this.selectAll({ visibleOnly: true });
+				if (this.#intercepted({
+					kind: `all`,
+					keys: [],
+					source: `keyboard`
+				})) return;
+				this.#applySelectAll({ visibleOnly: true });
 				return;
 			}
 			if ([
@@ -1402,7 +1408,10 @@ let TreeBaseElement = class TreeBaseElement extends LitElement {
 					event.preventDefault();
 					const current = nodes[currentIdx];
 					if (current) {
-						if (this.interactionMode !== `manual` && this.interactionMode !== `checked`) this.select(current.node);
+						if (this.interactionMode !== `manual` && this.interactionMode !== `checked`) {
+							this.#requestReplace(current.node, `keyboard`, false);
+							this.requestUpdate();
+						}
 						this.dispatchEvent(new CustomEvent(`activate`, {
 							detail: {
 								node: current.node,
@@ -1419,7 +1428,7 @@ let TreeBaseElement = class TreeBaseElement extends LitElement {
 					event.preventDefault();
 					const current = nodes[currentIdx];
 					if (!current) break;
-					if (this.interactionMode === `checked`) this._handleCheckboxClick(new MouseEvent(`click`), current.node, current.depth);
+					if (this.interactionMode === `checked`) this._handleCheckboxClick(new MouseEvent(`click`), current.node, current.depth, `keyboard`);
 					else if (this.interactionMode === `standard` || this.interactionMode === `vscode` || this.interactionMode === `manual`) this.#toggleSelection(current.node, current.depth);
 					break;
 				}
@@ -2699,6 +2708,14 @@ let TreeBaseElement = class TreeBaseElement extends LitElement {
 	* descendants, so `visibleOnly` makes no difference there.
 	*/
 	selectAll(options = {}) {
+		if (this.#intercepted({
+			kind: `all`,
+			keys: [],
+			source: `api`
+		})) return;
+		this.#applySelectAll(options);
+	}
+	#applySelectAll(options) {
 		const prev = new Set(this._selectedNodes);
 		for (const node of this.#bulkSelectionScope(options)) if (this.#canSelect(node)) this._selectedNodes.add(node);
 		if (this.selectedNode === void 0 || !this._selectedNodes.has(this.selectedNode)) this.selectedNode = [...this._selectedNodes].at(-1);
@@ -2912,6 +2929,15 @@ let TreeBaseElement = class TreeBaseElement extends LitElement {
 			bubbles: true,
 			composed: true
 		}));
+		this.dispatchEvent(new CustomEvent(`list-select`, {
+			detail: {
+				selectedKeys: new Set([...this._selectedNodes].map((n) => n.item.key)),
+				previousKeys: new Set([...previous].map((n) => n.item.key)),
+				previous
+			},
+			bubbles: true,
+			composed: true
+		}));
 	}
 	#findNodePath(nodes, predicate, prefix = []) {
 		for (const node of nodes) {
@@ -2976,8 +3002,56 @@ let TreeBaseElement = class TreeBaseElement extends LitElement {
 		if (!(target instanceof Element)) return false;
 		return target.closest(`.tree-caret`) !== null;
 	}
+	/** Report an intent before changing the selection; `true` when the caller took over. */
+	#intercepted(intent) {
+		return !this.dispatchEvent(new CustomEvent(`list-select-intent`, {
+			detail: intent,
+			bubbles: true,
+			composed: true,
+			cancelable: true
+		}));
+	}
+	/** The anchor node's key and the selectable keys in the flat range anchor..`node`, when there is an anchor. */
+	#rangeIntent(node) {
+		const flat = this.#getFlat();
+		const anchorIdx = this.#anchor ? flat.indexByKey.get(this.#anchor.node.item.key) ?? -1 : -1;
+		const targetIdx = flat.indexByKey.get(node.item.key) ?? -1;
+		const keys = anchorIdx >= 0 && targetIdx >= 0 ? flat.rows.slice(Math.min(anchorIdx, targetIdx), Math.max(anchorIdx, targetIdx) + 1).map((r) => r.node).filter((n) => this.#canSelect(n)).map((n) => n.item.key) : [node.item.key];
+		return {
+			...this.#anchor ? { anchorKey: this.#anchor.node.item.key } : {},
+			targetKey: node.item.key,
+			keys
+		};
+	}
+	/** Replace-select `node` (a plain click / Enter) unless the caller takes over; the anchor moves either way. */
+	#requestReplace(node, source, setAnchor = true) {
+		if (!this.#canSelect(node)) return;
+		const intercepted = this.#intercepted({
+			kind: `replace`,
+			keys: [node.item.key],
+			source
+		});
+		if (setAnchor) this.#anchor = {
+			node,
+			flatIndex: this.#getFlatIndexOf(node)
+		};
+		if (intercepted) return;
+		const prev = new Set(this._selectedNodes);
+		this._selectedNodes.clear();
+		this._selectedNodes.add(node);
+		this.selectedNode = node;
+		if (!prev.has(node) || prev.size !== 1) this.#dispatchSelect(prev);
+	}
 	#handleImplicitClick(node, depth, event) {
 		if (!this.#clickedOnCaret(node, event) && this.#canSelect(node)) {
+			if (this.#intercepted({
+				kind: `replace`,
+				keys: [node.item.key],
+				source: `pointer`
+			})) {
+				this.#toggleExpand(node, depth);
+				return;
+			}
 			const prev = new Set(this._selectedNodes);
 			this._selectedNodes.clear();
 			this._selectedNodes.add(node);
@@ -2990,51 +3064,60 @@ let TreeBaseElement = class TreeBaseElement extends LitElement {
 		const isMeta = event ? event.metaKey || event.ctrlKey : false;
 		const isShift = event ? event.shiftKey : false;
 		if (isMeta) {
-			if (this.#canSelect(node)) {
-				const prev = new Set(this._selectedNodes);
-				if (this._selectedNodes.has(node)) {
-					this._selectedNodes.delete(node);
-					if (this.selectedNode === node) this.selectedNode = [...this._selectedNodes].at(-1);
-				} else {
-					this._selectedNodes.add(node);
-					this.selectedNode = node;
-					this.#anchor = {
-						node,
-						flatIndex: this.#getFlatIndexOf(node)
-					};
-				}
-				this.#dispatchSelect(prev);
-			}
+			this.#applyToggleClick(node);
 			return;
 		}
 		if (isShift && this.#anchor) {
-			const flat = this.#getFlat();
-			const visible = flat.rows;
-			const anchorIdx = flat.indexByKey.get(this.#anchor.node.item.key) ?? -1;
-			const targetIdx = flat.indexByKey.get(node.item.key) ?? -1;
-			if (anchorIdx >= 0 && targetIdx >= 0) {
-				const prev = new Set(this._selectedNodes);
-				const from = Math.min(anchorIdx, targetIdx);
-				const to = Math.max(anchorIdx, targetIdx);
-				const rangeNodes = visible.slice(from, to + 1).map((n) => n.node).filter((n) => this.#canSelect(n));
-				this._selectedNodes = new Set(rangeNodes);
-				this.selectedNode = node;
-				this.#dispatchSelect(prev);
-			}
+			this.#applyExtendClick(node);
 			return;
 		}
-		if (!this.#clickedOnCaret(node, event) && this.#canSelect(node)) {
-			const prev = new Set(this._selectedNodes);
-			this._selectedNodes.clear();
+		if (!this.#clickedOnCaret(node, event)) this.#requestReplace(node, `pointer`);
+		this.#toggleExpand(node, depth);
+	}
+	/** Ctrl/Cmd+click: flip `node`. */
+	#applyToggleClick(node) {
+		if (!this.#canSelect(node)) return;
+		if (this.#intercepted({
+			kind: `toggle`,
+			keys: [node.item.key],
+			source: `pointer`
+		})) {
+			this.#anchor = {
+				node,
+				flatIndex: this.#getFlatIndexOf(node)
+			};
+			return;
+		}
+		const prev = new Set(this._selectedNodes);
+		if (this._selectedNodes.has(node)) {
+			this._selectedNodes.delete(node);
+			if (this.selectedNode === node) this.selectedNode = [...this._selectedNodes].at(-1);
+		} else {
 			this._selectedNodes.add(node);
 			this.selectedNode = node;
 			this.#anchor = {
 				node,
 				flatIndex: this.#getFlatIndexOf(node)
 			};
-			if (!prev.has(node) || prev.size !== 1) this.#dispatchSelect(prev);
 		}
-		this.#toggleExpand(node, depth);
+		this.#dispatchSelect(prev);
+	}
+	/** Shift+click: select the flat range from the anchor to `node`. */
+	#applyExtendClick(node) {
+		const flat = this.#getFlat();
+		const anchorIdx = this.#anchor ? flat.indexByKey.get(this.#anchor.node.item.key) ?? -1 : -1;
+		const targetIdx = flat.indexByKey.get(node.item.key) ?? -1;
+		if (anchorIdx < 0 || targetIdx < 0) return;
+		if (this.#intercepted({
+			kind: `extend`,
+			...this.#rangeIntent(node),
+			source: `pointer`
+		})) return;
+		const prev = new Set(this._selectedNodes);
+		const rangeNodes = flat.rows.slice(Math.min(anchorIdx, targetIdx), Math.max(anchorIdx, targetIdx) + 1).map((n) => n.node).filter((n) => this.#canSelect(n));
+		this._selectedNodes = new Set(rangeNodes);
+		this.selectedNode = node;
+		this.#dispatchSelect(prev);
 	}
 	#handleExpandOnly(node, depth) {
 		this.#toggleExpand(node, depth);
@@ -3043,43 +3126,27 @@ let TreeBaseElement = class TreeBaseElement extends LitElement {
 		const isMeta = event ? event.metaKey || event.ctrlKey : false;
 		const isShift = event ? event.shiftKey : false;
 		if (isMeta) {
-			if (this.#canSelect(node)) {
-				const prev = new Set(this._selectedNodes);
-				if (this._selectedNodes.has(node)) {
-					this._selectedNodes.delete(node);
-					if (this.selectedNode === node) this.selectedNode = [...this._selectedNodes].at(-1);
-				} else {
-					this._selectedNodes.add(node);
-					this.selectedNode = node;
-					this.#anchor = {
-						node,
-						flatIndex: this.#getFlatIndexOf(node)
-					};
-				}
-				this.#dispatchSelect(prev);
-			}
+			this.#applyToggleClick(node);
 			return;
 		}
 		if (isShift && this.#anchor) {
-			const flat = this.#getFlat();
-			const visible = flat.rows;
-			const anchorIdx = flat.indexByKey.get(this.#anchor.node.item.key) ?? -1;
-			const targetIdx = flat.indexByKey.get(node.item.key) ?? -1;
-			if (anchorIdx >= 0 && targetIdx >= 0) {
-				const prev = new Set(this._selectedNodes);
-				const from = Math.min(anchorIdx, targetIdx);
-				const to = Math.max(anchorIdx, targetIdx);
-				const rangeNodes = visible.slice(from, to + 1).map((n) => n.node).filter((n) => this.#canSelect(n));
-				this._selectedNodes = new Set(rangeNodes);
-				this.selectedNode = node;
-				this.#dispatchSelect(prev);
-			}
+			this.#applyExtendClick(node);
 			return;
 		}
+		if (!this.#clickedOnCaret(node, event) && this.#canSelect(node)) this.#intercepted({
+			kind: `replace`,
+			keys: [node.item.key],
+			source: `pointer`
+		});
 		this.#toggleExpand(node, depth);
 	}
 	#toggleSelection(node, _depth) {
 		if (!this.#canSelect(node)) return;
+		if (this.#intercepted({
+			kind: `toggle`,
+			keys: [node.item.key],
+			source: `keyboard`
+		})) return;
 		const prev = new Set(this._selectedNodes);
 		if (this._selectedNodes.has(node)) {
 			this._selectedNodes.delete(node);
@@ -3094,10 +3161,23 @@ let TreeBaseElement = class TreeBaseElement extends LitElement {
 		}
 		this.#dispatchSelect(prev);
 	}
-	_handleCheckboxClick(event, node, _depth) {
+	_handleCheckboxClick(event, node, _depth, source = `pointer`) {
 		event.stopPropagation();
 		const prev = new Set(this._selectedNodes);
 		const allSelected = this.#allSelectableDescendantsSelected(node);
+		const affected = [];
+		const collect = (n) => {
+			if (this.#canSelect(n)) affected.push(n.item.key);
+			n.children?.forEach(collect);
+		};
+		collect(node);
+		if (this.#intercepted({
+			kind: `toggle`,
+			keys: affected,
+			descendants: true,
+			checked: !allSelected,
+			source
+		})) return;
 		this.#applyCheckedToggle(node, !allSelected);
 		if (this.selectedNode === void 0 || !this._selectedNodes.has(this.selectedNode)) this.selectedNode = [...this._selectedNodes].at(-1);
 		this.#dispatchSelect(prev);
@@ -3164,6 +3244,12 @@ let TreeBaseElement = class TreeBaseElement extends LitElement {
 		if (anchorIdx < 0) return;
 		const from = Math.min(anchorIdx, toIdx);
 		const to = Math.max(anchorIdx, toIdx);
+		const targetNode = nodes[toIdx]?.node;
+		if (targetNode && this.#intercepted({
+			kind: `extend`,
+			...this.#rangeIntent(targetNode),
+			source: `keyboard`
+		})) return;
 		if (this.interactionMode === `vscode`) {
 			if (!this.#anchor.selectionSnapshot) this.#anchor = {
 				...this.#anchor,
@@ -3371,7 +3457,7 @@ let TreeBaseElement = class TreeBaseElement extends LitElement {
 	}
 	/** Move the cursor to `nextIdx`, applying the interaction mode's selection side effects. */
 	#navigateToIndex(nodes, currentIdx, nextIdx, shiftKey) {
-		if (this.interactionMode === `implicit`) this.select(nodes[nextIdx].node);
+		if (this.interactionMode === `implicit`) this.#requestReplace(nodes[nextIdx].node, `keyboard`, false);
 		this.#setFocusedIndex(nextIdx);
 		if (shiftKey && (this.interactionMode === `standard` || this.interactionMode === `vscode`)) this.#extendRangeSelection(nodes, currentIdx, nextIdx);
 		else if (this.interactionMode === `vscode`) this.#anchor = void 0;
@@ -3826,6 +3912,22 @@ let TreeListElement = class TreeListElement extends TreeBaseElement {
 	constructor(..._args) {
 		super(..._args);
 		this.alignCheckboxes = false;
+		this._partialKeys = /* @__PURE__ */ new Set();
+	}
+	/**
+	* Nodes shown as *partially* selected (a part of the resource is selected):
+	* `data-partial`, an indeterminate checkbox in `checked` mode, and an
+	* accessible description otherwise. Independent of the selection — a key in
+	* both counts as selected. In `checked` mode it combines with the state
+	* derived from loaded descendants: a node is indeterminate if either says so.
+	* Replace-on-set.
+	*/
+	get partialKeys() {
+		return this._partialKeys;
+	}
+	set partialKeys(keys) {
+		const next = new Set(keys);
+		if (!sameKeySet(next, this._partialKeys)) this._partialKeys = next;
 	}
 	/** Checkbox tri-states for the whole loaded tree, rebuilt only when the structure or selection changes. */
 	#checkboxCache;
@@ -3865,11 +3967,15 @@ let TreeListElement = class TreeListElement extends TreeBaseElement {
     `;
 		if (this.interactionMode === `checked`) {
 			if (node.item.selectable === false) return this.alignCheckboxes ? html`<span class="tree-checkbox-spacer" aria-hidden="true"></span>${caretAndLabel}` : caretAndLabel;
-			const state = this.#checkboxCache?.states.get(node.item.key) ?? `unchecked`;
+			const derived = this.#checkboxCache?.states.get(node.item.key) ?? `unchecked`;
+			const state = derived === `unchecked` && this.#isPartial(node) ? `indeterminate` : derived;
 			return html`${this.#renderCheckbox(node, depth, state)}${caretAndLabel}`;
 		}
 		return caretAndLabel;
 	}
+	#isPartial(node) {
+		return isPartialKey(node.item.key, this._partialKeys, this._isSelected(node));
+	}
 	#renderCheckbox(node, depth, state) {
 		const onClick = (e) => this._handleCheckboxClick(e, node, depth);
 		if (this.checkboxRenderer) return html`
@@ -3895,6 +4001,7 @@ let TreeListElement = class TreeListElement extends TreeBaseElement {
 	}
 	_renderNode(node, depth) {
 		const selected = this._isSelected(node);
+		const partial = this.#isPartial(node);
 		const tickled = this._isFocused(node);
 		const isBranch = node.item.isLeaf !== true;
 		const isExpanded = this._isExpanded(node, depth);
@@ -3904,10 +4011,12 @@ let TreeListElement = class TreeListElement extends TreeBaseElement {
 		const dnd = this._dndRowState(node);
 		return html`
       <li
-        class="item ${selected ? `selected` : ``} ${tickled ? `tickled` : ``} ${isBranch ? `branch` : `leaf`} ${hasIconAtDepth ? `has-icon-at-depth` : ``} ${isLeaving ? `leaving` : ``} ${dnd.dragging ? `dragging` : ``} ${dnd.dropTarget && dnd.dropPosition === `inside` ? `drop-into` : ``}"
+        class="item ${selected ? `selected` : ``} ${partial ? `partial` : ``} ${tickled ? `tickled` : ``} ${isBranch ? `branch` : `leaf`} ${hasIconAtDepth ? `has-icon-at-depth` : ``} ${isLeaving ? `leaving` : ``} ${dnd.dragging ? `dragging` : ``} ${dnd.dropTarget && dnd.dropPosition === `inside` ? `drop-into` : ``}"
         data-key=${node.item.key}
         role="treeitem"
         aria-selected=${selected}
+        aria-description=${partial && this.interactionMode !== `checked` ? PARTIAL_DESCRIPTION : nothing}
+        ?data-partial=${partial}
         aria-expanded=${isBranch ? isExpanded : nothing}
         aria-hidden=${isLeaving ? `true` : nothing}
         aria-level=${depth + 1}
@@ -3955,6 +4064,12 @@ let TreeListElement = class TreeListElement extends TreeBaseElement {
         transition: transform var(--transition, 0.15s ease-out);
       }
 
+      .item.partial:not(.selected) {
+        background: var(--item-bg-partial, color-mix(in srgb, var(--item-bg-selected, var(--accent)) 35%, transparent));
+        outline: 1px dashed var(--item-border-partial, var(--border));
+        outline-offset: -1px;
+      }
+
       .item.selected .caret-icon {
         color: var(--accent-text);
       }
@@ -4032,6 +4147,7 @@ __decorate([property({
 	reflect: true,
 	attribute: `align-checkboxes`
 })], TreeListElement.prototype, "alignCheckboxes", void 0);
+__decorate([state()], TreeListElement.prototype, "_partialKeys", void 0);
 TreeListElement = __decorate([safeCustomElement(`ixfx-tree-list`)], TreeListElement);
 //#endregion
 //#region src/tree/tree-controller.ts

package/dist/tree.d.ts

@@ -1,4 +1,4 @@
 import { A as TreeTickleDetail, M as TreeDataModel, N as TreeDataModelOptions, O as TreeSelectDetail, T as TreeRevealMode, _ as TreeDropTarget, b as TreeItemClickDetail, c as TreeDragContext, d as TreeDragStartEvent, g as TreeDropPosition, h as TreeDropEvent, i as TreeCollapseEvent, j as TreeTickleEvent, k as TreeSelectEvent, l as TreeDragEndEvent, m as TreeDropDetail, n as TreeActivateEvent, o as TreeComponentEventMap, p as TreeDropContext, r as TreeCollapseDetail, s as TreeDndMode, t as TreeActivateDetail, u as TreeDragOverEvent, v as TreeExpandDetail, w as TreeNavigateOptions, x as TreeItemClickEvent, y as TreeExpandEvent } from "./tree-component-DgfkxmVY.js";
 import { a as TreeItem, n as TreeExclusivity, o as TreeNode, r as TreeFilterPredicate, s as TreeSelectionFilter, t as LoadChildrenCallback } from "./types-Jky6oNAp.js";
-import { a as TreeDropVisibleRow, c as TreeListElement, d as TreeBaseElement, f as TreeBaseElementEventMap, h as TreeConfig, i as TreeDropRowInfo, l as TreeCheckboxState, m as TreeListViewState, n as TreeDropControllerConfig, o as TreeController, p as TreeVirtualize, r as TreeDropResolvedDrag, s as TreeControllerOptions, t as TreeDropController, u as TreeAnimation } from "./index-vdbbGE7N.js";
+import { a as TreeDropVisibleRow, c as TreeListElement, d as TreeBaseElement, f as TreeBaseElementEventMap, h as TreeConfig, i as TreeDropRowInfo, l as TreeCheckboxState, m as TreeListViewState, n as TreeDropControllerConfig, o as TreeController, p as TreeVirtualize, r as TreeDropResolvedDrag, s as TreeControllerOptions, t as TreeDropController, u as TreeAnimation } from "./index-VAs9akt4.js";
 export { type LoadChildrenCallback, type TreeActivateDetail, type TreeActivateEvent, TreeAnimation, TreeBaseElement, TreeBaseElementEventMap, type TreeCheckboxState, type TreeCollapseDetail, type TreeCollapseEvent, type TreeComponentEventMap, TreeConfig, TreeController, TreeControllerOptions, TreeDataModel, type TreeDataModelOptions, type TreeDndMode, type TreeDragContext, type TreeDragEndEvent, type TreeDragOverEvent, type TreeDragStartEvent, type TreeDropContext, TreeDropController, TreeDropControllerConfig, type TreeDropDetail, type TreeDropEvent, type TreeDropPosition, TreeDropResolvedDrag, TreeDropRowInfo, type TreeDropTarget, TreeDropVisibleRow, type TreeExclusivity, type TreeExpandDetail, type TreeExpandEvent, type TreeFilterPredicate, type TreeItem, type TreeItemClickDetail, type TreeItemClickEvent, TreeListElement, type TreeListViewState, type TreeNavigateOptions, type TreeNode, type TreeRevealMode, type TreeSelectDetail, type TreeSelectEvent, type TreeSelectionFilter, type TreeTickleDetail, type TreeTickleEvent, TreeVirtualize };

package/dist/tree.js

@@ -1,2 +1,2 @@
-import { a as TreeDataModel, i as TreeDropController, n as TreeListElement, r as TreeBaseElement, t as TreeController } from "./tree-C_H1COTf.js";
+import { a as TreeDataModel, i as TreeDropController, n as TreeListElement, r as TreeBaseElement, t as TreeController } from "./tree-BaXYyt5U.js";
 export { TreeBaseElement, TreeController, TreeDataModel, TreeDropController, TreeListElement };

package/dist/{vertical-list-od4050Bo.d.ts → vertical-list-DtHX26JO.d.ts}

@@ -2,8 +2,8 @@ import { L as ListDragPreviewRenderer, R as ListDragPreviewSourceResolver, V as
 import { a as ViewStateBase, t as GetViewStateOptions } from "./types-LU1u0CB8.js";
 import "./index-9ttcdwlL.js";
 import { n as ListViewportChangeEvent } from "./list-viewport-types-BRZsLcvp.js";
-import { i as ListInteractionMode, m as ListSelectionMode, r as ListElementEventMap } from "./list-selection-types-hj9Njei3.js";
-import { S as ListSearchController } from "./index-BjRoPrwj.js";
+import { h as ListSelectionMode, i as ListInteractionMode, r as ListElementEventMap } from "./list-selection-types-Dnamh2Lu.js";
+import { S as ListSearchController } from "./index-Bm9a9S3_.js";
 import "./editable-label-rzXkjf1H.js";
 import { LitElement, PropertyValues } from "lit";
 import { CommandId, CommandRegistry } from "@clinth/ui-commands";

package/dist/{vertical-list-qMRIxZIT.js → vertical-list-o5hfqH87.js}

@@ -1,13 +1,14 @@
 import { t as TickledController } from "./tickled-controller-D-HZymaZ.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 keysOfElements, i as ListSearchController, n as listSearchStyles, o as registerListSearchCommands, r as LIST_SEARCH_MODES, u as keyForElement } from "./incr-search-2YaxUUA9.js";
+import { c as createElementListSearchAdapter, d as keysOfElements, i as ListSearchController, n as listSearchStyles, o as registerListSearchCommands, r as LIST_SEARCH_MODES, u as keyForElement } from "./incr-search-Dc6gYpJG.js";
 import { i as animateListItemOut, r as animateListItemIn, t as ListNativeDragController } from "./list-native-drag-controller-CcXoS0YX.js";
-import { i as ListDragSelectController, n as gestureOf, t as ListSelectionController } from "./list-selection-controller-CJDdjH7E.js";
+import { i as ListDragSelectController, n as gestureOf, t as ListSelectionController } from "./list-selection-controller-D4iIrvJH.js";
 import { l as keysToArray } from "./pending-BGidHppL.js";
-import { a as isPartialKey, i as applyPartialAttributes, n as appearanceColor, o as sameKeySet, t as appearanceAbsent } from "./item-appearance-Bl6rMIID.js";
+import { i as sameKeySet, n as applyPartialAttributes, r as isPartialKey } from "./partial-keys-Ck6CiprB.js";
 import { t as scrollFadeStyles } from "./scroll-fade-Xx28D7mH.js";
 import { a as restoreElementScroll, n as anchorFromRow, o as scrollToOffset, r as captureElementScroll, t as ViewStateController } from "./view-state-controller-BdyXWUUM.js";
+import { n as appearanceColor, t as appearanceAbsent } from "./item-appearance-BjcMyauw.js";
 import "./editable-label.js";
 import { LitElement, css, html, render } from "lit";
 import { property } from "lit/decorators.js";

package/dist/vertical-list.d.ts

@@ -1,5 +1,5 @@
 import { B as ListNativeDragStartDetail, F as ListDragPreview, I as ListDragPreviewContext, L as ListDragPreviewRenderer, P as ListDragEntry, V as ListNativeDragStartEvent, z as ListDragSource } from "./tree-component-DgfkxmVY.js";
 import { n as ListViewportChangeEvent, t as ListViewportChangeDetail } from "./list-viewport-types-BRZsLcvp.js";
-import { a as ListItemClickDetail, c as ListSelectEvent, g as ListTickleEvent, h as ListTickleDetail, i as ListInteractionMode, m as ListSelectionMode, n as ListActivateEvent, o as ListItemClickEvent, r as ListElementEventMap, s as ListSelectDetail, t as ListActivateDetail } from "./list-selection-types-hj9Njei3.js";
-import { a as VerticalListViewState, c as ListDragLeaveDetail, d as ListDropDetail, f as ListDropEvent, g as ListEditCommitEvent, h as ListEditCommitDetail, i as VerticalListElementEventMap, l as ListDragLeaveEvent, m as ListEditCancelEvent, n as CustomCheckboxOptions, o as ListContextMenuDetail, p as ListEditCancelDetail, r as VerticalListElement, s as ListContextMenuEvent, t as AddItemOptions, u as ListDragOverEvent } from "./vertical-list-od4050Bo.js";
+import { _ as ListTickleEvent, a as ListItemClickDetail, c as ListSelectDetail, g as ListTickleDetail, h as ListSelectionMode, i as ListInteractionMode, l as ListSelectEvent, n as ListActivateEvent, o as ListItemClickEvent, r as ListElementEventMap, t as ListActivateDetail } from "./list-selection-types-Dnamh2Lu.js";
+import { a as VerticalListViewState, c as ListDragLeaveDetail, d as ListDropDetail, f as ListDropEvent, g as ListEditCommitEvent, h as ListEditCommitDetail, i as VerticalListElementEventMap, l as ListDragLeaveEvent, m as ListEditCancelEvent, n as CustomCheckboxOptions, o as ListContextMenuDetail, p as ListEditCancelDetail, r as VerticalListElement, s as ListContextMenuEvent, t as AddItemOptions, u as ListDragOverEvent } from "./vertical-list-DtHX26JO.js";
 export { AddItemOptions, CustomCheckboxOptions, type ListActivateDetail, type ListActivateEvent, type ListContextMenuDetail, type ListContextMenuEvent, type ListDragEntry, type ListDragLeaveDetail, type ListDragLeaveEvent, type ListDragOverEvent, type ListDragPreview, type ListDragPreviewContext, type ListDragPreviewRenderer, type ListDragSource, type ListDropDetail, type ListDropEvent, type ListEditCancelDetail, type ListEditCancelEvent, type ListEditCommitDetail, type ListEditCommitEvent, type ListElementEventMap, type ListInteractionMode, type ListItemClickDetail, type ListItemClickEvent, type ListNativeDragStartDetail, type ListNativeDragStartEvent, type ListSelectDetail, type ListSelectEvent, type ListSelectionMode, type ListTickleDetail, type ListTickleEvent, type ListViewportChangeDetail, type ListViewportChangeEvent, VerticalListElement, VerticalListElementEventMap, type VerticalListViewState };

package/dist/vertical-list.js

@@ -1,2 +1,2 @@
-import { t as VerticalListElement } from "./vertical-list-qMRIxZIT.js";
+import { t as VerticalListElement } from "./vertical-list-o5hfqH87.js";
 export { VerticalListElement };

package/docs-user/README.md

@@ -67,6 +67,12 @@ This directory contains documentation for each component and some architectural
 
 ## Architectural Overviews
 
+- [infra-handle.md](infra-handle.md)
+- [infra-incremental.md](infra-incremental.md)
+- [infra-theming.md](infra-theming.md)
 - [infra-tickled.md](infra-tickled.md)
+- [infra-view-state.md](infra-view-state.md)
+- [list-state.md](list-state.md)
 - [user-catalog.md](user-catalog.md)
+- [user-selection-intents.md](user-selection-intents.md)
 - [user-theming.md](user-theming.md)

package/docs-user/bottom-drawer.md

@@ -146,5 +146,5 @@ import type { BottomDrawerElement, BottomDrawerResizeDetail, BottomDrawerCloseEv
 
 ## See also
 
-- [`ixfx-titlebar`](../titlebar/README.md) — Header component used by the drawer
-- [`ixfx-icon`](../icons/README.md) — Icon component for header icons
+- [`ixfx-titlebar`](./titlebar.md) — Header component used by the drawer
+- [`ixfx-icon`](./icons.md) — Icon component for header icons

package/docs-user/crumbs.md

@@ -63,7 +63,7 @@ nav.model = {
 ### View state
 
 The current location as plain JSON, for the host to persist (see
-[docs/infra-view-state.md](../../docs/infra-view-state.md)):
+[docs/infra-view-state.md](./infra-view-state.md)):
 
 ```ts
 { v: 1, kind: 'crumb-navigation', path: ['dev', 'workspace'] } // keys below the root; [] = root

package/docs-user/data-grid.md

@@ -52,7 +52,7 @@ type DataGridColumn = {
 };
 ```
 
-* `width` defaults to `150`. Drag the handle between headers to resize; double-click handle to auto-size to content. Drag the grip handle (shared `dimpled` spot handle — see [docs/infra-handle.md](../../docs/infra-handle.md)) to reorder.
+* `width` defaults to `150`. Drag the handle between headers to resize; double-click handle to auto-size to content. Drag the grip handle (shared `dimpled` spot handle — see [docs/infra-handle.md](./infra-handle.md)) to reorder.
 * `align` controls cell content justification. Numeric columns should use `right` (or `center` for Age) – cells use `font-variant-numeric: tabular-nums` so decimal points align when paired with a fixed formatter.
 * `renderer` overrides default `String(value)` display. Use `html` from `lit`.
 
@@ -227,7 +227,7 @@ The setter fires `datagrid-select` `{ selectedKeys, previous }` (and `list-selec
 only when the selection actually changes. A cancelable `list-select-intent` fires
 before every selection gesture, and `partialKeys` marks partially selected rows
 (`data-partial`, indeterminate checkbox in `checked` mode).
-See [Selection intents, partial rows, unloaded keys](../../docs/infra-selection-intents.md): `list-select-intent`, `partialKeys`, and keys that arrive later.
+See [Selection intents, partial rows, unloaded keys](./user-selection-intents.md): `list-select-intent`, `partialKeys`, and keys that arrive later.
 
 Selected rows that leave `rows` are deselected silently, and reselected if they
 return. See [View state](#view-state). In `checked` mode the row checkbox toggles
@@ -527,7 +527,7 @@ Matched characters in the search column are highlighted under the
 against a custom `rowSearchText` aren't highlighted, since they can't be
 mapped onto a cell, and neither are cells drawn by a column `renderer`. `filterPredicate`
 (a `(row) => boolean` property) filters rows directly. `search-modes` limits the
-offered modes. Full model: [`docs/infra-incremental.md`](../../docs/infra-incremental.md).
+offered modes. Full model: [`docs/infra-incremental.md`](./infra-incremental.md).
 
 ---
 

package/docs-user/detail-list.md

@@ -464,7 +464,7 @@ With wrapping:
 
 ## Incremental search
 
-A built-in type-ahead popover with **navigate** / **select** / **filter** modes — see [`docs/infra-incremental.md`](../../docs/infra-incremental.md). No default shortcut; open it with `list.registry.invoke('list.search.filter')` (or `.navigate` / `.select`). A filter change re-runs the column geometry automatically.
+A built-in type-ahead popover with **navigate** / **select** / **filter** modes — see [`docs/infra-incremental.md`](./infra-incremental.md). No default shortcut; open it with `list.registry.invoke('list.search.filter')` (or `.navigate` / `.select`). A filter change re-runs the column geometry automatically.
 
 Search matches against `data-search-label` (or `textContent` as fallback). Use `data-search-label` to match against a different string than what's displayed:
 
@@ -489,7 +489,7 @@ Matched characters are highlighted with the `detail-list-search` highlight key.
 
 ## Grouping
 
-Group rows under collapsible headers, following `ixfx-data-grid` (see its [Grouping](../data-grid/README.md#grouping) section).
+Group rows under collapsible headers, following `ixfx-data-grid` (see its [Grouping](./data-grid.md#grouping) section).
 
 ```ts
 list.groupBy = 'kind';                                  // object items: property · declarative <li>: data-kind
@@ -607,7 +607,7 @@ replaced) falls back to a full rebuild.
 
 Snapshot and restore *how* the list is showing its data, separately from the
 data, as plain JSON keyed by item / group key. See
-[`docs/infra-view-state.md`](../../docs/infra-view-state.md) for the shared
+[`docs/infra-view-state.md`](./infra-view-state.md) for the shared
 contract.
 
 ```ts

package/docs-user/dock.md

@@ -98,7 +98,7 @@ wrapped in a new split. `Escape` or `pointercancel` cancels with no mutation.
 
 Where a parent gutter line meets a nested split's gutter (T and + crossings
 of three or four panels), the host renders a small hover-revealed handle — the
-shared `dimpled` spot handle ([docs/infra-handle.md](../../docs/infra-handle.md)),
+shared `dimpled` spot handle ([docs/infra-handle.md](./infra-handle.md)),
 `var(--accent)` tinted. Dragging it
 starts the vertical and horizontal gutter drags at once via
 `ixfx-split-layout`'s `beginGutterDrag()`, resizing all adjacent panels with
@@ -434,7 +434,7 @@ the target host (adopt / focus it yourself instead).
 ## View state
 
 The dock implements the shared view-state API
-([docs/infra-view-state.md](../../docs/infra-view-state.md)). The component
+([docs/infra-view-state.md](./infra-view-state.md)). The component
 never persists anything; the host does, e.g. with `bindViewState()`:
 
 ```ts
@@ -498,7 +498,7 @@ The dock layout is close to structure, so the saved state *is* the tree
 | `--dock-leaf-body-padding` | padding inside leaf body | `var(--space-s)` |
 
 The junction resize handle is the shared handle primitive — theme it with
-`--ixfx-handle-*` (see [docs/infra-handle.md](../../docs/infra-handle.md)).
+`--ixfx-handle-*` (see [docs/infra-handle.md](./infra-handle.md)).
 
 Splitter styling delegates to `ixfx-split-layout` (`--split-*`); solo panel
 chrome delegates to `ixfx-titlebar`, and the leaf body is the docked panel

package/docs-user/flat-list.md

@@ -1,8 +1,8 @@
 # `ixfx-flat-list`
 
-Navigate a tree inside one flat list. Each level shows its branches and leaves together; entering a branch replaces the list with that branch's children. An [`ixfx-crumb-navigation`](../crumbs/README.md) above the scroll area shows the path and jumps to any ancestor.
+Navigate a tree inside one flat list. Each level shows its branches and leaves together; entering a branch replaces the list with that branch's children. An [`ixfx-crumb-navigation`](./crumbs.md) above the scroll area shows the path and jumps to any ancestor.
 
-It wraps [`ixfx-vertical-list`](../vertical-list/README.md), so selection modes, interaction modes, keyboard shortcuts, incremental search, drag-out and drag-select behave as they do there. The data model is the same `TreeNode` / `TreeDataModel` that `ixfx-crumb-navigation` and `ixfx-tree-list` use.
+It wraps [`ixfx-vertical-list`](./vertical-list.md), so selection modes, interaction modes, keyboard shortcuts, incremental search, drag-out and drag-select behave as they do there. The data model is the same `TreeNode` / `TreeDataModel` that `ixfx-crumb-navigation` and `ixfx-tree-list` use.
 
 ```html
 <ixfx-flat-list style="height: 280px"></ixfx-flat-list>
@@ -32,7 +32,7 @@ list.addEventListener('flat-list-activate', ({ detail }) => open(detail.node));
 | `canDrop` | `(node, dataTransfer) => boolean` | | Refuse a drag up front. `node` is the row, or the current level's node over empty space |
 | `validateEdit` | `(value, node) => boolean` | | Opts in to [rename](#rename) and validates the typed text |
 | `markedKey` / `marked-key` | `string` | | Keep this node's row visibly marked across level changes. Not a selection |
-| `virtualize`, `itemHeight` / `item-height` | `boolean`, `number` | `false`, `0` | Render only visible rows; needs a fixed row height. See [virtualisation](../vertical-list/README.md#virtualisation) |
+| `virtualize`, `itemHeight` / `item-height` | `boolean`, `number` | `false`, `0` | Render only visible rows; needs a fixed row height. See [virtualisation](./vertical-list.md#virtualisation) |
 | `withUp` / `with-up` | `boolean` | `true` | Up button in the crumb bar |
 | `hideRoot` / `hide-root` | `boolean` | `false` | Hide the root crumb |
 | `emptyText` / `empty-text` | `string` | `'Empty'` | Shown for a level with no children |
@@ -74,14 +74,14 @@ The inner list's `list-*` events also cross the shadow boundary, with row elemen
 | Click the chevron, double-click, `Enter`, `Arrow Right` on a branch | Enter it |
 | `Arrow Left`, `Backspace` | Go up. The cursor lands on the branch you came from |
 | Crumb, caret menu, Up button | Jump to that node. Choosing a leaf from a caret menu shows its level and selects it |
-| Everything else | See [vertical-list keyboard navigation](../vertical-list/README.md#keyboard-navigation) |
+| Everything else | See [vertical-list keyboard navigation](./vertical-list.md#keyboard-navigation) |
 
 Selection is cleared on every level change. Arrow Left and Backspace are ignored while the search field is focused.
 
 ## View state
 
 The level shown and its selection, cursor and scroll, as plain JSON for the
-host to persist (see [docs/infra-view-state.md](../../docs/infra-view-state.md)):
+host to persist (see [docs/infra-view-state.md](./infra-view-state.md)):
 
 ```ts
 { v: 1, kind: 'flat-list', path: ['docs', 'work'], selected: ['a.txt'], focus: 'a.txt', scroll: { top: 0 } }
@@ -106,7 +106,7 @@ as its rows arrive (see the vertical-list README).
 
 ## Drops
 
-With `items-droppable`, a drag over a row, or over empty space, is accepted unless `canDrop` refuses it. A drop fires `flat-list-drop` with that row's node, or the **current level's node** for empty space. Dropping on a branch row reports it and does **not** enter it. Native OS drags work: `dataTransfer` carries `files`, `text/uri-list` and any custom MIME type the source wrote. The row under the drag gets the vertical-list [drop highlight](../vertical-list/README.md#drop-targets).
+With `items-droppable`, a drag over a row, or over empty space, is accepted unless `canDrop` refuses it. A drop fires `flat-list-drop` with that row's node, or the **current level's node** for empty space. Dropping on a branch row reports it and does **not** enter it. Native OS drags work: `dataTransfer` carries `files`, `text/uri-list` and any custom MIME type the source wrote. The row under the drag gets the vertical-list [drop highlight](./vertical-list.md#drop-targets).
 
 ## Context menu
 
@@ -126,7 +126,7 @@ list.beginEdit('set:2');   // e.g. from your own context menu
 
 ## Incremental search
 
-Navigate / select / filter search works over the current level, as in [`ixfx-vertical-list`](../vertical-list/README.md#incremental-search) — see [`docs/infra-incremental.md`](../../docs/infra-incremental.md). `search-modes` limits the modes. There is no default shortcut: bind a key or button to `dispatch('list.search.filter')` (or `.navigate` / `.select`). The highlight rule is built in, so no page-level `::highlight()` rule is needed. The search is closed when the level changes.
+Navigate / select / filter search works over the current level, as in [`ixfx-vertical-list`](./vertical-list.md#incremental-search) — see [`docs/infra-incremental.md`](./infra-incremental.md). `search-modes` limits the modes. There is no default shortcut: bind a key or button to `dispatch('list.search.filter')` (or `.navigate` / `.select`). The highlight rule is built in, so no page-level `::highlight()` rule is needed. The search is closed when the level changes.
 
 ## CSS variables