@vonage/vivid 3.31.0 → 3.32.0

package/shared/definition45.js

@@ -1,22 +1,34 @@
-import { F as FoundationElement, _ as __decorate, a as attr, o as observable, b as __metadata, h as html, r as registerFactory } from './index.js';
-import { i as iconRegistries } from './definition3.js';
+import { F as FoundationElement, _ as __decorate, a as attr, o as observable, n as nullableNumberConverter, b as __metadata, h as html, r as registerFactory } from './index.js';
 import { f as focusRegistries } from './definition4.js';
-import { C as CheckableFormAssociated } from './form-associated.js';
-import { e as keySpace, d as keyEnter } from './key-codes.js';
-import './affix.js';
+import { D as Direction, g as getDirection } from './direction.js';
+import { l as limit$1 } from './numbers.js';
+import { F as FormAssociated } from './form-associated.js';
+import { O as Orientation } from './aria.js';
+import { a as keyHome, k as keyEnd, b as keyArrowDown, i as keyArrowLeft, c as keyArrowUp, h as keyArrowRight } from './key-codes.js';
 import { f as focusTemplateFactory } from './focus2.js';
-import './form-elements.js';
-import { w as when } from './when.js';
+import { r as ref } from './ref.js';
+import { O as Orientation$1 } from './aria2.js';
 import { c as classNames } from './class-names.js';
 
