@ixfx/components 0.16.0 → 0.16.1

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 { m as createAcCompletionProvider } from "./incr-search-CgbL-OlS.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/{data-grid-rMkLX2qo.js → data-grid-Cqxuwgbb.js}

@@ -3,7 +3,7 @@ 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-CgbL-OlS.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";
@@ -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();
@@ -702,8 +705,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 +735,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 +860,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;
@@ -2488,6 +2502,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`,

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

@@ -3,7 +3,7 @@ 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, t as ListViewportChangeDetail } from "./list-viewport-types-BRZsLcvp.js";
-import { S as ListSearchController } from "./index-Dr80Zdl6.js";
+import { S as ListSearchController } from "./index-CUErGhCg.js";
 import "./index-DxyyVqzA.js";
 import "./pan-text-CoYmt2qd.js";
 import { LitElement } from "lit";
@@ -241,8 +241,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

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";
+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-Csh5EJW9.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 };

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-Cqxuwgbb.js";
 export { DataGridElement };

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

@@ -3,7 +3,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 { 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, i as ListSearchController, n as listSearchStyles, o as registerListSearchCommands, r as LIST_SEARCH_MODES, u as keyForElement } from "./incr-search-CgbL-OlS.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";
@@ -823,8 +823,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 +861,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 +1234,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));
@@ -2157,6 +2170,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-DSZ1DDor.d.ts}

@@ -4,10 +4,10 @@ import { L as ListDragPreviewRenderer, R as ListDragPreviewSourceResolver, V as
 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 { S as ListSearchController } from "./index-CUErGhCg.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-SAx56U-l.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

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-DSZ1DDor.js";
+import { n as CustomCheckboxOptions, t as AddItemOptions } from "./vertical-list-SAx56U-l.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-Bo5ze3SN.js";
 import "./list-group-header.js";
 export { DetailListElement };

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

@@ -5,7 +5,7 @@ import { a as ViewStateBase, t as GetViewStateOptions } from "./types-LU1u0CB8.j
 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 { r as VerticalListElement } from "./vertical-list-SAx56U-l.js";
 import { LitElement, PropertyValues } from "lit";
 //#region src/flat-list/types.d.ts
 /** How branches and leaves are ordered within one level. */

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-CT9kX3TQ.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

@@ -6,7 +6,7 @@ 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 "./vertical-list-DyKPKGxK.js";
 import { LitElement, css, html, nothing } from "lit";
 import { property, state } from "lit/decorators.js";
 //#region src/flat-list/flat-list.ts

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

@@ -2,7 +2,7 @@ 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, d as createDataListSearchAdapter, i as ListSearchController, n as listSearchStyles, o as registerListSearchCommands, r as LIST_SEARCH_MODES, u as keyForElement } from "./incr-search-CgbL-OlS.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";
@@ -2007,6 +2007,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);

package/dist/{grid-list-D6n7WH8l.d.ts → grid-list-DDLrWRxm.d.ts}

@@ -1,7 +1,7 @@
 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 { S as ListSearchController } from "./index-Dr80Zdl6.js";
+import { S as ListSearchController } from "./index-CUErGhCg.js";
 import "./pan-text-CoYmt2qd.js";
 import { i as ListGroupChangeEvent, n as ListGroupBy, o as ListGroupInfo, s as ListGroupLabel, u as ListGroupToggleEvent } from "./grouping-CUKgmkMm.js";
 import { i as ListInteractionMode, l as ListSelectionMode } from "./list-selection-types-PjKdhF-a.js";

package/dist/grid-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 { _ as GridListSelectEvent, a as GridListCaptionAlign, b as GridListViewportChangeDetail, c as GridListCaptionStyle, d as GridListFullElementEventMap, f as GridListItemClickDetail, g as GridListSelectDetail, h as GridListOrientation, i as GridListActivateEvent, l as GridListDataAdapter, m as GridListItemEventDetail, n as GridListViewState, o as GridListCaptionBackdrop, p as GridListItemClickEvent, r as GridListActivateDetail, s as GridListCaptionPosition, t as GridListElement, u as GridListElementEventMap, v as GridListTickleDetail, x as GridListViewportChangeEvent, y as GridListTickleEvent } from "./grid-list-D6n7WH8l.js";
+import { _ as GridListSelectEvent, a as GridListCaptionAlign, b as GridListViewportChangeDetail, c as GridListCaptionStyle, d as GridListFullElementEventMap, f as GridListItemClickDetail, g as GridListSelectDetail, h as GridListOrientation, i as GridListActivateEvent, l as GridListDataAdapter, m as GridListItemEventDetail, n as GridListViewState, o as GridListCaptionBackdrop, p as GridListItemClickEvent, r as GridListActivateDetail, s as GridListCaptionPosition, t as GridListElement, u as GridListElementEventMap, v as GridListTickleDetail, x as GridListViewportChangeEvent, y as GridListTickleEvent } from "./grid-list-DDLrWRxm.js";
 import { i as ListGroupChangeEvent, l as ListGroupToggleDetail, n as ListGroupBy, o as ListGroupInfo, r as ListGroupChangeDetail, s as ListGroupLabel, u as ListGroupToggleEvent } from "./grouping-CUKgmkMm.js";
 import { i as ListInteractionMode, l as ListSelectionMode } from "./list-selection-types-PjKdhF-a.js";
 export { type GridListActivateDetail, type GridListActivateEvent, type GridListCaptionAlign, type GridListCaptionBackdrop, type GridListCaptionPosition, type GridListCaptionStyle, type GridListDataAdapter, GridListElement, type GridListElementEventMap, type GridListFullElementEventMap, type GridListItemClickDetail, type GridListItemClickEvent, type GridListItemEventDetail, type GridListOrientation, type GridListSelectDetail, type GridListSelectEvent, type GridListTickleDetail, type GridListTickleEvent, type GridListViewState, type GridListViewportChangeDetail, type GridListViewportChangeEvent, type ListDragEntry, type ListDragPreview, type ListDragPreviewContext, type ListDragPreviewRenderer, type ListDragSource, type ListGroupBy, type ListGroupChangeDetail, type ListGroupChangeEvent, type ListGroupInfo, type ListGroupLabel, type ListGroupToggleDetail, type ListGroupToggleEvent, type ListInteractionMode, type ListNativeDragStartDetail, type ListNativeDragStartEvent, type ListSelectionMode };

package/dist/grid-list.js

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

package/dist/{incr-search-JIhwB49y.js → incr-search-CgbL-OlS.js}

@@ -572,6 +572,8 @@ var ListSearchController = class {
 	#matches = [];
 	/** Whether a filter has been pushed to the adapter and still needs undoing. */
 	#filterActive = false;
+	/** A filter committed with Enter (sticky) that stays applied while the popover is closed. */
+	#kept = false;
 	constructor(host, options) {
 		this.#host = host;
 		this.#adapter = options.adapter;
@@ -579,6 +581,7 @@ var ListSearchController = class {
 		this.#modes = LIST_SEARCH_MODES.filter((m) => requested.has(m));
 		this.#mode = this.#modes[0] ?? `filter`;
 		this.#placeholder = options.placeholder ?? `Search…`;
+		this.stickyFilter = options.stickyFilter ?? false;
 		this.#search = createIncrSearch({
 			selector: (i) => i.label,
 			fzf: options.fzf
@@ -605,6 +608,7 @@ var ListSearchController = class {
 		this.#modes = LIST_SEARCH_MODES.filter((m) => set.has(m));
 		if (!this.#modes.includes(this.#mode)) {
 			if (this.#open) this.close();
+			this.clearFilter();
 			this.#mode = this.#modes[0] ?? `filter`;
 		}
 		this.#host.requestUpdate();
@@ -624,6 +628,10 @@ var ListSearchController = class {
 	get matchIndex() {
 		return this.#matchIndex;
 	}
+	/** The query of a filter kept applied after the popover closed (see {@link stickyFilter}). */
+	get keptFilter() {
+		return this.#kept ? this.#query : void 0;
+	}
 	hostConnected() {
 		const container = this.#adapter.container?.();
 		if (container) {
@@ -633,29 +641,47 @@ var ListSearchController = class {
 				subtree: false
 			});
 		}
+		this.#host.addEventListener(`keydown`, this.#onHostKeydown);
 		this.refresh();
 	}
 	hostDisconnected() {
 		this.#observer?.disconnect();
 		this.#observer = void 0;
-		if (this.#open) this.#teardownEffects();
+		this.#host.removeEventListener(`keydown`, this.#onHostKeydown);
+		if (this.#open || this.#kept) this.#teardownEffects();
 		this.#open = false;
+		this.#kept = false;
 		this.#unsub?.();
 		this.#unsub = void 0;
 		this.#search.dispose();
 	}
-	/** Open the popover in `mode` (clamped to the available set). */
+	/**
+	* Open the popover in `mode` (clamped to the available set). When it is
+	* already open the query is kept: the mode switches if it differs and the
+	* input is refocused with its text selected.
+	*/
 	open(mode) {
 		if (!this.enabled) return;
+		if (this.#open) {
+			this.switchMode(this.#modes.includes(mode) ? mode : this.#mode);
+			this.focus();
+			return;
+		}
 		this.#mode = this.#modes.includes(mode) ? mode : this.#modes[0];
 		this.#open = true;
-		this.#query = ``;
+		const resume = this.#kept;
+		this.#kept = false;
+		if (!resume) this.#query = ``;
 		this.#matchIndex = 0;
 		this.#matches = [];
+		if (resume && this.#mode !== `filter` && this.#filterActive) {
+			this.#adapter.applyFilter(void 0);
+			this.#filterActive = false;
+		}
 		this.refresh();
-		this.#search.setQuery(``);
+		this.#search.setQuery(this.#query);
 		this.#host.requestUpdate();
-		this.#host.updateComplete.then(() => this.#focusInput());
+		this.#host.updateComplete.then(() => this.#focusInput(resume));
 	}
 	/** Close the popover, restoring any live filter. Selection / cursor stay put. */
 	close() {
@@ -668,6 +694,16 @@ var ListSearchController = class {
 		this.#host.requestUpdate();
 		this.#host.focus();
 	}
+	/** Remove a filter kept by {@link stickyFilter}. No-op when none is kept. */
+	clearFilter() {
+		if (!this.#kept) return;
+		this.#kept = false;
+		this.#teardownEffects();
+		this.#query = ``;
+		this.#matches = [];
+		this.#search.clearQuery();
+		this.#host.requestUpdate();
+	}
 	setQuery(query) {
 		this.#query = query;
 		this.#matchIndex = 0;
@@ -685,6 +721,21 @@ var ListSearchController = class {
 		this.#host.requestUpdate();
 		this.#host.updateComplete.then(() => this.#focusInput());
 	}
+	/**
+	* Step through {@link registeredModes} (wrapping) and switch to the result.
+	* Bound to Tab / Shift+Tab in the popover input.
+	*/
+	cycleMode(delta) {
+		const n = this.#modes.length;
+		if (n < 2) return;
+		const index = this.#modes.indexOf(this.#mode);
+		this.switchMode(this.#modes[(index + delta + n) % n]);
+	}
+	/** Refocus the popover input (text selected) without touching the query. No-op when closed. */
+	focus() {
+		if (!this.#open) return;
+		this.#host.updateComplete.then(() => this.#focusInput(true));
+	}
 	/** One-shot: turn the current match set into the selection, staying in the current mode. */
 	selectMatches() {
 		if (!this.#modes.includes(`select`)) return;
@@ -697,8 +748,19 @@ var ListSearchController = class {
 	prevMatch() {
 		this.#cycle(-1);
 	}
-	/** Enter: in `navigate` activate the current match; then close. */
+	/**
+	* Enter: in `navigate` activate the current match; then close. In `filter`
+	* with {@link stickyFilter} and a query, close but keep the filter.
+	*/
 	commit() {
+		if (this.#mode === `filter` && this.stickyFilter && this.#filterActive) {
+			this.#open = false;
+			this.#kept = true;
+			clearHighlights({ key: this.#highlightKey });
+			this.#host.requestUpdate();
+			this.#host.focus();
+			return;
+		}
 		if (this.#mode === `navigate`) {
 			const item = this.#itemFor(this.#matches[this.#matchIndex]);
 			if (item) {
@@ -729,6 +791,7 @@ var ListSearchController = class {
 	/** Popover markup. Pair with `listSearchStyles` in the host's `static styles`. */
 	renderField() {
 		if (!this.enabled) return nothing;
+		if (this.#kept) return this.#renderKeptFilter();
 		const hasQuery = this.#query.trim().length > 0;
 		const others = this.#modes.filter((m) => m !== this.#mode);
 		const showSelectMatches = this.#modes.includes(`select`) && this.#mode !== `select`;
@@ -754,15 +817,33 @@ var ListSearchController = class {
         </div>
         ${others.length > 0 || showSelectMatches ? html`
               <div class="list-search-switch">
