@ixfx/components 0.8.2 → 0.8.3

package/dist/{grid-list-bmBWq6P-.js → grid-list-BXfY3XXX.js}

@@ -1,17 +1,18 @@
 import { t as TickledController } from "./tickled-controller-Dh1Uh_vG.js";
 import { n as tickledStyles, t as tickledItemStyles } from "./tickled-styles-BrAHEj1q.js";
-import { t as themeFallbacks } from "./fallbacks-DNI9xt0F.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, d as createDataListSearchAdapter, i as ListSearchController, n as listSearchStyles, o as registerListSearchCommands, r as LIST_SEARCH_MODES, u as keyForElement } from "./incr-search-C05WjbZh.js";
+import { r as ListDragSelectController, t as ListSelectionController } from "./list-selection-controller-SA4piSBi.js";
 import { i as listItemFadeKeyframes } from "./list-item-animation-DuiwgN3l.js";
-import { t as ListSelectionController } from "./list-selection-controller-DTFI40li.js";
 import "./interaction-B9AAlsFO.js";
 import { t as scrollFadeStyles } from "./scroll-fade-CAs1EabA.js";
 import { LitElement, css, html } from "lit";
-import { property, state } from "lit/decorators.js";
+import { property, query, state } from "lit/decorators.js";
 import { createCommandRegistry } from "@clinth/ui-commands";
 import { repeat } from "lit/directives/repeat.js";
 import { createRef, ref } from "lit/directives/ref.js";
+import { classMap } from "lit/directives/class-map.js";
 //#region src/grid-list/grid-list-source.ts
 const ITEM_SELECTOR$1 = `:scope > *`;
 const SYNTHETIC_PREFIX = `gl-auto-`;
@@ -232,6 +233,233 @@ var DataGridListSource = class {
 	}
 };
 //#endregion
