@ixfx/components 0.10.3 → 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,6 +23779,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 +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() {
@@ -28257,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);
@@ -28371,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) => {
@@ -28468,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. */
@@ -28595,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
@@ -28604,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 = [];
@@ -28614,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);
@@ -29167,6 +29355,7 @@ let VerticalListElement = class VerticalListElement extends i {
 		if (!ul) return;
 		this.#resizeObserver ??= new ResizeObserver(() => {
 			this.#syncVirtualWindow();
+			this.#scheduleViewportChangeEmit();
 		});
 		this.#resizeObserver.observe(ul);
 	}
@@ -29246,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) => {