@ixfx/components 0.9.6 → 0.9.8

package/bundle/index.js

@@ -8,8 +8,8 @@ import { Colour } from "@ixfx/visual";
 import { Trees } from "@ixfx/collections";
 import { clamp, clamper, rangeStream, round, scaler } from "@ixfx/numbers";
 import { repeat } from "lit/directives/repeat.js";
-import { createRef, ref } from "lit/directives/ref.js";
 import { classMap } from "lit/directives/class-map.js";
+import { createRef, ref } from "lit/directives/ref.js";
 import { Easings } from "@ixfx/modulation";
 import "@clinth/vcanvas";
 import { keyed } from "lit/directives/keyed.js";
@@ -1344,7 +1344,7 @@ const _themeFallbacksCss = i$3`
   @property --item-border-tickled {
     syntax: '*';
     inherits: true;
-    initial-value: 1px solid color-mix(in oklch, oklch(60% 0.15 140) 40%, transparent);
+    initial-value: 1px solid oklch(19% 0.02 240);
   }
   @property --item-border-selected {
     syntax: '*';
@@ -13900,6 +13900,233 @@ var menu_exports = /* @__PURE__ */ __exportAll({
 	menuFromTreeToElements: () => menuFromTreeToElements
 });
 //#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 i {
+	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 b`
+      <span class="text ${classMap(textClasses)}" part="text" style=${this._textStyle()}>
+        <slot @slotchange=${this._measure}></slot>
+      </span>
+    `;
+	}
+	static {
+		this.styles = [themeFallbacks, i$3`
+    /* 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/data-grid/data-grid.ts
 let DataGridElement = class DataGridElement extends i {
 	constructor(..._args) {
@@ -13913,12 +14140,16 @@ let DataGridElement = class DataGridElement extends i {
 		this.getRowKey = (r, i) => r.key ?? r.id ?? String(i);
 		this.editable = false;
 		this.editability = `user`;
+		this.cellOverflow = `ellipsis`;
+		this.zebraStripes = false;
 		this.groupBy = null;
 		this.allowGrouping = false;
 		this.crossGroupSelection = false;
 		this.columnMenu = `auto`;
 		this.itemsDraggable = false;
 		this._columnFormatters = /* @__PURE__ */ new Map();
+		this._resizingColKey = void 0;
+		this._animatingColKeys = /* @__PURE__ */ new Set();
 		this._selectedKeys = /* @__PURE__ */ new Set();
 		this._scrollTop = 0;
 		this._scrollLeft = 0;
