@ixfx/components 0.8.7 → 0.8.8

package/bundle/index.js

@@ -5686,6 +5686,363 @@ __decorate([state()], RadioGroup.prototype, "_icons", void 0);
 __decorate([query(`slot`)], RadioGroup.prototype, "_slot", void 0);
 RadioGroup = __decorate([safeCustomElement(`ixfx-radio-group`)], RadioGroup);
 //#endregion
+//#region src/interaction/list-drag-preview-default.ts
+const CARD_DEFAULT = 72;
+const CARD_MIN = 48;
+const CARD_MAX = 96;
+const LIST_WIDTH = 220;
+const LIST_MAX_ROWS = 5;
+const MAX_CANVAS_DIM = 1024;
+function cssVar(style, name, fallback) {
+	try {
+		return style.getPropertyValue(name)?.trim() || fallback;
+	} catch {
+		return fallback;
+	}
+}
+function fontOf(style) {
+	try {
+		const font = style.font?.trim();
+		if (font) return font;
+	} catch {}
+	return `12px system-ui, sans-serif`;
+}
+/** Caption for a drag entry — element labels win, then string items, then common object fields, then the key. */
+function captionForEntry(entry) {
+	const el = entry.element ?? (entry.item instanceof Element ? entry.item : void 0);
+	if (el) {
+		const labelled = el.getAttribute(`data-label`) ?? el.querySelector(`[data-grid-list-caption]`)?.textContent?.trim() ?? el.getAttribute(`data-search-label`) ?? el.querySelector(`.cell`)?.textContent?.trim();
+		if (labelled) return labelled.slice(0, 80);
+		const text = el.textContent?.trim();
+		if (text) return text.slice(0, 80);
+	}
+	const item = entry.item;
+	if (typeof item === `string` && item.length > 0) return item.slice(0, 80);
+	if (item !== null && typeof item === `object` && !(item instanceof Element)) {
+		const record = item;
+		for (const field of [
+			`label`,
+			`name`,
+			`title`,
+			`text`
+		]) {
+			const value = record[field];
+			if (typeof value === `string` && value.length > 0) return value.slice(0, 80);
+		}
+	}
+	return entry.key;
+}
+function glyphFor(caption) {
+	const first = caption.trim().at(0);
+	return first ? first.toLocaleUpperCase() : `?`;
+}
+/** A decoded `<img>` ready for `drawImage`, if the entry's element has one. */
+function decodedImage(entry) {
+	const scope = entry.element ?? (entry.item instanceof Element ? entry.item : void 0);
+	if (!scope || typeof scope.querySelector !== `function`) return void 0;
+	if (scope instanceof HTMLImageElement) {
+		if (scope.complete && scope.naturalWidth > 0) return scope;
+		return;
+	}
+	try {
+		const img = scope.querySelector(`img`);
+		if (img instanceof HTMLImageElement && img.complete && img.naturalWidth > 0) return img;
+	} catch {}
+}
+function cardSize(metrics) {
+	if (metrics.itemSize !== void 0 && Number.isFinite(metrics.itemSize)) return Math.max(CARD_MIN, Math.min(CARD_MAX, Math.round(metrics.itemSize)));
+	return CARD_DEFAULT;
+}
+function rowHeight(metrics) {
+	const raw = metrics.rowHeight;
+	if (raw !== void 0 && Number.isFinite(raw)) return Math.max(24, Math.min(36, Math.round(raw)));
+	return 28;
+}
+function thumbCell(doc, caption, img, size) {
+	const well = doc.createElement(`div`);
+	well.setAttribute(`data-thumb`, ``);
+	well.style.cssText = `width:${size}px;height:${size}px;border-radius:4px;overflow:hidden;background:var(--surface-5, rgba(128,128,128,0.25));flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:${Math.round(size * .4)}px;font-weight:600;`;
+	if (img) try {
+		const clone = img.cloneNode(true);
+		clone.style.cssText = `width:100%;height:100%;object-fit:cover;`;
+		clone.removeAttribute(`id`);
+		well.appendChild(clone);
+	} catch {
+		well.textContent = glyphFor(caption);
+	}
+	else well.textContent = glyphFor(caption);
+	return well;
+}
+function buildCardsElement(ctx, captions, images) {
+	const doc = document;
+	const size = cardSize(ctx.metrics);
+	const gap = 6;
+	const pad = 8;
+	const root = doc.createElement(`div`);
+	root.setAttribute(`data-preview`, `cards`);
+	root.setAttribute(`part`, `drag-preview`);
+	root.style.cssText = `position:fixed;top:-9999px;left:-9999px;display:flex;flex-direction:row;gap:${gap}px;padding:${pad}px;background:var(--surface-4, #333);color:var(--surface-4-text, #fff);border:1px solid var(--border-subtle, #555);border-radius:var(--radius-m, 8px);box-shadow:0 4px 16px rgba(0,0,0,0.3);font-family:system-ui,sans-serif;font-size:11px;max-width:320px;z-index:999999;pointer-events:none;`;
+	const n = ctx.selected.length;
+	for (let i = 0; i < n; i++) {
+		const card = doc.createElement(`div`);
+		card.setAttribute(`data-card`, ``);
+		card.style.cssText = `display:flex;flex-direction:column;gap:4px;align-items:center;width:${size}px;`;
+		card.appendChild(thumbCell(doc, captions[i], images[i], Math.round(size * .72)));
+		const label = doc.createElement(`span`);
+		label.setAttribute(`data-caption`, ``);
+		label.style.cssText = `max-width:${size}px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;opacity:0.9;`;
+		label.textContent = captions[i];
+		card.appendChild(label);
+		root.appendChild(card);
+	}
+	return root;
+}
+function buildListElement(ctx, captions, images) {
+	const doc = document;
+	const rh = rowHeight(ctx.metrics);
+	const thumb = Math.round(rh * .78);
+	const root = doc.createElement(`div`);
+	root.setAttribute(`data-preview`, `list`);
+	root.setAttribute(`part`, `drag-preview`);
+	root.style.cssText = `position:fixed;top:-9999px;left:-9999px;display:flex;flex-direction:column;gap:4px;padding:8px;background:var(--surface-4, #333);color:var(--surface-4-text, #fff);border:1px solid var(--border-subtle, #555);border-radius:var(--radius-m, 8px);box-shadow:0 4px 16px rgba(0,0,0,0.3);font-family:system-ui,sans-serif;font-size:12px;width:${LIST_WIDTH}px;max-width:${LIST_WIDTH}px;z-index:999999;pointer-events:none;`;
+	const header = doc.createElement(`div`);
+	header.setAttribute(`data-header`, ``);
+	header.style.cssText = `font-weight:600;padding-bottom:4px;border-bottom:1px solid var(--border-subtle, #555);margin-bottom:4px;`;
+	header.textContent = `${ctx.selected.length} items`;
+	root.appendChild(header);
+	for (let i = 0; i < Math.min(LIST_MAX_ROWS, captions.length); i++) {
+		const row = doc.createElement(`div`);
+		row.setAttribute(`data-row`, ``);
+		row.style.cssText = `display:flex;align-items:center;gap:6px;height:${rh}px;overflow:hidden;`;
+		row.appendChild(thumbCell(doc, captions[i], images[i], thumb));
+		const label = doc.createElement(`span`);
+		label.setAttribute(`data-caption`, ``);
+		label.style.cssText = `flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;`;
+		label.textContent = captions[i];
+		row.appendChild(label);
+		root.appendChild(row);
+	}
+	if (captions.length > LIST_MAX_ROWS) {
+		const more = doc.createElement(`div`);
+		more.setAttribute(`data-more`, ``);
+		more.style.cssText = `opacity:0.6;text-align:center;`;
+		more.textContent = `+${captions.length - LIST_MAX_ROWS} more`;
+		root.appendChild(more);
+	}
+	return root;
+}
+function paletteOf(style) {
+	const bg = cssVar(style, `--surface-4`, `#333333`);
+	const fg = cssVar(style, `--surface-4-text`, `#ffffff`);
+	const subtle = cssVar(style, `--border-subtle`, `#555555`);
+	const accent = cssVar(style, `--accent`, `#4da3ff`);
+	const radiusRaw = cssVar(style, `--radius-m`, `8`);
+	return {
+		bg,
+		fg,
+		subtle,
+		accent,
+		radius: Number.parseFloat(radiusRaw) || 8,
+		font: fontOf(style)
+	};
+}
+function fitCanvas(canvas, cssW, cssH) {
+	let scale = Math.max(1, Math.min(3, typeof devicePixelRatio === `number` && devicePixelRatio > 0 ? devicePixelRatio : 1));
+	const maxScaleW = MAX_CANVAS_DIM / Math.max(1, cssW);
+	const maxScaleH = MAX_CANVAS_DIM / Math.max(1, cssH);
+	scale = Math.min(scale, maxScaleW, maxScaleH);
+	canvas.width = Math.max(1, Math.round(cssW * scale));
+	canvas.height = Math.max(1, Math.round(cssH * scale));
+	canvas.style.width = `${cssW}px`;
+	canvas.style.height = `${cssH}px`;
+	return {
+		scale,
+		dpr: scale
+	};
+}
+function roundRectPath(context, x, y, w, h, r) {
+	const radius = Math.max(0, Math.min(r, w / 2, h / 2));
+	if (typeof context.roundRect === `function`) {
+		context.beginPath();
+		context.roundRect(x, y, w, h, radius);
+		return;
+	}
+	context.beginPath();
+	context.moveTo(x + radius, y);
+	context.arcTo(x + w, y, x + w, y + h, radius);
+	context.arcTo(x + w, y + h, x, y + h, radius);
+	context.arcTo(x, y + h, x, y, radius);
+	context.arcTo(x, y, x + w, y, radius);
+	context.closePath();
+}
+function paintCards(context, scale, palette, captions, images, size, cssW, cssH) {
+	context.save();
+	context.scale(scale, scale);
+	roundRectPath(context, 0, 0, cssW, cssH, palette.radius);
+	context.fillStyle = palette.bg;
+	context.fill();
+	context.strokeStyle = palette.subtle;
+	context.lineWidth = 1;
+	context.stroke();
+	context.clip();
+	const gap = 6;
+	const pad = 8;
+	const wellSize = Math.round(size * .72);
+	context.font = palette.font;
+	context.textBaseline = `middle`;
+	for (let i = 0; i < captions.length; i++) {
+		const x = pad + i * (size + gap);
+		const wellX = x + (size - wellSize) / 2;
+		const wellY = pad;
+		roundRectPath(context, wellX, wellY, wellSize, wellSize, 4);
+		context.fillStyle = palette.subtle;
+		context.globalAlpha = .35;
+		context.fill();
+		context.globalAlpha = 1;
+		const img = images[i];
+		if (img) try {
+			context.save();
+			context.clip();
+			context.drawImage(img, wellX, wellY, wellSize, wellSize);
+			context.restore();
+		} catch {}
+		else {
+			context.fillStyle = palette.fg;
+			context.globalAlpha = .9;
+			context.font = `600 ${Math.round(wellSize * .4)}px system-ui, sans-serif`;
+			context.textAlign = `center`;
+			context.fillText(glyphFor(captions[i]), wellX + wellSize / 2, wellY + wellSize / 2 + 1);
+			context.globalAlpha = 1;
+			context.textAlign = `left`;
+			context.font = palette.font;
+		}
+		context.fillStyle = palette.fg;
+		context.globalAlpha = .9;
+		context.font = palette.font;
+		const label = captions[i].length > 12 ? `${captions[i].slice(0, 11)}…` : captions[i];
+		const textWidth = context.measureText(label).width;
+		context.fillText(label, x + (size - Math.min(size, textWidth)) / 2, wellY + wellSize + 10, size);
+		context.globalAlpha = 1;
+	}
+	context.restore();
+}
+function paintList(context, scale, palette, captions, images, rh, cssW, cssH) {
+	context.save();
+	context.scale(scale, scale);
+	roundRectPath(context, 0, 0, cssW, cssH, palette.radius);
+	context.fillStyle = palette.bg;
+	context.fill();
+	context.strokeStyle = palette.subtle;
+	context.lineWidth = 1;
+	context.stroke();
+	context.clip();
+	const pad = 8;
+	context.fillStyle = palette.fg;
+	context.font = `600 ${palette.font}`;
+	context.textBaseline = `middle`;
+	context.fillText(`${captions.length} items`, pad, 16, cssW - 16);
+	context.strokeStyle = palette.subtle;
+	context.beginPath();
+	context.moveTo(pad, 28);
+	context.lineTo(cssW - pad, 28);
+	context.stroke();
+	const thumb = Math.round(rh * .78);
+	const rows = Math.min(LIST_MAX_ROWS, captions.length);
+	context.font = palette.font;
+	for (let i = 0; i < rows; i++) {
+		const y = 32 + i * rh;
+		roundRectPath(context, pad, y + (rh - thumb) / 2, thumb, thumb, 4);
+		context.fillStyle = palette.subtle;
+		context.globalAlpha = .35;
+		context.fill();
+		context.globalAlpha = 1;
+		const img = images[i];
+		if (img) try {
+			context.save();
+			context.clip();
+			context.drawImage(img, pad, y + (rh - thumb) / 2, thumb, thumb);
+			context.restore();
+		} catch {}
+		else {
+			context.fillStyle = palette.fg;
+			context.font = `600 ${Math.round(thumb * .45)}px system-ui, sans-serif`;
+			context.textAlign = `center`;
+			context.fillText(glyphFor(captions[i]), pad + thumb / 2, y + rh / 2 + 1);
+			context.textAlign = `left`;
+			context.font = palette.font;
+		}
+		context.fillStyle = palette.fg;
+		context.globalAlpha = .92;
+		const maxText = cssW - 16 - thumb - 6;
+		context.fillText(captions[i], pad + thumb + 6, y + rh / 2 + 1, Math.max(8, maxText));
+		context.globalAlpha = 1;
+	}
+	if (captions.length > LIST_MAX_ROWS) {
+		context.fillStyle = palette.fg;
+		context.globalAlpha = .6;
+		context.textAlign = `center`;
+		context.fillText(`+${captions.length - LIST_MAX_ROWS} more`, cssW / 2, cssH - pad - 6, cssW - 16);
+		context.textAlign = `left`;
+		context.globalAlpha = 1;
+	}
+	context.restore();
+}
+/**
+* Uniform built-in HTML+canvas drag preview for all four list components.
+*
+* - ≤5 selected → a row of small cards (thumbnail well + caption).
+* - >5 selected → a compact list (`N items` header, up to 5 rows, `+N more`).
+*
+* Always returns an offscreen `element` for `DataTransfer.setDragImage()` and,
+* when a 2D context is available, a DPR-aware painted `canvas` for native
+* hosts. Colours track the active theme via `ctx.hostStyle` CSS variables.
+*/
+function createDefaultListDragPreview(ctx) {
+	const entries = ctx.selected;
+	const captions = entries.map((entry) => captionForEntry(entry));
+	const images = entries.map((entry) => decodedImage(entry));
+	const isCards = entries.length <= 5;
+	let element;
+	let cssW;
+	let cssH;
+	if (isCards) {
+		const size = cardSize(ctx.metrics);
+		cssW = entries.length * size + Math.max(0, entries.length - 1) * 6 + 16;
+		cssH = Math.round(size * .72) + 22 + 16;
+		element = buildCardsElement(ctx, captions, images);
+	} else {
+		const rh = rowHeight(ctx.metrics);
+		const rows = Math.min(LIST_MAX_ROWS, entries.length);
+		const more = entries.length > LIST_MAX_ROWS ? 18 : 0;
+		cssW = 236;
+		cssH = 40 + rows * rh + more;
+		element = buildListElement(ctx, captions, images);
+	}
+	let canvas;
+	try {
+		const candidate = document.createElement(`canvas`);
+		const paint = candidate.getContext(`2d`);
+		if (paint) {
+			const { scale } = fitCanvas(candidate, cssW, cssH);
+			const palette = paletteOf(ctx.hostStyle);
+			if (isCards) paintCards(paint, scale, palette, captions, images, cardSize(ctx.metrics), cssW, cssH);
+			else paintList(paint, scale, palette, captions, images, rowHeight(ctx.metrics), cssW, cssH);
+			canvas = candidate;
+		}
+	} catch {
+		canvas = void 0;
+	}
+	return {
+		element,
+		hotspot: {
+			x: 16,
+			y: 16
+		},
+		...canvas ? { canvas } : {},
+		dispose: () => {}
+	};
+}
+//#endregion
 //#region src/interaction/list-drag-select-controller.ts
 const DEFAULT_POINTER_TYPES = [`mouse`, `pen`];
 const DEFAULT_THRESHOLD = 4;
