@vonage/vivid 3.51.0 → 3.52.0

package/shared/definition45.js

@@ -1,11 +1,484 @@
-import { a as attr, F as FoundationElement, h as html, r as registerFactory } from './index.js';
-import { a as iconRegistries } from './definition26.js';
-import { A as AffixIcon, a as affixIconTemplateFactory, I as IconWrapper } from './affix.js';
-import './index2.js';
-import { L as Localized } from './localized.js';
-import { a as applyMixins } from './apply-mixins.js';
-import { r as ref } from './ref.js';
-import { c as classNames } from './class-names.js';
+import { F as FoundationElement, _ as __decorate, a as attr, o as observable, n as nullableNumberConverter, r as registerFactory } from './index.js';
+import { D as Direction, g as getDirection } from './direction.js';
+import { l as limit } from './numbers.js';
+import { F as FormAssociated } from './form-associated.js';
+import { O as Orientation } from './aria.js';
+import { g as keyHome, d as keyEnd, f as keyArrowDown, i as keyArrowLeft, e as keyArrowUp, h as keyArrowRight } from './key-codes.js';
+import { l as limit$1, S as SliderTemplate } from './slider.template.js';
+
+/**
+ * Converts a pixel coordinate on the track to a percent of the track's range
+ */
+function convertPixelToPercent(pixelPos, minPosition, maxPosition, direction) {
+    let pct = limit(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#(Slider:class)} component.
+ *
+ * @internal
+ */
+class FormAssociatedSlider extends FormAssociated(_Slider) {
+    constructor() {
+        super(...arguments);
+        this.proxy = document.createElement("input");
+    }
+}
+
+/**
+ * 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 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
+ */
+let Slider$1 = class Slider extends FormAssociatedSlider {
+    constructor() {
+        super(...arguments);
+        /**
+         * @internal
+         */
+        this.direction = Direction.ltr;
+        /**
+         * @internal
+         */
+        this.isDragging = false;
+        /**
+         * @internal
+         */
+        this.trackWidth = 0;
+        /**
+         * @internal
+         */
+        this.trackMinWidth = 0;
+        /**
+         * @internal
+         */
+        this.trackHeight = 0;
+        /**
+         * @internal
+         */
+        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;
+            }
+            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.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;
+        };
+    }
+    readOnlyChanged() {
+        if (this.proxy instanceof HTMLInputElement) {
+            this.proxy.readOnly = this.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) {
+            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" })
+], 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
+], 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);
+
+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{--_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.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 .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}.control.horizontal .track .mark{block-size:4px;inline-size:100%}.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{block-size:100%;inline-size:4px}.control.vertical .track-start{block-size:auto;inline-size:100%;inset-block-start:var(--_track-start-inset-block-start)}.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)}.thumb-container{position:absolute;border-radius:50%;block-size:var(--_thumb-interaction-indicator-size);cursor:inherit;inline-size:var(--_thumb-interaction-indicator-size);outline-color:transparent;touch-action:none}:focus-visible .thumb-container,.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)}\n";
 
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -18,130 +491,58 @@ var __decorateClass = (decorators, target, key, kind) => {
     __defProp(target, key, result);
   return result;
 };
