@vonage/vivid 5.15.1 → 5.16.0

package/range-slider/definition.js

@@ -1,626 +1,3 @@
-import { P as Popup, a as PlacementStrategy, p as popupDefinition } from '../unbundled/definition5.js';
-import { V as VividElement, d as defineVividComponent, c as createRegisterFunction } from '../unbundled/vivid-element.js';
-import { observable, attr, nullableNumberConverter, ref, when, html } from '@microsoft/fast-element';
-import { Orientation, keyHome, keyEnd, keyArrowUp, keyArrowDown, limit, classNames } from '@microsoft/fast-web-utilities';
-import { k as keyArrowLeft, a as keyArrowRight } from '../unbundled/key-codes.js';
-import { F as FormAssociated } from '../unbundled/form-associated.js';
-import { i as inverseLerp, l as lerp, r as roundToStepValue, d as defaultToOneConverter, g as getMarkersTemplate } from '../unbundled/slider.template.js';
-import { L as Localized } from '../unbundled/localized.js';
-import { F as FormElement } from '../unbundled/form-element.js';
-
-const styles = ":host{display:inline-block}:host(:not([orientation=vertical])){inline-size:100%}:host([orientation=vertical]){block-size:100%;min-block-size:calc(var(--_thumb-interaction-indicator-size) * 5)}:host([disabled]){cursor:not-allowed}.control.connotation-cta{--_connotation-color-primary: var(--vvd-slider-cta-primary, var(--vvd-color-cta-500))}.control:not(.connotation-cta){--_connotation-color-primary: var(--vvd-slider-accent-primary, var(--vvd-color-canvas-text))}.control{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.control{--_thumb-size: 12px;--_thumb-interaction-indicator-size: 36px;--_track-start-inset-inline-start: 0;--_track-start-inset-block-start: 0;cursor:pointer;outline:none;user-select:none}.control .positioning-region{position:relative}.control .track{position:absolute;border-radius:4px;background:var(--_track-background-color)}.control .track-start{position:absolute;border-radius:inherit;background:var(--_track-start-background-color);block-size:100%;inset-inline-start:var(--_track-start-inset-inline-start)}.control.horizontal{block-size:var(--_thumb-interaction-indicator-size);inline-size:calc(100% - var(--_thumb-size));margin-inline-start:calc(var(--_thumb-size) / 2);min-inline-size:var(--_thumb-size)}.control.horizontal .track{top:calc((var(--_thumb-interaction-indicator-size) - 2px) / 2);right:0;left:0;block-size:2px}:host([markers]) .control.horizontal .track-start{--_track-start-inset-inline-start: 1px;border-bottom-left-radius:0;border-top-left-radius:0}.control.horizontal .track .mark{position:absolute;block-size:6px;inline-size:100%;inset-block-start:-2px;inset-inline-start:0}.control.vertical{margin-top:calc(var(--_thumb-interaction-indicator-size) / 2);block-size:calc(100% - var(--_thumb-interaction-indicator-size));inline-size:var(--_thumb-interaction-indicator-size);min-block-size:var(--_thumb-interaction-indicator-size)}.control.vertical .positioning-region{block-size:100%}.control.vertical .track{left:calc((var(--_thumb-interaction-indicator-size) - 2px) / 2);block-size:100%;inline-size:2px}.control.vertical .track .mark{position:absolute;block-size:100%;inline-size:6px;inset-block-start:0;inset-inline-start:-2px}.control.vertical .track-start{block-size:auto;inline-size:100%;inset-block-start:var(--_track-start-inset-block-start)}:host([markers]) .control.vertical .track-start{--_track-start-inset-block-start: 1px;border-radius:0}.control.disabled{--_track-background-color: var(--vvd-color-neutral-100);--_track-start-background-color: var(--vvd-color-neutral-300);pointer-events:none}.control:not(.disabled){--_track-background-color: var(--vvd-color-neutral-300);--_track-start-background-color: var(--_appearance-color-fill)}.control:not(.disabled) .mark{color:var(--vvd-color-neutral-950)}.control.disabled .mark{color:var(--_track-start-background-color)}.thumb-container{position:absolute;border-radius:50%;block-size:var(--_thumb-interaction-indicator-size);cursor:inherit;inline-size:var(--_thumb-interaction-indicator-size);outline:none;touch-action:none}.thumb-container.focus-visible{box-shadow:0 0 0 4px color-mix(in srgb,var(--focus-stroke-color, var(--vvd-color-cta-500)),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));--focus-stroke-gap-color: transparent;--_thumb-interaction-indicator-alpha: .05;border-radius:50%}.control.horizontal .thumb-container{transform:translate(calc(var(--_thumb-interaction-indicator-size) / 2))}.control.vertical .thumb-container{transform:translateY(calc(var(--_thumb-interaction-indicator-size) / 2))}@media(hover:hover){.control:not(.disabled) .thumb-container:hover{--_thumb-interaction-indicator-alpha: .12}}.control:not(.disabled) .thumb-container:active{--_thumb-interaction-indicator-alpha: .25}.thumb-container:before{position:absolute;display:block;border-radius:inherit;background-color:var(--_track-start-background-color);block-size:var(--_thumb-interaction-indicator-size);content:\"\";inline-size:var(--_thumb-interaction-indicator-size);opacity:var(--_thumb-interaction-indicator-alpha, 0);transition:opacity .2s ease-out 0s}.thumb-container:after{position:absolute;display:block;border-radius:inherit;background-color:var(--_track-start-background-color);block-size:var(--_thumb-size);content:\"\";inline-size:var(--_thumb-size);inset:calc((var(--_thumb-interaction-indicator-size) - var(--_thumb-size)) / 2)}.popup{pointer-events:none}.tooltip{width:auto;padding:8px 12px;color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base-bold)}:host([internal-part]) .thumb-container{opacity:0;transition:opacity .2s ease}:host([internal-part]) .control.horizontal .track{top:16px;block-size:4px;overflow:hidden}:host([internal-part]) .control:focus .thumb-container{opacity:1}@media(hover:hover){:host([internal-part]) .control:hover .thumb-container{opacity:1}}.control{--_track-start-inset-inline-start: auto;--_track-start-inset-block-start: auto}:host([markers]) .control.horizontal .track-start,:host([markers]) .control.vertical .track-start{--_track-start-inset-inline-start: auto;--_track-start-inset-block-start: auto}";
-
-var __defProp = Object.defineProperty;
-var __decorateClass = (decorators, target, key, kind) => {
-  var result = void 0 ;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (decorator(target, key, result) ) || result;
-  if (result) __defProp(target, key, result);
-  return result;
-};
-const Direction = {
-  Increment: 1,
-  Decrement: -1
-};
-class RangeSlider extends Localized(
-  FormElement(FormAssociated(VividElement))
-) {
-  constructor() {
-    super(...arguments);
-    // --- Start & end values ---
-    this.#isInternalValueUpdate = false;
-    this.start = "";
-    this.end = "";
-    this.min = 0;
-    this.max = 10;
-    this.step = 1;
-    this.orientation = Orientation.horizontal;
-    this.ariaStartLabel = null;
-    this.ariaEndLabel = null;
-    this.markers = false;
-    this.pin = false;
-    this.valueTextFormatter = (value) => parseFloat(value).toLocaleString(this.locale.lang);
-    // --- Form handling ---
-    /**
-     * @internal
-     */
-    this.proxy = document.createElement("input");
-    // --- Thumbs ---
-    /**
-     * @internal
-     */
-    this._trackEl = null;
-    /**
-     * @internal
-     */
-    this._startThumbEl = null;
-    /**
-     * @internal
-     */
-    this._endThumbEl = null;
-    this._draggingThumb = false;
-    this._visiblyFocusedThumb = null;
-    this._hoveredThumb = null;
-    this._startThumbCss = "";
-    this._endThumbCss = "";
-    this._selectedRangeCss = "";
-    this.#isNonVisibleFocus = false;
-    this.#onThumbFocus = (e) => {
-      if (!this.#isNonVisibleFocus) {
-        this._visiblyFocusedThumb = this.#getThumbIdFromEvent(e);
-      }
-    };
-    this.#onThumbBlur = () => {
-      this._visiblyFocusedThumb = null;
-    };
-    this.#onMouseOver = (e) => {
-      this._hoveredThumb = this.#getThumbIdFromEvent(e);
-    };
-    this.#onMouseOut = () => {
-      this._hoveredThumb = null;
-    };
-    this.#onThumbMousedown = (event) => {
-      if (this.disabled || event.defaultPrevented) {
-        return;
-      }
-      let target = event.target;
-      if (target === this._endThumbEl && this.startAsNumber === this.max && this.endAsNumber === this.max) {
-        target = this._startThumbEl;
-      }
-      this.#focusThumbNonVisibly(target);
-      this._draggingThumb = this.#getThumbId(target);
-      this.#registerDragHandlers();
-    };
-    this.#onThumbKeydown = (e) => {
-      const thumb = this.#getThumbIdFromEvent(e);
-      this._visiblyFocusedThumb = thumb;
-      if (e.key === keyHome) {
-        e.preventDefault();
-        this.#updateValues({ [thumb]: `${this.#thumbConstraints[thumb].min}` });
-      } else if (e.key === keyEnd) {
-        e.preventDefault();
-        this.#updateValues({ [thumb]: `${this.#thumbConstraints[thumb].max}` });
-      } else {
-        if (e.shiftKey) return;
-        switch (e.key) {
-          case keyArrowRight:
-          case keyArrowDown:
-            e.preventDefault();
-            this.#applyStep(thumb, Direction.Increment);
-            break;
-          case keyArrowLeft:
-          case keyArrowUp:
-            e.preventDefault();
-            this.#applyStep(thumb, Direction.Decrement);
-            break;
-        }
-      }
-    };
-    this.#onDragMove = (e) => {
-      if (this.disabled || e.defaultPrevented || !this._draggingThumb) {
-        return;
-      }
-      const sourceEvent = "TouchEvent" in window && e instanceof TouchEvent ? e.touches[0] : e;
-      const value = this.#calculateValueFromMouseEvent(sourceEvent);
-      this.#updateValues({
-        [this._draggingThumb]: `${this.#roundToNearestStep(
-          this._draggingThumb,
-          value
-        )}`
-      });
-    };
-    this.#onDragEnd = () => {
-      this._draggingThumb = false;
-      this.#unregisterDragListeners();
-    };
-  }
-  #isInternalValueUpdate;
-  /**
-   * @internal
-   */
-  startChanged() {
-    this.currentStart = this.start;
-    if (!this.#isInternalValueUpdate) {
-      this.dirtyValue = true;
-      this.#updateFormValue();
-    }
-    if (this.$fastController.isConnected) {
-      this.#updateThumbPositions();
-    }
-  }
-  /**
-   * @internal
-   */
-  initialStartChanged(_, newValue) {
-    if (newValue && !this.dirtyValue) {
-      this.start = newValue;
-      this.dirtyValue = false;
-    }
-  }
-  /**
-   * @internal
-   */
-  currentStartChanged() {
-    this.start = this.currentStart;
-  }
-  /**
-   * The start property, typed as a number.
-   *
-   * @public
-   */
-  get startAsNumber() {
-    return parseFloat(this.start);
-  }
-  set startAsNumber(next) {
-    this.start = next.toString();
-  }
-  /**
-   * @internal
-   */
-  endChanged() {
-    this.currentEnd = this.end;
-    if (!this.#isInternalValueUpdate) {
-      this.dirtyValue = true;
-      this.#updateFormValue();
-    }
-    if (this.$fastController.isConnected) {
-      this.#updateThumbPositions();
-    }
-  }
-  /**
-   * @internal
-   */
-  initialEndChanged(_, newValue) {
-    if (newValue && !this.dirtyValue) {
-      this.end = newValue;
-      this.dirtyValue = false;
-    }
-  }
-  /**
-   * @internal
-   */
-  currentEndChanged() {
-    this.end = this.currentEnd;
-  }
-  /**
-   * The end property, typed as a number.
-   *
-   * @public
-   */
-  get endAsNumber() {
-    return parseFloat(this.end);
-  }
-  set endAsNumber(next) {
-    this.end = next.toString();
-  }
-  #updateValues({ start, end }, emitEvents = true) {
-    if (start === this.start) {
-      start = void 0;
-    }
-    if (end === this.end) {
-      end = void 0;
-    }
-    if (start === void 0 && end === void 0) {
-      return;
-    }
-    this.#isInternalValueUpdate = true;
-    if (start !== void 0) {
-      this.start = start;
-    }
-    if (end !== void 0) {
-      this.end = end;
-    }
-    this.#isInternalValueUpdate = false;
-    if (emitEvents) {
-      if (start !== void 0) {
-        this.$emit("input:start");
-      }
-      if (end !== void 0) {
-        this.$emit("input:end");
-      }
-      this.$emit("input");
-      this.$emit("change");
-      this.dirtyValue = true;
-    }
-    this.#updateFormValue();
-  }
-  #applyStep(thumb, direction) {
-    this.#updateValues({
-      [thumb]: this.#roundToNearestStep(
-        thumb,
-        Number(this[thumb]) + direction * this.step
-      ).toString()
-    });
-  }
-  /**
-   * @internal
-   */
-  orientationChanged() {
-    if (this.$fastController.isConnected) {
-      this.#updateThumbPositions();
-    }
-  }
-  /**
-   * @internal
-   */
-  nameChanged(previous, next) {
-    super.nameChanged(previous, next);
-    this.#updateFormValue();
-  }
-  #updateFormValue() {
-    if (!this.name) {
-      this.setFormValue(null);
-    } else {
-      const formData = new FormData();
-      formData.append(this.name, this.start);
-      formData.append(this.name, this.end);
-      this.setFormValue(formData);
-    }
-  }
-  formResetCallback() {
-    this.#updateValues({
-      start: this.initialStart ?? this.min.toString(),
-      end: this.initialEnd ?? this.max.toString()
-    });
-    super.formResetCallback();
-  }
-  get #thumbs() {
-    return {
-      start: this._startThumbEl,
-      end: this._endThumbEl
-    };
-  }
-  get #thumbConstraints() {
-    return {
-      start: { min: this.min, max: this.endAsNumber },
-      end: { min: this.startAsNumber, max: this.max }
-    };
-  }
-  #getThumbId(thumb) {
-    return thumb === this._startThumbEl ? "start" : "end";
-  }
-  #getThumbIdFromEvent(e) {
-    return this.#getThumbId(e.target);
-  }
-  #updateThumbPositions() {
-    const startOffsetPct = this.#thumbTrackEndOffset(this.startAsNumber);
-    const endOffsetPct = this.#thumbTrackEndOffset(this.endAsNumber);
-    const [dirProp, dimProp] = this.orientation === Orientation.horizontal ? ["right", "width"] : ["bottom", "height"];
-    const transition = `transition: ${this._draggingThumb ? "none" : "all 0.2s ease"};`;
-    this._startThumbCss = `${dirProp}: ${startOffsetPct}%; ${transition}`;
-    this._endThumbCss = `${dirProp}: ${endOffsetPct}%; ${transition}`;
-    this._selectedRangeCss = `${dirProp}: ${endOffsetPct}%; ${dimProp}: ${startOffsetPct - endOffsetPct}%; ${transition}`;
-  }
-  #thumbTrackEndOffset(value) {
-    return (1 - inverseLerp(this.min, this.max, value)) * 100;
-  }
-  #calculateValueFromMouseEvent(e) {
-    const trackClientRect = this._trackEl.getBoundingClientRect();
-    const [minPos, maxPos, valuePos] = this.orientation === Orientation.horizontal ? [
-      this._trackEl.clientLeft,
-      this._trackEl.clientWidth,
-      e.pageX - document.documentElement.scrollLeft - this.getBoundingClientRect().left
-    ] : [
-      trackClientRect.top,
-      trackClientRect.bottom,
-      e.pageY - document.documentElement.scrollTop
-    ];
-    return lerp(this.min, this.max, inverseLerp(minPos, maxPos, valuePos));
-  }
-  #roundToNearestStep(thumb, value) {
-    return limit(
-      this.#thumbConstraints[thumb].min,
-      this.#thumbConstraints[thumb].max,
-      roundToStepValue(value - this.min, this.step) + this.min
-    );
-  }
-  #isNonVisibleFocus;
-  #focusThumbNonVisibly(thumb) {
-    this.#isNonVisibleFocus = true;
-    thumb.focus();
-    this.#isNonVisibleFocus = false;
-  }
-  /**
-   * @internal
-   */
-  _isThumbPopupOpen(thumb) {
-    return this._visiblyFocusedThumb === thumb || this._hoveredThumb === thumb || this._draggingThumb === thumb;
-  }
-  // --- Lifecycle ---
-  connectedCallback() {
-    super.connectedCallback();
-    this.#updateValues(
-      {
-        start: this.start || this.initialStart || this.min.toString(),
-        end: this.end || this.initialEnd || this.max.toString()
-      },
-      false
-    );
-    this.#registerThumbListeners();
-    this.#updateThumbPositions();
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    this.#unregisterThumbListeners();
-    this.#unregisterDragListeners();
-  }
-  // --- Event handling ---
-  #registerThumbListeners() {
-    for (const thumb of ["start", "end"]) {
-      this.#thumbs[thumb].addEventListener("keydown", this.#onThumbKeydown);
-      this.#thumbs[thumb].addEventListener(
-        "mousedown",
-        this.#onThumbMousedown,
-        { passive: true }
-      );
-      this.#thumbs[thumb].addEventListener(
-        "touchstart",
-        this.#onThumbMousedown,
-        { passive: true }
-      );
-      this.#thumbs[thumb].addEventListener("mouseover", this.#onMouseOver, {
-        passive: true
-      });
-      this.#thumbs[thumb].addEventListener("mouseout", this.#onMouseOut, {
-        passive: true
-      });
-      this.#thumbs[thumb].addEventListener("focus", this.#onThumbFocus);
-      this.#thumbs[thumb].addEventListener("blur", this.#onThumbBlur);
-    }
-  }
-  #unregisterThumbListeners() {
-    for (const thumb of ["start", "end"]) {
-      this.#thumbs[thumb].removeEventListener("keydown", this.#onThumbKeydown);
-      this.#thumbs[thumb].removeEventListener(
-        "mousedown",
-        this.#onThumbMousedown
-      );
-      this.#thumbs[thumb].removeEventListener(
-        "touchstart",
-        this.#onThumbMousedown
-      );
-      this.#thumbs[thumb].removeEventListener("mouseover", this.#onMouseOver);
-      this.#thumbs[thumb].removeEventListener("mouseout", this.#onMouseOut);
-      this.#thumbs[thumb].removeEventListener("focus", this.#onThumbFocus);
-      this.#thumbs[thumb].removeEventListener("blur", this.#onThumbBlur);
-    }
-  }
-  /**
-   * @internal
-   */
-  _onMouseDown(e) {
-    if (this.disabled || this._draggingThumb) {
-      return;
-    }
-    const value = this.#calculateValueFromMouseEvent(e);
-    const startDistance = Math.abs(value - Number(this.start));
-    const endDistance = Math.abs(value - Number(this.end));
-    const thumb = startDistance < endDistance || startDistance === endDistance && value < Number(this.start) ? "start" : "end";
-    this.#updateValues({
-      [thumb]: `${this.#roundToNearestStep(thumb, value)}`
-    });
-    this._draggingThumb = thumb;
-    this.#focusThumbNonVisibly(this.#thumbs[thumb]);
-    this.#registerDragHandlers();
-  }
-  #onThumbFocus;
-  #onThumbBlur;
-  #onMouseOver;
-  #onMouseOut;
-  #onThumbMousedown;
-  #onThumbKeydown;
-  #registerDragHandlers() {
-    window.addEventListener("mousemove", this.#onDragMove, { passive: true });
-    window.addEventListener("touchmove", this.#onDragMove, { passive: true });
-    window.addEventListener("mouseup", this.#onDragEnd);
-    window.addEventListener("touchend", this.#onDragEnd);
-    window.document.addEventListener("mouseleave", this.#onDragEnd);
-  }
-  #unregisterDragListeners() {
-    window.removeEventListener("mouseup", this.#onDragEnd);
-    window.document.removeEventListener("mouseleave", this.#onDragEnd);
-    window.removeEventListener("mousemove", this.#onDragMove);
-    window.removeEventListener("touchmove", this.#onDragMove);
-    window.removeEventListener("touchend", this.#onDragEnd);
-  }
-  #onDragMove;
-  #onDragEnd;
-}
-__decorateClass([
-  observable
-], RangeSlider.prototype, "start");
-__decorateClass([
-  attr({ mode: "fromView", attribute: "start" })
-], RangeSlider.prototype, "initialStart");
-__decorateClass([
-  attr({ attribute: "current-start" })
-], RangeSlider.prototype, "currentStart");
-__decorateClass([
-  observable
-], RangeSlider.prototype, "end");
-__decorateClass([
-  attr({ mode: "fromView", attribute: "end" })
-], RangeSlider.prototype, "initialEnd");
-__decorateClass([
-  attr({ attribute: "current-end" })
-], RangeSlider.prototype, "currentEnd");
-__decorateClass([
-  attr({ converter: nullableNumberConverter })
-], RangeSlider.prototype, "min");
-__decorateClass([
-  attr({ converter: nullableNumberConverter })
-], RangeSlider.prototype, "max");
-__decorateClass([
-  attr({ converter: defaultToOneConverter })
-], RangeSlider.prototype, "step");
-__decorateClass([
-  attr
-], RangeSlider.prototype, "orientation");
-__decorateClass([
-  attr({ attribute: "aria-start-label" })
-], RangeSlider.prototype, "ariaStartLabel");
-__decorateClass([
-  attr({ attribute: "aria-end-label" })
-], RangeSlider.prototype, "ariaEndLabel");
-__decorateClass([
-  attr({ mode: "boolean" })
-], RangeSlider.prototype, "markers");
-__decorateClass([
-  attr
-], RangeSlider.prototype, "connotation");
-__decorateClass([
-  attr({ mode: "boolean" })
-], RangeSlider.prototype, "pin");
-__decorateClass([
-  observable
-], RangeSlider.prototype, "valueTextFormatter");
-__decorateClass([
-  observable
-], RangeSlider.prototype, "_draggingThumb");
-__decorateClass([
-  observable
-], RangeSlider.prototype, "_visiblyFocusedThumb");
-__decorateClass([
-  observable
-], RangeSlider.prototype, "_hoveredThumb");
-__decorateClass([
-  observable
-], RangeSlider.prototype, "_startThumbCss");
-__decorateClass([
-  observable
-], RangeSlider.prototype, "_endThumbCss");
-__decorateClass([
-  observable
-], RangeSlider.prototype, "_selectedRangeCss");
-
-const getClasses = ({ disabled, connotation }) => classNames(
-  "control",
-  ["disabled", Boolean(disabled)],
-  [`connotation-${connotation}`, Boolean(connotation)]
-);
-const getThumbClassesFor = (thumb) => ({ _visiblyFocusedThumb }) => classNames("thumb-container", [
-  "focus-visible",
-  _visiblyFocusedThumb === thumb
-]);
-const RangeSliderTemplate = (context) => {
-  const popupTag = context.tagFor(Popup);
-  return html` <template
-		@mousedown="${(x, c) => x._onMouseDown(c.event)}"
-	>
-		<div class="${getClasses} ${(x) => x.orientation}">
-			<div class="positioning-region">
-				<div ${ref("_trackEl")} class="track">
-					<div class="track-start" style="${(x) => x._selectedRangeCss}"></div>
-					${when(
-    (x) => x.markers,
-    html`${(x) => getMarkersTemplate(
-      x.orientation === Orientation.horizontal,
-      Math.floor((x.max - x.min) / x.step)
-    )}`
-  )}
-				</div>
-				<div
-					id="start-thumb"
-					${ref("_startThumbEl")}
-					class="${getThumbClassesFor("start")}"
-					style="${(x) => x._startThumbCss}"
-					role="slider"
-					tabindex="${(x) => x.disabled ? null : 0}"
-					aria-label="${(x) => x.ariaStartLabel || x.locale.rangeSlider.startThumbLabel}"
-					aria-valuetext="${(x) => x.valueTextFormatter(x.start)}"
-					aria-valuenow="${(x) => x.start}"
-					aria-valuemin="${(x) => x.min}"
-					aria-valuemax="${(x) => x.end}"
-					aria-disabled="${(x) => x.disabled}"
-					aria-orientation="${(x) => x.orientation}"
-				></div>
-				${when(
-    (x) => x.pin,
-    html`<${popupTag}
-					class="popup"
-					arrow
-					alternate
-					:anchor="${(x) => x._startThumbEl}"
-					:open=${(x) => x._isThumbPopupOpen("start")}
-					:placementStrategy=${(x) => x.orientation === Orientation.horizontal ? PlacementStrategy.AutoPlacementHorizontal : PlacementStrategy.AutoPlacementVertical}
-					animation-frame
-					exportparts="vvd-theme-alternate"
-					aria-hidden="true"
-				>
-					<div class="tooltip">${(x) => x.valueTextFormatter(x.start)}</div>
-				</${popupTag}>`
-  )}
-				<div
-					id="end-thumb"
-					${ref("_endThumbEl")}
-					class="${getThumbClassesFor("end")}"
-					style="${(x) => x._endThumbCss}"
-					role="slider"
-					tabindex="${(x) => x.disabled ? null : 0}"
-					aria-label="${(x) => x.ariaEndLabel || x.locale.rangeSlider.endThumbLabel}"
-					aria-valuetext="${(x) => x.valueTextFormatter(x.end)}"
-					aria-valuenow="${(x) => x.end}"
-					aria-valuemin="${(x) => x.start}"
-					aria-valuemax="${(x) => x.max}"
-					aria-disabled="${(x) => x.disabled}"
-					aria-orientation="${(x) => x.orientation}"
-				></div>
-				${when(
-    (x) => x.pin,
-    html`<${popupTag}
-					class="popup"
-					arrow
-					alternate
-					:anchor="${(x) => x._endThumbEl}"
-					:open=${(x) => x._isThumbPopupOpen("end")}
-					:placementStrategy=${(x) => x.orientation === Orientation.horizontal ? PlacementStrategy.AutoPlacementHorizontal : PlacementStrategy.AutoPlacementVertical}
-					animation-frame
-					exportparts="vvd-theme-alternate"
-					aria-hidden="true"
-				>
-					<div class="tooltip">${(x) => x.valueTextFormatter(x.end)}</div>
-				</${popupTag}>`
-  )}
-			</div>
-		</div>
-	</template>`;
-};
-
-const rangeSliderDefinition = defineVividComponent(
-  "range-slider",
-  RangeSlider,
-  RangeSliderTemplate,
-  [popupDefinition],
-  {
-    styles,
-    shadowOptions: {
-      delegatesFocus: true
-    }
-  }
-);
-const registerRangeSlider = createRegisterFunction(
-  rangeSliderDefinition
-);
-
+import "../unbundled/definition2.js";
+import { n as registerRangeSlider, r as RangeSlider, t as rangeSliderDefinition } from "../unbundled/definition55.js";
 export { RangeSlider as VwcRangeSliderElement, rangeSliderDefinition, registerRangeSlider };