-class _Switch extends FoundationElement {
+/**
+ * Converts a pixel coordinate on the track to a percent of the track's range
+ */
+function convertPixelToPercent(pixelPos, minPosition, maxPosition, direction) {
+    let pct = limit$1(0, 1, (pixelPos - minPosition) / (maxPosition - minPosition));
+    if (direction === Direction.rtl) {
+        pct = 1 - pct;
+    }
+    return pct;
+}
+
+class _Slider extends FoundationElement {
 }
 /**
- * A form-associated base class for the {@link @microsoft/fast-foundation#(Switch:class)} component.
+ * A form-associated base class for the {@link @microsoft/fast-foundation#(Slider:class)} component.
  *
  * @internal
  */
-class FormAssociatedSwitch extends CheckableFormAssociated(_Switch) {
+class FormAssociatedSlider extends FormAssociated(_Slider) {
     constructor() {
         super(...arguments);
         this.proxy = document.createElement("input");
@@ -24,121 +36,531 @@ class FormAssociatedSwitch extends CheckableFormAssociated(_Switch) {
 }
 
 /**
- * A Switch Custom HTML Element.
- * Implements the {@link https://www.w3.org/TR/wai-aria-1.1/#switch | ARIA switch }.
+ * The selection modes of a {@link @microsoft/fast-foundation#(Slider:class)}.
+ * @public
+ */
+const SliderMode = {
+    singleValue: "single-value",
+};
+/**
+ * A Slider Custom HTML Element.
+ * Implements the {@link https://www.w3.org/TR/wai-aria-1.1/#slider | ARIA slider }.
  *
- * @slot - The deafult slot for the label
- * @slot checked-message - The message when in a checked state
- * @slot unchecked-message - The message when in an unchecked state
- * @csspart label - The label
- * @csspart switch - The element representing the switch, which wraps the indicator
- * @csspart status-message - The wrapper for the status messages
- * @csspart checked-message - The checked message
- * @csspart unchecked-message - The unchecked message
- * @fires change - Emits a custom change event when the checked state changes
+ * @slot track - The track of the slider
+ * @slot track-start - The track-start visual indicator
+ * @slot thumb - The slider thumb
+ * @slot - The default slot for labels
+ * @csspart positioning-region - The region used to position the elements of the slider
+ * @csspart track-container - The region containing the track elements
+ * @csspart track-start - The element wrapping the track start slot
+ * @csspart thumb-container - The thumb container element which is programatically positioned
+ * @fires change - Fires a custom 'change' event when the slider value changes
  *
  * @public
  */
-class Switch$1 extends FormAssociatedSwitch {
+class Slider$1 extends FormAssociatedSlider {
     constructor() {
-        super();
+        super(...arguments);
+        /**
+         * @internal
+         */
+        this.direction = Direction.ltr;
+        /**
+         * @internal
+         */
+        this.isDragging = false;
+        /**
+         * @internal
+         */
+        this.trackWidth = 0;
+        /**
+         * @internal
+         */
+        this.trackMinWidth = 0;
+        /**
+         * @internal
+         */
+        this.trackHeight = 0;
         /**
-         * 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.trackLeft = 0;
         /**
          * @internal
          */
+        this.trackMinHeight = 0;
+        /**
+         * Custom function that generates a string for the component's "aria-valuetext" attribute based on the current value.
+         *
+         * @public
+         */
+        this.valueTextFormatter = () => null;
+        /**
+         * The minimum allowed value.
+         *
+         * @defaultValue - 0
+         * @public
+         * @remarks
+         * HTML Attribute: min
+         */
+        this.min = 0; // Map to proxy element.
+        /**
+         * The maximum allowed value.
+         *
+         * @defaultValue - 10
+         * @public
+         * @remarks
+         * HTML Attribute: max
+         */
+        this.max = 10; // Map to proxy element.
+        /**
+         * Value to increment or decrement via arrow keys, mouse click or drag.
+         *
+         * @public
+         * @remarks
+         * HTML Attribute: step
+         */
+        this.step = 1; // Map to proxy element.
+        /**
+         * The orientation of the slider.
+         *
+         * @public
+         * @remarks
+         * HTML Attribute: orientation
+         */
+        this.orientation = Orientation.horizontal;
+        /**
+         * The selection mode.
+         *
+         * @public
+         * @remarks
+         * HTML Attribute: mode
+         */
+        this.mode = SliderMode.singleValue;
         this.keypressHandler = (e) => {
             if (this.readOnly) {
                 return;
             }
-            switch (e.key) {
-                case keyEnter:
-                case keySpace:
-                    this.checked = !this.checked;
-                    break;
+            if (e.key === keyHome) {
+                e.preventDefault();
+                this.value = `${this.min}`;
+            }
+            else if (e.key === keyEnd) {
+                e.preventDefault();
+                this.value = `${this.max}`;
+            }
+            else if (!e.shiftKey) {
+                switch (e.key) {
+                    case keyArrowRight:
+                    case keyArrowUp:
+                        e.preventDefault();
+                        this.increment();
+                        break;
+                    case keyArrowLeft:
+                    case 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 ? "remove" : "add"}EventListener`;
+            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,
+            });
+            // removes handlers attached by mousedown handlers
+            if (remove) {
+                this.handleMouseDown(null);
+                this.handleThumbMouseDown(null);
             }
         };
         /**
          * @internal
          */
-        this.clickHandler = (e) => {
-            if (!this.disabled && !this.readOnly) {
-                this.checked = !this.checked;
+        this.initialValue = "";
+        /**
+         *  Handle mouse moves during a thumb drag operation
+         *  If the event handler is null it removes the events
+         */
+        this.handleThumbMouseDown = (event) => {
+            if (event) {
+                if (this.readOnly || this.disabled || event.defaultPrevented) {
+                    return;
+                }
+                event.target.focus();
+            }
+            const eventAction = `${event !== null ? "add" : "remove"}EventListener`;
+            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;
             }
+            // update the value based on current position
+            const sourceEvent = window.TouchEvent && e instanceof TouchEvent
+                ? e.touches[0]
+                : e;
+            const eventValue = this.orientation === Orientation.horizontal
+                ? sourceEvent.pageX - document.documentElement.scrollLeft - this.trackLeft
+                : sourceEvent.pageY - document.documentElement.scrollTop;
+            this.value = `${this.calculateNewValue(eventValue)}`;
+        };
+        this.calculateNewValue = (rawValue) => {
+            // update the value based on current position
+            const newPosition = convertPixelToPercent(rawValue, this.orientation === Orientation.horizontal
+                ? this.trackMinWidth
+                : this.trackMinHeight, this.orientation === Orientation.horizontal
+                ? this.trackWidth
+                : this.trackHeight, this.direction);
+            const newValue = (this.max - this.min) * newPosition + this.min;
+            return this.convertToConstrainedValue(newValue);
+        };
+        /**
+         * Handle a window mouse up during a drag operation
+         */
+        this.handleWindowMouseUp = (event) => {
+            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 ? "add" : "remove"}EventListener`;
+            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();
+                    e.target.focus();
+                    const controlValue = this.orientation === Orientation.horizontal
+                        ? e.pageX - document.documentElement.scrollLeft - this.trackLeft
+                        : e.pageY - document.documentElement.scrollTop;
+                    this.value = `${this.calculateNewValue(controlValue)}`;
+                }
+            }
+        };
+        this.convertToConstrainedValue = (value) => {
+            if (isNaN(value)) {
+                value = this.min;
+            }
+            /**
+             * The following logic intends to overcome the issue with math in JavaScript with regards to floating point numbers.
+             * This is needed as the `step` may be an integer but could also be a float. To accomplish this the step  is assumed to be a float
+             * and is converted to an integer by determining the number of decimal places it represent, multiplying it until it is an
+             * integer and then dividing it to get back to the correct number.
+             */
+            let constrainedValue = value - this.min;
+            const roundedConstrainedValue = Math.round(constrainedValue / this.step);
+            const remainderValue = constrainedValue -
+                (roundedConstrainedValue * (this.stepMultiplier * this.step)) /
+                    this.stepMultiplier;
+            constrainedValue =
+                remainderValue >= Number(this.step) / 2
+                    ? constrainedValue - remainderValue + Number(this.step)
+                    : constrainedValue - remainderValue;
+            return constrainedValue + this.min;
         };
-        this.proxy.setAttribute("type", "checkbox");
     }
     readOnlyChanged() {
         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
      */
-    checkedChanged(prev, next) {
-        super.checkedChanged(prev, next);
-        /**
-         * @deprecated - this behavior already exists in the template and should not exist in the class.
-         */
-        this.checked ? this.classList.add("checked") : this.classList.remove("checked");
+    valueChanged(previous, next) {
+        super.valueChanged(previous, next);
+        if (this.$fastController.isConnected) {
+            this.setThumbPositionForOrientation(this.direction);
+        }
+        this.$emit("change");
+    }
+    minChanged() {
+        if (this.proxy instanceof HTMLInputElement) {
+            this.proxy.min = `${this.min}`;
+        }
+        this.validate();
+    }
+    maxChanged() {
+        if (this.proxy instanceof HTMLInputElement) {
+            this.proxy.max = `${this.max}`;
+        }
+        this.validate();
+    }
+    stepChanged() {
+        if (this.proxy instanceof HTMLInputElement) {
+            this.proxy.step = `${this.step}`;
+        }
+        this.updateStepMultiplier();
+        this.validate();
+    }
+    orientationChanged() {
+        if (this.$fastController.isConnected) {
+            this.setThumbPositionForOrientation(this.direction);
+        }
+    }
+    /**
+     * @internal
+     */
+    connectedCallback() {
+        super.connectedCallback();
+        this.proxy.setAttribute("type", "range");
+        this.direction = getDirection(this);
+        this.updateStepMultiplier();
+        this.setupTrackConstraints();
+        this.setupListeners();
+        this.setupDefaultValue();
+        this.setThumbPositionForOrientation(this.direction);
+    }
+    /**
+     * @internal
+     */
+    disconnectedCallback() {
+        this.setupListeners(true);
+    }
+    /**
+     * Increment the value by the step
+     *
+     * @public
+     */
+    increment() {
+        const newVal = this.direction !== Direction.rtl && this.orientation !== Orientation.vertical
+            ? Number(this.value) + Number(this.step)
+            : Number(this.value) - Number(this.step);
+        const incrementedVal = this.convertToConstrainedValue(newVal);
+        const incrementedValString = incrementedVal < Number(this.max) ? `${incrementedVal}` : `${this.max}`;
+        this.value = incrementedValString;
+    }
+    /**
+     * Decrement the value by the step
+     *
+     * @public
+     */
+    decrement() {
+        const newVal = this.direction !== Direction.rtl && this.orientation !== Orientation.vertical
+            ? Number(this.value) - Number(this.step)
+            : Number(this.value) + Number(this.step);
+        const decrementedVal = this.convertToConstrainedValue(newVal);
+        const decrementedValString = decrementedVal > Number(this.min) ? `${decrementedVal}` : `${this.min}`;
+        this.value = decrementedValString;
+    }
+    /**
+     * Places the thumb based on the current value
+     *
+     * @public
+     * @param direction - writing mode
+     */
+    setThumbPositionForOrientation(direction) {
+        const newPct = convertPixelToPercent(Number(this.value), Number(this.min), Number(this.max), direction);
+        const percentage = (1 - newPct) * 100;
+        if (this.orientation === 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;`;
+        }
+    }
+    /**
+     * 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.convertToConstrainedValue((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;
+                }
+            }
+        }
     }
 }
 __decorate([
     attr({ attribute: "readonly", mode: "boolean" })
-], Switch$1.prototype, "readOnly", void 0);
+], Slider$1.prototype, "readOnly", void 0);
+__decorate([
+    observable
+], Slider$1.prototype, "direction", void 0);
+__decorate([
+    observable
+], Slider$1.prototype, "isDragging", void 0);
+__decorate([
+    observable
+], Slider$1.prototype, "position", void 0);
+__decorate([
+    observable
+], Slider$1.prototype, "trackWidth", void 0);
 __decorate([
     observable
-], Switch$1.prototype, "defaultSlottedNodes", void 0);
+], Slider$1.prototype, "trackMinWidth", void 0);
+__decorate([
+    observable
+], Slider$1.prototype, "trackHeight", void 0);
+__decorate([
+    observable
+], Slider$1.prototype, "trackLeft", void 0);
+__decorate([
+    observable
+], Slider$1.prototype, "trackMinHeight", void 0);
+__decorate([
+    observable
+], Slider$1.prototype, "valueTextFormatter", void 0);
+__decorate([
+    attr({ converter: nullableNumberConverter })
+], Slider$1.prototype, "min", void 0);
+__decorate([
+    attr({ converter: nullableNumberConverter })
+], Slider$1.prototype, "max", void 0);
+__decorate([
+    attr({ converter: nullableNumberConverter })
+], Slider$1.prototype, "step", void 0);
+__decorate([
+    attr
+], Slider$1.prototype, "orientation", void 0);
+__decorate([
+    attr
+], Slider$1.prototype, "mode", void 0);
+
+/**
+ * This method keeps a given value within the bounds of a min and max value. If the value
+ * is larger than the max, the minimum value will be returned. If the value is smaller than the minimum,
+ * the maximum will be returned. Otherwise, the value is returned un-changed.
+ */
+/**
+ * Ensures that a value is between a min and max value. If value is lower than min, min will be returned.
+ * If value is greater than max, max will be returned.
+ */
+function limit(min, max, value) {
+    return Math.min(Math.max(value, min), max);
+}
 
-var css_248z = "/**\n * Do not edit directly\n * Generated on Thu, 17 Aug 2023 11:13:18 GMT\n */\n.control {\n  display: inline-flex;\n  gap: 8px;\n}\n.control.connotation-cta {\n  /* @cssprop [--vvd-switch-cta-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-switch-cta-primary-text, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-switch-cta-primary=var(--vvd-color-cta-500)] */\n  --_connotation-color-primary: var(--vvd-switch-cta-primary, var(--vvd-color-cta-500));\n  /* @cssprop [--vvd-switch-cta-primary-increment=var(--vvd-color-cta-600)] */\n  --_connotation-color-primary-increment: var(--vvd-switch-cta-primary-increment, var(--vvd-color-cta-600));\n  /* @cssprop [--vvd-switch-cta-backdrop=var(--vvd-color-cta-50)] */\n  --_connotation-color-backdrop: var(--vvd-switch-cta-backdrop, var(--vvd-color-cta-50));\n  /* @cssprop [--vvd-switch-cta-firm=var(--vvd-color-cta-600)] */\n  --_connotation-color-firm: var(--vvd-switch-cta-firm, var(--vvd-color-cta-600));\n  /* @cssprop [--vvd-switch-cta-intermediate=var(--vvd-color-cta-500)] */\n  --_connotation-color-intermediate: var(--vvd-switch-cta-intermediate, var(--vvd-color-cta-500));\n}\n.control.connotation-alert {\n  /* @cssprop [--vvd-switch-alert-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-switch-alert-primary-text, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-switch-alert-primary=var(--vvd-color-alert-500)] */\n  --_connotation-color-primary: var(--vvd-switch-alert-primary, var(--vvd-color-alert-500));\n  /* @cssprop [--vvd-switch-alert-primary-increment=var(--vvd-color-alert-600)] */\n  --_connotation-color-primary-increment: var(--vvd-switch-alert-primary-increment, var(--vvd-color-alert-600));\n  /* @cssprop [--vvd-switch-alert-backdrop=var(--vvd-color-alert-50)] */\n  --_connotation-color-backdrop: var(--vvd-switch-alert-backdrop, var(--vvd-color-alert-50));\n  /* @cssprop [--vvd-switch-alert-firm=var(--vvd-color-alert-600)] */\n  --_connotation-color-firm: var(--vvd-switch-alert-firm, var(--vvd-color-alert-600));\n  /* @cssprop [--vvd-switch-alert-intermediate=var(--vvd-color-alert-500)] */\n  --_connotation-color-intermediate: var(--vvd-switch-alert-intermediate, var(--vvd-color-alert-500));\n}\n.control.connotation-success {\n  /* @cssprop [--vvd-switch-success-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-switch-success-primary-text, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-switch-success-primary=var(--vvd-color-success-500)] */\n  --_connotation-color-primary: var(--vvd-switch-success-primary, var(--vvd-color-success-500));\n  /* @cssprop [--vvd-switch-success-primary-increment=var(--vvd-color-success-600)] */\n  --_connotation-color-primary-increment: var(--vvd-switch-success-primary-increment, var(--vvd-color-success-600));\n  /* @cssprop [--vvd-switch-success-backdrop=var(--vvd-color-success-50)] */\n  --_connotation-color-backdrop: var(--vvd-switch-success-backdrop, var(--vvd-color-success-50));\n  /* @cssprop [--vvd-switch-success-firm=var(--vvd-color-success-600)] */\n  --_connotation-color-firm: var(--vvd-switch-success-firm, var(--vvd-color-success-600));\n  /* @cssprop [--vvd-switch-success-intermediate=var(--vvd-color-success-500)] */\n  --_connotation-color-intermediate: var(--vvd-switch-success-intermediate, var(--vvd-color-success-500));\n}\n.control:not(.connotation-cta, .connotation-alert, .connotation-success) {\n  /* @cssprop [--vvd-switch-accent-primary-text=var(--vvd-color-canvas)] */\n  --_connotation-color-primary-text: var(--vvd-switch-accent-primary-text, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-switch-accent-primary=var(--vvd-color-canvas-text)] */\n  --_connotation-color-primary: var(--vvd-switch-accent-primary, var(--vvd-color-canvas-text));\n  /* @cssprop [--vvd-switch-accent-primary-increment=var(--vvd-color-neutral-800)] */\n  --_connotation-color-primary-increment: var(--vvd-switch-accent-primary-increment, var(--vvd-color-neutral-800));\n  /* @cssprop [--vvd-switch-accent-backdrop=var(--vvd-color-canvas)] */\n  --_connotation-color-backdrop: var(--vvd-switch-accent-backdrop, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-switch-accent-firm=var(--vvd-color-canvas-text)] */\n  --_connotation-color-firm: var(--vvd-switch-accent-firm, var(--vvd-color-canvas-text));\n  /* @cssprop [--vvd-switch-accent-intermediate=var(--vvd-color-neutral-500)] */\n  --_connotation-color-intermediate: var(--vvd-switch-accent-intermediate, var(--vvd-color-neutral-500));\n}\n.control {\n  --_appearance-color-text: var(--vvd-color-canvas-text);\n  --_appearance-color-fill: var(--_connotation-color-backdrop);\n  --_appearance-color-outline: var(--_connotation-color-intermediate);\n}\n.control.appearance-filled {\n  --_appearance-color-text: var(--_connotation-color-primary-text);\n  --_appearance-color-fill: var(--_connotation-color-primary);\n  --_appearance-color-outline: transparent;\n}\n.control:where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)) {\n  --_appearance-color-text: var(--vvd-color-canvas-text);\n  --_appearance-color-fill: var(--_connotation-color-backdrop);\n  --_appearance-color-outline: var(--_connotation-color-firm);\n}\n.control:where(:hover, .hover):where(:not(:disabled, .disabled, .readonly)).appearance-filled {\n  --_appearance-color-text: var(--_connotation-color-primary-text);\n  --_appearance-color-fill: var(--_connotation-color-primary-increment);\n  --_appearance-color-outline: transparent;\n}\n.control:where(:disabled, .disabled) {\n  --_appearance-color-text: var(--vvd-color-neutral-300);\n  --_appearance-color-fill: var(--vvd-color-neutral-100);\n  --_appearance-color-outline: var(--vvd-color-neutral-300);\n}\n.control:where(:disabled, .disabled).appearance-filled {\n  --_appearance-color-text: var(--vvd-color-neutral-300);\n  --_appearance-color-fill: var(--vvd-color-neutral-100);\n  --_appearance-color-outline: transparent;\n}\n.control:where(.readonly):where(:not(:disabled, .disabled)) {\n  --_appearance-color-text: var(--vvd-color-canvas-text);\n  --_appearance-color-fill: var(--vvd-color-neutral-200);\n  --_appearance-color-outline: var(--vvd-color-neutral-400);\n}\n.control:where(.readonly):where(:not(:disabled, .disabled)).appearance-filled {\n  --_appearance-color-text: var(--vvd-color-neutral-800);\n  --_appearance-color-fill: var(--vvd-color-neutral-200);\n  --_appearance-color-outline: transparent;\n}\n@supports selector(:focus-visible) {\n  .control:focus-visible {\n    outline: none;\n  }\n}\n@supports (user-select: none) {\n  .control {\n    user-select: none;\n  }\n}\n.control:not(.disabled) {\n  cursor: pointer;\n}\n.control.disabled {\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n.switch {\n  --_switch-inline-size: calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 20)) * 1.8);\n  position: relative;\n  display: flex;\n  box-sizing: border-box;\n  align-items: center;\n  background-color: var(--_appearance-color-fill);\n  block-size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 20));\n  border-radius: calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 20)) / .5);\n  box-shadow: inset 0 0 0 1px var(--_appearance-color-outline);\n  inline-size: var(--_switch-inline-size);\n  transition: all 0.2s ease-in-out 0s;\n}\n\n.checked-indicator {\n  --_switch-checked-indicator-size: calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 20)) / 1.6667);\n  --_switch-gutter: calc(var(--_switch-checked-indicator-size) / 3);\n  block-size: var(--_switch-checked-indicator-size);\n  border-radius: inherit;\n  inline-size: var(--_switch-checked-indicator-size);\n  margin-inline-start: auto;\n  transition: all 0.2s ease-in-out 0s;\n}\n.control.appearance-filled .checked-indicator {\n  background-color: var(--vvd-color-neutral-100);\n}\n.control:not(.appearance-filled) .checked-indicator {\n  background-color: var(--_appearance-color-outline);\n}\n.control:not(.checked) .checked-indicator {\n  transform: translateX(calc(-1 * var(--_switch-inline-size) + var(--_switch-checked-indicator-size) + var(--_switch-gutter)));\n}\n.control.checked .checked-indicator {\n  transform: translateX(calc(-1 * var(--_switch-gutter)));\n}\n\n.label {\n  color: var(--vvd-color-canvas-text);\n  cursor: pointer;\n  font: var(--vvd-typography-base);\n}\n\n.focus-indicator {\n  --focus-inset: -4px;\n  --focus-stroke-gap-color: transparent;\n  border-radius: 14px;\n}\n.control:not(:focus-visible) .focus-indicator {\n  display: none;\n}";
+var css_248z = ":host {\n  display: inline-block;\n  width: 100%;\n}\n\n:host([orientation=vertical]) {\n  height: 100%;\n  min-height: calc(var(--_thumb-interaction-indicator-size) * 5);\n}\n\n.control {\n  --_thumb-size: 12px;\n  --_thumb-interaction-indicator-size: 36px;\n  height: var(--_thumb-interaction-indicator-size);\n  cursor: pointer;\n  outline: none;\n  user-select: none;\n}\n@supports selector(:focus-visible) {\n  .control:focus-visible {\n    outline: none;\n  }\n}\n.control .positioning-region {\n  position: relative;\n}\n.control .track {\n  position: absolute;\n  background: var(--_track-background-color);\n  border-radius: 4px;\n}\n.control .track .track-start {\n  position: absolute;\n  left: 0;\n  height: 100%;\n  background: var(--_track-start-background-color);\n  border-radius: 4px;\n}\n.control .thumb-container {\n  position: absolute;\n  width: var(--_thumb-interaction-indicator-size);\n  height: var(--_thumb-interaction-indicator-size);\n  cursor: inherit;\n  touch-action: none;\n}\n.control .thumb-container::before {\n  position: absolute;\n  display: block;\n  width: var(--_thumb-interaction-indicator-size);\n  height: var(--_thumb-interaction-indicator-size);\n  background-color: var(--_track-start-background-color);\n  border-radius: 50%;\n  content: \"\";\n  opacity: var(--_thumb-interaction-indicator-alpha, 0);\n  transition: opacity 0.2s ease-out 0s;\n}\n.control .thumb-container::after {\n  position: absolute;\n  display: block;\n  width: var(--_thumb-size);\n  height: var(--_thumb-size);\n  background-color: var(--_track-start-background-color);\n  border-radius: 50%;\n  content: \"\";\n  inset: calc((var(--_thumb-interaction-indicator-size) - var(--_thumb-size)) / 2);\n}\n.control[aria-orientation=horizontal] {\n  width: calc(100% - var(--_thumb-size));\n  min-width: var(--_thumb-size);\n  margin-left: calc(var(--_thumb-size) / 2);\n}\n.control[aria-orientation=horizontal] .track {\n  top: calc((var(--_thumb-interaction-indicator-size) - 2px) / 2);\n  right: 0;\n  left: 0;\n  height: 2px;\n}\n.control[aria-orientation=horizontal] .track .mark {\n  width: 100%;\n  height: 4px;\n}\n.control[aria-orientation=horizontal] .thumb-container {\n  transform: translateX(calc(var(--_thumb-interaction-indicator-size) / 2));\n}\n.control[aria-orientation=vertical] {\n  height: calc(100% - var(--_thumb-interaction-indicator-size));\n  min-height: var(--_thumb-interaction-indicator-size);\n  margin-top: calc(var(--_thumb-interaction-indicator-size) / 2);\n}\n.control[aria-orientation=vertical] .positioning-region {\n  height: 100%;\n}\n.control[aria-orientation=vertical] .track {\n  left: calc((var(--_thumb-interaction-indicator-size) - 2px) / 2);\n  width: 2px;\n  height: 100%;\n}\n.control[aria-orientation=vertical] .track .mark {\n  width: 4px;\n  height: 100%;\n}\n.control[aria-orientation=vertical] .track-start {\n  top: 0;\n  width: 100%;\n  height: auto;\n}\n.control[aria-orientation=vertical] .thumb-container {\n  transform: translateY(calc(var(--_thumb-interaction-indicator-size) / 2));\n}\n.control.disabled {\n  --_track-background-color: var(--vvd-color-neutral-100);\n  --_track-start-background-color: var(--vvd-color-neutral-500);\n  cursor: not-allowed;\n  pointer-events: none;\n}\n.control:not(.disabled) {\n  --_track-background-color: var(--vvd-color-neutral-300);\n  --_track-start-background-color: var(--vvd-color-canvas-text);\n}\n.control:not(.disabled) .thumb-container:hover {\n  --_thumb-interaction-indicator-alpha: 0.12;\n}\n.control:not(.disabled) .thumb-container:active {\n  --_thumb-interaction-indicator-alpha: 0.25;\n}\n\n.focus-indicator {\n  --focus-inset: -3px;\n  --focus-stroke-gap-color: transparent;\n  border-radius: 50%;\n}\n.control:not(:focus-visible) .focus-indicator {\n  display: none;\n}";
 
-class Switch extends Switch$1 {}
-__decorate([attr, __metadata("design:type", String)], Switch.prototype, "label", void 0);
-__decorate([attr, __metadata("design:type", String)], Switch.prototype, "connotation", void 0);
+class Slider extends Slider$1 {
+  constructor() {
+    super(...arguments);
+    this.markers = false;
+  }
+  valueChanged(previous, next) {
+    if (this.$fastController.isConnected) {
+      const nextAsNumber = parseFloat(next);
+      const value = limit(this.min, this.max, this['convertToConstrainedValue'](nextAsNumber)).toString();
+      if (value !== next) {
+        this.value = value;
+        return;
+      }
+      super.valueChanged(previous, value);
+    }
+  }
+}
+__decorate([attr({
+  mode: 'boolean'
+}), __metadata("design:type", Object)], Slider.prototype, "markers", void 0);
 
-const getClasses = _ => classNames('control', ['appearance-filled', _.checked && !_.disabled && !_.readOnly], ['checked', _.checked], ['disabled', _.disabled], ['readonly', _.readOnly], [`connotation-${_.connotation}`, Boolean(_.checked) && Boolean(_.connotation)]);
-const SwitchTemplate = context => {
+const getClasses = ({
+  disabled
+}) => classNames('control', ['disabled', Boolean(disabled)]);
+const getMarkersTemplate = (isHorizontal, numMarkers) => {
+  const placeholder = isHorizontal ? ['right', 'center', '', '100% repeat-x'] : ['bottom', 'top', '100%', 'repeat-y'];
+  return html`
+	<div class="mark" style="
+	background: linear-gradient(to ${placeholder[0]}, currentcolor 3px, transparent 0px)
+	0px ${placeholder[1]} / ${placeholder[2]} calc((100% - 3px) / ${numMarkers}) ${placeholder[3]}
+	"></div>`;
+};
+const SliderTemplate = context => {
   const focusTemplate = focusTemplateFactory(context);
   return html`
-		<div
-				class="${getClasses}"
-				role="switch"
-				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, c) => x.clickHandler(c.event)}"
-		>
-			<div class="switch">
-				<span class="checked-indicator"></span>
+	<div
+		role="slider"
+		tabindex="${x => x.disabled ? null : 0}"
+		aria-valuetext="${x => x.valueTextFormatter(x.value)}"
+		aria-valuenow="${x => x.value}"
+		aria-valuemin="${x => x.min}"
+		aria-valuemax="${x => x.max}"
+		aria-disabled="${x => x.disabled ? true : void 0}"
+		aria-orientation="${x => x.orientation}"
+		class="${getClasses} ${x => x.orientation}"
+	>
+		<div class="positioning-region">
+			<div ${ref('track')} class="track">
+				<div class="track-start" style="${x => x.position}"></div>
+				${x => x.markers ? getMarkersTemplate(x.orientation === Orientation$1.horizontal, Math.floor((x.max - x.min) / x.step)) : void 0}
+			</div>
+			<div ${ref('thumb')} class="thumb-container" style="${x => x.position}">
 				${() => focusTemplate}
 			</div>
-			${when(x => x.label, html`<div class="label">
-				${x => x.label}
-		</div>`)}
 		</div>
-		`;
+	</div>`;
 };
 
-const switchDefinition = Switch.compose({
-  baseName: 'switch',
-  template: SwitchTemplate,
-  styles: css_248z,
-  shadowOptions: {
-    delegatesFocus: true
-  }
+const sliderDefinition = Slider.compose({
+  baseName: 'slider',
+  template: SliderTemplate,
+  styles: css_248z
 });
-const switchRegistries = [switchDefinition(), ...iconRegistries, ...focusRegistries];
-const registerSwitch = registerFactory(switchRegistries);
+const sliderRegistries = [sliderDefinition(), ...focusRegistries];
+const registerSlider = registerFactory(sliderRegistries);
 
-export { switchRegistries as a, registerSwitch as r, switchDefinition as s };
+export { sliderRegistries as a, registerSlider as r, sliderDefinition as s };