@ixfx/components 0.2.4 → 0.2.5

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

@@ -1,692 +0,0 @@
-/**
- * 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