@@ -14199,6 +14430,14 @@ let DataGridElement = class DataGridElement extends i {
       --data-grid-header-bg: var(--surface-2);
       --data-grid-border: var(--border);
       --data-grid-header-text: var(--surface-3-text);
+      --data-grid-reorder-handle-width: 10px;
+      /* How strongly the alternate ("zebra") row stands out from the base row
+         background when [zebra-stripes] is set - a color-mix() percentage. */
+      --data-grid-zebra-intensity: 6%;
+      /* Duration of the width transition when a column is auto-sized via
+         autoSizeColumn(). Read back in JS (_columnResizeAnimationMs) to know
+         when the animation has finished, so keep it a plain time value. */
+      --data-grid-column-resize-duration: 180ms;
       position: relative;
       display: block;
       overflow: hidden;
@@ -14227,11 +14466,28 @@ let DataGridElement = class DataGridElement extends i {
       box-sizing: border-box;
     }
     .header-cell[data-tickled] { background: var(--surface-5); }
+    /* Applied to a header-cell / cell while its column is animating towards
+       an autoSizeColumn() target width. */
+    .header-cell.width-animating, .cell.width-animating {
+      transition: width var(--data-grid-column-resize-duration, 180ms) ease-out;
+    }
+    @media (prefers-reduced-motion: reduce) {
+      .header-cell.width-animating, .cell.width-animating { transition: none; }
+    }
     .header-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
     .sort-icon { font-size: 10px; opacity: 0.7; }
-    .resize-handle { position: absolute; right: 0; top: 0; bottom: 0; width: 8px; cursor: col-resize; z-index: 1; }
-    .reorder-handle { cursor: grab; opacity: 0.5; padding: 0 2px; display: inline-flex; align-items: center; }
-    .reorder-handle .ixfx-handle { --ixfx-handle-spot-size: 14px; --ixfx-handle-dot-size: 3px; }
+    .resize-handle {
+      position: absolute; right: -4px; top: 0; bottom: 0; width: 8px; cursor: col-resize; z-index: 1;
+      display: flex; align-items: stretch; justify-content: center;
+    }
+    .resize-handle::before {
+      content: ''; width: 2px; margin: 2px 0; border-radius: 1px; background: var(--split-gutter-color, transparent);
+      transition: background-color var(--transition, 0.15s ease-out);
+    }
+    .resize-handle:hover::before { background: var(--split-gutter-hover-color, var(--surface-6)); }
+    .resize-handle[data-active]::before { background: var(--split-gutter-active-color, var(--accent)); }
+    .reorder-handle { cursor: grab; opacity: 0.5; display: inline-flex; align-items: center; }
+    .reorder-handle .ixfx-handle { --ixfx-handle-length: 14px; --ixfx-handle-thickness: var(--data-grid-reorder-handle-width, 10px); --ixfx-handle-dot-size: 3px; }
     .flyout-trigger { flex-shrink: 0; width: 36px; display: flex; align-items: center; justify-content: center; cursor: pointer; border-left: var(--border-subtle); background: var(--data-grid-header-bg); }
     .viewport { flex: 1; overflow: auto; position: relative; }
     .spacer { position: relative; }
@@ -14239,14 +14495,28 @@ let DataGridElement = class DataGridElement extends i {
       position: absolute; left: 0; right: 0; display: flex; align-items: stretch;
       gap: 0;
       height: var(--data-grid-row-height);
-      border: none;
-      box-shadow: inset 0 0 0 1px var(--item-border-color, transparent);
+      /* Border width is always 1px, even when not visually shown (transparent),
+         so hover/selection never changes the box size and shifts content. */
+      border: 1px solid transparent;
       background: var(--item-bg);
       border-radius: var(--item-border-radius);
       padding: 0;
       box-sizing: border-box;
+      /* Only background transitions - hover ("tickled") no longer changes
+         border, so there is nothing else to animate. */
+      transition: background var(--transition, 0.1s ease-out);
     }
-    .row.item.tickled { background: var(--item-bg-tickled); border: var(--item-border-tickled); color: var(--item-text-tickled); }
+    /* Zebra striping: alternate rows tint towards the text colour, which
+       lightens in dark themes and darkens in light themes - so it reads as
+       "more contrast" either way. The zebra-odd class is only applied when
+       zebraStripes is set (see render()). Declared before .tickled /
+       .selected so those states (same specificity) still win when a striped
+       row is also hovered or selected. */
+    .row.item.zebra-odd {
+      background: color-mix(in oklch, transparent calc(100% - var(--data-grid-zebra-intensity, 6%)), var(--surface-3-text) var(--data-grid-zebra-intensity, 6%));
+    }
+    /* Hover: background only, no border change (avoids layout shift + colour flash). */
+    .row.item.tickled { background: var(--item-bg-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; }
@@ -14295,6 +14565,7 @@ let DataGridElement = class DataGridElement extends i {
   `
 		];
 	}
+	#viewportResizeObserver;
 	#nativeDragging;
 	#dragOriginKey;
 	#postDragSuppressTimer;
@@ -14412,6 +14683,8 @@ let DataGridElement = class DataGridElement extends i {
 			clearTimeout(this.#postDragSuppressTimer);
 			this.#postDragSuppressTimer = 0;
 		}
+		this.#viewportResizeObserver?.disconnect();
+		this.#viewportResizeObserver = void 0;
 	}
 	/**
 	* Dispatch a command to this grid — routes through the command registry so
@@ -14421,14 +14694,35 @@ let DataGridElement = class DataGridElement extends i {
 		this.#searchRegistry?.invoke(commandId, args);
 	}
 	firstUpdated() {
-		new ResizeObserver(() => {
-			if (!this._viewportEl) return;
-			this._viewportH = this._viewportEl.clientHeight;
-			this._viewportW = this._viewportEl.clientWidth;
-			this.requestUpdate();
-		}).observe(this._viewportEl);
-		this._viewportH = this._viewportEl.clientHeight;
-		this._viewportW = this._viewportEl.clientWidth;
+		this.#viewportResizeObserver = new ResizeObserver(() => this.#measureViewport());
+		this.#viewportResizeObserver.observe(this._viewportEl);
+		this.#measureViewport();
+	}
+	/**
+	* Re-read the viewport's size and update `_viewportH`/`_viewportW` if it
+	* changed. A zero-sized read (e.g. while hosted in a hidden/inactive dock
+	* tab) is ignored so it never clobbers the last known-good geometry — the
+	* observer fires again with the real size once the host becomes visible.
+	*/
+	#measureViewport() {
+		if (!this._viewportEl) return;
+		const w = this._viewportEl.clientWidth;
+		const h = this._viewportEl.clientHeight;
+		if (w <= 0 || h <= 0) return;
+		if (w === this._viewportW && h === this._viewportH) return;
+		this._viewportW = w;
+		this._viewportH = h;
+	}
+	/**
+	* Force a fresh re-measure of the viewport and re-render. Normally
+	* unnecessary — a `ResizeObserver` tracks the viewport automatically — but
+	* gives a consumer an escape hatch to recover if an ancestor's
+	* layout/visibility changes without the observer noticing (matches
+	* `ixfx-grid-list`'s `refreshLayout()`).
+	*/
+	refreshLayout() {
+		this.#measureViewport();
+		this.requestUpdate();
 	}
 	updated(changed) {
 		super.updated(changed);
@@ -15091,7 +15385,13 @@ let DataGridElement = class DataGridElement extends i {
 			composed: true
 		}));
 	}
-	_autoSizeColumn(col) {
+	/**
+	* Measure the width a column would need to show its header label and every
+	* row's (formatted) value without truncation, clamped to `minWidth`/`maxWidth`.
+	* Values are measured from their formatted string via canvas `measureText` -
+	* accurate for plain text, an estimate for anything else.
+	*/
+	_measureAutoWidth(col) {
 		const cs = getComputedStyle(this);
 		const font = `${cs.fontSize} ${cs.fontFamily}`;
 		const ctx = document.createElement(`canvas`).getContext(`2d`);
@@ -15106,12 +15406,15 @@ let DataGridElement = class DataGridElement extends i {
 		for (const r of this.rows) {
 			const v = r[col.key];
 			if (v === null || v === void 0 || v === ``) continue;
-			const w = measure(String(v)) + cellPad;
+			const w = measure(String(this._formatValue(v, col, r))) + cellPad;
 			if (w > maxW) maxW = w;
 		}
 		const min = col.minWidth ?? 40;
 		const max = col.maxWidth ?? 600;
-		const w = Math.max(min, Math.min(max, maxW));
+		return Math.max(min, Math.min(max, maxW));
+	}
+	_autoSizeColumn(col) {
+		const w = this._measureAutoWidth(col);
 		col.width = w;
 		this.requestUpdate();
 		this.dispatchEvent(new CustomEvent(`datagrid-column-resize`, {
@@ -15123,11 +15426,50 @@ let DataGridElement = class DataGridElement extends i {
 			composed: true
 		}));
 	}
+	/**
+	* Resize a single column, by key, to fit its contents (header label + every
+	* row's formatted value), animating the width change smoothly. Only works
+	* for plain columns - one with a custom `renderer` can't be measured
+	* reliably from its raw value, so it's left untouched. Returns `false` (and
+	* does nothing) if the column doesn't exist, isn't resizable, or has a
+	* `renderer`.
+	*/
+	autoSizeColumn(key) {
+		const col = this.columns.find((c) => c.key === key);
+		if (!col || col.resizable === false || col.renderer) return false;
+		const target = this._measureAutoWidth(col);
+		if ((col.width ?? 150) === target) return true;
+		this._animatingColKeys = new Set(this._animatingColKeys).add(key);
+		requestAnimationFrame(() => {
+			col.width = target;
+			this.requestUpdate();
+			this.dispatchEvent(new CustomEvent(`datagrid-column-resize`, {
+				detail: {
+					key,
+					width: target
+				},
+				bubbles: true,
+				composed: true
+			}));
+			window.setTimeout(() => {
+				const next = new Set(this._animatingColKeys);
+				next.delete(key);
+				this._animatingColKeys = next;
+			}, this._columnResizeAnimationMs());
+		});
+		return true;
+	}
+	_columnResizeAnimationMs() {
+		const raw = getComputedStyle(this).getPropertyValue(`--data-grid-column-resize-duration`).trim();
+		const ms = raw.endsWith(`ms`) ? Number.parseFloat(raw) : raw.endsWith(`s`) ? Number.parseFloat(raw) * 1e3 : Number.parseFloat(raw);
+		return (Number.isFinite(ms) && ms > 0 ? ms : 180) + 30;
+	}
 	_onResizePointerDown(e, col) {
 		e.preventDefault();
 		e.stopPropagation();
 		const startX = e.clientX;
 		const startW = col.width ?? 150;
+		this._resizingColKey = col.key;
 		const onMove = (ev) => {
 			col.width = Math.max(col.minWidth ?? 40, Math.min(col.maxWidth ?? 600, startW + ev.clientX - startX));
 			this.requestUpdate();
@@ -15135,6 +15477,7 @@ let DataGridElement = class DataGridElement extends i {
 		const onUp = (ev) => {
 			window.removeEventListener(`pointermove`, onMove);
 			window.removeEventListener(`pointerup`, onUp);
+			this._resizingColKey = void 0;
 			const w = Math.max(col.minWidth ?? 40, Math.min(col.maxWidth ?? 600, startW + ev.clientX - startX));
 			this.dispatchEvent(new CustomEvent(`datagrid-column-resize`, {
 				detail: {
@@ -15186,20 +15529,20 @@ let DataGridElement = class DataGridElement extends i {
 		const visibleFlat = this._flat.slice(startRow, endRow);
 		const showCheckbox = this.interactionMode === `checked`;
 		return b`
-      <div class="grid" style="height:400px">
+      <div class="grid">
         <div class="header-bar">
           <div class="header-scroll">
             ${showCheckbox ? b`<div class="header-cell checkbox-col"></div>` : A}
             ${repeat(this._visibleColumns, (c) => c.key, (col, idx) => b`
-              <div class="header-cell" style="width:${col.width ?? 150}px" ?drag-source=${this._drag?.active && this._drag.sourceCol.key === col.key}
+              <div class="header-cell ${this._animatingColKeys.has(col.key) ? `width-animating` : ``}" style="width:${col.width ?? 150}px" ?drag-source=${this._drag?.active && this._drag.sourceCol.key === col.key}
                 @click=${() => this._onHeaderClick(col)}
                 @pointerenter=${() => this._tickled.handlePointerEnter(col.key)}>
                 ${col.reorderable !== false ? b`<span class="reorder-handle" draggable="false"
                   @pointerdown=${(e) => this._beginHeaderDrag(e, col, idx)}
-                ><span class="ixfx-handle" data-handle="dotted" data-shape="spot" part="reorder-handle"></span></span>` : A}
+                ><span class="ixfx-handle" data-handle="dotted" data-shape="vertical" part="reorder-handle"></span></span>` : A}
                 <span class="header-label">${col.label}</span>
                 ${this.sortState?.key === col.key ? b`<span class="sort-icon">${this.sortState.direction === `asc` ? `▲` : `▼`}</span>` : A}
-                ${col.resizable !== false ? b`<span class="resize-handle" @pointerdown=${(e) => this._onResizePointerDown(e, col)} @click=${(e) => e.stopPropagation()} @dblclick=${(e) => {
+                ${col.resizable !== false ? b`<span class="resize-handle" ?data-active=${this._resizingColKey === col.key} @pointerdown=${(e) => this._onResizePointerDown(e, col)} @click=${(e) => e.stopPropagation()} @dblclick=${(e) => {
 			e.preventDefault();
 			e.stopPropagation();
 			this._autoSizeColumn(col);
@@ -15270,7 +15613,7 @@ 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` : ``} ${this.#nativeDragging && rowKey === this.#dragOriginKey ? `dragging-origin` : ``}" style="top:${absIdx * rh}px; height:${rh}px"
+                <div class="row item ${selected ? `selected` : ``} ${tickled ? `tickled` : ``} ${this.zebraStripes && absIdx2 % 2 === 1 ? `zebra-odd` : ``} ${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) => {
@@ -15376,7 +15719,9 @@ let DataGridElement = class DataGridElement extends i {
 				const rendered = col.renderer ? col.renderer(row, col, absIdx2) : displayVal;
 				const cellContent = col.renderer ? rendered : displayVal;
 				const textEditable = this._isEditable(row, col) && this._isTextEditor(col);
-				return b`<div class="cell ${textEditable ? `editable-text` : ``}" data-col=${col.key} style="width:${col.width ?? 150}px; justify-content:${col.align === `right` ? `flex-end` : col.align === `center` ? `center` : `flex-start`}"
+				const indent = col.align !== `right` && col.align !== `center` && col.reorderable !== false ? `padding-left:calc(var(--space-s) + var(--data-grid-reorder-handle-width, 10px) + var(--space-xs));` : ``;
+				const canPan = this.cellOverflow === `pan-text` && !col.renderer && (selected || tickled);
+				return b`<div class="cell ${textEditable ? `editable-text` : ``} ${this._animatingColKeys.has(col.key) ? `width-animating` : ``}" data-col=${col.key} style="width:${col.width ?? 150}px; justify-content:${col.align === `right` ? `flex-end` : col.align === `center` ? `center` : `flex-start`}; ${indent}"
                       @click=${(e) => {
 					this._lastClickedCell = {
 						rowKey,
@@ -15398,7 +15743,7 @@ let DataGridElement = class DataGridElement extends i {
 						composed: true
 					}));
 				}}
-                    >${cellContent}</div>`;
+                    >${canPan ? b`<ixfx-pan-text mode="loop">${cellContent}</ixfx-pan-text>` : cellContent}</div>`;
 			})}
                 </div>
               `;
@@ -15432,6 +15777,15 @@ __decorate([property({
 	type: String,
 	reflect: true
 })], DataGridElement.prototype, "editability", void 0);
+__decorate([property({
+	type: String,
+	attribute: `cell-overflow`
+})], DataGridElement.prototype, "cellOverflow", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: `zebra-stripes`,
+	reflect: true
+})], DataGridElement.prototype, "zebraStripes", void 0);
 __decorate([property({ attribute: false })], DataGridElement.prototype, "groupBy", void 0);
 __decorate([property({
 	type: Boolean,
@@ -15462,6 +15816,8 @@ __decorate([property({
 	reflect: true
 })], DataGridElement.prototype, "itemsDraggable", void 0);
 __decorate([property({ attribute: false })], DataGridElement.prototype, "dragPreviewRenderer", void 0);
+__decorate([state()], DataGridElement.prototype, "_resizingColKey", void 0);
+__decorate([state()], DataGridElement.prototype, "_animatingColKeys", void 0);
 __decorate([state()], DataGridElement.prototype, "_selectedKeys", void 0);
 __decorate([state()], DataGridElement.prototype, "_scrollTop", void 0);
 __decorate([state()], DataGridElement.prototype, "_scrollLeft", void 0);
@@ -22672,233 +23028,6 @@ 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 i {
-	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 b`
-      <span class="text ${classMap(textClasses)}" part="text" style=${this._textStyle()}>
-        <slot @slotchange=${this._measure}></slot>
-      </span>
-    `;
-	}
-	static {
-		this.styles = [themeFallbacks, i$3`
-    /* 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$1 = `:scope > *`;
 const MIN_ITEM_SIZE = 16;