@ixfx/components 0.10.2 → 0.10.4

package/bundle/index.js

@@ -5715,6 +5715,20 @@ const buttonStyles = i$3`
   :host([subtle]) button:focus-visible:not(:disabled) {
     background: color-mix(in oklch, var(--surface-4, #ccc) 70%, transparent);
   }
+
+  :host([toggleable]) button:not(:disabled) {
+    opacity: 0.7;
+  }
+
+  :host([toggleable]) button:hover:not(:disabled) {
+    opacity: 0.85;
+  }
+
+  :host([toggleable][value]) button:not(:disabled) {
+    opacity: 1;
+    outline: var(--ixfx-button-toggle-outline-width, 2px) solid var(--ixfx-button-toggle-outline-color, oklch(from var(--accent, #666) l c calc(h + 130)));
+    outline-offset: var(--ixfx-button-toggle-outline-offset, 2px);
+  }
 `;
 //#endregion
 //#region src/button/button.ts
@@ -5726,7 +5740,19 @@ let ButtonElement = class ButtonElement extends i {
 		this.hideLabel = false;
 		this.hasIcon = false;
 		this.subtle = false;
+		this.toggleable = false;
+		this.value = false;
+		this.#handleClick = () => {
+			if (!this.toggleable || this.disabled) return;
+			this.value = !this.value;
+			this.dispatchEvent(new CustomEvent(`toggle`, {
+				detail: { value: this.value },
+				bubbles: true,
+				composed: true
+			}));
+		};
 	}