@@ -6075,25 +6432,239 @@ function animateListItemIn(el, options = {}) {
 		easing
 	});
 }
+function outResult(finished, animation) {
+	return Object.assign(finished, { animation });
+}
 /**
-* Collapse + fade `el` out. Resolves once the animation finishes (or straight
-* away under reduced motion); the caller detaches the element after. The final
-* collapsed state is held (`fill: forwards`) so there's no flash back to full
-* size in the gap before removal.
+* Start the collapse + fade-out animation for `el` and return the handle.
+* Returns `undefined` when no animation was started (reduced motion or zero
+* size). The caller owns the handle and must `cancel()` it if the removal is
+* reversed — a retained `fill: forwards` frame otherwise keeps overriding the
+* element's ordinary CSS indefinitely.
 */
-function animateListItemOut(el, options = {}) {
-	if (prefersReducedMotion()) return Promise.resolve();
+function startListItemOutAnimation(el, options = {}) {
+	if (prefersReducedMotion()) return void 0;
 	const { axis = `block`, easing = `ease` } = options;
 	const duration = resolveDuration(el, options.duration);
 	const size = measure(el, axis);
-	if (size <= 0) return Promise.resolve();
+	if (size <= 0) return void 0;
 	return el.animate([fullFrame(size, axis), collapsedFrame(axis)], {
 		duration,
 		easing,
 		fill: `forwards`
-	}).finished.then(() => void 0, () => void 0);
+	});
+}
+/**
+* Collapse + fade `el` out. Resolves once the animation finishes (or straight
+* away under reduced motion); the caller detaches the element after. The final
+* collapsed state is held (`fill: forwards`) so there's no flash back to full
+* size in the gap before removal.
+*
+* The returned promise carries an `.animation` handle. If the removal is
+* reversed (the same key becomes visible again), cancel that handle so its
+* filled final frame stops overriding the reused element's style.
+*/
+function animateListItemOut(el, options = {}) {
+	const animation = startListItemOutAnimation(el, options);
+	if (!animation) return outResult(Promise.resolve(), void 0);
+	return outResult(animation.finished.then(() => void 0, () => void 0), animation);
 }
 //#endregion
