@ixfx/components 0.8.7 → 0.8.9

package/dist/tree.d.ts

@@ -1,8 +1,9 @@
+import { A as TreeDataModelOptions, C as TreeItemDblClickEvent, D as TreeTickleDetail, E as TreeSelectEvent, I as ListNativeDragStartDetail, O as TreeTickleEvent, P as ListDragPreviewRenderer, T as TreeSelectDetail, _ as TreeDropTarget, a as TreeComponent, b as TreeItemClickDetail, c as TreeDragContext, d as TreeDragStartEvent, g as TreeDropPosition, h as TreeDropEvent, i as TreeCollapseEvent, k as TreeDataModel, l as TreeDragEndEvent, m as TreeDropDetail, n as TreeActivateEvent, o as TreeComponentEventMap, p as TreeDropContext, r as TreeCollapseDetail, s as TreeDndMode, t as TreeActivateDetail, u as TreeDragOverEvent, v as TreeExpandDetail, w as TreeSearchHost, x as TreeItemClickEvent, y as TreeExpandEvent } from "./tree-component-BW2iCFq9.js";
 import { a as TreeItem, i as TreeInteractionMode, n as TreeExclusivity, o as TreeNode, r as TreeFilterPredicate, s as TreeSelectionFilter, t as LoadChildrenCallback } from "./types-Bc23SI94.js";
-import { _ as TreeTickleEvent, a as TreeComponent, c as TreeExpandEvent, f as TreeItemDblClickEvent, g as TreeTickleDetail, h as TreeSelectEvent, i as TreeCollapseEvent, l as TreeItemClickDetail, m as TreeSelectDetail, n as TreeActivateEvent, o as TreeComponentEventMap, p as TreeSearchHost, r as TreeCollapseDetail, s as TreeExpandDetail, t as TreeActivateDetail, u as TreeItemClickEvent, v as TreeDataModel, y as TreeDataModelOptions } from "./tree-component-BMpxpdTi.js";
-import { S as ListSearchController } from "./index-DDREWqMm.js";
+import { S as ListSearchController } from "./index--qnhBWZJ.js";
+import { t as ListNativeDragController } from "./list-native-drag-controller-CFyrkKUj.js";
 import { n as TickledController } from "./tickled-controller-C1ZsHpyg.js";
-import { LitElement, PropertyValues, TemplateResult, nothing } from "lit";
+import { LitElement, PropertyValues, ReactiveController, ReactiveControllerHost, TemplateResult, nothing } from "lit";
 import { CommandRegistry } from "@clinth/ui-commands";
 import { TraversableTree } from "@ixfx/collections";
 //#region src/tree/types.d.ts
@@ -34,6 +35,21 @@ declare class TreeBaseElement extends LitElement implements TreeComponent, TreeS
    * disabled. See `docs/infra-incremental.md`.
    */
   searchModes: string | undefined;
+  itemDnd: TreeDndMode;
+  acceptDropTypes: string | undefined;
+  dndExpandHoverMs: number;
+  /**
+   * Whether a drag that only reorders siblings (no dragged node changes parent)
+   * is honoured. Default `true`. Set `reorderable="false"` for models with no
+   * meaningful child order (e.g. a filesystem) — pure-reorder drags then get no
+   * drop indicator and emit no `tree-drop`. Reparenting is unaffected.
+   */
+  reorderable: boolean;
+  dragPreviewRenderer: ListDragPreviewRenderer<TreeNode> | undefined;
+  canDrag: ((ctx: TreeDragContext) => boolean) | undefined;
+  canDrop: ((ctx: TreeDropContext) => boolean) | undefined;
+  parseExternalDrop: ((dt: DataTransfer) => TreeNode[] | undefined) | undefined;
+  applyInternalDrop: boolean;
   protected _expandedKeys: Set<string>;
   protected tickled: TickledController<string>;
   protected _focusedDepth: number;
@@ -42,6 +58,10 @@ declare class TreeBaseElement extends LitElement implements TreeComponent, TreeS
     node: TreeNode;
     depth: number;
   }>;
+  protected get nativeDrag(): ListNativeDragController<TreeNode>;
+  protected get dropState(): TreeDropTarget | undefined;
+  /** Keys of the nodes currently being dragged out of this tree. */
+  protected get nativeDragKeys(): ReadonlySet<string>;
   willUpdate(changedProps: PropertyValues): void;
   /** True while `node` is a fading ghost row (removed / collapsed, still animating out). */
   protected _isLeaving(node: TreeNode): boolean;
