@ixfx/components 0.13.0 → 0.13.1

package/dist/types-DQ7KOUIj.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types-DQ7KOUIj.d.ts","names":[],"sources":["../src/common/types.ts"],"mappings":";;KAQY;;EAEV;;EAEA;;EAEA;;EAEA;;EAEA;;;;;;EAMA;;;;;;EAMA;;;;;;;;EAQA;;;;;EAKA;;EAEA;;EAEA;;;;;;;EAOA;;;KAIU;EACV,MAAM;;;;;;;EAON,WAAW;;;;;;;KAQD,uBAAuB;EAAgB,MAAM;EAAU;GAAiB;;;;;;KAOxE,uBAAuB,MAAM,UAAU;;;;;;;KAQvC;;;;;;;;;KAUA;;;;;;;;;KAUA"}

package/dist/{vertical-list-DheZSEmB.d.ts → vertical-list-CqBc-t8w.d.ts}

@@ -1,9 +1,46 @@
-import { F as ListDragPreviewSourceResolver, P as ListDragPreviewRenderer, R as ListNativeDragStartEvent } from "./tree-component-DukLqesg.js";
+import { F as ListDragPreviewSourceResolver, P as ListDragPreviewRenderer, R as ListNativeDragStartEvent } from "./tree-component-Cj8V3uar.js";
 import { n as ListViewportChangeEvent } from "./list-viewport-types-BRZsLcvp.js";
-import { S as ListSearchController } from "./index-BvxHQUME.js";
+import { S as ListSearchController } from "./index-CxZ61DO1.js";
 import { i as ListInteractionMode, l as ListSelectionMode, r as ListElementEventMap } from "./list-selection-types-PjKdhF-a.js";
+import "./editable-label-rzXkjf1H.js";
 import { LitElement, PropertyValues } from "lit";
 import { CommandId, CommandRegistry } from "@clinth/ui-commands";
