@vonage/vivid 4.16.2 → 4.18.0

package/shared/definition48.cjs

@@ -1,17 +1,22 @@
 'use strict';
 
-const definition = require('./definition27.cjs');
+const definition = require('./definition65.cjs');
 const vividElement = require('./vivid-element.cjs');
-const formAssociated = require('./form-associated.cjs');
 const keyCodes = require('./key-codes.cjs');
-const when = require('./when.cjs');
-const classNames = require('./class-names.cjs');
+const direction = require('./direction.cjs');
+const applyMixins = require('./apply-mixins.cjs');
+const slider_template = require('./slider.template.cjs');
+const delegatesAria = require('./delegates-aria.cjs');
+const formAssociated = require('./form-associated.cjs');
+const aria = require('./aria.cjs');
+const numbers = require('./numbers.cjs');
+const localized = require('./localized.cjs');
 
-const styles = ":host(.disabled){cursor:not-allowed}.control.connotation-cta{--_connotation-color-primary-text: var(--vvd-switch-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-primary: var(--vvd-switch-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-increment: var(--vvd-switch-cta-primary-increment, var(--vvd-color-cta-600));--_connotation-color-firm: var(--vvd-switch-cta-firm, var(--vvd-color-cta-600));--_connotation-color-intermediate: var(--vvd-switch-cta-intermediate, var(--vvd-color-cta-500));--_connotation-color-fierce: var(--vvd-switch-cta-fierce, var(--vvd-color-cta-700))}.control.connotation-alert{--_connotation-color-primary-text: var(--vvd-switch-alert-primary-text, var(--vvd-color-canvas));--_connotation-color-primary: var(--vvd-switch-alert-primary, var(--vvd-color-alert-500));--_connotation-color-primary-increment: var(--vvd-switch-alert-primary-increment, var(--vvd-color-alert-600));--_connotation-color-firm: var(--vvd-switch-alert-firm, var(--vvd-color-alert-600));--_connotation-color-intermediate: var(--vvd-switch-alert-intermediate, var(--vvd-color-alert-500));--_connotation-color-fierce: var(--vvd-switch-alert-fierce, var(--vvd-color-alert-700))}.control.connotation-success{--_connotation-color-primary-text: var(--vvd-switch-success-primary-text, var(--vvd-color-canvas));--_connotation-color-primary: var(--vvd-switch-success-primary, var(--vvd-color-success-500));--_connotation-color-primary-increment: var(--vvd-switch-success-primary-increment, var(--vvd-color-success-600));--_connotation-color-firm: var(--vvd-switch-success-firm, var(--vvd-color-success-600));--_connotation-color-intermediate: var(--vvd-switch-success-intermediate, var(--vvd-color-success-500));--_connotation-color-fierce: var(--vvd-switch-success-fierce, var(--vvd-color-success-700))}.control.connotation-announcement{--_connotation-color-primary-text: var(--vvd-switch-announcement-primary-text, var(--vvd-color-canvas));--_connotation-color-primary: var(--vvd-switch-announcement-primary, var(--vvd-color-announcement-500));--_connotation-color-primary-increment: var(--vvd-switch-announcement-primary-increment, var(--vvd-color-announcement-600));--_connotation-color-firm: var(--vvd-switch-announcement-firm, var(--vvd-color-announcement-600));--_connotation-color-intermediate: var(--vvd-switch-announcement-intermediate, var(--vvd-color-announcement-500));--_connotation-color-fierce: var(--vvd-switch-announcement-fierce, var(--vvd-color-announcement-700))}.control:not(.connotation-cta,.connotation-alert,.connotation-success,.connotation-announcement){--_connotation-color-primary-text: var(--vvd-switch-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary: var(--vvd-switch-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-increment: var(--vvd-switch-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-firm: var(--vvd-switch-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-intermediate: var(--vvd-switch-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-fierce: var(--vvd-switch-accent-fierce, var(--vvd-color-neutral-700))}.control{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--_connotation-color-intermediate)}.control.appearance-filled{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.control:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--_connotation-color-fierce)}.control:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-filled{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary-increment);--_appearance-color-outline: transparent}.control:where(.disabled,:disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.control:where(.disabled,:disabled).appearance-filled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: transparent}.control:where(.readonly):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-neutral-200);--_appearance-color-outline: var(--vvd-color-neutral-400)}.control:where(.readonly):where(:not(.disabled,:disabled)).appearance-filled{--_appearance-color-text: var(--vvd-color-neutral-800);--_appearance-color-fill: var(--vvd-color-neutral-500);--_appearance-color-outline: transparent}.control{display:inline-flex;border-radius:16px;gap:8px;--focus-inset: -4px;--focus-stroke-gap-color: transparent}.control:focus-visible{box-shadow:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:calc(-2px - var(--focus-inset, 0px))}@supports (user-select: none){.control{user-select:none}}.control:not(.disabled){cursor:pointer}.control.disabled{pointer-events:none}.switch{--_switch-inline-size: calc(1px*(20 + 4*clamp(-1, var(--vvd-size-density, 0), 2))*1.8) ;display:flex;box-sizing:border-box;align-items:center;border-radius:40px;background-color:var(--_appearance-color-fill);block-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2)));box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);inline-size:var(--_switch-inline-size);transition:all .2s ease-in-out 0s}.checked-indicator{--_switch-checked-indicator-size: calc( calc(1px*(20 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) / 1.6667);--_switch-gutter: calc(var(--_switch-checked-indicator-size) / 3);border-radius:inherit;block-size:var(--_switch-checked-indicator-size);inline-size:var(--_switch-checked-indicator-size);margin-inline-start:auto;transition:all .2s ease-in-out 0s}.control:not(.appearance-filled) .checked-indicator{background-color:var(--_appearance-color-outline)}.control:not(.appearance-filled):where(.readonly) .checked-indicator{background-color:var(--vvd-color-neutral-600)}.control.appearance-filled .checked-indicator{background-color:var(--vvd-color-neutral-100)}.control:not(.checked) .checked-indicator{transform:translate(calc(-1 * var(--_switch-inline-size) + var(--_switch-checked-indicator-size) + var(--_switch-gutter)))}.control.checked .checked-indicator{transform:translate(calc(-1 * var(--_switch-gutter)))}.control.appearance-filled.disabled .checked-indicator{background-color:var(--_appearance-color-text)}.control.appearance-filled.readonly .checked-indicator{background-color:var(--vvd-color-neutral-50)}.label{color:var(--vvd-color-canvas-text);cursor:pointer;font:var(--vvd-typography-base)}";
+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:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:calc(-2px - 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))}.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:hover .thumb-container,:host([internal-part]) .control:focus .thumb-container{opacity:1}";
 