@@ -79,6 +99,14 @@ declare class TreeBaseElement extends LitElement implements TreeComponent, TreeS
   protected get _pendingNode(): TreeNode | undefined;
   protected renderLoadingIndicator(): TemplateResult | typeof nothing;
   protected render(): TemplateResult<1>;
+  /** Shared drag-and-drop render state for a row, used by every `_renderNode` variant. */
+  protected _dndRowState(node: TreeNode): {
+    draggable: boolean;
+    dragging: boolean;
+    dropTarget: boolean;
+    dropPosition?: TreeDropTarget[`position`];
+    dropDepth?: number;
+  };
   protected _renderNode(node: TreeNode, depth: number): TemplateResult;
   static styles: import("lit").CSSResult[];
 }
@@ -95,6 +123,11 @@ interface TreeBaseElementEventMap extends TreeComponentEventMap {
   'select': TreeSelectEvent;
   'tickle': TreeTickleEvent;
   'activate': TreeActivateEvent;
+  'list-native-drag-start': CustomEvent<ListNativeDragStartDetail<TreeNode>>;
+  'tree-drag-start': TreeDragStartEvent;
+  'tree-drag-over': TreeDragOverEvent;
+  'tree-drop': TreeDropEvent;
+  'tree-drag-end': TreeDragEndEvent;
 }
 interface TreeBaseElement {
   addEventListener: (<K extends keyof TreeBaseElementEventMap>(type: K, listener: (this: TreeBaseElement, event: TreeBaseElementEventMap[K]) => void, options?: boolean | AddEventListenerOptions) => void) & ((type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions) => void);
@@ -152,5 +185,70 @@ declare class TreeController<T> {
   navigateToValue(predicate: (value: T) => boolean): boolean;
 }
 //#endregion
-export { type LoadChildrenCallback, type TreeActivateDetail, type TreeActivateEvent, TreeBaseElement, TreeBaseElementEventMap, TreeCheckboxState, type TreeCollapseDetail, type TreeCollapseEvent, type TreeComponentEventMap, TreeConfig, TreeController, TreeControllerOptions, TreeDataModel, type TreeDataModelOptions, type TreeExclusivity, type TreeExpandDetail, type TreeExpandEvent, type TreeFilterPredicate, type TreeItem, type TreeItemClickDetail, type TreeItemClickEvent, TreeListElement, type TreeNode, type TreeSelectDetail, type TreeSelectEvent, type TreeSelectionFilter, type TreeTickleDetail, type TreeTickleEvent };
+//#region src/tree/tree-drop-controller.d.ts
+interface TreeDropVisibleRow {
+  readonly key: string;
+  readonly node: TreeNode;
+  readonly depth: number;
+  readonly rect: DOMRect;
+}
+/** What a `dragover` / `drop` DataTransfer resolved to for this tree. */
+interface TreeDropResolvedDrag {
+  readonly source: `internal` | `external`;
+  /** Keys of the dragged nodes (empty for external). */
+  readonly keys: readonly string[];
+  /** The dragged nodes — live nodes for internal, parsed payload for external. */
+  readonly nodes: readonly TreeNode[];
+}
+type TreeDropControllerConfig = {
+  getDndMode: () => `none` | `internal` | `external` | `both`;
+  getExpandHoverMs: () => number;
+  /** Visible rows in display order, each with a fresh viewport rect. Host may cache. */
+  getVisibleRows: () => TreeDropVisibleRow[];
+  getIndentPx: () => number;
+  getScrollContainer: () => HTMLElement | undefined;
+  /** True when `key` is `ancestorKey` or a descendant of it. */
+  isSelfOrDescendant: (ancestorKey: string, key: string) => boolean;
+  /** True when the node is currently expanded in the UI. */
+  isExpanded: (key: string) => boolean;
+  /**
+   * When `false`, an internal drop that would not change any dragged node's
+   * parent (pure sibling reorder, or dropping back into the current parent) is
+   * rejected outright — no indicator, no `tree-drop`.
+   */
+  isReorderAllowed: () => boolean;
+  /** Current parent key of `key`, or `undefined` for a root-level node. */
+  getParentKey: (key: string) => string | undefined;
+  /**
+   * Decide whether this DataTransfer is acceptable and resolve the dragged set.
+   * `phase` is `hover` during dragenter/dragover (DataTransfer is read-protected —
+   * resolve internal drags from the drag registry) and `drop` during drop
+   * (getData is readable; external payloads may be parsed here). Return
+   * `undefined` to reject (the tree will not become a drop target).
+   */
+  resolveDrag: (dataTransfer: DataTransfer, phase: `hover` | `drop`) => TreeDropResolvedDrag | undefined;
+  vet: (ctx: TreeDropContext) => boolean;
+  expandKey: (key: string) => void;
+  /** Fired whenever the resolved drop target changes (undefined = none / rejected). */
+  onDropStateChange: (state: TreeDropTarget | undefined) => void;
+  /** Fired when a drag enters / leaves this tree. */
+  onActiveChange: (active: boolean) => void;
+  commitDrop: (detail: TreeDropDetail) => boolean;
+  onDragEnd: (dropped: boolean) => void;
+};
+declare class TreeDropController implements ReactiveController {
+  #private;
+  constructor(host: ReactiveControllerHost & HTMLElement, config: TreeDropControllerConfig);
+  /** A drag is currently over this tree. */
+  get isDragging(): boolean;
+  /** A drag is over this tree but the current position is not a valid drop. */
+  get isRejected(): boolean;
+  get dropState(): TreeDropTarget | undefined;
+  hostConnected(): void;
+  /** Bind once the shadow `#container` exists (it does not yet at `hostConnected`). */
+  hostUpdated(): void;
+  hostDisconnected(): void;
+}
+//#endregion
+export { type LoadChildrenCallback, type TreeActivateDetail, type TreeActivateEvent, TreeBaseElement, TreeBaseElementEventMap, TreeCheckboxState, type TreeCollapseDetail, type TreeCollapseEvent, type TreeComponentEventMap, TreeConfig, TreeController, TreeControllerOptions, TreeDataModel, type TreeDataModelOptions, type TreeDndMode, type TreeDragContext, type TreeDragEndEvent, type TreeDragOverEvent, type TreeDragStartEvent, type TreeDropContext, TreeDropController, TreeDropControllerConfig, type TreeDropDetail, type TreeDropEvent, type TreeDropPosition, TreeDropResolvedDrag, type TreeDropTarget, TreeDropVisibleRow, type TreeExclusivity, type TreeExpandDetail, type TreeExpandEvent, type TreeFilterPredicate, type TreeItem, type TreeItemClickDetail, type TreeItemClickEvent, TreeListElement, type TreeNode, type TreeSelectDetail, type TreeSelectEvent, type TreeSelectionFilter, type TreeTickleDetail, type TreeTickleEvent };
 //# sourceMappingURL=tree.d.ts.map

package/dist/tree.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tree.d.ts","names":[],"sources":["../src/tree/types.ts","../src/tree/tree-base.ts","../src/tree/tree-list.ts","../src/tree/tree-controller.ts"],"mappings":";;;;;;;;;KAqCY;EACV;;;;cCkBW,wBAAwB,sBAAsB,eAAe;;EAExE,MAAM;EAGN,OAAO;;EAIP,cAAc;EAGd,aAAa;EAGb,iBAAiB;;EAIjB,iBAAiB;EAGjB,cAAc;YAGJ,gBAAc,IAAA;MAEpB,iBAAiB,YAAY;EAKjC,iBAAiB;EAGjB;EAGA,UAAU;;;;;;EAQV;YAGU,eAAa;YAEb,SAAO;YAWP;;WAGD,QAAM;IAAoC,MAAA;IAAiB;;EAgD3D,WAAW,cAAc;;YAyCxB,WAAW,MAAM;;;;;YAQjB,eAAe,MAAM,UAAU;EAuDhC,QAAQ,cAAc;EA8CtB;EAoBA;EAcT,aAAa;EAIb,UAAU,QAAQ,QAAQ;EAO1B,OAAO,MAAM;EAWb,SAAS,MAAM;EAYf;EASA;EAoBA;EAiBA,WAAW;EAoCX,eAAe,YAAY,MAAM;;EAUjC,UAAU;;EAiBV,WAAW,OAAO,SAAS;EAQ3B,YAAY;IAAgB,MAAM;IAAU;;YA6DlC,kBAAkB,MAAM,UAAU,gBAAgB,wBAAwB;YAW1E,iBAAiB,MAAM,UAAU,eAAe,QAAQ;YAgLxD,qBAAqB,OAAO,YAAY,MAAM,UAAU;YAsJxD,YAAY,MAAM;YAIlB,WAAW,MAAM;YAIjB,YAAY,MAAM,UAAU;gBAiBxB,gBAAgB;YA4RpB,0BAA0B,wBAAwB;YAIzC,UAAM;YAmEf,YAAY,MAAM,UAAU,gBAAgB;SAmCtC,sBAAM;;QA8HhB;YACI;IACR,kBAAkB;;;UAIL,gCAAgC;EAC/C,cAAc;EACd,iBAAiB;EACjB,UAAU;EACV,YAAY;EACZ,UAAU;EACV,UAAU;EACV,YAAY;;UAGG;EACf,oBAAoB,gBAAgB,yBAClC,MAAM,GACN,WAAW,MAAM,iBAAiB,OAAO,wBAAwB,aACjE,oBAAoB,sCAEpB,cACA,UAAU,oCACV,oBAAoB;EAEtB,uBAAuB,gBAAgB,yBACrC,MAAM,GACN,WAAW,MAAM,iBAAiB,OAAO,wBAAwB,aACjE,oBAAoB,mCAEpB,cACA,UAAU,oCACV,oBAAoB;;;;;KCz7CZ;cAiBC,wBAAwB;;;;;;;;;;;;;;;;;;;;;EAqBnC,oBAAoB,OAAO;YAIR,UAAM;YAuBN,kBAAkB,MAAM,UAAU,gBAAgB;YAsDlD,YAAY,MAAM,UAAU,gBAAgB;SA6B/C,sBAAM;;QAyFhB;YACI;IACR,kBAAkB;;;UAIL;EACf,oBAAoB,gBAAgB,yBAClC,MAAM,GACN,WAAW,MAAM,iBAAiB,OAAO,wBAAwB,aACjE,oBAAoB,sCAEpB,cACA,UAAU,oCACV,oBAAoB;;;;KClQZ,sBAAsB;EAChC,cAAc,OAAO,GAAG,MAAM,gBAAgB,OAAO;;cAG1C,eAAe;;EAWxB,YAAA,MAAM,gBAAgB,IACtB,SAAS,iBACT,SAAS,sBAAsB;EAOjC;EAwBA;EAKA,gBAAgB,YAAY,OAAO"}
+{"version":3,"file":"tree.d.ts","names":[],"sources":["../src/tree/types.ts","../src/tree/tree-base.ts","../src/tree/tree-list.ts","../src/tree/tree-controller.ts","../src/tree/tree-drop-controller.ts"],"mappings":"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"}

package/dist/tree.js

@@ -1,2 +1,2 @@
-import { i as TreeDataModel, n as TreeListElement, r as TreeBaseElement, t as TreeController } from "./tree-CozQj01a.js";
-export { TreeBaseElement, TreeController, TreeDataModel, TreeListElement };
+import { a as TreeDataModel, i as TreeDropController, n as TreeListElement, r as TreeBaseElement, t as TreeController } from "./tree-a14n9y7i.js";
+export { TreeBaseElement, TreeController, TreeDataModel, TreeDropController, TreeListElement };

package/dist/{vertical-list-BGn9nyKh.d.ts → vertical-list-CHrXmmQ3.d.ts}

@@ -1,4 +1,5 @@
-import { S as ListSearchController } from "./index-DDREWqMm.js";
+import { L as ListNativeDragStartEvent, P as ListDragPreviewRenderer } from "./tree-component-BW2iCFq9.js";
+import { S as ListSearchController } from "./index--qnhBWZJ.js";
 import { i as ListInteractionMode, l as ListSelectionMode, r as ListElementEventMap } from "./list-selection-types-B5ioL-dG.js";
 import { LitElement, PropertyValues } from "lit";
 import { CommandId, CommandRegistry } from "@clinth/ui-commands";
@@ -52,8 +53,20 @@ declare class VerticalListElement extends LitElement {
    * disabled. See `docs/infra-incremental.md`.
    */
   searchModes: string | undefined;
+  /**
+   * Enable native browser drag-and-drop for selectable items. When true,
+   * selectable rows become draggable and the list emits
+   * `list-native-drag-start` when a drag begins.
+   */
+  itemsDraggable: boolean;
+  /**
+   * Custom drag preview renderer (synchronous). Defaults to the shared
+   * built-in HTML+canvas preview.
+   */
+  dragPreviewRenderer: ListDragPreviewRenderer<Element> | undefined;
   private readonly selection;
   private tickled;
+  private _syncNativeDraggable;
   /** Incremental search (navigate / select / filter). See `docs/infra-incremental.md`. */
   readonly search: ListSearchController<Element>;
   /** Command registry carrying this list's `list.search.*` commands. */
@@ -123,6 +136,7 @@ declare class VerticalListElement extends LitElement {
   private _createCustomCheckbox;
   private _findListItem;
   private _dispatch;
+  private _dispatchCancelable;
   private _onPointerOver;
   private _onPointerLeave;
   private _onKeyDown;
@@ -136,8 +150,11 @@ declare global {
   interface HTMLElementTagNameMap {
     'ixfx-vertical-list': VerticalListElement;
   }
-  interface HTMLElementEventMap extends ListElementEventMap {}
+  interface HTMLElementEventMap extends VerticalListElementEventMap {}
+}
+interface VerticalListElementEventMap extends ListElementEventMap {
+  'list-native-drag-start': ListNativeDragStartEvent<Element>;
 }
 //#endregion
-export { CustomCheckboxOptions as n, VerticalListElement as r, AddItemOptions as t };
-//# sourceMappingURL=vertical-list-BGn9nyKh.d.ts.map
+export { VerticalListElementEventMap as i, CustomCheckboxOptions as n, VerticalListElement as r, AddItemOptions as t };
+//# sourceMappingURL=vertical-list-CHrXmmQ3.d.ts.map

package/dist/vertical-list-CHrXmmQ3.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"vertical-list-CHrXmmQ3.d.ts","names":[],"sources":["../src/vertical-list/vertical-list.ts"],"mappings":";;;;;;UAwDiB;EACf,WAAW;EACX;EACA;;UAGe;;;;;;EAMf;;cAMW,4BAA4B;;EAEvC,eAAe;EAGf,iBAAiB;EAGjB,mBAAmB,IAAI;;;;;;EAQvB;;;;;;;;;;;;;;;;;;;EAqBA,oBAAoB,gCAAgC;;;;;;EAQpD;;;;;;EAQA;;;;;EAOA,qBAAqB,wBAAwB;mBAU5B;UAeT;UA4EA;;WA4EC,QAAM,qBAAA;;MAYX,YAAY;EAoBP;EAmBA;EAgDA,QAAQ,SAAS;;MAuCtB,gBAAgB;;MAKhB,iBAAiB,YAAY;EAIjC,QAAQ,MAAM,kBAAkB,UAAU;;;;;;EAqB1C,WAAW,MAAM,UAAU;;EAW3B,YAAY,OAAO,SAAS,WAAW;EAIvC;;;;;;EAYA,SAAS,gBAAgB;;;;;;EAczB,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;;EAKzB,SAAS;EAkBP,eAAe,0CAA0C,UAAU;UAqB7D;UAgBA;UAOA;UAiBA;;;;;;;UA6FA;;;;;UAuBA;UAcA;UAYA;UAQA;UAWA;UAMA;UAIA;UAwDA;UAUA;UAMA;SAUQ,sBAAM;EAmJb,wBAAM;;QAeT;YACI;IACR,sBAAsB;;YAGd,4BAA4B;;UAGvB,oCAAoC;EACnD,0BAA0B,yBAAyB"}

package/dist/vertical-list.d.ts

@@ -1,3 +1,4 @@
+import { F as ListDragSource, I as ListNativeDragStartDetail, L as ListNativeDragStartEvent, M as ListDragPreview, N as ListDragPreviewContext, P as ListDragPreviewRenderer, j as ListDragEntry } from "./tree-component-BW2iCFq9.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-B5ioL-dG.js";
-import { n as CustomCheckboxOptions, r as VerticalListElement, t as AddItemOptions } from "./vertical-list-BGn9nyKh.js";
-export { AddItemOptions, CustomCheckboxOptions, type ListActivateDetail, type ListActivateEvent, type ListElementEventMap, type ListInteractionMode, type ListItemClickDetail, type ListItemClickEvent, type ListSelectDetail, type ListSelectEvent, type ListSelectionMode, type ListTickleDetail, type ListTickleEvent, VerticalListElement };
+import { i as VerticalListElementEventMap, n as CustomCheckboxOptions, r as VerticalListElement, t as AddItemOptions } from "./vertical-list-CHrXmmQ3.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, VerticalListElement, VerticalListElementEventMap };

package/dist/vertical-list.js

@@ -2,8 +2,9 @@ import { t as TickledController } from "./tickled-controller-Dh1Uh_vG.js";
 import { t as themeFallbacks } from "./fallbacks-BcKGq-2F.js";
 import { n as safeCustomElement, t as __decorate } from "./decorate-VRK8rslU.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-C05WjbZh.js";
+import { t as ListNativeDragController } from "./list-native-drag-controller-DxD6Yjci.js";
 import { r as ListDragSelectController, t as ListSelectionController } from "./list-selection-controller-SA4piSBi.js";
-import { n as animateListItemIn, r as animateListItemOut } from "./list-item-animation-DuiwgN3l.js";
+import { n as animateListItemIn, r as animateListItemOut } from "./list-item-animation-BUoEKi5s.js";
 import { LitElement, css, html, render } from "lit";
 import { property } from "lit/decorators.js";
 import { createCommandRegistry } from "@clinth/ui-commands";
@@ -15,6 +16,7 @@ let VerticalListElement = class VerticalListElement extends LitElement {
 		this.selectionMode = `single`;
 		this.interactionMode = `standard`;
 		this.itemWrap = `stop`;
+		this.itemsDraggable = false;
 		this.#customWrappers = /* @__PURE__ */ new Map();
 		this.#wrappedElements = /* @__PURE__ */ new Set();
 		this.#animatedItems = /* @__PURE__ */ new WeakSet();
@@ -45,7 +47,41 @@ let VerticalListElement = class VerticalListElement extends LitElement {
 			},
 			onStateChange: () => this._syncItemStates(),
 			itemWrap: this.itemWrap,
-			hoverDisabled: () => this.#dragSelect.isDragging
+			hoverDisabled: () => this.#dragSelect.isDragging || this.#nativeDrag.isDragging
+		});
+		this.#nativeDragging = false;
+		this.#postDragSuppressTimer = 0;
+		this.#nativeDrag = new ListNativeDragController(this, {
+			source: `vertical-list`,
+			isEnabled: () => this.itemsDraggable && this.selectionMode !== `none` && this._getVisibleItems().length > 0,
+			resolveEventToKey: (target) => {
+				if (!(target instanceof Element)) return void 0;
+				const item = target.closest?.(ITEM_SELECTOR);
+				if (!item || !this.contains(item) || this.#wrappedElements.has(item)) return void 0;
+				return keyForElement(item);
+			},
+			prepareSelection: (originKey) => this.#prepareNativeDrag(originKey),
+			getMetrics: () => ({}),
+			getRenderer: () => this.dragPreviewRenderer,
+			dispatch: (detail) => this._dispatchCancelable(`list-native-drag-start`, detail),
+			onActiveChange: (active, originKey) => {
+				this.#nativeDragging = active;
+				this.toggleAttribute(`data-native-dragging`, active);
+				for (const el of this._getVisibleItems()) el.toggleAttribute(`data-drag-origin`, active && originKey !== void 0 && keyForElement(el) === originKey);
+				if (active) {
+					const count = this.selection.selected.size;
+					this.setAttribute(`aria-label`, count <= 1 ? `Dragging 1 item` : `Dragging ${count} items`);
+				} else this.removeAttribute(`aria-label`);
+				this.requestUpdate();
+			},
+			onEnd: () => {
+				this.#nativeDragging = false;
+				this.toggleAttribute(`data-native-dragging`, false);
+				this.removeAttribute(`aria-label`);
+				for (const el of this._getVisibleItems()) el.removeAttribute(`data-drag-origin`);
+				this.#startPostDragSuppressTimer();
+			},
+			syncLightDomDraggable: () => this._syncNativeDraggable()
 		});
 		this.#dragSelect = new ListDragSelectController(this, {
 			getSurface: () => this.renderRoot.querySelector(`.container`),
