@ixfx/components 0.10.3 → 0.10.5

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>` : ``}
@@ -19573,6 +19723,7 @@ let TabListElement = class TabListElement extends i {
 		this.flip = false;
 		this.scrollable = false;
 		this.hideLabels = false;
+		this.labelNogrow = false;
 		this.shrink = false;
 		this.dragMode = `off`;
 		this.#items = [];
@@ -19580,9 +19731,10 @@ let TabListElement = class TabListElement extends i {
 		this.#suppressNextClick = false;
 		this.#onSlotChange = () => {
 			this.updateComplete.then(() => {
-				this.#items = (this.shadowRoot?.querySelector(`slot:not([name])`))?.assignedElements({ flatten: true }) ?? [];
+				this.#refreshItems();
 				this.#syncIndicatorColors();
 				this.#syncHideLabels();
+				this.#syncLabelNogrow();
 			});
 		};
 		this.#onToolbarSlotChange = () => {
@@ -19741,13 +19893,21 @@ let TabListElement = class TabListElement extends i {
     </div>`;
 	}
 	#onSlotChange;
+	/**
+	* Re-read the assigned tab items. Some environments do not fire slotchange
+	* for a slot's initial assignment, so firstUpdated also calls this before
+	* syncing item attributes.
+	*/
+	#refreshItems() {
+		this.#items = (this.shadowRoot?.querySelector(`slot:not([name])`))?.assignedElements({ flatten: true }) ?? [];
+	}
 	#onToolbarSlotChange;
 	firstUpdated() {
 		this.updateComplete.then(() => {
-			if (this.#items.length > 0) {
-				this.#syncIndicatorColors();
-				this.#syncHideLabels();
-			}
+			this.#refreshItems();
+			this.#syncIndicatorColors();
+			this.#syncHideLabels();
+			this.#syncLabelNogrow();
 			this.#onToolbarSlotChange();
 		});
 	}
@@ -19756,11 +19916,16 @@ let TabListElement = class TabListElement extends i {
 		this.classList.toggle(`scrollable`, this.scrollable);
 		if (changedProperties.has(`dragMode`)) this.toggleAttribute(`drag-mode`, this.dragMode !== `off`);
 		if (changedProperties.has(`hideLabels`)) this.#syncHideLabels();
+		if (changedProperties.has(`labelNogrow`)) this.#syncLabelNogrow();
 	}
 	#syncHideLabels() {
 		for (const item of this.#items) if (this.hideLabels) item.setAttribute(`hide-labels`, ``);
 		else item.removeAttribute(`hide-labels`);
 	}