+//#region src/pan-text/pan-text.ts
+const SPEED = 45;
+const END_PADDING = 4;
+const START_DELAY = 300;
+const END_DWELL = 2e3;
+const RESET_DURATION = 400;
+const PAN_EASING = `cubic-bezier(0.25, 0.46, 0.45, 0.94)`;
+let PanTextElement = class PanTextElement extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this.direction = `end`;
+		this.disabled = false;
+		this.mode = `hover`;
+		this._isOverflowing = false;
+		this._isHovering = false;
+		this._loopActive = false;
+		this._loopAtEnd = false;
+		this._overflow = 0;
+		this._resizeObserver = null;
+		this._loopTimer = 0;
+		this._onMouseEnter = () => {
+			this._isHovering = true;
+		};
+		this._onMouseLeave = () => {
+			this._isHovering = false;
+		};
+		this._measure = () => {
+			if (this._isHovering || this._loopAtEnd) return;
+			const el = this._textEl;
+			if (!el) return;
+			this._overflow = Math.max(0, el.scrollWidth - el.clientWidth);
+			const overflowing = this._overflow > 0;
+			this.classList.toggle(`is-overflowing`, overflowing);
+			if (overflowing !== this._isOverflowing) this._isOverflowing = overflowing;
+			if (this._loopActive && this.mode === `loop` && !this.disabled && overflowing && this._loopTimer === 0) this._scheduleLoopPan(START_DELAY);
+			if (!overflowing && this._loopAtEnd) {
+				this._loopAtEnd = false;
+				this.requestUpdate();
+			}
+		};
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		this._resizeObserver = new ResizeObserver(() => this._measure());
+		this.addEventListener(`mouseenter`, this._onMouseEnter);
+		this.addEventListener(`mouseleave`, this._onMouseLeave);
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this._clearLoopTimer();
+		this._loopActive = false;
+		this._loopAtEnd = false;
+		this._resizeObserver?.disconnect();
+		this._resizeObserver = null;
+		this.removeEventListener(`mouseenter`, this._onMouseEnter);
+		this.removeEventListener(`mouseleave`, this._onMouseLeave);
+	}
+	firstUpdated() {
+		this._measure();
+		this._resizeObserver?.observe(this);
+		document.fonts?.ready.then(() => this._measure());
+		if (this.mode === `loop`) this.startLoop();
+	}
+	updated(changed) {
+		if (changed.has(`mode`)) {
+			if (this.mode === `loop`) this.startLoop();
+			else this.stopLoop();
+		}
+		if (changed.has(`disabled`) && this.disabled) this.stopLoop();
+		this._measure();
+	}
+	/**
+	* Whether a loop pan is currently active (between `startLoop()` and `stopLoop()`).
+	*/
+	get looping() {
+		return this._loopActive;
+	}
+	/**
+	* Begin looping: pan to the end, dwell there for 2 seconds, reset to the
+	* start and pan again, repeating until `stopLoop()` is called. A no-op when
+	* `disabled`, when there is nothing to reveal, or under reduced-motion.
+	*/
+	startLoop() {
+		if (this.disabled || this._prefersReducedMotion()) return;
+		this._loopActive = true;
+		this._loopAtEnd = false;
+		this.requestUpdate();
+		if (this._isOverflowing && this._loopTimer === 0) this._scheduleLoopPan(START_DELAY);
+	}
+	/**
+	* Stop a loop started with `startLoop()` and snap back to the rest position.
+	*/
+	stopLoop() {
+		if (!this._loopActive && !this._loopAtEnd && this._loopTimer === 0) return;
+		this._clearLoopTimer();
+		this._loopActive = false;
+		this._loopAtEnd = false;
+		this.requestUpdate();
+	}
+	_prefersReducedMotion() {
+		return globalThis.matchMedia?.(`(prefers-reduced-motion: reduce)`).matches ?? false;
+	}
+	_panDuration() {
+		return Math.max(1.5, (this._overflow + END_PADDING) / SPEED);
+	}
+	_clearLoopTimer() {
+		if (this._loopTimer !== 0) {
+			clearTimeout(this._loopTimer);
+			this._loopTimer = 0;
+		}
+	}
+	_scheduleLoopPan(delay) {
+		this._clearLoopTimer();
+		this._loopTimer = window.setTimeout(() => {
+			this._loopTimer = 0;
+			if (!this._loopActive || this.disabled || !this._isOverflowing) return;
+			this._loopAtEnd = true;
+			this.requestUpdate();
+			const dwell = this._panDuration() * 1e3 + END_DWELL;
+			this._loopTimer = window.setTimeout(() => {
+				this._loopTimer = 0;
+				if (!this._loopActive) return;
+				this._loopAtEnd = false;
+				this.requestUpdate();
+				this._scheduleLoopPan(700);
+			}, dwell);
+		}, delay);
+	}
+	_textStyle() {
+		if (!this._isOverflowing) return ``;
+		const distance = this._overflow + END_PADDING;
+		const duration = Math.max(1.5, distance / SPEED);
+		const revealEnd = this.direction === `end`;
+		const restX = revealEnd ? 0 : -distance;
+		const hoverX = revealEnd ? -distance : 0;
+		if (this._loopActive && this.mode === `loop`) {
+			if (this._loopAtEnd) return [
+				`transform: translateX(${hoverX}px)`,
+				`transition: transform ${duration}s ${PAN_EASING}`,
+				`overflow: visible`,
+				`text-overflow: clip`
+			].join(`; `);
+			return [
+				`transform: translateX(${restX}px)`,
+				`transition: transform ${RESET_DURATION}ms ${PAN_EASING}`,
+				revealEnd ? `` : `overflow: visible; text-overflow: clip`
+			].filter(Boolean).join(`; `);
+		}
+		if (this._isHovering) return [
+			`transform: translateX(${hoverX}px)`,
+			`transition: transform ${duration}s ${PAN_EASING} ${START_DELAY}ms`,
+			`overflow: visible`,
+			`text-overflow: clip`
+		].join(`; `);
+		return [
+			`transform: translateX(${restX}px)`,
+			`transition: transform 400ms ${PAN_EASING}`,
+			revealEnd ? `` : `overflow: visible; text-overflow: clip`
+		].filter(Boolean).join(`; `);
+	}
+	render() {
+		const textClasses = {
+			"is-overflowing": this._isOverflowing,
+			"is-hovering": this._isHovering
+		};
+		return html`
+      <span class="text ${classMap(textClasses)}" part="text" style=${this._textStyle()}>
+        <slot @slotchange=${this._measure}></slot>
+      </span>
+    `;
+	}
+	static {
+		this.styles = [themeFallbacks, css`
+    /* Renders like plain inline text: no colours, border, padding or margin
+       of its own — it only adds the clipping needed to pan on hover. */
+    :host {
+      display: inline-block;
+      overflow: hidden;
+      white-space: nowrap;
+      max-width: 100%;
+      box-sizing: border-box;
+      font: inherit;
+      color: inherit;
+    }
+
+    :host([disabled]) {
+      opacity: var(--disabled-opacity, 0.5);
+      pointer-events: none;
+    }
+
+    .text {
+      display: block;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      will-change: transform;
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      .text {
+        transition: none !important;
+        transform: none !important;
+      }
+    }
+  `];
+	}
+};
+__decorate([property({
+	type: String,
+	attribute: `direction`
+})], PanTextElement.prototype, "direction", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: `disabled`
+})], PanTextElement.prototype, "disabled", void 0);
+__decorate([property({
+	type: String,
+	attribute: `mode`,
+	reflect: true
+})], PanTextElement.prototype, "mode", void 0);
+__decorate([state()], PanTextElement.prototype, "_isOverflowing", void 0);
+__decorate([state()], PanTextElement.prototype, "_isHovering", void 0);
+__decorate([state()], PanTextElement.prototype, "_loopActive", void 0);
+__decorate([state()], PanTextElement.prototype, "_loopAtEnd", void 0);
+__decorate([query(`.text`)], PanTextElement.prototype, "_textEl", void 0);
+PanTextElement = __decorate([safeCustomElement(`ixfx-pan-text`)], PanTextElement);
+//#endregion
 //#region src/grid-list/grid-list.ts
 const ITEM_SELECTOR = `:scope > *`;
 const MIN_ITEM_SIZE = 16;