+//#region src/interaction/list-native-drag-controller.ts
+/**
+* Shared native item/row drag-out for list components.
+*
+* Owns capture-phase `dragstart` / `dragend` listeners on the host and its
+* render root, a `MutationObserver` that keeps light-DOM / slotted item `draggable`
+* attributes in sync, and a single post-dispatch disposal on
+* `requestAnimationFrame`. All DOM / selection knowledge lives in the host
+* config callbacks.
+*/
+var ListNativeDragController = class {
+	#host;
+	#config;
+	#dragging = false;
+	#boundRoot;
+	#boundHost = false;
+	#seenDragStarts = /* @__PURE__ */ new WeakSet();
+	#observer;
+	constructor(host, config) {
+		this.#host = host;
+		this.#config = config;
+		host.addController(this);
+	}
+	get isDragging() {
+		return this.#dragging;
+	}
+	/** `"true"` when enabled, else `"false"` — for shadow-row template bindings. */
+	get draggableAttr() {
+		try {
+			return this.#config.isEnabled() ? `true` : `false`;
+		} catch {
+			return `false`;
+		}
+	}
+	/** Re-run the light-DOM `draggable` sync (e.g. after `itemsDraggable` flips). */
+	refreshDraggable() {
+		try {
+			this.#config.syncLightDomDraggable?.();
+		} catch {}
+	}
+	hostConnected() {
+		this.#bind();
+		this.#observer ??= new MutationObserver(() => this.refreshDraggable());
+		try {
+			this.#observer.observe(this.#host, {
+				childList: true,
+				subtree: true
+			});
+		} catch {}
+		this.refreshDraggable();
+	}
+	hostDisconnected() {
+		this.#unbind();
+		try {
+			this.#observer?.disconnect();
+		} catch {}
+		this.#dragging = false;
+	}
+	#renderRoot() {
+		return this.#host.renderRoot ?? this.#host;
+	}
+	#bind() {
+		const root = this.#renderRoot();
+		if (root !== this.#boundRoot) {
+			this.#unbind();
+			this.#boundRoot = root;
+			root.addEventListener(`dragstart`, this.#onDragStart, { capture: true });
+			root.addEventListener(`dragend`, this.#onDragEnd, { capture: true });
+		}
+		if (!this.#boundHost) {
+			this.#boundHost = true;
+			this.#host.addEventListener(`dragstart`, this.#onDragStart, { capture: true });
+			this.#host.addEventListener(`dragend`, this.#onDragEnd, { capture: true });
+		}
+	}
+	#unbind() {
+		this.#boundRoot?.removeEventListener(`dragstart`, this.#onDragStart, { capture: true });
+		this.#boundRoot?.removeEventListener(`dragend`, this.#onDragEnd, { capture: true });
+		this.#boundRoot = void 0;
+		if (this.#boundHost) {
+			this.#boundHost = false;
+			this.#host.removeEventListener(`dragstart`, this.#onDragStart, { capture: true });
+			this.#host.removeEventListener(`dragend`, this.#onDragEnd, { capture: true });
+		}
+	}
+	#onDragStart = (event) => {
+		if (!(event instanceof DragEvent)) return;
+		if (this.#seenDragStarts.has(event)) return;
+		this.#seenDragStarts.add(event);
+		let enabled = false;
+		try {
+			enabled = this.#config.isEnabled();
+		} catch {
+			return;
+		}
+		if (!enabled) return;
+		let originKey;
+		try {
+			originKey = this.#config.resolveEventToKey(event.target);
+		} catch {
+			return;
+		}
+		if (!originKey) return;
+		let prepared;
+		try {
+			prepared = this.#config.prepareSelection(originKey);
+		} catch {
+			return;
+		}
+		if (!prepared || prepared.selected.length === 0) return;
+		const { origin, selected } = prepared;
+		let hostStyle;
+		try {
+			hostStyle = getComputedStyle(this.#host);
+		} catch {
+			hostStyle = document.createElement(`div`).style;
+		}
+		let metrics = {};
+		try {
+			metrics = this.#config.getMetrics() ?? {};
+		} catch {
+			metrics = {};
+		}
+		const context = {
+			source: this.#config.source,
+			origin,
+			selected,
+			metrics,
+			hostStyle
+		};
+		let renderer;
+		try {
+			renderer = this.#config.getRenderer();
+		} catch {
+			renderer = void 0;
+		}
+		let preview;
+		try {
+			preview = renderer ? renderer(context) : createDefaultListDragPreview(context);
+		} catch {
+			preview = createDefaultListDragPreview(context);
+		}
+		try {
+			document.body.appendChild(preview.element);
+		} catch {}
+		const detail = {
+			key: origin.key,
+			index: origin.index,
+			item: origin.item,
+			selectedKeys: selected.map((entry) => entry.key),
+			selected,
+			preview
+		};
+		let notCancelled = true;
+		try {
+			notCancelled = this.#config.dispatch(detail);
+		} catch {
+			notCancelled = true;
+		}
+		if (notCancelled) {
+			const hotspot = preview.hotspot ?? {
+				x: 16,
+				y: 16
+			};
+			try {
+				event.dataTransfer?.setDragImage(preview.element, hotspot.x, hotspot.y);
+			} catch {}
+		} else try {
+			event.preventDefault();
+		} catch {}
+		this.#dragging = true;
+		try {
+			this.#config.onActiveChange(true, origin.key);
+		} catch {}
+		requestAnimationFrame(() => {
+			try {
+				preview.element.remove();
+			} catch {}
+			try {
+				preview.dispose?.();
+			} catch {}
+		});
+	};
+	#onDragEnd = () => {
+		if (!this.#dragging) return;
+		this.#dragging = false;
+		try {
+			this.#config.onActiveChange(false);
+		} catch {}
+		try {
+			this.#config.onEnd();
+		} catch {}
+	};
+};
+//#endregion
 //#region src/interaction/list-selection-controller.ts
 /** Whether the interaction mode allows building a multi-item selection. */
 function isMultiMode(mode) {
@@ -13115,6 +13686,7 @@ let DataGridElement = class DataGridElement extends i {
 		this.allowGrouping = false;
 		this.crossGroupSelection = false;
 		this.columnMenu = `auto`;
+		this.itemsDraggable = false;
 		this._columnFormatters = /* @__PURE__ */ new Map();
 		this._selectedKeys = /* @__PURE__ */ new Set();
 		this._scrollTop = 0;
@@ -13132,7 +13704,45 @@ let DataGridElement = class DataGridElement extends i {
 				id: k,
 				enabled: true
 			})),
