@ixfx/components 0.16.0 → 0.16.2

package/dist/ac-text.d.ts

@@ -1,4 +1,4 @@
-import "./icon-CDGprSdE.js";
+import "./icon-DR_3rSyZ.js";
 import { LitElement, PropertyValues } from "lit";
 //#region src/ac-text/ac-text.d.ts
 type AcTextItem = {

package/dist/{ac-token-qEs3FsQv.d.ts → ac-token-Cq7lsYf-.d.ts}

@@ -1,4 +1,4 @@
-import "./icon-CDGprSdE.js";
+import "./icon-DR_3rSyZ.js";
 import { r as IDataProvider } from "./data-provider-BAn_-oR1.js";
 import { LitElement, PropertyValues } from "lit";
 //#region src/ac-token/types.d.ts

package/dist/ac-token.d.ts

@@ -1,2 +1,2 @@
-import { a as AcTokenItem, c as AcTokenStyle, d as AcTokensChangeDetail, f as AcTokensChangeEvent, i as AcTokenElementEventMap, l as AcTokenStyleFn, n as AcTokenAddDetail, o as AcTokenRemoveDetail, r as AcTokenAddEvent, s as AcTokenRemoveEvent, t as AcTokenElement, u as AcTokenizerFn } from "./ac-token-qEs3FsQv.js";
+import { a as AcTokenItem, c as AcTokenStyle, d as AcTokensChangeDetail, f as AcTokensChangeEvent, i as AcTokenElementEventMap, l as AcTokenStyleFn, n as AcTokenAddDetail, o as AcTokenRemoveDetail, r as AcTokenAddEvent, s as AcTokenRemoveEvent, t as AcTokenElement, u as AcTokenizerFn } from "./ac-token-Cq7lsYf-.js";
 export { type AcTokenAddDetail, type AcTokenAddEvent, AcTokenElement, type AcTokenElementEventMap, type AcTokenItem, type AcTokenRemoveDetail, type AcTokenRemoveEvent, type AcTokenStyle, type AcTokenStyleFn, type AcTokenizerFn, type AcTokensChangeDetail, type AcTokensChangeEvent };

package/dist/ac-token.js

@@ -4,7 +4,7 @@ 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 { m as createAcCompletionProvider } from "./incr-search-JIhwB49y.js";
+import { h as createAcCompletionProvider } from "./incr-search-2YaxUUA9.js";
 import { LitElement, css, html, nothing } from "lit";
 import { property, state } from "lit/decorators.js";
 import { styleMap } from "lit/directives/style-map.js";

package/dist/{button-N92DKoWb.d.ts → button-D1sPDUCM.d.ts}

@@ -50,7 +50,7 @@ declare class ButtonElement extends LitElement {
   type: `button` | `submit` | `reset`;
   static formAssociated: boolean;
   formDisabledCallback(disabled: boolean): void;
-  protected _renderIcon(): typeof nothing | import("lit").TemplateResult<1>;
+  protected _renderIcon(): import("lit").TemplateResult<1> | typeof nothing;
   protected render(): import("lit").TemplateResult<1>;
   static styles: import("lit").CSSResult[];
 }

package/dist/button.d.ts

@@ -1,2 +1,2 @@
-import { n as ButtonElementEventMap, t as ButtonElement } from "./button-N92DKoWb.js";
+import { n as ButtonElementEventMap, t as ButtonElement } from "./button-D1sPDUCM.js";
 export { ButtonElement, ButtonElementEventMap };

package/dist/colour-picker.d.ts

@@ -1,2 +1,2 @@
-import { a as ColourPickerInputEvent, i as ColourPickerEventDetail, n as ColourPicker, o as OklchValue, r as ColourPickerChangeEvent, t as ColourPickerPopup } from "./index-DN2BWctP.js";
+import { a as ColourPickerInputEvent, i as ColourPickerEventDetail, n as ColourPicker, o as OklchValue, r as ColourPickerChangeEvent, t as ColourPickerPopup } from "./index-Bz3loIAf.js";
 export { ColourPicker, type ColourPickerChangeEvent, type ColourPickerEventDetail, type ColourPickerInputEvent, ColourPickerPopup, type OklchValue };

package/dist/{crumb-navigation-YnFVFqrx.js → crumb-navigation-D3ndPgFg.js}

@@ -3,10 +3,10 @@ import { n as tickledStyles, t as tickledItemStyles } from "./tickled-styles-BrA
 import { t as themeFallbacks } from "./fallbacks-DQ_5OsmR.js";
 import { n as safeCustomElement, t as __decorate } from "./decorate-VRK8rslU.js";
 import "./interaction-E-uMGHkJ.js";
-import "./menu-item-BUv8An2k.js";
+import { t as scrollFadeStyles } from "./scroll-fade-Xx28D7mH.js";
+import "./menu-item-oxU1VKiJ.js";
 import { t as collectDataResult } from "./data-provider-35TyWclX.js";
 import { t as ViewStateController } from "./view-state-controller-BdyXWUUM.js";
-import { t as scrollFadeStyles } from "./scroll-fade-Xx28D7mH.js";
 import "./narrowed-text.js";
 import { LitElement, css, html, nothing } from "lit";
 import { property, state } from "lit/decorators.js";

package/dist/{crumb-navigation-BbqfmkYs.d.ts → crumb-navigation-nnr881n-.d.ts}

@@ -2,7 +2,7 @@ import { M as TreeDataModel, a as TreeComponent, j as TreeTickleEvent, k as Tree
 import { n as TreeExclusivity, o as TreeNode, r as TreeFilterPredicate, s as TreeSelectionFilter, t as LoadChildrenCallback } from "./types-Jky6oNAp.js";
 import { a as ViewStateBase, t as GetViewStateOptions } from "./types-LU1u0CB8.js";
 import "./index-9ttcdwlL.js";
-import "./menu-item-bF6narIz.js";
+import "./menu-item-B0zqw2xp.js";
 import "./index-o-CWDt11.js";
 import { LitElement, PropertyValues } from "lit";
 //#region src/crumbs/crumb-view-state.d.ts

package/dist/crumbs.d.ts

@@ -1,2 +1,2 @@
-import { a as CrumbNavigationExpandDetail, c as CrumbNavigationItemClickEvent, i as CrumbNavigationElementEventMap, l as CrumbNavigationViewState, n as CrumbNavigationChangeEvent, o as CrumbNavigationExpandEvent, r as CrumbNavigationElement, s as CrumbNavigationItemClickDetail, t as CrumbNavigationChangeDetail } from "./crumb-navigation-BbqfmkYs.js";
+import { a as CrumbNavigationExpandDetail, c as CrumbNavigationItemClickEvent, i as CrumbNavigationElementEventMap, l as CrumbNavigationViewState, n as CrumbNavigationChangeEvent, o as CrumbNavigationExpandEvent, r as CrumbNavigationElement, s as CrumbNavigationItemClickDetail, t as CrumbNavigationChangeDetail } from "./crumb-navigation-nnr881n-.js";
 export { CrumbNavigationChangeDetail, CrumbNavigationChangeEvent, CrumbNavigationElement, CrumbNavigationElementEventMap, CrumbNavigationExpandDetail, CrumbNavigationExpandEvent, CrumbNavigationItemClickDetail, CrumbNavigationItemClickEvent, type CrumbNavigationViewState };

package/dist/crumbs.js

@@ -1,2 +1,2 @@
-import { t as CrumbNavigationElement } from "./crumb-navigation-YnFVFqrx.js";
+import { t as CrumbNavigationElement } from "./crumb-navigation-D3ndPgFg.js";
 export { CrumbNavigationElement };

package/dist/{data-grid-CIG2DVip.d.ts → data-grid-BAEpfTkb.d.ts}

@@ -1,10 +1,11 @@
-import "./icon-CDGprSdE.js";
+import "./icon-DR_3rSyZ.js";
 import { L as ListDragPreviewRenderer, R as ListDragPreviewSourceResolver, V as ListNativeDragStartEvent } from "./tree-component-DgfkxmVY.js";
 import { a as ViewStateBase, t as GetViewStateOptions } from "./types-LU1u0CB8.js";
 import "./index-9ttcdwlL.js";
 import { n as ListViewportChangeEvent, t as ListViewportChangeDetail } from "./list-viewport-types-BRZsLcvp.js";
-import { S as ListSearchController } from "./index-Dr80Zdl6.js";
-import "./index-DxyyVqzA.js";
+import { l as ListSelectIntentDetail, p as ListSelectKeysDetail } from "./list-selection-types-hj9Njei3.js";
+import { S as ListSearchController } from "./index-BjRoPrwj.js";
+import "./index-DM9OLgTH.js";
 import "./pan-text-CoYmt2qd.js";
 import { LitElement } from "lit";
 import { CommandId, CommandRegistry } from "@clinth/ui-commands";
@@ -137,6 +138,12 @@ type DataGridSelectDetail = {
   readonly previous: ReadonlySet<string>;
 };
 type DataGridSelectEvent = CustomEvent<DataGridSelectDetail>;
+/** `list-select`: the same event name and key-based detail as the other list-like components. */
+type DataGridListSelectDetail = ListSelectKeysDetail & {
+  readonly previous: ReadonlySet<string>;
+};
+type DataGridListSelectEvent = CustomEvent<DataGridListSelectDetail>;
+type DataGridSelectIntentEvent = CustomEvent<ListSelectIntentDetail>;
 type DataGridColumnReorderDetail = {
   readonly from: number;
   readonly to: number;
@@ -183,6 +190,8 @@ type DataGridViewportChangeEvent = ListViewportChangeEvent;
 interface DataGridElementEventMap {
   'datagrid-sort': DataGridSortEvent;
   'datagrid-select': DataGridSelectEvent;
+  'list-select': DataGridListSelectEvent;
+  'list-select-intent': DataGridSelectIntentEvent;
   'datagrid-column-reorder': DataGridColumnReorderEvent;
   'datagrid-column-resize': DataGridColumnResizeEvent;
   'datagrid-column-visibility': DataGridColumnVisibilityEvent;
@@ -241,8 +250,17 @@ declare class DataGridElement extends LitElement {
    * view and navigation.
    */
   filterPredicate?: (row: unknown) => boolean;
-  /** Text a row is matched against by incremental search. Default: its visible cells joined by a space. */
+  /**
+   * Text a row is matched against by incremental search. Overrides
+   * `searchColumn`; matches against it aren't highlighted, since they can't be
+   * mapped onto a cell.
+   */
   rowSearchText?: (row: unknown) => string;
+  /**
+   * Key of the column incremental search matches against, using the cell's
+   * displayed (formatted) text. Default: the first visible column.
+   */
+  searchColumn: string;
   /**
    * Space-separated subset of `navigate select filter` — limits which
    * incremental-search modes are offered. Unset ⇒ all three; empty ⇒ search
@@ -334,6 +352,15 @@ declare class DataGridElement extends LitElement {
   private _getRowForKey;
   /** The selected row keys (read-only). */
   get selectedKeys(): ReadonlySet<string>;
+  private _partialKeys;
+  /**
+   * Rows shown as *partially* selected (a part of the resource is selected):
+   * `[data-partial]`, `.partial` 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>);
   /** Replace the selection with these row keys (clamped to known rows). */
   set selectedKeys(keys: Iterable<string>);
   /**
@@ -440,4 +467,4 @@ interface DataGridElement {
   removeEventListener: (<K extends keyof DataGridElementEventMap>(type: K, listener: (this: DataGridElement, event: DataGridElementEventMap[K]) => void, options?: boolean | EventListenerOptions) => void) & ((type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions) => void);
 }
 //#endregion
-export { DataGridEditability as A, DataGridSortDirection as B, DataGridColumnViewState as C, DataGridColumn as D, BuiltInFormatterOptions as E, DataGridGroupBy as F, GlobalFormatter as H, DataGridGroupLabel as I, DataGridInteractionMode as L, DataGridEditorFactory as M, DataGridEditorType as N, DataGridColumnMenu as O, DataGridGetRowKey as P, DataGridRowLook as R, DataGridViewportChangeEvent as S, BuiltInFormatterName as T, DataGridSortState as V, DataGridSelectDetail as _, DataGridColumnReorderDetail as a, DataGridSortEvent as b, DataGridColumnResizeEvent as c, DataGridElement as d, DataGridElementEventMap as f, DataGridRowActivateEvent as g, DataGridRowActivateDetail as h, DataGridCellEditEvent as i, DataGridEditorContext as j, DataGridDataType as k, DataGridColumnVisibilityDetail as l, DataGridGroupChangeEvent as m, DataGridCellClickEvent as n, DataGridColumnReorderEvent as o, DataGridGroupChangeDetail as p, DataGridCellEditDetail as r, DataGridColumnResizeDetail as s, DataGridCellClickDetail as t, DataGridColumnVisibilityEvent as u, DataGridSelectEvent as v, DataGridViewState as w, DataGridViewportChangeDetail as x, DataGridSortDetail as y, DataGridSelectionMode as z };
+export { DataGridColumn as A, DataGridInteractionMode as B, DataGridSortEvent as C, DataGridViewState as D, DataGridColumnViewState as E, DataGridEditorFactory as F, GlobalFormatter as G, DataGridSelectionMode as H, DataGridEditorType as I, DataGridGetRowKey as L, DataGridDataType as M, DataGridEditability as N, BuiltInFormatterName as O, DataGridEditorContext as P, DataGridGroupBy as R, DataGridSortDetail as S, DataGridViewportChangeEvent as T, DataGridSortDirection as U, DataGridRowLook as V, DataGridSortState as W, DataGridRowActivateDetail as _, DataGridColumnReorderDetail as a, DataGridSelectEvent as b, DataGridColumnResizeEvent as c, DataGridElement as d, DataGridElementEventMap as f, DataGridListSelectEvent as g, DataGridListSelectDetail as h, DataGridCellEditEvent as i, DataGridColumnMenu as j, BuiltInFormatterOptions as k, DataGridColumnVisibilityDetail as l, DataGridGroupChangeEvent as m, DataGridCellClickEvent as n, DataGridColumnReorderEvent as o, DataGridGroupChangeDetail as p, DataGridCellEditDetail as r, DataGridColumnResizeDetail as s, DataGridCellClickDetail as t, DataGridColumnVisibilityEvent as u, DataGridRowActivateEvent as v, DataGridViewportChangeDetail as w, DataGridSelectIntentEvent as x, DataGridSelectDetail as y, DataGridGroupLabel as z };

package/dist/{data-grid-rMkLX2qo.js → data-grid-CaPLWt5E.js}

@@ -3,16 +3,16 @@ import { n as tickledStyles, t as tickledItemStyles } from "./tickled-styles-BrA
 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 { i as ListSearchController, n as listSearchStyles, o as registerListSearchCommands, r as LIST_SEARCH_MODES } from "./incr-search-JIhwB49y.js";
+import { i as ListSearchController, n as listSearchStyles, o as registerListSearchCommands, r as LIST_SEARCH_MODES } from "./incr-search-2YaxUUA9.js";
 import { t as handleStyles } from "./handle-DAXs7kbJ.js";
 import { a as listItemFadeKeyframes, t as ListNativeDragController } from "./list-native-drag-controller-CcXoS0YX.js";
 import { a as capKeys, l as keysToArray, n as EMPTY_KEYS, o as flagsFromRecord, r as MAX_PENDING_KEYS } 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 "./interaction-E-uMGHkJ.js";
-import { n as anchorFromRow, o as scrollToOffset, 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 { n as anchorFromRow, o as scrollToOffset, t as ViewStateController } from "./view-state-controller-BdyXWUUM.js";
 import { t as createDragGhost } from "./drag-ghost-DtSDvjri.js";
-import "./menu-CU9KAm8s.js";
+import "./menu-BX1FHxY8.js";
 import "./pan-text-CqtvjPyK.js";
 import { LitElement, css, html, nothing } from "lit";
 import { property, query, state } from "lit/decorators.js";
@@ -253,6 +253,8 @@ function attachShiftWheel(getScroller) {
 }
 //#endregion
 //#region src/data-grid/data-grid.ts
+/** `CSS.highlights` key for incremental-search matches, styled in `listSearchStyles`. */
+const SEARCH_HIGHLIGHT_KEY = `data-grid-search`;
 const EMPTY_CELL_LOOK = {
 	textColor: void 0,
 	icon: void 0,
@@ -298,6 +300,7 @@ let DataGridElement = class DataGridElement extends LitElement {
 		this.textColorColumn = ``;
 		this.iconColumn = ``;
 		this.badgeColumn = ``;
+		this.searchColumn = ``;
 		this.itemsDraggable = false;
 		this.columnButtonIcon = `ellipsis`;
 		this._columnFormatters = /* @__PURE__ */ new Map();
@@ -414,6 +417,7 @@ let DataGridElement = class DataGridElement extends LitElement {
 				this.#emitViewportChangeIfChanged();
 			});
 		};
+		this._partialKeys = /* @__PURE__ */ new Set();
 		this._onKeyDown = (e) => {
 			const before = this._tickled.tickledId;
 			this.#handleKeyDown(e);
@@ -578,6 +582,7 @@ let DataGridElement = class DataGridElement extends LitElement {
     }
     /* Hover: background only, no border change (avoids layout shift + colour flash). */
     .row.item.tickled { background: var(--item-bg-tickled); color: var(--item-text-tickled); }
+    .row.item.partial:not(.selected) { 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; }
     .row.item.selected { background: var(--item-bg-selected); border: var(--item-border-selected); color: var(--item-text-selected); }
     .row.item.selected.tickled { background: var(--item-bg-selected-tickled); }
     .row.item.dragging-origin { opacity: 0.6; }
@@ -702,8 +707,13 @@ let DataGridElement = class DataGridElement extends LitElement {
 	}
 	#rowSearchText(row) {
 		if (this.rowSearchText) return this.rowSearchText(row);
-		const rec = row;
-		return this._visibleColumns.map((c) => String(rec[c.key] ?? ``)).join(` `);
+		const col = this.#searchColumn();
+		if (col === void 0) return ``;
+		const value = this._formatValue(row[col.key], col, row);
+		return typeof value === `string` || typeof value === `number` ? String(value) : ``;
+	}
+	#searchColumn() {
+		return (this.searchColumn === `` ? void 0 : this._visibleColumns.find((c) => c.key === this.searchColumn)) ?? this._visibleColumns[0];
 	}
 	#createSearchAdapter() {
 		return {
@@ -727,7 +737,12 @@ let DataGridElement = class DataGridElement extends LitElement {
 					const k = this.#searchKeyByRow.get(row);
 					return k === void 0 || matched.has(k);
 				};
-			}
+			},
+			highlightRoot: () => this.rowSearchText ? void 0 : this.renderRoot,
+			highlightSelector: `.row .cell`,
+			highlightKeyOf: (el) => el.getAttribute(`data-col`) === this.#searchColumn()?.key ? el.closest(`.row`)?.getAttribute(`data-key`) ?? void 0 : void 0,
+			highlightText: (el) => Array.from(el.childNodes, (n) => n.nodeType === Node.TEXT_NODE ? n.textContent : ``).join(``),
+			highlightKey: SEARCH_HIGHLIGHT_KEY
 		};
 	}
 	#effectiveSearchModes() {
@@ -847,6 +862,7 @@ let DataGridElement = class DataGridElement extends LitElement {
 	updated(changed) {
 		super.updated(changed);
 		this.#viewState.applyPendingScroll((s) => this.#applyScroll(s));
+		if (this.search.isOpen) this.search.repaintHighlights();
 		if (changed.has(`rows`) || changed.has(`sortState`) || changed.has(`columns`) || changed.has(`groupBy`) || changed.has(`groupLabel`) || changed.has(`filterPredicate`) || changed.has(`rowHeight`)) this.#scheduleViewportChangeEmit();
 		if (changed.has(`_editing`) || changed.has(`_editingRow`)) this.updateComplete.then(() => {
 			let sel = null;
@@ -1116,24 +1132,96 @@ let DataGridElement = class DataGridElement extends LitElement {
 		if (this.#nativeDrag.isDragging || this.#postDragSuppressTimer !== 0) return;
 		if (col && col.selectable === false) return;
 		if (this.selectionMode === `none` && this.interactionMode !== `checked` && this.interactionMode !== `sticky`) return;
-		if (this.interactionMode === `manual`) return;
-		if (this.interactionMode === `implicit`) {
-			this._replaceSelection(rowKey);
+		const source = e.pointerType === `touch` ? `touch` : `pointer`;
+		const mode = this.interactionMode;
+		const multi = this.selectionMode === `multiple` || mode === `vscode`;
+		const modified = e.ctrlKey || e.metaKey;
+		switch (mode) {
+			case `implicit`:
+				this.#requestReplace(rowKey, source);
+				break;
+			case `checked`: break;
+			case `sticky`:
+				this.#requestToggle(rowKey, source);
+				break;
+			case `manual`:
+				if (modified) this.#requestToggle(rowKey, source);
+				else if (e.shiftKey) this.#requestExtend(rowKey, source);
+				else this.#requestReplace(rowKey, source);
+				break;
+			default: if (modified) {
+				if (multi) this.#requestToggle(rowKey, source);
+			} else if (e.shiftKey && multi) this.#requestExtend(rowKey, source);
+			else this.#requestReplace(rowKey, source);
+		}
+	}
+	_onCheckboxClick(rowKey, e) {
+		e.stopPropagation();
+		if (this.interactionMode === `checked`) this.#requestToggle(rowKey, `pointer`);
+		else this._onRowClick(rowKey, null, e);
+	}
+	/** 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
+		}));
+	}
+	/** Select only `key`. In `manual` mode (or when cancelled) only the anchor moves. */
+	#requestReplace(key, source) {
+		if (this.selectionMode === `none`) return;
+		if (this.#intercepted({
+			kind: `replace`,
+			keys: [key],
+			source
+		}) || this.interactionMode === `manual`) {
+			this._anchorKey = key;
 			return;
 		}
-		if (this.interactionMode === `checked`) return;
-		if (this.interactionMode === `sticky`) {
-			this._toggleSelection(rowKey);
+		this._replaceSelection(key);
+	}
+	/** Flip `key`. `applyInManual`: Space has always toggled in `manual` mode. */
+	#requestToggle(key, source, applyInManual = false) {
+		if (this.#intercepted({
+			kind: `toggle`,
+			keys: [key],
+			source
+		})) return;
+		if (this.interactionMode === `manual` && !applyInManual) return;
+		this._toggleSelection(key);
+	}
+	/** Extend the range from the anchor to `key`. */
+	#requestExtend(key, source) {
+		if (this.selectionMode === `none`) return;
+		const range = this._anchorKey === void 0 ? void 0 : this.#rangeKeys(key);
+		if (this.#intercepted({
+			kind: `extend`,
+			keys: range ?? [key],
+			...this._anchorKey === void 0 ? {} : { anchorKey: this._anchorKey },
+			targetKey: key,
+			source
+		})) {
+			this._anchorKey ??= key;
 			return;
 		}