+	#handleClick;
 	_renderIcon() {
 		if (this.hideIcon || !this.icon) return A;
 		if (this.icon.startsWith(`<svg`)) return b`<span class="button-icon">${unsafeHTML(this.icon)}</span>`;
@@ -5736,7 +5762,7 @@ let ButtonElement = class ButtonElement extends i {
 	render() {
 		this.hasIcon = !this.hideIcon && !!this.icon;
 		const label = this.hideLabel ? A : b`<span class="button-label"><slot></slot></span>`;
-		return b`<button ?disabled=${this.disabled}>${this._renderIcon()}${label}</button>`;
+		return b`<button ?disabled=${this.disabled} @click=${this.#handleClick}>${this._renderIcon()}${label}</button>`;
 	}
 	static {
 		this.styles = [prominenceStyles, buttonStyles];
@@ -5763,6 +5789,14 @@ __decorate([property({
 	type: Boolean,
 	reflect: true
 })], ButtonElement.prototype, "subtle", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], ButtonElement.prototype, "toggleable", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], ButtonElement.prototype, "value", void 0);
 ButtonElement = __decorate([safeCustomElement(`ixfx-button`)], ButtonElement);
 //#endregion
 //#region src/button/radio-group.ts
@@ -14627,6 +14661,12 @@ __decorate([query(`.text`)], PanTextElement.prototype, "_textEl", void 0);
 PanTextElement = __decorate([safeCustomElement(`ixfx-pan-text`)], PanTextElement);
 //#endregion
 //#region src/data-grid/data-grid.ts
+/** Shallow key-array equality, treating `undefined` (never dispatched) as different. */
+function sameKeys$3(a, b) {
+	if (a === void 0 || a.length !== b.length) return false;
+	for (let i = 0; i < a.length; i++) if (a[i] !== b[i]) return false;
+	return true;
+}
 let DataGridElement = class DataGridElement extends i {
 	constructor(..._args) {
 		super(..._args);
@@ -14719,6 +14759,7 @@ let DataGridElement = class DataGridElement extends i {
 		this._colOffsets = [];
 		this._colWidthSum = 0;
 		this._raf = 0;
+		this.#viewportChangeRaf = 0;
 		this.#appendInProgress = false;
 		this.#resortRaf = 0;
 		this._drag = null;
@@ -14740,6 +14781,9 @@ let DataGridElement = class DataGridElement extends i {
 				this._scrollLeft = el.scrollLeft;
 				if (this._headerScrollEl) this._headerScrollEl.scrollLeft = el.scrollLeft;
 				this.requestUpdate();
+				cancelAnimationFrame(this.#viewportChangeRaf);
+				this.#viewportChangeRaf = 0;
+				this.#emitViewportChangeIfChanged();
 			});
 		};
 		this._onKeyDown = (e) => {
@@ -15173,6 +15217,10 @@ let DataGridElement = class DataGridElement extends i {
 	#enteringRowKeys;
 	#rowReflowTimer;
 	#dataGridRenderedOnce;
+	#viewportChangeRaf;
+	/** Key sets as of the last `datagrid-viewport-change` dispatch, for dedupe. */
+	#lastViewportRenderedKeys;
+	#lastViewportVisibleKeys;
 	#appendInProgress;
 	#resortRaf;
 	connectedCallback() {
@@ -15188,6 +15236,8 @@ let DataGridElement = class DataGridElement extends i {
 		this.removeEventListener(`keydown`, this._onKeyDown);
 		this.removeEventListener(`focusout`, this._onFocusOut);
 		cancelAnimationFrame(this._raf);
+		cancelAnimationFrame(this.#viewportChangeRaf);
+		this.#viewportChangeRaf = 0;
 		this.#unregisterSearchCommands?.();
 		this.#unregisterSearchCommands = void 0;
 		this.#searchRegistry = void 0;
@@ -15228,6 +15278,7 @@ let DataGridElement = class DataGridElement extends i {
 		if (w === this._viewportW && h === this._viewportH) return;
 		this._viewportW = w;
 		this._viewportH = h;
+		this.#scheduleViewportChangeEmit();
 	}
 	/**
 	* Force a fresh re-measure of the viewport and re-render. Normally
@@ -15242,6 +15293,7 @@ let DataGridElement = class DataGridElement extends i {
 	}
 	updated(changed) {
 		super.updated(changed);
+		if (changed.has(`rows`) || changed.has(`sortState`) || changed.has(`columns`) || changed.has(`groupBy`) || changed.has(`groupLabel`) || changed.has(`filterPredicate`) || changed.has(`rowHeight`)) this.#scheduleViewportChangeEmit();
 		if (changed.has(`_editing`) || changed.has(`_editingRow`)) requestAnimationFrame(() => {
 			let sel = null;
 			if (this._editing) sel = `.row[data-key="${this._editing.rowKey}"] .cell[data-col="${this._editing.colKey}"] input, .row[data-key="${this._editing.rowKey}"] .cell[data-col="${this._editing.colKey}"] select`;
@@ -16021,6 +16073,44 @@ let DataGridElement = class DataGridElement extends i {
 		const { startRow, endRow } = this.getVisibleRange();
 		return this._flat.slice(startRow, endRow).filter((f) => f.type === `row`).map((f) => f.key);
 	}
+	/**
+	* Row keys strictly intersecting the viewport (no overscan), mirroring
+	* `ixfx-grid-list.visibleKeys()` for the `datagrid-viewport-change` detail.
+	*/
+	#visibleKeys() {
+		const rh = this.rowHeight;
+		const startRow = Math.max(0, Math.floor(this._scrollTop / rh));
+		const endRow = Math.min(this._flat.length, Math.ceil((this._scrollTop + this._viewportH) / rh));
+		return this._flat.slice(startRow, endRow).filter((f) => f.type === `row`).map((f) => f.key);
+	}
+	/** Coalesce viewport-change dispatches to at most one per animation frame. */
+	#scheduleViewportChangeEmit() {
+		if (this.#viewportChangeRaf !== 0) return;
+		this.#viewportChangeRaf = requestAnimationFrame(() => {
+			this.#viewportChangeRaf = 0;
+			this.#emitViewportChangeIfChanged();
+		});
+	}
+	/**
+	* Dispatch `datagrid-viewport-change` with the current key sets — unless
+	* neither set changed since the last dispatch, so coalesced frames and
+	* no-op scrolls stay silent.
+	*/
+	#emitViewportChangeIfChanged() {
+		const renderedKeys = this.renderedKeys();
+		const visibleKeys = this.#visibleKeys();
+		if (sameKeys$3(this.#lastViewportRenderedKeys, renderedKeys) && sameKeys$3(this.#lastViewportVisibleKeys, visibleKeys)) return;
+		this.#lastViewportRenderedKeys = renderedKeys;
+		this.#lastViewportVisibleKeys = visibleKeys;
+		this.dispatchEvent(new CustomEvent(`datagrid-viewport-change`, {
+			detail: {
+				renderedKeys,
+				visibleKeys
+			},
+			bubbles: true,
+			composed: true
+		}));
+	}
 	_findFirstVisibleCol(scrollLeft) {
 		let lo = 0;
 		let hi = this._colOffsets.length - 1;
@@ -16619,6 +16709,12 @@ DataTableElement = __decorate([safeCustomElement(`ixfx-data-table`)], DataTableE
 const ITEM_SELECTOR$3 = `:scope > li`;
 const SEARCH_HIGHLIGHT_KEY = `detail-list-search`;
 const LABEL_SPAN_CSS = `overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0`;
+/** Shallow key-array equality, treating `undefined` (never dispatched) as different. */
+function sameKeys$2(a, b) {
+	if (a === void 0 || a.length !== b.length) return false;
+	for (let i = 0; i < a.length; i++) if (a[i] !== b[i]) return false;
+	return true;
+}
 let DetailListElement = class DetailListElement extends i {
 	constructor(..._args) {
 		super(..._args);
@@ -16637,6 +16733,7 @@ let DetailListElement = class DetailListElement extends i {
 		this.#positions = /* @__PURE__ */ new Map();
 		this.#geometryScheduled = false;
 		this.#sortRaf = 0;
+		this.#viewportScrollRaf = 0;
 		this.#animatedItems = /* @__PURE__ */ new WeakSet();
 		this.#builtFromProvider = [];
 		this.#providerBuilt = 0;
@@ -16730,6 +16827,13 @@ let DetailListElement = class DetailListElement extends i {
 			getLabel: (el) => el.getAttribute(`data-search-label`) ?? el.textContent?.trim() ?? ``,
 			highlightKey: SEARCH_HIGHLIGHT_KEY
 		}) });
+		this.#onListScroll = () => {
+			if (this.#viewportScrollRaf !== 0) return;
+			this.#viewportScrollRaf = requestAnimationFrame(() => {
+				this.#viewportScrollRaf = 0;
+				this.#emitViewportChangeIfChanged();
+			});
+		};
 		this._onPointerOver = (e) => {
 			const item = this._findListItem(e.composedPath());
 			if (item) this.tickled.handlePointerEnter(item);
@@ -16821,6 +16925,10 @@ let DetailListElement = class DetailListElement extends i {
 	#positions;
 	#geometryScheduled;
 	#sortRaf;
+	#viewportScrollRaf;
+	/** Key sets as of the last viewport-change dispatch, for dedupe. */
+	#lastViewportRenderedKeys;
+	#lastViewportVisibleKeys;
 	#resizeObserver;
 	#mutationObserver;
 	/** Items that have already played (or been skipped for) their enter animation. */
@@ -16960,6 +17068,8 @@ let DetailListElement = class DetailListElement extends i {
 		this.removeEventListener(`dblclick`, this._onDblClick);
 		this.removeEventListener(`wheel`, this._onWheel);
 		cancelAnimationFrame(this.#sortRaf);
+		cancelAnimationFrame(this.#viewportScrollRaf);
+		this.#viewportScrollRaf = 0;
 		this.#resizeObserver?.disconnect();
 		this.#resizeObserver = void 0;
 		this.#mutationObserver?.disconnect();
@@ -17312,6 +17422,7 @@ let DetailListElement = class DetailListElement extends i {
 			col: colIdx,
 			row: rowIdx
 		})));
+		this.#scheduleViewportChangeEmit();
 	}
 	#positionOf(el) {
 		let pos = this.#positions.get(el);
@@ -17603,6 +17714,45 @@ let DetailListElement = class DetailListElement extends i {
 			cancelable: true
 		}));
 	}
+	/** Scroll on the `part="list"` element — rAF-coalesced viewport-change check. */
+	#onListScroll;
+	/** Coalesce non-scroll viewport checks to at most one per animation frame. */
+	#scheduleViewportChangeEmit() {
+		if (this.#viewportScrollRaf !== 0) return;
+		this.#viewportScrollRaf = requestAnimationFrame(() => {
+			this.#viewportScrollRaf = 0;
+			this.#emitViewportChangeIfChanged();
+		});
+	}
+	/**
+	* Keys of everything currently rendered. The list has no virtual window —
+	* every non-hidden item is in the DOM — so this is all keyed items, mirroring
+	* `ixfx-vertical-list.renderedKeys()` in its non-virtualized mode.
+	*/
+	#renderedKeys() {
+		const out = [];
+		for (const el of this._getVisibleItems()) {
+			const key = keyForElement(el);
+			if (key !== void 0) out.push(key);
+		}
+		return out;
+	}
+	/**
+	* Dispatch `detail-list-viewport-change` with the current key sets — unless
+	* neither set changed since the last dispatch, so coalesced frames and
+	* no-op scrolls stay silent.
+	*/
+	#emitViewportChangeIfChanged() {
+		const renderedKeys = this.#renderedKeys();
+		const visibleKeys = this.visibleKeys();
+		if (sameKeys$2(this.#lastViewportRenderedKeys, renderedKeys) && sameKeys$2(this.#lastViewportVisibleKeys, visibleKeys)) return;
+		this.#lastViewportRenderedKeys = renderedKeys;
+		this.#lastViewportVisibleKeys = visibleKeys;
+		this._dispatch(`detail-list-viewport-change`, {
+			renderedKeys,
+			visibleKeys
+		});
+	}
 	_activateItem(item) {
 		if (this.interactionMode !== `manual`) this.selection.replace(item);
 		this._dispatch(`list-activate`, { item });
@@ -17761,7 +17911,7 @@ let DetailListElement = class DetailListElement extends i {
 		const progress = this.#data.progress;
 		return b`
       <div class="container">
-        <ul part="list" class="scroll-fade-x">
+        <ul part="list" class="scroll-fade-x" @scroll=${this.#onListScroll}>
           <slot></slot>
         </ul>
         ${this.#marqueeRect ? b`<div class="marquee" part="marquee" style=${this.#marqueeStyle(this.#marqueeRect)}></div>` : ``}
@@ -23629,12 +23779,19 @@ function columnOf(index, cols) {
 function rowOf(index, cols) {
 	return cols <= 1 ? index : Math.floor(index / cols);
 }
+/** Shallow key-array equality, treating `undefined` (never dispatched) as different. */
+function sameKeys$1(a, b) {
+	if (a === void 0 || a.length !== b.length) return false;
+	for (let i = 0; i < a.length; i++) if (a[i] !== b[i]) return false;
+	return true;
+}
 let GridListElement = class GridListElement extends i {
 	constructor(..._args) {
 		super(..._args);
 		this.selectionMode = `single`;
 		this.interactionMode = `standard`;
 		this.disableHoverTickle = false;
+		this.disableScrollHoverTickle = false;
 		this.itemSize = 160;
 		this.gap = 8;
 		this.orientation = `grid`;
@@ -23691,6 +23848,9 @@ let GridListElement = class GridListElement extends i {
 			itemWrap: this.#itemWrap,
 			hoverDisabled: () => this.disableHoverTickle || this.#dragSelect.isDragging || this.#nativeDrag.isDragging
 		});
+		this.#scrollHoverSuppress = false;
+		this.#lastPointerX = NaN;
+		this.#lastPointerY = NaN;
 		this.#marqueePreview = /* @__PURE__ */ new Set();
 		this.#nativeDragging = false;
 		this.#dragOriginKey = void 0;
@@ -23773,6 +23933,7 @@ let GridListElement = class GridListElement extends i {
 		this.#selectedSnapshot = /* @__PURE__ */ new Set();
 		this.#onScroll = (e) => {
 			const el = e.target;
+			this.#markScrollHoverSuppress();
 			this.#cancelScrollRaf();
 			this.#scrollRaf = requestAnimationFrame(() => {
 				this.#scrollRaf = 0;
@@ -23789,9 +23950,23 @@ let GridListElement = class GridListElement extends i {
 			const vp = this.#viewportRef.value ?? e.currentTarget;
 			if (!vp) return;
 			if (vp.scrollWidth <= vp.clientWidth + 1) return;
+			this.#markScrollHoverSuppress();
 			vp.scrollLeft += e.deltaX + e.deltaY;
 			e.preventDefault();
 		};
+		this.#onHostPointerMove = (e) => {
+			const moved = !Number.isNaN(this.#lastPointerX) && (e.clientX !== this.#lastPointerX || e.clientY !== this.#lastPointerY);
+			this.#lastPointerX = e.clientX;
+			this.#lastPointerY = e.clientY;
+			if (!moved || !this.#scrollHoverSuppress) return;
+			this.#endScrollHoverSuppress();
+			if (this.disableHoverTickle) return;
+			const key = this.shadowRoot?.elementFromPoint?.(e.clientX, e.clientY)?.closest(`.cell`)?.getAttribute(`data-key`);
+			if (key) this.tickled.handlePointerEnter(key);
+		};
+		this.#onHostPointerLeave = () => {
+			this.#endScrollHoverSuppress();
+		};
 		this._onKeyDown = (e) => {
 			if ((e.ctrlKey || e.metaKey) && e.key === `f`) return;
 			if ((e.ctrlKey || e.metaKey) && e.key === `a`) {
@@ -24037,7 +24212,10 @@ let GridListElement = class GridListElement extends i {
         transition: background var(--transition), border-color var(--transition);
       }
       :host(:not([caption-style="separate"])) .cell.tickled,
-      :host(:not([caption-style="separate"]):not([disable-hover-tickle])) .cell:hover {
+      /* [data-scroll-hover-suppress] is set while a scroll gesture moves
+         cells beneath a stationary pointer (see disable-scroll-hover-tickle):
+         the :hover highlight is gated so the visual cursor holds still too. */
+      :host(:not([caption-style="separate"]):not([disable-hover-tickle]):not([data-scroll-hover-suppress])) .cell:hover {
         background: var(--item-bg-tickled);
         border: var(--item-border-tickled);
       }
@@ -24113,7 +24291,7 @@ let GridListElement = class GridListElement extends i {
         border: 1px solid transparent;
       }
       :host([caption-style="separate"]) .cell.tickled .thumb,
-      :host([caption-style="separate"]:not([disable-hover-tickle])) .cell:hover .thumb {
+      :host([caption-style="separate"]:not([disable-hover-tickle]):not([data-scroll-hover-suppress])) .cell:hover .thumb {
         background: var(--grid-list-thumb-bg-tickled, var(--item-bg-tickled));
         border: var(--item-border-tickled);
       }
@@ -24234,6 +24412,16 @@ let GridListElement = class GridListElement extends i {
 	*/
 	#sourceElement;
 	#source;
+	/**
+	* True while cell `pointerenter` tickling is suppressed by an active or
+	* just-finished scroll gesture (`disable-scroll-hover-tickle`). While set,
+	* the host carries `[data-scroll-hover-suppress]`, which gates the CSS
+	* `:hover` highlight so the visual cursor does not churn either.
+	*/
+	#scrollHoverSuppress;
+	/** Last pointer position seen over the host; real movement ends suppression. */
+	#lastPointerX;
+	#lastPointerY;
 	/** Live drag-select preview: covered keys + the surface-relative rect. */
 	#marqueePreview;
 	#marqueeRect;
@@ -24403,6 +24591,8 @@ let GridListElement = class GridListElement extends i {
 			[`caption-backdrop`, this.captionBackdrop]
 		]) if (!this.hasAttribute(attr)) this.setAttribute(attr, value);
 		this.addEventListener(`keydown`, this._onKeyDown);
+		this.addEventListener(`pointermove`, this.#onHostPointerMove, { passive: true });
+		this.addEventListener(`pointerleave`, this.#onHostPointerLeave);
 		this.#mutationObserver ??= new MutationObserver((records) => this.#onChildrenChanged(records));
 		this.#mutationObserver.observe(this, {
 			childList: true,
@@ -24416,6 +24606,9 @@ let GridListElement = class GridListElement extends i {
 		super.disconnectedCallback();
 		this.#stopActiveCaptionPan();
 		this.removeEventListener(`keydown`, this._onKeyDown);
+		this.removeEventListener(`pointermove`, this.#onHostPointerMove);
+		this.removeEventListener(`pointerleave`, this.#onHostPointerLeave);
+		this.#endScrollHoverSuppress();
 		this.#resizeObserver?.disconnect();
 		this.#resizeObserver = void 0;
 		this.#mutationObserver?.disconnect();
@@ -24486,10 +24679,23 @@ let GridListElement = class GridListElement extends i {
 			this.requestUpdate();
 		}, REFLOW_WINDOW_MS);
 	}
+	/** Key sets as of the last `grid-list-viewport-change` dispatch, for dedupe. */
+	#lastViewportRenderedKeys;
+	#lastViewportVisibleKeys;
+	/**
+	* Dispatch `grid-list-viewport-change` with the current key sets — unless
+	* neither set changed since the last dispatch, so coalesced frames and
+	* no-op scrolls stay silent.
+	*/
 	#emitViewportChange() {
+		const renderedKeys = this.renderedKeys();
+		const visibleKeys = this.visibleKeys();
+		if (sameKeys$1(this.#lastViewportRenderedKeys, renderedKeys) && sameKeys$1(this.#lastViewportVisibleKeys, visibleKeys)) return;
+		this.#lastViewportRenderedKeys = renderedKeys;
+		this.#lastViewportVisibleKeys = visibleKeys;
 		this._dispatch(`grid-list-viewport-change`, {
-			renderedKeys: this.renderedKeys(),
-			visibleKeys: this.visibleKeys()
+			renderedKeys,
+			visibleKeys
 		});
 	}
 	firstUpdated() {
@@ -24599,6 +24805,7 @@ let GridListElement = class GridListElement extends i {
 			this.selection.clearAnchor();
 			this.#syncAriaMultiselectable();
 		}
+		if (changed.has(`disableScrollHoverTickle`) && !this.disableScrollHoverTickle) this.#endScrollHoverSuppress();
 		if (changed.has(`itemsDraggable`)) this.#nativeDrag.refreshDraggable();
 		if (changed.has(`orientation`)) {
 			const vp = this.#viewportRef.value;
@@ -25018,7 +25225,7 @@ let GridListElement = class GridListElement extends i {
         ?data-marquee=${marquee}
         @click=${(e) => this.#onCellClick(e, key)}
         @dblclick=${() => this.#onCellActivate(key)}
-        @pointerenter=${() => this.tickled.handlePointerEnter(key)}
+        @pointerenter=${() => this.#handleCellPointerEnter(key)}
       >
         <div class="content" part="content">${this.#source.renderCellContent(index)}</div>
         ${showCaption ? this.#renderCaption(caption, captionCss, tickled) : ``}
@@ -25102,7 +25309,7 @@ let GridListElement = class GridListElement extends i {
         ?data-marquee=${marquee}
         @click=${(e) => this.#onCellClick(e, key)}
         @dblclick=${() => this.#onCellActivate(key)}
-        @pointerenter=${() => this.tickled.handlePointerEnter(key)}
+        @pointerenter=${() => this.#handleCellPointerEnter(key)}
       >
         <div class="thumb" part="thumb" style=${thumbStyle}>
           ${this.#source.renderCellContent(index)}
@@ -25123,6 +25330,37 @@ let GridListElement = class GridListElement extends i {
 	* left to the browser when there is no vertical component.
 	*/
 	#onWheel;
+	/**
+	* Cell `pointerenter` funnel. While a scroll gesture moves cells beneath a
+	* stationary pointer (`disable-scroll-hover-tickle`), the freshly
+	* virtualised cell's enter event is ignored so the cursor holds still.
+	*/
+	#handleCellPointerEnter(key) {
+		if (this.#scrollHoverSuppress) return;
+		this.tickled.handlePointerEnter(key);
+	}
+	/** Open the scroll-hover suppression window (no-op unless opted in and not already open). */
+	#markScrollHoverSuppress() {
+		if (!this.disableScrollHoverTickle || this.#scrollHoverSuppress) return;
+		this.#scrollHoverSuppress = true;
+		this.toggleAttribute(`data-scroll-hover-suppress`, true);
+	}
+	#endScrollHoverSuppress() {
+		if (!this.#scrollHoverSuppress) return;
+		this.#scrollHoverSuppress = false;
+		this.toggleAttribute(`data-scroll-hover-suppress`, false);
+	}
+	/**
+	* A real pointer movement ends scroll-hover suppression. The first
+	* `pointerenter` on a real move is swallowed by design (it can be
+	* indistinguishable from a virtualisation enter), so the cell already under
+	* the pointer is re-tickled here — otherwise the cursor would lag one cell
+	* boundary behind the pointer. The very first tracked `pointermove` only
+	* establishes the baseline; it cannot know the pointer moved.
+	*/
+	#onHostPointerMove;
+	/** The pointer leaving the list ends suppression, so re-entry hovers normally. */
+	#onHostPointerLeave;
 	#cancelScrollRaf() {
 		if (this.#scrollRaf !== 0) {
 			cancelAnimationFrame(this.#scrollRaf);
@@ -25206,6 +25444,11 @@ __decorate([property({
 	attribute: `disable-hover-tickle`,
 	reflect: true
 })], GridListElement.prototype, "disableHoverTickle", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: `disable-scroll-hover-tickle`,
+	reflect: true
+})], GridListElement.prototype, "disableScrollHoverTickle", void 0);
 __decorate([property({
 	type: Number,
 	attribute: `item-size`
@@ -28183,6 +28426,12 @@ const ITEM_SELECTOR = `li:not([data-virtual-spacer]), [data-list-item]:not([data
 * vertical rows are shorter relative to the viewport, so 3.
 */
 const VIRTUAL_OVERSCAN = 3;
+/** Shallow key-array equality, treating `undefined` (never dispatched) as different. */
+function sameKeys(a, b) {
+	if (a === void 0 || a.length !== b.length) return false;
+	for (let i = 0; i < a.length; i++) if (a[i] !== b[i]) return false;
+	return true;
+}
 let VerticalListElement = class VerticalListElement extends i {
 	constructor(..._args) {
 		super(..._args);
@@ -28297,11 +28546,11 @@ let VerticalListElement = class VerticalListElement extends i {
 			highlightKey: `vertical-list-search`
 		}) });
 		this.#onScroll = () => {
-			if (!this.#virtualActive()) return;
 			if (this.#scrollRaf !== 0) return;
 			this.#scrollRaf = requestAnimationFrame(() => {
 				this.#scrollRaf = 0;
 				this.#syncVirtualWindow();
+				this.#emitViewportChangeIfChanged();
 			});
 		};
 		this._onPointerOver = (e) => {
@@ -28394,6 +28643,9 @@ let VerticalListElement = class VerticalListElement extends i {
 	#suspendAdapterRebuild;
 	#scrollRaf;
 	#resizeObserver;
+	/** Key sets as of the last viewport-change dispatch, for dedupe. */
+	#lastViewportRenderedKeys;
+	#lastViewportVisibleKeys;
 	#topSpacer;
 	#bottomSpacer;
 	/** Last measured viewport height — kept so a 0 read can't collapse the window. */
@@ -28521,6 +28773,14 @@ let VerticalListElement = class VerticalListElement extends i {
 		}
 	}
 	/**
+	* The shadow scroll list only exists after the first render; start
+	* watching it so resizes move the window (virtualized) and the visible
+	* set (plain) too.
+	*/
+	firstUpdated() {
+		this.#ensureResizeObserved();
+	}
+	/**
 	* Animate in items appended to the light DOM (however they got there —
 	* {@link addItem}, direct `appendChild`, a framework binding). A bulk populate
 	* (roughly everything at once) is left alone, as are the wrapper `<li>`s the
@@ -28530,6 +28790,7 @@ let VerticalListElement = class VerticalListElement extends i {
 		if (!this.isConnected) return;
 		if (this.#virtualActive()) {
 			this.#syncVirtualWindow(this.#reconcileRecords(records));
+			this.#scheduleViewportChangeEmit();
 			return;
 		}
 		const fresh = [];
@@ -28540,6 +28801,7 @@ let VerticalListElement = class VerticalListElement extends i {
 			this.#animatedItems.add(node);
 			fresh.push(node);
 		}
+		this.#scheduleViewportChangeEmit();
 		if (fresh.length === 0) return;
 		if (this.#isBulkPopulate(fresh.length)) return;
 		for (const el of fresh) animateListItemIn(el);
@@ -29093,6 +29355,7 @@ let VerticalListElement = class VerticalListElement extends i {
 		if (!ul) return;
 		this.#resizeObserver ??= new ResizeObserver(() => {
 			this.#syncVirtualWindow();
+			this.#scheduleViewportChangeEmit();
 		});
 		this.#resizeObserver.observe(ul);
 	}
@@ -29172,6 +29435,32 @@ let VerticalListElement = class VerticalListElement extends i {
 		this._syncItemStates();
 		this._syncNativeDraggable();
 		this.#nativeDrag.refreshDraggable();
+		this.#scheduleViewportChangeEmit();
+	}
+	/** Coalesce content/layout viewport checks to at most one animation frame. */
+	#scheduleViewportChangeEmit() {
+		if (this.#scrollRaf !== 0) return;
+		this.#scrollRaf = requestAnimationFrame(() => {
+			this.#scrollRaf = 0;
+			this.#syncVirtualWindow();
+			this.#emitViewportChangeIfChanged();
+		});
+	}
+	/**
+	* Dispatch `vertical-list-viewport-change` with the current key sets — unless
+	* neither set changed since the last dispatch, so coalesced frames and
+	* no-op scrolls stay silent.
+	*/
+	#emitViewportChangeIfChanged() {
+		const renderedKeys = this.renderedKeys();
+		const visibleKeys = this.visibleKeys();
+		if (sameKeys(this.#lastViewportRenderedKeys, renderedKeys) && sameKeys(this.#lastViewportVisibleKeys, visibleKeys)) return;
+		this.#lastViewportRenderedKeys = renderedKeys;
+		this.#lastViewportVisibleKeys = visibleKeys;
+		this._dispatch(`vertical-list-viewport-change`, {
+			renderedKeys,
+			visibleKeys
+		});
 	}
 	_getVisibleItems() {
 		return Array.from(this.querySelectorAll(ITEM_SELECTOR)).filter((el) => {