-			onStateChange: () => this.requestUpdate()
+			onStateChange: () => this.requestUpdate(),
+			hoverDisabled: () => this.#nativeDrag.isDragging
+		});
+		this.#nativeDragging = false;
+		this.#postDragSuppressTimer = 0;
+		this.#nativeDrag = new ListNativeDragController(this, {
+			source: `data-grid`,
+			isEnabled: () => this.itemsDraggable && this.selectionMode !== `none` && this._flat.some((f) => f.type === `row`),
+			resolveEventToKey: (target) => {
+				if (!(target instanceof Element)) return void 0;
+				if (target.closest?.(`.header-cell`)) return void 0;
+				return (target.closest?.(`.row`))?.dataset.key;
+			},
+			prepareSelection: (originKey) => this.#prepareNativeDrag(originKey),
+			getMetrics: () => ({ rowHeight: this.rowHeight }),
+			getRenderer: () => this.dragPreviewRenderer,
+			dispatch: (detail) => this.dispatchEvent(new CustomEvent(`list-native-drag-start`, {
+				detail,
+				bubbles: true,
+				composed: true,
+				cancelable: true
+			})),
+			onActiveChange: (active, originKey) => {
+				this.#nativeDragging = active;
+				this.#dragOriginKey = active ? originKey : void 0;
+				this.toggleAttribute(`data-native-dragging`, active);
+				if (active) {
+					const count = this._selectedKeys.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.#dragOriginKey = void 0;
+				this.toggleAttribute(`data-native-dragging`, false);
+				this.removeAttribute(`aria-label`);
+				this.#startPostDragSuppressTimer();
+			}
 		});
 		this._sortedRows = [];
 		this._flat = [];
@@ -13404,6 +14014,7 @@ let DataGridElement = class DataGridElement extends i {
     .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); }
+    .row.item.dragging-origin { opacity: 0.6; }
 
     /* Insertion / removal animation. Only while [reflowing] — the ~0.3s after
        the row set changes — do rows slide (their top transitions) to make or
@@ -13449,6 +14060,43 @@ let DataGridElement = class DataGridElement extends i {
   `
 		];
 	}
+	#nativeDragging;
+	#dragOriginKey;
+	#postDragSuppressTimer;
+	#nativeDrag;
+	#prepareNativeDrag(originKey) {
+		const rows = this._flat.filter((f) => f.type === `row`);
+		if (!rows.some((f) => f.key === originKey)) return void 0;
+		if (!this._selectedKeys.has(originKey)) this._replaceSelection(originKey);
+		const selected = [];
+		let displayIndex = 0;
+		for (const entry of rows) {
+			if (!this._selectedKeys.has(entry.key)) {
+				displayIndex++;
+				continue;
+			}
+			const rowEl = this.renderRoot.querySelector(`.row[data-key="${CSS.escape(entry.key)}"]`) ?? void 0;
+			selected.push({
+				key: entry.key,
+				index: displayIndex,
+				item: entry.row,
+				...rowEl ? { element: rowEl } : {}
+			});
+			displayIndex++;
+		}
+		const origin = selected.find((entry) => entry.key === originKey);
+		if (!origin) return void 0;
+		return {
+			origin,
+			selected
+		};
+	}
+	#startPostDragSuppressTimer() {
+		if (this.#postDragSuppressTimer) clearTimeout(this.#postDragSuppressTimer);
+		this.#postDragSuppressTimer = window.setTimeout(() => {
+			this.#postDragSuppressTimer = 0;
+		}, 0);
+	}
 	#searchRegistry;
 	#unregisterSearchCommands;
 	#searchKeyByRow;
@@ -13525,6 +14173,10 @@ let DataGridElement = class DataGridElement extends i {
 			clearTimeout(this.#rowReflowTimer);
 			this.#rowReflowTimer = 0;
 		}
+		if (this.#postDragSuppressTimer) {
+			clearTimeout(this.#postDragSuppressTimer);
+			this.#postDragSuppressTimer = 0;
+		}
 	}
 	/**
 	* Dispatch a command to this grid — routes through the command registry so
@@ -13707,6 +14359,7 @@ let DataGridElement = class DataGridElement extends i {
 		}));
 	}
 	_onRowClick(rowKey, col, e) {
+		if (this.#nativeDrag.isDragging || this.#postDragSuppressTimer !== 0) return;
 		if (col && col.selectable === false) return;
 		if (this.selectionMode === `none` && this.interactionMode !== `checked` && this.interactionMode !== `sticky`) return;
 		if (this.interactionMode === `manual`) return;
@@ -14366,8 +15019,9 @@ let DataGridElement = class DataGridElement extends i {
 			const selected = this._selectedKeys.has(rowKey);
 			const tickled = this._tickled.isTickled(rowKey);
 			return b`
-                <div class="row item ${selected ? `selected` : ``} ${tickled ? `tickled` : ``} ${this.#enteringRowKeys.has(rowKey) ? `entering` : ``}" style="top:${absIdx * rh}px; height:${rh}px"
+                <div class="row item ${selected ? `selected` : ``} ${tickled ? `tickled` : ``} ${this.#enteringRowKeys.has(rowKey) ? `entering` : ``} ${this.#nativeDragging && rowKey === this.#dragOriginKey ? `dragging-origin` : ``}" style="top:${absIdx * rh}px; height:${rh}px"
                   data-key=${rowKey}
+                  draggable=${this.#nativeDrag.draggableAttr}
                   @click=${(e) => {
 				this._onRowClick(rowKey, null, e);
 				this.dispatchEvent(new CustomEvent(`datagrid-cell-click`, {
@@ -14550,6 +15204,12 @@ __decorate([property({
 	attribute: `search-modes`,
 	reflect: true
 })], DataGridElement.prototype, "searchModes", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: `items-draggable`,
+	reflect: true
+})], DataGridElement.prototype, "itemsDraggable", void 0);
+__decorate([property({ attribute: false })], DataGridElement.prototype, "dragPreviewRenderer", void 0);
 __decorate([state()], DataGridElement.prototype, "_selectedKeys", void 0);
 __decorate([state()], DataGridElement.prototype, "_scrollTop", void 0);
 __decorate([state()], DataGridElement.prototype, "_scrollLeft", void 0);
@@ -14846,6 +15506,7 @@ let DetailListElement = class DetailListElement extends i {
 		this.iconProperty = ``;
 		this.keyProperty = ``;
 		this.itemWrap = `stop`;
+		this.itemsDraggable = false;
 		this.#itemData = /* @__PURE__ */ new WeakMap();
 		this.#grid = [];
 		this.#positions = /* @__PURE__ */ new Map();