-                ${others.map((m) => html`<button class="list-search-btn" @click=${() => this.switchMode(m)}>${m}</button>`)}
+                ${others.map((m) => html`<button class="list-search-btn" title=${this.#switchTitle(m)} @click=${() => this.switchMode(m)}>${m}</button>`)}
                 ${showSelectMatches ? html`<button class="list-search-btn" @click=${() => this.selectMatches()}>Select matches</button>` : nothing}
               </div>
             ` : nothing}
       </div>
     `;
 	}
-	#focusInput() {
-		this.#host.renderRoot?.querySelector(`.${INPUT_CLASS}`)?.focus();
+	#renderKeptFilter() {
+		return html`
+      <div class="list-search list-search-kept" part="search-kept">
+        <button class="list-search-kept-label" title="Edit filter" @click=${() => this.open(`filter`)}>
+          Filtered: <strong>${this.#query}</strong> <span class="list-search-count">(${this.#matches.length})</span>
+        </button>
+        <button class="list-search-icon-btn" title="Clear filter (Esc)" @click=${() => this.clearFilter()}><ixfx-icon name="close" size="14"></ixfx-icon></button>
+      </div>
+    `;
+	}
+	#focusInput(selectText = false) {
+		const input = this.#host.renderRoot?.querySelector(`.${INPUT_CLASS}`);
+		input?.focus();
+		if (selectText) input?.select();
+	}
+	/** Switch-row button title, naming the Tab chord that reaches `mode`. */
+	#switchTitle(mode) {
+		const n = this.#modes.length;
+		const index = this.#modes.indexOf(this.#mode);
+		return `Switch to ${mode} (${[this.#modes[(index + 1) % n] === mode ? `Tab` : void 0, this.#modes[(index - 1 + n) % n] === mode ? `Shift+Tab` : void 0].filter((k) => k !== void 0).join(` / `)})`;
 	}
 	#onInput = (e) => {
 		this.setQuery(e.target.value);
