@ixfx/components 0.6.2 → 0.7.1

package/dist/{slider-input-CT4gcF-o.js → slider-input-De4eoT11.js}

@@ -1,4 +1,4 @@
-import { t as themeFallbacks } from "./fallbacks-DEE1nCTt.js";
+import { t as themeFallbacks } from "./fallbacks-DNI9xt0F.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";
@@ -7,19 +7,27 @@ import { LitElement, css, html, svg } from "lit";
 import { property } from "lit/decorators.js";
 /**
 * Get the track bounds in viewBox units for a given orientation.
+*
+* `cross` is the dynamic cross-axis size (see `SliderInputElement`'s
+* cross computation); `insetStart`/`insetEnd` are the long-axis end
+* paddings (low-value end / high-value end). LONG stays fixed at 100.
 */
-function getTrackBounds(orientation) {
+function getTrackBounds(orientation, cross = 24, insetStart = 5, insetEnd = 5) {
+	const trackStart = insetStart;
+	const trackEnd = 100 - insetEnd;
 	if (orientation === `horizontal`) return {
-		trackStart: 5,
-		trackEnd: 95,
-		centre: 50,
-		crossCentre: 12
+		trackStart,
+		trackEnd,
+		centre: (trackStart + trackEnd) / 2,
+		cross,
+		crossCentre: cross / 2
 	};
 	return {
-		trackStart: 5,
-		trackEnd: 95,
-		centre: 50,
-		crossCentre: 12
+		trackStart,
+		trackEnd,
+		centre: (trackStart + trackEnd) / 2,
+		cross,
+		crossCentre: cross / 2
 	};
 }
 /**
@@ -162,15 +170,6 @@ function scale(value, fromMin, fromMax, toMin, toMax) {
 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;
@@ -224,6 +223,11 @@ let SliderInputElement = class SliderInputElement extends WheelNudgeMixin(LitEle
 	*/
 	#userGradientDefs;
 	#gradientObserver;
+	/**
+	* Lane strokes are resolved to screen px per render (see #laneStrokePx), so
+	* a host resize must re-render to keep them (and the measured box) exact.
+	*/
+	#sizeObserver;
 	constructor() {
 		super();
 		this.valueA = 50;
@@ -243,6 +247,7 @@ let SliderInputElement = class SliderInputElement extends WheelNudgeMixin(LitEle
 		this.valueCFollow = `none`;
 		this.valueMin = 1;
 		this.disabled = false;
+		this.swipeable = false;
 		this.#lanes = /* @__PURE__ */ new Map();
 		this.#poleA = 50;
 		this.#poleB = 0;
@@ -266,6 +271,12 @@ let SliderInputElement = class SliderInputElement extends WheelNudgeMixin(LitEle
 		this.#changeDebounceTimer = void 0;
 		this.#isUserInteraction = false;
 		this.#hasInitialisedValueC = false;
+		this.#onHostResize = () => {
+			const rect = this.getBoundingClientRect();
+			const crossPx = this.orientation === `vertical` ? rect.width : rect.height;
+			const longPx = this.orientation === `vertical` ? rect.height : rect.width;
+			if (crossPx !== this.#currentCrossPx || longPx !== this.#currentLongPx) this.requestUpdate();
+		};
 		this.#onHostKeyDown = (event) => {
 			this.#onKeyDown(event);
 		};
@@ -275,18 +286,35 @@ let SliderInputElement = class SliderInputElement extends WheelNudgeMixin(LitEle
 			const defs = this.#ensureUserGradientDefs();
 			for (const node of found) defs.append(node);
 		};
+		this.#currentCross = 24;
+		this.#currentInsetStart = 5;
+		this.#currentInsetEnd = 5;
+		this.#currentLanePxMax = 0;
+		this.#currentCrossPx = 0;
+		this.#currentLongPx = 0;
+		this.#onSwipePointerDown = (event) => {
+			if (!this.swipeable || this.disabled) return;
+			event.preventDefault();
+			this.#applySwipeFromPointer(event);
+		};
+		this.#onSwipePointerMove = (event) => {
+			if (!this.swipeable || this.disabled || event.buttons === 0) return;
+			this.#applySwipeFromPointer(event);
+		};
+		this.#onSwipePointerEnter = (event) => {
+			if (!this.swipeable || this.disabled || event.buttons === 0) return;
+			this.#applySwipeFromPointer(event);
+		};
 		this.#onPointerDown = (event) => {
 			if (this.disabled) return;