@@ -14881,7 +15542,41 @@ let DetailListElement = class DetailListElement extends i {
 			},
 			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: `detail-list`,
+			isEnabled: () => this.itemsDraggable && this.selectionMode !== `none` && this._getVisibleItems().length > 0,
+			resolveEventToKey: (target) => {
+				if (!(target instanceof Element)) return void 0;
+				const li = target.closest?.(`li`);
+				if (!li || !this.contains(li)) return void 0;
+				return keyForElement(li);
+			},
+			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.querySelectorAll(`li`)) 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.querySelectorAll(`li`)) el.removeAttribute(`data-drag-origin`);
+				this.#startPostDragSuppressTimer();
+			},
+			syncLightDomDraggable: () => this._syncNativeDraggable()
 		});
 		this.#dragSelect = new ListDragSelectController(this, {
 			getSurface: () => this.renderRoot.querySelector(`.container`),
@@ -14978,7 +15673,7 @@ let DetailListElement = class DetailListElement extends i {
 			}
 		};
 		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.focus();
@@ -15005,6 +15700,42 @@ let DetailListElement = class DetailListElement extends i {
 	#builtFromProvider;
 	#providerBuilt;
 	#data;
+	#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;
+			const key = keyForElement(el) ?? originKey;
+			selected.push({
+				key,
+				index,
+				item: this.#itemData.get(el) ?? 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(`li`)) 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;
@@ -15107,11 +15838,16 @@ let DetailListElement = class DetailListElement extends i {
 		this.#unregisterSearchCommands?.();
 		this.#unregisterSearchCommands = void 0;
 		this.#searchRegistry = void 0;
+		if (this.#postDragSuppressTimer) {
+			clearTimeout(this.#postDragSuppressTimer);
+			this.#postDragSuppressTimer = 0;
+		}
 	}
 	firstUpdated() {
 		this.#processChildren();
 		if (this.filterPredicate) this.#applyFilterPredicate();
 		this.#recomputeGeometry();
+		this._syncNativeDraggable();
 	}
 	updated(changed) {
 		super.updated(changed);
@@ -15135,7 +15871,12 @@ let DetailListElement = class DetailListElement extends i {
 		if (changed.has(`interactionMode`)) {
 			this.selection.clearAnchor();
 			this._syncItemStates();
+			this._syncNativeDraggable();
 		} else if (changed.has(`checkboxRenderer`) && this.interactionMode === `checked`) this._syncCheckboxes();
+		if (changed.has(`itemsDraggable`)) {
+			this._syncNativeDraggable();
+			this.#nativeDrag.refreshDraggable();
+		}
 	}
 	/** The most recently selected item, or `undefined` if nothing is selected. */
 	get selectedItem() {
@@ -15700,6 +16441,14 @@ let DetailListElement = class DetailListElement extends i {
 			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 });
@@ -15817,6 +16566,10 @@ let DetailListElement = class DetailListElement extends i {
       color: var(--item-text-selected);
     }
 
+    ::slotted([data-drag-origin]) {
+      opacity: 0.6;
+    }
+
     /* checked mode: the injected checkbox communicates selection — suppress bg */
     :host([interaction-mode="checked"]) ::slotted([data-selected]) {
       background: transparent;
@@ -15906,6 +16659,12 @@ __decorate([property({
 	attribute: `search-modes`,
 	reflect: true
 })], DetailListElement.prototype, "searchModes", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: `items-draggable`,
+	reflect: true
+})], DetailListElement.prototype, "itemsDraggable", void 0);
+__decorate([property({ attribute: false })], DetailListElement.prototype, "dragPreviewRenderer", void 0);
 __decorate([query(`ul`)], DetailListElement.prototype, "_listEl", void 0);
 DetailListElement = __decorate([safeCustomElement(`ixfx-detail-list`)], DetailListElement);
 //#endregion
@@ -21944,12 +22703,50 @@ let GridListElement = class GridListElement extends i {
 			},
 			onStateChange: () => this._syncItemStates(),
 			itemWrap: this.#itemWrap,
-			hoverDisabled: () => this.disableHoverTickle || this.#dragSelect.isDragging
+			hoverDisabled: () => this.disableHoverTickle || this.#dragSelect.isDragging || this.#nativeDrag.isDragging
 		});
 		this.#marqueePreview = /* @__PURE__ */ new Set();
 		this.#nativeDragging = false;
 		this.#dragOriginKey = void 0;
 		this.#postDragSuppressTimer = 0;
+		this.#nativeDrag = new ListNativeDragController(this, {
+			source: `grid-list`,
+			isEnabled: () => this.itemsDraggable && this.selectionMode !== `none` && this.#source.count > 0,
+			resolveEventToKey: (target) => {
+				if (target instanceof Element) {
+					const key = (target.closest?.(`.cell`))?.dataset.key;
+					if (key) return key;
+					const keyed = (target.closest?.(`[data-key]`))?.dataset.key ?? target.dataset?.key ?? keyForElement(target);
+					if (keyed) return keyed;
+				}
+			},
+			prepareSelection: (originKey) => this.#prepareNativeDrag(originKey),
+			getMetrics: () => ({
+				itemSize: this.itemSize,
+				captionStyle: this.captionStyle,
+				captionHeight: this.captionHeight,
+				rowHeight: this.#rowHeight()
+			}),
+			getRenderer: () => this.dragPreviewRenderer,
+			dispatch: (detail) => this._dispatch(`list-native-drag-start`, detail, true),
+			onActiveChange: (active, originKey) => {
+				this.#nativeDragging = active;
+				this.#dragOriginKey = active ? originKey : void 0;
+				this.toggleAttribute(`data-native-dragging`, active);
+				if (active) {
+					const count = [...this.selection.selectedKeys].filter((k) => !isSyntheticKey(k)).length;
+					this.setAttribute(`aria-label`, count <= 1 ? `Dragging 1 item` : `Dragging ${count} items`);
+				} else this.removeAttribute(`aria-label`);
+				this.requestUpdate();
+			},
+			onEnd: () => {
+				this.#clearNativeDragState();
+				this.#startPostDragSuppressTimer();
+			},
+			syncLightDomDraggable: () => {
+				for (const child of this.children) if (child instanceof HTMLElement) child.draggable = this.itemsDraggable;
+			}
+		});
 		this.#activeCaptionPan = null;
 		this.#dragSelect = new ListDragSelectController(this, {
 			getSurface: () => this.#viewportRef.value,
@@ -21995,23 +22792,6 @@ let GridListElement = class GridListElement extends i {
 				this.#emitViewportChange();
 			});
 		};
