@nova-design-system/nova-webcomponents 3.0.0 → 3.2.0

package/dist/components/nv-fieldslider.js

@@ -0,0 +1,726 @@
+import { h, p as proxyCustomElement, H, c as createEvent, d as Host } from './p-679e0fa9.js';
+import { d as defineCustomElement$2 } from './p-76a30bf1.js';
+import { v as v4 } from './p-f5ff676c.js';
+
+/**
+ * Utility functions for nv-fieldslider.
+ */
+/**
+ * Clamp a value between min and max.
+ * @param {number} value - The value to clamp
+ * @param {number} min - The minimum boundary
+ * @param {number} max - The maximum boundary
+ * @returns {number} The clamped value
+ */
+function clamp(value, min, max) {
+    return Math.max(min, Math.min(max, value));
+}
+/**
+ * Calculate the percentage position of a value within a range.
+ * @param {number} value - The value to convert to percentage
+ * @param {number} min - The minimum value of the range
+ * @param {number} max - The maximum value of the range
+ * @returns {number} The percentage (0-100)
+ */
+function valueToPercent(value, min, max) {
+    if (max === min)
+        return 0;
+    return ((value - min) / (max - min)) * 100;
+}
+/**
+ * Snap a value to the nearest step.
+ * @param {number} value - The value to snap
+ * @param {number} min - The minimum boundary
+ * @param {number} max - The maximum boundary
+ * @param {number} step - The step size
+ * @returns {number} The snapped value
+ */
+function snapToStep(value, min, max, step) {
+    const clamped = clamp(value, min, max);
+    const snapped = Math.round((clamped - min) / step) * step + min;
+    return clamp(snapped, min, max);
+}
+/**
+ * Generate tick values for the slider.
+ * @param {number} min - The minimum value
+ * @param {number} max - The maximum value
+ * @param {number} step - The step size
+ * @returns {number[]} Array of tick values
+ */
+function generateTicks(min, max, step) {
+    const ticks = [];
+    for (let v = min; v <= max; v += step) {
+        ticks.push(Number(v.toFixed(10))); // avoid floating point issues
+    }
+    if (ticks[ticks.length - 1] !== max) {
+        ticks.push(max);
+    }
+    return ticks;
+}
+/**
+ * Snap a value to the nearest tick mark.
+ * @param {number} value - The value to snap
+ * @param {object[]} ticks - Array of tick objects
+ * @returns {number} The value of the closest tick
+ */
+function snapToTicks(value, ticks) {
+    if (!ticks || ticks.length === 0)
+        return value;
+    // Find the closest tick
+    let closestTick = ticks[0].value;
+    let minDistance = Math.abs(value - closestTick);
+    for (const tick of ticks) {
+        const distance = Math.abs(value - tick.value);
+        if (distance < minDistance) {
+            minDistance = distance;
+            closestTick = tick.value;
+        }
+    }
+    return closestTick;
+}
+
+/**
+ * Renders single thumb in standard mode.
+ * @param {SingleThumbProps} props - Component properties
+ * @returns {JSX.Element} JSX element representing the thumb
+ */
+const SingleThumb = props => {
+    const { value, min, max, rawPosition, isDragging, snap, disabled, readonly, onKeyDown, labelBeforeValue, labelAfterValue, } = props;
+    // Use raw position for visual display during dragging, but the snapped value otherwise
+    let displayPosition = value;
+    if (isDragging && !snap) {
+        displayPosition = clamp(rawPosition, min, max);
+    }
+    const percent = valueToPercent(displayPosition, min, max);
+    return (h("div", { class: "thumb", style: { left: `${percent}%` }, role: "slider", "aria-valuemin": min, "aria-valuemax": max, "aria-valuenow": value, "aria-disabled": disabled ? 'true' : undefined, "aria-readonly": readonly ? 'true' : undefined, tabindex: disabled ? -1 : 0, onKeyDown: onKeyDown },
+        h("div", { class: "thumb-tooltip" },
+            labelBeforeValue && (h("span", { class: "label-before" }, labelBeforeValue)),
+            String(value),
+            labelAfterValue && h("span", { class: "label-after" }, labelAfterValue))));
+};
+
+/**
+ * Renders dual thumbs in range mode.
+ * @param {RangeThumbProps} props - Component properties
+ * @returns {JSX.Element[]} Array of JSX elements representing the range slider thumbs
+ */
+const RangeThumb = props => {
+    const { rangeValue, rawRangePosition, activeDragThumb, isDragging, snap, min, max, disabled, readonly, onKeyDown, labelBeforeValue, labelAfterValue, } = props;
+    const [leftValue, rightValue] = rangeValue;
+    // Use raw positions for visual display during dragging, but the snapped values otherwise
+    let displayLeftPosition = leftValue;
+    let displayRightPosition = rightValue;
+    if (isDragging && !snap) {
+        const [rawLeft, rawRight] = rawRangePosition;
+        if (activeDragThumb === 'left') {
+            displayLeftPosition = clamp(rawLeft, min, Math.min(rightValue, max));
+        }
+        else if (activeDragThumb === 'right') {
+            displayRightPosition = clamp(rawRight, Math.max(leftValue, min), max);
+        }
+    }
+    const leftPercent = valueToPercent(displayLeftPosition, min, max);
+    const rightPercent = valueToPercent(displayRightPosition, min, max);
+    return [
+        h("div", { class: "track-range", style: {
+                left: `${leftPercent}%`,
+                width: `${rightPercent - leftPercent}%`,
+            } }),
+        h("div", { class: "thumb thumb-left", style: { left: `${leftPercent}%` }, role: "slider", "aria-valuemin": min, "aria-valuemax": max, "aria-valuenow": leftValue, "aria-disabled": disabled ? 'true' : undefined, "aria-readonly": readonly ? 'true' : undefined, "data-thumb": "left", tabindex: disabled ? -1 : 0, onKeyDown: onKeyDown },
+            h("div", { class: "thumb-tooltip" },
+                labelBeforeValue && (h("span", { class: "label-before" }, labelBeforeValue)),
+                String(leftValue),
+                labelAfterValue && h("span", { class: "label-after" }, labelAfterValue))),
+        h("div", { class: "thumb thumb-right", style: { left: `${rightPercent}%` }, role: "slider", "aria-valuemin": min, "aria-valuemax": max, "aria-valuenow": rightValue, "aria-disabled": disabled ? 'true' : undefined, "aria-readonly": readonly ? 'true' : undefined, "data-thumb": "right", tabindex: disabled ? -1 : 0, onKeyDown: onKeyDown },
+            h("div", { class: "thumb-tooltip" },
+                labelBeforeValue && (h("span", { class: "label-before" }, labelBeforeValue)),
+                String(rightValue),
+                labelAfterValue && h("span", { class: "label-after" }, labelAfterValue))),
+    ];
+};
+
+/**
+ * Renders tick marks along the slider track.
+ * @param {TickMarksProps} props - Component properties
+ * @returns {JSX.Element | null} JSX element representing the tick marks or null if no ticks
+ */
+const TickMarks = props => {
+    const { ticks, min, max } = props;
+    if (ticks.length === 0) {
+        return null;
+    }
+    return (h("div", { class: "track-ticks" }, ticks.map(tick => {
+        const percent = valueToPercent(tick.value, min, max);
+        return (h("div", { class: "track-tick", style: { left: `${percent}%` } }, tick.label && h("div", { class: "tick-label" }, tick.label)));
+    })));
+};
+
+/**
+ * Renders field input for direct value entry
+ * @param {FieldInputProps} props - Component properties
+ * @returns {JSX.Element} JSX element representing the field input
+ */
+const FieldInput = props => {
+    const { range, hasField, value, rangeValue, index, inputId, min, max, step, disabled, readonly, onInput, labelBeforeValue, labelAfterValue, name, endName, } = props;
+    // Determine the appropriate value based on mode and index
+    const fieldValue = range ? rangeValue[index] : value;
+    // In range mode, we need data-index for event handling
+    const dataAttrs = range ? { 'data-index': index.toString() } : {};
+    // Determine the appropriate name based on mode and index
+    let inputName;
+    if (range) {
+        if (index === 0) {
+            inputName = name || '';
+        }
+        else {
+            // Use endName if provided, otherwise append "-end" to the name
+            inputName = endName || (name ? `${name}-end` : '');
+        }
+    }
+    else {
+        inputName = name || '';
+    }
+    // If hasField is false, only the containers are visible, not the input fields
+    const containerClass = hasField
+        ? 'input-container'
+        : 'input-container hidden-input';
+    return hasField ? (h("div", { class: containerClass },
+        labelBeforeValue && h("span", { class: "label-before" }, labelBeforeValue),
+        h("input", Object.assign({ id: inputId, type: "number", value: fieldValue, min: min, max: max, step: step, disabled: disabled, readonly: readonly, name: inputName }, dataAttrs, { onInput: onInput })),
+        labelAfterValue && h("span", { class: "label-after" }, labelAfterValue))) : (h("input", { id: inputId, type: "hidden", value: fieldValue, disabled: disabled, readonly: readonly, name: inputName }));
+};
+
+const nvFieldsliderCss = "nv-fieldslider{--nv-field-border-default:var(--components-form-field-border-default);--nv-field-border-hover:var(--components-form-field-border-hover);--nv-field-border-focus:var(--components-form-field-border-focus);--nv-field-border-disabled:var(--components-form-field-border-default);--nv-field-border-readonly:var(--components-form-field-border-default);--nv-field-focus-box-shadow:var(--color-focus-brand);--nv-field-background:var(--components-form-field-background-default);display:flex;flex-direction:column;align-items:flex-start;gap:var(--form-gap-y);box-sizing:border-box;max-width:480px}nv-fieldslider .slider-container{width:100%;display:flex;flex-direction:row;align-items:center;gap:var(--form-gap-x)}nv-fieldslider .slider-container .track-container{position:relative;flex:1;height:calc(16px + 0.25rem);padding:calc(16px / 2) 0}nv-fieldslider .slider-container .track-container .track{position:relative;height:4px;background:#e5e7eb;border-radius:4px;cursor:pointer}nv-fieldslider .slider-container .track-container .track .track-range{position:absolute;top:0;height:4px;background:var(--nv-field-border-focus);border-radius:4px;pointer-events:none}nv-fieldslider .slider-container .track-container .track .thumb{position:absolute;top:50%;width:16px;height:16px;background:#ffffff;border:2px solid var(--nv-field-border-focus);border-radius:50%;box-shadow:0 2px 4px rgba(0, 0, 0, 0.1);transform:translate(-50%, -50%);z-index:1;cursor:grab;transition:box-shadow 0.2s, background-color 0.2s}nv-fieldslider .slider-container .track-container .track .thumb:focus{box-shadow:0 4px 6px rgba(0, 0, 0, 0.15);outline:6px solid color-mix(in srgb, var(--nv-field-border-focus) 50%, transparent);transition:outline}nv-fieldslider .slider-container .track-container .track .thumb:active{cursor:grabbing;background-color:#e6f7ff}nv-fieldslider .slider-container .track-container .track .thumb .thumb-tooltip{position:absolute;top:25px;left:50%;background-color:var(--components-tooltip-background);color:var(--components-tooltip-text);padding:5px;border-radius:var(--tooltip-radius);font-size:var(--tooltip-font-size);z-index:10;pointer-events:none;user-select:none;opacity:0;transition:opacity 0.3s ease-in-out;transform:translateX(-50%)}nv-fieldslider .slider-container .track-container .track .thumb .thumb-tooltip:after{content:\"\";background:var(--components-tooltip-background);box-shadow:none;border:none;position:absolute;border-bottom-color:transparent;border-right-color:transparent;width:6px;height:6px;transform:rotate(45deg);border-radius:1px;top:-3px;left:50%;margin-left:-3px}nv-fieldslider .slider-container .track-container .track .thumb:hover .thumb-tooltip,nv-fieldslider .slider-container .track-container .track .thumb:active .thumb-tooltip,nv-fieldslider .slider-container .track-container .track .thumb:focus .thumb-tooltip{opacity:1}nv-fieldslider .slider-container .track-container .track-ticks{position:relative;height:1rem;margin-top:0.25rem}nv-fieldslider .slider-container .track-container .track-ticks .track-tick{position:absolute;top:0;width:6px;height:6px;background:var(--components-form-field-border-default);border-radius:50%;transform:translate(-50%, 0);pointer-events:none}nv-fieldslider .slider-container .track-container .track-ticks .track-tick .tick-label{position:absolute;top:calc(6px + 0.25rem);left:50%;color:var(--components-form-field-border-default);transform:translateX(-50%);white-space:nowrap}nv-fieldslider .slider-container .input-container{display:flex;flex-grow:1;justify-content:center;align-items:center;align-self:stretch;border-radius:var(--form-field-radius);border-width:1px;border-style:solid;border-color:var(--nv-field-border-default);opacity:var(--components-form-opacity-default, 1);background:var(--nv-field-background);transition:all 150ms ease-out;width:64px;flex-grow:unset}nv-fieldslider .slider-container .input-container:hover{border-color:var(--nv-field-border-hover)}nv-fieldslider .slider-container .input-container:focus-within,nv-fieldslider .slider-container .input-container:focus-within:hover,nv-fieldslider .slider-container .input-container:focus,nv-fieldslider .slider-container .input-container:focus:hover{border-color:var(--nv-field-border-focus);box-shadow:0px 0px 0px var(--focus-field-stroke) var(--nv-field-focus-box-shadow)}nv-fieldslider .slider-container .input-container:has(input:read-only){opacity:0.5;background-color:var(--components-form-field-background-readonly);border-color:var(--nv-field-border-readonly)}nv-fieldslider .slider-container .input-container:has(input:disabled){opacity:0.5;background-color:var(--components-form-field-background-disabled);border-color:var(--nv-field-border-disabled)}nv-fieldslider .slider-container .input-container input{display:flex;align-items:center;flex:1 0 0;overflow:hidden;background-color:transparent;color:var(--components-form-field-content-text);padding:var(--form-field-padding-y) var(--form-field-padding-x);font-size:var(--form-field-font-size);font-style:normal;font-weight:500;line-height:var(--form-field-line-height);width:100%}nv-fieldslider .slider-container .input-container input:focus{outline:none}nv-fieldslider .slider-container .input-container input::placeholder{overflow:hidden;color:var(--components-form-field-content-placeholder);text-overflow:ellipsis;font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-field-font-size);font-style:normal;font-weight:400;line-height:var(--form-field-line-height)}nv-fieldslider[fluid]:not([fluid=false]){max-width:unset}nv-fieldslider[error]:not([error=false]){--nv-field-border-default:var(--components-form-field-border-error);--nv-field-border-hover:var(--nv-field-border-default);--nv-field-border-focus:var(--nv-field-border-default);--nv-field-border-disabled:var(--nv-field-border-default);--nv-field-border-readonly:var(--nv-field-border-default);--nv-field-focus-box-shadow:var(--color-focus-destructive-in-field)}nv-fieldslider[success]:not([success=false]){--nv-field-border-default:var(--components-form-field-border-success);--nv-field-border-hover:var(--nv-field-border-default);--nv-field-border-focus:var(--nv-field-border-default);--nv-field-border-disabled:var(--nv-field-border-default);--nv-field-border-readonly:var(--nv-field-border-default);--nv-field-focus-box-shadow:var(--color-focus-success)}nv-fieldslider[readonly]:not([readonly=false]){--nv-field-border-default:var(--components-form-field-border-readonly);--nv-field-border-hover:var(--nv-field-border-default);--nv-field-border-focus:var(--components-form-field-border-focus);--nv-field-border-disabled:var(--nv-field-border-default);--nv-field-border-readonly:var(--nv-field-border-default);--nv-field-background:var(--components-form-field-background-readonly)}nv-fieldslider[readonly]:not([readonly=false]) .track,nv-fieldslider[readonly]:not([readonly=false]) .thumb{cursor:default}nv-fieldslider label{display:flex;align-items:center;gap:var(--form-label-gap);align-self:stretch;color:var(--components-form-text-label-default);font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-label-font-size);font-style:normal;font-weight:500;line-height:var(--form-label-line-height)}nv-fieldslider[hide-label]:not([hide-label=false]) label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}nv-fieldslider[has-field]:not([has-field=false]) .thumb-tooltip{display:none}nv-fieldslider>.description{display:flex;align-items:center;align-self:stretch;gap:var(--spacing-1);color:var(--components-form-text-description-default);font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-description-font-size);font-style:normal;line-height:var(--form-description-line-height)}nv-fieldslider>.error-description{display:flex;align-items:center;align-self:stretch;gap:var(--spacing-1);color:var(--components-form-text-description-default);font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-description-font-size);font-style:normal;line-height:var(--form-description-line-height);color:var(--components-form-text-description-error)}nv-fieldslider>.error-description[hidden]{display:none}";
+const NvFieldsliderStyle0 = nvFieldsliderCss;
+
+const NvFieldslider$1 = /*@__PURE__*/ proxyCustomElement(class NvFieldslider extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.valueChanged = createEvent(this, "valueChanged", 7);
+        /****************************************************************************/
+        //#region PROPERTIES
+        /**
+         * Sets the ID for the start input element and the for attribute of the associated
+         * label. If no ID is provided, a random one will be automatically generated.
+         */
+        this.startInputId = v4();
+        /**
+         * Sets the ID for the end input element and the for attribute of the associated
+         * label. If no ID is provided, a random one will be automatically generated.
+         */
+        this.endInputId = v4();
+        /**
+         * Keeps the interface clean by removing visible labels, but still announces
+         * the label to screen readers so users relying on assistive tech aren't left
+         * guessing.
+         */
+        this.hideLabel = false;
+        /**
+         * Enables an optional numeric input field alongside the slider, allowing
+         * users to type a value directly instead of—or in addition to—using the
+         * slider handle.
+         */
+        this.hasField = false;
+        /**
+         * Allows the slider to display two thumbs, enabling users to select a
+         * continuous range between a minimum and maximum value. Ideal for use cases
+         * like filtering by price or time.
+         */
+        this.range = false;
+        /**
+         * Disables user interaction with the slider and its associated input fields.
+         */
+        this.disabled = false;
+        /**
+         * Makes the slider and input non-editable while keeping them focusable and
+         * included in form submissions.
+         */
+        this.readonly = false;
+        /**
+         * Alters the slider's appearance to indicate an error, helping users
+         * identify fields that need correction.
+         * @validator error
+         */
+        this.error = false;
+        /**
+         * Changes the slider's appearance to indicate successful input or validation.
+         */
+        this.success = false;
+        /**
+         * Numeric value of the slider as a string, if range mode is on, the values
+         * will be a comma-separated string.
+         */
+        this.value = '0';
+        /**
+         * Defines the interval between selectable values on the slider. Controls how
+         * much the value increases or decreases with each keyboard interaction, drag
+         * movement, or direct input.
+         */
+        this.step = 1;
+        /**
+         * Controls whether the slider handle should visually snap to step values
+         * during dragging. When false, the handle can be positioned at any point
+         * along the track while dragging, but the actual value will still snap to the
+         * nearest step value. When true, the handle will visually snap to the nearest
+         * step value during dragging.
+         */
+        this.snap = false;
+        /**
+         * When true and custom ticks are provided, the slider will snap to the nearest
+         * tick value during dragging, instead of using the step value. This is useful
+         * when you have custom ticks at specific values that don't align with regular step intervals.
+         */
+        this.snapTicks = false;
+        /**
+         * Defines the minimum allowed value for the slider. The thumb cannot move
+         * below this value, and manual input is also constrained accordingly.
+         */
+        this.min = 0;
+        /**
+         * Defines the maximum allowed value for the slider. The thumb cannot move
+         * above this value, and manual input is also constrained accordingly.
+         */
+        this.max = 100;
+        /**
+         * Controls the visibility of tick marks on the slider. When enabled, all
+         * visual ticks that indicate step points along the track are shown. If custom
+         * ticks are provided, they are always shown regardless of this setting.
+         */
+        this.showTicks = false;
+        /**
+         * Allows the field to stretch and fill the entire width of its container.
+         */
+        this.fluid = false;
+        //#endregion PROPERTIES
+        /****************************************************************************/
+        //#region STATE
+        this.isDragging = false;
+        this.activeDragThumb = 'single';
+        this.internalTicks = [];
+        // These track the raw slider positions for visual display
+        this.rawPosition = 0;
+        this.rawRangePosition = [0, 0];
+        this.valueInternal = 0;
+        this.rangeValueInternal = [0, 0];
+        /**
+         * Parses the value string into a number or array of numbers for internal use.
+         */
+        this.parseValue = () => {
+            const values = this.value.replace(/\s/g, '').split(',');
+            if (values.length === 1) {
+                this.valueInternal = parseFloat(values[0]);
+            }
+            else if (values.length === 2) {
+                values.forEach((value, index) => {
+                    this.valueInternal = parseFloat(value);
+                    this.rangeValueInternal[index] = this.valueInternal;
+                });
+            }
+        };
+        /**
+         * Handles pointer events on the track.
+         * @param {PointerEvent} event - The pointer event
+         */
+        this.onTrackInteraction = (event) => {
+            if (this.disabled || this.readonly) {
+                return;
+            }
+            const trackRect = event.currentTarget.getBoundingClientRect();
+            const percentage = clamp(((event.clientX - trackRect.left) / trackRect.width) * 100, 0, 100);
+            const newValue = this.min + (percentage / 100) * (this.max - this.min);
+            // Store raw position for visual display
+            this.rawPosition = newValue;
+            if (this.range) {
+                // In range mode, determine which thumb to move based on proximity
+                const leftPct = valueToPercent(this.rangeValueInternal[0], this.min, this.max);
+                const rightPct = valueToPercent(this.rangeValueInternal[1], this.min, this.max);
+                const distanceToLeft = Math.abs(percentage - leftPct);
+                const distanceToRight = Math.abs(percentage - rightPct);
+                if (distanceToLeft <= distanceToRight) {
+                    this.activeDragThumb = 'left';
+                    this.rawRangePosition = [newValue, this.rawRangePosition[1]];
+                    this.handleValueChange([newValue, this.rangeValueInternal[1]]);
+                }
+                else {
+                    this.activeDragThumb = 'right';
+                    this.rawRangePosition = [this.rawRangePosition[0], newValue];
+                    this.handleValueChange([this.rangeValueInternal[0], newValue]);
+                }
+            }
+            else {
+                this.activeDragThumb = 'single';
+                this.rawPosition = newValue;
+                this.handleValueChange(newValue);
+            }
+            this.isDragging = true;
+            this.registerGlobalEvents();
+        };
+        /**
+         * Handles pointer move events during drag.
+         * @param {PointerEvent} event - The pointer event
+         */
+        this.onPointerMove = (event) => {
+            if (!this.isDragging || this.disabled || this.readonly) {
+                return;
+            }
+            const trackElement = this.el.querySelector('.track');
+            if (!trackElement)
+                return;
+            const trackRect = trackElement.getBoundingClientRect();
+            const percentage = clamp(((event.clientX - trackRect.left) / trackRect.width) * 100, 0, 100);
+            const newValue = this.min + (percentage / 100) * (this.max - this.min);
+            // Update visual position
+            if (this.range) {
+                if (this.activeDragThumb === 'left') {
+                    this.rawRangePosition = [newValue, this.rawRangePosition[1]];
+                    this.handleValueChange([newValue, this.rangeValueInternal[1]]);
+                }
+                else {
+                    this.rawRangePosition = [this.rawRangePosition[0], newValue];
+                    this.handleValueChange([this.rangeValueInternal[0], newValue]);
+                }
+            }
+            else {
+                this.rawPosition = newValue;
+                this.handleValueChange(newValue);
+            }
+        };
+        /**
+         * Handles the end of a drag operation.
+         */
+        this.onPointerUp = () => {
+            this.isDragging = false;
+            this.removeGlobalEvents();
+        };
+        /**
+         * Handles keydown events for keyboard accessibility.
+         * @param {KeyboardEvent} event - The keyboard event
+         */
+        this.onKeyDown = (event) => {
+            if (this.disabled || this.readonly) {
+                return;
+            }
+            let newValue;
+            const stepMultiplier = event.shiftKey ? 10 : 1;
+            const singleStep = this.step * stepMultiplier;
+            if (this.range) {
+                const focusedThumb = event.target.getAttribute('data-thumb');
+                const idx = focusedThumb === 'left' ? 0 : 1;
+                const currentValue = [...this.rangeValueInternal];
+                switch (event.key) {
+                    case 'ArrowRight':
+                    case 'ArrowUp':
+                        currentValue[idx] += singleStep;
+                        break;
+                    case 'ArrowLeft':
+                    case 'ArrowDown':
+                        currentValue[idx] -= singleStep;
+                        break;
+                    case 'Home':
+                        currentValue[idx] = this.min;
+                        break;
+                    case 'End':
+                        currentValue[idx] = this.max;
+                        break;
+                    case 'PageUp':
+                        currentValue[idx] += singleStep * 10;
+                        break;
+                    case 'PageDown':
+                        currentValue[idx] -= singleStep * 10;
+                        break;
+                    default:
+                        return;
+                }
+                newValue = currentValue;
+            }
+            else {
+                switch (event.key) {
+                    case 'ArrowRight':
+                    case 'ArrowUp':
+                        newValue = this.valueInternal + singleStep;
+                        break;
+                    case 'ArrowLeft':
+                    case 'ArrowDown':
+                        newValue = this.valueInternal - singleStep;
+                        break;
+                    case 'Home':
+                        newValue = this.min;
+                        break;
+                    case 'End':
+                        newValue = this.max;
+                        break;
+                    case 'PageUp':
+                        newValue = this.valueInternal + singleStep * 10;
+                        break;
+                    case 'PageDown':
+                        newValue = this.valueInternal - singleStep * 10;
+                        break;
+                    default:
+                        return;
+                }
+            }
+            event.preventDefault();
+            this.handleValueChange(newValue);
+        };
+        /**
+         * Handles field input value changes.
+         * @param {Event} event - The input event
+         */
+        this.handleFieldChange = (event) => {
+            const input = event.target;
+            const newValue = parseFloat(input.value);
+            if (isNaN(newValue)) {
+                return;
+            }
+            if (this.range) {
+                const fieldIndex = input.getAttribute('data-index') === '0' ? 0 : 1;
+                const updatedRange = [...this.rangeValueInternal];
+                updatedRange[fieldIndex] = newValue;
+                this.handleValueChange(updatedRange);
+            }
+            else {
+                this.handleValueChange(newValue);
+            }
+        };
+    }
+    //#endregion STATE
+    /****************************************************************************/
+    //#region METHODS
+    /**
+     * Ensures value is valid and within bounds.
+     * @param {number} val - The value to validate
+     * @returns {number} The validated and snapped value
+     */
+    validateValue(val) {
+        // First ensure the value is within bounds
+        const clampedValue = clamp(val, this.min, this.max);
+        // If snapTicks is true and we have custom ticks, snap to the nearest tick
+        if (this.snapTicks && this.internalTicks && this.internalTicks.length > 0) {
+            return snapToTicks(clampedValue, this.internalTicks);
+        }
+        // Otherwise snap to step values
+        return snapToStep(clampedValue, this.min, this.max, this.step);
+    }
+    /**
+     * Handles value changes from slider interaction.
+     * @param {number | number[]} newValue - The new value or range values
+     */
+    handleValueChange(newValue) {
+        if (this.disabled || this.readonly) {
+            return;
+        }
+        if (this.range) {
+            // Handle range values
+            if (Array.isArray(newValue) && newValue.length === 2) {
+                // Ensure values are in order (left ≤ right)
+                const orderedValues = [
+                    Math.min(newValue[0], newValue[1]),
+                    Math.max(newValue[0], newValue[1]),
+                ];
+                // Snap to steps and clamp
+                const validatedValues = [
+                    this.validateValue(orderedValues[0]),
+                    this.validateValue(orderedValues[1]),
+                ];
+                if (validatedValues[0] !== this.rangeValueInternal[0] ||
+                    validatedValues[1] !== this.rangeValueInternal[1]) {
+                    this.rangeValueInternal = validatedValues;
+                    this.value = this.rangeValueInternal.join(',');
+                    this.valueChanged.emit(this.rangeValueInternal.join(','));
+                }
+            }
+        }
+        else {
+            // Handle single value
+            if (typeof newValue === 'number') {
+                const validatedValue = this.validateValue(newValue);
+                if (validatedValue !== this.valueInternal) {
+                    this.valueInternal = validatedValue;
+                    this.value = String(this.valueInternal);
+                    this.valueChanged.emit(String(this.valueInternal));
+                }
+            }
+        }
+    }
+    /**
+     * Generates the ticks to display based on props and state.
+     */
+    generateDisplayTicks() {
+        // If custom ticks are provided, always use them regardless of showTicks setting
+        if (this.ticks && this.ticks.length > 0) {
+            this.internalTicks = [...this.ticks].sort((a, b) => a.value - b.value);
+            return;
+        }
+        // If showTicks is false and there are no custom ticks, hide all ticks
+        if (!this.showTicks) {
+            this.internalTicks = [];
+            return;
+        }
+        // Generate all ticks at each step point
+        const autoTicks = generateTicks(this.min, this.max, this.step);
+        this.internalTicks = autoTicks.map(value => ({ value }));
+    }
+    /**
+     * Registers global events for tracking pointer movement.
+     */
+    registerGlobalEvents() {
+        document.addEventListener('pointermove', this.onPointerMove);
+        document.addEventListener('pointerup', this.onPointerUp);
+        document.addEventListener('pointercancel', this.onPointerUp);
+    }
+    /**
+     * Removes global events when tracking ends.
+     */
+    removeGlobalEvents() {
+        document.removeEventListener('pointermove', this.onPointerMove);
+        document.removeEventListener('pointerup', this.onPointerUp);
+        document.removeEventListener('pointercancel', this.onPointerUp);
+    }
+    //#endregion METHODS
+    /****************************************************************************/
+    //#region WATCHERS
+    onValueChange() {
+        this.parseValue();
+    }
+    onConfigChange() {
+        this.generateDisplayTicks();
+        if (this.range) {
+            this.handleValueChange(this.rangeValueInternal);
+        }
+        else {
+            this.handleValueChange(this.valueInternal);
+        }
+    }
+    onRangeChange(newValue) {
+        if (newValue) {
+            // Switching to range mode
+            this.rangeValueInternal = [this.min, this.valueInternal];
+        }
+        else {
+            // Switching to single mode, take the higher value
+            this.valueInternal = this.rangeValueInternal[1];
+        }
+    }
+    //#endregion WATCHERS
+    /****************************************************************************/
+    //#region LIFECYCLE
+    connectedCallback() {
+        this.parseValue();
+        this.generateDisplayTicks();
+        // Initialize values and make sure they're valid
+        if (this.range) {
+            if (!Array.isArray(this.rangeValueInternal) ||
+                this.rangeValueInternal.length !== 2) {
+                this.rangeValueInternal = [this.min, this.max];
+            }
+            this.handleValueChange(this.rangeValueInternal);
+            // Initialize raw range position to match actual values
+            this.rawRangePosition = [
+                this.rangeValueInternal[0],
+                this.rangeValueInternal[1],
+            ];
+        }
+        else {
+            this.handleValueChange(this.valueInternal);
+            // Initialize raw position to match actual value
+            this.rawPosition = this.valueInternal;
+        }
+    }
+    disconnectedCallback() {
+        this.removeGlobalEvents();
+    }
+    //#endregion EVENTS
+    /****************************************************************************/
+    //#region RENDER
+    render() {
+        return (h(Host, { key: '69cded86eeaff3470f970d8c5e359d467cea1762' }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { key: 'd6725108d8cfc35d4722e5761592b08f20c390b2', htmlFor: this.startInputId }, h("slot", { key: 'a13207c702baa4ea95073da3db56419c50114de2', name: "label" }, this.label))), h("div", { key: 'a771db3df06edf4ca150db4f66f42a6816e32bc8', class: "slider-container" }, this.range ? (h(FieldInput, { range: this.range, hasField: this.hasField, value: this.valueInternal, rangeValue: this.rangeValueInternal, index: 0, inputId: this.startInputId, min: this.min, max: this.max, step: this.step, disabled: this.disabled, readonly: this.readonly, onInput: this.handleFieldChange, labelBeforeValue: this.labelBeforeValue, labelAfterValue: this.labelAfterValue, name: this.name, endName: this.endName })) : null, h("div", { key: '705fe70c9d5ebba5dc9b877532936d301df0baf6', class: "track-container" }, h("div", { key: '1f9a691c278e88160319699ff91d925dfd8184c2', class: "track", onPointerDown: this.onTrackInteraction }, this.range ? (h(RangeThumb, { rangeValue: this.rangeValueInternal, rawRangePosition: this.rawRangePosition, activeDragThumb: this.activeDragThumb, isDragging: this.isDragging, snap: this.snap, min: this.min, max: this.max, disabled: this.disabled, readonly: this.readonly, onKeyDown: this.onKeyDown, labelBeforeValue: this.labelBeforeValue, labelAfterValue: this.labelAfterValue })) : (h(SingleThumb, { value: this.valueInternal, min: this.min, max: this.max, rawPosition: this.rawPosition, isDragging: this.isDragging, snap: this.snap, disabled: this.disabled, readonly: this.readonly, onKeyDown: this.onKeyDown, labelBeforeValue: this.labelBeforeValue, labelAfterValue: this.labelAfterValue }))), h(TickMarks, { key: 'b80cf4eeb492587ca44ebc6512ded331ec5619ef', ticks: this.internalTicks, min: this.min, max: this.max })), this.range ? (h(FieldInput, { range: this.range, hasField: this.hasField, value: this.valueInternal, rangeValue: this.rangeValueInternal, index: 1, inputId: this.endInputId, min: this.min, max: this.max, step: this.step, disabled: this.disabled, readonly: this.readonly, onInput: this.handleFieldChange, labelBeforeValue: this.labelBeforeValue, labelAfterValue: this.labelAfterValue, name: this.name, endName: this.endName })) : (h(FieldInput, { range: this.range, hasField: this.hasField, value: this.valueInternal, rangeValue: this.rangeValueInternal, inputId: this.startInputId, min: this.min, max: this.max, step: this.step, disabled: this.disabled, readonly: this.readonly, onInput: this.handleFieldChange, labelBeforeValue: this.labelBeforeValue, labelAfterValue: this.labelAfterValue, name: this.name }))), (this.success ||
+            this.description ||
+            this.el.querySelector('[slot="description"]')) && (h("div", { key: '97a111d5b194aeb4f1fcf1049489ddcf30527157', class: "description" }, this.success && (h("nv-icon", { key: 'cc549945c9a330892c69826867f4279e039944e8', name: "circle-check", class: "validation", size: "md" })), h("slot", { key: '54b3e872439763a15595d6bf4f9c5e129aeae386', name: "description" }, this.description))), (this.error ||
+            this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (h("div", { key: 'cd5702e6819a11782a634d522a2dccd992af00f3', class: "error-description", hidden: !this.error }, this.error && (h("nv-icon", { key: '1641a68da28b0963d61b74e69c2c32f566ffeff3', name: "alert-circle", class: "validation", size: "md" })), h("slot", { key: 'a969cc7e37c4a21024790a5603a44365e135693d', name: "error-description" }, this.errorDescription)))));
+    }
+    static get formAssociated() { return true; }
+    get el() { return this; }
+    static get watchers() { return {
+        "value": ["onValueChange"],
+        "min": ["onConfigChange"],
+        "max": ["onConfigChange"],
+        "step": ["onConfigChange"],
+        "ticks": ["onConfigChange"],
+        "showTicks": ["onConfigChange"],
+        "snap": ["onConfigChange"],
+        "snapTicks": ["onConfigChange"],
+        "range": ["onRangeChange"]
+    }; }
+    static get style() { return NvFieldsliderStyle0; }
+}, [68, "nv-fieldslider", {
+        "startInputId": [513, "start-input-id"],
+        "endInputId": [513, "end-input-id"],
+        "label": [513],
+        "hideLabel": [516, "hide-label"],
+        "description": [513],
+        "hasField": [516, "has-field"],
+        "range": [516],
+        "disabled": [516],
+        "readonly": [516],
+        "error": [516],
+        "errorDescription": [513, "error-description"],
+        "success": [516],
+        "value": [1537],
+        "step": [514],
+        "snap": [516],
+        "snapTicks": [516, "snap-ticks"],
+        "name": [513],
+        "endName": [513, "end-name"],
+        "min": [514],
+        "max": [514],
+        "showTicks": [516, "show-ticks"],
+        "ticks": [16],
+        "fluid": [516],
+        "labelBeforeValue": [513, "label-before-value"],
+        "labelAfterValue": [513, "label-after-value"],
+        "isDragging": [32],
+        "activeDragThumb": [32],
+        "internalTicks": [32],
+        "rawPosition": [32],
+        "rawRangePosition": [32],
+        "valueInternal": [32],
+        "rangeValueInternal": [32]
+    }, undefined, {
+        "value": ["onValueChange"],
+        "min": ["onConfigChange"],
+        "max": ["onConfigChange"],
+        "step": ["onConfigChange"],
+        "ticks": ["onConfigChange"],
+        "showTicks": ["onConfigChange"],
+        "snap": ["onConfigChange"],
+        "snapTicks": ["onConfigChange"],
+        "range": ["onRangeChange"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["nv-fieldslider", "nv-icon"];
+    components.forEach(tagName => { switch (tagName) {
+        case "nv-fieldslider":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, NvFieldslider$1);
+            }
+            break;
+        case "nv-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const NvFieldslider = NvFieldslider$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { NvFieldslider, defineCustomElement };
+
+//# sourceMappingURL=nv-fieldslider.js.map