-class SplitButton extends FoundationElement {
+class Slider extends Slider$1 {
   constructor() {
     super(...arguments);
-    this.splitIndicator = "chevron-down-line";
-    this.disabled = false;
     this.ariaLabel = null;
-    this.ariaExpanded = null;
-    this.indicatorAriaLabel = null;
-  }
-  get action() {
-    return this._action;
+    this.ariaValuetext = null;
+    this.markers = false;
   }
-  get indicator() {
-    return this._indicator;
+  /**
+   * TO BE REMOVED WHEN UPGRADING TO FAST-FOUNDATION 3
+   *
+   * @internal
+   */
+  valueChanged(previous, next) {
+    if (this.$fastController.isConnected) {
+      const nextAsNumber = parseFloat(next);
+      const value = limit$1(
+        this.min,
+        this.max,
+        this["convertToConstrainedValue"](nextAsNumber)
+      ).toString();
+      if (value !== next) {
+        this.value = value;
+        return;
+      }
+      super.valueChanged(previous, value);
+    }
   }
 }
 __decorateClass([
-  attr
-], SplitButton.prototype, "connotation", 2);
-__decorateClass([
-  attr
-], SplitButton.prototype, "shape", 2);
-__decorateClass([
-  attr
-], SplitButton.prototype, "appearance", 2);
+  attr({ attribute: "aria-label" })
+], Slider.prototype, "ariaLabel", 2);
 __decorateClass([
-  attr
-], SplitButton.prototype, "size", 2);
+  attr({ attribute: "aria-valuetext" })
+], Slider.prototype, "ariaValuetext", 2);
 __decorateClass([
-  attr
-], SplitButton.prototype, "label", 2);
+  attr({
+    mode: "boolean"
+  })
+], Slider.prototype, "markers", 2);
 __decorateClass([
   attr
-], SplitButton.prototype, "icon", 2);
-__decorateClass([
-  attr({ attribute: "split-indicator", mode: "fromView" })
-], SplitButton.prototype, "splitIndicator", 2);
-__decorateClass([
-  attr({ attribute: "disabled", mode: "boolean" })
-], SplitButton.prototype, "disabled", 2);
-__decorateClass([
-  attr({ attribute: "aria-label" })
-], SplitButton.prototype, "ariaLabel", 2);
-__decorateClass([
-  attr({ attribute: "aria-expanded" })
-], SplitButton.prototype, "ariaExpanded", 2);
-__decorateClass([
-  attr({ attribute: "indicator-aria-label" })
-], SplitButton.prototype, "indicatorAriaLabel", 2);
-applyMixins(SplitButton, AffixIcon, Localized);
-
-const styles = ":host{display:inline-block}.base{display:inline-flex;justify-content:flex-start;inline-size:inherit}.control,.indicator{display:inline-flex;box-sizing:border-box;flex-shrink:0;align-items:center;justify-content:center;padding:0;border:1px solid var(--_appearance-color-outline);margin:0;background-color:var(--_appearance-color-fill);block-size:var(--_split-button-block-size);color:var(--_appearance-color-text);vertical-align:middle}.control.connotation-cta,.indicator.connotation-cta{--_connotation-color-primary: var(--vvd-split-button-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-split-button-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-split-button-cta-primary-increment, var(--vvd-color-cta-600));--_connotation-color-contrast: var(--vvd-split-button-cta-contrast, var(--vvd-color-cta-800));--_connotation-color-fierce: var(--vvd-split-button-cta-fierce, var(--vvd-color-cta-700));--_connotation-color-firm: var(--vvd-split-button-cta-firm, var(--vvd-color-cta-600));--_connotation-color-soft: var(--vvd-split-button-cta-soft, var(--vvd-color-cta-100));--_connotation-color-faint: var(--vvd-split-button-cta-faint, var(--vvd-color-cta-50))}.control.connotation-success,.indicator.connotation-success{--_connotation-color-primary: var(--vvd-split-button-success-primary, var(--vvd-color-success-500));--_connotation-color-primary-text: var(--vvd-split-button-success-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-split-button-success-primary-increment, var(--vvd-color-success-600));--_connotation-color-contrast: var(--vvd-split-button-success-contrast, var(--vvd-color-success-800));--_connotation-color-fierce: var(--vvd-split-button-success-fierce, var(--vvd-color-success-700));--_connotation-color-firm: var(--vvd-split-button-success-firm, var(--vvd-color-success-600));--_connotation-color-soft: var(--vvd-split-button-success-soft, var(--vvd-color-success-100));--_connotation-color-faint: var(--vvd-split-button-success-faint, var(--vvd-color-success-50))}.control.connotation-alert,.indicator.connotation-alert{--_connotation-color-primary: var(--vvd-split-button-alert-primary, var(--vvd-color-alert-500));--_connotation-color-primary-text: var(--vvd-split-button-alert-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-split-button-alert-primary-increment, var(--vvd-color-alert-600));--_connotation-color-contrast: var(--vvd-split-button-alert-contrast, var(--vvd-color-alert-800));--_connotation-color-fierce: var(--vvd-split-button-alert-fierce, var(--vvd-color-alert-700));--_connotation-color-firm: var(--vvd-split-button-alert-firm, var(--vvd-color-alert-600));--_connotation-color-soft: var(--vvd-split-button-alert-soft, var(--vvd-color-alert-100));--_connotation-color-faint: var(--vvd-split-button-alert-faint, var(--vvd-color-alert-50))}.control:not(.connotation-cta,.connotation-success,.connotation-alert),.indicator:not(.connotation-cta,.connotation-success,.connotation-alert){--_connotation-color-primary: var(--vvd-split-button-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-split-button-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-split-button-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-contrast: var(--vvd-split-button-accent-contrast, var(--vvd-color-neutral-800));--_connotation-color-fierce: var(--vvd-split-button-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-firm: var(--vvd-split-button-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-soft: var(--vvd-split-button-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-faint: var(--vvd-split-button-accent-faint, var(--vvd-color-neutral-50))}.control.appearance-filled,.indicator.appearance-filled{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.control.appearance-outlined,.indicator.appearance-outlined{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-firm)}.control,.indicator{--_appearance-color-text: var(--_connotation-color-primary);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.control:where(:hover,.hover):where(:not(:disabled,.disabled,.readonly)).appearance-filled,.indicator: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(:hover,.hover):where(:not(:disabled,.disabled,.readonly)).appearance-outlined,.indicator:where(:hover,.hover):where(:not(:disabled,.disabled,.readonly)).appearance-outlined{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: var(--_connotation-color-firm)}.control:where(:hover,.hover):where(:not(:disabled,.disabled,.readonly)),.indicator:where(:hover,.hover):where(:not(:disabled,.disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-primary);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.control:where(:disabled,.disabled).appearance-filled,.indicator: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(:disabled,.disabled).appearance-outlined,.indicator:where(:disabled,.disabled).appearance-outlined{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--vvd-color-neutral-300)}.control:where(:disabled,.disabled),.indicator:where(:disabled,.disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.control:where(:active,.active):where(:not(:disabled,.disabled)).appearance-filled,.indicator:where(:active,.active):where(:not(:disabled,.disabled)).appearance-filled{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-fierce);--_appearance-color-outline: transparent}.control:where(:active,.active):where(:not(:disabled,.disabled)).appearance-outlined,.indicator:where(:active,.active):where(:not(:disabled,.disabled)).appearance-outlined{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: var(--_connotation-color-firm)}.control:where(:active,.active):where(:not(:disabled,.disabled)),.indicator:where(:active,.active):where(:not(:disabled,.disabled)){--_appearance-color-text: var(--_connotation-color-primary);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}@supports (user-select: none){.control,.indicator{user-select:none}}.control{border-bottom-left-radius:var(--_border-radius);border-inline-end:0;border-top-left-radius:var(--_border-radius);gap:var(--_split-button-icon-gap)}.control:not(.appearance-filled){--focus-stroke-gap-color: transparent}.control.appearance-outlined{--focus-inset: -1px}.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))}.control:not(:disabled){cursor:pointer}.control:disabled{cursor:not-allowed}.control.icon-only{contain:size;place-content:center}@supports (aspect-ratio: 1){.control.icon-only{aspect-ratio:1}}@supports not (aspect-ratio: 1){.control.icon-only{inline-size:var(--_split-button-block-size)}}.control:not(.icon-only){flex-grow:1;inline-size:inherit}.control.size-super-condensed{--_split-button-block-size:calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2)));font:var(--vvd-typography-base-condensed-bold)}.control.size-super-condensed:not(.icon-only){--_split-button-icon-gap: 4px;padding-inline:8px}.control.size-condensed{--_split-button-block-size:calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2)));font:var(--vvd-typography-base-condensed-bold)}.control.size-condensed:not(.icon-only){--_split-button-icon-gap: 8px;padding-inline:12px}.control.size-expanded{--_split-button-block-size:calc(1px*(48 + 4*clamp(-1, var(--vvd-size-density, 0), 2)));font:var(--vvd-typography-base-extended-bold)}.control.size-expanded:not(.icon-only){--_split-button-icon-gap: 10px;padding-inline:20px}.control:not(.size-condensed,.size-expanded,.size-super-condensed){--_split-button-block-size:calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2)));font:var(--vvd-typography-base-bold)}.control:not(.size-condensed,.size-expanded,.size-super-condensed):not(.icon-only){--_split-button-icon-gap: 8px;padding-inline:16px}.control:not(.shape-pill){--_border-radius: 8px}.control:not(.shape-pill).size-super-condensed,.control:not(.shape-pill).super-condensed{--_border-radius: 4px}.control.shape-pill{--_border-radius: 24px}.control .text{overflow:hidden;max-inline-size:100%;text-overflow:ellipsis;white-space:nowrap}.indicator{position:relative;border-bottom-right-radius:var(--_border-radius);border-inline-start:0;border-top-right-radius:var(--_border-radius);inline-size:var(--_split-button-inline-size);isolation:isolate}.indicator:not(.appearance-filled){--focus-stroke-gap-color: transparent}.indicator.appearance-outlined{--focus-inset: 1px}.indicator: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))}.indicator:not(:disabled){cursor:pointer}.indicator:disabled{cursor:not-allowed}.indicator:before{position:absolute;background-color:var(--_appearance-color-text);content:\"\";inline-size:1px;inset-inline-start:0;opacity:.35}.indicator:not(.appearance-filled,.appearance-outlined):before{block-size:50%}.indicator:is(.appearance-filled,.appearance-outlined):before{block-size:100%}.indicator.size-super-condensed{--_split-button-block-size:calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2)));--_split-button-inline-size:calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2)));font:var(--vvd-typography-base-condensed)}.indicator.size-condensed{--_split-button-block-size:calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2)));--_split-button-inline-size:calc(1px*(28 + 4*clamp(-1, var(--vvd-size-density, 0), 2)));font:var(--vvd-typography-base-condensed)}.indicator.size-expanded{--_split-button-block-size:calc(1px*(48 + 4*clamp(-1, var(--vvd-size-density, 0), 2)));--_split-button-inline-size:calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2)));font:var(--vvd-typography-base-extended)}.indicator:not(.size-condensed,.size-expanded,.size-super-condensed){--_split-button-block-size:calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2)));--_split-button-inline-size:calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2)));font:var(--vvd-typography-base-extended)}.indicator:not(.shape-pill){--_border-radius: 8px}.indicator:not(.shape-pill).size-super-condensed,.indicator:not(.shape-pill).super-condensed{--_border-radius: 4px}.indicator.shape-pill{--_border-radius: 24px}.icon{line-height:1}.icon-trailing .icon{order:1}.control>.icon{font-size:calc(var(--_split-button-block-size) / 2)}\n";
-
-const getClasses = ({
-  connotation,
-  appearance,
-  shape,
-  disabled,
-  size,
-  label,
-  icon,
-  iconSlottedContent
-}) => classNames(
-  [`connotation-${connotation}`, Boolean(connotation)],
-  ["disabled", disabled],
-  [`shape-${shape}`, Boolean(shape)],
-  [`appearance-${appearance}`, Boolean(appearance)],
-  [`size-${size}`, Boolean(size)],
-  ["icon-only", !label && !!(icon || iconSlottedContent?.length)]
-);
-function actionButton(context) {
-  const affixIconTemplate = affixIconTemplateFactory(context);
-  return html`
-	<button
-		${ref("_action")}
-		class="control ${getClasses}"
-		aria-label="${(x) => x.ariaLabel}"
-		?disabled="${(x) => x.disabled}"
-		@click="${(x) => x.$emit("action-click", void 0, {
-    bubbles: false
-  })}"
-	>
-			${(x) => affixIconTemplate(x.icon, IconWrapper.Slot)}
-		<span class="text">${(x) => x.label}</span>
-	</button>
-	`;
-}
-function indicatorButton(context) {
-  const affixIconTemplate = affixIconTemplateFactory(context);
-  return html`
-	<button
-		${ref("_indicator")}
-		class="indicator ${getClasses}"
-		?disabled="${(x) => x.disabled}"
-		aria-label="${(x) => x.indicatorAriaLabel || x.locale.splitButton.showMoreActionsLabel}"
-		aria-expanded="${(x) => x.ariaExpanded}"
-		@click="${(x) => x.$emit("indicator-click", void 0, {
-    bubbles: false
-  })}"
-	>
-			${(x) => affixIconTemplate(x.splitIndicator)}
-	</button>
-	`;
-}
-const SplitButtonTemplate = (context) => {
-  return html`
-		<template role="presentation">
-			<div class="base" role="group">
-				${actionButton(context)}
-				${indicatorButton(context)}
-				<slot></slot>
-			</div>
-		</template>`;
-};
+], Slider.prototype, "connotation", 2);
 
-const splitButtonDefinition = SplitButton.compose({
-  baseName: "split-button",
-  template: SplitButtonTemplate,
+const sliderDefinition = Slider.compose({
+  baseName: "slider",
+  template: SliderTemplate,
   styles,
   shadowOptions: {
     delegatesFocus: true
   }
 });
-const splitButtonRegistries = [splitButtonDefinition(), ...iconRegistries];
-const registerSplitButton = registerFactory(splitButtonRegistries);
+const sliderRegistries = [sliderDefinition()];
+const registerSlider = registerFactory(sliderRegistries);
 
-export { splitButtonRegistries as a, registerSplitButton as r, splitButtonDefinition as s };
+export { Slider as S, sliderRegistries as a, registerSlider as r, sliderDefinition as s };