-		this.#onDragStart = (e, key) => {
-			this.#doDragStart(key, () => e.preventDefault(), e);
-		};
-		this.#onSlottedDragStart = (e) => {
-			if (!this.itemsDraggable) return;
-			let cell = e.composedPath().find((n) => n instanceof Element && n.classList.contains(`cell`));
-			if (!cell && e.target instanceof Element) cell = e.target.closest?.(`.cell`);
-			if (!cell) return;
-			const key = cell.dataset.key;
-			if (!key) return;
-			if (e instanceof DragEvent) this.#doDragStart(key, () => e.preventDefault(), e);
-			else this.#doDragStart(key, () => {});
-		};
-		this.#onDragEnd = () => {
-			this.#clearNativeDragState();
-			this.#startPostDragSuppressTimer();
-		};
 		this._onKeyDown = (e) => {
 			if ((e.ctrlKey || e.metaKey) && e.key === `f`) return;
 			if ((e.ctrlKey || e.metaKey) && e.key === `a`) {
@@ -22448,6 +23228,35 @@ let GridListElement = class GridListElement extends i {
 	#dragOriginKey;
 	/** Timer handle for post-drag click suppression. */
 	#postDragSuppressTimer;
+	#nativeDrag;
+	/** Origin rule + display-ordered entry resolution for native drag-out (both modes). */
+	#prepareNativeDrag(originKey) {
+		const index = this.#source.indexOfKey(originKey);
+		if (index < 0 || !this.#source.isSelectable(index)) return void 0;
+		if (!this.selection.selectedKeys.has(originKey)) this.selection.replace(originKey);
+		const ordered = this.#source.keys().filter((k) => !isSyntheticKey(k) && this.selection.selectedKeys.has(k));
+		const selected = [];
+		for (const key of ordered) {
+			const entryIndex = this.#source.indexOfKey(key);
+			if (entryIndex < 0) continue;
+			const data = this.#source.resolveKeyToData(key);
+			const element = this.#source.resolveKeyToElement(key);
+			const item = data ?? element;
+			if (item === void 0) continue;
+			selected.push({
+				key,
+				index: entryIndex,
+				item,
+				...element ? { element } : {}
+			});
+		}
+		const origin = selected.find((entry) => entry.key === originKey);
+		if (!origin) return void 0;
+		return {
+			origin,
+			selected
+		};
+	}
 	/**
 	* The single caption pan-text currently scrolling. At most one caption is
 	* a pan-text in loop mode at a time — when tickle moves, the old one is
@@ -22580,7 +23389,7 @@ let GridListElement = class GridListElement extends i {
 			clearTimeout(this.#reflowTimer);
 			this.#reflowTimer = 0;
 		}
-		if (this.#nativeDragging) this.#clearNativeDragState();
+		if (this.#nativeDragging || this.#nativeDrag.isDragging) this.#clearNativeDragState();
 	}
 	#onChildrenChanged(records) {
 		const previousLength = this.#items.length;
@@ -22661,7 +23470,7 @@ let GridListElement = class GridListElement extends i {
 		this.#measureViewport(false);
 		this.#syncItems();
 		this.requestUpdate();
-		this.#initSlottedDragInterceptor();
+		this.#nativeDrag.refreshDraggable();
 	}
 	/** (Re)construct {@link #source} for the current mode and re-apply the filters. */
 	#rebuildSource() {
@@ -22751,7 +23560,7 @@ let GridListElement = class GridListElement extends i {
 			this.selection.clearAnchor();
 			this.#syncAriaMultiselectable();
 		}
-		if (changed.has(`itemsDraggable`)) this.#syncSlottedDraggable();
+		if (changed.has(`itemsDraggable`)) this.#nativeDrag.refreshDraggable();
 		if (changed.has(`orientation`)) {
 			const vp = this.#viewportRef.value;
 			if (vp) {
@@ -23170,8 +23979,6 @@ let GridListElement = class GridListElement extends i {
         @click=${(e) => this.#onCellClick(e, key)}
         @dblclick=${() => this.#onCellActivate(key)}
         @pointerenter=${() => this.tickled.handlePointerEnter(key)}
-        @dragstart=${(e) => this.#onDragStart(e, key)}
-        @dragend=${() => this.#onDragEnd()}
       >
         <div class="content" part="content">${this.#source.renderCellContent(index)}</div>
         ${showCaption ? this.#renderCaption(caption, captionCss, tickled) : ``}
@@ -23256,8 +24063,6 @@ let GridListElement = class GridListElement extends i {
         @click=${(e) => this.#onCellClick(e, key)}
         @dblclick=${() => this.#onCellActivate(key)}
         @pointerenter=${() => this.tickled.handlePointerEnter(key)}
-        @dragstart=${(e) => this.#onDragStart(e, key)}
-        @dragend=${() => this.#onDragEnd()}
       >
         <div class="thumb" part="thumb" style=${thumbStyle}>
           ${this.#source.renderCellContent(index)}
@@ -23274,145 +24079,10 @@ let GridListElement = class GridListElement extends i {
 		}
 	}
 	#onCellClick(e, key) {
-		if (this.#dragSelect.isDragging || this.#nativeDragging || this.#postDragSuppressTimer !== 0) return;
+		if (this.#dragSelect.isDragging || this.#nativeDragging || this.#nativeDrag.isDragging || this.#postDragSuppressTimer !== 0) return;
 		this.selection.handleClick(key, e);
 		this.#emitItemEvent(`list-item-click`, key);
 	}
-	#doDragStart(key, cancelled, dragEvent) {
-		if (!this.itemsDraggable) return false;
-		const index = this.#source.indexOfKey(key);
-		if (index < 0 || !this.#source.isSelectable(index)) return false;
-		if (!this.selection.selectedKeys.has(key)) this.selection.replace(key);
-		const selectedKeys = this.#source.keys().filter((k) => !isSyntheticKey(k)).filter((k) => this.selection.selectedKeys.has(k));
-		const detail = {
-			key,
-			index: this.#source.indexOfKey(key),
-			item: this.#source.resolveKeyToData(key) ?? this.#source.resolveKeyToElement(key),
-			selectedKeys
-		};
-		if (!this._dispatch(`grid-list-native-drag-start`, detail, true)) {
-			cancelled();
-			return false;
-		}
-		this.#nativeDragging = true;
-		this.#dragOriginKey = key;
-		this.toggleAttribute(`data-native-dragging`, true);
-		const count = selectedKeys.length;
-		this.setAttribute(`aria-label`, count === 1 ? `Dragging 1 item` : `Dragging ${count} items`);
-		if (dragEvent && count > 1) this.#setMultiItemDragImage(dragEvent, selectedKeys);
-		return true;
-	}
-	#setMultiItemDragImage(e, selectedKeys) {
-		const preview = this.#createMultiItemPreview(selectedKeys);
-		document.body.appendChild(preview);
-		const rect = preview.getBoundingClientRect();
-		e.dataTransfer?.setDragImage(preview, rect.width / 2, rect.height / 2);
-		requestAnimationFrame(() => preview.remove());
-	}
-	#createMultiItemPreview(selectedKeys) {
-		const preview = document.createElement(`div`);
-		preview.style.cssText = `
-      position: fixed;
-      top: -9999px;
-      left: -9999px;
-      display: flex;
-      flex-direction: column;
-      gap: 4px;
-      padding: 8px;
-      background: var(--surface-4, #333);
-      border: 1px solid var(--border, #555);
-      border-radius: 8px;
-      box-shadow: 0 4px 16px rgba(0,0,0,0.3);
-      font-family: system-ui, sans-serif;
-      font-size: 12px;
-      color: var(--surface-text, #fff);
-      max-width: 200px;
-      z-index: 999999;
-    `;
-		const header = document.createElement(`div`);
-		header.style.cssText = `
-      font-weight: 600;
-      padding-bottom: 4px;
-      border-bottom: 1px solid var(--border, #555);
-      margin-bottom: 4px;
-    `;
-		header.textContent = `${selectedKeys.length} items`;
-		preview.appendChild(header);
-		for (const key of selectedKeys.slice(0, 5)) {
-			const row = this.#createPreviewRow(key);
-			if (row) preview.appendChild(row);
-		}
-		if (selectedKeys.length > 5) {
-			const more = document.createElement(`div`);
-			more.style.cssText = `opacity: 0.6; text-align: center;`;
-			more.textContent = `+${selectedKeys.length - 5} more`;
-			preview.appendChild(more);
-		}
-		return preview;
-	}
-	#createPreviewRow(key) {
-		const el = this.#source.resolveKeyToElement(key);
-		if (!el) return null;
-		const row = document.createElement(`div`);
-		row.style.cssText = `
-      display: flex;
-      align-items: center;
-      gap: 6px;
-    `;
-		const thumb = document.createElement(`div`);
-		thumb.style.cssText = `
-      width: 32px;
-      height: 32px;
-      border-radius: 4px;
-      overflow: hidden;
-      background: var(--surface-5, #444);
-      flex-shrink: 0;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    `;
-		const slottedImg = el.querySelector(`img`);
-		const slottedSvg = el.querySelector(`svg`);
-		const slottedPlaceholder = el.querySelector(`.placeholder`);
-		if (slottedImg) {
-			const img = slottedImg.cloneNode(true);
-			img.style.cssText = `width: 100%; height: 100%; object-fit: cover;`;
-			thumb.appendChild(img);
-		} else if (slottedSvg) {
-			const svg = slottedSvg.cloneNode(true);
-			svg.style.cssText = `width: 70%; height: 70%; opacity: 0.8;`;
-			thumb.appendChild(svg);
-		} else if (slottedPlaceholder) thumb.textContent = slottedPlaceholder.textContent || `?`;
-		const label = document.createElement(`span`);
-		label.style.cssText = `
-      flex: 1;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-    `;
-		label.textContent = el.getAttribute(`data-label`) || key;
-		row.appendChild(thumb);
-		row.appendChild(label);
-		return row;
-	}
-	#onDragStart;
-	#onSlottedDragStart;
-	#initSlottedDragInterceptor() {
-		this.renderRoot.addEventListener(`dragstart`, this.#onSlottedDragStart, { capture: true });
-		const observer = new MutationObserver(() => this.#syncSlottedDraggable());
-		observer.observe(this, {
-			childList: true,
-			subtree: true
-		});
-		this.#slottedDragObserver = observer;
-		this.#syncSlottedDraggable();
-	}
-	#slottedDragObserver;
-	#syncSlottedDraggable() {
-		const draggable = this.itemsDraggable;
-		for (const child of this.children) if (child instanceof HTMLElement) child.draggable = draggable;
-	}
-	#onDragEnd;
 	#startPostDragSuppressTimer() {
 		if (this.#postDragSuppressTimer) clearTimeout(this.#postDragSuppressTimer);
 		this.#postDragSuppressTimer = window.setTimeout(() => {
@@ -23487,6 +24157,7 @@ __decorate([property({
 	attribute: `items-draggable`,
 	reflect: true
 })], GridListElement.prototype, "itemsDraggable", void 0);
+__decorate([property({ attribute: false })], GridListElement.prototype, "dragPreviewRenderer", void 0);
 __decorate([property({
 	type: String,
 	attribute: `search-modes`,
@@ -23915,7 +24586,7 @@ let TreeBaseElement = class TreeBaseElement extends i {
 		this.#lastNodeByKey = /* @__PURE__ */ new Map();
 		this.#enteringKeys = /* @__PURE__ */ new Set();
 		this.#leaving = /* @__PURE__ */ new Map();
-		this.#leavingAnimating = /* @__PURE__ */ new Set();
+		this.#leavingAnimations = /* @__PURE__ */ new Map();
 		this.#treeAnimReady = false;
 		this.#onKeyDown = (event) => {
 			if (this.search.isOpen) return;
@@ -24068,8 +24739,18 @@ let TreeBaseElement = class TreeBaseElement extends i {
 	#lastNodeByKey;
 	#enteringKeys;
 	#leaving;
-	#leavingAnimating;
+	#leavingAnimations;
 	#treeAnimReady;
+	#cancelLeavingAnimation(key) {
+		this.#leavingAnimations.get(key)?.cancel();
+		this.#leavingAnimations.delete(key);
+	}
+	#cancelAllLeavingAnimations() {
+		for (const animation of this.#leavingAnimations.values()) try {
+			animation.cancel();
+		} catch {}
+		this.#leavingAnimations.clear();
+	}
 	willUpdate(changedProps) {
 		super.willUpdate(changedProps);
 		this.#diffVisibleNodes();
@@ -24088,12 +24769,12 @@ let TreeBaseElement = class TreeBaseElement extends i {
 			}
 		}
 		for (const key of [...this.#leaving.keys()]) if (nowKeys.has(key)) {
+			this.#cancelLeavingAnimation(key);
 			this.#leaving.delete(key);
-			this.#leavingAnimating.delete(key);
 		}
 		if (this.#leaving.size > MAX_ANIMATED_ROWS) {
+			this.#cancelAllLeavingAnimations();
 			this.#leaving.clear();
-			this.#leavingAnimating.clear();
 		}
 	}
 	/** True while `node` is a fading ghost row (removed / collapsed, still animating out). */
@@ -24130,18 +24811,38 @@ let TreeBaseElement = class TreeBaseElement extends i {
 		if (this.#enteringKeys.size > 0) {
 			for (const el of this.renderRoot.querySelectorAll(`.item`)) {
 				const key = el.dataset.key;
-				if (key !== void 0 && this.#enteringKeys.has(key)) animateListItemIn(el);
+				if (key === void 0 || !this.#enteringKeys.has(key)) continue;
+				if (this.#leavingAnimations.has(key)) this.#cancelLeavingAnimation(key);
+				else for (const animation of el.getAnimations()) animation.cancel();
+				animateListItemIn(el);
 			}
 			this.#enteringKeys.clear();
 		}
 		if (this.#leaving.size > 0) for (const el of this.renderRoot.querySelectorAll(`.item.leaving`)) {
 			const key = el.dataset.key;
-			if (key === void 0 || this.#leavingAnimating.has(key)) continue;
-			this.#leavingAnimating.add(key);
-			animateListItemOut(el).then(() => {
+			if (key === void 0 || this.#leavingAnimations.has(key)) continue;
+			const result = animateListItemOut(el);
+			const animation = result.animation;
+			if (!animation) {
+				result.then(() => {
+					if (!this.#leaving.has(key)) return;
+					this.#leaving.delete(key);
+					this.requestUpdate();
+				});
+				continue;
+			}
+			this.#cancelLeavingAnimation(key);
+			this.#leavingAnimations.set(key, animation);
+			result.then(() => {
+				if (this.#leavingAnimations.get(key) !== animation) return;
+				this.#leavingAnimations.delete(key);
 				this.#leaving.delete(key);
-				this.#leavingAnimating.delete(key);
 				this.requestUpdate();
+				this.updateComplete.then(() => {
+					try {
+						animation.cancel();
+					} catch {}
+				});
 			});
 		}
 		const visible = this.root ? this.#getAllNodes() : [];
@@ -24157,6 +24858,9 @@ let TreeBaseElement = class TreeBaseElement extends i {
 			this.#clearSelectionInternal();
 			this.tickled.clearTickled();
 			this._focusedDepth = 0;
+			this.#cancelAllLeavingAnimations();
+			this.#leaving.clear();
+			this.#enteringKeys.clear();
 		}
 		if (changedProps.has(`model`)) {
 			this.#modelUnsubscribe?.();
@@ -24207,6 +24911,9 @@ let TreeBaseElement = class TreeBaseElement extends i {
 	}
 	disconnectedCallback() {
 		super.disconnectedCallback();
+		this.#cancelAllLeavingAnimations();
+		this.#leaving.clear();
+		this.#enteringKeys.clear();
 		this.#modelUnsubscribe?.();
 		this.#modelUnsubscribe = void 0;
 		this.#unregisterSearchCommands?.();
@@ -24867,7 +25574,7 @@ let TreeBaseElement = class TreeBaseElement extends i {
       --tree-text: var(--surface-3-text);
       --tree-muted-text: var(--surface-muted-text);
       --tree-indent: 1ch;
-      --tree-item-height: 2ch;
+      --tree-item-height: 30px;
       --tree-caret-size: 30px;
       --tree-radius: var(--radius-s);
 
@@ -24900,7 +25607,7 @@ let TreeBaseElement = class TreeBaseElement extends i {
       display: flex;
       align-items: center;
       height: var(--tree-item-height);
-      padding-left: calc(var(--tree-indent) * var(--depth, 0) + var(--space-s));
+      padding-left: calc(var(--tree-indent) * var(--depth, 0));
       cursor: pointer;
       user-select: none;
       font-family: var(--font-family);
@@ -25371,6 +26078,7 @@ let VerticalListElement = class VerticalListElement extends i {
 		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();
@@ -25401,7 +26109,41 @@ let VerticalListElement = class VerticalListElement extends i {
 			},
 			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`),
@@ -25483,7 +26225,7 @@ let VerticalListElement = class VerticalListElement extends i {
 			}
 		};
 		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 });
@@ -25500,6 +26242,44 @@ let VerticalListElement = class VerticalListElement extends i {
 	#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;
@@ -25567,6 +26347,10 @@ let VerticalListElement = class VerticalListElement extends i {
 		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 —
@@ -25606,6 +26390,10 @@ let VerticalListElement = class VerticalListElement extends i {
 			}
 			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() {
@@ -25875,6 +26663,14 @@ let VerticalListElement = class VerticalListElement extends i {
 			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 });
@@ -26010,6 +26806,10 @@ let VerticalListElement = class VerticalListElement extends i {
       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;
@@ -26056,6 +26856,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
 //#region src/grouped-item-lister/vertical-list-adapter.ts
@@ -42587,6 +43393,6 @@ function init() {
 	console.log(`Init`);
 }
 //#endregion
-export { AcTextElement, AcTokenElement, BottomDrawerElement, ButtonElement, Checkbox, ColourPicker, ColourPickerPopup, CrumbNavigationElement, CrumbPathController, CrumbPathElement, DataController, DataDisplayComponent, DataGridElement, DataTableElement, DetailListElement, DockHostElement, DockPanelElement, EditableLabel, EditableNumber, FormElement, FormGroupElement, FormPartElement, GridListElement, GroupedItemListerElement, ICON_CARET_RIGHT, ICON_CHECK, ICON_CHEVRON_DOWN, ICON_CLOSE, IncrSearchTreeController as IncrSearchMillerController, IncrSearchTreeController, IxfxHexEditorElement, IxfxIconElement, IxfxTimelineElement, KeyedElementIndex, LIST_ITEM_MOTION_MS, LIST_SEARCH_COMMAND_IDS, LIST_SEARCH_MODES, LabelledRadialInput, LabelledRangeInput, LabelledSliderInput, LedElement, ListDragSelectController, ListSearchController, ListSelectionController, menu_exports as Menu, MillerBaseElement, MillerListElement, MillerTreeController, NarrowedTextElement, NotificationManager, NotificationPillElement, PanTextElement, PanelElement, PanelGroupElement, PlotDataSeries, PlotHistogram, PlotMultiAxis, PlotSingleAxis, PlotXyAxis, PolarPad, RadialInputElement, RadioGroup, RangeElement, RangeInput, RangeMultiElement, RatingElement, SelectHorizElement, SliderInputElement, SlidingNumberElement, SnackbarElement, SnapContainer, SplitButton, SplitLayoutElement, SplitPanelElement, SwipeElement, TabController, TabListElement, TabListItemElement, TabPanelElement, TabPanelsElement, TextShimmerElement, TickledController, TimelineController, TimelineTrackTabElement, TitlebarElement, ToolbarElement, ToolbarGroupElement, TooltipElement, TransitoryLabelElement, TreeBaseElement, TreeController, TreeDataModel, TreeKeyboardNavController, TreeListElement, TwoSplitLayoutElement, VerticalListElement, XyPad, addPanelToStack, animateListItemIn, animateListItemOut, applyAgeModification, applyHighlights, applySnapshot, attachTimelineInteractions, bottomDrawerCommandId, buildHighlightTargets, buildModel, clearHighlights, collectContainerNames, collectDataResult, collectPanelIds, collectStackPaths, computeColour, computeLeafGeoms, createAcCompletionProvider, createDataListSearchAdapter, createElementIncrSearch, createElementListSearchAdapter, createEmptyLayout, createEmptyStack, createFuzzySearch, createIncrSearch, createPillRenderer, createSplit, createStack, createTreeListAdapter, createTreeListSearchAdapter, createVerticalListAdapter, distribute, extractStack, findNode, findParentOf, findStackOf, findStackPathByName, getActiveDragPanelId, getIcon, getIconEntry, getIconFont, getLeafNeighbours, hasIcon, iconBus, init, insertBeside, isDragging, isMultiMode, isSplit, isStack, keyForElement, listItemFadeKeyframes, listSearchStyles, monitorIndeterminate, moveLeafNodeToEdge, moveLeafStep, normalise, normalize, panelGapIndex, parseColourScaleAttr, parseLayout, pointerOverAnyHost, prefersReducedMotion, readBaseColour, registerFontIcon, registerIcon, registerListSearchCommands, removePanelFromStack, resolveCssVars, resolveGrid, resolveLeafPath, resolveTracks, serializeLayout, setActive, setIconFont, svgToDataUri, swapLeaves, tickledItemStyles, tickledStyles, timelineStyles, toSnapshot, walk, wrapRoot };
+export { AcTextElement, AcTokenElement, BottomDrawerElement, ButtonElement, Checkbox, ColourPicker, ColourPickerPopup, CrumbNavigationElement, CrumbPathController, CrumbPathElement, DataController, DataDisplayComponent, DataGridElement, DataTableElement, DetailListElement, DockHostElement, DockPanelElement, EditableLabel, EditableNumber, FormElement, FormGroupElement, FormPartElement, GridListElement, GroupedItemListerElement, ICON_CARET_RIGHT, ICON_CHECK, ICON_CHEVRON_DOWN, ICON_CLOSE, IncrSearchTreeController as IncrSearchMillerController, IncrSearchTreeController, IxfxHexEditorElement, IxfxIconElement, IxfxTimelineElement, KeyedElementIndex, LIST_ITEM_MOTION_MS, LIST_SEARCH_COMMAND_IDS, LIST_SEARCH_MODES, LabelledRadialInput, LabelledRangeInput, LabelledSliderInput, LedElement, ListDragSelectController, ListNativeDragController, ListSearchController, ListSelectionController, menu_exports as Menu, MillerBaseElement, MillerListElement, MillerTreeController, NarrowedTextElement, NotificationManager, NotificationPillElement, PanTextElement, PanelElement, PanelGroupElement, PlotDataSeries, PlotHistogram, PlotMultiAxis, PlotSingleAxis, PlotXyAxis, PolarPad, RadialInputElement, RadioGroup, RangeElement, RangeInput, RangeMultiElement, RatingElement, SelectHorizElement, SliderInputElement, SlidingNumberElement, SnackbarElement, SnapContainer, SplitButton, SplitLayoutElement, SplitPanelElement, SwipeElement, TabController, TabListElement, TabListItemElement, TabPanelElement, TabPanelsElement, TextShimmerElement, TickledController, TimelineController, TimelineTrackTabElement, TitlebarElement, ToolbarElement, ToolbarGroupElement, TooltipElement, TransitoryLabelElement, TreeBaseElement, TreeController, TreeDataModel, TreeKeyboardNavController, TreeListElement, TwoSplitLayoutElement, VerticalListElement, XyPad, addPanelToStack, animateListItemIn, animateListItemOut, applyAgeModification, applyHighlights, applySnapshot, attachTimelineInteractions, bottomDrawerCommandId, buildHighlightTargets, buildModel, captionForEntry, clearHighlights, collectContainerNames, collectDataResult, collectPanelIds, collectStackPaths, computeColour, computeLeafGeoms, createAcCompletionProvider, createDataListSearchAdapter, createDefaultListDragPreview, createElementIncrSearch, createElementListSearchAdapter, createEmptyLayout, createEmptyStack, createFuzzySearch, createIncrSearch, createPillRenderer, createSplit, createStack, createTreeListAdapter, createTreeListSearchAdapter, createVerticalListAdapter, distribute, extractStack, findNode, findParentOf, findStackOf, findStackPathByName, getActiveDragPanelId, getIcon, getIconEntry, getIconFont, getLeafNeighbours, hasIcon, iconBus, init, insertBeside, isDragging, isMultiMode, isSplit, isStack, keyForElement, listItemFadeKeyframes, listSearchStyles, monitorIndeterminate, moveLeafNodeToEdge, moveLeafStep, normalise, normalize, panelGapIndex, parseColourScaleAttr, parseLayout, pointerOverAnyHost, prefersReducedMotion, readBaseColour, registerFontIcon, registerIcon, registerListSearchCommands, removePanelFromStack, resolveCssVars, resolveGrid, resolveLeafPath, resolveTracks, serializeLayout, setActive, setIconFont, startListItemOutAnimation, svgToDataUri, swapLeaves, tickledItemStyles, tickledStyles, timelineStyles, toSnapshot, walk, wrapRoot };
 
 //# sourceMappingURL=index.js.map