@ixfx/components 0.16.0 → 0.16.2

package/dist/{detail-list-C4pDSoI8.js → detail-list-C3XKTRmE.js}

@@ -3,14 +3,14 @@ import { t as themeFallbacks } from "./fallbacks-DQ_5OsmR.js";
 import { n as safeCustomElement, t as __decorate } from "./decorate-VRK8rslU.js";
 import "./icon-1gpwtPx8.js";
 import { t as DataController } from "./data-controller-DOlmqNKb.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-JIhwB49y.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 { a as toGroupKey, r as partitionByGroup } from "./grouping-RYPnHkrS.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-CJDdjH7E.js";
 import { a as capKeys, d as partitionKeys, l as keysToArray, o as flagsFromRecord } from "./pending-BGidHppL.js";
-import { a as restoreElementScroll, o as scrollToOffset, r as captureElementScroll, t as ViewStateController } from "./view-state-controller-BdyXWUUM.js";
+import { a as isPartialKey, i as applyPartialAttributes, n as appearanceColor, o as sameKeySet, t as appearanceAbsent } from "./item-appearance-Bl6rMIID.js";
 import { t as scrollFadeStyles } from "./scroll-fade-Xx28D7mH.js";
-import { n as appearanceColor, t as appearanceAbsent } from "./item-appearance-BjcMyauw.js";
+import { a as restoreElementScroll, o as scrollToOffset, r as captureElementScroll, t as ViewStateController } from "./view-state-controller-BdyXWUUM.js";
 import "./list-group-header.js";
 import { LitElement, css, html, nothing, render } from "lit";
 import { property, query, state } from "lit/decorators.js";
@@ -332,6 +332,7 @@ let DetailListElement = class DetailListElement extends LitElement {
 				interactionMode: this.interactionMode
 			}),
 			getKey: keyForElement,
+			onIntent: (intent) => this._dispatchCancelable(`list-select-intent`, intent) === false,
 			getGroupKey: (el) => this.#groupIndex.get(el) ?? null,
 			crossGroupSelection: () => this.crossGroupSelection,
 			getFallbackGroupKey: () => {
@@ -343,7 +344,8 @@ let DetailListElement = class DetailListElement extends LitElement {
 				this._dispatch(`list-select`, {
 					selected,
 					previous,
-					selectedKeys: this.selection.selectedKeys
+					selectedKeys: this.selection.selectedKeys,
+					previousKeys: keysOfElements(previous)
 				});
 				this.#viewState.notify();
 			}
@@ -436,6 +438,8 @@ let DetailListElement = class DetailListElement extends LitElement {
 			getLabel: (el) => el.getAttribute(`data-search-label`) ?? el.textContent?.trim() ?? ``,
 			highlightKey: SEARCH_HIGHLIGHT_KEY
 		}) });