+			if (this.swipeable) 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;
+			const clientPos = this.orientation === `vertical` ? event.clientY : event.clientX;
+			let relativeValue = this.#relativeFromTrackPos(clientPos);
 			if (this.valueMode === `single` && this.singleStyle === `unipolar`) relativeValue = Math.abs(2 * relativeValue - 1);
 			if (this.valueMode === `single`) {
 				this.#lastInteractedHandle = `a`;
@@ -373,10 +401,8 @@ let SliderInputElement = class SliderInputElement extends WheelNudgeMixin(LitEle
 		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;
+			const clientPos = this.orientation === `vertical` ? event.clientY : event.clientX;
+			let relativeValue = this.#relativeFromTrackPos(clientPos);
 			if (this.valueMode === `single` && this.singleStyle === `unipolar`) relativeValue = Math.abs(2 * relativeValue - 1);
 			if (this.valueMode === `single`) {
 				this.#setSingleValueFromRelative(relativeValue, true);
@@ -475,10 +501,8 @@ let SliderInputElement = class SliderInputElement extends WheelNudgeMixin(LitEle
 				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 clientPos = this.orientation === `vertical` ? event.clientY : event.clientX;
+			const relativeValue = this.#relativeFromTrackPos(clientPos);
 			const cursor = this.#cursorAtRelative(relativeValue);
 			if (svg.style.cursor !== cursor) svg.style.cursor = cursor;
 		};
@@ -509,13 +533,19 @@ let SliderInputElement = class SliderInputElement extends WheelNudgeMixin(LitEle
 		super.connectedCallback();
 		this.setAttribute(`tabindex`, this.disabled ? `-1` : `0`);
 		this.addEventListener(`keydown`, this.#onHostKeyDown);
+		this.addEventListener(`pointerdown`, this.#onSwipePointerDown);
+		this.addEventListener(`pointermove`, this.#onSwipePointerMove);
+		this.addEventListener(`pointerenter`, this.#onSwipePointerEnter);
 		this.#syncGradientDefs();
 		this.#gradientObserver = new MutationObserver(this.#syncGradientDefs);
 		this.#gradientObserver.observe(this, {
 			childList: true,
 			subtree: true
 		});
+		this.#sizeObserver = new ResizeObserver(this.#onHostResize);
+		this.#sizeObserver.observe(this);
 	}
+	#onHostResize;
 	#onHostKeyDown;
 	/**
 	* Lazily creates the inert `<svg><defs>` carrier that user-authored
@@ -834,6 +864,220 @@ let SliderInputElement = class SliderInputElement extends WheelNudgeMixin(LitEle
 			composed: true
 		}));
 	}
+	/**
+	* Cross-axis viewBox size for this render, hugging the actual content.
+	* Computed once per render into `#currentCross` (sub-renderers read it
+	* via `getTrackBounds(orientation, cross)` / `bounds.cross`).
+	*
+	* LONG stays fixed; only the cross axis and the long-axis end inset
+	* tighten. Pointer mapping is calibrated to the drawn track span, so
+	* clicks on the visible track ends hit min/max exactly.
+	*/
+	#currentCross;
+	/**
+	* Long-axis end insets (viewBox units) for this render: low-value end /
+	* high-value end (left/right horizontal, bottom/top vertical).
+	*/
+	#currentInsetStart;
+	#currentInsetEnd;
+	/**
+	* Lane width variable cascade for `key`:
+	*   1. `--lane-<key>-width` (explicit per-lane width)
+	*   2. for the `value` lane only: `--lane-track-width`, so the value bar
+	*      matches a customised track thickness automatically
+	*   3. for custom lanes only: the generic `--lane-width`
+	*   4. `fallback` (0.08 track / 0.12 value / 0.16 custom)
+	*
+	* Mirrors the `var()` fallback chains in `#renderLane` — the two must stay
+	* in sync or the measured viewBox diverges from the drawn strokes.
+	*/
+	#laneWidthNumber(key, fallback) {
+		const style = getComputedStyle(this);
+		const parse = (raw) => {
+			const trimmed = raw.trim();
+			if (!trimmed) return void 0;
+			const parsed = Number.parseFloat(trimmed);
+			return Number.isNaN(parsed) ? void 0 : parsed;
+		};
+		const perLane = parse(style.getPropertyValue(`--lane-${key}-width`));
+		if (perLane !== void 0) return perLane;
+		if (key === `value`) {
+			const track = parse(style.getPropertyValue(`--lane-track-width`));
+			if (track !== void 0) return track;
+			return fallback;
+		}
+		if (key !== `track`) {
+			const generic = parse(style.getPropertyValue(`--lane-width`));
+			if (generic !== void 0) return generic;
+		}
+		return fallback;
+	}
+	/**
+	* Lane `key` as screen px: width fraction × measured cross-axis px. Lane
+	* widths are fractions of the cross axis, so multiplying by the host's
+	* cross px (measured per render in #measureLanes) is exact — unlike the old
+	* `calc(var * 24%)` percentage, which resolved against the
+	* host-size-independent viewBox diagonal and painted ~10x too thin.
+	*/
+	#laneStrokePx(key) {
+		const fallback = key === `track` ? .08 : key === `value` ? .12 : .16;
+		return this.#laneWidthNumber(key, fallback) * this.#currentCrossPx;
+	}
+	/**
+	* Widest lane stroke in screen px + the host's cross-axis px, measured
+	* once per render. Lane strokes render as JS-computed px (see
+	* #laneStrokePx) with `non-scaling-stroke`, so the number paints verbatim
+	* in screen px regardless of the viewBox.
+	*/
+	#currentLanePxMax;
+	#currentCrossPx;
+	#currentLongPx;
+	#measureLanes() {
+		const rect = this.getBoundingClientRect();
+		const crossPx = this.orientation === `vertical` ? rect.width : rect.height;
+		this.#currentCrossPx = crossPx;
+		this.#currentLongPx = this.orientation === `vertical` ? rect.height : rect.width;
+		if (rect.width <= 0 || rect.height <= 0) {
+			this.#currentLanePxMax = 0;
+			return;
+		}
+		let max = 0;
+		for (const lane of this.#lanes.values()) {
+			const fallback = lane.key === `track` ? .08 : lane.key === `value` ? .12 : .16;
+			max = Math.max(max, Math.abs(this.#laneWidthNumber(lane.key, fallback)) * crossPx);
+		}
+		this.#currentLanePxMax = max;
+	}
+	/**
+	* Dot radius as a fraction of the cross axis. The fractional
+	* `--marker-thickness` size shrinks with the tight box, so a screen-px
+	* floor (widest lane + 2px) guarantees the dot always reads larger than
+	* the value track it sits on.
+	*/
+	#dotRadiusFraction() {
+		if (this.#currentCrossPx <= 0) return Math.abs(this.#getCssVar(`--marker-thickness`, .15)) / 2;
+		return this.#dotRadiusPx() / this.#currentCrossPx;
+	}
+	/** Desired dot radius in screen px (fractional size vs lane-based floor). */
+	#dotRadiusPx() {
+		const markerThickness = Math.abs(this.#getCssVar(`--marker-thickness`, .15));
+		if (this.#currentCrossPx <= 0) return 0;
+		return Math.max(markerThickness * this.#currentCrossPx / 2, this.#currentLanePxMax / 2 + 1);
+	}
+	/**
+	* Radii (viewBox units) for a screen-space circle of `rPx` px.
+	* `preserveAspectRatio="none"` scales axes differently, so a viewBox
+	* `<circle>` renders as an oval — pre-compensate with an `<ellipse>`.
+	*/
+	#circleRadiiUnits(rPx, cross) {
+		const longPx = this.#currentLongPx;
+		const crossPx = this.#currentCrossPx;
+		if (longPx <= 0 || crossPx <= 0 || cross <= 0) return {
+			rx: rPx,
+			ry: rPx
+		};
+		const longScale = longPx / 100;
+		const crossScale = crossPx / cross;
+		if (this.orientation === `vertical`) return {
+			rx: rPx / crossScale,
+			ry: rPx / longScale
+		};
+		return {
+			rx: rPx / longScale,
+			ry: rPx / crossScale
+		};
+	}
+	/** Marker styles actually rendered this render (global + triple C override). */
+	#activeMarkerStyles() {
+		if (this.valueMode === `single`) return [this.markerStyle];
+		if (this.valueMode === `triple` && this.markerStyleC) return [.../* @__PURE__ */ new Set([this.markerStyle, this.markerStyleC])];
+		return [this.markerStyle];
+	}
+	/**
+	* Largest fractional half-extent of the content, as a fraction of the
+	* (unknown) cross size: boxHalf = F * cross + pad. Markers, lane widths
+	* and offsets are all defined as fractions of the cross axis, so the
+	* tightest box is the fixed point cross = pad / (0.5 - F).
+	*/
+	#contentFraction() {
+		let f = 0;
+		for (const lane of this.#lanes.values()) {
+			const fallback = lane.key === `track` ? .08 : lane.key === `value` ? .12 : .16;
+			const w = this.#laneWidthNumber(lane.key, fallback);
+			f = Math.max(f, Math.abs(w) / 2 + Math.abs(lane.offset) / 2);
+		}
+		const markerOffset = Math.abs(this.#getCssVar(`--marker-offset`, 0));
+		const markerLength = Math.abs(this.#getCssVar(`--marker-length`, .8));
+		const styleF = (marker) => {
+			if (marker === `none`) return 0;
+			if (marker === `dot`) return this.#dotRadiusFraction() + markerOffset / 2;
+			return markerLength / 4 + markerOffset / 2;
+		};
+		for (const marker of this.#activeMarkerStyles()) f = Math.max(f, styleF(marker));
+		if (this.valueMode === `single` && (this.singleStyle === `bipolar` || this.singleStyle === `unipolar`)) {
+			const midLength = Math.abs(this.#getCssVar(`--midpoint-length`, .15));
+			f = Math.max(f, midLength / 4);
+		}
+		const trackWidth = Math.abs(this.#getCssVar(`--track-width`, 2));
+		f = Math.max(f, trackWidth / 2 / 24);
+		return Math.min(f, .45);
+	}
+	#computeCross() {
+		return clamp(2 / (.5 - this.#contentFraction()), 4, 40);
+	}
+	/**
+	* Long-axis end inset (viewBox units) hugging the markers: dot/triangle
+	* markers extend half their width past the track ends at min/max, so the
+	* inset is that extent plus a stroke pad. Needle markers are
+	* perpendicular to the track and need no along-axis room beyond the pad.
+	*
+	* Authored `--track-margin` (both ends) / `--track-margin-start` /
+	* `--track-margin-end` (viewBox units) are added on top, so demos can
+	* reserve room for things like anchored lanes that overhang the value
+	* at the extremes. Start = low-value end (left / bottom).
+	*/
+	#computeInsets(cross) {
+		const markerThickness = Math.abs(this.#getCssVar(`--marker-thickness`, .15));
+		const dotHalf = this.#currentLongPx > 0 ? this.#dotRadiusPx() * 100 / this.#currentLongPx : this.#dotRadiusFraction() * cross;
+		let half = 0;
+		for (const marker of this.#activeMarkerStyles()) if (marker === `dot`) half = Math.max(half, dotHalf);
+		else if (marker === `triangle`) half = Math.max(half, markerThickness * cross / 4);
+		const base = clamp(half + 1.5, 1, 5);
+		const both = Math.max(0, this.#getCssVar(`--track-margin`, 0));
+		const extraStart = Math.max(0, this.#getCssVar(`--track-margin-start`, both));
+		const extraEnd = Math.max(0, this.#getCssVar(`--track-margin-end`, both));
+		let start = base + extraStart;
+		let end = base + extraEnd;
+		const maxTotal = 90;
+		if (start + end > maxTotal && start + end > 0) {
+			const scale = maxTotal / (start + end);
+			start *= scale;
+			end *= scale;
+		}
+		return {
+			start,
+			end
+		};
+	}
+	/**
+	* Pointer client position (clientX/clientY along the long axis) mapped
+	* onto the *drawn track span* (0 at track start, 1 at track end, clamped;
+	* flipped for vertical where the top is the high value). Mapping to the
+	* track rather than the host edges means the visible track ends hit
+	* min/max exactly and no horizontal space is dead.
+	*/
+	#relativeFromTrackPos(clientPos) {
+		const rect = this.getBoundingClientRect();
+		const isVertical = this.orientation === `vertical`;
+		const hostStart = isVertical ? rect.top : rect.left;
+		const hostSize = isVertical ? rect.height : rect.width;
+		if (hostSize <= 0) return 0;
+		const trackStart = hostStart + hostSize * this.#currentInsetStart / 100;
+		const trackSpan = hostSize * (100 - this.#currentInsetStart - this.#currentInsetEnd) / 100;
+		if (trackSpan <= 0) return 0;
+		const raw = clamp((clientPos - trackStart) / trackSpan, 0, 1);
+		return isVertical ? 1 - raw : raw;
+	}
 	#getCssVar(name, defaultValue) {
 		const style = getComputedStyle(this);
 		const val = style.getPropertyValue(name).trim();
@@ -856,6 +1100,49 @@ let SliderInputElement = class SliderInputElement extends WheelNudgeMixin(LitEle
 		const parsed = Number.parseFloat(val);
 		return Number.isNaN(parsed) ? defaultValue : parsed;
 	}
+	/**
+	* Track-span-relative 0..1 position for a pointer event, with vertical
+	* flip and unipolar V-shape mapping applied. Positions outside the drawn
+	* track are clamped to 0..1.
+	*/
+	#relativeFromSwipePointer(event) {
+		const clientPos = this.orientation === `vertical` ? event.clientY : event.clientX;
+		const relativeValue = this.#relativeFromTrackPos(clientPos);
+		if (this.valueMode === `single` && this.singleStyle === `unipolar`) return Math.abs(2 * relativeValue - 1);
+		return relativeValue;
+	}
+	/**
+	* Apply a swipe value from a pointer coordinate. Single mode sets
+	* value-A directly; dual/triple modes move the nearest handle.
+	* Focus follows the slider being controlled, so keyboard/wheel keep
+	* working on the slider under the cursor as a swipe travels across
+	* adjacent sliders (no-op when already focused).
+	*/
+	#applySwipeFromPointer(event) {
+		this.focus();
+		const relativeValue = this.#relativeFromSwipePointer(event);
+		if (this.valueMode === `single`) {
+			this.#lastInteractedHandle = `a`;
+			this.#setSingleValueFromRelative(relativeValue, true);
+			return;
+		}
+		const aRel = this.#getRelativeValueA();
+		const bRel = this.#getRelativeValueB();
+		let nearest = Math.abs(relativeValue - aRel) <= Math.abs(relativeValue - bRel) ? `a` : `b`;
+		if (this.valueMode === `triple`) {
+			const cRel = this.#getRelativeValueC();
+			const distA = Math.abs(relativeValue - aRel);
+			const distB = Math.abs(relativeValue - bRel);
+			const distC = Math.abs(relativeValue - cRel);
+			nearest = distA <= distB && distA <= distC ? `a` : distB <= distC ? `b` : `c`;
+		}
+		if (nearest === `a` || nearest === `b`) this.#lastInteractedHandle = nearest;
+		else this.#lastInteractedHandle = `c`;
+		this.#setDualOrTripleValueFromRelative(relativeValue, nearest, true);
+	}
+	#onSwipePointerDown;
+	#onSwipePointerMove;
+	#onSwipePointerEnter;
 	#onPointerDown;
 	#onPointerMove;
 	#applyLengthDragFromRelative(relativeValue) {
@@ -965,21 +1252,25 @@ let SliderInputElement = class SliderInputElement extends WheelNudgeMixin(LitEle
 	}
 	#onFocusIn;
 	#viewBox() {
-		if (this.orientation === `horizontal`) return `0 0 100 24`;
-		return `0 0 24 100`;
+		const cross = this.#currentCross;
+		if (this.orientation === `horizontal`) return `0 0 100 ${cross}`;
+		return `0 0 ${cross} 100`;
 	}
 	#renderTrack() {
 		const isVertical = this.orientation === `vertical`;
+		const cross = this.#currentCross;
+		const insetStart = this.#currentInsetStart;
+		const insetEnd = this.#currentInsetEnd;
 		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}"
+          x="${cross / 2 - strokeWidth / 2}"
+          y="${insetStart}"
           width="${strokeWidth}"
-          height="${90}"
+          height="${100 - insetStart - insetEnd}"
           fill="${fill}"
           stroke="${color}"
           stroke-width="0"
@@ -988,9 +1279,9 @@ let SliderInputElement = class SliderInputElement extends WheelNudgeMixin(LitEle
 		return svg`
       <rect
         class="track"
-        x="${5}"
-        y="${12 - strokeWidth / 2}"
-        width="${90}"
+        x="${insetStart}"
+        y="${cross / 2 - strokeWidth / 2}"
+        width="${100 - insetStart - insetEnd}"
         height="${strokeWidth}"
         fill="${fill}"
         stroke="${color}"
@@ -1002,7 +1293,7 @@ let SliderInputElement = class SliderInputElement extends WheelNudgeMixin(LitEle
 		return getComputedStyle(this).getPropertyValue(name).trim() || fallback;
 	}
 	#renderLane(lane) {
-		const bounds = getTrackBounds(this.orientation);
+		const bounds = getTrackBounds(this.orientation, this.#currentCross, this.#currentInsetStart, this.#currentInsetEnd);
 		let path = ``;
 		if (lane.type === `fixed`) path = generateLinePath(this.orientation === `horizontal` ? {
 			x: bounds.trackStart,
@@ -1025,9 +1316,9 @@ let SliderInputElement = class SliderInputElement extends WheelNudgeMixin(LitEle
 			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)`;
+		const w = `${this.#laneStrokePx(lane.key)}px`;
+		const offsetPx = lane.offset * this.#currentCrossPx / 2;
+		const transform = this.orientation === `horizontal` ? `translateY(${offsetPx}px)` : `translateX(${offsetPx}px)`;
 		return svg`
       <path
         class="lane"
@@ -1036,14 +1327,15 @@ let SliderInputElement = class SliderInputElement extends WheelNudgeMixin(LitEle
         d="${path}"
         style="
           stroke-width: ${w};
-          stroke-linecap: round;
+          stroke-linecap: var(--lane-linecap, round);
           transform: ${transform};
         "
       />
     `;
 	}
 	#renderValueMarker(handle, defs) {
-		const bounds = getTrackBounds(this.orientation);
+		const bounds = getTrackBounds(this.orientation, this.#currentCross, this.#currentInsetStart, this.#currentInsetEnd);
+		const cross = bounds.cross;
 		const isHorizontal = this.orientation === `horizontal`;
 		let value;
 		if (this.valueMode === `single`) value = this.#getRelativeValueA();
@@ -1057,9 +1349,9 @@ let SliderInputElement = class SliderInputElement extends WheelNudgeMixin(LitEle
 		const markerBorderWidth = this.#getCssVar(`--marker-border-width`, 0);
 		const center = isHorizontal ? {
 			x: pos.x,
-			y: bounds.crossCentre + markerOffset * 12
+			y: bounds.crossCentre + markerOffset * (cross / 2)
 		} : {
-			x: bounds.crossCentre + markerOffset * 12,
+			x: bounds.crossCentre + markerOffset * (cross / 2),
 			y: pos.y
 		};
 		const lowCenter = this.valueMode === `single` && this.singleStyle === `unipolar` ? isHorizontal ? {
@@ -1072,23 +1364,23 @@ let SliderInputElement = class SliderInputElement extends WheelNudgeMixin(LitEle
 		const id = handle ?? `s`;
 		const effectiveMarkerStyle = handle === `c` && this.markerStyleC ? this.markerStyleC : this.markerStyle;
 		if (effectiveMarkerStyle === `dot`) {
-			const r = markerThickness * 12;
+			const { rx, ry } = this.#circleRadiiUnits(this.#dotRadiusPx(), cross);
 			const renderDot = (cx, cy, mid) => {
 				if (markerBorderWidth > 0) {
-					defs.push(svg`<circle id="dot-${mid}-path" cx="${cx}" cy="${cy}" r="${r}" />`);
+					defs.push(svg`<ellipse id="dot-${mid}-path" cx="${cx}" cy="${cy}" rx="${rx}" ry="${ry}" />`);
 					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}" />`;
+				return svg`<ellipse cx="${cx}" cy="${cy}" rx="${rx}" ry="${ry}" />`;
 			};
 			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 halfLen = markerLength * cross / 4;
 			const renderNeedle = (cx, cy, mid) => {
 				let start;
 				let end;
@@ -1126,8 +1418,8 @@ let SliderInputElement = class SliderInputElement extends WheelNudgeMixin(LitEle
 			return high;
 		}
 		if (effectiveMarkerStyle === `triangle`) {
-			const halfLen = markerLength * 24 / 4;
-			const halfBase = markerThickness * 12;
+			const halfLen = markerLength * cross / 4;
+			const halfBase = markerThickness * cross / 4;
 			const renderTriangle = (cx, cy, mid) => {
 				let apex;
 				let base1;
@@ -1178,9 +1470,10 @@ let SliderInputElement = class SliderInputElement extends WheelNudgeMixin(LitEle
 	#renderMidpointMarker() {
 		if (this.valueMode !== `single`) return svg``;
 		if (this.singleStyle !== `bipolar` && this.singleStyle !== `unipolar`) return svg``;
-		const bounds = getTrackBounds(this.orientation);
+		const bounds = getTrackBounds(this.orientation, this.#currentCross, this.#currentInsetStart, this.#currentInsetEnd);
+		const cross = bounds.cross;
 		const isHorizontal = this.orientation === `horizontal`;
-		const halfLen = this.#getCssVar(`--midpoint-length`, .15) * 24 / 4;
+		const halfLen = this.#getCssVar(`--midpoint-length`, .15) * cross / 4;
 		const center = isHorizontal ? {
 			x: bounds.centre,
 			y: bounds.crossCentre
@@ -1190,9 +1483,11 @@ let SliderInputElement = class SliderInputElement extends WheelNudgeMixin(LitEle
 		};
 		if (this.markerStyle === `dot`) {
 			const size = this.#getCssVar(`--midpoint-thickness`, .08);
+			const rPx = this.#currentCrossPx > 0 ? size * this.#currentCrossPx / 2 : size * (cross / 2);
+			const { rx, ry } = this.#circleRadiiUnits(rPx, cross);
 			return svg`
         <g class="midpoint-marker" part="midpoint-marker">
-          <circle cx="${center.x}" cy="${center.y}" r="${size * 12}" />
+          <ellipse cx="${center.x}" cy="${center.y}" rx="${rx}" ry="${ry}" />
         </g>
       `;
 		}
@@ -1289,6 +1584,11 @@ let SliderInputElement = class SliderInputElement extends WheelNudgeMixin(LitEle
 		}
 	}
 	render() {
+		this.#measureLanes();
+		this.#currentCross = this.#computeCross();
+		const insets = this.#computeInsets(this.#currentCross);
+		this.#currentInsetStart = insets.start;
+		this.#currentInsetEnd = insets.end;
 		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` ? [
@@ -1303,7 +1603,7 @@ let SliderInputElement = class SliderInputElement extends WheelNudgeMixin(LitEle
         class="slider-svg"
         viewBox="${this.#viewBox()}"
         preserveAspectRatio="none"
-        tabindex="${this.disabled ? -1 : 0}"
+        tabindex="-1"
         style="cursor: ${cursor}; width: 100%; height: 100%;"
         @pointerdown="${this.#onPointerDown}"
         @pointermove="${this.#onPointerMoveCursor}"
@@ -1380,8 +1680,13 @@ let SliderInputElement = class SliderInputElement extends WheelNudgeMixin(LitEle
 	disconnectedCallback() {
 		super.disconnectedCallback();
 		this.removeEventListener(`keydown`, this.#onHostKeyDown);
+		this.removeEventListener(`pointerdown`, this.#onSwipePointerDown);
+		this.removeEventListener(`pointermove`, this.#onSwipePointerMove);
+		this.removeEventListener(`pointerenter`, this.#onSwipePointerEnter);
 		this.#gradientObserver?.disconnect();
 		this.#gradientObserver = void 0;
+		this.#sizeObserver?.disconnect();
+		this.#sizeObserver = void 0;
 		if (this.#changeDebounceTimer !== void 0) {
 			clearTimeout(this.#changeDebounceTimer);
 			this.#changeDebounceTimer = void 0;
@@ -1396,7 +1701,7 @@ let SliderInputElement = class SliderInputElement extends WheelNudgeMixin(LitEle
     :host {
       display: inline-block;
       width: 200px;
-      height: 24px;
+      height: 12px;
       touch-action: none;
       user-select: none;
       tabindex: 0;
@@ -1406,12 +1711,10 @@ let SliderInputElement = class SliderInputElement extends WheelNudgeMixin(LitEle
       --value-c-relative: 0;
 
       --lane-width: 0.16;
-      --lane-track-width: 0.08;
-      --lane-value-width: 0.12;
     }
 
     :host([orientation="vertical"]) {
-      width: 24px;
+      width: 12px;
       height: 200px;
     }
 
@@ -1429,6 +1732,7 @@ let SliderInputElement = class SliderInputElement extends WheelNudgeMixin(LitEle
     }
 
     svg.slider-svg {
+      display: block;
       width: 100%;
       height: 100%;
       outline: none;
@@ -1439,20 +1743,27 @@ let SliderInputElement = class SliderInputElement extends WheelNudgeMixin(LitEle
       outline: none;
     }
 
-    svg.slider-svg:focus-visible,
-    :host(:focus-visible) svg.slider-svg {
+    svg.slider-svg:focus-visible {
       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);
+      /* Default 0 (not the stroke-width="0" attribute below, which this
+         rule overrides): the lanes carry the default visuals, so the rect
+         is an opt-in backdrop via --track-fill / --track-width. A nonzero
+         default here ballooned with the tight viewBox (2 units ≈ 60% of
+         the cross axis) and swamped the lanes. */
+      stroke-width: var(--track-width, 0);
     }
 
     .lane {
       fill: none;
-      stroke-linecap: round;
+      /* Rounded ends by default; set --lane-linecap: butt for square ends
+         (reads cleaner under a needle/line marker). The inline style on the
+         <path> repeats this so it wins over authored .lane rules. */
+      stroke-linecap: var(--lane-linecap, round);
       stroke-dasharray: var(--lane-dasharray, none);
       stroke-dashoffset: var(--lane-dashoffset, 0);
       vector-effect: non-scaling-stroke;
@@ -1585,8 +1896,12 @@ __decorate([property({
 	type: Boolean,
 	reflect: true
 })], SliderInputElement.prototype, "disabled", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], SliderInputElement.prototype, "swipeable", void 0);
 SliderInputElement = __decorate([safeCustomElement(`ixfx-slider-input`)], SliderInputElement);
 //#endregion
 export { SliderInputElement as t };
 
-//# sourceMappingURL=slider-input-CT4gcF-o.js.map
+//# sourceMappingURL=slider-input-De4eoT11.js.map