@ixfx/components 0.10.5 → 0.10.7

package/bundle/index.js

@@ -14907,7 +14907,7 @@ let DataGridElement = class DataGridElement extends i {
 				}
 				case ` `: {
 					if (this._editing) {
-						if (this.columns.find((c) => c.key === this._editing.colKey)?.editor === `boolean`) {
+						if ((this.columns.find((c) => c.key === this._editing.colKey)?.dataType ?? `text`) === `boolean`) {
 							e.preventDefault();
 							const isImmediate = this.editability === `immediate`;
 							const rowKey = this._editing.rowKey;
@@ -15424,11 +15424,13 @@ let DataGridElement = class DataGridElement extends i {
 		if (!col) return rows;
 		const dir = this.sortState.direction === `asc` ? 1 : -1;
 		if (col.sortFn) return rows.sort((a, b) => dir * col.sortFn(a, b));
+		const dataType = col.dataType ?? `text`;
 		return rows.sort((a, b) => {
 			const av = a[col.key];
 			const bv = b[col.key];
 			if (av === bv) return 0;
-			if (typeof av === `number` && typeof bv === `number`) return dir * (av - bv);
+			if (dataType === `number`) return dir * (av - bv);
+			if (dataType === `boolean`) return dir * (Boolean(av) === Boolean(bv) ? 0 : av ? 1 : -1);
 			return dir * String(av).localeCompare(String(bv));
 		});
 	}
@@ -15805,7 +15807,7 @@ let DataGridElement = class DataGridElement extends i {
 	}
 	_isTextEditor(col) {
 		const e = col.editor;
-		return !e || e === `text` || e === `number`;
+		return !e || e === `auto`;
 	}
 	_isCellEditing(rowKey, colKey) {
 		if (this.editability === `immediate` && this._isEditable(this._sortedRows.find((r, i) => this.getRowKey(r, i) === rowKey) ?? {}, this.columns.find((c) => c.key === colKey))) return true;
@@ -16247,7 +16249,8 @@ let DataGridElement = class DataGridElement extends i {
 				if (this._isCellEditing(rowKey, col.key)) {
 					const immediate = this.editability === `immediate` || this._editingRow === rowKey;
 					const curVal = immediate ? val : this._editValue ?? val;
-					if (col.editor === `boolean` || col.editor === `boolean`) return b`<div class="cell" data-col=${col.key} style="width:${col.width ?? 150}px;justify-content:center;align-items:center"><input type="checkbox" .checked=${Boolean(curVal)} @change=${(e) => {
+					const effectiveDataType = col.dataType ?? `text`;
+					if (effectiveDataType === `boolean` && (col.editor === `auto` || col.editor === `select` || !col.editor)) return b`<div class="cell" data-col=${col.key} style="width:${col.width ?? 150}px;justify-content:center;align-items:center"><input type="checkbox" .checked=${Boolean(curVal)} @change=${(e) => {
 						const v = e.target.checked;
 						if (immediate) this._commitImmediate(rowKey, col.key, v);
 						else {
@@ -16305,7 +16308,9 @@ let DataGridElement = class DataGridElement extends i {
 						};
 						return b`<div class="cell" data-col=${col.key} style="width:${col.width ?? 150}px">${factory(ctx)}</div>`;
 					}
-					return b`<div class="cell" data-col=${col.key} style="width:${col.width ?? 150}px"><input .value=${String(curVal ?? ``)} @input=${(e) => this._editValue = e.target.value} @keydown=${(e) => {
+					const inputType = effectiveDataType === `number` ? `number` : `text`;
+					const inputValue = effectiveDataType === `number` ? String(curVal ?? ``) : String(curVal ?? ``);
+					return b`<div class="cell" data-col=${col.key} style="width:${col.width ?? 150}px"><input type=${inputType} .value=${inputValue} @input=${(e) => this._editValue = e.target.value} @keydown=${(e) => {
 						if (e.key === `Enter`) this._commitEdit();
 						if (e.key === `Escape`) {
 							this._editing = null;
@@ -16709,6 +16714,23 @@ 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`;
+function pointInRect(x, y, rect) {
+	return rect.width > 0 && rect.height > 0 && x >= rect.left && x < rect.right && y >= rect.top && y < rect.bottom;
+}
+/** Hit-test the painted content, not a layout wrapper that may fill the row. */
+function contentAtPoint(node, x, y) {
+	if (node instanceof Text) {
+		if (!node.textContent?.trim()) return false;
+		const range = document.createRange();
+		range.selectNodeContents(node);
+		return Array.from(range.getClientRects()).some((rect) => pointInRect(x, y, rect));
+	}
+	if (!(node instanceof Element)) return false;
+	if (node.hasAttribute(`data-drag-select-blank`)) return false;
+	if (node.hasAttribute(`data-drag-select-content`)) return pointInRect(x, y, node.getBoundingClientRect());
+	if (Array.from(node.childNodes).some((child) => contentAtPoint(child, x, y))) return true;
+	return node.childNodes.length === 0 && pointInRect(x, y, node.getBoundingClientRect());
+}
 /** 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;
@@ -16769,6 +16791,10 @@ let DetailListElement = class DetailListElement extends i {
 		});
 		this.#nativeDragging = false;
 		this.#postDragSuppressTimer = 0;
+		this.#blankItemPressPending = false;
+		this.#clearBlankItemPress = () => {
+			this.#blankItemPressPending = false;
+		};
 		this.#nativeDrag = new ListNativeDragController(this, {
 			source: `detail-list`,
 			isEnabled: () => this.itemsDraggable && this.selectionMode !== `none` && this._getVisibleItems().length > 0,
@@ -16800,7 +16826,8 @@ let DetailListElement = class DetailListElement extends i {
 				for (const el of this.querySelectorAll(`li`)) el.removeAttribute(`data-drag-origin`);
 				this.#startPostDragSuppressTimer();
 			},
-			syncLightDomDraggable: () => this._syncNativeDraggable()
+			syncLightDomDraggable: () => this._syncNativeDraggable(),
+			shouldStart: () => !this.#blankItemPressPending
 		});
 		this.#dragSelect = new ListDragSelectController(this, {
 			getSurface: () => this.renderRoot.querySelector(`.container`),
@@ -16820,6 +16847,10 @@ let DetailListElement = class DetailListElement extends i {
 			},
 			autoScroll: (dx, _dy) => {
 				if (this._listEl) this._listEl.scrollLeft += dx;
+			},
+			shouldStart: (event) => {
+				this.#blankItemPressPending = this.itemsDraggable && this.#isBlankItemPress(event);
+				return !this.itemsDraggable || this.#blankItemPressPending;
 			}
 		});
 		this.search = new ListSearchController(this, { adapter: createElementListSearchAdapter(this, {
@@ -16938,6 +16969,8 @@ let DetailListElement = class DetailListElement extends i {
 	#data;
 	#nativeDragging;
 	#postDragSuppressTimer;
+	#blankItemPressPending;
+	#clearBlankItemPress;
 	#nativeDrag;
 	#prepareNativeDrag(originKey) {
 		const visible = this._getVisibleItems();
@@ -16975,6 +17008,21 @@ let DetailListElement = class DetailListElement extends i {
 	/** Live drag-select preview rect (surface-relative); the covered items carry `data-marquee`. */
 	#marqueeRect;
 	#dragSelect;
+	/** A row's padding/empty area may start marquee; its actual content may drag out. */
+	#isBlankItemPress(event) {
+		const path = event.composedPath();
+		const item = this._findListItem(path);
+		if (!item) return false;
+		for (const node of path) {
+			if (node === item) break;
+			if (node instanceof Element) {
+				if (node.matches(`input, button, a, select, textarea, [contenteditable], .ixfx-list-checkbox, [role="checkbox"]`)) return false;
+				if (node.hasAttribute(`data-drag-select-blank`)) return true;
+				if (node.hasAttribute(`data-drag-select-content`)) return false;
+			}
+		}
+		return !Array.from(item.childNodes).some((node) => contentAtPoint(node, event.clientX, event.clientY));
+	}
 	/** Collect visible items whose surface-relative box intersects `rect`. */
 	#marqueeHitTest(rect) {
 		const surface = this.renderRoot.querySelector(`.container`);
@@ -17023,6 +17071,8 @@ let DetailListElement = class DetailListElement extends i {
 		this.addEventListener(`click`, this._onClick);
 		this.addEventListener(`dblclick`, this._onDblClick);
 		this.addEventListener(`wheel`, this._onWheel);
+		window.addEventListener(`pointerup`, this.#clearBlankItemPress);
+		window.addEventListener(`pointercancel`, this.#clearBlankItemPress);
 		this.#resizeObserver = new ResizeObserver(() => this.#scheduleGeometry());
 		this.#resizeObserver.observe(this);
 		this.#mutationObserver = new MutationObserver((records) => {
@@ -17067,6 +17117,9 @@ let DetailListElement = class DetailListElement extends i {
 		this.removeEventListener(`click`, this._onClick);
 		this.removeEventListener(`dblclick`, this._onDblClick);
 		this.removeEventListener(`wheel`, this._onWheel);
+		window.removeEventListener(`pointerup`, this.#clearBlankItemPress);
+		window.removeEventListener(`pointercancel`, this.#clearBlankItemPress);
+		this.#blankItemPressPending = false;
 		cancelAnimationFrame(this.#sortRaf);
 		cancelAnimationFrame(this.#viewportScrollRaf);
 		this.#viewportScrollRaf = 0;
@@ -25263,6 +25316,7 @@ let GridListElement = class GridListElement extends i {
         data-input-mode=${this.tickled.inputMode}
         @scroll=${this.#onScroll}
         @wheel=${this.#onWheel}
+        @click=${this.#onViewportClick}
       >
         <div class="spacer" style=${spacerStyle}>
           ${this.#source instanceof DataGridListSource ? this.#renderDataCells(win) : this.#renderElementCells(win)}
@@ -25495,6 +25549,22 @@ let GridListElement = class GridListElement extends i {
 		this.selection.handleClick(key, e);
 		this.#emitItemEvent(`list-item-click`, key);
 	}
+	/**
+	* A click that lands on the viewport without touching a cell — the empty
+	* space between/around items — clears the selection (Finder-style). The
+	* guard mirrors `#onCellClick`: a trailing click after a marquee or native
+	* drag is swallowed so it cannot undo the selection that drag just made.
+	* In `manual` interaction mode the consumer owns selection, so nothing is
+	* cleared. Cell clicks route through `#onCellClick` and are skipped here.
+	*/
+	#onViewportClick(e) {
+		const mode = this.interactionMode;
+		if (mode === `manual`) return;
+		if (this.selectionMode === `none` && mode !== `checked` && mode !== `sticky`) return;
+		if (this.#dragSelect.isDragging || this.#nativeDragging || this.#nativeDrag.isDragging || this.#postDragSuppressTimer !== 0) return;
+		for (const node of e.composedPath()) if (node instanceof Element && node.classList.contains(`cell`)) return;
+		this.selection.clear();
+	}
 	#startPostDragSuppressTimer() {
 		if (this.#postDragSuppressTimer) clearTimeout(this.#postDragSuppressTimer);
 		this.#postDragSuppressTimer = window.setTimeout(() => {
@@ -32471,7 +32541,7 @@ function clamp$2(value, min, max) {
 /**
 * Scale a value from one range to another
 */
-function scale$1(value, fromMin, fromMax, toMin, toMax) {
+function scale$2(value, fromMin, fromMax, toMin, toMax) {
 	return toMin + (value - fromMin) / (fromMax - fromMin) * (toMax - toMin);
 }
 //#endregion
@@ -32530,7 +32600,7 @@ let RadialInputElement = class RadialInputElement extends WheelNudgeMixin(i) {
 			event.preventDefault();
 			const effectiveSensitivity = this.clientHeight * 2 * (event.shiftKey ? 10 : 1);
 			const deltaValue = (this.#dragStartY - event.clientY) / effectiveSensitivity * (this.max - this.min);
-			const relativeValue = scale$1(this.#valueAtDragStart + deltaValue, this.min, this.max, 0, 1);
+			const relativeValue = scale$2(this.#valueAtDragStart + deltaValue, this.min, this.max, 0, 1);
 			this.#setValueFromRelative(clamp$2(relativeValue, 0, 1), true);
 		};
 		this.#onPointerUp = () => {
@@ -32614,7 +32684,7 @@ let RadialInputElement = class RadialInputElement extends WheelNudgeMixin(i) {
 		return this.#lanes.get(key);
 	}
 	#getRelativeValue() {
-		return scale$1(this.value, this.min, this.max, 0, 1);
+		return scale$2(this.value, this.min, this.max, 0, 1);
 	}
 	#getEffectiveMarkerStyle() {
 		if (this.valueMode === `unipolar` && this.markerStyle === `needle`) return `none`;
@@ -32628,7 +32698,7 @@ let RadialInputElement = class RadialInputElement extends WheelNudgeMixin(i) {
 		return value;
 	}
 	#setValueFromRelative(relativeValue, isUserInteraction = false) {
-		const newValue = scale$1(relativeValue, 0, 1, this.min, this.max);
+		const newValue = scale$2(relativeValue, 0, 1, this.min, this.max);
 		const clampedValue = this.#quantise(clamp$2(newValue, this.min, this.max));
 		if (clampedValue === this.value) return;
 		const previousValue = this.value;
@@ -33389,7 +33459,7 @@ function clamp$1(value, min, max) {
 /**
 * Linear-reinterpolate `value` from [fromMin, fromMax] to [toMin, toMax].
 */
-function scale(value, fromMin, fromMax, toMin, toMax) {
+function scale$1(value, fromMin, fromMax, toMin, toMax) {
 	if (fromMax === fromMin) return toMin;
 	return toMin + (value - fromMin) / (fromMax - fromMin) * (toMax - toMin);
 }
@@ -33397,7 +33467,7 @@ function scale(value, fromMin, fromMax, toMin, toMax) {
 * Convert an absolute value to a relative (0..1) position.
 */
 function valueToRelative(value, min, max) {
-	return scale(value, min, max, 0, 1);
+	return scale$1(value, min, max, 0, 1);
 }
 //#endregion
 //#region src/slider-input/slider-input.ts
@@ -33956,7 +34026,7 @@ let SliderInputElement = class SliderInputElement extends WheelNudgeMixin(i) {
 		return value;
 	}
 	#setSingleValueFromRelative(relativeValue, isUserInteraction = false) {
-		const newValue = scale(relativeValue, 0, 1, this.min, this.max);
+		const newValue = scale$1(relativeValue, 0, 1, this.min, this.max);
 		const clampedValue = this.#quantise(clamp$1(newValue, this.min, this.max));
 		if (clampedValue === this.valueA) return;
 		const previousValue = this.valueA;
@@ -33972,7 +34042,7 @@ let SliderInputElement = class SliderInputElement extends WheelNudgeMixin(i) {
 		this.#emitInputAndChange({ previousValue }, isUserInteraction);
 	}
 	#setDualOrTripleValueFromRelative(relativeValue, handle, isUserInteraction = false) {
-		const clamped = clamp$1(scale(relativeValue, 0, 1, this.min, this.max), this.min, this.max);
+		const clamped = clamp$1(scale$1(relativeValue, 0, 1, this.min, this.max), this.min, this.max);
 		const result = this.#resolvePoleChange(handle, clamped, this.#lastInteractedHandle);
 		if (!result) return;
 		const previous = { ...this.#poles() };
@@ -34512,7 +34582,7 @@ let SliderInputElement = class SliderInputElement extends WheelNudgeMixin(i) {
 		if (handle === `c`) {
 			const lo = this.#low();
 			const hi = this.#high();
-			const clamped = clamp$1(scale(clamp$1(targetRelative, 0, 1), 0, 1, this.min, this.max), lo, hi);
+			const clamped = clamp$1(scale$1(clamp$1(targetRelative, 0, 1), 0, 1, this.min, this.max), lo, hi);
 			const q = this.#quantise(clamped);
 			if (q === this.#poleC) return;
 			const previous = this.#poles();
@@ -38169,6 +38239,62 @@ let MulticolListElement = class MulticolListElement extends i {
 			composed: true
 		}));
 	}
+	async autoSizeColumns(options) {
+		return new Promise((resolve) => {
+			setTimeout(() => {
+				const minWidth = options?.minWidth ?? MIN_COLUMN_WIDTH;
+				const maxWidth = options?.maxWidth ?? MAX_COLUMN_WIDTH;
+				const measure = (text) => {
+					const span = document.createElement(`span`);
+					span.style.position = `absolute`;
+					span.style.visibility = `hidden`;
+					span.style.whiteSpace = `nowrap`;
+					span.style.font = getComputedStyle(this).font;
+					span.textContent = text;
+					document.body.appendChild(span);
+					const w = span.getBoundingClientRect().width;
+					document.body.removeChild(span);
+					return w;
+				};
+				for (const col of this._columns) {
+					const colEl = this.shadowRoot?.querySelector(`[data-col-id="${col.id}"]`);
+					if (!colEl) continue;
+					const headerEl = colEl.querySelector(`.column-header`);
+					const listerHost = colEl.querySelector(`.lister-host`);
+					let contentWidth = 0;
+					if (listerHost) {
+						const allLabel = listerHost.querySelector(`.all-label`);
+						if (allLabel) contentWidth = Math.max(contentWidth, measure(allLabel.textContent ?? ``));
+						const groupedLister = listerHost.querySelector(`ixfx-grouped-item-lister`);
+						if (groupedLister) {
+							const verticalLists = groupedLister.querySelectorAll(`ixfx-vertical-list`);
+							for (const vl of verticalLists) {
+								const itemEls = vl.querySelectorAll(`li`);
+								for (const li of itemEls) {
+									const labelEl = li.querySelector(`.item-label`);
+									const countEl = li.querySelector(`.count`);
+									const combinedText = (labelEl?.textContent ?? ``) + (countEl?.textContent ?? ``);
+									contentWidth = Math.max(contentWidth, measure(combinedText));
+								}
+							}
+						}
+					}
+					let headerWidth = 0;
+					if (headerEl) {
+						const labelBtn = headerEl.querySelector(`.column-label`);
+						if (labelBtn) headerWidth = measure(labelBtn.textContent ?? ``);
+					}
+					const neededWidth = Math.max(headerWidth, contentWidth + 24 + 16);
+					const clampedWidth = Math.max(minWidth, Math.min(maxWidth, Math.ceil(neededWidth)));
+					col.setWidth(clampedWidth);
+				}
+				this._updateColOffsets();
+				this._emitColumnsChange(`resize`);
+				this.requestUpdate();
+				resolve();
+			}, 0);
+		});
+	}
 };
 __decorate([property({ attribute: false })], MulticolListElement.prototype, "categories", void 0);
 __decorate([property({ attribute: false })], MulticolListElement.prototype, "dataProvider", void 0);
@@ -43277,6 +43403,289 @@ __decorate([property({
 __decorate([property({ type: String })], SelectHorizElement.prototype, "selectedValue", null);
 SelectHorizElement = __decorate([safeCustomElement(`ixfx-select-horiz`)], SelectHorizElement);
 //#endregion
+//#region src/util/clamp.ts
+function clampValue(v, min, max) {
+	return Math.min(Math.max(v, min), max);
+}
+//#endregion
+//#region src/util/geometry.ts
+function scale(v, fromMin, fromMax, toMin, toMax) {
+	if (fromMax === fromMin) return toMin;
+	return toMin + (v - fromMin) / (fromMax - fromMin) * (toMax - toMin);
+}
+//#endregion
+//#region src/shapefill-value/shapefill-value.ts
+let ShapefillValueElement = class ShapefillValueElement extends WheelNudgeMixin(i) {
+	constructor(..._args) {
+		super(..._args);
+		this.display = `circle`;
+		this.fillMode = `centre`;
+		this.value = 0;
+		this.min = 0;
+		this.max = 100;
+		this.step = void 0;
+		this.disabled = false;
+		this.#dragging = false;
+		this.#dragStartY = 0;
+		this.#valueAtDragStart = 0;
+		this.#onPointerDown = (event) => {
+			if (this.disabled) return;
+			event.preventDefault();
+			const svgEl = this.renderRoot.querySelector(`svg`);
+			svgEl?.focus();
+			this.#dragging = true;
+			this.#dragStartY = event.clientY;
+			this.#valueAtDragStart = this.value;
+			this.toggleAttribute(`dragging`, true);
+			if (svgEl) svgEl.setPointerCapture(event.pointerId);
+			window.addEventListener(`pointermove`, this.#onPointerMove);
+			window.addEventListener(`pointerup`, this.#onPointerUp);
+			window.addEventListener(`pointercancel`, this.#onPointerUp);
+		};
+		this.#onPointerMove = (event) => {
+			if (!this.#dragging) return;
+			event.preventDefault();
+			const effectiveSensitivity = this.clientHeight * 2 * (event.shiftKey ? 10 : 1);
+			const deltaValue = (this.#dragStartY - event.clientY) / effectiveSensitivity * (this.max - this.min);
+			const relativeValue = scale(this.#valueAtDragStart + deltaValue, this.min, this.max, 0, 1);
+			this.#setValueFromRelative(clampValue(relativeValue, 0, 1), true);
+		};
+		this.#onPointerUp = () => {
+			this.#dragging = false;
+			this.toggleAttribute(`dragging`, false);
+			const svgEl = this.renderRoot.querySelector(`svg`);
+			if (svgEl && `hasPointerCapture` in svgEl && typeof svgEl.hasPointerCapture === `function`) {
+				if (svgEl.hasPointerCapture(1)) svgEl.releasePointerCapture(1);
+			}
+			window.removeEventListener(`pointermove`, this.#onPointerMove);
+			window.removeEventListener(`pointerup`, this.#onPointerUp);
+			window.removeEventListener(`pointercancel`, this.#onPointerUp);
+		};
+		this.#onKeyDown = (event) => {
+			if (this.disabled) return;
+			const range = this.max - this.min;
+			const effectiveStep = resolveAxisStep(range, this.stops, this.step, event.shiftKey);
+			let handled = false;
+			switch (event.key) {
+				case `ArrowUp`:
+				case `ArrowRight`:
+					this.#stepByRelativeDelta(effectiveStep / range, true);
+					handled = true;
+					break;
+				case `ArrowDown`:
+				case `ArrowLeft`:
+					this.#stepByRelativeDelta(-effectiveStep / range, true);
+					handled = true;
+					break;
+				case `Home`:
+					this.#setValueFromRelative(0, true);
+					handled = true;
+					break;
+				case `End`:
+					this.#setValueFromRelative(1, true);
+					handled = true;
+			}
+			if (handled) event.preventDefault();
+		};
+	}
+	#dragging;
+	#dragStartY;
+	#valueAtDragStart;
+	#changeDebounceTimer;
+	#getRelativeValue() {
+		return scale(this.value, this.min, this.max, 0, 1);
+	}
+	#quantise(value) {
+		if (this.stops && this.stops > 1) {
+			const step = (this.max - this.min) / this.stops;
+			return Math.round((value - this.min) / step) * step + this.min;
+		}
+		return value;
+	}
+	#setValueFromRelative(relativeValue, isUserInteraction = false) {
+		const newValue = scale(relativeValue, 0, 1, this.min, this.max);
+		const clampedValue = this.#quantise(clampValue(newValue, this.min, this.max));
+		if (clampedValue === this.value) return;
+		const previousValue = this.value;
+		this.value = clampedValue;
+		if (this.hasAttribute(`data-tooltip-live`)) {
+			const percentage = Math.round(this.#getRelativeValue() * 100);
+			this.setAttribute(`data-tooltip`, `${percentage}%`);
+		}
+		if (isUserInteraction) {
+			this.dispatchEvent(new CustomEvent(`input`, {
+				detail: {
+					value: this.value,
+					valueRelative: this.#getRelativeValue()
+				},
+				bubbles: true,
+				composed: true
+			}));
+			this.#scheduleChangeEvent(previousValue);
+		} else this.#fireChangeEvent(previousValue);
+	}
+	#scheduleChangeEvent(previousValue) {
+		if (this.#changeDebounceTimer !== void 0) clearTimeout(this.#changeDebounceTimer);
+		this.#changeDebounceTimer = window.setTimeout(() => {
+			this.#fireChangeEvent(previousValue);
+			this.#changeDebounceTimer = void 0;
+		}, 150);
+	}
+	#fireChangeEvent(previousValue) {
+		this.dispatchEvent(new CustomEvent(`change`, {
+			detail: {
+				value: this.value,
+				valueRelative: this.#getRelativeValue(),
+				previousValue
+			},
+			bubbles: true,
+			composed: true
+		}));
+	}
+	#onPointerDown;
+	#onPointerMove;
+	#onPointerUp;
+	#onKeyDown;
+	/**
+	* Apply a relative-delta nudge to the current value, clamped to [min, max] and
+	* quantised. Shared between keyboard arrow keys and the wheel handler.
+	*/
+	#stepByRelativeDelta(relativeDelta, isUserInteraction) {
+		this.#setValueFromRelative(clampValue(this.#getRelativeValue() + relativeDelta, 0, 1), isUserInteraction);
+	}
+	_applyWheelDelta(direction, event) {
+		const range = this.max - this.min;
+		const effectiveStep = resolveAxisStep(range, this.stops, this.step, event.shiftKey);
+		this.#stepByRelativeDelta(direction * effectiveStep / range, true);
+	}
+	#renderCircle() {
+		const relativeValue = this.#getRelativeValue();
+		const outerRadius = 45;
+		const innerRadius = outerRadius * relativeValue;
+		const outerCx = 50;
+		const outerCy = 50;
+		let cx = outerCx;
+		if (this.fillMode === `left`) cx = 5 + outerRadius * relativeValue;
+		else if (this.fillMode === `right`) cx = 95 - outerRadius * relativeValue;
+		return w`
+      <circle class="fill" cx="${cx}" cy="${outerCy}" r="${innerRadius}" />
+      <circle class="outline" cx="${outerCx}" cy="${outerCy}" r="${outerRadius}" fill="none" />
+    `;
+	}
+	#renderRectangle() {
+		const relativeValue = this.#getRelativeValue();
+		const outerSize = 90;
+		const outerOffset = 5;
+		if (this.fillMode === `left` || this.fillMode === `right`) {
+			const innerWidth = outerSize * relativeValue;
+			const x = this.fillMode === `left` ? outerOffset : 95 - innerWidth;
+			return w`
+        <rect class="fill" x="${x}" y="${outerOffset}" width="${innerWidth}" height="${outerSize}" />
+        <rect class="outline" x="${outerOffset}" y="${outerOffset}" width="${outerSize}" height="${outerSize}" fill="none" />
+      `;
+		}
+		const innerSize = outerSize * relativeValue;
+		const innerOffset = (100 - innerSize) / 2;
+		return w`
+      <rect class="fill" x="${innerOffset}" y="${innerOffset}" width="${innerSize}" height="${innerSize}" />
+      <rect class="outline" x="${outerOffset}" y="${outerOffset}" width="${outerSize}" height="${outerSize}" fill="none" />
+    `;
+	}
+	render() {
+		const preserveAspectRatio = this.display === `rectangle` ? `none` : `xMidYMid meet`;
+		return b`
+      <svg
+        viewBox="0 0 100 100"
+        preserveAspectRatio="${preserveAspectRatio}"
+        tabindex="${this.disabled ? -1 : 0}"
+        @pointerdown="${this.#onPointerDown}"
+        @keydown="${this.#onKeyDown}"
+        style="cursor: ${this.#dragging ? `ns-resize` : `grab`}"
+      >
+        ${this.display === `rectangle` ? this.#renderRectangle() : this.#renderCircle()}
+      </svg>
+    `;
+	}
+	updated(changed) {
+		super.updated(changed);
+		this.style.setProperty(`--shapefill-value-relative`, this.#getRelativeValue().toString());
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		if (this.#changeDebounceTimer !== void 0) clearTimeout(this.#changeDebounceTimer);
+		this.#onPointerUp();
+	}
+	static {
+		this.styles = [
+			themeFallbacks,
+			prominenceStyles,
+			i$3`
+    :host {
+      display: inline-block;
+      width: 2em;
+      height: 2em;
+      touch-action: none;
+      user-select: none;
+
+      /* Dynamic value - set by JS */
+      --shapefill-value-relative: 0;
+
+      /* Public styling variables — consumer customisable */
+      --shapefill-value-outline-color: var(--surface-4);
+      --shapefill-value-outline-width: 2;
+      --shapefill-value-fill-color: var(--accent);
+    }
+
+    :host([disabled]) {
+      cursor: not-allowed;
+    }
+
+    svg {
+      width: 100%;
+      height: 100%;
+      outline: none;
+      display: block;
+    }
+
+    svg:active {
+      cursor: grabbing;
+    }
+
+    svg:focus-visible {
+      outline: var(--shapefill-value-focus-outline, 2px solid var(--accent));
+      outline-offset: var(--shapefill-value-focus-outline-offset, 2px);
+    }
+
+    .outline {
+      stroke: var(--shapefill-value-outline-color, var(--surface-4));
+      stroke-width: var(--shapefill-value-outline-width, 2);
+      vector-effect: non-scaling-stroke;
+    }
+
+    .fill {
+      fill: var(--shapefill-value-fill-color, var(--accent));
+      transition: var(--shapefill-value-fill-transition, none);
+    }
+  `
+		];
+	}
+};
+__decorate([property({ type: String })], ShapefillValueElement.prototype, "display", void 0);
+__decorate([property({
+	type: String,
+	attribute: `fill-mode`
+})], ShapefillValueElement.prototype, "fillMode", void 0);
+__decorate([property({ type: Number })], ShapefillValueElement.prototype, "value", void 0);
+__decorate([property({ type: Number })], ShapefillValueElement.prototype, "min", void 0);
+__decorate([property({ type: Number })], ShapefillValueElement.prototype, "max", void 0);
+__decorate([property({ type: Number })], ShapefillValueElement.prototype, "step", void 0);
+__decorate([property({ type: Number })], ShapefillValueElement.prototype, "stops", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], ShapefillValueElement.prototype, "disabled", void 0);
+ShapefillValueElement = __decorate([safeCustomElement(`ixfx-shapefill-value`)], ShapefillValueElement);
+//#endregion
 //#region src/sliding-number/sliding-number.ts
 const REEL_DIGITS = Array.from({ length: 30 }, (_, index) => index % 10);
 const SECTION_RANK = {
@@ -50254,6 +50663,6 @@ function init() {
 	console.log(`Init`);
 }
 //#endregion
-export { AcTextElement, AcTokenElement, BottomDrawerElement, ButtonElement, Checkbox, ColourPicker, ColourPickerPopup, CrumbNavigationElement, CrumbPathController, CrumbPathElement, DataController, DataDisplayComponent, DataGridElement, DataTableElement, DetailListElement, DockHostElement, DockPanelElement, EditableLabel, EditableNumber, FormElement, FormGroupElement, FormPartElement, GridListElement, GroupedItemListerElement, ICON_CARET_RIGHT, ICON_CHECK, ICON_CHEVRON_DOWN, ICON_CLOSE, IcicleTreeListElement, IncrSearchTreeController as IncrSearchMillerController, IncrSearchTreeController, IxfxHexEditorElement, IxfxIconElement, IxfxTimelineElement, KeyedElementIndex, LIST_ITEM_MOTION_MS, LIST_SEARCH_COMMAND_IDS, LIST_SEARCH_MODES, LabelledRadialInput, LabelledRangeInput, LabelledSliderInput, LedElement, ListDragSelectController, ListNativeDragController, ListSearchController, ListSelectionController, menu_exports as Menu, MillerBaseElement, MillerListElement, MillerTreeController, MulticolListElement, NarrowedTextElement, NotificationManager, NotificationPillElement, PanTextElement, PanelElement, PanelGroupElement, PlotDataSeries, PlotHistogram, PlotMultiAxis, PlotSingleAxis, PlotXyAxis, PolarPad, RadialInputElement, RadioGroup, RangeElement, RangeInput, RangeMultiElement, RatingElement, SelectHorizElement, SliderInputElement, SlidingNumberElement, SnackbarElement, SnapContainer, SplitButton, SplitLayoutElement, SplitPanelElement, SwipeElement, TabController, TabListElement, TabListItemElement, TabPanelElement, TabPanelsElement, TextShimmerElement, TickledController, TimelineController, TimelineTrackTabElement, TitlebarElement, ToolbarElement, ToolbarGroupElement, TooltipElement, TransitoryLabelElement, TreeBaseElement, TreeController, TreeDataModel, TreeDropController, TreeKeyboardNavController, TreeListElement, TreemapListElement, TwoSplitLayoutElement, VerticalListElement, XyPad, addPanelToStack, animateListItemIn, animateListItemOut, applyAgeModification, applyHighlights, applySnapshot, applyTreeDrop, attachTimelineInteractions, bottomDrawerCommandId, buildHighlightTargets, buildModel, captionForEntry, clearHighlights, collectContainerNames, collectDataResult, collectPanelIds, collectStackPaths, computeColour, computeIcicleLayout, computeLeafGeoms, computeTreemapLayout, createAcCompletionProvider, createDataListSearchAdapter, createDefaultListDragPreview, createElementIncrSearch, createElementListSearchAdapter, createEmptyLayout, createEmptyStack, createFuzzySearch, createIncrSearch, createPillRenderer, createSplit, createStack, createTreeListAdapter, createTreeListSearchAdapter, createVerticalListAdapter, distribute, dropTargetFor, extractStack, findIcicleNode, findIciclePath, findNode, findParentOf, findStackOf, findStackPathByName, findTreemapNode, findTreemapPath, getActiveDragPanelId, getIcon, getIconEntry, getIconFont, getLeafNeighbours, hasIcon, iconBus, init, insertBeside, isDragging, isMultiMode, isSplit, isStack, keyForElement, listItemFadeKeyframes, listSearchStyles, monitorIndeterminate, moveLeafNodeToEdge, moveLeafStep, normalise, normaliseValue, normalize, panelGapIndex, parseColourScaleAttr, parseLayout, pointerOverAnyHost, prefersReducedMotion, pruneDraggedDescendants, readBaseColour, registerFontIcon, registerIcon, registerListSearchCommands, removePanelFromStack, resolveCssVars, resolveGrid, resolveLeafPath, resolveTracks, serializeLayout, setActive, setIconFont, startListItemOutAnimation, svgToDataUri, swapLeaves, tickledItemStyles, tickledStyles, timelineStyles, toSnapshot, toolbarGapIndex, walk, wrapRoot };
+export { AcTextElement, AcTokenElement, BottomDrawerElement, ButtonElement, Checkbox, ColourPicker, ColourPickerPopup, CrumbNavigationElement, CrumbPathController, CrumbPathElement, DataController, DataDisplayComponent, DataGridElement, DataTableElement, DetailListElement, DockHostElement, DockPanelElement, EditableLabel, EditableNumber, FormElement, FormGroupElement, FormPartElement, GridListElement, GroupedItemListerElement, ICON_CARET_RIGHT, ICON_CHECK, ICON_CHEVRON_DOWN, ICON_CLOSE, IcicleTreeListElement, IncrSearchTreeController as IncrSearchMillerController, IncrSearchTreeController, IxfxHexEditorElement, IxfxIconElement, IxfxTimelineElement, KeyedElementIndex, LIST_ITEM_MOTION_MS, LIST_SEARCH_COMMAND_IDS, LIST_SEARCH_MODES, LabelledRadialInput, LabelledRangeInput, LabelledSliderInput, LedElement, ListDragSelectController, ListNativeDragController, ListSearchController, ListSelectionController, menu_exports as Menu, MillerBaseElement, MillerListElement, MillerTreeController, MulticolListElement, NarrowedTextElement, NotificationManager, NotificationPillElement, PanTextElement, PanelElement, PanelGroupElement, PlotDataSeries, PlotHistogram, PlotMultiAxis, PlotSingleAxis, PlotXyAxis, PolarPad, RadialInputElement, RadioGroup, RangeElement, RangeInput, RangeMultiElement, RatingElement, SelectHorizElement, ShapefillValueElement, SliderInputElement, SlidingNumberElement, SnackbarElement, SnapContainer, SplitButton, SplitLayoutElement, SplitPanelElement, SwipeElement, TabController, TabListElement, TabListItemElement, TabPanelElement, TabPanelsElement, TextShimmerElement, TickledController, TimelineController, TimelineTrackTabElement, TitlebarElement, ToolbarElement, ToolbarGroupElement, TooltipElement, TransitoryLabelElement, TreeBaseElement, TreeController, TreeDataModel, TreeDropController, TreeKeyboardNavController, TreeListElement, TreemapListElement, TwoSplitLayoutElement, VerticalListElement, XyPad, addPanelToStack, animateListItemIn, animateListItemOut, applyAgeModification, applyHighlights, applySnapshot, applyTreeDrop, attachTimelineInteractions, bottomDrawerCommandId, buildHighlightTargets, buildModel, captionForEntry, clearHighlights, collectContainerNames, collectDataResult, collectPanelIds, collectStackPaths, computeColour, computeIcicleLayout, computeLeafGeoms, computeTreemapLayout, createAcCompletionProvider, createDataListSearchAdapter, createDefaultListDragPreview, createElementIncrSearch, createElementListSearchAdapter, createEmptyLayout, createEmptyStack, createFuzzySearch, createIncrSearch, createPillRenderer, createSplit, createStack, createTreeListAdapter, createTreeListSearchAdapter, createVerticalListAdapter, distribute, dropTargetFor, extractStack, findIcicleNode, findIciclePath, findNode, findParentOf, findStackOf, findStackPathByName, findTreemapNode, findTreemapPath, getActiveDragPanelId, getIcon, getIconEntry, getIconFont, getLeafNeighbours, hasIcon, iconBus, init, insertBeside, isDragging, isMultiMode, isSplit, isStack, keyForElement, listItemFadeKeyframes, listSearchStyles, monitorIndeterminate, moveLeafNodeToEdge, moveLeafStep, normalise, normaliseValue, normalize, panelGapIndex, parseColourScaleAttr, parseLayout, pointerOverAnyHost, prefersReducedMotion, pruneDraggedDescendants, readBaseColour, registerFontIcon, registerIcon, registerListSearchCommands, removePanelFromStack, resolveCssVars, resolveGrid, resolveLeafPath, resolveTracks, serializeLayout, setActive, setIconFont, startListItemOutAnimation, svgToDataUri, swapLeaves, tickledItemStyles, tickledStyles, timelineStyles, toSnapshot, toolbarGapIndex, walk, wrapRoot };
 
 //# sourceMappingURL=index.js.map