@@ -327,6 +555,7 @@ let GridListElement = class GridListElement extends LitElement {
 		this.captionBackdrop = `scrim`;
 		this.captionHeight = 24;
 		this.itemWrap = `stop`;
+		this.itemsDraggable = false;
 		this.items = [];
 		this._scrollTop = 0;
 		this._scrollLeft = 0;
@@ -363,11 +592,56 @@ let GridListElement = class GridListElement extends LitElement {
 				enabled: this.#source.isSelectable(i)
 			})),
 			onTickle: (k) => {
+				this.#stopActiveCaptionPan();
 				if (k !== void 0) this.#emitItemEvent(`list-tickle`, k);
 			},
 			onStateChange: () => this._syncItemStates(),
 			itemWrap: this.#itemWrap,
-			hoverDisabled: () => this.disableHoverTickle
+			hoverDisabled: () => this.disableHoverTickle || this.#dragSelect.isDragging
+		});
+		this.#marqueePreview = /* @__PURE__ */ new Set();
+		this.#nativeDragging = false;
+		this.#dragOriginKey = void 0;
+		this.#postDragSuppressTimer = 0;
+		this.#activeCaptionPan = null;
+		this.#dragSelect = new ListDragSelectController(this, {
+			getSurface: () => this.#viewportRef.value,
+			isEnabled: () => this.selection.canDragSelect() && this.#source.count > 0 && !this.hasAttribute(`disable-drag-select`),
+			hitTest: (rect) => this.#marqueeHitTest(rect),
+			getBaseSelection: () => this.selection.selected,
+			onPreview: (preview, rect) => {
+				this.#marqueePreview = preview;
+				this.#marqueeRect = rect;
+				this.requestUpdate();
+			},
+			onCommit: (finalSet) => {
+				this.selection.applyDragSelection(finalSet);
+				this.#marqueePreview = /* @__PURE__ */ new Set();
+				this.#marqueeRect = void 0;
+				this.requestUpdate();
+			},
+			autoScroll: (dx, dy) => {
+				const vp = this.#viewportRef.value;
+				if (!vp) return;
+				if (dx !== 0) {
+					vp.scrollLeft += dx;
+					this._scrollLeft = vp.scrollLeft;
+				}
+				if (dy !== 0) {
+					vp.scrollTop += dy;
+					this._scrollTop = vp.scrollTop;
+				}
+			},
+			shouldStart: (event) => {
+				if (!this.itemsDraggable) return true;
+				const cell = event.composedPath()[0]?.closest?.(`.cell`);
+				if (!cell) return true;
+				const key = cell.dataset.key;
+				if (!key) return true;
+				const index = this.#source.indexOfKey(key);
+				if (index < 0) return true;
+				return !this.#source.isSelectable(index);
+			}
 		});
 		this.#selectedSnapshot = /* @__PURE__ */ new Set();
 		this.#onScroll = (e) => {
