@ixfx/components 0.16.1 → 0.16.3

package/dist/{tree-DAlgvaHB.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-CgbL-OlS.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-D-lZNlHa.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-DAlgvaHB.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-SAx56U-l.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 { S as ListSearchController } from "./index-CUErGhCg.js";
-import { i as ListInteractionMode, l as ListSelectionMode, r as ListElementEventMap } from "./list-selection-types-PjKdhF-a.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";
@@ -262,6 +262,15 @@ declare class VerticalListElement extends LitElement {
   selectAll(): void;
   /** The selection as stable `data-key` / `data-value` strings. */
   get selectedKeys(): ReadonlySet<string>;
+  /**
+   * Rows shown as *partially* selected (a part of the resource is selected):
+   * `data-partial`, an indeterminate checkbox in `checked` mode, and an
+   * accessible description. Independent of `selectedKeys` — a key in both
+   * counts as selected. Replace-on-set; keys without a row are kept for when
+   * the row appears.
+   */
+  get partialKeys(): ReadonlySet<string>;
+  set partialKeys(keys: Iterable<string>);
   /** The key of the item under the cursor, or `undefined`. */
   get tickledKey(): string | undefined;
   /** Replace the selection with the items carrying these keys (unknown keys ignored). */

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

@@ -1,12 +1,13 @@
 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, i as ListSearchController, n as listSearchStyles, o as registerListSearchCommands, r as LIST_SEARCH_MODES, u as keyForElement } from "./incr-search-CgbL-OlS.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 { r as ListDragSelectController, t as ListSelectionController } from "./list-selection-controller-5L0Nj9tR.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 restoreElementScroll, n as anchorFromRow, o as scrollToOffset, r as captureElementScroll, t as ViewStateController } from "./view-state-controller-BdyXWUUM.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";
@@ -153,13 +154,15 @@ let VerticalListElement = class VerticalListElement extends LitElement {
 				interactionMode: this.interactionMode
 			}),
 			getKey: keyForElement,
+			onIntent: (intent) => this._dispatchCancelable(`list-select-intent`, intent) === false,
 			onChange: (selected, previous) => {
 				this._syncItemStates();
 				this.#viewState.notify();
 				this._dispatch(`list-select`, {
 					selected,
 					previous,
-					selectedKeys: this.selection.selectedKeys
+					selectedKeys: this.selection.selectedKeys,
+					previousKeys: keysOfElements(previous)
 				});
 			}
 		});
@@ -245,6 +248,7 @@ let VerticalListElement = class VerticalListElement extends LitElement {
 			getAllItems: () => this.#selectionOrder(),
 			observeContainer: false
 		}) });