-class _Switch extends vividElement.VividElement {
+class _Slider extends vividElement.VividElement {
 }
-class FormAssociatedSwitch extends formAssociated.CheckableFormAssociated(_Switch) {
+class FormAssociatedSlider extends formAssociated.FormAssociated(_Slider) {
   constructor() {
     super(...arguments);
     this.proxy = document.createElement("input");
@@ -19,43 +24,198 @@ class FormAssociatedSwitch extends formAssociated.CheckableFormAssociated(_Switc
 }
 
 var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
-  var result = void 0 ;
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
   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);
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
   return result;
 };
-class Switch extends FormAssociatedSwitch {
+const SliderMode = {
+  singleValue: "single-value"
+};
+class Slider extends delegatesAria.DelegatesAria(FormAssociatedSlider) {
   constructor() {
-    super();
-    this.ariaLabel = null;
+    super(...arguments);
+    this.direction = direction.Direction.ltr;
+    this.isDragging = false;
+    this.trackWidth = 0;
+    this.trackMinWidth = 0;
+    this.trackHeight = 0;
+    this.trackLeft = 0;
+    this.trackMinHeight = 0;
+    this.valueTextFormatter = (value) => parseFloat(value).toLocaleString(this.locale.lang);
+    // eslint-disable-next-line @nrwl/nx/workspace/no-attribute-default-value
+    this.min = 0;
+    // eslint-disable-next-line @nrwl/nx/workspace/no-attribute-default-value
+    this.max = 10;
+    // eslint-disable-next-line @nrwl/nx/workspace/no-attribute-default-value
+    this.step = 1;
+    // eslint-disable-next-line @nrwl/nx/workspace/no-attribute-default-value
+    this.orientation = aria.Orientation.horizontal;
+    this.mode = SliderMode.singleValue;
+    this.keypressHandler = (e) => {
+      this._focusVisible = true;
+      if (this.readOnly) {
+        return;
+      }
+      if (e.key === keyCodes.keyHome) {
+        e.preventDefault();
+        this.value = `${this.min}`;
+      } else if (e.key === keyCodes.keyEnd) {
+        e.preventDefault();
+        this.value = `${this.max}`;
+      } else if (!e.shiftKey) {
+        switch (e.key) {
+          case keyCodes.keyArrowRight:
+          case keyCodes.keyArrowUp:
+            e.preventDefault();
+            this.increment();
+            break;
+          case keyCodes.keyArrowLeft:
+          case keyCodes.keyArrowDown:
+            e.preventDefault();
+            this.decrement();
+            break;
+        }
+      }
+    };
+    this.setupTrackConstraints = () => {
+      const clientRect = this.track.getBoundingClientRect();
+      this.trackWidth = this.track.clientWidth;
+      this.trackMinWidth = this.track.clientLeft;
+      this.trackHeight = clientRect.bottom;
+      this.trackMinHeight = clientRect.top;
+      this.trackLeft = this.getBoundingClientRect().left;
+      if (this.trackWidth === 0) {
+        this.trackWidth = 1;
+      }
+    };
+    this.setupListeners = (remove = false) => {
+      const eventAction = remove ? "removeEventListener" : "addEventListener";
+      this[eventAction]("keydown", this.keypressHandler);
+      this[eventAction]("mousedown", this.handleMouseDown);
+      this.thumb[eventAction](
+        "mousedown",
+        this.handleThumbMouseDown,
+        {
+          passive: true
+        }
+      );
+      this.thumb[eventAction](
+        "touchstart",
+        this.handleThumbMouseDown,
+        {
+          passive: true
+        }
+      );
+      if (remove) {
+        this.handleMouseDown(null);
+        this.handleThumbMouseDown(null);
+      }
+    };
     /**
-     * The element's value to be included in form submission when checked.
-     * Default to "on" to reach parity with input[type="checkbox"]
-     *
      * @internal
      */
-    this.initialValue = "on";
+    this.initialValue = "";
     /**
-     * @internal
+     *  Handle mouse moves during a thumb drag operation
+     *  If the event handler is null it removes the events
      */
-    this.keypressHandler = (e) => {
-      if (e.key === keyCodes.keySpace || e.key === keyCodes.keyEnter) {
-        this.checked = !this.checked;
+    this.handleThumbMouseDown = (event) => {
+      if (event) {
+        if (this.readOnly || this.disabled || event.defaultPrevented) {
+          return;
+        }
+        this.#isNonVisibleFocus = true;
+        event.target.focus();
+        this.#isNonVisibleFocus = false;
       }
+      const eventAction = event !== null ? "addEventListener" : "removeEventListener";
+      window[eventAction]("mouseup", this.handleWindowMouseUp);
+      window[eventAction]("mousemove", this.handleMouseMove, {
+        passive: true
+      });
+      window[eventAction]("touchmove", this.handleMouseMove, {
+        passive: true
+      });
+      window[eventAction]("touchend", this.handleWindowMouseUp);
+      this.isDragging = event !== null;
     };
+    /**
+     *  Handle mouse moves during a thumb drag operation
+     */
+    this.handleMouseMove = (e) => {
+      if (this.readOnly || this.disabled || e.defaultPrevented) {
+        return;
+      }
+      const sourceEvent = "TouchEvent" in window && e instanceof TouchEvent ? e.touches[0] : e;
+      const value = this.#calculateValueFromMouseEvent(sourceEvent);
+      this.value = `${this.#roundToNearestStep(value)}`;
+    };
+    /**
+     * Handle a window mouse up during a drag operation
+     */
+    this.handleWindowMouseUp = (_) => {
+      this.stopDragging();
+    };
+    this.stopDragging = () => {
+      this.isDragging = false;
+      this.handleMouseDown(null);
+      this.handleThumbMouseDown(null);
+    };
+    /**
+     *
+     * @param e - MouseEvent or null. If there is no event handler it will remove the events
+     */
+    this.handleMouseDown = (e) => {
+      const eventAction = e !== null ? "addEventListener" : "removeEventListener";
+      if (e === null || !this.disabled && !this.readOnly) {
+        window[eventAction]("mouseup", this.handleWindowMouseUp);
+        window.document[eventAction](
+          "mouseleave",
+          this.handleWindowMouseUp
+        );
+        window[eventAction]("mousemove", this.handleMouseMove);
+        if (e) {
+          e.preventDefault();
+          this.setupTrackConstraints();
+          this.#isNonVisibleFocus = true;
+          e.target.focus();
+          this.#isNonVisibleFocus = false;
+          const value = this.#calculateValueFromMouseEvent(e);
+          this.value = `${this.#roundToNearestStep(value)}`;
+          this.isDragging = true;
+        }
+      }
+    };
+    this.markers = false;
+    this.pin = false;
+    this._focusVisible = false;
+    this._hoveringOnThumb = false;
+    this.#isNonVisibleFocus = false;
     /**
      * @internal
      */
-    this.clickHandler = () => {
-      if (!this.disabled && !this.readOnly) {
-        this.checked = !this.checked;
+    this._onFocusIn = () => {
+      if (!this.#isNonVisibleFocus) {
+        this._focusVisible = true;
       }
     };
-    this.defaultChecked = !!this.checkedAttribute;
-    this.checked = this.defaultChecked;
+    /**
+     * @internal
+     */
+    this._onFocusOut = () => {
+      this._focusVisible = false;
+    };
+    this.#onMouseOver = () => {
+      this._hoveringOnThumb = true;
+    };
+    this.#onMouseOut = () => {
+      this._hoveringOnThumb = false;
+    };
   }
   // Map to proxy element
   /**
@@ -65,77 +225,264 @@ class Switch extends FormAssociatedSwitch {
     if (this.proxy instanceof HTMLInputElement) {
       this.proxy.readOnly = this.readOnly;
     }
-    this.readOnly ? this.classList.add("readonly") : this.classList.remove("readonly");
+  }
+  /**
+   * The value property, typed as a number.
+   *
+   * @public
+   */
+  get valueAsNumber() {
+    return parseFloat(super.value);
+  }
+  set valueAsNumber(next) {
+    this.value = next.toString();
+  }
+  /**
+   * @internal
+   */
+  valueChanged(previous, next) {
+    super.valueChanged(previous, next);
+    if (this.$fastController.isConnected) {
+      const nextAsNumber = parseFloat(next);
+      const value = this.#roundToNearestStep(nextAsNumber).toString();
+      if (value !== next) {
+        this.value = value;
+        return;
+      }
+      this.setThumbPositionForOrientation(this.direction);
+      this.$emit("change");
+    }
+  }
+  // Map to proxy element.
+  /**
+   * @internal
+   */
+  minChanged() {
+    if (this.proxy instanceof HTMLInputElement) {
+      this.proxy.min = `${this.min}`;
+    }
+    this.validate();
+  }
+  // Map to proxy element.
+  /**
+   * @internal
+   */
+  maxChanged() {
+    if (this.proxy instanceof HTMLInputElement) {
+      this.proxy.max = `${this.max}`;
+    }
+    this.validate();
+  }
+  // Map to proxy element.
+  /**
+   * @internal
+   */
+  stepChanged() {
+    if (this.proxy instanceof HTMLInputElement) {
+      this.proxy.step = `${this.step}`;
+    }
+    this.updateStepMultiplier();
+    this.validate();
+  }
+  /**
+   * @internal
+   */
+  orientationChanged() {
+    if (this.$fastController.isConnected) {
+      this.setThumbPositionForOrientation(this.direction);
+    }
   }
   /**
    * @internal
    */
   connectedCallback() {
     super.connectedCallback();
-    this.proxy.setAttribute("type", "checkbox");
-    this.updateForm();
+    this.proxy.setAttribute("type", "range");
+    this.direction = direction.getDirection(this);
+    this.updateStepMultiplier();
+    this.setupTrackConstraints();
+    this.setupListeners();
+    this.setupDefaultValue();
+    this.setThumbPositionForOrientation(this.direction);
+    this.#registerThumbListeners();
+  }
+  /**
+   * @internal
+   */
+  disconnectedCallback() {
+    this.setupListeners(true);
+    this.#unregisterThumbListeners();
+  }
+  /**
+   * Increment the value by the step
+   *
+   * @public
+   */
+  increment() {
+    const newVal = this.direction !== direction.Direction.rtl && this.orientation !== aria.Orientation.vertical ? Number(this.value) + Number(this.step) : Number(this.value) - Number(this.step);
+    this.value = this.#roundToNearestStep(newVal).toString();
+  }
+  /**
+   * Decrement the value by the step
+   *
+   * @public
+   */
+  decrement() {
+    const newVal = this.direction !== direction.Direction.rtl && this.orientation !== aria.Orientation.vertical ? Number(this.value) - Number(this.step) : Number(this.value) + Number(this.step);
+    this.value = this.#roundToNearestStep(newVal).toString();
+  }
+  /**
+   * Places the thumb based on the current value
+   *
+   * @public
+   * @param direction - writing mode
+   */
+  setThumbPositionForOrientation(_) {
+    const percentage = this.#thumbTrackEndOffset(this.valueAsNumber);
+    if (this.orientation === aria.Orientation.horizontal) {
+      this.position = this.isDragging ? `right: ${percentage}%; transition: none;` : `right: ${percentage}%; transition: all 0.2s ease;`;
+    } else {
+      this.position = this.isDragging ? `bottom: ${percentage}%; transition: none;` : `bottom: ${percentage}%; transition: all 0.2s ease;`;
+    }
+  }
+  #thumbTrackEndOffset(value) {
+    return (1 - slider_template.inverseLerp(this.min, this.max, value)) * 100;
+  }
+  /**
+   * Update the step multiplier used to ensure rounding errors from steps that
+   * are not whole numbers
+   */
+  updateStepMultiplier() {
+    const stepString = this.step + "";
+    const decimalPlacesOfStep = this.step % 1 ? stepString.length - stepString.indexOf(".") - 1 : 0;
+    this.stepMultiplier = Math.pow(10, decimalPlacesOfStep);
+  }
+  get midpoint() {
+    return `${this.#roundToNearestStep((this.max + this.min) / 2)}`;
+  }
+  setupDefaultValue() {
+    if (typeof this.value === "string") {
+      if (this.value.length === 0) {
+        this.initialValue = this.midpoint;
+      } else {
+        const value = parseFloat(this.value);
+        if (!Number.isNaN(value) && (value < this.min || value > this.max)) {
+          this.value = this.midpoint;
+        }
+      }
+    }
+  }
+  #calculateValueFromMouseEvent(e) {
+    const trackClientRect = this.track.getBoundingClientRect();
+    const [minPos, maxPos, valuePos] = this.orientation === aria.Orientation.horizontal ? [
+      this.track.clientLeft,
+      this.track.clientWidth,
+      e.pageX - document.documentElement.scrollLeft - this.getBoundingClientRect().left
+    ] : [
+      trackClientRect.top,
+      trackClientRect.bottom,
+      e.pageY - document.documentElement.scrollTop
+    ];
+    return slider_template.lerp(this.min, this.max, slider_template.inverseLerp(minPos, maxPos, valuePos));
+  }
+  #roundToNearestStep(value) {
+    return numbers.limit(
+      this.min,
+      this.max,
+      slider_template.roundToStepValue(value - this.min, this.step) + this.min
+    );
+  }
+  get _isThumbPopupOpen() {
+    return this._focusVisible || this._hoveringOnThumb || this.isDragging;
+  }
+  #isNonVisibleFocus;
+  #registerThumbListeners() {
+    this.thumb.addEventListener("mouseover", this.#onMouseOver, {
+      passive: true
+    });
+    this.thumb.addEventListener("mouseout", this.#onMouseOut, {
+      passive: true
+    });
   }
