@ixfx/components 0.7.2 → 0.7.4

package/dist/ac-text.js

@@ -1,5 +1,5 @@
 import { r as clearHighlights, t as applyHighlights } from "./highlight-B-eQrhhb.js";
-import { t as TickledController } from "./tickled-controller-h9GmJ_bU.js";
+import { t as TickledController } from "./tickled-controller-C66DgJHl.js";
 import { n as tickledStyles } from "./tickled-styles-BrAHEj1q.js";
 import { t as themeFallbacks } from "./fallbacks-DNI9xt0F.js";
 import { t as popupSurfaceStyles } from "./popup-D80sj2QC.js";

package/dist/ac-token.js

@@ -1,4 +1,4 @@
-import { t as TickledController } from "./tickled-controller-h9GmJ_bU.js";
+import { t as TickledController } from "./tickled-controller-C66DgJHl.js";
 import { n as tickledStyles, t as tickledItemStyles } from "./tickled-styles-BrAHEj1q.js";
 import { t as themeFallbacks } from "./fallbacks-DNI9xt0F.js";
 import { n as safeCustomElement, t as __decorate } from "./decorate-VRK8rslU.js";

package/dist/crumbs.js

@@ -1,9 +1,9 @@
-import { t as TickledController } from "./tickled-controller-h9GmJ_bU.js";
+import { t as TickledController } from "./tickled-controller-C66DgJHl.js";
 import { n as tickledStyles, t as tickledItemStyles } from "./tickled-styles-BrAHEj1q.js";
 import { t as themeFallbacks } from "./fallbacks-DNI9xt0F.js";
 import { n as safeCustomElement, t as __decorate } from "./decorate-VRK8rslU.js";
-import "./interaction-D5XdKzbR.js";
-import "./menu-item-D2S4i8u1.js";
+import "./interaction-Cr13azbM.js";
+import "./menu-item-Bx-Fs7jq.js";
 import { t as collectDataResult } from "./data-provider-35TyWclX.js";
 import { t as scrollFadeStyles } from "./scroll-fade-CAs1EabA.js";
 import "./narrowed-text.js";

package/dist/{data-grid-Bh4YrQGK.d.ts → data-grid-BddUjAti.d.ts}

