@ixfx/components 0.4.3 → 0.4.4

package/dist/slider-input-DFpG23bS.js

@@ -0,0 +1,1592 @@
+import { t as themeFallbacks } from "./fallbacks-pNMOMx38.js";
+import { n as safeCustomElement, t as __decorate } from "./decorate-VRK8rslU.js";
+import { t as prominenceStyles } from "./prominence-DlFShic3.js";
+import { t as resolveAxisStep } from "./keyboard-B5xD7Fz-.js";
+import { t as WheelNudgeMixin } from "./wheel-nudge-BlSCe_hD.js";
+import { LitElement, css, html, svg } from "lit";
+import { property } from "lit/decorators.js";
+/**
+* Get the track bounds in viewBox units for a given orientation.
+*/
+function getTrackBounds(orientation) {
+	if (orientation === `horizontal`) return {
+		trackStart: 5,
+		trackEnd: 95,
+		centre: 50,
+		crossCentre: 12
+	};
+	return {
+		trackStart: 5,
+		trackEnd: 95,
+		centre: 50,
+		crossCentre: 12
+	};
+}
+/**
+* Map a relative value (0..1) to a leader point on the track for the given
+* orientation and single-style.
+*
+* Range: grows from trackStart to trackEnd.
+* Bipolar: track centre is 0.5; values spread from centre outward.
+* Unipolar: spread symmetrically around centre.
+*
+* For vertical orientation, higher values are toward the top of the track,
+* matching the spec ("higher values → top of track").
+*/
+function valueToPosition(relativeValue, singleStyle, trackBounds, orientation) {
+	const span = trackBounds.trackEnd - trackBounds.trackStart;
+	const centre = trackBounds.centre;
+	const crossCentre = trackBounds.crossCentre;
+	let pos;
+	if (singleStyle === `range`) pos = trackBounds.trackStart + relativeValue * span;
+	else if (singleStyle === `bipolar`) {
+		if (relativeValue <= .5) {
+			const t = relativeValue / .5;
+			pos = trackBounds.trackStart + t * (centre - trackBounds.trackStart);
+		} else pos = centre + (relativeValue - .5) / .5 * (trackBounds.trackEnd - centre);
+	} else pos = centre + relativeValue * span / 2;
+	if (orientation === `horizontal`) return {
+		x: pos,
+		y: crossCentre
+	};
+	return {
+		x: crossCentre,
+		y: 100 - pos
+	};
+}
+/**
+* Get the segment endpoints for a 'value' lane. The lane is drawn from
+* the lane's lower relative value to its upper relative value.
+*
+* For 'range' and 'bipolar' styles, the endpoints are obtained by mapping
+* each value through `valueToPosition`. For 'unipolar', the bar is centred
+* on the track centre with length proportional to valueMax (valueMin is
+* ignored), matching the spec: "spreads symmetrically around centre".
+*/
+function getValueSegment(valueMin, valueMax, singleStyle, trackBounds, orientation) {
+	if (singleStyle === `unipolar`) {
+		const span = trackBounds.trackEnd - trackBounds.trackStart;
+		const centre = trackBounds.centre;
+		const crossCentre = trackBounds.crossCentre;
+		const halfLen = valueMax * span / 2;
+		if (orientation === `horizontal`) return {
+			start: {
+				x: centre - halfLen,
+				y: crossCentre
+			},
+			end: {
+				x: centre + halfLen,
+				y: crossCentre
+			}
+		};
+		return {
+			start: {
+				x: crossCentre,
+				y: centre - halfLen
+			},
+			end: {
+				x: crossCentre,
+				y: centre + halfLen
+			}
+		};
+	}
+	return {
+		start: valueToPosition(valueMin, singleStyle, trackBounds, orientation),
+		end: valueToPosition(valueMax, singleStyle, trackBounds, orientation)
+	};
+}
+/**
+* Get the segment endpoints for an 'anchored' lane. The lane is centered
+* on the current value, with length controlled by laneValue (0..1).
+*/
+function getAnchoredSegment(relativeValue, laneValue, singleStyle, trackBounds, orientation) {
+	const halfLen = laneValue * (trackBounds.trackEnd - trackBounds.trackStart) / 2;
+	const centre = singleStyle === `unipolar` ? orientation === `horizontal` ? {
+		x: trackBounds.centre,
+		y: trackBounds.crossCentre
+	} : {
+		x: trackBounds.crossCentre,
+		y: trackBounds.centre
+	} : valueToPosition(relativeValue, singleStyle, trackBounds, orientation);
+	let startPos;
+	let endPos;
+	if (orientation === `horizontal`) {
+		startPos = centre.x - halfLen;
+		endPos = centre.x + halfLen;
+	} else {
+		startPos = centre.y - halfLen;
+		endPos = centre.y + halfLen;
+	}
+	return {
+		start: orientation === `horizontal` ? {
+			x: startPos,
+			y: centre.y
+		} : {
+			x: centre.x,
+			y: startPos
+		},
+		end: orientation === `horizontal` ? {
+			x: endPos,
+			y: centre.y
+		} : {
+			x: centre.x,
+			y: endPos
+		}
+	};
+}
+/**
+* Generate an SVG path string for a straight line. Returns '' for a
+* zero-length segment (start ≈ end), mirroring the radial-input arc
+* helper's edge case.
+*/
+function generateLinePath(start, end) {
+	if (Math.abs(start.x - end.x) < .001 && Math.abs(start.y - end.y) < .001) return ``;
+	return `M ${start.x} ${start.y} L ${end.x} ${end.y}`;
+}
+/**
+* Clamp `value` to the [min, max] range.
+*/
+function clamp(value, min, max) {
+	return Math.min(Math.max(value, min), max);
+}
+/**
+* Linear-reinterpolate `value` from [fromMin, fromMax] to [toMin, toMax].
+*/
+function scale(value, fromMin, fromMax, toMin, toMax) {
+	if (fromMax === fromMin) return toMin;
+	return toMin + (value - fromMin) / (fromMax - fromMin) * (toMax - toMin);
+}
+/**
+* Convert an absolute value to a relative (0..1) position.
+*/
+function valueToRelative(value, min, max) {
+	return scale(value, min, max, 0, 1);
+}
+/**
+* Convert a pointer client position (clientX or clientY depending on
+* orientation) to a relative value (0..1) given the host element's
+* bounding rect on the long axis.
+*/
+function clientPosToRelative(clientPos, hostStart, hostSize) {
+	if (hostSize <= 0) return 0;
+	return clamp((clientPos - hostStart) / hostSize, 0, 1);
+}
+//#endregion
+//#region src/slider-input/slider-input.ts
+const HANDLE_HIT_RADIUS = .06;
+const DEFAULT_VALUE_MIN_FRACTION = .01;
+const CHANGE_DEBOUNCE_MS = 150;
+let SliderInputElement = class SliderInputElement extends WheelNudgeMixin(LitElement) {
+	#lanes;
+	/** Raw pole values: independent of which is "low" or "high". */
+	#poleA;
+	#poleB;
+	#poleC;
+	#dragging;
+	/** Pointer ID being tracked (fixes radial-input's hardcoded pointerId). */
+	#activePointerId;
+	#dragStartClientPos;
+	#poleValueAtDragStart;
+	/** Which handle is currently being dragged, or 'length' for segment drag. */
+	#dragHandle;
+	/** Snapshotted poles at length-drag start. */
+	#lengthDragStart;
+	/** Track the low/high identity at length-drag start (so we know which raw pole gets which end). */
+	#lengthDragLowKey;
+	#lengthDragHighKey;
+	#lengthDragLength;
+	#lengthDragStartLow;
+	/**
+	* Where the pointer was when the length drag began (in host-relative
+	* 0..1 terms). Preserves the grab offset so dragging the bar doesn't snap
+	* its low edge under the cursor.
+	*/
+	#lengthDragStartRelative;
+	/** The handle that last received direct interaction (pointerdown/keydown/wheel/focus). */
+	#lastInteractedHandle;
+	/**
+	* Last pointer client position seen by #onPointerMoveCursor, used to
+	*  recompute the cursor after a drag ends (without waiting for a fresh
+	*  pointermove).
+	*/
+	#lastPointerClient;
+	#changeDebounceTimer;
+	#isUserInteraction;
+	#hasInitialisedValueC;
+	/**
+	* Holds `<linearGradient>`/`<radialGradient>` elements authored as light-DOM
+	* children of this element, once relocated into the shadow root (see
+	* `#syncGradientDefs`). Lets consumers reference `url(#id)` paint servers
+	* from `--lane-*-color` / `--track-color` etc. — CSS custom properties
+	* pierce the shadow boundary, but `url(#id)` paint-server *resolution* does
+	* not, so the gradient definitions themselves must physically live inside
+	* this element's shadow root to be resolvable by lanes/track painted there.
+	*/
+	#userGradientDefs;
+	#gradientObserver;
+	constructor() {
+		super();
+		this.valueA = 50;
+		this.valueB = 0;
+		this.valueC = void 0;
+		this.min = 0;
+		this.max = 100;
+		this.step = void 0;
+		this.stops = void 0;
+		this.valueMode = `single`;
+		this.singleStyle = `range`;
+		this.orientation = `horizontal`;
+		this.markerStyle = `needle`;
+		this.markerStyleC = void 0;
+		this.crossover = `allow`;
+		this.valueDrag = `none`;
+		this.valueCFollow = `none`;
+		this.valueMin = 1;
+		this.disabled = false;
+		this.#lanes = /* @__PURE__ */ new Map();
+		this.#poleA = 50;
+		this.#poleB = 0;
+		this.#poleC = void 0;
+		this.#dragging = false;
+		this.#activePointerId = void 0;
+		this.#dragStartClientPos = 0;
+		this.#poleValueAtDragStart = 0;
+		this.#dragHandle = void 0;
+		this.#lengthDragStart = void 0;
+		this.#lengthDragLowKey = void 0;
+		this.#lengthDragHighKey = void 0;
+		this.#lengthDragLength = 0;
+		this.#lengthDragStartLow = 0;
+		this.#lengthDragStartRelative = 0;
+		this.#lastInteractedHandle = `a`;
+		this.#lastPointerClient = {
+			x: 0,
+			y: 0
+		};
+		this.#changeDebounceTimer = void 0;
+		this.#isUserInteraction = false;
+		this.#hasInitialisedValueC = false;
+		this.#onHostKeyDown = (event) => {
+			this.#onKeyDown(event);
+		};
+		this.#syncGradientDefs = () => {
+			const found = this.querySelectorAll(`linearGradient, radialGradient`);
+			if (found.length === 0) return;
+			const defs = this.#ensureUserGradientDefs();
+			for (const node of found) defs.append(node);
+		};
+		this.#onPointerDown = (event) => {
+			if (this.disabled) return;
+			const svg = this.renderRoot.querySelector(`svg.slider-svg`);
+			if (!svg) return;
+			event.preventDefault();
+			this.focus();
+			svg.style.cursor = `grabbing`;
+			const rect = this.getBoundingClientRect();
+			const isVertical = this.orientation === `vertical`;
+			const clientPos = isVertical ? event.clientY : event.clientX;
+			const rawRelative = clientPosToRelative(clientPos, isVertical ? rect.top : rect.left, isVertical ? rect.height : rect.width);
+			let relativeValue = isVertical ? 1 - rawRelative : rawRelative;
+			if (this.valueMode === `single` && this.singleStyle === `unipolar`) relativeValue = Math.abs(2 * relativeValue - 1);
+			if (this.valueMode === `single`) {
+				this.#lastInteractedHandle = `a`;
+				this.#dragHandle = `a`;
+				this.#setSingleValueFromRelative(relativeValue, true);
+				this.#dragging = true;
+				this.toggleAttribute(`dragging`, true);
+				this.#activePointerId = event.pointerId;
+				try {
+					svg.setPointerCapture(event.pointerId);
+				} catch {}
+				this.#dragStartClientPos = clientPos;
+				this.#poleValueAtDragStart = this.valueA;
+				window.addEventListener(`pointermove`, this.#onPointerMove);
+				window.addEventListener(`pointerup`, this.#onPointerUp);
+				window.addEventListener(`pointercancel`, this.#onPointerUp);
+				return;
+			}
+			const aRel = this.#getRelativeValueA();
+			const bRel = this.#getRelativeValueB();
+			const lo = Math.min(aRel, bRel);
+			const hi = Math.max(aRel, bRel);
+			const aHandle = this.#poleA <= this.#poleB ? `a` : `b`;
+			const bHandle = this.#poleA > this.#poleB ? `a` : `b`;
+			const posA = aRel;
+			const posB = bRel;
+			const isTriple = this.valueMode === `triple`;
+			const posC = isTriple ? this.#getRelativeValueC() : 0;
+			const nearA = Math.abs(relativeValue - posA) < HANDLE_HIT_RADIUS;
+			const nearB = Math.abs(relativeValue - posB) < HANDLE_HIT_RADIUS;
+			const nearC = isTriple && Math.abs(relativeValue - posC) < HANDLE_HIT_RADIUS;
+			let chosenHandle;
+			const pickNonLast = (candidates) => {
+				return candidates.find((h) => h !== this.#lastInteractedHandle) ?? candidates[0];
+			};
+			if (nearA && nearB && nearC) chosenHandle = pickNonLast([
+				aHandle,
+				bHandle,
+				`c`
+			]);
+			else if (nearA && nearB) chosenHandle = pickNonLast([aHandle, bHandle]);
+			else if (nearA && nearC) chosenHandle = pickNonLast([aHandle, `c`]);
+			else if (nearB && nearC) chosenHandle = pickNonLast([bHandle, `c`]);
+			else if (nearA) chosenHandle = aHandle;
+			else if (nearB) chosenHandle = bHandle;
+			else if (nearC) chosenHandle = `c`;
+			else if (this.valueDrag !== `none` && relativeValue > lo && relativeValue < hi) chosenHandle = `length`;
+			else if (this.valueDrag === `none` && relativeValue <= lo) chosenHandle = this.#lowKey();
+			else if (this.valueDrag === `none` && relativeValue >= hi) chosenHandle = this.#highKey();
+			else chosenHandle = void 0;
+			this.#dragging = true;
+			this.toggleAttribute(`dragging`, true);
+			this.#activePointerId = event.pointerId;
+			try {
+				svg.setPointerCapture(event.pointerId);
+			} catch {}
+			this.#dragStartClientPos = clientPos;
+			if (chosenHandle === void 0) {
+				window.addEventListener(`pointermove`, this.#onPointerMove);
+				window.addEventListener(`pointerup`, this.#onPointerUp);
+				window.addEventListener(`pointercancel`, this.#onPointerUp);
+				return;
+			}
+			this.#dragHandle = chosenHandle;
+			if (chosenHandle === `length`) {
+				this.#lengthDragStart = {
+					poleA: this.#poleA,
+					poleB: this.#poleB
+				};
+				this.#lengthDragLowKey = this.#lowKey();
+				this.#lengthDragHighKey = this.#highKey();
+				this.#lengthDragLength = this.#poleB - this.#poleA < 0 ? this.#poleA - this.#poleB : this.#poleB - this.#poleA;
+				this.#lengthDragStartLow = Math.min(this.#poleA, this.#poleB);
+				this.#lengthDragStartRelative = relativeValue;
+			} else {
+				this.#lastInteractedHandle = chosenHandle;
+				this.#poleValueAtDragStart = chosenHandle === `a` ? this.#poleA : this.#poleB;
+				this.#setDualOrTripleValueFromRelative(relativeValue, chosenHandle, true);
+			}
+			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 rect = this.getBoundingClientRect();
+			const isVertical = this.orientation === `vertical`;
+			const rawRelative = clientPosToRelative(isVertical ? event.clientY : event.clientX, isVertical ? rect.top : rect.left, isVertical ? rect.height : rect.width);
+			let relativeValue = isVertical ? 1 - rawRelative : rawRelative;
+			if (this.valueMode === `single` && this.singleStyle === `unipolar`) relativeValue = Math.abs(2 * relativeValue - 1);
+			if (this.valueMode === `single`) {
+				this.#setSingleValueFromRelative(relativeValue, true);
+				return;
+			}
+			if (this.#dragHandle === `length`) this.#applyLengthDragFromRelative(relativeValue);
+			else if (this.#dragHandle) this.#setDualOrTripleValueFromRelative(relativeValue, this.#dragHandle, true);
+		};
+		this.#onPointerUp = () => {
+			this.#dragging = false;
+			this.#dragHandle = void 0;
+			this.#lengthDragStart = void 0;
+			this.#lengthDragLowKey = void 0;
+			this.#lengthDragHighKey = void 0;
+			this.toggleAttribute(`dragging`, false);
+			this.#onPointerMoveCursor(new PointerEvent(`pointermove`, {
+				clientX: this.#lastPointerClient.x,
+				clientY: this.#lastPointerClient.y
+			}));
+			const svg = this.renderRoot.querySelector(`svg.slider-svg`);
+			if (svg && this.#activePointerId !== void 0 && `hasPointerCapture` in svg && typeof svg.hasPointerCapture === `function`) {
+				if (svg.hasPointerCapture.call(svg, this.#activePointerId)) try {
+					svg.releasePointerCapture(this.#activePointerId);
+				} catch {}
+			}
+			this.#activePointerId = void 0;
+			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 handle = `a`;
+			const target = event.target;
+			if (target && typeof target.closest === `function`) {
+				const handleEl = target.closest(`[data-handle]`);
+				if (handleEl) {
+					const h = handleEl.dataset?.handle;
+					if (h === `a` || h === `b` || h === `c`) handle = h;
+				}
+			}
+			if (this.valueMode === `single`) handle = `a`;
+			this.#lastInteractedHandle = handle;
+			let handled = false;
+			switch (event.key) {
+				case `ArrowUp`:
+				case `ArrowRight`:
+					if (this.valueMode === `single`) {
+						const r = this.#getRelativeValueA() + effectiveStep / range;
+						this.#setSingleValueFromRelative(clamp(r, 0, 1), true);
+					} else {
+						const r = valueToRelative(handle === `a` ? this.#poleA : handle === `b` ? this.#poleB : this.#poleC ?? this.#low(), this.min, this.max) + effectiveStep / range;
+						this.#stepHandleByRelativeDelta(handle, r);
+					}
+					handled = true;
+					break;
+				case `ArrowDown`:
+				case `ArrowLeft`:
+					if (this.valueMode === `single`) {
+						const r = this.#getRelativeValueA() - effectiveStep / range;
+						this.#setSingleValueFromRelative(clamp(r, 0, 1), true);
+					} else {
+						const r = valueToRelative(handle === `a` ? this.#poleA : handle === `b` ? this.#poleB : this.#poleC ?? this.#low(), this.min, this.max) - effectiveStep / range;
+						this.#stepHandleByRelativeDelta(handle, r);
+					}
+					handled = true;
+					break;
+				case `Home`:
+					if (this.valueMode === `single`) this.#setSingleValueFromRelative(0, true);
+					else this.#stepHandleByRelativeDelta(handle, 0);
+					handled = true;
+					break;
+				case `End`:
+					if (this.valueMode === `single`) this.#setSingleValueFromRelative(1, true);
+					else this.#stepHandleByRelativeDelta(handle, 1);
+					handled = true;
+			}
+			if (handled) event.preventDefault();
+		};
+		this.#onFocusIn = (event) => {
+			const target = event.target;
+			if (target && typeof target.closest === `function`) {
+				const handleEl = target.closest(`[data-handle]`);
+				if (handleEl) {
+					const h = handleEl.dataset?.handle;
+					if (h === `a` || h === `b` || h === `c`) this.#lastInteractedHandle = h;
+				}
+			}
+		};
+		this.#onPointerMoveCursor = (event) => {
+			const svg = this.renderRoot.querySelector(`svg.slider-svg`);
+			if (!svg) return;
+			this.#lastPointerClient = {
+				x: event.clientX,
+				y: event.clientY
+			};
+			const rect = this.getBoundingClientRect();
+			const isVertical = this.orientation === `vertical`;
+			const rawRelative = clientPosToRelative(isVertical ? event.clientY : event.clientX, isVertical ? rect.top : rect.left, isVertical ? rect.height : rect.width);
+			const relativeValue = isVertical ? 1 - rawRelative : rawRelative;
+			const cursor = this.#cursorAtRelative(relativeValue);
+			if (svg.style.cursor !== cursor) svg.style.cursor = cursor;
+		};
+		this.#onPointerLeaveCursor = () => {
+			const svg = this.renderRoot.querySelector(`svg.slider-svg`);
+			if (!svg) return;
+			const cursor = this.disabled ? `not-allowed` : `default`;
+			if (svg.style.cursor !== cursor) svg.style.cursor = cursor;
+		};
+		if (!this.disabled) this.setAttribute(`tabindex`, `0`);
+		this.#lanes.set(`track`, {
+			key: `track`,
+			value: 1,
+			type: `fixed`,
+			offset: 0,
+			width: .16
+		});
+		this.#lanes.set(`value`, {
+			key: `value`,
+			valueMin: 0,
+			valueMax: 0,
+			type: `value`,
+			offset: 0,
+			width: .24
+		});
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		this.setAttribute(`tabindex`, this.disabled ? `-1` : `0`);
+		this.addEventListener(`keydown`, this.#onHostKeyDown);
+		this.#syncGradientDefs();
+		this.#gradientObserver = new MutationObserver(this.#syncGradientDefs);
+		this.#gradientObserver.observe(this, {
+			childList: true,
+			subtree: true
+		});
+	}
+	#onHostKeyDown;
+	/**
+	* Lazily creates the inert `<svg><defs>` carrier that user-authored
+	* gradients get moved into. Kept entirely outside Lit's managed template —
+	* it's a plain sibling of the interactive `<svg class="slider-svg">` inside
+	* the shadow root, so `url(#id)` references from lane/track paint
+	* properties resolve against it regardless of render() re-runs.
+	*/
+	#ensureUserGradientDefs() {
+		if (this.#userGradientDefs) return this.#userGradientDefs;
+		const svgNs = `http://www.w3.org/2000/svg`;
+		const carrier = document.createElementNS(svgNs, `svg`);
+		carrier.setAttribute(`width`, `0`);
+		carrier.setAttribute(`height`, `0`);
+		carrier.setAttribute(`aria-hidden`, `true`);
+		carrier.style.cssText = `position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none;`;
+		const defs = document.createElementNS(svgNs, `defs`);
+		carrier.append(defs);
+		this.renderRoot.append(carrier);
+		this.#userGradientDefs = defs;
+		return defs;
+	}
+	/**
+	* Moves any `<linearGradient>`/`<radialGradient>` authored as light-DOM
+	* descendants of this element into the shadow root (see
+	* `#ensureUserGradientDefs`). This *reparents* rather than clones the
+	* nodes, so consumers get normal, live SVG paint-server semantics — e.g.
+	* animating a `<stop>`'s `stop-color` "just works" — with no gradient
+	* management on the component's part. Idempotent: once moved, a node is no
+	* longer a light-DOM descendant of `this`, so it won't be found again.
+	*/
+	#syncGradientDefs;
+	addLane(key, options) {
+		const rel = this.#getRelativeValueA();
+		this.#lanes.set(key, {
+			key,
+			value: options?.value ?? rel,
+			valueMin: options?.valueMin ?? 0,
+			valueMax: options?.valueMax ?? rel,
+			type: options?.type ?? `value`,
+			offset: options?.offset ?? 0,
+			width: options?.width ?? .1
+		});
+		this.requestUpdate();
+	}
+	setLaneValue(key, value) {
+		const lane = this.#lanes.get(key);
+		if (lane) {
+			lane.value = clamp(value, 0, 1);
+			this.requestUpdate();
+		}
+	}
+	setLaneRange(key, valueMin, valueMax) {
+		const lane = this.#lanes.get(key);
+		if (!lane) return;
+		const lo = clamp(Math.min(valueMin, valueMax), 0, 1);
+		const hi = clamp(Math.max(valueMin, valueMax), 0, 1);
+		lane.valueMin = lo;
+		lane.valueMax = hi;
+		this.requestUpdate();
+	}
+	removeLane(key) {
+		this.#lanes.delete(key);
+		this.requestUpdate();
+	}
+	getLanes() {
+		return new Map(this.#lanes);
+	}
+	getLane(key) {
+		return this.#lanes.get(key);
+	}
+	#getRelativeValueA() {
+		return valueToRelative(this.valueA, this.min, this.max);
+	}
+	#getRelativeValueB() {
+		return valueToRelative(this.valueB, this.min, this.max);
+	}
+	#getRelativeValueC() {
+		return valueToRelative(this.valueC ?? (this.#poleA + this.#poleB) / 2, this.min, this.max);
+	}
+	#low() {
+		return Math.min(this.#poleA, this.#poleB);
+	}
+	#high() {
+		return Math.max(this.#poleA, this.#poleB);
+	}
+	#lowKey() {
+		return this.#poleA <= this.#poleB ? `a` : `b`;
+	}
+	#highKey() {
+		return this.#poleA > this.#poleB ? `a` : `b`;
+	}
+	/**
+	* Effective `valueMin` in value units between A and B. Mirrors radial-input's
+	* default of 1% of max-min when the property holds the literal minimum.
+	*/
+	#getEffectiveValueMin() {
+		const range = this.max - this.min;
+		if (this.valueMin && this.valueMin > 0) return this.valueMin;
+		return range * DEFAULT_VALUE_MIN_FRACTION;
+	}
+	#quantise(value) {
+		if (this.stops && this.stops > 1) {
+			const step = (this.max - this.min) / this.stops;
+			return clamp(Math.round((value - this.min) / step) * step + this.min, this.min, this.max);
+		}
+		if (this.step !== void 0 && this.step > 0) return clamp(Math.round((value - this.min) / this.step) * this.step + this.min, this.min, this.max);
+		return value;
+	}
+	#setSingleValueFromRelative(relativeValue, isUserInteraction = false) {
+		const newValue = scale(relativeValue, 0, 1, this.min, this.max);
+		const clampedValue = this.#quantise(clamp(newValue, this.min, this.max));
+		if (clampedValue === this.valueA) return;
+		const previousValue = this.valueA;
+		this.valueA = clampedValue;
+		this.#poleA = clampedValue;
+		this.#isUserInteraction = isUserInteraction;
+		const valueLane = this.#lanes.get(`value`);
+		if (valueLane && valueLane.type === `value`) this.#applySingleStyleValueLane(valueLane, this.#getRelativeValueA());
+		if (this.hasAttribute(`data-tooltip-live`)) {
+			const percentage = Math.round(this.#getRelativeValueA() * 100);
+			this.setAttribute(`data-tooltip`, `${percentage}%`);
+		}
+		this.#emitInputAndChange({ previousValue }, isUserInteraction);
+	}
+	#setDualOrTripleValueFromRelative(relativeValue, handle, isUserInteraction = false) {
+		const clamped = clamp(scale(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() };
+		this.#poleA = result.poleA;
+		this.#poleB = result.poleB;
+		if (result.poleC !== void 0) this.#poleC = result.poleC;
+		this.#syncPoleProperties();
+		const changed = this.#detectChanged(previous, this.#poles());
+		this.#isUserInteraction = isUserInteraction;
+		const valueLane = this.#lanes.get(`value`);
+		if (valueLane && valueLane.type === `value`) {
+			valueLane.valueMin = valueToRelative(this.#low(), this.min, this.max);
+			valueLane.valueMax = valueToRelative(this.#high(), this.min, this.max);
+		}
+		if (this.hasAttribute(`data-tooltip-live`)) {
+			const percentage = Math.round(valueToRelative(this.#high(), this.min, this.max) * 100);
+			this.setAttribute(`data-tooltip`, `${percentage}%`);
+		}
+		this.#emitInputAndChange({
+			previousValue: Math.max(previous.poleA, previous.poleB),
+			previousValueMin: Math.min(previous.poleA, previous.poleB),
+			previousValueMax: Math.max(previous.poleA, previous.poleB),
+			previousValueC: previous.poleC
+		}, isUserInteraction, changed);
+	}
+	#poles() {
+		return {
+			poleA: this.#poleA,
+			poleB: this.#poleB,
+			poleC: this.#poleC
+		};
+	}
+	#syncPoleProperties() {
+		this.valueA = this.#poleA;
+		this.valueB = this.#poleB;
+		if (this.valueMode === `triple` && this.#poleC !== void 0) {
+			this.valueC = this.#poleC;
+			this.#hasInitialisedValueC = true;
+		}
+	}
+	#resolvePoleChange(handle, proposed, originalHandle) {
+		let poleA = this.#poleA;
+		let poleB = this.#poleB;
+		let poleC = this.#poleC;
+		if (this.valueMode === `triple` && handle === `c`) {
+			const clamped = clamp(proposed, this.#low(), this.#high());
+			const quantised = this.#quantise(clamped);
+			if (quantised === this.#poleC) return null;
+			return {
+				poleA,
+				poleB,
+				poleC: quantised
+			};
+		}
+		const gap = this.#getEffectiveValueMin();
+		const other = handle === `a` ? poleB : poleA;
+		let desired = this.#quantise(clamp(proposed, this.min, this.max));
+		if (this.crossover === `none`) {
+			if ((handle === `a` ? poleA : poleB) <= other) desired = Math.min(desired, other - gap);
+			else desired = Math.max(desired, other + gap);
+		} else if (desired > other - gap && desired < other + gap) desired = Math.abs(desired - (other - gap)) <= Math.abs(desired - (other + gap)) ? other - gap : other + gap;
+		desired = clamp(desired, this.min, this.max);
+		if (handle === `a`) {
+			if (desired === poleA) return null;
+			poleA = desired;
+		} else {
+			if (desired === poleB) return null;
+			poleB = desired;
+		}
+		if (this.valueMode === `triple` && poleC !== void 0) {
+			const oldLo = Math.min(this.#poleA, this.#poleB);
+			const oldHi = Math.max(this.#poleA, this.#poleB);
+			const newLo = Math.min(poleA, poleB);
+			const newHi = Math.max(poleA, poleB);
+			if (this.valueCFollow === `proportional` && oldHi > oldLo) poleC = newLo + clamp((poleC - oldLo) / (oldHi - oldLo), 0, 1) * (newHi - newLo);
+			else {
+				if (poleC < newLo) poleC = newLo;
+				if (poleC > newHi) poleC = newHi;
+			}
+		}
+		return {
+			poleA,
+			poleB,
+			poleC
+		};
+	}
+	#detectChanged(prev, curr) {
+		const aDiff = prev.poleA !== curr.poleA;
+		const bDiff = prev.poleB !== curr.poleB;
+		const cDiff = prev.poleC !== curr.poleC;
+		if (this.valueMode === `triple`) {
+			if (aDiff && bDiff && !cDiff) return `both`;
+			if (aDiff && bDiff) return `both`;
+			if (aDiff) return `min`;
+			if (bDiff) return `max`;
+			if (cDiff) return `c`;
+			return `min`;
+		}
+		if (aDiff && bDiff) return `both`;
+		if (aDiff) return `min`;
+		if (bDiff) return `max`;
+		return `min`;
+	}
+	#emitInputAndChange(previous, isUserInteraction, changed) {
+		const detailInput = this.#buildInputDetail(changed);
+		const detailChange = this.#buildChangeDetail(previous, changed);
+		if (isUserInteraction) {
+			this.dispatchEvent(new CustomEvent(`input`, {
+				detail: detailInput,
+				bubbles: true,
+				composed: true
+			}));
+			this.#scheduleChangeEvent(detailChange);
+		} else this.#fireChangeEvent(detailChange);
+	}
+	#buildInputDetail(changed) {
+		if (this.valueMode === `single`) return {
+			value: this.valueA,
+			valueRelative: this.#getRelativeValueA()
+		};
+		const lo = this.#low();
+		const hi = this.#high();
+		const valueMinRel = valueToRelative(lo, this.min, this.max);
+		const valueMaxRel = valueToRelative(hi, this.min, this.max);
+		if (this.valueMode === `triple` && this.#poleC !== void 0) return {
+			value: hi,
+			valueRelative: valueMaxRel,
+			valueMin: lo,
+			valueMax: hi,
+			valueMinRelative: valueMinRel,
+			valueMaxRelative: valueMaxRel,
+			valueC: this.#poleC,
+			valueCRelative: valueToRelative(this.#poleC, this.min, this.max),
+			changed
+		};
+		return {
+			value: hi,
+			valueRelative: valueMaxRel,
+			valueMin: lo,
+			valueMax: hi,
+			valueMinRelative: valueMinRel,
+			valueMaxRelative: valueMaxRel,
+			changed
+		};
+	}
+	#buildChangeDetail(previous, changed) {
+		if (this.valueMode === `single`) return {
+			value: this.valueA,
+			valueRelative: this.#getRelativeValueA(),
+			previousValue: previous.previousValue
+		};
+		const lo = this.#low();
+		const hi = this.#high();
+		const valueMaxRel = valueToRelative(hi, this.min, this.max);
+		if (this.valueMode === `triple` && this.#poleC !== void 0) return {
+			value: hi,
+			valueRelative: valueMaxRel,
+			previousValue: previous.previousValue,
+			valueMin: lo,
+			valueMax: hi,
+			previousValueMin: previous.previousValueMin ?? lo,
+			previousValueMax: previous.previousValueMax ?? hi,
+			valueC: this.#poleC,
+			previousValueC: previous.previousValueC ?? this.#poleC,
+			changed
+		};
+		return {
+			value: hi,
+			valueRelative: valueMaxRel,
+			previousValue: previous.previousValue,
+			valueMin: lo,
+			valueMax: hi,
+			previousValueMin: previous.previousValueMin ?? lo,
+			previousValueMax: previous.previousValueMax ?? hi,
+			changed
+		};
+	}
+	#scheduleChangeEvent(detail) {
+		if (this.#changeDebounceTimer !== void 0) clearTimeout(this.#changeDebounceTimer);
+		this.#changeDebounceTimer = window.setTimeout(() => {
+			this.#fireChangeEvent(detail);
+			this.#changeDebounceTimer = void 0;
+		}, CHANGE_DEBOUNCE_MS);
+	}
+	#fireChangeEvent(detail) {
+		this.dispatchEvent(new CustomEvent(`change`, {
+			detail,
+			bubbles: true,
+			composed: true
+		}));
+	}
+	#getCssVar(name, defaultValue) {
+		const style = getComputedStyle(this);
+		const val = style.getPropertyValue(name).trim();
+		if (!val) return defaultValue;
+		if (val.includes(`calc(`)) {
+			const valueRelative = style.getPropertyValue(`--value-relative`).trim();
+			if (!valueRelative) {
+				const parsed = Number.parseFloat(val.replace(/[^0-9.-]/g, ``));
+				return Number.isNaN(parsed) ? defaultValue : parsed;
+			}
+			const evalStr = val.replace(/var\(--value-relative\)/g, valueRelative);
+			try {
+				const result = new Function(`return ${evalStr.replace(/calc\s*\(([^)]+)\)/g, `$1`)}`)();
+				return typeof result === `number` && !Number.isNaN(result) ? result : defaultValue;
+			} catch {
+				const parsed = Number.parseFloat(val.replace(/[^0-9.-]/g, ``));
+				return Number.isNaN(parsed) ? defaultValue : parsed;
+			}
+		}
+		const parsed = Number.parseFloat(val);
+		return Number.isNaN(parsed) ? defaultValue : parsed;
+	}
+	#onPointerDown;
+	#onPointerMove;
+	#applyLengthDragFromRelative(relativeValue) {
+		if (!this.#lengthDragStart) return;
+		const range = this.max - this.min;
+		const deltaValue = (relativeValue - this.#lengthDragStartRelative) * range;
+		let proposedLow = this.#lengthDragStartLow + deltaValue;
+		let proposedHigh = proposedLow + this.#lengthDragLength;
+		if (this.valueDrag === `stop`) {
+			const originalLength = this.#lengthDragLength;
+			let candidateLow = proposedLow;
+			let candidateHigh = proposedLow + originalLength;
+			if (candidateLow < this.min) {
+				const maxDelta = this.min - this.#lengthDragStartLow;
+				candidateLow = this.#lengthDragStartLow + maxDelta;
+				candidateHigh = candidateLow + originalLength;
+			}
+			if (candidateHigh > this.max) {
+				const shift = this.max - candidateHigh;
+				candidateLow += shift;
+				candidateHigh += shift;
+			}
+			proposedLow = candidateLow;
+			proposedHigh = candidateHigh;
+		} else if (this.valueDrag === `flex`) {
+			proposedLow = clamp(proposedLow, this.min, this.max);
+			proposedHigh = clamp(proposedHigh, this.min, this.max);
+		}
+		const lowKey = this.#lengthDragLowKey ?? this.#lowKey();
+		this.#lengthDragHighKey ?? this.#highKey();
+		const previous = this.#poles();
+		const newPoleA = lowKey === `a` ? proposedLow : proposedHigh;
+		const newPoleB = lowKey === `b` ? proposedLow : proposedHigh;
+		this.#poleA = newPoleA;
+		this.#poleB = newPoleB;
+		if (this.valueMode === `triple` && this.#poleC !== void 0) {
+			const oldLo = Math.min(previous.poleA, previous.poleB);
+			const oldHi = Math.max(previous.poleA, previous.poleB);
+			const newLo = Math.min(newPoleA, newPoleB);
+			const newHi = Math.max(newPoleA, newPoleB);
+			if (this.valueCFollow === `proportional` && oldHi > oldLo) {
+				const frac = clamp((this.#poleC - oldLo) / (oldHi - oldLo), 0, 1);
+				this.#poleC = newLo + frac * (newHi - newLo);
+			} else {
+				if (this.#poleC < newLo) this.#poleC = newLo;
+				if (this.#poleC > newHi) this.#poleC = newHi;
+			}
+		}
+		this.#syncPoleProperties();
+		const changed = `both`;
+		this.#isUserInteraction = true;
+		const valueLane = this.#lanes.get(`value`);
+		if (valueLane && valueLane.type === `value`) {
+			valueLane.valueMin = valueToRelative(this.#low(), this.min, this.max);
+			valueLane.valueMax = valueToRelative(this.#high(), this.min, this.max);
+		}
+		this.#emitInputAndChange({
+			previousValue: previous.poleA,
+			previousValueMin: Math.min(previous.poleA, previous.poleB),
+			previousValueMax: Math.max(previous.poleA, previous.poleB),
+			previousValueC: previous.poleC
+		}, true, changed);
+	}
+	#onPointerUp;
+	#onKeyDown;
+	#stepHandleByRelativeDelta(handle, targetRelative) {
+		if (this.valueMode === `single`) {
+			this.#setSingleValueFromRelative(clamp(targetRelative, 0, 1), true);
+			return;
+		}
+		if (handle === `c`) {
+			const lo = this.#low();
+			const hi = this.#high();
+			const clamped = clamp(scale(clamp(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();
+			this.#poleC = q;
+			this.#syncPoleProperties();
+			this.#isUserInteraction = true;
+			this.#emitInputAndChange({
+				previousValue: previous.poleA,
+				previousValueMin: Math.min(previous.poleA, previous.poleB),
+				previousValueMax: Math.max(previous.poleA, previous.poleB),
+				previousValueC: previous.poleC
+			}, true, `c`);
+			return;
+		}
+		this.#setDualOrTripleValueFromRelative(clamp(targetRelative, 0, 1), handle, true);
+	}
+	_applyWheelDelta(direction, event) {
+		let handle = this.#lastInteractedHandle;
+		const target = event.target;
+		if (target && typeof target.closest === `function`) {
+			const handleEl = target.closest(`[data-handle]`);
+			if (handleEl) {
+				const h = handleEl.dataset?.handle;
+				if (h === `a` || h === `b` || h === `c`) handle = h;
+			}
+		}
+		if (this.valueMode === `single`) handle = `a`;
+		this.#lastInteractedHandle = handle;
+		const range = this.max - this.min;
+		const effectiveStep = resolveAxisStep(range, this.stops, this.step, event.shiftKey);
+		const targetRel = clamp(valueToRelative(handle === `a` ? this.#poleA : handle === `b` ? this.#poleB : this.#poleC ?? this.#low(), this.min, this.max) - direction * effectiveStep / range, 0, 1);
+		this.#stepHandleByRelativeDelta(handle, targetRel);
+	}
+	#onFocusIn;
+	#viewBox() {
+		if (this.orientation === `horizontal`) return `0 0 100 24`;
+		return `0 0 24 100`;
+	}
+	#renderTrack() {
+		const isVertical = this.orientation === `vertical`;
+		const strokeWidth = this.#getCssVar(`--track-width`, 2);
+		const color = this.#getCssVarColor(`--track-color`, `var(--surface-4)`);
+		const fill = this.#getCssVarColor(`--track-fill`, `transparent`);
+		if (isVertical) return svg`
+        <rect
+          class="track"
+          x="${12 - strokeWidth / 2}"
+          y="${5}"
+          width="${strokeWidth}"
+          height="${90}"
+          fill="${fill}"
+          stroke="${color}"
+          stroke-width="0"
+        />
+      `;
+		return svg`
+      <rect
+        class="track"
+        x="${5}"
+        y="${12 - strokeWidth / 2}"
+        width="${90}"
+        height="${strokeWidth}"
+        fill="${fill}"
+        stroke="${color}"
+        stroke-width="0"
+      />
+    `;
+	}
+	#getCssVarColor(name, fallback) {
+		return getComputedStyle(this).getPropertyValue(name).trim() || fallback;
+	}
+	#renderLane(lane) {
+		const bounds = getTrackBounds(this.orientation);
+		let path = ``;
+		if (lane.type === `fixed`) path = generateLinePath(this.orientation === `horizontal` ? {
+			x: bounds.trackStart,
+			y: bounds.crossCentre
+		} : {
+			x: bounds.crossCentre,
+			y: bounds.trackStart
+		}, this.orientation === `horizontal` ? {
+			x: bounds.trackEnd,
+			y: bounds.crossCentre
+		} : {
+			x: bounds.crossCentre,
+			y: bounds.trackEnd
+		});
+		else if (lane.type === `anchored`) {
+			const seg = getAnchoredSegment(this.#getRelativeValueA(), lane.value ?? .1, this.singleStyle, bounds, this.orientation);
+			path = generateLinePath(seg.start, seg.end);
+		} else {
+			const seg = getValueSegment(lane.valueMin ?? 0, lane.valueMax ?? 0, this.singleStyle, bounds, this.orientation);
+			path = generateLinePath(seg.start, seg.end);
+		}
+		if (!path) return svg``;
+		const offset = lane.offset;
+		const w = this.orientation === `horizontal` ? `calc(var(--lane-${lane.key}-width, var(--lane-width)) * 24%)` : `calc(var(--lane-${lane.key}-width, var(--lane-width)) * 24%)`;
+		const transform = this.orientation === `horizontal` ? `translateY(${offset * 24 / 2}px)` : `translateX(${offset * 24 / 2}px)`;
+		return svg`
+      <path
+        class="lane"
+        data-lane-key="${lane.key}"
+        part="lane lane-${lane.key}"
+        d="${path}"
+        style="
+          stroke-width: ${w};
+          stroke-linecap: round;
+          transform: ${transform};
+        "
+      />
+    `;
+	}
+	#renderValueMarker(handle, defs) {
+		const bounds = getTrackBounds(this.orientation);
+		const isHorizontal = this.orientation === `horizontal`;
+		let value;
+		if (this.valueMode === `single`) value = this.#getRelativeValueA();
+		else if (handle === `a`) value = this.#getRelativeValueA();
+		else if (handle === `b`) value = this.#getRelativeValueB();
+		else value = this.#getRelativeValueC();
+		const pos = valueToPosition(value, this.singleStyle, bounds, this.orientation);
+		const markerOffset = this.#getCssVar(`--marker-offset`, 0);
+		const markerLength = this.#getCssVar(`--marker-length`, .8);
+		const markerThickness = this.#getCssVar(`--marker-thickness`, .15);
+		const markerBorderWidth = this.#getCssVar(`--marker-border-width`, 0);
+		const center = isHorizontal ? {
+			x: pos.x,
+			y: bounds.crossCentre + markerOffset * 12
+		} : {
+			x: bounds.crossCentre + markerOffset * 12,
+			y: pos.y
+		};
+		const lowCenter = this.valueMode === `single` && this.singleStyle === `unipolar` ? isHorizontal ? {
+			x: 2 * bounds.centre - center.x,
+			y: center.y
+		} : {
+			x: center.x,
+			y: 2 * bounds.centre - center.y
+		} : void 0;
+		const id = handle ?? `s`;
+		const effectiveMarkerStyle = handle === `c` && this.markerStyleC ? this.markerStyleC : this.markerStyle;
+		if (effectiveMarkerStyle === `dot`) {
+			const r = markerThickness * 12;
+			const renderDot = (cx, cy, mid) => {
+				if (markerBorderWidth > 0) {
+					defs.push(svg`<circle id="dot-${mid}-path" cx="${cx}" cy="${cy}" r="${r}" />`);
+					return svg`
+            <use href="#dot-${mid}-path" class="marker-border" />
+            <use href="#dot-${mid}-path" class="marker-fill" />
+          `;
+				}
+				return svg`<circle cx="${cx}" cy="${cy}" r="${r}" />`;
+			};
+			const high = renderDot(center.x, center.y, id);
+			if (lowCenter) return svg`${high}${renderDot(lowCenter.x, lowCenter.y, `${id}-low`)}`;
+			return high;
+		}
+		if (effectiveMarkerStyle === `needle`) {
+			const halfLen = markerLength * 24 / 4;
+			const renderNeedle = (cx, cy, mid) => {
+				let start;
+				let end;
+				if (isHorizontal) {
+					start = {
+						x: cx,
+						y: cy - halfLen
+					};
+					end = {
+						x: cx,
+						y: cy + halfLen
+					};
+				} else {
+					start = {
+						x: cx - halfLen,
+						y: cy
+					};
+					end = {
+						x: cx + halfLen,
+						y: cy
+					};
+				}
+				const path = `M ${start.x} ${start.y} L ${end.x} ${end.y}`;
+				if (markerBorderWidth > 0) {
+					defs.push(svg`<path id="needle-${mid}-path" d="${path}" />`);
+					return svg`
+            <use href="#needle-${mid}-path" class="marker-border" />
+            <use href="#needle-${mid}-path" class="marker-fill" />
+          `;
+				}
+				return svg`<path d="${path}" stroke-linecap="round" />`;
+			};
+			const high = renderNeedle(center.x, center.y, id);
+			if (lowCenter) return svg`${high}${renderNeedle(lowCenter.x, lowCenter.y, `${id}-low`)}`;
+			return high;
+		}
+		if (effectiveMarkerStyle === `triangle`) {
+			const halfLen = markerLength * 24 / 4;
+			const halfBase = markerThickness * 12;
+			const renderTriangle = (cx, cy, mid) => {
+				let apex;
+				let base1;
+				let base2;
+				if (isHorizontal) {
+					apex = {
+						x: cx,
+						y: cy
+					};
+					base1 = {
+						x: cx - halfBase,
+						y: cy + halfLen
+					};
+					base2 = {
+						x: cx + halfBase,
+						y: cy + halfLen
+					};
+				} else {
+					apex = {
+						x: cx,
+						y: cy
+					};
+					base1 = {
+						x: cx + halfLen,
+						y: cy - halfBase
+					};
+					base2 = {
+						x: cx + halfLen,
+						y: cy + halfBase
+					};
+				}
+				const points = `${apex.x},${apex.y} ${base1.x},${base1.y} ${base2.x},${base2.y}`;
+				if (markerBorderWidth > 0) {
+					defs.push(svg`<polygon id="triangle-${mid}-path" points="${points}" />`);
+					return svg`
+            <use href="#triangle-${mid}-path" class="marker-border" />
+            <use href="#triangle-${mid}-path" class="marker-fill" />
+          `;
+				}
+				return svg`<polygon points="${points}" />`;
+			};
+			const high = renderTriangle(center.x, center.y, id);
+			if (lowCenter) return svg`${high}${renderTriangle(lowCenter.x, lowCenter.y, `${id}-low`)}`;
+			return high;
+		}
+		return svg``;
+	}
+	#renderMidpointMarker() {
+		if (this.valueMode !== `single`) return svg``;
+		if (this.singleStyle !== `bipolar` && this.singleStyle !== `unipolar`) return svg``;
+		const bounds = getTrackBounds(this.orientation);
+		const isHorizontal = this.orientation === `horizontal`;
+		const halfLen = this.#getCssVar(`--midpoint-length`, .15) * 24 / 4;
+		const center = isHorizontal ? {
+			x: bounds.centre,
+			y: bounds.crossCentre
+		} : {
+			x: bounds.crossCentre,
+			y: bounds.centre
+		};
+		if (this.markerStyle === `dot`) {
+			const size = this.#getCssVar(`--midpoint-thickness`, .08);
+			return svg`
+        <g class="midpoint-marker" part="midpoint-marker">
+          <circle cx="${center.x}" cy="${center.y}" r="${size * 12}" />
+        </g>
+      `;
+		}
+		let start;
+		let end;
+		if (isHorizontal) {
+			start = {
+				x: center.x,
+				y: center.y - halfLen
+			};
+			end = {
+				x: center.x,
+				y: center.y + halfLen
+			};
+		} else {
+			start = {
+				x: center.x - halfLen,
+				y: center.y
+			};
+			end = {
+				x: center.x + halfLen,
+				y: center.y
+			};
+		}
+		return svg`
+      <g class="midpoint-marker" part="midpoint-marker">
+        <line x1="${start.x}" y1="${start.y}" x2="${end.x}" y2="${end.y}" />
+      </g>
+    `;
+	}
+	#renderHandleGroup(handle, content) {
+		if (!handle) return svg`<g role="slider"
+        class="value-marker"
+        aria-orientation="${this.orientation}"
+        aria-valuemin="${this.min}" aria-valuemax="${this.max}"
+        aria-valuenow="${this.valueA}"
+        part="value-marker">${content}</g>`;
+		const partName = `value-marker value-marker-${handle}`;
+		const value = handle === `a` ? this.valueA : handle === `b` ? this.valueB : this.valueC ?? (this.#poleA + this.#poleB) / 2;
+		return svg`<g tabindex="${this.disabled ? -1 : 0}" role="slider"
+      class="value-marker"
+      data-handle="${handle}"
+      aria-label="${handle}"
+      aria-orientation="${this.orientation}"
+      aria-valuemin="${this.min}" aria-valuemax="${this.max}"
+      aria-valuenow="${value}"
+      part="${partName}">${content}</g>`;
+	}
+	#isMultiHandle() {
+		return this.valueMode !== `single`;
+	}
+	willUpdate(changed) {
+		super.willUpdate(changed);
+		if (changed.has(`valueA`) || changed.has(`valueB`) || !this.hasUpdated) {
+			this.#poleA = this.valueA;
+			this.#poleB = this.valueB;
+		}
+		if (this.valueMode === `triple`) {
+			if (this.valueC === void 0 || !this.#hasInitialisedValueC || changed.has(`valueMode`)) {
+				this.#poleC = (this.#poleA + this.#poleB) / 2;
+				this.valueC = this.#poleC;
+				this.#hasInitialisedValueC = true;
+			} else this.#poleC = this.valueC;
+			const lo = Math.min(this.#poleA, this.#poleB);
+			const hi = Math.max(this.#poleA, this.#poleB);
+			if (this.#poleC < lo) this.#poleC = lo;
+			if (this.#poleC > hi) this.#poleC = hi;
+			this.valueC = this.#poleC;
+		} else this.#poleC = void 0;
+		if (changed.has(`valueA`) || changed.has(`valueB`) || changed.has(`valueMode`) || changed.has(`singleStyle`) || !this.hasUpdated) {
+			const valueLane = this.#lanes.get(`value`);
+			if (valueLane && valueLane.type === `value`) {
+				if (this.valueMode === `single`) this.#applySingleStyleValueLane(valueLane, this.#getRelativeValueA());
+				else {
+					valueLane.valueMin = valueToRelative(this.#low(), this.min, this.max);
+					valueLane.valueMax = valueToRelative(this.#high(), this.min, this.max);
+				}
+			}
+		}
+	}
+	/**
+	* Sync the default 'value' lane's valueMin/valueMax for single-mode single-styles.
+	* Range: bar from trackStart to value.
+	* Bipolar: bar grows from track centre outward to value (or value to centre if below midpoint).
+	* Unipolar: bar is centred on the track centre with length proportional to value.
+	*/
+	#applySingleStyleValueLane(valueLane, relativeValue) {
+		if (this.singleStyle === `bipolar`) {
+			valueLane.valueMin = Math.min(.5, relativeValue);
+			valueLane.valueMax = Math.max(.5, relativeValue);
+		} else {
+			valueLane.valueMin = 0;
+			valueLane.valueMax = relativeValue;
+		}
+	}
+	render() {
+		const lanes = Array.from(this.#lanes.values());
+		const cursor = this.disabled ? `not-allowed` : this.valueMode === `single` ? `pointer` : `default`;
+		const handles = this.#isMultiHandle() ? this.valueMode === `triple` ? [
+			`a`,
+			`b`,
+			`c`
+		] : [`a`, `b`] : [];
+		const markerDefs = [];
+		const handleGroups = this.#isMultiHandle() ? handles.map((h) => this.#renderHandleGroup(h, this.#renderValueMarker(h, markerDefs))) : this.#renderHandleGroup(void 0, this.#renderValueMarker(void 0, markerDefs));
+		return html`
+      <svg
+        class="slider-svg"
+        viewBox="${this.#viewBox()}"
+        preserveAspectRatio="none"
+        tabindex="${this.disabled ? -1 : 0}"
+        style="cursor: ${cursor}; width: 100%; height: 100%;"
+        @pointerdown="${this.#onPointerDown}"
+        @pointermove="${this.#onPointerMoveCursor}"
+        @pointerleave="${this.#onPointerLeaveCursor}"
+        @keydown="${this.#onKeyDown}"
+        @focusin="${this.#onFocusIn}"
+      >
+        ${markerDefs.length > 0 ? svg`<defs>${markerDefs}</defs>` : svg``}
+        ${this.#renderTrack()}
+        ${lanes.map((lane) => this.#renderLane(lane))}
+        ${this.#renderMidpointMarker()}
+        ${handleGroups}
+      </svg>
+    `;
+	}
+	/**
+	* Compute the cursor for the current pointer position. The mapping:
+	* - `grab` over a marker handle (single A, or multi A/B/C)
+	* - `move` over a draggable segment (between A and B when value-drag is on)
+	* - `pointer` over empty track where clicking sets a value (single mode,
+	*   or the dead zones outside A/B in multi mode)
+	* - `default` over no-op segments (between A and B in dual mode when
+	*   value-drag is none, or between A-C/C-B in triple when value-drag is none)
+	* - `not-allowed` when disabled
+	*
+	* `relativeValue` is in the host's long-axis space (0 = start, 1 = end,
+	* already flipped for vertical). For unipolar single mode, the value
+	* bar's marker positions are computed in the same space; the abs(2x-1)
+	* remap only applies when setting the value on click/drag.
+	*/
+	#cursorAtRelative(relativeValue) {
+		if (this.disabled) return `not-allowed`;
+		if (this.#dragging) return `grabbing`;
+		const HANDLE_HIT = .06;
+		if (this.valueMode === `single`) {
+			if (this.singleStyle === `unipolar`) {
+				const halfLen = this.#getRelativeValueA() / 2;
+				const low = .5 - halfLen;
+				const high = .5 + halfLen;
+				if (Math.abs(relativeValue - low) < HANDLE_HIT || Math.abs(relativeValue - high) < HANDLE_HIT) return `grab`;
+				return `pointer`;
+			}
+			const aRel = this.#getRelativeValueA();
+			if (Math.abs(relativeValue - aRel) < HANDLE_HIT) return `grab`;
+			return `pointer`;
+		}
+		const aRel = this.#getRelativeValueA();
+		const bRel = this.#getRelativeValueB();
+		const lo = Math.min(aRel, bRel);
+		const hi = Math.max(aRel, bRel);
+		if (Math.abs(relativeValue - aRel) < HANDLE_HIT) return `grab`;
+		if (Math.abs(relativeValue - bRel) < HANDLE_HIT) return `grab`;
+		if (this.valueMode === `triple`) {
+			const cRel = this.#getRelativeValueC();
+			if (Math.abs(relativeValue - cRel) < HANDLE_HIT) return `grab`;
+		}
+		if (relativeValue > lo && relativeValue < hi) return this.valueDrag !== `none` ? `move` : `default`;
+		return `pointer`;
+	}
+	#onPointerMoveCursor;
+	#onPointerLeaveCursor;
+	updated(changed) {
+		super.updated(changed);
+		if (this.valueMode === `single`) this.style.setProperty(`--value-relative`, this.#getRelativeValueA().toString());
+		else {
+			const lo = valueToRelative(this.#low(), this.min, this.max);
+			const hi = valueToRelative(this.#high(), this.min, this.max);
+			this.style.setProperty(`--value-min-relative`, lo.toString());
+			this.style.setProperty(`--value-max-relative`, hi.toString());
+			this.style.setProperty(`--value-relative`, hi.toString());
+			if (this.valueMode === `triple` && this.#poleC !== void 0) this.style.setProperty(`--value-c-relative`, valueToRelative(this.#poleC, this.min, this.max).toString());
+		}
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.removeEventListener(`keydown`, this.#onHostKeyDown);
+		this.#gradientObserver?.disconnect();
+		this.#gradientObserver = void 0;
+		if (this.#changeDebounceTimer !== void 0) {
+			clearTimeout(this.#changeDebounceTimer);
+			this.#changeDebounceTimer = void 0;
+		}
+		this.#onPointerUp();
+	}
+	static {
+		this.styles = [
+			themeFallbacks,
+			prominenceStyles,
+			css`
+    :host {
+      display: inline-block;
+      width: 200px;
+      height: 24px;
+      touch-action: none;
+      user-select: none;
+      tabindex: 0;
+      --value-relative: 0;
+      --value-min-relative: 0;
+      --value-max-relative: 0;
+      --value-c-relative: 0;
+
+      --lane-width: 0.16;
+      --lane-track-width: 0.08;
+      --lane-value-width: 0.12;
+    }
+
+    :host([orientation="vertical"]) {
+      width: 24px;
+      height: 200px;
+    }
+
+    :host([disabled]) {
+      cursor: not-allowed;
+    }
+
+    :host {
+      outline: none;
+    }
+
+    :host(:focus-visible) {
+      outline: var(--slider-input-svg-focus-outline, 2px solid var(--accent));
+      outline-offset: var(--slider-input-svg-focus-outline-offset, 2px);
+    }
+
+    svg.slider-svg {
+      width: 100%;
+      height: 100%;
+      outline: none;
+      overflow: visible;
+    }
+
+    svg.slider-svg:focus {
+      outline: none;
+    }
+
+    svg.slider-svg:focus-visible,
+    :host(:focus-visible) svg.slider-svg {
+      outline: var(--slider-input-svg-focus-outline, 2px solid var(--accent));
+      outline-offset: var(--slider-input-svg-focus-outline-offset, 2px);
+    }
+
+    .track {
+      stroke: var(--track-color, var(--surface-4));
+      stroke-width: var(--track-width, 2);
+    }
+
+    .lane {
+      fill: none;
+      stroke-linecap: round;
+      stroke-dasharray: var(--lane-dasharray, none);
+      stroke-dashoffset: var(--lane-dashoffset, 0);
+      vector-effect: non-scaling-stroke;
+    }
+
+    .lane[data-lane-key='track'] {
+      stroke: var(--lane-track-color, var(--surface-4));
+    }
+
+    .lane[data-lane-key='value'] {
+      stroke: var(--lane-value-color, var(--accent));
+    }
+
+    .lane:not([data-lane-key='track']):not([data-lane-key='value']) {
+      stroke: var(--lane-color, var(--accent));
+    }
+
+    .value-marker > path:not(.marker-border):not(.marker-fill),
+    .value-marker > .marker-fill {
+      stroke: var(--marker-color, var(--accent));
+      stroke-width: calc(var(--marker-thickness, 0.15) * 12px);
+      stroke-linecap: round;
+      stroke-dasharray: var(--marker-dasharray, none);
+      stroke-dashoffset: var(--marker-dashoffset, 0);
+      vector-effect: non-scaling-stroke;
+    }
+
+    .value-marker > .marker-border {
+      stroke: var(--marker-border-color, transparent);
+      stroke-width: calc((var(--marker-thickness, 0.15) + var(--marker-border-width, 0) * 2) * 12px);
+      stroke-linecap: round;
+      vector-effect: non-scaling-stroke;
+    }
+
+    .value-marker .marker-fill,
+    .value-marker circle,
+    .value-marker polygon {
+      fill: var(--marker-color, var(--accent));
+      stroke-width: calc(var(--marker-thickness, 0.15) * 12px);
+    }
+
+    .value-marker[data-handle="a"] > path:not(.marker-border):not(.marker-fill),
+    .value-marker[data-handle="a"] > .marker-fill,
+    .value-marker[data-handle="a"] > circle,
+    .value-marker[data-handle="a"] > polygon {
+      stroke: var(--marker-a-color, var(--marker-color, var(--accent)));
+      fill: var(--marker-a-color, var(--marker-color, var(--accent)));
+    }
+
+    .value-marker[data-handle="b"] > path:not(.marker-border):not(.marker-fill),
+    .value-marker[data-handle="b"] > .marker-fill,
+    .value-marker[data-handle="b"] > circle,
+    .value-marker[data-handle="b"] > polygon {
+      stroke: var(--marker-b-color, var(--marker-color, var(--accent)));
+      fill: var(--marker-b-color, var(--marker-color, var(--accent)));
+    }
+
+    .value-marker[data-handle="c"] > path:not(.marker-border):not(.marker-fill),
+    .value-marker[data-handle="c"] > .marker-fill,
+    .value-marker[data-handle="c"] > circle,
+    .value-marker[data-handle="c"] > polygon {
+      stroke: var(--marker-c-color, var(--marker-color, var(--accent)));
+      fill: var(--marker-c-color, var(--marker-color, var(--accent)));
+    }
+
+    .midpoint-marker line {
+      stroke: var(--midpoint-color, var(--surface-muted-text));
+      stroke-width: var(--midpoint-thickness, 1px);
+      stroke-linecap: round;
+      vector-effect: non-scaling-stroke;
+    }
+
+    .midpoint-marker circle {
+      fill: var(--midpoint-color, var(--surface-muted-text));
+      stroke: var(--midpoint-border-color, transparent);
+      stroke-width: var(--midpoint-border-width, 0);
+      vector-effect: non-scaling-stroke;
+    }
+  `
+		];
+	}
+};
+__decorate([property({
+	type: Number,
+	attribute: `value-a`
+})], SliderInputElement.prototype, "valueA", void 0);
+__decorate([property({
+	type: Number,
+	attribute: `value-b`
+})], SliderInputElement.prototype, "valueB", void 0);
+__decorate([property({
+	type: Number,
+	attribute: `value-c`
+})], SliderInputElement.prototype, "valueC", void 0);
+__decorate([property({ type: Number })], SliderInputElement.prototype, "min", void 0);
+__decorate([property({ type: Number })], SliderInputElement.prototype, "max", void 0);
+__decorate([property({ type: Number })], SliderInputElement.prototype, "step", void 0);
+__decorate([property({ type: Number })], SliderInputElement.prototype, "stops", void 0);
+__decorate([property({
+	type: String,
+	attribute: `value-mode`
+})], SliderInputElement.prototype, "valueMode", void 0);
+__decorate([property({
+	type: String,
+	attribute: `single-style`
+})], SliderInputElement.prototype, "singleStyle", void 0);
+__decorate([property({ type: String })], SliderInputElement.prototype, "orientation", void 0);
+__decorate([property({
+	type: String,
+	attribute: `marker-style`
+})], SliderInputElement.prototype, "markerStyle", void 0);
+__decorate([property({
+	type: String,
+	attribute: `marker-style-c`
+})], SliderInputElement.prototype, "markerStyleC", void 0);
+__decorate([property({ type: String })], SliderInputElement.prototype, "crossover", void 0);
+__decorate([property({
+	type: String,
+	attribute: `value-drag`
+})], SliderInputElement.prototype, "valueDrag", void 0);
+__decorate([property({
+	type: String,
+	attribute: `value-c-follow`
+})], SliderInputElement.prototype, "valueCFollow", void 0);
+__decorate([property({
+	type: Number,
+	attribute: `value-min`
+})], SliderInputElement.prototype, "valueMin", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], SliderInputElement.prototype, "disabled", void 0);
+SliderInputElement = __decorate([safeCustomElement(`ixfx-slider-input`)], SliderInputElement);
+//#endregion
+export { SliderInputElement as t };
+
+//# sourceMappingURL=slider-input-DFpG23bS.js.map