-  updateForm() {
-    const value = this.checked ? this.value : null;
-    this.setFormValue(value, value);
+  #unregisterThumbListeners() {
+    this.thumb.removeEventListener("mouseover", this.#onMouseOver);
+    this.thumb.removeEventListener("mouseout", this.#onMouseOut);
   }
+  #onMouseOver;
+  #onMouseOut;
 }
 __decorateClass([
-  vividElement.attr({ attribute: "aria-label" })
-], Switch.prototype, "ariaLabel");
+  vividElement.attr({ attribute: "readonly", mode: "boolean" })
+], Slider.prototype, "readOnly", 2);
+__decorateClass([
+  vividElement.observable
+], Slider.prototype, "direction", 2);
+__decorateClass([
+  vividElement.observable
+], Slider.prototype, "isDragging", 2);
+__decorateClass([
+  vividElement.observable
+], Slider.prototype, "position", 2);
+__decorateClass([
+  vividElement.observable
+], Slider.prototype, "trackWidth", 2);
+__decorateClass([
+  vividElement.observable
+], Slider.prototype, "trackMinWidth", 2);
+__decorateClass([
+  vividElement.observable
+], Slider.prototype, "trackHeight", 2);
+__decorateClass([
+  vividElement.observable
+], Slider.prototype, "trackLeft", 2);
+__decorateClass([
+  vividElement.observable
+], Slider.prototype, "trackMinHeight", 2);
+__decorateClass([
+  vividElement.observable
+], Slider.prototype, "valueTextFormatter", 2);
+__decorateClass([
+  vividElement.attr({ converter: vividElement.nullableNumberConverter })
+], Slider.prototype, "min", 2);
+__decorateClass([
+  vividElement.attr({ converter: vividElement.nullableNumberConverter })
+], Slider.prototype, "max", 2);
+__decorateClass([
+  vividElement.attr({ converter: slider_template.defaultToOneConverter })
+], Slider.prototype, "step", 2);
 __decorateClass([
   vividElement.attr
-], Switch.prototype, "label");
+], Slider.prototype, "orientation", 2);
 __decorateClass([
   vividElement.attr
-], Switch.prototype, "connotation");
+], Slider.prototype, "mode", 2);
 __decorateClass([
-  vividElement.attr({ attribute: "readonly", mode: "boolean" })
-], Switch.prototype, "readOnly");
+  vividElement.attr({
+    mode: "boolean"
+  })
+], Slider.prototype, "markers", 2);
+__decorateClass([
+  vividElement.attr({ mode: "boolean" })
+], Slider.prototype, "pin", 2);
+__decorateClass([
+  vividElement.attr
+], Slider.prototype, "connotation", 2);
 __decorateClass([
   vividElement.observable
-], Switch.prototype, "defaultSlottedNodes");
-
-const getClasses = (_) => classNames.classNames(
-  "control",
-  ["appearance-filled", _.checked],
-  ["checked", _.checked],
-  ["disabled", _.disabled],
-  ["readonly", _.readOnly],
-  [
-    `connotation-${_.connotation}`,
-    Boolean(_.checked) && Boolean(_.connotation)
-  ]
-);
-const SwitchTemplate = vividElement.html`
-	<template role="${(x) => x.ariaLabel ? "presentation" : null}">
-		<div
-			class="${getClasses}"
-			role="switch"
-			aria-label="${(x) => x.ariaLabel}"
-			aria-checked="${(x) => x.checked}"
-			aria-disabled="${(x) => x.disabled}"
-			aria-readonly="${(x) => x.readOnly}"
-			tabindex="${(x) => x.disabled ? null : 0}"
-			@keypress="${(x, c) => x.keypressHandler(c.event)}"
-			@click="${(x) => x.clickHandler()}"
-		>
-			<div class="switch">
-				<span class="checked-indicator"></span>
-			</div>
-			${when.when(
-  (x) => x.label,
-  vividElement.html`<div class="label">${(x) => x.label}</div>`
-)}
-		</div>
-	</template>
-`;
+], Slider.prototype, "_focusVisible", 2);
+__decorateClass([
+  vividElement.observable
+], Slider.prototype, "_hoveringOnThumb", 2);
+__decorateClass([
+  vividElement.volatile
+], Slider.prototype, "_isThumbPopupOpen", 1);
+applyMixins.applyMixins(Slider, localized.Localized);
 
-const switchDefinition = vividElement.defineVividComponent(
-  "switch",
-  Switch,
-  SwitchTemplate,
-  [definition.iconDefinition],
+const sliderDefinition = vividElement.defineVividComponent(
+  "slider",
+  Slider,
+  slider_template.SliderTemplate,
+  [definition.popupDefinition],
   {
     styles,
     shadowOptions: {
@@ -143,7 +490,8 @@ const switchDefinition = vividElement.defineVividComponent(
     }
   }
 );
-const registerSwitch = vividElement.createRegisterFunction(switchDefinition);
+const registerSlider = vividElement.createRegisterFunction(sliderDefinition);
 
-exports.registerSwitch = registerSwitch;
-exports.switchDefinition = switchDefinition;
+exports.Slider = Slider;
+exports.registerSlider = registerSlider;
+exports.sliderDefinition = sliderDefinition;