+		this.#partialKeys = /* @__PURE__ */ new Set();
 		this.#onScroll = () => {
 			if (!this.#viewState.pendingScroll) this.#viewState.notify();
 			if (this.#scrollRaf !== 0) return;
@@ -275,7 +279,7 @@ let VerticalListElement = class VerticalListElement extends LitElement {
 			if ((e.ctrlKey || e.metaKey) && e.key === `a`) {
 				if (this.selection.canSelectAll()) {
 					e.preventDefault();
-					this.selection.selectAll();
+					this.selection.selectAll(`keyboard`);
 				}
 				return;
 			}
@@ -284,18 +288,18 @@ let VerticalListElement = class VerticalListElement extends LitElement {
 					e.preventDefault();
 					this.tickled.handleKeyboardNavigation(`next`);
 					this.#revealCursor();
-					if (e.shiftKey && this.interactionMode === `vscode`) {
+					if (e.shiftKey && (this.interactionMode === `vscode` || this.interactionMode === `manual`)) {
 						const cur = this.tickled.tickledId;
-						if (cur) this.selection.rangeTo(cur);
+						if (cur) this.selection.handleExtend(cur);
 					}
 					break;
 				case `ArrowUp`:
 					e.preventDefault();
 					this.tickled.handleKeyboardNavigation(`previous`);
 					this.#revealCursor();
-					if (e.shiftKey && this.interactionMode === `vscode`) {
+					if (e.shiftKey && (this.interactionMode === `vscode` || this.interactionMode === `manual`)) {
 						const cur = this.tickled.tickledId;
-						if (cur) this.selection.rangeTo(cur);
+						if (cur) this.selection.handleExtend(cur);
 					}
 					break;
 				case `Home`:
@@ -321,7 +325,7 @@ let VerticalListElement = class VerticalListElement extends LitElement {
 					if (id) {
 						e.preventDefault();
 						this._dispatch(`list-item-click`, { item: id });
-						this._activateItem(id);
+						this._activateItem(id, `keyboard`);
 					}
 					break;
 				}
@@ -333,7 +337,7 @@ let VerticalListElement = class VerticalListElement extends LitElement {
 					}
 					break;
 				}
-				case `Escape`: this.selection.clear();
+				case `Escape`: this.selection.handleClear(`keyboard`);
 			}
 		};
 		this._onClick = (e) => {
@@ -342,7 +346,7 @@ let VerticalListElement = class VerticalListElement extends LitElement {
 			const item = this._findListItem(e.composedPath());
 			if (!item) return;
 			this._dispatch(`list-item-click`, { item });
-			this.selection.handleClick(item, e);
+			this.selection.handleClick(item, gestureOf(e));
 		};
 		this._onDblClick = (e) => {
 			if (this.#isEditEvent(e)) return;
@@ -773,6 +777,23 @@ let VerticalListElement = class VerticalListElement extends LitElement {
 	get selectedKeys() {
 		return this.selection.selectedKeys;
 	}
+	#partialKeys;
+	/**
+	* Rows shown as *partially* selected (a part of the resource is selected):
+	* `data-partial`, an indeterminate checkbox in `checked` mode, and an
+	* accessible description. Independent of `selectedKeys` — a key in both
+	* counts as selected. Replace-on-set; keys without a row are kept for when
+	* the row appears.
+	*/
+	get partialKeys() {
+		return this.#partialKeys;
+	}
+	set partialKeys(keys) {
+		const next = new Set(keys);
+		if (sameKeySet(next, this.#partialKeys)) return;
+		this.#partialKeys = next;
+		this._syncItemStates();
+	}
 	/** The key of the item under the cursor, or `undefined`. */
 	get tickledKey() {
 		const id = this.tickled.tickledId;
@@ -1468,6 +1489,7 @@ let VerticalListElement = class VerticalListElement extends LitElement {
 			const item = this.#customWrappers.get(el) ?? el;
 			el.toggleAttribute(`data-tickled`, this.tickled.isTickled(el));
 			el.toggleAttribute(`data-selected`, this.selection.selected.has(el));
+			applyPartialAttributes(el, isPartialKey(keyForElement(el), this.#partialKeys, this.selection.selected.has(el)));
 			if (el.hasAttribute(`data-aria-role`)) el.setAttribute(`aria-selected`, String(this.selection.selected.has(el)));
 			if (this.interactionMode === `checked`) el.toggleAttribute(`data-checked`, !item.hasAttribute(`not-checked`) && this.selection.selected.has(el));
 			else el.removeAttribute(`data-checked`);
@@ -1532,16 +1554,22 @@ let VerticalListElement = class VerticalListElement extends LitElement {
 				el.prepend(cb);
 			}
 			const checked = this.selection.selected.has(el);
+			const partial = isPartialKey(keyForElement(el), this.#partialKeys, checked);
 			if (wantsCustom) {
-				cb.setAttribute(`aria-checked`, String(checked));
+				cb.setAttribute(`aria-checked`, partial ? `mixed` : String(checked));
 				cb.toggleAttribute(`data-checked`, checked);
+				cb.toggleAttribute(`data-partial`, partial);
 				if (this.checkboxRenderer) {
 					const renderer = typeof this.checkboxRenderer === `function` ? this.checkboxRenderer : this.checkboxRenderer.renderer;
 					render(renderer(checked), cb);
 				}
 			} else {
 				const input = cb.querySelector(`input.ixfx-list-checkbox`);
-				if (input) input.checked = checked;
+				if (input) {
+					input.checked = checked;
+					input.indeterminate = partial;
+				}
+				cb.setAttribute(`aria-checked`, partial ? `mixed` : String(checked));
 			}
 		}
 	}
@@ -1560,7 +1588,7 @@ let VerticalListElement = class VerticalListElement extends LitElement {
 		cell.setAttribute(`part`, `checkbox`);
 		cell.addEventListener(`click`, (e) => {
 			e.stopPropagation();
-			this.selection.toggle(el);
+			this.selection.handleCheckbox(el);
 		});
 		const input = document.createElement(`input`);
 		input.type = `checkbox`;
@@ -1582,7 +1610,7 @@ let VerticalListElement = class VerticalListElement extends LitElement {
 		span.setAttribute(`part`, `checkbox`);
 		span.addEventListener(`click`, (e) => {
 			e.stopPropagation();
-			this.selection.toggle(el);
+			this.selection.handleCheckbox(el);
 		});
 		return span;
 	}
@@ -1608,13 +1636,13 @@ let VerticalListElement = class VerticalListElement extends LitElement {
 			cancelable: true
 		}));
 	}
-	_activateItem(item) {
-		if (this.interactionMode !== `manual`) this.selection.replace(item);
+	_activateItem(item, source = `pointer`) {
+		this.selection.handleReplace(item, source);
 		this._dispatch(`list-activate`, { item });
 	}
 	activateKey(key) {
 		const item = this.#itemForKey(key);
-		if (item) this._activateItem(item);
+		if (item) this._activateItem(item, `api`);
 	}
 	/** The row (or `undefined` for empty space) the last `list-drag-over` was fired for. */
 	#dragOver;
@@ -1862,6 +1890,13 @@ let VerticalListElement = class VerticalListElement extends LitElement {
       outline: 1px solid transparent;
     }
 
+    /* Partially selected: a dashed edge, lighter than a full selection. Hook: --item-bg-partial. */
+    ::slotted([data-partial]) {
+      background: var(--item-bg-partial, color-mix(in srgb, var(--item-bg-selected) 35%, transparent));
+      outline: 1px dashed var(--item-border-partial, var(--border));
+      outline-offset: -1px;
+    }
+
     ::slotted([data-selected][data-tickled]) {
       background: var(--item-bg-selected-tickled);
       outline: 2px dashed var(--surface-3);

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, d as ListTickleEvent, i as ListInteractionMode, l as ListSelectionMode, n as ListActivateEvent, o as ListItemClickEvent, r as ListElementEventMap, s as ListSelectDetail, t as ListActivateDetail, u as ListTickleDetail } from "./list-selection-types-PjKdhF-a.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-SAx56U-l.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 };