@@ -127,7 +163,7 @@ let VerticalListElement = class VerticalListElement extends LitElement {
 			}
 		};
 		this._onClick = (e) => {
-			if (this.#dragSelect.isDragging) return;
+			if (this.#dragSelect.isDragging || this.#nativeDrag.isDragging || this.#postDragSuppressTimer !== 0) return;
 			const item = this._findListItem(e.composedPath());
 			if (!item) return;
 			this._dispatch(`list-item-click`, { item });
@@ -144,6 +180,44 @@ let VerticalListElement = class VerticalListElement extends LitElement {
 	#itemObserver;
 	/** Items that have already played (or been skipped for) their enter animation. */
 	#animatedItems;
+	#nativeDragging;
+	#postDragSuppressTimer;
+	#nativeDrag;
+	#prepareNativeDrag(originKey) {
+		const visible = this._getVisibleItems();
+		const originEl = visible.find((el) => keyForElement(el) === originKey);
+		if (!originEl || !this._isCheckable(originEl)) return void 0;
+		if (!this.selection.selected.has(originEl)) this.selection.replace(originEl);
+		const selected = [];
+		visible.forEach((el, index) => {
+			if (!this.selection.selected.has(el)) return;
+			selected.push({
+				key: keyForElement(el) ?? originKey,
+				index,
+				item: el,
+				element: el
+			});
+		});
+		const origin = selected.find((entry) => entry.key === originKey);
+		if (!origin) return void 0;
+		return {
+			origin,
+			selected
+		};
+	}
+	_syncNativeDraggable() {
+		if (!this.isConnected) return;
+		for (const el of this.querySelectorAll(ITEM_SELECTOR)) {
+			if (this.#wrappedElements.has(el)) continue;
+			if (el instanceof HTMLElement) el.draggable = this.itemsDraggable && this._isCheckable(el);
+		}
+	}
+	#startPostDragSuppressTimer() {
+		if (this.#postDragSuppressTimer) clearTimeout(this.#postDragSuppressTimer);
+		this.#postDragSuppressTimer = window.setTimeout(() => {
+			this.#postDragSuppressTimer = 0;
+		}, 0);
+	}
 	/** Live drag-select preview rect (surface-relative); the covered items carry `data-marquee`. */
 	#marqueeRect;
 	#dragSelect;
@@ -211,6 +285,10 @@ let VerticalListElement = class VerticalListElement extends LitElement {
 		this.#unregisterSearchCommands?.();
 		this.#unregisterSearchCommands = void 0;
 		this.#searchRegistry = void 0;
+		if (this.#postDragSuppressTimer) {
+			clearTimeout(this.#postDragSuppressTimer);
+			this.#postDragSuppressTimer = 0;
+		}
 	}
 	/**
 	* Animate in items appended to the light DOM (however they got there —
@@ -250,6 +328,10 @@ let VerticalListElement = class VerticalListElement extends LitElement {
 			}
 			this._syncItemStates();
 		} else if (changed.has(`checkboxRenderer`) && this.interactionMode === `checked`) this._syncCheckboxes();
+		if (changed.has(`itemsDraggable`) || changed.has(`interactionMode`)) {
+			this._syncNativeDraggable();
+			this.#nativeDrag.refreshDraggable();
+		}
 	}
 	/** The most recently selected item, or `undefined` if nothing is selected. */
 	get selectedItem() {
@@ -519,6 +601,14 @@ let VerticalListElement = class VerticalListElement extends LitElement {
 			composed: true
 		}));
 	}
+	_dispatchCancelable(name, detail) {
+		return this.dispatchEvent(new CustomEvent(name, {
+			detail,
+			bubbles: true,
+			composed: true,
+			cancelable: true
+		}));
+	}
 	_activateItem(item) {
 		if (this.interactionMode !== `manual`) this.selection.replace(item);
 		this._dispatch(`list-activate`, { item });
@@ -654,6 +744,10 @@ let VerticalListElement = class VerticalListElement extends LitElement {
       color: var(--item-text-selected);
     }
 
+    ::slotted([data-drag-origin]) {
+      opacity: 0.6;
+    }
+
     /* checked mode: checkbox (injected into li) communicates selection — suppress bg highlight */
     :host([interaction-mode="checked"]) ::slotted([data-selected]) {
       background: transparent;
@@ -700,6 +794,12 @@ __decorate([property({
 	attribute: `search-modes`,
 	reflect: true
 })], VerticalListElement.prototype, "searchModes", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: `items-draggable`,
+	reflect: true
+})], VerticalListElement.prototype, "itemsDraggable", void 0);
+__decorate([property({ attribute: false })], VerticalListElement.prototype, "dragPreviewRenderer", void 0);
 VerticalListElement = __decorate([safeCustomElement(`ixfx-vertical-list`)], VerticalListElement);
 //#endregion
 export { VerticalListElement };