+//#region src/vertical-list/types.d.ts
+/**
+ * `list-drag-over` / `list-drop`. `key` and `item` are `undefined` when the
+ * drag is over empty list space rather than a row.
+ */
+type ListDropDetail = {
+  readonly key: string | undefined;
+  readonly item: Element | undefined;
+  readonly dataTransfer: DataTransfer;
+};
+type ListDragLeaveDetail = {
+  readonly key: string | undefined;
+};
+type ListContextMenuDetail = {
+  readonly key: string | undefined;
+  readonly item: Element;
+  /** Viewport coordinates to open the menu at. */
+  readonly x: number;
+  readonly y: number;
+  /** The selection at the time of the request — a row that was not selected has been selected first. */
+  readonly selectedKeys: ReadonlySet<string>;
+};
+type ListEditCommitDetail = {
+  readonly key: string | undefined;
+  readonly value: string;
+};
+type ListEditCancelDetail = {
+  readonly key: string | undefined;
+};
+type ListDragOverEvent = CustomEvent<ListDropDetail>;
+type ListDropEvent = CustomEvent<ListDropDetail>;
+type ListDragLeaveEvent = CustomEvent<ListDragLeaveDetail>;
+type ListContextMenuEvent = CustomEvent<ListContextMenuDetail>;
+type ListEditCommitEvent = CustomEvent<ListEditCommitDetail>;
+type ListEditCancelEvent = CustomEvent<ListEditCancelDetail>;
+//#endregion
 //#region src/vertical-list/vertical-list.d.ts
 interface CustomCheckboxOptions {
   renderer: (checked: boolean) => unknown;
@@ -138,6 +175,27 @@ declare class VerticalListElement extends LitElement {
    * `ixfx-grid-list`'s `itemSize`.
    */
   itemHeight: number;
+  /**
+   * Make rows (and the empty space around them) drop targets for native
+   * drags — including OS drags carrying files. The list fires `list-drag-over`
+   * (cancelable: `preventDefault()` accepts the drop), `list-drop` and
+   * `list-drag-leave`, and highlights the row under the drag with
+   * `data-drop-target` (`--list-drop-target-bg`, `--list-drop-target-outline`).
+   */
+  itemsDroppable: boolean;
+  /**
+   * Opt in to in-place rename (`beginEdit`). Called with the typed text and
+   * the row's key when the user commits; return `false` to reject it (the
+   * edit then ends as a cancel). Without it `beginEdit` does nothing and rows
+   * stay plain text.
+   */
+  editValidator: ((value: string, key: string | undefined) => boolean) | undefined;
+  /**
+   * Refuse a drop before any event fires or any highlight shows. `item` is the
+   * row under the drag, or `undefined` over empty space. Only used while
+   * `itemsDroppable` is set.
+   */
+  canDrop: ((item: Element | undefined, dataTransfer: DataTransfer) => boolean) | undefined;
   private readonly selection;
   private tickled;
   private _syncNativeDraggable;
@@ -261,6 +319,24 @@ declare class VerticalListElement extends LitElement {
   private _onClick;
   private _onDblClick;
   private _activateItem;
+  private _onDragOver;
+  private _onDragLeave;
+  private _onDrop;
+  private _onContextMenu;
+  /** The key of the row being edited, if any. */
+  get editingKey(): string | undefined;
+  /**
+   * Edit a row's label in place with an `ixfx-editable-label`. The editor
+   * replaces the row's `[data-edit-label]` element (else the whole row) and
+   * the original content returns when editing ends. Fires `list-edit-commit`
+   * `{ key, value }` when the text changed, otherwise `list-edit-cancel`
+   * `{ key }` (Escape, an unchanged value, or one the label rejects). The list
+   * never rewrites the label itself — update your data in response.
+   *
+   * Returns false when `editValidator` is not set, or the row is unknown or
+   * not currently rendered.
+   */
+  beginEdit(key: string): boolean;
   static styles: import("lit").CSSResult[];
   render(): import("lit").TemplateResult<1>;
 }
@@ -273,7 +349,13 @@ declare global {
 interface VerticalListElementEventMap extends ListElementEventMap {
   'vertical-list-viewport-change': ListViewportChangeEvent;
   'list-native-drag-start': ListNativeDragStartEvent<Element>;
+  'list-drag-over': ListDragOverEvent;
+  'list-drop': ListDropEvent;
+  'list-drag-leave': ListDragLeaveEvent;
+  'list-context-menu': ListContextMenuEvent;
+  'list-edit-commit': ListEditCommitEvent;
+  'list-edit-cancel': ListEditCancelEvent;
 }
 //#endregion
-export { VerticalListElementEventMap as i, CustomCheckboxOptions as n, VerticalListElement as r, AddItemOptions as t };
-//# sourceMappingURL=vertical-list-DheZSEmB.d.ts.map
+export { ListContextMenuDetail as a, ListDragLeaveEvent as c, ListDropEvent as d, ListEditCancelDetail as f, ListEditCommitEvent as h, VerticalListElementEventMap as i, ListDragOverEvent as l, ListEditCommitDetail as m, CustomCheckboxOptions as n, ListContextMenuEvent as o, ListEditCancelEvent as p, VerticalListElement as r, ListDragLeaveDetail as s, AddItemOptions as t, ListDropDetail as u };
+//# sourceMappingURL=vertical-list-CqBc-t8w.d.ts.map

package/dist/vertical-list-CqBc-t8w.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"vertical-list-CqBc-t8w.d.ts","names":[],"sources":["../src/vertical-list/types.ts","../src/vertical-list/vertical-list.ts"],"mappings":";;;;;;;;;;;;KAuBY;WACD;WACA,MAAM;WACN,cAAc;;KAGb;WACD;;KAGC;WACD;WACA,MAAM;;WAEN;WACA;;WAEA,cAAc;;KAGb;WACD;WACA;;KAGC;WACD;;KAGC,oBAAoB,YAAY;KAChC,gBAAgB,YAAY;KAC5B,qBAAqB,YAAY;KACjC,uBAAuB,YAAY;KACnC,sBAAsB,YAAY;KAClC,sBAAsB,YAAY;;;UC+B7B;EACf,WAAW;EACX;EACA;;UAGe;;;;;;EAMf;;cAkCW,4BAA4B;;EAEvC,eAAe;EAGf,iBAAiB;EAGjB,mBAAmB,IAAI;;;;;;EAQvB;;;;;;;;;;;;;;;;;;;EAqBA,oBAAoB,gCAAgC;;;;;;EAQpD;;;;;;EAQA;;;;;EAOA,qBAAqB,wBAAwB;EAG7C,mBAAmB,8BAA8B;;;;;;;;;;;EAajD;;;;;EAOA;;;;;;;;;EAWA,aAAa,eAAe;;;;;;;EAS5B,QAAQ,eAAe;;;;;EAOvB,aAAa,eAAe;;;;;EAO5B,aAAa,eAAe;;;;;;EAQ5B,SAAS,eAAe;;;;;;;;;;;;;;;;;;EAoBxB;;;;;;EAQA;;;;;;;;EAUA;;;;;;;EASA,iBAAiB,eAAe;;;;;;EAQhC,WAAW,MAAM,qBAAqB,cAAc;mBAyCnC;UAeT;UA6EA;;WA6EC,QAAM,qBAAA;;MAYX,YAAY;EA2BP;EA0BA;;;;;;YAkCU;EAwDV,QAAQ,SAAS;;MAgFtB,gBAAgB;;MAKhB,iBAAiB,YAAY;EAIjC,QAAQ,MAAM,kBAAkB,UAAU;;;;;;;EA4B1C,WAAW,MAAM,UAAU;;EA2B3B,YAAY,OAAO,SAAS,WAAW;EAIvC;;;;;;EAmBA,SAAS,gBAAgB;;;;;;EAwBzB,SAAS,WAAW,WAAW,OAAO;EAItC,OAAO,MAAM;EAIb,WAAW,OAAO,SAAS;EAI3B,SAAS,MAAM;EAIf;EAIA;;MAQI,gBAAgB;;MAKhB;;EAMJ,WAAW,MAAM;;EAKjB,gBAAgB,MAAM;;EAKtB,mBAAmB,MAAM;;;;;;EASzB,SAAS;;EAgCT,aAAa,cAAc;;;;;;;;EAW3B;;;;;;;EAuBA;EAsBE,eAAe,0CAA0C,UAAU;;;;;EA2CrE,YAAY,MAAM;;;;;;;;;;;EAclB,WAAW,aAAa;UAmiBhB;UAgBA;UAOA;UAiBA;;;;;;;UA4GA;;;;;UAuBA;UAcA;UAYA;UAQA;UAWA;UAMA;UAIA;UAmEA;UAYA;UAQA;UAaA;UA2BA;UAOA;UAwCA;;MAuCJ;;;;;;;;;;;;EAmBJ,UAAU;SAiEM,sBAAM;EAuLb,wBAAM;;QAeT;YACI;IACR,sBAAsB;;YAGd,4BAA4B;;UAGvB,oCAAoC;EACnD,iCAAiC;EACjC,0BAA0B,yBAAyB;EACnD,kBAAkB;EAClB,aAAa;EACb,mBAAmB;EACnB,qBAAqB;EACrB,oBAAoB;EACpB,oBAAoB"}

package/dist/vertical-list.d.ts

@@ -1,5 +1,5 @@
-import { I as ListDragSource, L as ListNativeDragStartDetail, M as ListDragPreview, N as ListDragPreviewContext, P as ListDragPreviewRenderer, R as ListNativeDragStartEvent, j as ListDragEntry } from "./tree-component-DukLqesg.js";
+import { I as ListDragSource, L as ListNativeDragStartDetail, M as ListDragPreview, N as ListDragPreviewContext, P as ListDragPreviewRenderer, R as ListNativeDragStartEvent, j as ListDragEntry } from "./tree-component-Cj8V3uar.js";
 import { n as ListViewportChangeEvent, t as ListViewportChangeDetail } from "./list-viewport-types-BRZsLcvp.js";
 import { a as ListItemClickDetail, c as ListSelectEvent, d as ListTickleEvent, i as ListInteractionMode, l as ListSelectionMode, n as ListActivateEvent, o as ListItemClickEvent, r as ListElementEventMap, s as ListSelectDetail, t as ListActivateDetail, u as ListTickleDetail } from "./list-selection-types-PjKdhF-a.js";
-import { i as VerticalListElementEventMap, n as CustomCheckboxOptions, r as VerticalListElement, t as AddItemOptions } from "./vertical-list-DheZSEmB.js";
-export { AddItemOptions, CustomCheckboxOptions, type ListActivateDetail, type ListActivateEvent, type ListDragEntry, type ListDragPreview, type ListDragPreviewContext, type ListDragPreviewRenderer, type ListDragSource, type ListElementEventMap, type ListInteractionMode, type ListItemClickDetail, type ListItemClickEvent, type ListNativeDragStartDetail, type ListNativeDragStartEvent, type ListSelectDetail, type ListSelectEvent, type ListSelectionMode, type ListTickleDetail, type ListTickleEvent, type ListViewportChangeDetail, type ListViewportChangeEvent, VerticalListElement, VerticalListElementEventMap };
+import { a as ListContextMenuDetail, c as ListDragLeaveEvent, d as ListDropEvent, f as ListEditCancelDetail, h as ListEditCommitEvent, i as VerticalListElementEventMap, l as ListDragOverEvent, m as ListEditCommitDetail, n as CustomCheckboxOptions, o as ListContextMenuEvent, p as ListEditCancelEvent, r as VerticalListElement, s as ListDragLeaveDetail, t as AddItemOptions, u as ListDropDetail } from "./vertical-list-CqBc-t8w.js";
+export { AddItemOptions, CustomCheckboxOptions, type ListActivateDetail, type ListActivateEvent, type ListContextMenuDetail, type ListContextMenuEvent, type ListDragEntry, type ListDragLeaveDetail, type ListDragLeaveEvent, type ListDragOverEvent, type ListDragPreview, type ListDragPreviewContext, type ListDragPreviewRenderer, type ListDragSource, type ListDropDetail, type ListDropEvent, type ListEditCancelDetail, type ListEditCancelEvent, type ListEditCommitDetail, type ListEditCommitEvent, type ListElementEventMap, type ListInteractionMode, type ListItemClickDetail, type ListItemClickEvent, type ListNativeDragStartDetail, type ListNativeDragStartEvent, type ListSelectDetail, type ListSelectEvent, type ListSelectionMode, type ListTickleDetail, type ListTickleEvent, type ListViewportChangeDetail, type ListViewportChangeEvent, VerticalListElement, VerticalListElementEventMap };

package/dist/vertical-list.js

@@ -7,6 +7,7 @@ import { r as ListDragSelectController, t as ListSelectionController } from "./l
 import { n as animateListItemIn, r as animateListItemOut } from "./list-item-animation-BUoEKi5s.js";
 import { t as scrollFadeStyles } from "./scroll-fade-BrNUIYnm.js";
 import { n as appearanceColor, t as appearanceAbsent } from "./item-appearance-BjcMyauw.js";
+import "./editable-label.js";
 import { LitElement, css, html, render } from "lit";
 import { property } from "lit/decorators.js";
 import { createCommandRegistry } from "@clinth/ui-commands";
@@ -43,6 +44,7 @@ let VerticalListElement = class VerticalListElement extends LitElement {
 		this.keyProperty = ``;
 		this.virtualize = false;
 		this.itemHeight = 0;
+		this.itemsDroppable = false;
 		this.#customWrappers = /* @__PURE__ */ new Map();
 		this.#wrappedElements = /* @__PURE__ */ new Set();
 		this.#itemData = /* @__PURE__ */ new WeakMap();
@@ -162,7 +164,16 @@ let VerticalListElement = class VerticalListElement extends LitElement {
 			this.tickled.handlePointerLeave(e);
 		};
 		this._onKeyDown = (e) => {
-			if (this.search.isOpen) return;
+			if (this.search.isOpen || this.#isEditEvent(e)) return;
+			if (e.key === `ContextMenu` || e.shiftKey && e.key === `F10`) {
+				const id = this.tickled.tickledId;
+				if (id) {
+					e.preventDefault();
+					const rect = id.getBoundingClientRect();
+					this.#requestContextMenu(id, rect.left, rect.bottom);
+				}
+				return;
+			}
 			if ((e.ctrlKey || e.metaKey) && e.key === `a`) {
 				if (this.selection.canSelectAll()) {
 					e.preventDefault();
@@ -216,6 +227,7 @@ let VerticalListElement = class VerticalListElement extends LitElement {
 			}
 		};
 		this._onClick = (e) => {
+			if (this.#isEditEvent(e)) return;
 			if (this.#dragSelect.isDragging || this.#nativeDrag.isDragging || this.#postDragSuppressTimer !== 0) return;
 			const item = this._findListItem(e.composedPath());
 			if (!item) return;
@@ -223,9 +235,60 @@ let VerticalListElement = class VerticalListElement extends LitElement {
 			this.selection.handleClick(item, e);
 		};
 		this._onDblClick = (e) => {
+			if (this.#isEditEvent(e)) return;
 			const item = this._findListItem(e.composedPath());
 			if (item) this._activateItem(item);
 		};
+		this._onDragOver = (e) => {
+			const dt = e.dataTransfer;
+			if (!this.itemsDroppable || !dt || this.#isEditEvent(e)) return;
+			const item = this._findListItem(e.composedPath());
+			if (this.canDrop && !this.canDrop(item, dt)) {
+				this.#clearDropTarget();
+				return;
+			}
+			if (this.#dragOver && this.#dragOver.item !== item) this.#clearDropTarget();
+			this.#dragOver = { item };
+			if (!!this._dispatchCancelable(`list-drag-over`, {
+				key: item ? keyForElement(item) : void 0,
+				item,
+				dataTransfer: dt
+			})) {
+				this.#highlightDropTarget(void 0, false);
+				return;
+			}
+			e.preventDefault();
+			if (dt.dropEffect === `none`) dt.dropEffect = `copy`;
+			this.#highlightDropTarget(item, true);
+		};
+		this._onDragLeave = (e) => {
+			const next = e.relatedTarget;
+			if (next instanceof Node && this.contains(next)) return;
+			this.#clearDropTarget();
+		};
+		this._onDrop = (e) => {
+			const dt = e.dataTransfer;
+			if (!this.itemsDroppable || !dt || this.#isEditEvent(e)) return;
+			const item = this._findListItem(e.composedPath());
+			if (this.canDrop && !this.canDrop(item, dt)) {
+				this.#clearDropTarget();
+				return;
+			}
+			e.preventDefault();
+			this.#dragOver = void 0;
+			this.#highlightDropTarget(void 0, false);
+			this._dispatch(`list-drop`, {
+				key: item ? keyForElement(item) : void 0,
+				item,
+				dataTransfer: dt
+			});
+		};
+		this._onContextMenu = (e) => {
+			if (this.#isEditEvent(e)) return;
+			const item = this._findListItem(e.composedPath());
+			if (!item) return;
+			if (!this.#requestContextMenu(item, e.clientX, e.clientY)) e.preventDefault();
+		};
 	}
 	#customWrappers;
 	#wrappedElements;
@@ -352,6 +415,10 @@ let VerticalListElement = class VerticalListElement extends LitElement {
 		this.addEventListener(`keydown`, this._onKeyDown);
 		this.addEventListener(`click`, this._onClick);
 		this.addEventListener(`dblclick`, this._onDblClick);
+		this.addEventListener(`dragover`, this._onDragOver);
+		this.addEventListener(`dragleave`, this._onDragLeave);
+		this.addEventListener(`drop`, this._onDrop);
+		this.addEventListener(`contextmenu`, this._onContextMenu);
 		for (const el of this.querySelectorAll(ITEM_SELECTOR)) this.#animatedItems.add(el);
 		this.#itemObserver ??= new MutationObserver((records) => this.#onItemsMutated(records));
 		this.#itemObserver.observe(this, { childList: true });
@@ -366,6 +433,12 @@ let VerticalListElement = class VerticalListElement extends LitElement {
 		this.removeEventListener(`keydown`, this._onKeyDown);
 		this.removeEventListener(`click`, this._onClick);
 		this.removeEventListener(`dblclick`, this._onDblClick);
+		this.removeEventListener(`dragover`, this._onDragOver);
+		this.removeEventListener(`dragleave`, this._onDragLeave);
+		this.removeEventListener(`drop`, this._onDrop);
+		this.removeEventListener(`contextmenu`, this._onContextMenu);
+		this.#clearDropTarget();
+		this.#edit = void 0;
 		this.#itemObserver?.disconnect();
 		this.#resizeObserver?.disconnect();
 		this.#resizeObserver = void 0;
@@ -1052,7 +1125,7 @@ let VerticalListElement = class VerticalListElement extends LitElement {
 	}
 	/** Per-attach state the attached sweep can't cover (it only sees the window). */
 	#applyRowState(el) {
-		if (el instanceof HTMLElement) el.draggable = this.itemsDraggable && this._isCheckable(el);
+		if (el instanceof HTMLElement) el.draggable = this.itemsDraggable && this._isCheckable(el) && !el.hasAttribute(`data-editing`);
 		el.removeAttribute(`data-marquee`);
 		el.removeAttribute(`data-drag-origin`);
 	}
@@ -1262,6 +1335,114 @@ let VerticalListElement = class VerticalListElement extends LitElement {
 		if (this.interactionMode !== `manual`) this.selection.replace(item);
 		this._dispatch(`list-activate`, { item });
 	}
+	/** The row (or `undefined` for empty space) the last `list-drag-over` was fired for. */
+	#dragOver;
+	/** Tell the consumer the drag left its last target and drop the highlight. */
+	#clearDropTarget() {
+		const last = this.#dragOver;
+		this.#dragOver = void 0;
+		this.#highlightDropTarget(void 0, false);
+		if (last) this._dispatch(`list-drag-leave`, { key: last.item ? keyForElement(last.item) : void 0 });
+	}
+	/** Mark one row (or, for empty space, the host) as the drop target. */
+	#highlightDropTarget(item, active) {
+		for (const el of this.querySelectorAll(`[data-drop-target]`)) el.removeAttribute(`data-drop-target`);
+		this.toggleAttribute(`data-drop-target`, active && item === void 0);
+		if (active && item) item.setAttribute(`data-drop-target`, ``);
+	}
+	/**
+	* Select the row if it is not already, then fire `list-context-menu`.
+	* Returns false when a listener cancelled it (the native menu is then suppressed).
+	*/
+	#requestContextMenu(item, x, y) {
+		if (!this.selection.selected.has(item) && this.interactionMode !== `manual` && this._isCheckable(item)) this.selection.replace(item);
+		return this._dispatchCancelable(`list-context-menu`, {
+			key: keyForElement(item),
+			item,
+			x,
+			y,
+			selectedKeys: this.selection.selectedKeys
+		});
+	}
+	#edit;
+	/** The key of the row being edited, if any. */
+	get editingKey() {
+		return this.#edit?.key;
+	}
+	#isEditEvent(e) {
+		return this.#edit !== void 0 && e.composedPath().includes(this.#edit.label);
+	}
+	/**
+	* Edit a row's label in place with an `ixfx-editable-label`. The editor
+	* replaces the row's `[data-edit-label]` element (else the whole row) and
+	* the original content returns when editing ends. Fires `list-edit-commit`
+	* `{ key, value }` when the text changed, otherwise `list-edit-cancel`
+	* `{ key }` (Escape, an unchanged value, or one the label rejects). The list
+	* never rewrites the label itself — update your data in response.
+	*
+	* Returns false when `editValidator` is not set, or the row is unknown or
+	* not currently rendered.
+	*/
+	beginEdit(key) {
+		this.#finishEdit();
+		const validate = this.editValidator;
+		if (!validate) return false;
+		const row = this.#itemForKey(key);
+		if (!(row instanceof HTMLElement) || row.parentNode !== this) return false;
+		const container = row.querySelector(`[data-edit-label]`) ?? row;
+		const value = container.getAttribute(`data-edit-value`) ?? container.textContent?.trim() ?? ``;
+		const label = document.createElement(`ixfx-editable-label`);
+		label.mode = `label`;
+		label.value = value;
+		label.validator = (text) => validate(text, key);
+		label.style.cssText = `flex:1;min-width:0;--label-align:left;--label-padding:0 var(--space-xs,3px)`;
+		const edit = {
+			key,
+			row,
+			container,
+			saved: [...container.childNodes],
+			label,
+			committed: void 0,
+			refocus: false
+		};
+		this.#edit = edit;
+		label.addEventListener(`change`, (e) => {
+			e.stopPropagation();
+			edit.committed = e.detail.value;
+		});
+		label.addEventListener(`input`, (e) => e.stopPropagation());
+		label.addEventListener(`keydown`, (e) => {
+			edit.refocus = e.key === `Enter` || e.key === `Escape`;
+		});
+		for (const type of [`pointerdown`, `dragstart`]) label.addEventListener(type, (e) => e.stopPropagation());
+		label.addEventListener(`focusout`, () => this.#finishEdit());
+		container.replaceChildren(label);
+		row.setAttribute(`data-editing`, ``);
+		row.draggable = false;
+		row.scrollIntoView({
+			block: `nearest`,
+			inline: `nearest`
+		});
+		label.updateComplete.then(() => {
+			if (this.#edit === edit) label.shadowRoot?.querySelector(`.content`)?.click();
+		});
+		return true;
+	}
+	/** Restore the row's content and report how the edit ended. */
+	#finishEdit() {
+		const edit = this.#edit;
+		if (!edit) return;
+		this.#edit = void 0;
+		if (edit.container.isConnected) edit.container.replaceChildren(...edit.saved);
+		edit.row.removeAttribute(`data-editing`);
+		this.#applyRowState(edit.row);
+		if (edit.refocus) this.focus();
+		if (edit.committed === void 0) this._dispatch(`list-edit-cancel`, { key: edit.key });
+		else this._dispatch(`list-edit-commit`, {
+			key: edit.key,
+			value: edit.committed
+		});
+	}
 	static {
 		this.styles = [
 			themeFallbacks,
@@ -1422,6 +1603,18 @@ let VerticalListElement = class VerticalListElement extends LitElement {
       opacity: 0.6;
     }
 
+    /* Native drop target: the row under a drag, or the whole list over empty space. */
+    ::slotted([data-drop-target]) {
+      background: var(--list-drop-target-bg, color-mix(in srgb, var(--accent) 25%, transparent));
+      outline: 2px solid var(--list-drop-target-outline, var(--accent));
+      outline-offset: -2px;
+    }
+
+    :host([data-drop-target]) {
+      outline: 2px solid var(--list-drop-target-outline, var(--accent));
+      outline-offset: -2px;
+    }
+
     /* checked mode: checkbox (injected into li) communicates selection — suppress bg highlight */
     :host([interaction-mode="checked"]) ::slotted([data-selected]) {
       background: transparent;
@@ -1494,6 +1687,13 @@ __decorate([property({
 	type: Number,
 	attribute: `item-height`
 })], VerticalListElement.prototype, "itemHeight", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: `items-droppable`,
+	reflect: true
+})], VerticalListElement.prototype, "itemsDroppable", void 0);
+__decorate([property({ attribute: false })], VerticalListElement.prototype, "editValidator", void 0);
+__decorate([property({ attribute: false })], VerticalListElement.prototype, "canDrop", void 0);
 VerticalListElement = __decorate([safeCustomElement(`ixfx-vertical-list`)], VerticalListElement);
 //#endregion
 export { VerticalListElement };