@ixfx/components 0.2.4 → 0.2.5

package/dist/radial-input-CNJ8asY2.js

@@ -0,0 +1,849 @@
+import { t as __decorate } from "./decorate-BZbkqIhA.js";
+import { t as prominenceStyles } from "./prominence-CreDBdCs.js";
+import { t as resolveStep } from "./keyboard-De_vOHLg.js";
+import { LitElement, css, html, svg } from "lit";
+import { customElement, property } from "lit/decorators.js";
+//#region src/radial-input/svg-utils.ts
+const PI2 = Math.PI * 2;
+const MIDPOINT_ANGLE = -Math.PI / 2;
+/**
+* Convert polar coordinates (angle in radians, radius) to SVG Cartesian coordinates
+* @param angle - Angle in radians (0 = right/east, increases clockwise in SVG)
+* @param radius - Distance from center
+* @param center - Center point (default: {x: 50, y: 50})
+* @returns Point in SVG coordinates
+*/
+function polarToCartesian(angle, radius, center = {
+	x: 50,
+	y: 50
+}) {
+	return {
+		x: center.x + Math.cos(angle) * radius,
+		y: center.y + Math.sin(angle) * radius
+	};
+}
+/**
+* Calculate start and end angles for a flattened circle
+* @param flatten - How much of the circle to hide (0..1): 0 = full circle, 0.5 = half circle, 1 = no arc
+* @returns Start and end angles in radians
+*/
+function getFlattenedCircleAngles(flatten) {
+	const halfArc = PI2 * (1 - flatten) / 2;
+	const topAngle = -Math.PI / 2;
+	const startAngle = topAngle - halfArc;
+	const endAngle = topAngle + halfArc;
+	return {
+		startAngle,
+		endAngle,
+		totalArc: endAngle - startAngle
+	};
+}
+/**
+* Map a value (0..1) to an angle based on value mode
+* @param relativeValue - Value in 0..1 range
+* @param valueMode - How to interpret the value
+* @param flatten - Circle flattening amount (0..1)
+* @returns Angle in radians
+*/
+function valueToAngle(relativeValue, valueMode, flatten) {
+	const { startAngle, endAngle, totalArc } = getFlattenedCircleAngles(flatten);
+	switch (valueMode) {
+		case "range": return startAngle + relativeValue * totalArc;
+		case "bipolar": if (relativeValue <= .5) return startAngle + relativeValue / .5 * (MIDPOINT_ANGLE - startAngle);
+		else return MIDPOINT_ANGLE + (relativeValue - .5) / .5 * (endAngle - MIDPOINT_ANGLE);
+		case "unipolar": return MIDPOINT_ANGLE;
+		default: return startAngle;
+	}
+}
+/**
+* Get start and end angles for a value arc
+* @param relativeValue - Value in 0..1 range
+* @param valueMode - How to interpret the value
+* @param flatten - Circle flattening amount (0..1)
+* @returns Start and end angles for the arc
+*/
+function getValueArcAngles(relativeValue, valueMode, flatten) {
+	const { startAngle, endAngle, totalArc } = getFlattenedCircleAngles(flatten);
+	switch (valueMode) {
+		case "range": return {
+			startAngle,
+			endAngle: startAngle + relativeValue * totalArc
+		};
+		case "bipolar": if (relativeValue < .5) return {
+			startAngle: startAngle + relativeValue / .5 * (MIDPOINT_ANGLE - startAngle),
+			endAngle: MIDPOINT_ANGLE
+		};
+		else if (relativeValue > .5) return {
+			startAngle: MIDPOINT_ANGLE,
+			endAngle: MIDPOINT_ANGLE + (relativeValue - .5) / .5 * (endAngle - MIDPOINT_ANGLE)
+		};
+		else return {
+			startAngle: MIDPOINT_ANGLE,
+			endAngle: MIDPOINT_ANGLE
+		};
+		case "unipolar": {
+			const spreadAmount = relativeValue * totalArc / 2;
+			return {
+				startAngle: MIDPOINT_ANGLE - spreadAmount,
+				endAngle: MIDPOINT_ANGLE + spreadAmount
+			};
+		}
+		default: return {
+			startAngle,
+			endAngle: startAngle
+		};
+	}
+}
+/**
+* Get start and end angles for an anchored arc
+* Centered on current value position, extends equally in both directions
+* @param relativeValue - Current value position (0..1)
+* @param laneValue - Width of the arc (0..1, where 1 = full range)
+* @param valueMode - How to interpret the value
+* @param flatten - Circle flattening amount (0..1)
+* @returns Start and end angles for the arc
+*/
+function getAnchoredArcAngles(relativeValue, laneValue, valueMode, flatten) {
+	const { startAngle, endAngle, totalArc } = getFlattenedCircleAngles(flatten);
+	const centerAngle = valueToAngle(relativeValue, valueMode, flatten);
+	const halfWidth = laneValue * totalArc / 2;
+	let arcStart = centerAngle - halfWidth;
+	let arcEnd = centerAngle + halfWidth;
+	if (arcStart < startAngle) arcStart = startAngle;
+	if (arcEnd > endAngle) arcEnd = endAngle;
+	if (arcStart >= arcEnd) return {
+		startAngle: centerAngle,
+		endAngle: centerAngle
+	};
+	return {
+		startAngle: arcStart,
+		endAngle: arcEnd
+	};
+}
+/**
+* Generate SVG path for an arc
+* @param startAngle - Start angle in radians
+* @param endAngle - End angle in radians
+* @param radius - Arc radius
+* @param center - Center point
+* @returns SVG path data string
+*/
+function generateArcPath(startAngle, endAngle, radius, center = {
+	x: 50,
+	y: 50
+}) {
+	if (startAngle === endAngle) return "";
+	let arcLength = endAngle - startAngle;
+	if (arcLength < 0) arcLength += PI2;
+	if (arcLength >= PI2 - .001) {
+		const adjustedEnd = startAngle + PI2 - .001;
+		const start = polarToCartesian(startAngle, radius, center);
+		const end = polarToCartesian(adjustedEnd, radius, center);
+		return `M ${start.x},${start.y} A ${radius},${radius} 0 1 1 ${end.x},${end.y}`;
+	}
+	const start = polarToCartesian(startAngle, radius, center);
+	const end = polarToCartesian(endAngle, radius, center);
+	const largeArcFlag = arcLength > Math.PI ? 1 : 0;
+	return `M ${start.x},${start.y} A ${radius},${radius} 0 ${largeArcFlag} 1 ${end.x},${end.y}`;
+}
+/**
+* Generate SVG path for a full flattened circle border
+* @param radius - Circle radius
+* @param flatten - Flattening amount (0..1)
+* @param center - Center point
+* @returns SVG path data string
+*/
+function generateCircleBorderPath(radius, flatten, center = {
+	x: 50,
+	y: 50
+}) {
+	const { startAngle, endAngle } = getFlattenedCircleAngles(flatten);
+	return generateArcPath(startAngle, endAngle, radius, center);
+}
+/**
+* Generate SVG path data for a filled wedge (pie-slice) sector
+* @param startAngle - Start angle in radians
+* @param endAngle - End angle in radians
+* @param radius - Wedge radius (same as dial radius)
+* @param center - Center point
+* @param clockwise - Whether to draw arc clockwise (true) or counterclockwise (false)
+* @returns SVG path data string for filled wedge
+*/
+function generateWedgePath(startAngle, endAngle, radius, center = {
+	x: 50,
+	y: 50
+}, clockwise = true) {
+	if (startAngle === endAngle) return "";
+	let arcLength = endAngle - startAngle;
+	if (arcLength < 0) arcLength += PI2;
+	if (arcLength >= PI2 - .001) {
+		const start = polarToCartesian(startAngle, radius, center);
+		const adjEnd = polarToCartesian(startAngle + PI2 - .001, radius, center);
+		const largeArcFlag = 1;
+		const sweepFlag = clockwise ? 1 : 0;
+		return `M ${center.x},${center.y} L ${start.x},${start.y} A ${radius},${radius} 0 ${largeArcFlag} ${sweepFlag} ${adjEnd.x},${adjEnd.y} Z`;
+	}
+	let actualStartAngle = startAngle;
+	let actualEndAngle = endAngle;
+	let actualClockwise = clockwise;
+	if (!clockwise && arcLength > Math.PI) {
+		actualStartAngle = endAngle;
+		actualEndAngle = startAngle;
+		actualClockwise = true;
+		arcLength = PI2 - arcLength;
+	}
+	const start = polarToCartesian(actualStartAngle, radius, center);
+	const end = polarToCartesian(actualEndAngle, radius, center);
+	const largeArcFlag = arcLength > Math.PI ? 1 : 0;
+	const sweepFlag = actualClockwise ? 1 : 0;
+	return `M ${center.x},${center.y} L ${start.x},${start.y} A ${radius},${radius} 0 ${largeArcFlag} ${sweepFlag} ${end.x},${end.y} Z`;
+}
+/**
+* Get wedge angles based on value mode
+* @param relativeValue - Value in 0..1 range
+* @param valueMode - How to interpret the value
+* @param flatten - Circle flattening amount (0..1)
+* @returns Object with startAngle, endAngle, and clockwise flag
+*/
+function getWedgeAngles(relativeValue, valueMode, flatten) {
+	const { startAngle, endAngle, totalArc } = getFlattenedCircleAngles(flatten);
+	const valueAngle = valueToAngle(relativeValue, valueMode, flatten);
+	switch (valueMode) {
+		case "range": return {
+			startAngle,
+			endAngle: valueAngle,
+			clockwise: true
+		};
+		case "bipolar": if (relativeValue < .5) return {
+			startAngle: MIDPOINT_ANGLE,
+			endAngle: valueAngle,
+			clockwise: false
+		};
+		else return {
+			startAngle: MIDPOINT_ANGLE,
+			endAngle: valueAngle,
+			clockwise: true
+		};
+		case "unipolar": {
+			const halfSpread = relativeValue * totalArc / 2;
+			return {
+				startAngle: MIDPOINT_ANGLE - halfSpread,
+				endAngle: MIDPOINT_ANGLE + halfSpread,
+				clockwise: true
+			};
+		}
+		default: return {
+			startAngle,
+			endAngle: startAngle,
+			clockwise: true
+		};
+	}
+}
+/**
+* Get position for a marker (needle or dot) at a given value
+* @param relativeValue - Value in 0..1 range
+* @param valueMode - How to interpret the value
+* @param flatten - Circle flattening amount (0..1)
+* @param radius - Circle radius
+* @param center - Center point
+* @returns Angle in radians and position point
+*/
+function getMarkerPosition(relativeValue, valueMode, flatten, radius, center = {
+	x: 50,
+	y: 50
+}) {
+	const angle = valueToAngle(relativeValue, valueMode, flatten);
+	return {
+		angle,
+		position: polarToCartesian(angle, radius, center)
+	};
+}
+/**
+* Get position for midpoint marker (used in bipolar/unipolar modes)
+* @param radius - Circle radius
+* @param center - Center point
+* @returns Position at top-center of circle
+*/
+function getMidpointPosition(radius, center = {
+	x: 50,
+	y: 50
+}) {
+	return {
+		angle: MIDPOINT_ANGLE,
+		position: polarToCartesian(MIDPOINT_ANGLE, radius, center)
+	};
+}
+/**
+* Clamp a value between min and max
+*/
+function clamp(value, min, max) {
+	return Math.min(Math.max(value, min), max);
+}
+/**
+* Scale a value from one range to another
+*/
+function scale(value, fromMin, fromMax, toMin, toMax) {
+	return toMin + (value - fromMin) / (fromMax - fromMin) * (toMax - toMin);
+}
+//#endregion
+//#region src/radial-input/radial-input.ts
+const CENTER = {
+	x: 50,
+	y: 50
+};
+let RadialInputElement = class RadialInputElement extends LitElement {
+	#_radius;
+	get radius() {
+		return this.#_radius;
+	}
+	set radius(v) {
+		this.#_radius = clamp(v, 10, 50);
+	}
+	#lanes;
+	#dragging;
+	#dragStartY;
+	#valueAtDragStart;
+	#changeDebounceTimer;
+	#isUserInteraction;
+	constructor() {
+		super();
+		this.#_radius = 45;
+		this.value = 0;
+		this.min = 0;
+		this.max = 100;
+		this.step = void 0;
+		this.valueMode = `range`;
+		this.flatten = .3;
+		this.markerStyle = `needle`;
+		this.wedge = false;
+		this.disabled = false;
+		this.#lanes = /* @__PURE__ */ new Map();
+		this.#dragging = false;
+		this.#dragStartY = 0;
+		this.#valueAtDragStart = 0;
+		this.#isUserInteraction = false;
+		this.#onPointerDown = (event) => {
+			if (this.disabled) return;
+			event.preventDefault();
+			const svg = this.renderRoot.querySelector(`svg`);
+			svg?.focus();
+			this.#dragging = true;
+			this.#dragStartY = event.clientY;
+			this.#valueAtDragStart = this.value;
+			this.toggleAttribute(`dragging`, true);
+			if (svg) svg.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(clamp(relativeValue, 0, 1), true);
+		};
+		this.#onPointerUp = () => {
+			this.#dragging = false;
+			this.toggleAttribute(`dragging`, false);
+			const svg = this.renderRoot.querySelector(`svg`);
+			if (svg && `hasPointerCapture` in svg && typeof svg.hasPointerCapture === `function`) {
+				if (svg.hasPointerCapture(1)) svg.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 shiftDivisor = event.shiftKey ? 10 : 1;
+			const range = this.max - this.min;
+			const effectiveStep = resolveStep(range, this.stops, this.step) / shiftDivisor;
+			let handled = false;
+			switch (event.key) {
+				case `ArrowUp`:
+				case `ArrowRight`:
+					this.#setValueFromRelative(this.#getRelativeValue() + effectiveStep / range, true);
+					handled = true;
+					break;
+				case `ArrowDown`:
+				case `ArrowLeft`:
+					this.#setValueFromRelative(this.#getRelativeValue() - effectiveStep / range, true);
+					handled = true;
+					break;
+				case `Home`:
+					this.#setValueFromRelative(0, true);
+					handled = true;
+					break;
+				case `End`:
+					this.#setValueFromRelative(1, true);
+					handled = true;
+					break;
+			}
+			if (handled) event.preventDefault();
+		};
+		this.#lanes.set(`track`, {
+			key: `track`,
+			value: 1,
+			type: `fixed`,
+			offset: 0,
+			width: .16
+		});
+		this.#lanes.set(`value`, {
+			key: `value`,
+			value: 0,
+			type: `value`,
+			offset: 0,
+			width: .24
+		});
+	}
+	addLane(key, options) {
+		const relativeValue = this.#getRelativeValue();
+		this.#lanes.set(key, {
+			key,
+			value: options?.value ?? relativeValue,
+			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();
+		}
+	}
+	removeLane(key) {
+		this.#lanes.delete(key);
+		this.requestUpdate();
+	}
+	getLanes() {
+		return new Map(this.#lanes);
+	}
+	getLane(key) {
+		return this.#lanes.get(key);
+	}
+	#getRelativeValue() {
+		return scale(this.value, this.min, this.max, 0, 1);
+	}
+	#getEffectiveMarkerStyle() {
+		if (this.valueMode === `unipolar` && this.markerStyle === `needle`) return `none`;
+		return this.markerStyle;
+	}
+	#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(clamp(newValue, this.min, this.max));
+		if (clampedValue === this.value) return;
+		const previousValue = this.value;
+		this.value = clampedValue;
+		this.#isUserInteraction = isUserInteraction;
+		const valueLane = this.#lanes.get(`value`);
+		if (valueLane && valueLane.type === `value`) valueLane.value = this.#getRelativeValue();
+		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;
+	#renderCircleBorder() {
+		const path = generateCircleBorderPath(this.radius, this.flatten, CENTER);
+		const borderWidth = this.#getCssVar(`--dial-border-width`, 2);
+		return svg`<path class="dial-border" d="${path}" fill="none" stroke="${getComputedStyle(this).getPropertyValue(`--dial-border-color`).trim() || `var(--surface-4)`}" stroke-width="${borderWidth}" stroke-linecap="round" vector-effect="non-scaling-stroke" />`;
+	}
+	#renderCircleFill() {
+		return svg`<path class="dial-fill" d="${generateCircleBorderPath(this.radius, this.flatten, CENTER)}" fill="${getComputedStyle(this).getPropertyValue(`--dial-fill`).trim() || `transparent`}" />`;
+	}
+	#renderWedge() {
+		const { startAngle, endAngle, clockwise } = getWedgeAngles(this.#getRelativeValue(), this.valueMode, this.flatten);
+		const path = generateWedgePath(startAngle, endAngle, this.radius, CENTER, clockwise);
+		if (!path) return svg``;
+		return svg`<path class="wedge" d="${path}" />`;
+	}
+	#renderLane(lane) {
+		let arcPath = ``;
+		if (lane.type === `fixed`) arcPath = generateCircleBorderPath(this.radius - lane.offset * this.radius, this.flatten, CENTER);
+		else if (lane.type === `anchored`) {
+			const { startAngle, endAngle } = getAnchoredArcAngles(this.#getRelativeValue(), lane.value, this.valueMode, this.flatten);
+			arcPath = generateArcPath(startAngle, endAngle, this.radius - lane.offset * this.radius, CENTER);
+		} else {
+			const { startAngle, endAngle } = getValueArcAngles(lane.value, this.valueMode, this.flatten);
+			arcPath = generateArcPath(startAngle, endAngle, this.radius - lane.offset * this.radius, CENTER);
+		}
+		if (!arcPath) return svg``;
+		return svg`
+      <path 
+        class="lane" 
+        data-lane-key="${lane.key}" 
+        part="lane lane-${lane.key}"
+        d="${arcPath}"
+        style="
+          stroke-width: calc(var(--lane-${lane.key}-width, var(--lane-width)) * ${this.radius}%);
+          stroke-linecap: round;
+        "
+      />
+    `;
+	}
+	#getNeedlePath(angle, length, offset) {
+		const startRadius = offset * this.radius;
+		const endRadius = length * this.radius;
+		const start = {
+			x: CENTER.x + Math.cos(angle) * startRadius,
+			y: CENTER.y + Math.sin(angle) * startRadius
+		};
+		const end = {
+			x: CENTER.x + Math.cos(angle) * endRadius,
+			y: CENTER.y + Math.sin(angle) * endRadius
+		};
+		return `M ${start.x} ${start.y} L ${end.x} ${end.y}`;
+	}
+	#renderValueMarker(needlePath) {
+		const { angle, position } = getMarkerPosition(this.#getRelativeValue(), this.valueMode, this.flatten, this.radius, CENTER);
+		const markerOffset = this.#getCssVar(`--marker-offset`, 1);
+		const markerBorderWidth = this.#getCssVar(`--marker-border-width`, 0);
+		const effectiveStyle = this.#getEffectiveMarkerStyle();
+		if (effectiveStyle === `dot`) {
+			const r = this.#getCssVar(`--marker-thickness`, .15) * this.radius;
+			const dotX = CENTER.x + (position.x - CENTER.x) * markerOffset;
+			const dotY = CENTER.y + (position.y - CENTER.y) * markerOffset;
+			if (markerBorderWidth > 0) return svg`
+          <g class="value-marker" part="value-marker">
+            <use href="#dot-path" class="marker-border" />
+            <use href="#dot-path" class="marker-fill" />
+          </g>
+        `;
+			return svg`
+        <g class="value-marker" part="value-marker">
+          <circle cx="${dotX}" cy="${dotY}" r="${r}" />
+        </g>
+      `;
+		} else if (effectiveStyle === `needle`) {
+			if (markerBorderWidth > 0 && needlePath) return svg`
+          <g class="value-marker" part="value-marker">
+            <use href="#needle-path" class="marker-border" />
+            <use href="#needle-path" class="marker-fill" />
+          </g>
+        `;
+			const length = this.#getCssVar(`--marker-length`, .8);
+			const offset = this.#getCssVar(`--marker-offset`, .2);
+			return svg`
+        <g class="value-marker" part="value-marker">
+          <path d="${this.#getNeedlePath(angle, length, offset)}" />
+        </g>
+      `;
+		}
+	}
+	#renderMidpointMarker() {
+		if (this.valueMode !== `bipolar` && this.valueMode !== `unipolar`) return svg``;
+		const { position } = getMidpointPosition(this.radius, CENTER);
+		if (this.markerStyle === `dot`) {
+			const size = this.#getCssVar(`--midpoint-thickness`, .08);
+			return svg`
+        <g class="midpoint-marker" part="midpoint-marker">
+          <circle 
+            cx="${position.x}" 
+            cy="${position.y}" 
+            r="${size * this.radius}" 
+          />
+        </g>
+      `;
+		} else {
+			const length = this.#getCssVar(`--midpoint-length`, .15);
+			const offset = this.#getCssVar(`--midpoint-offset`, .85);
+			const angle = -Math.PI / 2;
+			const startRadius = offset * this.radius;
+			const endRadius = (offset + length) * this.radius;
+			const start = {
+				x: CENTER.x + Math.cos(angle) * startRadius,
+				y: CENTER.y + Math.sin(angle) * startRadius
+			};
+			const end = {
+				x: CENTER.x + Math.cos(angle) * endRadius,
+				y: CENTER.y + Math.sin(angle) * endRadius
+			};
+			return svg`
+        <g class="midpoint-marker" part="midpoint-marker">
+          <line 
+            x1="${start.x}" 
+            y1="${start.y}" 
+            x2="${end.x}" 
+            y2="${end.y}" 
+          />
+        </g>
+      `;
+		}
+	}
+	#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 (e) {
+				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;
+	}
+	willUpdate(changed) {
+		super.willUpdate(changed);
+		if (changed.has(`value`) || !this.hasUpdated) {
+			const valueLane = this.#lanes.get(`value`);
+			if (valueLane && valueLane.type === `value`) valueLane.value = this.#getRelativeValue();
+		}
+	}
+	render() {
+		const lanes = Array.from(this.#lanes.values());
+		const { angle, position } = getMarkerPosition(this.#getRelativeValue(), this.valueMode, this.flatten, this.radius, CENTER);
+		const needleLength = this.#getCssVar(`--marker-length`, .8);
+		const needleOffset = this.#getCssVar(`--marker-offset`, .2);
+		const markerBorderWidth = this.#getCssVar(`--marker-border-width`, 0);
+		const needlePath = markerBorderWidth > 0 ? this.#getNeedlePath(angle, needleLength, needleOffset) : void 0;
+		const dotR = this.#getCssVar(`--marker-thickness`, .15) * this.radius;
+		const defs = [];
+		if (needlePath) defs.push(svg`<path id="needle-path" d="${needlePath}" />`);
+		if (markerBorderWidth > 0) defs.push(svg`<circle id="dot-path" cx="${position.x}" cy="${position.y}" r="${dotR}" />`);
+		return html`
+      <svg
+        viewBox="0 0 100 100"
+        preserveAspectRatio="xMidYMid meet"
+        tabindex="${this.disabled ? -1 : 0}"
+        @pointerdown="${this.#onPointerDown}"
+        @keydown="${this.#onKeyDown}"
+        style="cursor: ${this.#dragging ? `ns-resize` : `grab`}"
+      >
+        ${defs.length > 0 ? svg`<defs>${defs}</defs>` : ``}
+        ${this.#renderCircleFill()}
+        ${this.wedge ? this.#renderWedge() : ``}
+        ${this.#renderCircleBorder()}
+        ${lanes.map((lane) => this.#renderLane(lane))}
+        ${this.#renderMidpointMarker()}
+        ${this.#renderValueMarker(needlePath)}
+      </svg>
+    `;
+	}
+	updated(changed) {
+		super.updated(changed);
+		if (changed.has(`radius`)) this.style.setProperty(`--radius`, `${this.radius}%`);
+		this.style.setProperty(`--value-relative`, this.#getRelativeValue().toString());
+		if (changed.has(`flatten`)) {
+			const markerThickness = this.#getCssVar(`--marker-thickness`, .15);
+			const radius = this.#getCssVar(`--radius`, 45);
+			const markerPadding = Math.round(markerThickness * radius) + 5;
+			const viewBoxHeight = Math.round(100 * (1 - this.flatten)) + markerPadding;
+			this.style.setProperty(`--dial-height`, `${viewBoxHeight}px`);
+			const svg = this.renderRoot.querySelector(`svg`);
+			if (svg) svg.setAttribute(`viewBox`, `0 0 100 ${viewBoxHeight}`);
+		}
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		if (this.#changeDebounceTimer !== void 0) clearTimeout(this.#changeDebounceTimer);
+		this.#onPointerUp();
+	}
+	firstUpdated() {
+		const markerThickness = this.#getCssVar(`--marker-thickness`, .15);
+		const radius = this.#getCssVar(`--radius`, 45);
+		const markerPadding = Math.round(markerThickness * radius);
+		const viewBoxHeight = Math.round(100 * (1 - this.flatten)) + markerPadding;
+		this.style.setProperty(`--dial-height`, `${viewBoxHeight}px`);
+		const svg = this.renderRoot.querySelector(`svg`);
+		if (svg) svg.setAttribute(`viewBox`, `0 0 100 ${viewBoxHeight}`);
+	}
+	static {
+		this.styles = [prominenceStyles, css`
+    :host {
+      display: inline-block;
+      width: 100px;
+      height: var(--dial-height, 100px);
+      touch-action: none;
+      user-select: none;
+      tabindex: 0;
+
+      /* Dynamic value - set by JS */
+      --value-relative: 0;
+
+      /* Lane widths (used in stroke-width calculations) */
+      --lane-width: 0.16;
+      --lane-track-width: 0.08;
+      --lane-value-width: 0.12;
+    }
+
+    :host([disabled]) {
+      cursor: not-allowed;
+    }
+
+    svg {
+      width: 100%;
+      height: 100%;
+      outline: none;
+    }
+
+    svg:active {
+      cursor: grabbing;
+    }
+
+    svg:focus-visible {
+      outline: var(--radial-input-svg-focus-outline, 2px solid var(--accent));
+      outline-offset: var(--radial-input-svg-focus-outline-offset, 2px);
+    }
+
+    .dial-border {
+      fill: none;
+      stroke: var(--dial-border-color, var(--surface-4));
+      stroke-width: var(--dial-border-width, 2px);
+      stroke-linecap: round;
+      vector-effect: non-scaling-stroke;
+    }
+
+    .dial-fill {
+      fill: var(--dial-fill, transparent);
+    }
+
+    .wedge {
+      fill: var(--wedge-fill, var(--accent));
+      fill-opacity: var(--wedge-fill-opacity, 0.25);
+      stroke: var(--wedge-border-color, var(--accent));
+      stroke-width: var(--wedge-border-width, 0);
+      stroke-opacity: var(--wedge-border-opacity, 1);
+      vector-effect: non-scaling-stroke;
+    }
+
+    .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,
+    .value-marker .marker-fill {
+      stroke: var(--marker-color, var(--accent));
+      stroke-width: calc(var(--marker-thickness, 0.15) * var(--radius, 45%));
+      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) * var(--radius, 45%));
+      stroke-linecap: round;
+      vector-effect: non-scaling-stroke;
+    }
+
+    .value-marker .marker-border {
+      fill: none;
+    }
+
+    .value-marker .marker-fill,
+    .value-marker circle {
+      fill: 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 })], RadialInputElement.prototype, "radius", null);
+__decorate([property({ type: Number })], RadialInputElement.prototype, "value", void 0);
+__decorate([property({ type: Number })], RadialInputElement.prototype, "min", void 0);
+__decorate([property({ type: Number })], RadialInputElement.prototype, "max", void 0);
+__decorate([property({ type: Number })], RadialInputElement.prototype, "step", void 0);
+__decorate([property({ type: Number })], RadialInputElement.prototype, "stops", void 0);
+__decorate([property({
+	type: String,
+	attribute: `value-mode`
+})], RadialInputElement.prototype, "valueMode", void 0);
+__decorate([property({ type: Number })], RadialInputElement.prototype, "flatten", void 0);
+__decorate([property({
+	type: String,
+	attribute: `marker-style`
+})], RadialInputElement.prototype, "markerStyle", void 0);
+__decorate([property({ type: Boolean })], RadialInputElement.prototype, "wedge", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], RadialInputElement.prototype, "disabled", void 0);
+RadialInputElement = __decorate([customElement(`ixfx-radial-input`)], RadialInputElement);
+//#endregion
+export { RadialInputElement as t };
+
+//# sourceMappingURL=radial-input-CNJ8asY2.js.map