@@ -779,6 +860,13 @@ var ListSearchController = class {
 				e.stopPropagation();
 				this.commit();
 				break;
+			case `Tab`:
+				if (this.#modes.length > 1 && !e.ctrlKey && !e.metaKey && !e.altKey) {
+					e.preventDefault();
+					e.stopPropagation();
+					this.cycleMode(e.shiftKey ? -1 : 1);
+				}
+				break;
 			case `ArrowDown`:
 				if (this.#mode === `navigate`) {
 					e.preventDefault();
@@ -791,6 +879,13 @@ var ListSearchController = class {
 			}
 		}
 	};
+	/** Escape on the host clears a kept filter (the open popover's input handles its own Escape). */
+	#onHostKeydown = (e) => {
+		if (!this.#kept || this.#open || e.key !== `Escape` || e.defaultPrevented) return;
+		e.preventDefault();
+		e.stopPropagation();
+		this.clearFilter();
+	};
 	#cycle(delta) {
 		if (this.#matches.length === 0) return;
 		const n = this.#matches.length;
@@ -808,9 +903,14 @@ var ListSearchController = class {
 		return this.#adapter.highlightKey ?? DEFAULT_HIGHLIGHT_KEY;
 	}
 	#onState(state) {
-		if (!this.#open) return;
+		if (!this.#open && !this.#kept) return;
 		const hasQuery = state.query.trim().length > 0;
 		this.#matches = hasQuery ? [...state.results] : [];
+		if (!this.#open) {
+			this.#adapter.applyFilter(new Set(this.#matches.map((m) => m.item.key)));
+			this.#host.requestUpdate();
+			return;
+		}
 		if (this.#matchIndex >= this.#matches.length) this.#matchIndex = 0;
 		this.#applyMode();
 		this.#host.requestUpdate();
@@ -970,6 +1070,36 @@ const listSearchStyles = css`
   .list-search-icon-btn:hover {
     color: inherit;
   }
+
+  .list-search-kept {
+    flex-direction: row;
+    align-items: center;
+    padding: 2px 4px 2px 6px;
+  }
+
+  .list-search-kept-label {
+    padding: 0;
+    background: transparent;
+    border: none;
+    color: inherit;
+    cursor: pointer;
+    font: inherit;
+    white-space: nowrap;
+  }
+
+  .list-search-kept-label:hover strong {
+    text-decoration: underline;
+  }
+
+  /* Matched characters for hosts that paint highlights inside their own shadow
+     root, which a page-level ::highlight() rule cannot reach. Light-DOM items
+     (e.g. detail-list rows) still need a page-level rule. */
+  ::highlight(incr-search-highlight),
+  ::highlight(grid-list-search),
+  ::highlight(data-grid-search) {
+    background: var(--search-highlight-bg, var(--accent, #60a5fa));
+    color: var(--search-highlight-color, var(--accent-text, #000));
+  }
 `;
 //#endregion
 //#region src/incr-search/tree-list-search-adapter.ts

package/dist/incr-search.d.ts

@@ -1,2 +1,2 @@
-import { A as FuzzySearch, C as ListSearchControllerOptions, D as IncrSearchTreeOptions, E as IncrSearchTreeController, F as IncrSearchChangeCallback, I as IncrSearchOptions, L as IncrSearchResult, M as HighlightOptions, N as HighlightTarget, O as createAcCompletionProvider, P as IncrSearch, R as IncrSearchState, S as ListSearchController, T as ListSearchMode, _ as DataListSearchAdapterOptions, a as RegisterListSearchCommandsOptions, b as LIST_SEARCH_MODES, c as applyHighlights, d as createFuzzySearch, f as ElementIncrSearch, g as createElementListSearchAdapter, h as ElementListSearchHost, i as LIST_SEARCH_COMMAND_IDS, j as FuzzySearchOptions, k as ElementIncrSearchOptions, l as buildHighlightTargets, m as ElementListSearchAdapterOptions, n as createTreeListSearchAdapter, o as registerListSearchCommands, p as createElementIncrSearch, r as listSearchStyles, s as createIncrSearch, t as TreeListSearchAdapterOptions, u as clearHighlights, v as DataListSearchItem, w as ListSearchHost, x as ListSearchAdapter, y as createDataListSearchAdapter } from "./index-Dr80Zdl6.js";
+import { A as FuzzySearch, C as ListSearchControllerOptions, D as IncrSearchTreeOptions, E as IncrSearchTreeController, F as IncrSearchChangeCallback, I as IncrSearchOptions, L as IncrSearchResult, M as HighlightOptions, N as HighlightTarget, O as createAcCompletionProvider, P as IncrSearch, R as IncrSearchState, S as ListSearchController, T as ListSearchMode, _ as DataListSearchAdapterOptions, a as RegisterListSearchCommandsOptions, b as LIST_SEARCH_MODES, c as applyHighlights, d as createFuzzySearch, f as ElementIncrSearch, g as createElementListSearchAdapter, h as ElementListSearchHost, i as LIST_SEARCH_COMMAND_IDS, j as FuzzySearchOptions, k as ElementIncrSearchOptions, l as buildHighlightTargets, m as ElementListSearchAdapterOptions, n as createTreeListSearchAdapter, o as registerListSearchCommands, p as createElementIncrSearch, r as listSearchStyles, s as createIncrSearch, t as TreeListSearchAdapterOptions, u as clearHighlights, v as DataListSearchItem, w as ListSearchHost, x as ListSearchAdapter, y as createDataListSearchAdapter } from "./index-CUErGhCg.js";
 export { type DataListSearchAdapterOptions, type DataListSearchItem, type ElementIncrSearch, type ElementIncrSearchOptions, type ElementListSearchAdapterOptions, type ElementListSearchHost, type FuzzySearch, type FuzzySearchOptions, type HighlightOptions, type HighlightTarget, type IncrSearch, type IncrSearchChangeCallback, IncrSearchTreeController as IncrSearchMillerController, IncrSearchTreeController, type IncrSearchTreeOptions as IncrSearchMillerOptions, type IncrSearchTreeOptions, type IncrSearchOptions, type IncrSearchResult, type IncrSearchState, LIST_SEARCH_COMMAND_IDS, LIST_SEARCH_MODES, type ListSearchAdapter, ListSearchController, type ListSearchControllerOptions, type ListSearchHost, type ListSearchMode, type RegisterListSearchCommandsOptions, type TreeListSearchAdapterOptions, applyHighlights, buildHighlightTargets, clearHighlights, createAcCompletionProvider, createDataListSearchAdapter, createElementIncrSearch, createElementListSearchAdapter, createFuzzySearch, createIncrSearch, createTreeListSearchAdapter, listSearchStyles, registerListSearchCommands };

package/dist/incr-search.js

@@ -1,3 +1,3 @@
 import { n as buildHighlightTargets, r as clearHighlights, t as applyHighlights } from "./highlight-B-eQrhhb.js";
-import { a as LIST_SEARCH_COMMAND_IDS, c as createElementListSearchAdapter, d as createDataListSearchAdapter, f as IncrSearchTreeController, h as createFuzzySearch, i as ListSearchController, m as createAcCompletionProvider, n as listSearchStyles, o as registerListSearchCommands, p as createIncrSearch, r as LIST_SEARCH_MODES, s as createElementIncrSearch, t as createTreeListSearchAdapter } from "./incr-search-JIhwB49y.js";
+import { a as LIST_SEARCH_COMMAND_IDS, c as createElementListSearchAdapter, d as createDataListSearchAdapter, f as IncrSearchTreeController, h as createFuzzySearch, i as ListSearchController, m as createAcCompletionProvider, n as listSearchStyles, o as registerListSearchCommands, p as createIncrSearch, r as LIST_SEARCH_MODES, s as createElementIncrSearch, t as createTreeListSearchAdapter } from "./incr-search-CgbL-OlS.js";
 export { IncrSearchTreeController as IncrSearchMillerController, IncrSearchTreeController, LIST_SEARCH_COMMAND_IDS, LIST_SEARCH_MODES, ListSearchController, applyHighlights, buildHighlightTargets, clearHighlights, createAcCompletionProvider, createDataListSearchAdapter, createElementIncrSearch, createElementListSearchAdapter, createFuzzySearch, createIncrSearch, createTreeListSearchAdapter, listSearchStyles, registerListSearchCommands };

package/dist/{index-CYRc6Dah.d.ts → index-Bnm-kKGC.d.ts}

@@ -2,7 +2,7 @@ import { E as TreeSearchHost, M as TreeDataModel, a as TreeComponent, i as TreeC
 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 ViewStateBase, n as ScrollState, t as GetViewStateOptions } from "./types-LU1u0CB8.js";
 import "./index-9ttcdwlL.js";
-import { S as ListSearchController } from "./index-Dr80Zdl6.js";
+import { S as ListSearchController } from "./index-CUErGhCg.js";
 import { n as TickledController } from "./tickled-controller-DodxD3eQ.js";
 import { LitElement, PropertyValues, TemplateResult, nothing } from "lit";
 import { CommandRegistry } from "@clinth/ui-commands";