@ixfx/components 0.2.2 → 0.2.4

package/dist/radial-input/radial-input.js

@@ -0,0 +1,692 @@
+/**
+ * Radial input component
+ * A rotary dial input inspired by Ableton Live and music production software
+ */
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { css, html, LitElement, svg } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { KEY_STEP_DIVISOR, resolveStep } from '../keyboard.js';
+import { prominenceStyles } from '../styles/prominence.js';
+import { clamp, generateArcPath, generateCircleBorderPath, generateWedgePath, getAnchoredArcAngles, getMarkerPosition, getMidpointPosition, getValueArcAngles, getWedgeAngles, scale, } from './svg-utils.js';
+const CENTER = { x: 50, y: 50 }; // Center point in viewBox
+let RadialInputElement = class RadialInputElement extends LitElement {
+    // Internal backing field for radius (used with custom setter for clamping)
+    #_radius;
+    // Radius property (controls dial size, 10-50 range to prevent clipping)
+    get radius() {
+        return this.#_radius;
+    }
+    set radius(v) {
+        this.#_radius = clamp(v, 10, 50);
+    }
+    // Internal state
+    #lanes;
+    #dragging;
+    #dragStartY;
+    #valueAtDragStart;
+    #changeDebounceTimer;
+    #isUserInteraction;
+    constructor() {
+        super();
+        // Internal backing field for radius (used with custom setter for clamping)
+        this.#_radius = 45;
+        // Value properties (matches ixfx-range API)
+        this.value = 0;
+        this.min = 0;
+        this.max = 100;
+        this.step = undefined;
+        // Value mode
+        this.valueMode = `range`;
+        // Appearance
+        this.flatten = 0.3;
+        this.markerStyle = `needle`;
+        this.wedge = false;
+        // Interaction
+        this.disabled = false;
+        // Internal state
+        this.#lanes = new Map();
+        this.#dragging = false;
+        this.#dragStartY = 0;
+        this.#valueAtDragStart = 0;
+        this.#isUserInteraction = false;
+        // Pointer interaction handlers
+        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();
+            // Calculate sensitivity: full range = 2× component height
+            const sensitivity = this.clientHeight * 2;
+            const shiftDivisor = event.shiftKey ? KEY_STEP_DIVISOR : 1;
+            const effectiveSensitivity = sensitivity * shiftDivisor;
+            // Calculate delta (negative because up = increase)
+            const deltaY = this.#dragStartY - event.clientY;
+            const deltaValue = (deltaY / effectiveSensitivity) * (this.max - this.min);
+            const newValue = this.#valueAtDragStart + deltaValue;
+            const relativeValue = scale(newValue, 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);
+        };
+        // Keyboard interaction handler
+        this.#onKeyDown = (event) => {
+            if (this.disabled)
+                return;
+            const shiftDivisor = event.shiftKey ? KEY_STEP_DIVISOR : 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();
+            }
+        };
+        // Initialize default lanes
+        // Note: value lane will be updated in willUpdate() to reflect initial value
+        this.#lanes.set(`track`, {
+            key: `track`,
+            value: 1, // Full range
+            type: `fixed`,
+            offset: 0,
+            width: 0.16,
+        });
+        this.#lanes.set(`value`, {
+            key: `value`,
+            value: 0, // Will be updated in willUpdate()
+            type: `value`,
+            offset: 0,
+            width: 0.24,
+        });
+    }
+    // Lane management API
+    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 ?? 0.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);
+    }
+    // Internal helpers
+    #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 range = this.max - this.min;
+            const step = range / 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;
+        // Update 'value' lane if it exists
+        const valueLane = this.#lanes.get(`value`);
+        if (valueLane && valueLane.type === `value`) {
+            valueLane.value = this.#getRelativeValue();
+        }
+        // Update data-tooltip for live tooltips
+        if (this.hasAttribute(`data-tooltip-live`)) {
+            const percentage = Math.round(this.#getRelativeValue() * 100);
+            this.setAttribute(`data-tooltip`, `${percentage}%`);
+        }
+        // Fire input event only for user interactions
+        if (isUserInteraction) {
+            this.dispatchEvent(new CustomEvent(`input`, {
+                detail: {
+                    value: this.value,
+                    valueRelative: this.#getRelativeValue(),
+                },
+                bubbles: true,
+                composed: true,
+            }));
+            // Debounce change event
+            this.#scheduleChangeEvent(previousValue);
+        }
+        else {
+            // Immediate change event for programmatic changes
+            this.#fireChangeEvent(previousValue);
+        }
+    }
+    #scheduleChangeEvent(previousValue) {
+        if (this.#changeDebounceTimer !== undefined) {
+            clearTimeout(this.#changeDebounceTimer);
+        }
+        this.#changeDebounceTimer = window.setTimeout(() => {
+            this.#fireChangeEvent(previousValue);
+            this.#changeDebounceTimer = undefined;
+        }, 150);
+    }
+    #fireChangeEvent(previousValue) {
+        this.dispatchEvent(new CustomEvent(`change`, {
+            detail: {
+                value: this.value,
+                valueRelative: this.#getRelativeValue(),
+                previousValue,
+            },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    // Pointer interaction handlers
+    #onPointerDown;
+    #onPointerMove;
+    #onPointerUp;
+    // Keyboard interaction handler
+    #onKeyDown;
+    // Rendering helpers
+    #renderCircleBorder() {
+        const path = generateCircleBorderPath(this.radius, this.flatten, CENTER);
+        const borderWidth = this.#getCssVar(`--dial-border-width`, 2);
+        const borderColor = getComputedStyle(this).getPropertyValue(`--dial-border-color`).trim() || `var(--surface-4)`;
+        return svg `<path class="dial-border" d="${path}" fill="none" stroke="${borderColor}" stroke-width="${borderWidth}" stroke-linecap="round" vector-effect="non-scaling-stroke" />`;
+    }
+    #renderCircleFill() {
+        const path = generateCircleBorderPath(this.radius, this.flatten, CENTER);
+        const fill = getComputedStyle(this).getPropertyValue(`--dial-fill`).trim() || `transparent`;
+        return svg `<path class="dial-fill" d="${path}" fill="${fill}" />`;
+    }
+    #renderWedge() {
+        const relativeValue = this.#getRelativeValue();
+        const { startAngle, endAngle, clockwise } = getWedgeAngles(relativeValue, 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`) {
+            // Fixed lanes always show full range
+            arcPath = generateCircleBorderPath(this.radius - lane.offset * this.radius, this.flatten, CENTER);
+        }
+        else if (lane.type === `anchored`) {
+            // Anchored lanes: centered on current value, arc width based on lane.value
+            const { startAngle, endAngle } = getAnchoredArcAngles(this.#getRelativeValue(), lane.value, this.valueMode, this.flatten);
+            arcPath = generateArcPath(startAngle, endAngle, this.radius - lane.offset * this.radius, CENTER);
+        }
+        else {
+            // Value lanes follow the value mode
+            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 relativeValue = this.#getRelativeValue();
+        const { angle, position } = getMarkerPosition(relativeValue, 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 size = this.#getCssVar(`--marker-thickness`, 0.15);
+            const r = size * 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`, 0.8);
+            const offset = this.#getCssVar(`--marker-offset`, 0.2);
+            const path = this.#getNeedlePath(angle, length, offset);
+            return svg `
+        <g class="value-marker" part="value-marker">
+          <path d="${path}" />
+        </g>
+      `;
+        }
+    }
+    #renderMidpointMarker() {
+        // Only show in bipolar/unipolar modes
+        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`, 0.08);
+            return svg `
+        <g class="midpoint-marker" part="midpoint-marker">
+          <circle 
+            cx="${position.x}" 
+            cy="${position.y}" 
+            r="${size * this.radius}" 
+          />
+        </g>
+      `;
+        }
+        else {
+            // Needle style
+            const length = this.#getCssVar(`--midpoint-length`, 0.15);
+            const offset = this.#getCssVar(`--midpoint-offset`, 0.85);
+            const angle = -Math.PI / 2; // Top of circle
+            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;
+        // Handle CSS calc() expressions with var(--value-relative)
+        if (val.includes(`calc(`)) {
+            // Get the current --value-relative value
+            const valueRelative = style.getPropertyValue(`--value-relative`).trim();
+            if (!valueRelative) {
+                // Fallback to default if --value-relative not set
+                const parsed = Number.parseFloat(val.replace(/[^0-9.-]/g, ``));
+                return Number.isNaN(parsed) ? defaultValue : parsed;
+            }
+            // Replace var(--value-relative) with the actual value
+            const evalStr = val.replace(/var\(--value-relative\)/g, valueRelative);
+            // Use Function constructor for safe evaluation (no eval)
+            try {
+                // Create a function that evaluates math expressions
+                const fn = new Function(`return ${evalStr.replace(/calc\s*\(([^)]+)\)/g, `$1`)}`);
+                const result = fn();
+                return typeof result === `number` && !Number.isNaN(result) ? result : defaultValue;
+            }
+            catch (e) {
+                // Fallback: try to parse just numbers
+                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;
+    }
+    // Lifecycle methods
+    willUpdate(changed) {
+        super.willUpdate(changed);
+        // Ensure value lane reflects current value before first render
+        // This handles declaratively set initial values
+        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 relativeValue = this.#getRelativeValue();
+        const { angle, position } = getMarkerPosition(relativeValue, this.valueMode, this.flatten, this.radius, CENTER);
+        const needleLength = this.#getCssVar(`--marker-length`, 0.8);
+        const needleOffset = this.#getCssVar(`--marker-offset`, 0.2);
+        const markerBorderWidth = this.#getCssVar(`--marker-border-width`, 0);
+        const needlePath = markerBorderWidth > 0 ? this.#getNeedlePath(angle, needleLength, needleOffset) : undefined;
+        const dotSize = this.#getCssVar(`--marker-thickness`, 0.15);
+        const dotR = dotSize * 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);
+        // Update --radius CSS variable when property changes
+        if (changed.has(`radius`)) {
+            this.style.setProperty(`--radius`, `${this.radius}%`);
+        }
+        // Update --value-relative CSS variable
+        this.style.setProperty(`--value-relative`, this.#getRelativeValue().toString());
+        // Adjust component height based on flatten to reduce wasted vertical space.
+        // The dial is flattened at the top, so we don't need full height.
+        if (changed.has(`flatten`)) {
+            const markerThickness = this.#getCssVar(`--marker-thickness`, 0.15);
+            const radius = this.#getCssVar(`--radius`, 45);
+            const markerPadding = Math.round(markerThickness * radius) + 5;
+            const viewBoxHeight = Math.round(100 * (1 - this.flatten)) + markerPadding;
+            // Set CSS variable to control host height
+            this.style.setProperty(`--dial-height`, `${viewBoxHeight}px`);
+            // Also update SVG viewBox to match
+            const svg = this.renderRoot.querySelector(`svg`);
+            if (svg) {
+                svg.setAttribute(`viewBox`, `0 0 100 ${viewBoxHeight}`);
+            }
+        }
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        if (this.#changeDebounceTimer !== undefined) {
+            clearTimeout(this.#changeDebounceTimer);
+        }
+        this.#onPointerUp();
+    }
+    firstUpdated() {
+        const markerThickness = this.#getCssVar(`--marker-thickness`, 0.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);
+export { RadialInputElement };
+//# sourceMappingURL=radial-input.js.map