@@ -51,6 +51,8 @@ type BuiltInFormatterOptions = {
 type DataGridGetRowKey<R> = (row: R, index: number) => string;
 type DataGridGroupBy<R> = string | ((row: R) => string);
 type DataGridGroupLabel = (groupKey: string, rows: readonly unknown[]) => string;
+/** Whether the data-grid renders its built-in header column/group menu. */
+type DataGridColumnMenu = `auto` | `none`;
 //#endregion
 //#region src/data-grid/data-grid.d.ts
 type DataGridSortDetail = {
@@ -108,6 +110,7 @@ interface DataGridElementEventMap {
   'datagrid-group-change': DataGridGroupChangeEvent;
 }
 declare class DataGridElement extends LitElement {
+  #private;
   static styles: import("lit").CSSResult[];
   columns: DataGridColumn[];
   rows: unknown[];
@@ -125,6 +128,12 @@ declare class DataGridElement extends LitElement {
   /** Columns keys that can be grouped by; undefined = all groupable columns */
   groupableColumns: string[] | undefined;
   crossGroupSelection: boolean;
+  /**
+   * `auto` (default): render the built-in header column/group menu.
+   * `none`: don't render it — for hosts that supply their own column UI via
+   * `column.visible` + `datagrid-column-visibility`.
+   */
+  columnMenu: DataGridColumnMenu;
   globalFormatter?: GlobalFormatter;
   private _columnFormatters;
   private _selectedKeys;
@@ -169,6 +178,29 @@ declare class DataGridElement extends LitElement {
   private _anchorKey;
   private _scrollRowIntoView;
   private _getRowForKey;
+  /** The selected row keys (read-only). */
+  get selectedKeys(): ReadonlySet<string>;
+  /** Replace the selection with these row keys (clamped to known rows). */
+  set selectedKeys(keys: Iterable<string>);
+  /**
+   * Replace the selection with the given row keys. Unknown keys are dropped;
+   * in a single-select mode only the last surviving key is kept;
+   * `selectionMode="none"` clears. Fires `datagrid-select` with the previous
+   * set when the selection actually changes.
+   */
+  selectKeys(keys: Iterable<string>): void;
+  /** The row key under the cursor, or `undefined`. */
+  get tickledKey(): string | undefined;
+  /** Move the cursor to this row key and scroll it into view. */
+  tickleRow(key: string): void;
+  /**
+   * Append rows without the full O(n log n) rebuild that reassigning `rows`
+   * incurs. `rows` still gets a new array reference (reactivity is preserved),
+   * but the derived arrays are extended over the appended slice only. When a
+   * sort is active the new rows show unsorted for one frame, then a single
+   * coalesced re-sort runs. Scroll position, selection and cursor are kept.
+   */
+  appendRows(rows: readonly unknown[]): void;
   private _replaceSelection;
   private _toggleSelection;
   private _rangeSelectTo;
@@ -212,4 +244,4 @@ interface DataGridElement {
 }
 //#endregion
 export { DataGridSortDetail as _, DataGridColumnReorderDetail as a, DataGridColumnResizeEvent as c, DataGridElement as d, DataGridElementEventMap as f, DataGridSelectEvent as g, DataGridSelectDetail as h, DataGridCellEditEvent as i, 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, DataGridSortEvent as v };
-//# sourceMappingURL=data-grid-Bh4YrQGK.d.ts.map
+//# sourceMappingURL=data-grid-BddUjAti.d.ts.map

package/dist/data-grid-BddUjAti.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-grid-BddUjAti.d.ts","names":[],"sources":["../src/data-grid/types.ts","../src/data-grid/data-grid.ts"],"mappings":";;;KAAY;KACA;KACA;KACA;WAA+B;WAAsB,WAAW;;KAChE;KAEA,sBAAsB;WACvB,KAAK;WACL,QAAQ,eAAe;WACvB;WACA;WACA;EACT,SAAS;EACT;;KAEU,sBAAsB,gBAAgB,KAAK,sBAAsB;KAEjE,eAAe;EACzB;EACA;EACA;EACA;EACA;EACA;EACA;EACA,UAAU,GAAG,GAAG,GAAG;EACnB;EACA;EACA;EACA,YAAY,KAAK,GAAG,KAAK,eAAe,IAAI;EAC5C;EACA;EACA;EACA,SAAS,qBAAqB,sBAAsB;EACpD,gBAAgB;IAAyB;IAAe;;EACxD,aAAa,gBAAgB,KAAK,GAAG,KAAK,eAAe;;KAG/C,mBAAmB,gBAAgB,oBAAoB;KAEvD;KAEA;KACA;EAA4B;;KAE5B,kBAAkB,MAAM,KAAK,GAAG;KAChC,gBAAgB,gBAAgB,KAAK;KACrC,sBAAsB,kBAAkB;;KAGxC;;;KCrCA;WAAgC,MAAM;WAA4B,UAAU;;KAC5E,oBAAoB,YAAY;KAChC;WAAkC,cAAc;WAA8B,UAAU;;KACxF,sBAAsB,YAAY;KAClC;WAAyC;WAAuB;WAAqB,kBAAkB;;KACvG,6BAA6B,YAAY;KACzC;WAAwC;WAAsB;;KAC9D,4BAA4B,YAAY;KACxC;WAA4C;WAAsB;;KAClE,gCAAgC,YAAY;KAC5C;WAAqC;WAAyB;WAAyB;WAA2B;;KAClH,yBAAyB,YAAY;KACrC;WAAoC;WAAyB;WAAyB;WAA4B;;KAClH,wBAAwB,YAAY;KAEpC;WAAuC,SAAS;;KAChD,2BAA2B,YAAY;UAClC;EACf,iBAAiB;EACjB,mBAAmB;EACnB,2BAA2B;EAC3B,0BAA0B;EAC1B,8BAA8B;EAC9B,uBAAuB;EACvB,sBAAsB;EACtB,yBAAyB;;cAId,wBAAwB;;SACnB,sBAAM;EAoGK,SAAS;EACT;EAC8B,eAAe;EACb,iBAAiB;EAC5C,WAAW;EACU;EACrB,WAAW;EACX,oBAAoB;EACpB,sBAAsB,cAAc,KAAK;EAC9B,aAAa;EAExB,SAAS;EACiB;EAC1B,YAAY;;EAEZ;EACgD;;;;;;EAM1B,YAAY;EAClC,kBAAkB;UAC1C;UAES;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UAEW;UACK;UAEzB;UAKA;UACA;UACA;UAMA;UACA;UACA;UACA;UAGA;EAEC;EAQA;UAWD;YAgBW;YAaA,QAAQ,SAAS;YAmBjB,WAAW,SAAS;UA4D/B;UAQA;UAiCA;UAOA;UAoBA;UAYA;UAcA;UA0BA;UAKA;UAMA;UAsFA;UAYA;UAEA;UAcA;;MAQJ,gBAAgB;;MAKhB,aAAa,MAAM;;;;;;;EAUvB,WAAW,MAAM;;MA0Bb;;EAKJ,UAAU;;;;;;;;EAcV,WAAW;UA8CH;UAiBA;UAsBA;UAmCA;UAsKA;UAUA;UAKA;UAQA;;EAeR,UAAU,gBAAgB;;EAK1B,aAAa;EAWb;EAIA,mBAAmB,mBAAmB,aAAa,8BAA8B,6BAA6B,UAAU;UAkBhH;UAWA;UAYA;UAyBA;UACA;UA2BA;UAYA;UAkCA;EAoBR;IAAqB;IAAkB;IAAgB;IAAkB;;UASjE;UAaA;YAQW,wBAAM;;QAyMnB;YACI;IAAwB,kBAAkB;;;UAErC;EACf,oBAAoB,gBAAgB,yBAAyB,MAAM,GAAG,WAAW,MAAM,iBAAiB,OAAO,wBAAwB,aAAa,oBAAoB,sCAAsC,cAAc,UAAU,oCAAoC,oBAAoB;EAC9R,uBAAuB,gBAAgB,yBAAyB,MAAM,GAAG,WAAW,MAAM,iBAAiB,OAAO,wBAAwB,aAAa,oBAAoB,mCAAmC,cAAc,UAAU,oCAAoC,oBAAoB"}

package/dist/data-grid.d.ts

@@ -1,2 +1,2 @@
-import { _ as DataGridSortDetail, a as DataGridColumnReorderDetail, c as DataGridColumnResizeEvent, d as DataGridElement, f as DataGridElementEventMap, g as DataGridSelectEvent, h as DataGridSelectDetail, i as DataGridCellEditEvent, 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 DataGridSortEvent } from "./data-grid-Bh4YrQGK.js";
+import { _ as DataGridSortDetail, a as DataGridColumnReorderDetail, c as DataGridColumnResizeEvent, d as DataGridElement, f as DataGridElementEventMap, g as DataGridSelectEvent, h as DataGridSelectDetail, i as DataGridCellEditEvent, 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 DataGridSortEvent } from "./data-grid-BddUjAti.js";
 export { DataGridCellClickDetail, DataGridCellClickEvent, DataGridCellEditDetail, DataGridCellEditEvent, DataGridColumnReorderDetail, DataGridColumnReorderEvent, DataGridColumnResizeDetail, DataGridColumnResizeEvent, DataGridColumnVisibilityDetail, DataGridColumnVisibilityEvent, DataGridElement, DataGridElementEventMap, DataGridGroupChangeDetail, DataGridGroupChangeEvent, DataGridSelectDetail, DataGridSelectEvent, DataGridSortDetail, DataGridSortEvent };

package/dist/data-grid.js

@@ -1,10 +1,11 @@
-import { t as TickledController } from "./tickled-controller-h9GmJ_bU.js";
+import { t as TickledController } from "./tickled-controller-C66DgJHl.js";
 import { n as tickledStyles, t as tickledItemStyles } from "./tickled-styles-BrAHEj1q.js";
 import { t as themeFallbacks } from "./fallbacks-DNI9xt0F.js";
 import { n as safeCustomElement, t as __decorate } from "./decorate-VRK8rslU.js";
-import "./interaction-D5XdKzbR.js";
+import { i as listItemFadeKeyframes } from "./list-item-animation-DuiwgN3l.js";
+import "./interaction-Cr13azbM.js";
 import { t as createDragGhost } from "./drag-ghost-DtSDvjri.js";
-import "./menu-CXDFJxNm.js";
+import "./menu-Bg90Qr0B.js";
 import { LitElement, css, html, nothing } from "lit";
 import { property, query, state } from "lit/decorators.js";
 import { repeat } from "lit/directives/repeat.js";
@@ -24,6 +25,7 @@ let DataGridElement = class DataGridElement extends LitElement {
 		this.groupBy = null;
 		this.allowGrouping = false;
 		this.crossGroupSelection = false;
+		this.columnMenu = `auto`;
 		this._columnFormatters = /* @__PURE__ */ new Map();
 		this._selectedKeys = /* @__PURE__ */ new Set();
 		this._scrollTop = 0;
@@ -46,10 +48,16 @@ let DataGridElement = class DataGridElement extends LitElement {
 		this._sortedRows = [];
 		this._flat = [];
 		this._flatKeys = [];
+		this.#prevFlatKeys = [];
+		this.#enteringRowKeys = /* @__PURE__ */ new Set();
+		this.#rowReflowTimer = 0;
+		this.#dataGridRenderedOnce = false;
 		this._visibleColumns = [];
 		this._colOffsets = [];
 		this._colWidthSum = 0;
 		this._raf = 0;
+		this.#appendInProgress = false;
+		this.#resortRaf = 0;
 		this._drag = null;
 		this._onFocusOut = (e) => {
 			if (this._suppressBlurCommit) return;
@@ -244,6 +252,7 @@ let DataGridElement = class DataGridElement extends LitElement {
 			themeFallbacks,
 			tickledStyles,
 			tickledItemStyles,
+			listItemFadeKeyframes,
 			css`
     :host {
       --data-grid-row-height: 28px;
@@ -300,6 +309,22 @@ let DataGridElement = class DataGridElement extends LitElement {
     .row.item.tickled { background: var(--item-bg-tickled); border: var(--item-border-tickled); color: var(--item-text-tickled); }
     .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); }
+
+    /* Insertion / removal animation. Only while [reflowing] — the ~0.3s after
+       the row set changes — do rows slide (their top transitions) to make or
+       close a gap; a freshly inserted row also fades in. Kept scoped so it
+       never fires while scrolling the virtualised list. */
+    :host([reflowing]) .row.item,
+    :host([reflowing]) .group-row {
+      transition: top var(--data-grid-row-move-duration, 200ms) cubic-bezier(0.2, 0, 0, 1);
+    }
+    .row.item.entering {
+      animation: ixfx-list-item-in var(--data-grid-row-move-duration, 200ms) ease both;
+    }
+    @media (prefers-reduced-motion: reduce) {
+      :host([reflowing]) .row.item, :host([reflowing]) .group-row { transition: none; }
+      .row.item.entering { animation: none; }
+    }
     .cell {
       flex-shrink: 0; display: flex; align-items: center; padding: 0 var(--space-s);
       overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border-right: var(--border-subtle);
@@ -329,6 +354,13 @@ let DataGridElement = class DataGridElement extends LitElement {
   `
 		];
 	}
+	/** Row-key snapshot from the previous update, for the insertion / removal animation. */
+	#prevFlatKeys;
+	#enteringRowKeys;
+	#rowReflowTimer;
+	#dataGridRenderedOnce;
+	#appendInProgress;
+	#resortRaf;
 	connectedCallback() {
 		super.connectedCallback();
 		if (!this.hasAttribute(`tabindex`)) this.tabIndex = 0;
@@ -340,6 +372,10 @@ let DataGridElement = class DataGridElement extends LitElement {
 		this.removeEventListener(`keydown`, this._onKeyDown);
 		this.removeEventListener(`focusout`, this._onFocusOut);
 		cancelAnimationFrame(this._raf);
+		if (this.#rowReflowTimer) {
+			clearTimeout(this.#rowReflowTimer);
+			this.#rowReflowTimer = 0;
+		}
 	}
 	firstUpdated() {
 		new ResizeObserver(() => {
@@ -366,8 +402,10 @@ let DataGridElement = class DataGridElement extends LitElement {
 	willUpdate(changed) {
 		super.willUpdate(changed);
 		this.setAttribute(`data-input-mode`, this._tickled.inputMode);
-		if (changed.has(`rows`) || changed.has(`sortState`) || changed.has(`columns`) || changed.has(`groupBy`) || changed.has(`groupLabel`)) this._sortedRows = this._applySort([...this.rows]);
-		this._rebuildFlat();
+		if (!this.#appendInProgress) {
+			if (changed.has(`rows`) || changed.has(`sortState`) || changed.has(`columns`) || changed.has(`groupBy`) || changed.has(`groupLabel`)) this._sortedRows = this._applySort([...this.rows]);
+			this._rebuildFlat();
+		}
 		this._visibleColumns = this.columns.filter((c) => c.visible !== false);
 		let off = 0;
 		this._colOffsets = this._visibleColumns.map((c) => {
@@ -377,6 +415,40 @@ let DataGridElement = class DataGridElement extends LitElement {
 		});
 		this._colWidthSum = off;
 		if (this.interactionMode === `checked`) this._colWidthSum += 28;
+		this.#noteFlatMutation();
+	}
+	/**
+	* Diff the row-key list against the previous update. Rows that appeared get an
+	* enter fade; any add/remove opens a short `[reflowing]` window so the rows
+	* that shift slide (their `top` transitions) instead of snapping. Bounded in
+	* time so it never bleeds into scroll virtualisation.
+	*/
+	#noteFlatMutation() {
+		const now = this._flatKeys;
+		const prev = this.#prevFlatKeys;
+		this.#prevFlatKeys = now.slice();
+		if (!this.#dataGridRenderedOnce) {
+			this.#dataGridRenderedOnce = true;
+			return;
+		}
+		if (prev.length === 0 || now.length === 0) {
+			this.#enteringRowKeys.clear();
+			return;
+		}
+		const before = new Set(prev);
+		const after = new Set(now);
+		const added = now.filter((k) => !before.has(k));
+		const removed = prev.filter((k) => !after.has(k));
+		if (added.length === now.length || added.length === 0 && removed.length === 0) return;
+		this.#enteringRowKeys = new Set(added);
+		this.toggleAttribute(`reflowing`, true);
+		if (this.#rowReflowTimer) clearTimeout(this.#rowReflowTimer);
+		this.#rowReflowTimer = window.setTimeout(() => {
+			this.#rowReflowTimer = 0;
+			this.#enteringRowKeys.clear();
+			this.toggleAttribute(`reflowing`, false);
+			this.requestUpdate();
+		}, 320);
 	}
 	_getGroupKey(row) {
 		if (!this.groupBy) return null;
@@ -624,6 +696,102 @@ let DataGridElement = class DataGridElement extends LitElement {
 	_getRowForKey(key) {
 		return this._flat.find((f) => f.key === key)?.row;
 	}
+	/** The selected row keys (read-only). */
+	get selectedKeys() {
+		return this._selectedKeys;
+	}
+	/** Replace the selection with these row keys (clamped to known rows). */
+	set selectedKeys(keys) {
+		this.selectKeys(keys);
+	}
+	/**
+	* Replace the selection with the given row keys. Unknown keys are dropped;
+	* in a single-select mode only the last surviving key is kept;
+	* `selectionMode="none"` clears. Fires `datagrid-select` with the previous
+	* set when the selection actually changes.
+	*/
+	selectKeys(keys) {
+		const known = new Set(this._flat.filter((f) => f.type === `row`).map((f) => f.key));
+		let next = new Set([...keys].filter((k) => known.has(k)));
+		const multi = this.selectionMode === `multiple` || this.interactionMode === `checked` || this.interactionMode === `sticky` || this.interactionMode === `vscode`;
+		if (this.selectionMode === `none`) next = /* @__PURE__ */ new Set();
+		else if (!multi && next.size > 1) {
+			const last = [...next].at(-1);
+			next = last === void 0 ? /* @__PURE__ */ new Set() : /* @__PURE__ */ new Set([last]);
+		}
+		const prev = new Set(this._selectedKeys);
+		if (prev.size === next.size && [...next].every((k) => prev.has(k))) return;
+		this._selectedKeys = next;
+		this._anchorKey = [...next].at(-1);
+		this.dispatchEvent(new CustomEvent(`datagrid-select`, {
+			detail: {
+				selectedKeys: new Set(next),
+				previous: prev
+			},
+			bubbles: true,
+			composed: true
+		}));
+	}
+	/** The row key under the cursor, or `undefined`. */
+	get tickledKey() {
+		return this._tickled.tickledId;
+	}
+	/** Move the cursor to this row key and scroll it into view. */
+	tickleRow(key) {
+		if (!this._flatKeys.includes(key)) return;
+		this._tickled.focus(key);
+		this._scrollRowIntoView(key);
+	}
+	/**
+	* Append rows without the full O(n log n) rebuild that reassigning `rows`
+	* incurs. `rows` still gets a new array reference (reactivity is preserved),
+	* but the derived arrays are extended over the appended slice only. When a
+	* sort is active the new rows show unsorted for one frame, then a single
+	* coalesced re-sort runs. Scroll position, selection and cursor are kept.
+	*/
+	appendRows(rows) {
+		if (rows.length === 0) return;
+		const startIdx = this.rows.length;
+		this.#appendInProgress = true;
+		this.rows = [...this.rows, ...rows];
+		const appended = this.rows.slice(startIdx);
+		if (this._sortedRows.length === startIdx) this._sortedRows = [...this._sortedRows, ...appended];
+		else {
+			this._sortedRows = this._applySort([...this.rows]);
+			this._rebuildFlat();
+			this.#appendInProgress = false;
+			this.requestUpdate();
+			return;
+		}
+		this.#appendToFlat(appended, startIdx);
+		this.#appendInProgress = false;
+		this.requestUpdate();
+		if (this.sortState != null) {
+			cancelAnimationFrame(this.#resortRaf);
+			this.#resortRaf = requestAnimationFrame(() => {
+				this._sortedRows = this._applySort([...this.rows]);
+				this._rebuildFlat();
+				this.requestUpdate();
+			});
+		}
+	}
+	#appendToFlat(appended, startIdx) {
+		if (this.groupBy) {
+			this._rebuildFlat();
+			return;
+		}
+		for (let j = 0; j < appended.length; j++) {
+			const idx = startIdx + j;
+			const key = this.getRowKey(appended[j], idx);
+			this._flat.push({
+				type: `row`,
+				key,
+				row: appended[j],
+				idx
+			});
+			this._flatKeys.push(key);
+		}
+	}
 	_replaceSelection(key) {
 		if (this.selectionMode === `none`) return;
 		const prev = new Set(this._selectedKeys);
@@ -979,6 +1147,7 @@ let DataGridElement = class DataGridElement extends LitElement {
 			return last >= 0 ? this._colOffsets[last] + (this._visibleColumns[last].width ?? 150) : 0;
 		})()}px"></div>` : nothing}
           </div>
+          ${this.columnMenu === `none` ? nothing : html`
           <ixfx-menu-trigger label="⚙" placement="bottom-end" @menu-command=${(e) => {
 			const cmd = e.detail.command;
 			const checked = e.detail.checked;
@@ -1018,7 +1187,7 @@ let DataGridElement = class DataGridElement extends LitElement {
                 </ixfx-menu-radio-group>
               ` : nothing}
             </ixfx-menu-container>
-          </ixfx-menu-trigger>
+          </ixfx-menu-trigger>`}
         </div>
         <div class="viewport" @scroll=${this._onScroll}>
           <div class="spacer" style="height:${this._flat.length * rh}px; width:${this._colWidthSum}px">
@@ -1035,7 +1204,7 @@ let DataGridElement = class DataGridElement extends LitElement {
 			const selected = this._selectedKeys.has(rowKey);
 			const tickled = this._tickled.isTickled(rowKey);
 			return html`
-                <div class="row item ${selected ? `selected` : ``} ${tickled ? `tickled` : ``}" style="top:${absIdx * rh}px; height:${rh}px"
+                <div class="row item ${selected ? `selected` : ``} ${tickled ? `tickled` : ``} ${this.#enteringRowKeys.has(rowKey) ? `entering` : ``}" style="top:${absIdx * rh}px; height:${rh}px"
                   data-key=${rowKey}
                   @click=${(e) => {
 				this._onRowClick(rowKey, null, e);
@@ -1206,6 +1375,10 @@ __decorate([property({
 	attribute: `cross-group-selection`,
 	reflect: true
 })], DataGridElement.prototype, "crossGroupSelection", void 0);
+__decorate([property({
+	type: String,
+	attribute: `column-menu`
+})], DataGridElement.prototype, "columnMenu", void 0);
 __decorate([property({ attribute: false })], DataGridElement.prototype, "globalFormatter", void 0);
 __decorate([state()], DataGridElement.prototype, "_selectedKeys", void 0);
 __decorate([state()], DataGridElement.prototype, "_scrollTop", void 0);