-		if (e.ctrlKey || e.metaKey) {
-			if (this.selectionMode === `multiple` || this.interactionMode === `vscode`) this._toggleSelection(rowKey);
-		} else if (e.shiftKey && (this.selectionMode === `multiple` || this.interactionMode === `vscode`)) this._rangeSelectTo(rowKey);
-		else this._replaceSelection(rowKey);
+		if (this.interactionMode === `manual`) return;
+		this._rangeSelectTo(key);
 	}
-	_onCheckboxClick(rowKey, e) {
-		e.stopPropagation();
-		this._onRowClick(rowKey, null, e);
+	/** Row keys between the anchor and `key` (inclusive), or `undefined` when the range degrades to a replace. */
+	#rangeKeys(key) {
+		if (!this._anchorKey) return void 0;
+		let keys = this._flat.filter((f) => f.type === `row`).map((f) => f.key);
+		if (this.groupBy && !this.crossGroupSelection) {
+			const group = this._getGroupKey(this._getRowForKey(this._anchorKey) ?? { key: this._anchorKey });
+			if (group !== this._getGroupKey(this._getRowForKey(key) ?? { key })) return void 0;
+			keys = keys.filter((k) => this._getGroupKey(this._getRowForKey(k) ?? { key: k }) === group);
+		}
+		const a = keys.indexOf(this._anchorKey);
+		const b = keys.indexOf(key);
+		if (a < 0 || b < 0) return void 0;
+		return keys.slice(Math.min(a, b), Math.max(a, b) + 1);
 	}
 	_onVisibilityToggle(col, checked) {
 		col.visible = checked;
@@ -1281,6 +1369,19 @@ let DataGridElement = class DataGridElement extends LitElement {
 	get selectedKeys() {
 		return this._selectedKeys;
 	}
+	/**
+	* Rows shown as *partially* selected (a part of the resource is selected):
+	* `[data-partial]`, `.partial` 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)) this._partialKeys = next;
+	}
 	/** Replace the selection with these row keys (clamped to known rows). */
 	set selectedKeys(keys) {
 		this.selectKeys(keys);
@@ -1319,6 +1420,15 @@ let DataGridElement = class DataGridElement extends LitElement {
 			bubbles: true,
 			composed: true
 		}));
+		this.dispatchEvent(new CustomEvent(`list-select`, {
+			detail: {
+				selectedKeys: new Set(this._selectedKeys),
+				previousKeys: previous,
+				previous
+			},
+			bubbles: true,
+			composed: true
+		}));
 	}
 	/** The row key under the cursor, or `undefined`. */
 	get tickledKey() {
@@ -1411,47 +1521,24 @@ let DataGridElement = class DataGridElement extends LitElement {
 		this.#dispatchSelect(prev);
 	}
 	_rangeSelectTo(key) {
-		if (!this._anchorKey) {
-			this._replaceSelection(key);
-			return;
-		}
-		const keys = this._flat.filter((f) => f.type === `row`).map((f) => f.key);
-		const a = keys.indexOf(this._anchorKey);
-		const b = keys.indexOf(key);
-		if (a < 0 || b < 0) {
+		const range = this.#rangeKeys(key);
+		if (range === void 0) {
 			this._replaceSelection(key);
 			return;
 		}
-		if (this.groupBy && !this.crossGroupSelection) {
-			const anchorGroup = this._getGroupKey(this._getRowForKey(this._anchorKey) ?? { key: this._anchorKey });
-			if (anchorGroup !== this._getGroupKey(this._getRowForKey(key) ?? { key })) {
-				this._replaceSelection(key);
-				return;
-			}
-			const groupKeys = keys.filter((k) => this._getGroupKey(this._getRowForKey(k) ?? { key: k }) === anchorGroup);
-			const ga = groupKeys.indexOf(this._anchorKey);
-			const gb = groupKeys.indexOf(key);
-			if (ga < 0 || gb < 0) {
-				this._replaceSelection(key);
-				return;
-			}
-			const lo = Math.min(ga, gb);
-			const hi = Math.max(ga, gb);
-			const prev = new Set(this._selectedKeys);
-			this._selectedKeys = new Set(groupKeys.slice(lo, hi + 1));
-			this.#dispatchSelect(prev);
-			return;
-		}
-		const lo = Math.min(a, b);
-		const hi = Math.max(a, b);
 		const prev = new Set(this._selectedKeys);
-		this._selectedKeys = new Set(keys.slice(lo, hi + 1));
+		this._selectedKeys = new Set(range);
 		this.#dispatchSelect(prev);
 	}
 	#handleKeyDown(e) {
 		if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === `a`) {
 			if (this.selectionMode === `multiple` || this.interactionMode === `checked` || this.interactionMode === `sticky` || this.interactionMode === `vscode` || this.interactionMode === `standard`) {
 				e.preventDefault();
+				if (this.#intercepted({
+					kind: `all`,
+					keys: [],
+					source: `keyboard`
+				})) return;
 				const prev = new Set(this._selectedKeys);
 				if (this.groupBy && !this.crossGroupSelection && this._anchorKey) {
 					const g = this._getGroupKey(this._getRowForKey(this._anchorKey) ?? { key: this._anchorKey });
@@ -1501,14 +1588,14 @@ let DataGridElement = class DataGridElement extends LitElement {
 			case `ArrowDown`:
 				this._tickled.handleKeyboardNavigation(`next`);
 				if (this._tickled.tickledId) this._scrollRowIntoView(this._tickled.tickledId);
-				if (this.interactionMode === `implicit` && this._tickled.tickledId) this._replaceSelection(this._tickled.tickledId);
-				if (e.shiftKey && (this.interactionMode === `standard` || this.interactionMode === `vscode`) && this._tickled.tickledId) this._rangeSelectTo(this._tickled.tickledId);
+				if (this.interactionMode === `implicit` && this._tickled.tickledId) this.#requestReplace(this._tickled.tickledId, `keyboard`);
+				if (e.shiftKey && (this.interactionMode === `standard` || this.interactionMode === `vscode` || this.interactionMode === `manual`) && this._tickled.tickledId) this.#requestExtend(this._tickled.tickledId, `keyboard`);
 				break;
 			case `ArrowUp`:
 				this._tickled.handleKeyboardNavigation(`previous`);
 				if (this._tickled.tickledId) this._scrollRowIntoView(this._tickled.tickledId);
-				if (this.interactionMode === `implicit` && this._tickled.tickledId) this._replaceSelection(this._tickled.tickledId);
-				if (e.shiftKey && (this.interactionMode === `standard` || this.interactionMode === `vscode`) && this._tickled.tickledId) this._rangeSelectTo(this._tickled.tickledId);
+				if (this.interactionMode === `implicit` && this._tickled.tickledId) this.#requestReplace(this._tickled.tickledId, `keyboard`);
+				if (e.shiftKey && (this.interactionMode === `standard` || this.interactionMode === `vscode` || this.interactionMode === `manual`) && this._tickled.tickledId) this.#requestExtend(this._tickled.tickledId, `keyboard`);
 				break;
 			case `Home`:
 				this._tickled.handleKeyboardNavigation(`first`);
@@ -1547,7 +1634,7 @@ let DataGridElement = class DataGridElement extends LitElement {
 						this._activateRow(key, entry?.row, idx);
 						break;
 					}
-					if (this.interactionMode !== `manual` && this.interactionMode !== `checked`) this._replaceSelection(key);
+					if (this.interactionMode !== `checked`) this.#requestReplace(key, `keyboard`);
 					this.dispatchEvent(new CustomEvent(`datagrid-cell-click`, {
 						detail: {
 							rowKey: key,
@@ -1588,8 +1675,8 @@ let DataGridElement = class DataGridElement extends LitElement {
 				const key = this._tickled.tickledId;
 				if (!key) break;
 				e.preventDefault();
-				if (this.interactionMode === `checked` || this.interactionMode === `sticky` || this.interactionMode === `standard` || this.interactionMode === `vscode` || this.interactionMode === `manual`) this._toggleSelection(key);
-				else this._replaceSelection(key);
+				if (this.interactionMode === `checked` || this.interactionMode === `sticky` || this.interactionMode === `standard` || this.interactionMode === `vscode` || this.interactionMode === `manual`) this.#requestToggle(key, `keyboard`, true);
+				else this.#requestReplace(key, `keyboard`);
 				break;
 			}
 			case `Escape`: if (this._editing || this._editingRow) {
@@ -1599,6 +1686,11 @@ let DataGridElement = class DataGridElement extends LitElement {
 				this.requestUpdate();
 			} else if (this._selectedKeys.size) {
 				e.preventDefault();
+				if (this.#intercepted({
+					kind: `clear`,
+					keys: [],
+					source: `keyboard`
+				})) break;
 				const prev = new Set(this._selectedKeys);
 				this._selectedKeys = /* @__PURE__ */ new Set();
 				this.#dispatchSelect(prev);
@@ -2206,10 +2298,12 @@ let DataGridElement = class DataGridElement extends LitElement {
 			const absIdx2 = entry.idx;
 			const rowKey = entry.key;
 			const selected = this._selectedKeys.has(rowKey);
+			const partial = isPartialKey(rowKey, this._partialKeys, selected);
 			const tickled = this._tickled.isTickled(rowKey);
 			return html`
-                <div class="row item ${selected ? `selected` : ``} ${tickled ? `tickled` : ``} ${this.zebraStripes && absIdx2 % 2 === 1 ? `zebra-odd` : ``} ${this.#enteringRowKeys.has(rowKey) ? `entering` : ``} ${this.#nativeDragging && rowKey === this.#dragOriginKey ? `dragging-origin` : ``}" role="row" aria-rowindex=${absIdx + 2} aria-selected=${selected ? `true` : `false`} style="top:${absIdx * rh}px; height:${rh}px"
+                <div class="row item ${selected ? `selected` : ``} ${partial ? `partial` : ``} ${tickled ? `tickled` : ``} ${this.zebraStripes && absIdx2 % 2 === 1 ? `zebra-odd` : ``} ${this.#enteringRowKeys.has(rowKey) ? `entering` : ``} ${this.#nativeDragging && rowKey === this.#dragOriginKey ? `dragging-origin` : ``}" role="row" aria-rowindex=${absIdx + 2} aria-selected=${selected ? `true` : `false`} aria-description=${partial ? PARTIAL_DESCRIPTION : nothing} style="top:${absIdx * rh}px; height:${rh}px"
                   data-key=${rowKey}
+                  ?data-partial=${partial}
                   draggable=${this.#nativeDrag.draggableAttr}
                   @click=${(e) => {
 				this._onRowClick(rowKey, null, e);
@@ -2230,7 +2324,7 @@ let DataGridElement = class DataGridElement extends LitElement {
 				if (this._visibleColumns[0] && this._isEditable(row, this._visibleColumns[0])) this._startEdit(rowKey, this._visibleColumns[0].key);
 				else this._activateRow(rowKey, row, absIdx2);
 			}}>
-                  ${showCheckbox ? html`<div class="checkbox-col"><input type="checkbox" .checked=${selected} @click=${(e) => this._onCheckboxClick(rowKey, e)} /></div>` : nothing}
+                  ${showCheckbox ? html`<div class="checkbox-col"><input type="checkbox" .checked=${selected} .indeterminate=${partial} aria-checked=${partial ? `mixed` : String(selected)} @click=${(e) => this._onCheckboxClick(rowKey, e)} /></div>` : nothing}
                   ${repeat(this._visibleColumns, (c) => c.key, (col) => {
 				const val = row[col.key];
 				if (this._isCellEditing(rowKey, col.key)) {
@@ -2488,6 +2582,10 @@ __decorate([property({
 })], DataGridElement.prototype, "badgeColumn", void 0);
 __decorate([property({ attribute: false })], DataGridElement.prototype, "filterPredicate", void 0);
 __decorate([property({ attribute: false })], DataGridElement.prototype, "rowSearchText", void 0);
+__decorate([property({
+	type: String,
+	attribute: `search-column`
+})], DataGridElement.prototype, "searchColumn", void 0);
 __decorate([property({
 	type: String,
 	attribute: `search-modes`,
@@ -2517,6 +2615,7 @@ __decorate([state()], DataGridElement.prototype, "_lastClickedCell", void 0);
 __decorate([state()], DataGridElement.prototype, "_editValue", void 0);
 __decorate([query(`.viewport`)], DataGridElement.prototype, "_viewportEl", void 0);
 __decorate([query(`.header-row`)], DataGridElement.prototype, "_headerRowEl", void 0);
+__decorate([state()], DataGridElement.prototype, "_partialKeys", void 0);
 DataGridElement = __decorate([safeCustomElement(`ixfx-data-grid`)], DataGridElement);
 //#endregion
 export { DataGridElement as t };

package/dist/data-grid.d.ts

@@ -1,3 +1,3 @@
 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 { A as DataGridEditability, B as DataGridSortDirection, C as DataGridColumnViewState, D as DataGridColumn, E as BuiltInFormatterOptions, F as DataGridGroupBy, H as GlobalFormatter, I as DataGridGroupLabel, L as DataGridInteractionMode, M as DataGridEditorFactory, N as DataGridEditorType, O as DataGridColumnMenu, P as DataGridGetRowKey, R as DataGridRowLook, S as DataGridViewportChangeEvent, T as BuiltInFormatterName, V as DataGridSortState, _ as DataGridSelectDetail, a as DataGridColumnReorderDetail, b as DataGridSortEvent, c as DataGridColumnResizeEvent, d as DataGridElement, f as DataGridElementEventMap, g as DataGridRowActivateEvent, h as DataGridRowActivateDetail, i as DataGridCellEditEvent, j as DataGridEditorContext, k as DataGridDataType, l as DataGridColumnVisibilityDetail, m as DataGridGroupChangeEvent, n as DataGridCellClickEvent, o as DataGridColumnReorderEvent, p as DataGridGroupChangeDetail, r as DataGridCellEditDetail, s as DataGridColumnResizeDetail, t as DataGridCellClickDetail, u as DataGridColumnVisibilityEvent, v as DataGridSelectEvent, w as DataGridViewState, x as DataGridViewportChangeDetail, y as DataGridSortDetail, z as DataGridSelectionMode } from "./data-grid-CIG2DVip.js";
-export { type BuiltInFormatterName, type BuiltInFormatterOptions, DataGridCellClickDetail, DataGridCellClickEvent, DataGridCellEditDetail, DataGridCellEditEvent, type DataGridColumn, type DataGridColumnMenu, DataGridColumnReorderDetail, DataGridColumnReorderEvent, DataGridColumnResizeDetail, DataGridColumnResizeEvent, type DataGridColumnViewState, DataGridColumnVisibilityDetail, DataGridColumnVisibilityEvent, type DataGridDataType, type DataGridEditability, type DataGridEditorContext, type DataGridEditorFactory, type DataGridEditorType, DataGridElement, DataGridElementEventMap, type DataGridGetRowKey, type DataGridGroupBy, DataGridGroupChangeDetail, DataGridGroupChangeEvent, type DataGridGroupLabel, type DataGridInteractionMode, DataGridRowActivateDetail, DataGridRowActivateEvent, type DataGridRowLook, DataGridSelectDetail, DataGridSelectEvent, type DataGridSelectionMode, DataGridSortDetail, type DataGridSortDirection, DataGridSortEvent, type DataGridSortState, type DataGridViewState, DataGridViewportChangeDetail, DataGridViewportChangeEvent, type GlobalFormatter, type ListDragEntry, type ListDragPreview, type ListDragPreviewContext, type ListDragPreviewRenderer, type ListDragSource, type ListNativeDragStartDetail, type ListNativeDragStartEvent };
+import { A as DataGridColumn, B as DataGridInteractionMode, C as DataGridSortEvent, D as DataGridViewState, E as DataGridColumnViewState, F as DataGridEditorFactory, G as GlobalFormatter, H as DataGridSelectionMode, I as DataGridEditorType, L as DataGridGetRowKey, M as DataGridDataType, N as DataGridEditability, O as BuiltInFormatterName, P as DataGridEditorContext, R as DataGridGroupBy, S as DataGridSortDetail, T as DataGridViewportChangeEvent, U as DataGridSortDirection, V as DataGridRowLook, W as DataGridSortState, _ as DataGridRowActivateDetail, a as DataGridColumnReorderDetail, b as DataGridSelectEvent, c as DataGridColumnResizeEvent, d as DataGridElement, f as DataGridElementEventMap, g as DataGridListSelectEvent, h as DataGridListSelectDetail, i as DataGridCellEditEvent, j as DataGridColumnMenu, k as BuiltInFormatterOptions, l as DataGridColumnVisibilityDetail, m as DataGridGroupChangeEvent, n as DataGridCellClickEvent, o as DataGridColumnReorderEvent, p as DataGridGroupChangeDetail, r as DataGridCellEditDetail, s as DataGridColumnResizeDetail, t as DataGridCellClickDetail, u as DataGridColumnVisibilityEvent, v as DataGridRowActivateEvent, w as DataGridViewportChangeDetail, x as DataGridSelectIntentEvent, y as DataGridSelectDetail, z as DataGridGroupLabel } from "./data-grid-BAEpfTkb.js";
+export { type BuiltInFormatterName, type BuiltInFormatterOptions, DataGridCellClickDetail, DataGridCellClickEvent, DataGridCellEditDetail, DataGridCellEditEvent, type DataGridColumn, type DataGridColumnMenu, DataGridColumnReorderDetail, DataGridColumnReorderEvent, DataGridColumnResizeDetail, DataGridColumnResizeEvent, type DataGridColumnViewState, DataGridColumnVisibilityDetail, DataGridColumnVisibilityEvent, type DataGridDataType, type DataGridEditability, type DataGridEditorContext, type DataGridEditorFactory, type DataGridEditorType, DataGridElement, DataGridElementEventMap, type DataGridGetRowKey, type DataGridGroupBy, DataGridGroupChangeDetail, DataGridGroupChangeEvent, type DataGridGroupLabel, type DataGridInteractionMode, DataGridListSelectDetail, DataGridListSelectEvent, DataGridRowActivateDetail, DataGridRowActivateEvent, type DataGridRowLook, DataGridSelectDetail, DataGridSelectEvent, DataGridSelectIntentEvent, type DataGridSelectionMode, DataGridSortDetail, type DataGridSortDirection, DataGridSortEvent, type DataGridSortState, type DataGridViewState, DataGridViewportChangeDetail, DataGridViewportChangeEvent, type GlobalFormatter, type ListDragEntry, type ListDragPreview, type ListDragPreviewContext, type ListDragPreviewRenderer, type ListDragSource, type ListNativeDragStartDetail, type ListNativeDragStartEvent };

package/dist/data-grid.js

@@ -1,2 +1,2 @@
-import { t as DataGridElement } from "./data-grid-rMkLX2qo.js";
+import { t as DataGridElement } from "./data-grid-CaPLWt5E.js";
 export { DataGridElement };