@@ -380,6 +654,32 @@ let GridListElement = class GridListElement extends LitElement {
 				this.#emitViewportChange();
 			});
 		};
+		this.#onDragStart = (e, key) => {
+			if (!this.itemsDraggable) return;
+			const index = this.#source.indexOfKey(key);
+			if (index < 0 || !this.#source.isSelectable(index)) return;
+			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)) {
+				e.preventDefault();
+				return;
+			}
+			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`);
+		};
+		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`) {
@@ -449,6 +749,7 @@ let GridListElement = class GridListElement extends LitElement {
 					break;
 				}
 				case `Escape`:
+					if (this.#nativeDragging) this.#clearNativeDragState();
 					this.selection.clear();
 					break;
 				default: return;
@@ -550,6 +851,7 @@ let GridListElement = class GridListElement extends LitElement {
         align-items: center;
         justify-content: center;
         overflow: hidden;
+        draggable: false;
       }
       .thumb ::slotted(*:empty)::after {
         content: "Empty";
@@ -599,6 +901,18 @@ let GridListElement = class GridListElement extends LitElement {
       }
       :host([caption-align="left"]) .caption { text-align: left; }
       :host([caption-align="right"]) .caption { text-align: right; }
+      /* Tickled captions swap their plain label for an ixfx-pan-text in loop
+         mode so a truncated label scrolls instead of staying an ellipsis. The
+         pan fills the caption band (flex in 'separate', block otherwise) and
+         inherits its alignment. */
+      .caption ixfx-pan-text {
+        display: block;
+        flex: 1;
+        min-width: 0;
+        max-width: 100%;
+        font: inherit;
+        color: inherit;
+      }
 
       /* ---- Box modes (hidden / under / overlaid): the cell is one box with a
              single selection outline ---- */
@@ -742,6 +1056,26 @@ let GridListElement = class GridListElement extends LitElement {
         :host([reflowing]) .cell { transition: background var(--transition), border-color var(--transition); }
         .cell.entering { animation: none; }
       }
+
+      /* Drag-select (marquee) rectangle + covered-cell preview. The preview
+         reuses the selection wash so covered cells read as "about to be
+         selected". Style hooks: part="marquee", --grid-list-marquee-border,
+         --grid-list-marquee-fill. */
+      .marquee {
+        position: absolute;
+        pointer-events: none;
+        z-index: 5;
+        border: 1px solid var(--grid-list-marquee-border, var(--accent));
+        background: var(--grid-list-marquee-fill, color-mix(in srgb, var(--accent) 15%, transparent));
+      }
+      .cell.marquee .thumb::after {
+        opacity: var(--grid-list-thumb-selection-wash-opacity, 0.18);
+      }
+
+      /* Native item drag origin cell. */
+      .cell.dragging-origin {
+        opacity: 0.6;
+      }
     `
 		];
 	}
@@ -774,6 +1108,62 @@ let GridListElement = class GridListElement extends LitElement {
 	*/
 	#sourceElement;
 	#source;
+	/** Live drag-select preview: covered keys + the surface-relative rect. */
+	#marqueePreview;
+	#marqueeRect;
+	/** Native item drag state: true while a drag is active. */
+	#nativeDragging;
+	/** Key of the cell that originated the native drag. */
+	#dragOriginKey;
+	/** Timer handle for post-drag click suppression. */
+	#postDragSuppressTimer;
+	/**
+	* 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
+	* stopped before the new one starts (see `#activateTickledPan`).
+	*/
+	#activeCaptionPan;
+	#dragSelect;
+	/**
+	* Map a surface-relative (viewport-visible) rect to covered item keys using
+	* the same `computeGridWindow` geometry the renderer uses — pure arithmetic,
+	* so virtualized off-screen items are covered without DOM measurement.
+	*/
+	#marqueeHitTest(rect) {
+		const count = this.#source.count;
+		if (count === 0) return [];
+		const horizontal = this.orientation === `row`;
+		const win = computeGridWindow(count, this.itemSize, this.#rowHeight(), this.gap, Math.max(1, this._viewportWidth), Math.max(1, this._viewportHeight), horizontal ? this._scrollLeft : this._scrollTop, this.orientation, 0);
+		const out = [];
+		if (horizontal) {
+			const x0 = rect.x + this._scrollLeft;
+			const x1 = x0 + rect.width;
+			const lo = Math.max(0, Math.floor(x0 / win.colStride));
+			const hi = Math.min(count - 1, Math.floor(x1 / win.colStride));
+			for (let i = lo; i <= hi; i++) out.push(i);
+		} else {
+			const x0 = rect.x + this._scrollLeft;
+			const x1 = x0 + rect.width;
+			const y0 = rect.y + this._scrollTop;
+			const y1 = y0 + rect.height;
+			const colLo = Math.max(0, Math.floor(x0 / win.colStride));
+			const colHi = Math.min(win.cols - 1, Math.floor(x1 / win.colStride));
+			const rowLo = Math.max(0, Math.floor(y0 / win.rowStride));
+			const rowHi = Math.floor(y1 / win.rowStride);
+			for (let row = rowLo; row <= rowHi; row++) for (let col = colLo; col <= colHi; col++) {
+				const index = row * win.cols + col;
+				if (index >= 0 && index < count) out.push(index);
+			}
+		}
+		const keys = [];
+		for (const index of out) {
+			const key = this.#source.keyAt(index);
+			if (!key || isSyntheticKey(key)) continue;
+			if (!this.#source.isSelectable(index)) continue;
+			keys.push(key);
+		}
+		return keys;
+	}
 	#searchMode;
 	#searchFilterKeys;
 	/** (Re)build {@link search} for the current mode; a no-op if it already matches. */
@@ -846,6 +1236,7 @@ let GridListElement = class GridListElement extends LitElement {
 	}
 	disconnectedCallback() {
 		super.disconnectedCallback();
+		this.#stopActiveCaptionPan();
 		this.removeEventListener(`keydown`, this._onKeyDown);
 		this.#resizeObserver?.disconnect();
 		this.#resizeObserver = void 0;
@@ -858,6 +1249,7 @@ let GridListElement = class GridListElement extends LitElement {
 			clearTimeout(this.#reflowTimer);
 			this.#reflowTimer = 0;
 		}
+		if (this.#nativeDragging) this.#clearNativeDragState();
 	}
 	#onChildrenChanged(records) {
 		const previousLength = this.#items.length;
@@ -1045,6 +1437,7 @@ let GridListElement = class GridListElement extends LitElement {
 			if (Math.abs(vp.scrollLeft - this._scrollLeft) > .5) vp.scrollLeft = this._scrollLeft;
 		}
 		this.#applyZoomAnchor();
+		this.#activateTickledPan();
 	}
 	/** Re-anchor the scroll so the item captured in `willUpdate` stays centred. */
 	#applyZoomAnchor() {
@@ -1375,15 +1768,19 @@ let GridListElement = class GridListElement extends LitElement {
 			element
 		});
 	}
-	_dispatch(name, detail) {
-		this.dispatchEvent(new CustomEvent(name, {
+	_dispatch(name, detail, cancelable = false) {
+		return this.dispatchEvent(new CustomEvent(name, {
 			detail,
 			bubbles: true,
-			composed: true
+			composed: true,
+			cancelable
 		}));
 	}
 	/** Selected keys, snapshotted once per render so the cell renderers don't each rebuild the set. */
 	#selectedSnapshot;
+	#marqueeStyle(rect) {
+		return `left:${rect.x}px;top:${rect.y}px;width:${Math.max(0, rect.width)}px;height:${Math.max(0, rect.height)}px`;
+	}
 	render() {
 		const win = this.#currentWindow();
 		this.#selectedSnapshot = this.selection.selectedKeys;
@@ -1400,6 +1797,7 @@ let GridListElement = class GridListElement extends LitElement {
         <div class="spacer" style=${spacerStyle}>
           ${this.#source instanceof DataGridListSource ? this.#renderDataCells(win) : this.#renderElementCells(win)}
         </div>
+        ${this.#marqueeRect ? html`<div class="marquee" part="marquee" style=${this.#marqueeStyle(this.#marqueeRect)}></div>` : ``}
       </div>
       ${this.search?.renderField()}
     `;
@@ -1411,7 +1809,10 @@ let GridListElement = class GridListElement extends LitElement {
 	#renderDataCell(index, win) {
 		const key = this.#source.keyAt(index);
 		const selected = this.#selectedSnapshot.has(key);
+		const marquee = this.#marqueePreview.has(key);
 		const tickled = this.tickled.isTickled(key);
+		const selectable = this.#source.isSelectable(index);
+		const draggable = this.itemsDraggable && selectable;
 		const style = this.captionStyle;
 		const separate = style === `separate`;
 		const caption = style === `hidden` ? `` : this.#source.labelAt(index);
@@ -1422,24 +1823,69 @@ let GridListElement = class GridListElement extends LitElement {
 		const captionCss = separate ? `height:${Math.max(0, this.captionHeight - 4)}px` : style === `under` ? `height:${this.captionHeight}px` : ``;
 		return html`
       <div
-        class="cell${selected ? ` selected` : ``}${tickled ? ` tickled` : ``}"
+        class="cell${selected ? ` selected` : ``}${tickled ? ` tickled` : ``}${marquee ? ` marquee` : ``}${this.#nativeDragging && key === this.#dragOriginKey ? ` dragging-origin` : ``}"
         part="item${selected ? ` selected` : ``}${tickled ? ` tickled` : ``}"
         role="option"
         aria-selected=${selected ? `true` : `false`}
         style="width:${this.itemSize}px;height:${cellHeight}px;transform:translate(${x}px,${y}px)"
         data-index=${index}
         data-key=${key}
+        draggable=${draggable ? `true` : `false`}
         ?data-selected=${selected}
         ?data-tickled=${tickled}
+        ?data-marquee=${marquee}
         @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 ? html`<div class="caption" part="caption" style=${captionCss} title=${caption}>${caption}</div>` : ``}
+        ${showCaption ? this.#renderCaption(caption, captionCss, tickled) : ``}
       </div>
     `;
 	}
+	/**
+	* A tickled cell swaps its plain label for an `ixfx-pan-text` in loop mode
+	* so a truncated label scrolls instead of staying an ellipsis. Unticked
+	* cells keep the cheap plain-text caption.
+	*/
+	#renderCaption(caption, captionCss, tickled) {
+		if (tickled) return html`<div class="caption" part="caption" style=${captionCss} title=${caption}><ixfx-pan-text mode="loop">${caption}</ixfx-pan-text></div>`;
+		return html`<div class="caption" part="caption" style=${captionCss} title=${caption}>${caption}</div>`;
+	}
+	/** Stop the active caption pan, if any, and forget it. */
+	#stopActiveCaptionPan() {
+		const active = this.#activeCaptionPan;
+		this.#activeCaptionPan = null;
+		try {
+			active?.stopLoop?.();
+		} catch {}
+	}
+	/**
+	* Enforce a single scrolling caption: the tickled cell's pan-text loops,
+	* every other pan-text is stopped. The pan-text also auto-starts when
+	* `mode="loop"` is set; this covers the case where the element was already
+	* connected before overflow was measured.
+	*/
+	#activateTickledPan() {
+		const tickledCell = this.renderRoot.querySelector(`.cell[data-tickled]`);
+		const pans = [...this.renderRoot.querySelectorAll(`ixfx-pan-text[mode="loop"]`)];
+		const current = tickledCell?.querySelector(`ixfx-pan-text[mode="loop"]`) ?? null;
+		for (const pan of pans) if (pan !== current) try {
+			pan.stopLoop?.();
+		} catch {}
+		const active = this.#activeCaptionPan;
+		if (active && active !== current) try {
+			active.stopLoop?.();
+		} catch {}
+		if (!current) {
+			this.#activeCaptionPan = null;
+			return;
+		}
+		this.#activeCaptionPan = current;
+		current.startLoop?.();
+	}
 	#renderElementCells(win) {
 		const slice = this.#items.slice(win.startIndex, win.endIndex);
 		return repeat(slice, (_el, i) => this.#source.keyAt(win.startIndex + i), (el, i) => this.#renderCell(el, win.startIndex + i, win));
@@ -1447,8 +1893,11 @@ let GridListElement = class GridListElement extends LitElement {
 	#renderCell(el, index, win) {
 		const key = this.#source.keyAt(index);
 		const selected = this.#selectedSnapshot.has(key);
+		const marquee = this.#marqueePreview.has(key);
 		const tickled = this.tickled.isTickled(key);
 		const entering = this.#entering.has(el);
+		const selectable = this.#source.isSelectable(index);
+		const draggable = this.itemsDraggable && selectable;
 		const style = this.captionStyle;
 		const separate = style === `separate`;
 		const caption = style === `hidden` ? `` : this.#captionFor(el);
@@ -1460,23 +1909,27 @@ let GridListElement = class GridListElement extends LitElement {
 		const captionCss = separate ? `height:${Math.max(0, this.captionHeight - 4)}px` : style === `under` ? `height:${this.captionHeight}px` : ``;
 		return html`
       <div
-        class="cell${selected ? ` selected` : ``}${tickled ? ` tickled` : ``}${entering ? ` entering` : ``}"
+        class="cell${selected ? ` selected` : ``}${tickled ? ` tickled` : ``}${entering ? ` entering` : ``}${marquee ? ` marquee` : ``}${this.#nativeDragging && key === this.#dragOriginKey ? ` dragging-origin` : ``}"
         part="item${selected ? ` selected` : ``}${tickled ? ` tickled` : ``}"
         role="option"
         aria-selected=${selected ? `true` : `false`}
         style="width:${this.itemSize}px;height:${cellHeight}px;transform:translate(${x}px,${y}px)"
         data-index=${index}
         data-key=${key}
+        draggable=${draggable ? `true` : `false`}
         ?data-selected=${selected}
         ?data-tickled=${tickled}
+        ?data-marquee=${marquee}
         @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)}
         </div>
-        ${showCaption ? html`<div class="caption" part="caption" style=${captionCss} title=${caption}>${caption}</div>` : ``}
+        ${showCaption ? this.#renderCaption(caption, captionCss, tickled) : ``}
       </div>
     `;
 	}
@@ -1488,9 +1941,24 @@ let GridListElement = class GridListElement extends LitElement {
 		}
 	}
 	#onCellClick(e, key) {
+		if (this.#dragSelect.isDragging || this.#nativeDragging || this.#postDragSuppressTimer !== 0) return;
 		this.selection.handleClick(key, e);
 		this.#emitItemEvent(`list-item-click`, key);
 	}
+	#onDragStart;
+	#onDragEnd;
+	#startPostDragSuppressTimer() {
+		if (this.#postDragSuppressTimer) clearTimeout(this.#postDragSuppressTimer);
+		this.#postDragSuppressTimer = window.setTimeout(() => {
+			this.#postDragSuppressTimer = 0;
+		}, 0);
+	}
+	#clearNativeDragState() {
+		this.#nativeDragging = false;
+		this.#dragOriginKey = void 0;
+		this.toggleAttribute(`data-native-dragging`, false);
+		this.removeAttribute(`aria-label`);
+	}
 	#onCellActivate(key) {
 		if (this.interactionMode !== `manual`) this.selection.replace(key);
 		this.#emitItemEvent(`list-activate`, key);
@@ -1548,6 +2016,11 @@ __decorate([property({
 })], GridListElement.prototype, "itemWrap", void 0);
 __decorate([property({ attribute: false })], GridListElement.prototype, "filterPredicate", void 0);
 __decorate([property({ attribute: false })], GridListElement.prototype, "itemFilterPredicate", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: `items-draggable`,
+	reflect: true
+})], GridListElement.prototype, "itemsDraggable", void 0);
 __decorate([property({
 	type: String,
 	attribute: `search-modes`,
@@ -1561,6 +2034,6 @@ __decorate([state()], GridListElement.prototype, "_viewportHeight", void 0);
 __decorate([state()], GridListElement.prototype, "_viewportWidth", void 0);
 GridListElement = __decorate([safeCustomElement(`ixfx-grid-list`)], GridListElement);
 //#endregion
-export { GridListElement as t };
+export { PanTextElement as n, GridListElement as t };
 
-//# sourceMappingURL=grid-list-bmBWq6P-.js.map
+//# sourceMappingURL=grid-list-BXfY3XXX.js.map