+	#syncLabelNogrow() {
+		for (const item of this.#items) if (this.labelNogrow) item.setAttribute(`label-nogrow`, ``);
+		else item.removeAttribute(`label-nogrow`);
+	}
 	#syncIndicatorColors() {
 		for (const item of this.#items) {
 			item.style.setProperty(`--indicator-color-bottom`, `transparent`);
@@ -20179,6 +20344,10 @@ __decorate([property({
 	type: Boolean,
 	attribute: `hide-labels`
 })], TabListElement.prototype, "hideLabels", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: `label-nogrow`
+})], TabListElement.prototype, "labelNogrow", void 0);
 __decorate([property({
 	type: Boolean,
 	reflect: true
@@ -20195,16 +20364,21 @@ let TabListItemElement = class TabListItemElement extends i {
 		super(..._args);
 		this.closeable = false;
 		this.hideLabels = false;
+		this.labelNogrow = false;
 		this.iconName = void 0;
 		this.description = void 0;
 		this.commandActive = void 0;
 		this.registry = void 0;
 		this._compact = false;
 		this._hasToolbarContent = false;
+		this._hasStatusContent = false;
 		this._labelObserver = null;
 		this._onToolbarSlotChange = () => {
 			this._updateToolbarContent();
 		};
+		this._onStatusSlotChange = () => {
+			this._updateStatusContent();
+		};
 		this._onLabelSlotChange = () => {
 			this._syncLabelSizer();
 		};
@@ -20215,13 +20389,18 @@ let TabListItemElement = class TabListItemElement extends i {
 			this._compact = entry.contentRect.width < 64;
 		});
 		this._resizeObserver.observe(this);
-		(this.shadowRoot?.querySelector(`slot[name="toolbar"]`))?.addEventListener(`slotchange`, this._onToolbarSlotChange);
-		(this.shadowRoot?.querySelector(`slot:not([name])`))?.addEventListener(`slotchange`, this._onLabelSlotChange);
-		this._labelObserver = new MutationObserver(() => this._syncLabelSizer());
+		this._wireSlotListeners();
+		this._labelObserver = new MutationObserver(() => {
+			this._syncLabelSizer();
+			this._updateToolbarContent();
+			this._updateStatusContent();
+		});
 		this._labelObserver.observe(this, {
 			childList: true,
 			characterData: true,
-			subtree: true
+			subtree: true,
+			attributes: true,
+			attributeFilter: [`slot`]
 		});
 	}
 	disconnectedCallback() {
@@ -20232,8 +20411,7 @@ let TabListItemElement = class TabListItemElement extends i {
 		this._commandCleanup = void 0;
 		this._labelObserver?.disconnect();
 		this._labelObserver = null;
-		(this.shadowRoot?.querySelector(`slot[name="toolbar"]`))?.removeEventListener(`slotchange`, this._onToolbarSlotChange);
-		(this.shadowRoot?.querySelector(`slot:not([name])`))?.removeEventListener(`slotchange`, this._onLabelSlotChange);
+		this._unwireSlotListeners();
 	}
 	updated(changed) {
 		super.updated(changed);
@@ -20257,6 +20435,22 @@ let TabListItemElement = class TabListItemElement extends i {
 		});
 	}
 	/**
+	* Attach slotchange listeners. The shadow root is empty during the first
+	* connectedCallback (the template only exists once rendered), so this is
+	* called again from firstUpdated. addEventListener dedupes identical
+	* listener registrations, so double-wiring is harmless.
+	*/
+	_wireSlotListeners() {
+		(this.shadowRoot?.querySelector(`slot[name="toolbar"]`))?.addEventListener(`slotchange`, this._onToolbarSlotChange);
+		(this.shadowRoot?.querySelector(`slot[name="status"]`))?.addEventListener(`slotchange`, this._onStatusSlotChange);
+		(this.shadowRoot?.querySelector(`slot:not([name])`))?.addEventListener(`slotchange`, this._onLabelSlotChange);
+	}
+	_unwireSlotListeners() {
+		(this.shadowRoot?.querySelector(`slot[name="toolbar"]`))?.removeEventListener(`slotchange`, this._onToolbarSlotChange);
+		(this.shadowRoot?.querySelector(`slot[name="status"]`))?.removeEventListener(`slotchange`, this._onStatusSlotChange);
+		(this.shadowRoot?.querySelector(`slot:not([name])`))?.removeEventListener(`slotchange`, this._onLabelSlotChange);
+	}
+	/**
 	* Mirror the default-slot text into `.label[data-label]` for the `::after`
 	* width sizer. Slotted toolbar content is excluded.
 	*/
@@ -20269,11 +20463,20 @@ let TabListItemElement = class TabListItemElement extends i {
 		else label.removeAttribute(`data-label`);
 	}
 	_updateToolbarContent() {
-		const slot = this.shadowRoot?.querySelector(`slot[name="toolbar"]`);
-		this._hasToolbarContent = (slot?.assignedElements().length ?? 0) > 0;
+		this._hasToolbarContent = Array.from(this.children).some((child) => child.getAttribute(`slot`) === `toolbar`);
+	}
+	/**
+	* Named slots only render once content has been detected, so reading
+	* assignedElements() cannot bootstrap detection. Direct light-DOM children
+	* are exactly what a slot assigns, so scan those instead.
+	*/
+	_updateStatusContent() {
+		this._hasStatusContent = Array.from(this.children).some((child) => child.getAttribute(`slot`) === `status`);
 	}
 	firstUpdated() {
+		this._wireSlotListeners();
 		this._updateToolbarContent();
+		this._updateStatusContent();
 		this._syncLabelSizer();
 	}
 	render() {
@@ -20283,6 +20486,7 @@ let TabListItemElement = class TabListItemElement extends i {
       <div>
         ${this.iconName ? b`<ixfx-icon name="${this.iconName}"></ixfx-icon>` : A}
         ${showLabel ? b`<span class="label"><slot></slot></span>` : A}
+        ${this._hasStatusContent ? b`<div class="status"><slot name="status"></slot></div>` : A}
         ${hasActions ? b`
         <div class="actions">
           <div class="toolbar"><slot name="toolbar"></slot></div>
@@ -20435,6 +20639,28 @@ let TabListItemElement = class TabListItemElement extends i {
         display: contents;
       }
 
+      /* Persistent status slot (e.g. an ixfx-led). Unlike .toolbar it is
+         always visible, selection or not, and keeps its own size however
+         much the label truncates. --size inherits through slotted content,
+         so bare and button-wrapped LEDs both render smaller; consumers can
+         override per element. */
+      .status {
+        display: flex;
+        align-items: center;
+        flex-shrink: 0;
+        --size: 0.75ex;
+      }
+
+      slot[name="status"] {
+        display: contents;
+      }
+
+      /* With label-nogrow, the label keeps its intrinsic width so status
+         content lands next to the label text instead of the far edge. */
+      :host([label-nogrow]) .label {
+        flex: 0 0 auto;
+      }
+
       /* Slotted buttons inherit these through the shadow boundary; keeps a
          toolbar button from inflating the strip height. */
       .toolbar ::slotted(ixfx-button) {
@@ -20478,6 +20704,10 @@ __decorate([property({
 	type: Boolean,
 	attribute: `hide-labels`
 })], TabListItemElement.prototype, "hideLabels", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: `label-nogrow`
+})], TabListItemElement.prototype, "labelNogrow", void 0);
 __decorate([property({
 	type: String,
 	attribute: `icon-name`
@@ -20490,6 +20720,7 @@ __decorate([property({
 __decorate([property({ attribute: false })], TabListItemElement.prototype, "registry", void 0);
 __decorate([state()], TabListItemElement.prototype, "_compact", void 0);
 __decorate([state()], TabListItemElement.prototype, "_hasToolbarContent", void 0);
+__decorate([state()], TabListItemElement.prototype, "_hasStatusContent", void 0);
 TabListItemElement = __decorate([safeCustomElement(`ixfx-tab-list-item`)], TabListItemElement);
 //#endregion
 //#region src/dock/dock-panel.ts
@@ -23629,6 +23860,12 @@ 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);
@@ -24523,10 +24760,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() {
@@ -28257,6 +28507,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);
@@ -28371,11 +28627,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) => {
@@ -28468,6 +28724,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. */
@@ -28595,6 +28854,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
@@ -28604,6 +28871,7 @@ let VerticalListElement = class VerticalListElement extends i {
 		if (!this.isConnected) return;
 		if (this.#virtualActive()) {
 			this.#syncVirtualWindow(this.#reconcileRecords(records));
+			this.#scheduleViewportChangeEmit();
 			return;
 		}
 		const fresh = [];
@@ -28614,6 +28882,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);
@@ -29167,6 +29436,7 @@ let VerticalListElement = class VerticalListElement extends i {
 		if (!ul) return;
 		this.#resizeObserver ??= new ResizeObserver(() => {
 			this.#syncVirtualWindow();
+			this.#scheduleViewportChangeEmit();
 		});
 		this.#resizeObserver.observe(ul);
 	}
@@ -29246,6 +29516,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) => {
@@ -46598,6 +46894,7 @@ let ToolbarElement = class ToolbarElement extends i {
 		this.invisibleGroups = false;
 		this.allowReorder = false;
 		this._overflowCount = 0;
+		this._popoverOpen = false;
 		this._ro = null;
 		this._anchor = `--toolbar-${_ToolbarElement._cnt++}`;
 		this._sizes = /* @__PURE__ */ new WeakMap();
@@ -46723,11 +47020,11 @@ let ToolbarElement = class ToolbarElement extends i {
     .overflow-btn[hidden] { display: none; }
     .overflow-popover {
       position: fixed;
-      top: anchor(bottom);
-      left: anchor(right);
+      inset: auto;
+      margin: 0;
       position-anchor: var(--anchor-name);
       position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline;
-      margin: 8px;
+      position-visibility: anchors-visible;
       max-height: min(60vh, 400px);
       max-width: min(90vw, 320px);
       overflow: auto;
@@ -46737,6 +47034,18 @@ let ToolbarElement = class ToolbarElement extends i {
       flex-direction: column;
       gap: var(--space-s);
     }
+    :host([orientation="horizontal"]) .overflow-popover {
+      position-area: bottom span-left;
+      margin-top: var(--toolbar-overflow-gap, 8px);
+    }
+    :host([orientation="vertical-left"]) .overflow-popover {
+      position-area: right span-bottom;
+      margin-left: var(--toolbar-overflow-gap, 8px);
+    }
+    :host([orientation="vertical-right"]) .overflow-popover {
+      position-area: left span-bottom;
+      margin-right: var(--toolbar-overflow-gap, 8px);
+    }
     .overflow-popover:popover-open { display: flex; }
     .overflow-popover ::slotted(*) { writing-mode: horizontal-tb; text-orientation: mixed; }
 
@@ -46775,6 +47084,9 @@ let ToolbarElement = class ToolbarElement extends i {
 		});
 		this._ro = new ResizeObserver(() => this._scheduleMeasure());
 		this._ro.observe(this._inner);
+		this._popover.addEventListener(`toggle`, () => {
+			this._popoverOpen = this._popover.matches(`:popover-open`);
+		});
 		this._scheduleMeasure();
 		this._updateGroups();
 	}
@@ -47115,7 +47427,7 @@ let ToolbarElement = class ToolbarElement extends i {
 		return b`
       <div class="inner" role="toolbar" aria-orientation=${this.orientation}>
         <slot @pointerdown=${this._onPointerDown} @keydown=${this._onKeyDown}></slot>
-        <ixfx-button class="overflow-btn" ?hidden=${!hasOverflow} @click=${this._toggleOverflow} aria-label="More" aria-haspopup="true" aria-expanded=${this._popover?.matches(`:popover-open`) ?? false}>⋯</ixfx-button>
+        <ixfx-button class="overflow-btn" ?hidden=${!hasOverflow} @click=${this._toggleOverflow} aria-label="More" aria-haspopup="true" aria-expanded=${this._popoverOpen}>⋯</ixfx-button>
       </div>
       <div class="overflow-popover popup-surface" popover="auto" @click=${(e) => e.stopPropagation()}>
         <slot name="overflow"></slot>
@@ -47158,6 +47470,7 @@ __decorate([property({
 	reflect: true
 })], ToolbarElement.prototype, "allowReorder", void 0);
 __decorate([state()], ToolbarElement.prototype, "_overflowCount", void 0);
+__decorate([state()], ToolbarElement.prototype, "_popoverOpen", void 0);
 __decorate([query(`.inner`)], ToolbarElement.prototype, "_inner", void 0);
 __decorate([query(`.overflow-popover`)], ToolbarElement.prototype, "_popover", void 0);
 __decorate([query(`slot`)], ToolbarElement.prototype, "_slot", void 0);