+		this.#partialKeys = /* @__PURE__ */ new Set();
+		this.#markedPartial = /* @__PURE__ */ new Set();
 		this.#onListScroll = () => {
 			if (!this.#viewState.pendingScroll) this.#viewState.notify();
 			if (this.#viewportScrollRaf !== 0) return;
@@ -459,7 +463,7 @@ let DetailListElement = class DetailListElement extends LitElement {
 			if ((e.ctrlKey || e.metaKey) && e.key === `a`) {
 				if (this.selection.canSelectAll()) {
 					e.preventDefault();
-					this.selection.selectAll();
+					this.selection.selectAll(`keyboard`);
 				}
 				return;
 			}
@@ -468,17 +472,17 @@ let DetailListElement = class DetailListElement extends LitElement {
 				case `ArrowDown`:
 					e.preventDefault();
 					this.#navigateDown();
-					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.#navigateUp();
-					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 `ArrowRight`:
@@ -502,7 +506,7 @@ let DetailListElement = class DetailListElement extends LitElement {
 					if (id) {
 						e.preventDefault();
 						this._dispatch(`list-item-click`, { item: id });
-						this._activateItem(id);
+						this._activateItem(id, `keyboard`);
 					}
 					break;
 				}
@@ -514,7 +518,7 @@ let DetailListElement = class DetailListElement extends LitElement {
 					}
 					break;
 				}
-				case `Escape`: this.selection.clear();
+				case `Escape`: this.selection.handleClear(`keyboard`);
 			}
 		};
 		this._onClick = (e) => {
@@ -529,7 +533,7 @@ let DetailListElement = class DetailListElement extends LitElement {
 			if (!item) return;
 			this.focus();
 			this._dispatch(`list-item-click`, { item });
-			this.selection.handleClick(item, e);
+			this.selection.handleClick(item, gestureOf(e));
 		};
 		this._onDblClick = (e) => {
 			const item = this._findListItem(e.composedPath());
@@ -823,8 +827,9 @@ let DetailListElement = class DetailListElement extends LitElement {
 			});
 			return;
 		}
-		const shapeChanged = changed.has(`displayProperty`) || changed.has(`formatter`) || changed.has(`iconProperty`) || changed.has(`iconColorProperty`) || changed.has(`textColorProperty`) || changed.has(`badgeProperty`) || changed.has(`keyProperty`);
+		const shapeChanged = changed.has(`displayProperty`) || changed.has(`formatter`) || changed.has(`searchText`) || changed.has(`iconProperty`) || changed.has(`iconColorProperty`) || changed.has(`textColorProperty`) || changed.has(`badgeProperty`) || changed.has(`keyProperty`);
 		if ((changed.has(`items`) || shapeChanged) && this.provider === void 0 && this.items.length > 0) this.#rebuildFromObjects(this.items, !shapeChanged);
+		else if (shapeChanged && this.provider !== void 0 && this.#builtFromProvider.length > 0) this.#rebuildFromObjects(this.#builtFromProvider);
 		this.#syncFromProvider();
 		if (changed.has(`sort`) || changed.has(`sortBy`) || changed.has(`sortComparator`)) this.#applySort();
 		if (changed.has(`filterPredicate`)) {
@@ -860,6 +865,16 @@ let DetailListElement = class DetailListElement extends LitElement {
 		this.#recomputeGeometry();
 		this.#scheduleViewportChangeEmit();
 	}
+	/**
+	* Rebuild every object-item row, for when something the `formatter` (or
+	* `searchText`) reads has changed but the items themselves haven't —
+	* reassigning the same objects keeps their rows as they are. Assigning a new
+	* `formatter` function has the same effect.
+	*/
+	reformat() {
+		const items = this.provider === void 0 ? this.items : this.#builtFromProvider;
+		if (items.length > 0) this.#rebuildFromObjects(items);
+	}
 	addItem(item, options) {
 		let el;
 		if (typeof item === `string`) {
@@ -1223,6 +1238,8 @@ let DetailListElement = class DetailListElement extends LitElement {
 			li.appendChild(content);
 			if (textColor !== void 0) li.style.color = textColor;
 		}
+		const searchText = this.searchText?.(item, index);
+		if (searchText !== void 0) li.setAttribute(`data-search-label`, searchText);
 		if (this.keyProperty) {
 			const key = this.#propertyValue(item, this.keyProperty);
 			if (key !== void 0 && key !== null) li.setAttribute(`data-key`, String(key));
@@ -1794,7 +1811,41 @@ let DetailListElement = class DetailListElement extends LitElement {
 		this.#appliedSelected = new Set(selected);
 		this.#appliedChecked = checked;
 		if (this.dataset.inputMode !== this.tickled.inputMode) this.dataset.inputMode = this.tickled.inputMode;
-		if (selectionChanged) this._syncCheckboxes();
+		if (selectionChanged) {
+			this.#syncPartial();
+			this._syncCheckboxes();
+		}
+	}
+	#partialKeys;
+	/** Rows currently carrying `data-partial`. */
+	#markedPartial;
+	/**
+	* 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.
+	*/
+	get partialKeys() {
+		return this.#partialKeys;
+	}
+	set partialKeys(keys) {
+		const next = new Set(keys);
+		if (sameKeySet(next, this.#partialKeys)) return;
+		this.#partialKeys = next;
+		this.#itemStatesFullSync = true;
+		this._syncItemStates();
+	}
+	/** Touch only the rows whose partial state changed: O(partial keys), not O(rows). */
+	#syncPartial() {
+		const selected = this.selection.selected;
+		const next = /* @__PURE__ */ new Set();
+		for (const key of this.#partialKeys) {
+			const el = this.#itemForKey(key);
+			if (el && isPartialKey(key, this.#partialKeys, selected.has(el))) next.add(el);
+		}
+		for (const el of this.#markedPartial) if (!next.has(el)) applyPartialAttributes(el, false);
+		for (const el of next) if (!this.#markedPartial.has(el)) applyPartialAttributes(el, true);
+		this.#markedPartial = next;
 	}
 	_syncCheckboxes() {
 		const inCheckedMode = this.interactionMode === `checked`;
@@ -1824,16 +1875,22 @@ let DetailListElement = class DetailListElement 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));
 			}
 		}
 	}
@@ -1852,7 +1909,7 @@ let DetailListElement = class DetailListElement 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`;
@@ -1871,7 +1928,7 @@ let DetailListElement = class DetailListElement extends LitElement {
 		span.setAttribute(`part`, `checkbox`);
 		span.addEventListener(`click`, (e) => {
 			e.stopPropagation();
-			this.selection.toggle(el);
+			this.selection.handleCheckbox(el);
 		});
 		return span;
 	}
@@ -1936,8 +1993,8 @@ let DetailListElement = class DetailListElement extends LitElement {
 			visibleKeys
 		});
 	}
-	_activateItem(item) {
-		if (this.interactionMode !== `manual`) this.selection.replace(item);
+	_activateItem(item, source = `pointer`) {
+		this.selection.handleReplace(item, source);
 		this._dispatch(`list-activate`, { item });
 	}
 	static {
@@ -2057,6 +2114,13 @@ let DetailListElement = class DetailListElement 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);
@@ -2157,6 +2221,7 @@ __decorate([property({
 	attribute: `display-property`
 })], DetailListElement.prototype, "displayProperty", void 0);
 __decorate([property({ attribute: false })], DetailListElement.prototype, "formatter", void 0);
+__decorate([property({ attribute: false })], DetailListElement.prototype, "searchText", void 0);
 __decorate([property({
 	type: String,
 	attribute: `icon-property`

package/dist/{detail-list-6iMTNP4N.d.ts → detail-list-DK49TsJd.d.ts}

@@ -1,13 +1,13 @@
-import "./icon-CDGprSdE.js";
+import "./icon-DR_3rSyZ.js";
 import { r as IDataProvider } from "./data-provider-BAn_-oR1.js";
 import { L as ListDragPreviewRenderer, R as ListDragPreviewSourceResolver, V as ListNativeDragStartEvent } from "./tree-component-DgfkxmVY.js";
 import { a as ViewStateBase, s as ViewStateChangeEvent, 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-Dr80Zdl6.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 { a as ListGroupEventMap, o as ListGroupInfo, s as ListGroupLabel } from "./grouping-CUKgmkMm.js";
-import { i as ListInteractionMode, l as ListSelectionMode, r as ListElementEventMap } from "./list-selection-types-PjKdhF-a.js";
-import { n as CustomCheckboxOptions, t as AddItemOptions } from "./vertical-list-BPDmZx6T.js";
+import { n as CustomCheckboxOptions, t as AddItemOptions } from "./vertical-list-od4050Bo.js";
 import "./list-group-header.js";
 import { LitElement, PropertyValues } from "lit";
 import { CommandId, CommandRegistry } from "@clinth/ui-commands";
@@ -75,6 +75,13 @@ declare class DetailListElement extends LitElement {
   provider: IDataProvider<void, unknown> | undefined;
   displayProperty: string;
   formatter: DetailFormatter | undefined;
+  /**
+   * Text incremental search matches for an object item. Defaults to the
+   * caption when it is a string (`displayProperty` or a string `formatter`),
+   * else the row's whole text — set this when `formatter` returns a `Node`
+   * carrying more than the name (sublines, sizes, dates).
+   */
+  searchText: ((item: unknown, index: number) => string) | undefined;
   iconProperty: string;
   /**
    * Property on each `items` entry holding a CSS colour for the item's
@@ -158,6 +165,13 @@ declare class DetailListElement extends LitElement {
    * changed by outside forces (e.g. an external font load).
    */
   refreshLayout(): void;
+  /**
+   * Rebuild every object-item row, for when something the `formatter` (or
+   * `searchText`) reads has changed but the items themselves haven't —
+   * reassigning the same objects keeps their rows as they are. Assigning a new
+   * `formatter` function has the same effect.
+   */
+  reformat(): void;
   addItem(item: Element | string, options?: AddItemOptions): void;
   /**
    * Collapse + fade `item` out, then detach it; the rows after it slide up to
@@ -253,6 +267,14 @@ declare class DetailListElement extends LitElement {
    * only the items whose state changed are touched, so hovering is O(1).
    */
   private _syncItemStates;
+  /**
+   * 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.
+   */
+  get partialKeys(): ReadonlySet<string>;
+  set partialKeys(keys: Iterable<string>);
   private _syncCheckboxes;
   /**
    * Native checkbox cell: a span that stretches to the row's full cross-axis

package/dist/detail-list.d.ts

@@ -1,6 +1,6 @@
 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 { 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 { a as DetailSortComparator, c as DetailListViewState, i as DetailGroupBy, n as DetailListElementEventMap, o as DetailSortItem, r as DetailFormatter, s as DetailSortMode, t as DetailListElement } from "./detail-list-6iMTNP4N.js";
-import { n as CustomCheckboxOptions, t as AddItemOptions } from "./vertical-list-BPDmZx6T.js";
+import { a as DetailSortComparator, c as DetailListViewState, i as DetailGroupBy, n as DetailListElementEventMap, o as DetailSortItem, r as DetailFormatter, s as DetailSortMode, t as DetailListElement } from "./detail-list-DK49TsJd.js";
+import { n as CustomCheckboxOptions, t as AddItemOptions } from "./vertical-list-od4050Bo.js";
 export { type AddItemOptions, type CustomCheckboxOptions, type DetailFormatter, type DetailGroupBy, DetailListElement, DetailListElementEventMap, type DetailListViewState, type DetailSortComparator, type DetailSortItem, type DetailSortMode, 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 ListNativeDragStartDetail, type ListNativeDragStartEvent, type ListViewportChangeDetail, type ListViewportChangeEvent };

package/dist/detail-list.js

@@ -1,3 +1,3 @@
-import { t as DetailListElement } from "./detail-list-C4pDSoI8.js";
+import { t as DetailListElement } from "./detail-list-C3XKTRmE.js";
 import "./list-group-header.js";
 export { DetailListElement };

package/dist/{flat-list-JPgQSmLW.d.ts → flat-list-Bv4-qfjp.d.ts}

@@ -1,11 +1,11 @@
-import "./icon-CDGprSdE.js";
+import "./icon-DR_3rSyZ.js";
 import { M as TreeDataModel } from "./tree-component-DgfkxmVY.js";
 import { o as TreeNode, r as TreeFilterPredicate, t as LoadChildrenCallback } from "./types-Jky6oNAp.js";
 import { a as ViewStateBase, t as GetViewStateOptions } from "./types-LU1u0CB8.js";
 import "./index-9ttcdwlL.js";
-import "./crumb-navigation-BbqfmkYs.js";
-import { i as ListInteractionMode, l as ListSelectionMode } from "./list-selection-types-PjKdhF-a.js";
-import { r as VerticalListElement } from "./vertical-list-BPDmZx6T.js";
+import "./crumb-navigation-nnr881n-.js";
+import { i as ListInteractionMode, m as ListSelectionMode } from "./list-selection-types-hj9Njei3.js";
+import { r as VerticalListElement } from "./vertical-list-od4050Bo.js";
 import { LitElement, PropertyValues } from "lit";
 //#region src/flat-list/types.d.ts
 /** How branches and leaves are ordered within one level. */
@@ -121,6 +121,11 @@ declare class FlatListElement extends LitElement {
   branchOrder: FlatListBranchOrder;
   selectionMode: ListSelectionMode;
   interactionMode: ListInteractionMode;
+  /**
+   * Row keys shown as *partially* selected (see `ixfx-vertical-list`'s
+   * `partialKeys`). Independent of the selection; a key in both counts as selected.
+   */
+  partialKeys: ReadonlySet<string>;
   itemWrap: `stop` | `wrap`;
   searchModes: string | undefined;
   itemsDraggable: boolean;

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, v as FlatListViewState } from "./flat-list-JPgQSmLW.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, v as FlatListViewState } from "./flat-list-Bv4-qfjp.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, type FlatListViewState };

package/dist/flat-list.js

@@ -2,11 +2,11 @@ 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 "./icon-1gpwtPx8.js";
+import { n as appearanceColor, t as appearanceAbsent } from "./item-appearance-Bl6rMIID.js";
 import { t as collectDataResult } from "./data-provider-35TyWclX.js";
 import { t as ViewStateController } from "./view-state-controller-BdyXWUUM.js";
-import { n as resolveKeyPath } from "./crumb-navigation-YnFVFqrx.js";
-import { n as appearanceColor, t as appearanceAbsent } from "./item-appearance-BjcMyauw.js";
-import "./vertical-list-1V1Vg2O5.js";
+import { n as resolveKeyPath } from "./crumb-navigation-D3ndPgFg.js";
+import "./vertical-list-qMRIxZIT.js";
 import { LitElement, css, html, nothing } from "lit";
 import { property, state } from "lit/decorators.js";
 //#region src/flat-list/flat-list.ts
@@ -73,6 +73,7 @@ let FlatListElement = class FlatListElement extends LitElement {
 		this.branchOrder = `first`;
 		this.selectionMode = `single`;
 		this.interactionMode = `standard`;
+		this.partialKeys = /* @__PURE__ */ new Set();
 		this.itemWrap = `stop`;
 		this.itemsDraggable = false;
 		this.itemsDroppable = false;
@@ -597,6 +598,7 @@ let FlatListElement = class FlatListElement extends LitElement {
           key-property="key"
           .selectionMode=${this.selectionMode}
           .interactionMode=${this.interactionMode}
+          .partialKeys=${this.partialKeys}
           .itemWrap=${this.itemWrap}
           .searchModes=${this.searchModes}
           ?items-draggable=${this.itemsDraggable}
@@ -742,6 +744,7 @@ __decorate([property({
 	type: String,
 	attribute: `interaction-mode`
 })], FlatListElement.prototype, "interactionMode", void 0);
+__decorate([property({ attribute: false })], FlatListElement.prototype, "partialKeys", void 0);
 __decorate([property({
 	type: String,
 	attribute: `item-wrap`

package/dist/{grid-list-CdEkScn-.js → grid-list-51XsR2X2.js}

@@ -2,16 +2,16 @@ 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-JIhwB49y.js";
+import { c as createElementListSearchAdapter, f as createDataListSearchAdapter, i as ListSearchController, n as listSearchStyles, o as registerListSearchCommands, r as LIST_SEARCH_MODES, u as keyForElement } from "./incr-search-2YaxUUA9.js";
 import { i as resolveGroupKey, r as partitionByGroup } from "./grouping-RYPnHkrS.js";
 import { a as listItemFadeKeyframes, 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-CJDdjH7E.js";
 import { c as keysAsFlags, f as withoutFlag, i as capFlags, l as keysToArray, o as flagsFromRecord, s as flagsToRecord, t as EMPTY_FLAGS } from "./pending-BGidHppL.js";
+import { a as isPartialKey, n as appearanceColor, o as sameKeySet, r as PARTIAL_DESCRIPTION, t as appearanceAbsent } from "./item-appearance-Bl6rMIID.js";
 import { n as createScrollHoverGuard } from "./scroll-hover-guard-Cjw6179Q.js";
 import "./interaction-E-uMGHkJ.js";
-import { t as ViewStateController } from "./view-state-controller-BdyXWUUM.js";
 import { t as scrollFadeStyles } from "./scroll-fade-Xx28D7mH.js";
-import { n as appearanceColor, t as appearanceAbsent } from "./item-appearance-BjcMyauw.js";
+import { t as ViewStateController } from "./view-state-controller-BdyXWUUM.js";
 import "./pan-text-CqtvjPyK.js";
 import "./list-group-header.js";
 import { LitElement, css, html, nothing } from "lit";
@@ -847,6 +847,7 @@ let GridListElement = class GridListElement extends LitElement {
 				interactionMode: this.interactionMode
 			}),
 			getKey: (k) => k,
+			onIntent: (intent) => this._dispatch(`list-select-intent`, intent, true) === false,
 			getGroupKey: (k) => this.groupBy === null ? null : this.#source.groupKeyOfKey(k),
 			crossGroupSelection: () => this.crossGroupSelection,
 			getFallbackGroupKey: () => {
@@ -940,8 +941,8 @@ let GridListElement = class GridListElement extends LitElement {
 				this.#marqueeRect = rect;
 				this.requestUpdate();
 			},
-			onCommit: (finalSet) => {
-				this.selection.applyDragSelection(finalSet);
+			onCommit: (finalSet, info) => {
+				this.selection.applyDragSelection(finalSet, info);
 				this.#marqueePreview = /* @__PURE__ */ new Set();
 				this.#marqueeRect = void 0;
 				this.requestUpdate();
@@ -968,6 +969,8 @@ let GridListElement = class GridListElement extends LitElement {
 		this.#resolveKey = (key) => this.#source.indexOfKey(key) >= 0 ? key : void 0;
 		this.#markedTickled = /* @__PURE__ */ new Set();
 		this.#markedSelected = /* @__PURE__ */ new Set();
+		this.#markedPartial = /* @__PURE__ */ new Set();
+		this.#partialKeys = /* @__PURE__ */ new Set();
 		this.#selectedSnapshot = /* @__PURE__ */ new Set();
 		this.#onScroll = (e) => {
 			const el = e.target;
@@ -1001,7 +1004,7 @@ let GridListElement = class GridListElement extends LitElement {
 			if ((e.ctrlKey || e.metaKey) && e.key === `a`) {
 				if (this.selection.canSelectAll()) {
 					e.preventDefault();
-					this.selection.selectAll();
+					this.selection.selectAll(`keyboard`);
 				}
 				return;
 			}
@@ -1065,7 +1068,7 @@ let GridListElement = class GridListElement extends LitElement {
 					if (id) {
 						e.preventDefault();
 						this.#emitItemEvent(`list-item-click`, id);
-						this.#onCellActivate(id);
+						this.#onCellActivate(id, `keyboard`);
 					}
 					break;
 				}
@@ -1079,7 +1082,7 @@ let GridListElement = class GridListElement extends LitElement {
 				}
 				case `Escape`:
 					if (this.#nativeDragging) this.#clearNativeDragState();
-					this.selection.clear();
+					this.selection.handleClear(`keyboard`);
 					break;
 				default: return;
 			}
@@ -1314,6 +1317,11 @@ let GridListElement = class GridListElement extends LitElement {
         outline: 2px solid var(--accent);
         outline-offset: -2px;
       }
+      /* Partially selected: a dashed ring, lighter than a full selection. */
+      .cell.partial:not(.selected) {
+        outline: 2px dashed var(--grid-list-partial-outline, var(--accent));
+        outline-offset: -2px;
+      }
       :host(:not([caption-style="separate"])) .cell.selected.tickled {
         background: var(--item-bg-selected-tickled);
         outline: 2px dashed var(--surface-3);
@@ -2007,6 +2015,7 @@ let GridListElement = class GridListElement extends LitElement {
 	}
 	updated(changed) {
 		super.updated(changed);
+		if (this.search?.isOpen) this.search.repaintHighlights();
 		const pending = this.#mutationObserver?.takeRecords();
 		const pendingAttrs = this.#itemAttrObserver?.takeRecords();
 		if (pending !== void 0 && pending.length > 0) this.#onChildrenChanged(pending);
@@ -2488,6 +2497,24 @@ let GridListElement = class GridListElement extends LitElement {
 	/** Light-DOM items currently carrying `data-tickled` / `data-selected`. */
 	#markedTickled;
 	#markedSelected;
+	#markedPartial;
+	#partialKeys;
+	/**
+	* Cells shown as *partially* selected (a part of the resource is selected):
+	* `data-partial` / `part="item partial"` and an accessible description.
+	* Independent of `selectedKeys` — a key in both counts as selected.
+	* Replace-on-set; keys without a cell are kept for when it 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();
+		this.requestUpdate();
+	}
 	/**
 	* Mirror cursor / selection onto the light-DOM items as `data-tickled` /
 	* `data-selected`. Only the items whose state changed are touched, so a
@@ -2515,6 +2542,12 @@ let GridListElement = class GridListElement extends LitElement {
 		}
 		this.#markedTickled = syncMarker(`data-tickled`, this.#markedTickled, tickledEl ? /* @__PURE__ */ new Set([tickledEl]) : /* @__PURE__ */ new Set());
 		this.#markedSelected = syncMarker(`data-selected`, this.#markedSelected, selectedEls);
+		const partialEls = /* @__PURE__ */ new Set();
+		for (const key of this.#partialKeys) {
+			const el = selected.has(key) ? void 0 : elementFor(key);
+			if (el) partialEls.add(el);
+		}
+		this.#markedPartial = syncMarker(`data-partial`, this.#markedPartial, partialEls);
 		this.setAttribute(`data-input-mode`, this.tickled.inputMode);
 	}
 	#emitSelect(selected, previous) {
@@ -2640,6 +2673,7 @@ let GridListElement = class GridListElement extends LitElement {
 	#renderDataCell(index, win) {
 		const key = this.#source.keyAt(index);
 		const selected = this.#selectedSnapshot.has(key);
+		const partial = isPartialKey(key, this.#partialKeys, selected);
 		const marquee = this.#marqueePreview.has(key);
 		const tickled = this.tickled.isTickled(key);
 		const selectable = this.#source.isSelectable(index);
@@ -2655,10 +2689,11 @@ 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.#recycledKeys.has(key) ? ` recycled` : ``}${this.#nativeDragging && key === this.#dragOriginKey ? ` dragging-origin` : ``}"
-        part="item${selected ? ` selected` : ``}${tickled ? ` tickled` : ``}"
+        class="cell${selected ? ` selected` : ``}${partial ? ` partial` : ``}${tickled ? ` tickled` : ``}${marquee ? ` marquee` : ``}${this.#recycledKeys.has(key) ? ` recycled` : ``}${this.#nativeDragging && key === this.#dragOriginKey ? ` dragging-origin` : ``}"
+        part="item${selected ? ` selected` : ``}${partial ? ` partial` : ``}${tickled ? ` tickled` : ``}"
         role="option"
         aria-selected=${selected ? `true` : `false`}
+        aria-description=${partial ? PARTIAL_DESCRIPTION : nothing}
         aria-setsize=${this.#source.count}
         aria-posinset=${index + 1}
         style="width:${this.itemSize}px;height:${cellHeight}px;transform:translate(${x}px,${y}px)"
@@ -2666,6 +2701,7 @@ let GridListElement = class GridListElement extends LitElement {
         data-key=${key}
         draggable=${draggable ? `true` : `false`}
         ?data-selected=${selected}
+        ?data-partial=${partial}
         ?data-tickled=${tickled}
         ?data-marquee=${marquee}
         @click=${(e) => this.#onCellClick(e, key)}
@@ -2762,6 +2798,7 @@ let GridListElement = class GridListElement extends LitElement {
 	#renderCell(el, index, win) {
 		const key = this.#source.keyAt(index);
 		const selected = this.#selectedSnapshot.has(key);
+		const partial = isPartialKey(key, this.#partialKeys, selected);
 		const marquee = this.#marqueePreview.has(key);
 		const tickled = this.tickled.isTickled(key);
 		const entering = this.#entering.has(el);
@@ -2777,10 +2814,11 @@ 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.#recycledKeys.has(key) ? ` recycled` : ``}${this.#nativeDragging && key === this.#dragOriginKey ? ` dragging-origin` : ``}"
-        part="item${selected ? ` selected` : ``}${tickled ? ` tickled` : ``}"
+        class="cell${selected ? ` selected` : ``}${partial ? ` partial` : ``}${tickled ? ` tickled` : ``}${entering ? ` entering` : ``}${marquee ? ` marquee` : ``}${this.#recycledKeys.has(key) ? ` recycled` : ``}${this.#nativeDragging && key === this.#dragOriginKey ? ` dragging-origin` : ``}"
+        part="item${selected ? ` selected` : ``}${partial ? ` partial` : ``}${tickled ? ` tickled` : ``}"
         role="option"
         aria-selected=${selected ? `true` : `false`}
+        aria-description=${partial ? PARTIAL_DESCRIPTION : nothing}
         aria-setsize=${this.#source.count}
         aria-posinset=${index + 1}
         style="width:${this.itemSize}px;height:${cellHeight}px;transform:translate(${x}px,${y}px)"
@@ -2788,6 +2826,7 @@ let GridListElement = class GridListElement extends LitElement {
         data-key=${key}
         draggable=${draggable ? `true` : `false`}
         ?data-selected=${selected}
+        ?data-partial=${partial}
         ?data-tickled=${tickled}
         ?data-marquee=${marquee}
         @click=${(e) => this.#onCellClick(e, key)}
@@ -2868,7 +2907,7 @@ let GridListElement = class GridListElement extends LitElement {
 	}
 	#onCellClick(e, key) {
 		if (this.#dragSelect.isDragging || this.#nativeDragging || this.#nativeDrag.isDragging || this.#postDragSuppressTimer !== 0) return;
-		this.selection.handleClick(key, e);
+		this.selection.handleClick(key, gestureOf(e));
 		this.#emitItemEvent(`list-item-click`, key);
 	}
 	/**
@@ -2881,11 +2920,10 @@ let GridListElement = class GridListElement extends LitElement {
 	*/
 	#onViewportClick(e) {
 		const mode = this.interactionMode;
-		if (mode === `manual`) return;
 		if (this.selectionMode === `none` && mode !== `checked` && mode !== `sticky`) return;
 		if (this.#dragSelect.isDragging || this.#nativeDragging || this.#nativeDrag.isDragging || this.#postDragSuppressTimer !== 0) return;
 		for (const node of e.composedPath()) if (node instanceof Element && (node.classList.contains(`cell`) || node.classList.contains(`group-header`))) return;
-		this.selection.clear();
+		this.selection.handleClear(`pointer`, true);
 	}
 	#startPostDragSuppressTimer() {
 		if (this.#postDragSuppressTimer) clearTimeout(this.#postDragSuppressTimer);
@@ -2899,8 +2937,8 @@ let GridListElement = class GridListElement extends LitElement {
 		this.toggleAttribute(`data-native-dragging`, false);
 		this.removeAttribute(`aria-label`);
 	}
-	#onCellActivate(key) {
-		if (this.interactionMode !== `manual`) this.selection.replace(key);
+	#onCellActivate(key, source = `pointer`) {
+		this.selection.handleReplace(key, source);
 		this.#emitItemEvent(`list-activate`, key);
 	}
 };