@vonage/vivid 5.0.0 → 5.2.0

package/{shared/definition43.cjs → range-slider/definition.cjs}

@@ -1,19 +1,18 @@
 'use strict';
 
-const definition = require('./definition67.cjs');
-const vividElement = require('./vivid-element.cjs');
-const keyCodes = require('./key-codes.cjs');
-const formAssociated = require('./form-associated.cjs');
-const slider_template = require('./slider.template.cjs');
-const localized = require('./localized.cjs');
-const formElement = require('./form-element.cjs');
-const aria = require('./aria.cjs');
-const numbers = require('./numbers.cjs');
-const classNames = require('./class-names.cjs');
-const ref = require('./ref.cjs');
-const when = require('./when.cjs');
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const styles = ":host{display:inline-block}:host(:not([orientation=vertical])){inline-size:100%}:host([orientation=vertical]){block-size:100%;min-block-size:calc(var(--_thumb-interaction-indicator-size) * 5)}:host([disabled]){cursor:not-allowed}.control.connotation-cta{--_connotation-color-primary: var(--vvd-slider-cta-primary, var(--vvd-color-cta-500))}.control:not(.connotation-cta){--_connotation-color-primary: var(--vvd-slider-accent-primary, var(--vvd-color-canvas-text))}.control{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.control{--_thumb-size: 12px;--_thumb-interaction-indicator-size: 36px;--_track-start-inset-inline-start: 0;--_track-start-inset-block-start: 0;cursor:pointer;outline:none;user-select:none}.control .positioning-region{position:relative}.control .track{position:absolute;border-radius:4px;background:var(--_track-background-color)}.control .track-start{position:absolute;border-radius:inherit;background:var(--_track-start-background-color);block-size:100%;inset-inline-start:var(--_track-start-inset-inline-start)}.control.horizontal{block-size:var(--_thumb-interaction-indicator-size);inline-size:calc(100% - var(--_thumb-size));margin-inline-start:calc(var(--_thumb-size) / 2);min-inline-size:var(--_thumb-size)}.control.horizontal .track{top:calc((var(--_thumb-interaction-indicator-size) - 2px) / 2);right:0;left:0;block-size:2px}:host([markers]) .control.horizontal .track-start{--_track-start-inset-inline-start: 1px;border-bottom-left-radius:0;border-top-left-radius:0}.control.horizontal .track .mark{position:absolute;block-size:6px;inline-size:100%;inset-block-start:-2px;inset-inline-start:0}.control.vertical{margin-top:calc(var(--_thumb-interaction-indicator-size) / 2);block-size:calc(100% - var(--_thumb-interaction-indicator-size));inline-size:var(--_thumb-interaction-indicator-size);min-block-size:var(--_thumb-interaction-indicator-size)}.control.vertical .positioning-region{block-size:100%}.control.vertical .track{left:calc((var(--_thumb-interaction-indicator-size) - 2px) / 2);block-size:100%;inline-size:2px}.control.vertical .track .mark{position:absolute;block-size:100%;inline-size:6px;inset-block-start:0;inset-inline-start:-2px}.control.vertical .track-start{block-size:auto;inline-size:100%;inset-block-start:var(--_track-start-inset-block-start)}:host([markers]) .control.vertical .track-start{--_track-start-inset-block-start: 1px;border-radius:0}.control.disabled{--_track-background-color: var(--vvd-color-neutral-100);--_track-start-background-color: var(--vvd-color-neutral-300);pointer-events:none}.control:not(.disabled){--_track-background-color: var(--vvd-color-neutral-300);--_track-start-background-color: var(--_appearance-color-fill)}.control:not(.disabled) .mark{color:var(--vvd-color-neutral-950)}.control.disabled .mark{color:var(--_track-start-background-color)}.thumb-container{position:absolute;border-radius:50%;block-size:var(--_thumb-interaction-indicator-size);cursor:inherit;inline-size:var(--_thumb-interaction-indicator-size);outline:none;touch-action:none}.thumb-container.focus-visible{box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));--focus-stroke-gap-color: transparent;--_thumb-interaction-indicator-alpha: .05;border-radius:50%}.control.horizontal .thumb-container{transform:translate(calc(var(--_thumb-interaction-indicator-size) / 2))}.control.vertical .thumb-container{transform:translateY(calc(var(--_thumb-interaction-indicator-size) / 2))}.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}.control{--_track-start-inset-inline-start: auto;--_track-start-inset-block-start: auto}:host([markers]) .control.horizontal .track-start,:host([markers]) .control.vertical .track-start{--_track-start-inset-inline-start: auto;--_track-start-inset-block-start: auto}";
+const popup_definition = require('../unbundled/definition4.cjs');
+const vividElement = require('../unbundled/vivid-element.cjs');
+const fastElement = require('@microsoft/fast-element');
+const fastWebUtilities = require('@microsoft/fast-web-utilities');
+const keyCodes = require('../unbundled/key-codes.cjs');
+const formAssociated = require('../unbundled/form-associated.cjs');
+const slider_template = require('../unbundled/slider.template.cjs');
+const localized = require('../unbundled/localized.cjs');
+const formElement = require('../unbundled/form-element.cjs');
+
+const styles = ":host{display:inline-block}:host(:not([orientation=vertical])){inline-size:100%}:host([orientation=vertical]){block-size:100%;min-block-size:calc(var(--_thumb-interaction-indicator-size) * 5)}:host([disabled]){cursor:not-allowed}.control.connotation-cta{--_connotation-color-primary: var(--vvd-slider-cta-primary, var(--vvd-color-cta-500))}.control:not(.connotation-cta){--_connotation-color-primary: var(--vvd-slider-accent-primary, var(--vvd-color-canvas-text))}.control{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.control{--_thumb-size: 12px;--_thumb-interaction-indicator-size: 36px;--_track-start-inset-inline-start: 0;--_track-start-inset-block-start: 0;cursor:pointer;outline:none;user-select:none}.control .positioning-region{position:relative}.control .track{position:absolute;border-radius:4px;background:var(--_track-background-color)}.control .track-start{position:absolute;border-radius:inherit;background:var(--_track-start-background-color);block-size:100%;inset-inline-start:var(--_track-start-inset-inline-start)}.control.horizontal{block-size:var(--_thumb-interaction-indicator-size);inline-size:calc(100% - var(--_thumb-size));margin-inline-start:calc(var(--_thumb-size) / 2);min-inline-size:var(--_thumb-size)}.control.horizontal .track{top:calc((var(--_thumb-interaction-indicator-size) - 2px) / 2);right:0;left:0;block-size:2px}:host([markers]) .control.horizontal .track-start{--_track-start-inset-inline-start: 1px;border-bottom-left-radius:0;border-top-left-radius:0}.control.horizontal .track .mark{position:absolute;block-size:6px;inline-size:100%;inset-block-start:-2px;inset-inline-start:0}.control.vertical{margin-top:calc(var(--_thumb-interaction-indicator-size) / 2);block-size:calc(100% - var(--_thumb-interaction-indicator-size));inline-size:var(--_thumb-interaction-indicator-size);min-block-size:var(--_thumb-interaction-indicator-size)}.control.vertical .positioning-region{block-size:100%}.control.vertical .track{left:calc((var(--_thumb-interaction-indicator-size) - 2px) / 2);block-size:100%;inline-size:2px}.control.vertical .track .mark{position:absolute;block-size:100%;inline-size:6px;inset-block-start:0;inset-inline-start:-2px}.control.vertical .track-start{block-size:auto;inline-size:100%;inset-block-start:var(--_track-start-inset-block-start)}:host([markers]) .control.vertical .track-start{--_track-start-inset-block-start: 1px;border-radius:0}.control.disabled{--_track-background-color: var(--vvd-color-neutral-100);--_track-start-background-color: var(--vvd-color-neutral-300);pointer-events:none}.control:not(.disabled){--_track-background-color: var(--vvd-color-neutral-300);--_track-start-background-color: var(--_appearance-color-fill)}.control:not(.disabled) .mark{color:var(--vvd-color-neutral-950)}.control.disabled .mark{color:var(--_track-start-background-color)}.thumb-container{position:absolute;border-radius:50%;block-size:var(--_thumb-interaction-indicator-size);cursor:inherit;inline-size:var(--_thumb-interaction-indicator-size);outline:none;touch-action:none}.thumb-container.focus-visible{box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));--focus-stroke-gap-color: transparent;--_thumb-interaction-indicator-alpha: .05;border-radius:50%}.control.horizontal .thumb-container{transform:translate(calc(var(--_thumb-interaction-indicator-size) / 2))}.control.vertical .thumb-container{transform:translateY(calc(var(--_thumb-interaction-indicator-size) / 2))}@media (hover: hover){.control:not(.disabled) .thumb-container:hover{--_thumb-interaction-indicator-alpha: .12}}.control:not(.disabled) .thumb-container:active{--_thumb-interaction-indicator-alpha: .25}.thumb-container:before{position:absolute;display:block;border-radius:inherit;background-color:var(--_track-start-background-color);block-size:var(--_thumb-interaction-indicator-size);content:\"\";inline-size:var(--_thumb-interaction-indicator-size);opacity:var(--_thumb-interaction-indicator-alpha, 0);transition:opacity .2s ease-out 0s}.thumb-container:after{position:absolute;display:block;border-radius:inherit;background-color:var(--_track-start-background-color);block-size:var(--_thumb-size);content:\"\";inline-size:var(--_thumb-size);inset:calc((var(--_thumb-interaction-indicator-size) - var(--_thumb-size)) / 2)}.popup{pointer-events:none}.tooltip{width:auto;padding:8px 12px;color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base-bold)}:host([internal-part]) .thumb-container{opacity:0;transition:opacity .2s ease}:host([internal-part]) .control.horizontal .track{top:16px;block-size:4px;overflow:hidden}:host([internal-part]) .control:focus .thumb-container{opacity:1}@media (hover: hover){:host([internal-part]) .control:hover .thumb-container{opacity:1}}.control{--_track-start-inset-inline-start: auto;--_track-start-inset-block-start: auto}:host([markers]) .control.horizontal .track-start,:host([markers]) .control.vertical .track-start{--_track-start-inset-inline-start: auto;--_track-start-inset-block-start: auto}";
 
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -40,7 +39,7 @@ class RangeSlider extends localized.Localized(
     this.min = 0;
     this.max = 10;
     this.step = 1;
-    this.orientation = aria.Orientation.horizontal;
+    this.orientation = fastWebUtilities.Orientation.horizontal;
     this.ariaStartLabel = null;
     this.ariaEndLabel = null;
     this.markers = false;
@@ -100,21 +99,21 @@ class RangeSlider extends localized.Localized(
     this.#onThumbKeydown = (e) => {
       const thumb = this.#getThumbIdFromEvent(e);
       this._visiblyFocusedThumb = thumb;
-      if (e.key === keyCodes.keyHome) {
+      if (e.key === fastWebUtilities.keyHome) {
         e.preventDefault();
         this.#updateValues({ [thumb]: `${this.#thumbConstraints[thumb].min}` });
-      } else if (e.key === keyCodes.keyEnd) {
+      } else if (e.key === fastWebUtilities.keyEnd) {
         e.preventDefault();
         this.#updateValues({ [thumb]: `${this.#thumbConstraints[thumb].max}` });
       } else if (!e.shiftKey) {
         switch (e.key) {
           case keyCodes.keyArrowRight:
-          case keyCodes.keyArrowDown:
+          case fastWebUtilities.keyArrowDown:
             e.preventDefault();
             this.#applyStep(thumb, Direction.Increment);
             break;
           case keyCodes.keyArrowLeft:
-          case keyCodes.keyArrowUp:
+          case fastWebUtilities.keyArrowUp:
             e.preventDefault();
             this.#applyStep(thumb, Direction.Decrement);
             break;
@@ -310,7 +309,7 @@ class RangeSlider extends localized.Localized(
   #updateThumbPositions() {
     const startOffsetPct = this.#thumbTrackEndOffset(this.startAsNumber);
     const endOffsetPct = this.#thumbTrackEndOffset(this.endAsNumber);
-    const [dirProp, dimProp] = this.orientation === aria.Orientation.horizontal ? ["right", "width"] : ["bottom", "height"];
+    const [dirProp, dimProp] = this.orientation === fastWebUtilities.Orientation.horizontal ? ["right", "width"] : ["bottom", "height"];
     const transition = `transition: ${this._draggingThumb ? "none" : "all 0.2s ease"};`;
     this._startThumbCss = `${dirProp}: ${startOffsetPct}%; ${transition}`;
     this._endThumbCss = `${dirProp}: ${endOffsetPct}%; ${transition}`;
@@ -321,7 +320,7 @@ class RangeSlider extends localized.Localized(
   }
   #calculateValueFromMouseEvent(e) {
     const trackClientRect = this._trackEl.getBoundingClientRect();
-    const [minPos, maxPos, valuePos] = this.orientation === aria.Orientation.horizontal ? [
+    const [minPos, maxPos, valuePos] = this.orientation === fastWebUtilities.Orientation.horizontal ? [
       this._trackEl.clientLeft,
       this._trackEl.clientWidth,
       e.pageX - document.documentElement.scrollLeft - this.getBoundingClientRect().left
@@ -333,7 +332,7 @@ class RangeSlider extends localized.Localized(
     return slider_template.lerp(this.min, this.max, slider_template.inverseLerp(minPos, maxPos, valuePos));
   }
   #roundToNearestStep(thumb, value) {
-    return numbers.limit(
+    return fastWebUtilities.limit(
       this.#thumbConstraints[thumb].min,
       this.#thumbConstraints[thumb].max,
       slider_template.roundToStepValue(value - this.min, this.step) + this.min
@@ -452,100 +451,101 @@ class RangeSlider extends localized.Localized(
   #onDragEnd;
 }
 __decorateClass([
-  vividElement.observable
+  fastElement.observable
 ], RangeSlider.prototype, "start");
 __decorateClass([
-  vividElement.attr({ mode: "fromView", attribute: "start" })
+  fastElement.attr({ mode: "fromView", attribute: "start" })
 ], RangeSlider.prototype, "initialStart");
 __decorateClass([
-  vividElement.attr({ attribute: "current-start" })
+  fastElement.attr({ attribute: "current-start" })
 ], RangeSlider.prototype, "currentStart");
 __decorateClass([
-  vividElement.observable
+  fastElement.observable
 ], RangeSlider.prototype, "end");
 __decorateClass([
-  vividElement.attr({ mode: "fromView", attribute: "end" })
+  fastElement.attr({ mode: "fromView", attribute: "end" })
 ], RangeSlider.prototype, "initialEnd");
 __decorateClass([
-  vividElement.attr({ attribute: "current-end" })
+  fastElement.attr({ attribute: "current-end" })
 ], RangeSlider.prototype, "currentEnd");
 __decorateClass([
-  vividElement.attr({ converter: vividElement.nullableNumberConverter })
+  fastElement.attr({ converter: fastElement.nullableNumberConverter })
 ], RangeSlider.prototype, "min");
 __decorateClass([
-  vividElement.attr({ converter: vividElement.nullableNumberConverter })
+  fastElement.attr({ converter: fastElement.nullableNumberConverter })
 ], RangeSlider.prototype, "max");
 __decorateClass([
-  vividElement.attr({ converter: slider_template.defaultToOneConverter })
+  fastElement.attr({ converter: slider_template.defaultToOneConverter })
 ], RangeSlider.prototype, "step");
 __decorateClass([
-  vividElement.attr
+  fastElement.attr
 ], RangeSlider.prototype, "orientation");
 __decorateClass([
-  vividElement.attr({ attribute: "aria-start-label" })
+  fastElement.attr({ attribute: "aria-start-label" })
 ], RangeSlider.prototype, "ariaStartLabel");
 __decorateClass([
-  vividElement.attr({ attribute: "aria-end-label" })
+  fastElement.attr({ attribute: "aria-end-label" })
 ], RangeSlider.prototype, "ariaEndLabel");
 __decorateClass([
-  vividElement.attr({ mode: "boolean" })
+  fastElement.attr({ mode: "boolean" })
 ], RangeSlider.prototype, "markers");
 __decorateClass([
-  vividElement.attr
+  fastElement.attr
 ], RangeSlider.prototype, "connotation");
 __decorateClass([
-  vividElement.attr({ mode: "boolean" })
+  fastElement.attr({ mode: "boolean" })
 ], RangeSlider.prototype, "pin");
 __decorateClass([
-  vividElement.observable
+  fastElement.observable
 ], RangeSlider.prototype, "valueTextFormatter");
 __decorateClass([
-  vividElement.observable
+  fastElement.observable
 ], RangeSlider.prototype, "_draggingThumb");
 __decorateClass([
-  vividElement.observable
+  fastElement.observable
 ], RangeSlider.prototype, "_visiblyFocusedThumb");
 __decorateClass([
-  vividElement.observable
+  fastElement.observable
 ], RangeSlider.prototype, "_hoveredThumb");
 __decorateClass([
-  vividElement.observable
+  fastElement.observable
 ], RangeSlider.prototype, "_startThumbCss");
 __decorateClass([
-  vividElement.observable
+  fastElement.observable
 ], RangeSlider.prototype, "_endThumbCss");
 __decorateClass([
-  vividElement.observable
+  fastElement.observable
 ], RangeSlider.prototype, "_selectedRangeCss");
 
-const getClasses = ({ disabled, connotation }) => classNames.classNames(
+const getClasses = ({ disabled, connotation }) => fastWebUtilities.classNames(
   "control",
   ["disabled", Boolean(disabled)],
   [`connotation-${connotation}`, Boolean(connotation)]
 );
-const getThumbClassesFor = (thumb) => ({ _visiblyFocusedThumb }) => classNames.classNames("thumb-container", [
+const getThumbClassesFor = (thumb) => ({ _visiblyFocusedThumb }) => fastWebUtilities.classNames("thumb-container", [
   "focus-visible",
   _visiblyFocusedThumb === thumb
 ]);
 const RangeSliderTemplate = (context) => {
-  const popupTag = context.tagFor(definition.Popup);
-  return vividElement.html` <template
+  const popupTag = context.tagFor(popup_definition.Popup);
+  return fastElement.html` <template
 		@mousedown="${(x, c) => x._onMouseDown(c.event)}"
 	>
 		<div class="${getClasses} ${(x) => x.orientation}">
 			<div class="positioning-region">
-				<div ${ref.ref("_trackEl")} class="track">
+				<div ${fastElement.ref("_trackEl")} class="track">
 					<div class="track-start" style="${(x) => x._selectedRangeCss}"></div>
-					${when.when(
+					${fastElement.when(
     (x) => x.markers,
-    vividElement.html`${(x) => slider_template.getMarkersTemplate(
-      x.orientation === aria.Orientation.horizontal,
+    fastElement.html`${(x) => slider_template.getMarkersTemplate(
+      x.orientation === fastWebUtilities.Orientation.horizontal,
       Math.floor((x.max - x.min) / x.step)
     )}`
   )}
 				</div>
 				<div
-					${ref.ref("_startThumbEl")}
+					id="start-thumb"
+					${fastElement.ref("_startThumbEl")}
 					class="${getThumbClassesFor("start")}"
 					style="${(x) => x._startThumbCss}"
 					role="slider"
@@ -558,15 +558,15 @@ const RangeSliderTemplate = (context) => {
 					aria-disabled="${(x) => x.disabled}"
 					aria-orientation="${(x) => x.orientation}"
 				></div>
-				${when.when(
+				${fastElement.when(
     (x) => x.pin,
-    vividElement.html`<${popupTag}
+    fastElement.html`<${popupTag}
 					class="popup"
 					arrow
 					alternate
 					:anchor="${(x) => x._startThumbEl}"
 					:open=${(x) => x._isThumbPopupOpen("start")}
-					:placementStrategy=${(x) => x.orientation === aria.Orientation.horizontal ? definition.PlacementStrategy.AutoPlacementHorizontal : definition.PlacementStrategy.AutoPlacementVertical}
+					:placementStrategy=${(x) => x.orientation === fastWebUtilities.Orientation.horizontal ? popup_definition.PlacementStrategy.AutoPlacementHorizontal : popup_definition.PlacementStrategy.AutoPlacementVertical}
 					animation-frame
 					exportparts="vvd-theme-alternate"
 					aria-hidden="true"
@@ -575,7 +575,8 @@ const RangeSliderTemplate = (context) => {
 				</${popupTag}>`
   )}
 				<div
-					${ref.ref("_endThumbEl")}
+					id="end-thumb"
+					${fastElement.ref("_endThumbEl")}
 					class="${getThumbClassesFor("end")}"
 					style="${(x) => x._endThumbCss}"
 					role="slider"
@@ -588,15 +589,15 @@ const RangeSliderTemplate = (context) => {
 					aria-disabled="${(x) => x.disabled}"
 					aria-orientation="${(x) => x.orientation}"
 				></div>
-				${when.when(
+				${fastElement.when(
     (x) => x.pin,
-    vividElement.html`<${popupTag}
+    fastElement.html`<${popupTag}
 					class="popup"
 					arrow
 					alternate
 					:anchor="${(x) => x._endThumbEl}"
 					:open=${(x) => x._isThumbPopupOpen("end")}
-					:placementStrategy=${(x) => x.orientation === aria.Orientation.horizontal ? definition.PlacementStrategy.AutoPlacementHorizontal : definition.PlacementStrategy.AutoPlacementVertical}
+					:placementStrategy=${(x) => x.orientation === fastWebUtilities.Orientation.horizontal ? popup_definition.PlacementStrategy.AutoPlacementHorizontal : popup_definition.PlacementStrategy.AutoPlacementVertical}
 					animation-frame
 					exportparts="vvd-theme-alternate"
 					aria-hidden="true"
@@ -613,7 +614,7 @@ const rangeSliderDefinition = vividElement.defineVividComponent(
   "range-slider",
   RangeSlider,
   RangeSliderTemplate,
-  [definition.popupDefinition],
+  [popup_definition.popupDefinition],
   {
     styles,
     shadowOptions: {
@@ -625,6 +626,6 @@ const registerRangeSlider = vividElement.createRegisterFunction(
   rangeSliderDefinition
 );
 
-exports.RangeSlider = RangeSlider;
+exports.VwcRangeSliderElement = RangeSlider;
 exports.rangeSliderDefinition = rangeSliderDefinition;
 exports.registerRangeSlider = registerRangeSlider;

package/{shared/definition43.js → range-slider/definition.js}

@@ -1,17 +1,14 @@
-import { P as Popup, a as PlacementStrategy, p as popupDefinition } from './definition67.js';
-import { V as VividElement, o as observable, a as attr, n as nullableNumberConverter, h as html, d as createRegisterFunction, f as defineVividComponent } from './vivid-element.js';
-import { g as keyHome, d as keyEnd, e as keyArrowUp, i as keyArrowLeft, f as keyArrowDown, h as keyArrowRight } from './key-codes.js';
-import { F as FormAssociated } from './form-associated.js';
-import { i as inverseLerp, l as lerp, r as roundToStepValue, d as defaultToOneConverter, g as getMarkersTemplate } from './slider.template.js';
-import { L as Localized } from './localized.js';
-import { F as FormElement } from './form-element.js';
-import { O as Orientation } from './aria.js';
-import { l as limit } from './numbers.js';
-import { c as classNames } from './class-names.js';
-import { r as ref } from './ref.js';
-import { w as when } from './when.js';
+import { P as Popup, a as PlacementStrategy, p as popupDefinition } from '../unbundled/definition4.js';
+import { V as VividElement, d as defineVividComponent, c as createRegisterFunction } from '../unbundled/vivid-element.js';
+import { observable, attr, nullableNumberConverter, ref, when, html } from '@microsoft/fast-element';
+import { Orientation, keyHome, keyEnd, keyArrowUp, keyArrowDown, limit, classNames } from '@microsoft/fast-web-utilities';
+import { a as keyArrowLeft, k as keyArrowRight } from '../unbundled/key-codes.js';
+import { F as FormAssociated } from '../unbundled/form-associated.js';
+import { i as inverseLerp, l as lerp, r as roundToStepValue, d as defaultToOneConverter, g as getMarkersTemplate } from '../unbundled/slider.template.js';
+import { L as Localized } from '../unbundled/localized.js';
+import { F as FormElement } from '../unbundled/form-element.js';
 
-const styles = ":host{display:inline-block}:host(:not([orientation=vertical])){inline-size:100%}:host([orientation=vertical]){block-size:100%;min-block-size:calc(var(--_thumb-interaction-indicator-size) * 5)}:host([disabled]){cursor:not-allowed}.control.connotation-cta{--_connotation-color-primary: var(--vvd-slider-cta-primary, var(--vvd-color-cta-500))}.control:not(.connotation-cta){--_connotation-color-primary: var(--vvd-slider-accent-primary, var(--vvd-color-canvas-text))}.control{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.control{--_thumb-size: 12px;--_thumb-interaction-indicator-size: 36px;--_track-start-inset-inline-start: 0;--_track-start-inset-block-start: 0;cursor:pointer;outline:none;user-select:none}.control .positioning-region{position:relative}.control .track{position:absolute;border-radius:4px;background:var(--_track-background-color)}.control .track-start{position:absolute;border-radius:inherit;background:var(--_track-start-background-color);block-size:100%;inset-inline-start:var(--_track-start-inset-inline-start)}.control.horizontal{block-size:var(--_thumb-interaction-indicator-size);inline-size:calc(100% - var(--_thumb-size));margin-inline-start:calc(var(--_thumb-size) / 2);min-inline-size:var(--_thumb-size)}.control.horizontal .track{top:calc((var(--_thumb-interaction-indicator-size) - 2px) / 2);right:0;left:0;block-size:2px}:host([markers]) .control.horizontal .track-start{--_track-start-inset-inline-start: 1px;border-bottom-left-radius:0;border-top-left-radius:0}.control.horizontal .track .mark{position:absolute;block-size:6px;inline-size:100%;inset-block-start:-2px;inset-inline-start:0}.control.vertical{margin-top:calc(var(--_thumb-interaction-indicator-size) / 2);block-size:calc(100% - var(--_thumb-interaction-indicator-size));inline-size:var(--_thumb-interaction-indicator-size);min-block-size:var(--_thumb-interaction-indicator-size)}.control.vertical .positioning-region{block-size:100%}.control.vertical .track{left:calc((var(--_thumb-interaction-indicator-size) - 2px) / 2);block-size:100%;inline-size:2px}.control.vertical .track .mark{position:absolute;block-size:100%;inline-size:6px;inset-block-start:0;inset-inline-start:-2px}.control.vertical .track-start{block-size:auto;inline-size:100%;inset-block-start:var(--_track-start-inset-block-start)}:host([markers]) .control.vertical .track-start{--_track-start-inset-block-start: 1px;border-radius:0}.control.disabled{--_track-background-color: var(--vvd-color-neutral-100);--_track-start-background-color: var(--vvd-color-neutral-300);pointer-events:none}.control:not(.disabled){--_track-background-color: var(--vvd-color-neutral-300);--_track-start-background-color: var(--_appearance-color-fill)}.control:not(.disabled) .mark{color:var(--vvd-color-neutral-950)}.control.disabled .mark{color:var(--_track-start-background-color)}.thumb-container{position:absolute;border-radius:50%;block-size:var(--_thumb-interaction-indicator-size);cursor:inherit;inline-size:var(--_thumb-interaction-indicator-size);outline:none;touch-action:none}.thumb-container.focus-visible{box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));--focus-stroke-gap-color: transparent;--_thumb-interaction-indicator-alpha: .05;border-radius:50%}.control.horizontal .thumb-container{transform:translate(calc(var(--_thumb-interaction-indicator-size) / 2))}.control.vertical .thumb-container{transform:translateY(calc(var(--_thumb-interaction-indicator-size) / 2))}.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}.control{--_track-start-inset-inline-start: auto;--_track-start-inset-block-start: auto}:host([markers]) .control.horizontal .track-start,:host([markers]) .control.vertical .track-start{--_track-start-inset-inline-start: auto;--_track-start-inset-block-start: auto}";
+const styles = ":host{display:inline-block}:host(:not([orientation=vertical])){inline-size:100%}:host([orientation=vertical]){block-size:100%;min-block-size:calc(var(--_thumb-interaction-indicator-size) * 5)}:host([disabled]){cursor:not-allowed}.control.connotation-cta{--_connotation-color-primary: var(--vvd-slider-cta-primary, var(--vvd-color-cta-500))}.control:not(.connotation-cta){--_connotation-color-primary: var(--vvd-slider-accent-primary, var(--vvd-color-canvas-text))}.control{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.control{--_thumb-size: 12px;--_thumb-interaction-indicator-size: 36px;--_track-start-inset-inline-start: 0;--_track-start-inset-block-start: 0;cursor:pointer;outline:none;user-select:none}.control .positioning-region{position:relative}.control .track{position:absolute;border-radius:4px;background:var(--_track-background-color)}.control .track-start{position:absolute;border-radius:inherit;background:var(--_track-start-background-color);block-size:100%;inset-inline-start:var(--_track-start-inset-inline-start)}.control.horizontal{block-size:var(--_thumb-interaction-indicator-size);inline-size:calc(100% - var(--_thumb-size));margin-inline-start:calc(var(--_thumb-size) / 2);min-inline-size:var(--_thumb-size)}.control.horizontal .track{top:calc((var(--_thumb-interaction-indicator-size) - 2px) / 2);right:0;left:0;block-size:2px}:host([markers]) .control.horizontal .track-start{--_track-start-inset-inline-start: 1px;border-bottom-left-radius:0;border-top-left-radius:0}.control.horizontal .track .mark{position:absolute;block-size:6px;inline-size:100%;inset-block-start:-2px;inset-inline-start:0}.control.vertical{margin-top:calc(var(--_thumb-interaction-indicator-size) / 2);block-size:calc(100% - var(--_thumb-interaction-indicator-size));inline-size:var(--_thumb-interaction-indicator-size);min-block-size:var(--_thumb-interaction-indicator-size)}.control.vertical .positioning-region{block-size:100%}.control.vertical .track{left:calc((var(--_thumb-interaction-indicator-size) - 2px) / 2);block-size:100%;inline-size:2px}.control.vertical .track .mark{position:absolute;block-size:100%;inline-size:6px;inset-block-start:0;inset-inline-start:-2px}.control.vertical .track-start{block-size:auto;inline-size:100%;inset-block-start:var(--_track-start-inset-block-start)}:host([markers]) .control.vertical .track-start{--_track-start-inset-block-start: 1px;border-radius:0}.control.disabled{--_track-background-color: var(--vvd-color-neutral-100);--_track-start-background-color: var(--vvd-color-neutral-300);pointer-events:none}.control:not(.disabled){--_track-background-color: var(--vvd-color-neutral-300);--_track-start-background-color: var(--_appearance-color-fill)}.control:not(.disabled) .mark{color:var(--vvd-color-neutral-950)}.control.disabled .mark{color:var(--_track-start-background-color)}.thumb-container{position:absolute;border-radius:50%;block-size:var(--_thumb-interaction-indicator-size);cursor:inherit;inline-size:var(--_thumb-interaction-indicator-size);outline:none;touch-action:none}.thumb-container.focus-visible{box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));--focus-stroke-gap-color: transparent;--_thumb-interaction-indicator-alpha: .05;border-radius:50%}.control.horizontal .thumb-container{transform:translate(calc(var(--_thumb-interaction-indicator-size) / 2))}.control.vertical .thumb-container{transform:translateY(calc(var(--_thumb-interaction-indicator-size) / 2))}@media (hover: hover){.control:not(.disabled) .thumb-container:hover{--_thumb-interaction-indicator-alpha: .12}}.control:not(.disabled) .thumb-container:active{--_thumb-interaction-indicator-alpha: .25}.thumb-container:before{position:absolute;display:block;border-radius:inherit;background-color:var(--_track-start-background-color);block-size:var(--_thumb-interaction-indicator-size);content:\"\";inline-size:var(--_thumb-interaction-indicator-size);opacity:var(--_thumb-interaction-indicator-alpha, 0);transition:opacity .2s ease-out 0s}.thumb-container:after{position:absolute;display:block;border-radius:inherit;background-color:var(--_track-start-background-color);block-size:var(--_thumb-size);content:\"\";inline-size:var(--_thumb-size);inset:calc((var(--_thumb-interaction-indicator-size) - var(--_thumb-size)) / 2)}.popup{pointer-events:none}.tooltip{width:auto;padding:8px 12px;color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base-bold)}:host([internal-part]) .thumb-container{opacity:0;transition:opacity .2s ease}:host([internal-part]) .control.horizontal .track{top:16px;block-size:4px;overflow:hidden}:host([internal-part]) .control:focus .thumb-container{opacity:1}@media (hover: hover){:host([internal-part]) .control:hover .thumb-container{opacity:1}}.control{--_track-start-inset-inline-start: auto;--_track-start-inset-block-start: auto}:host([markers]) .control.horizontal .track-start,:host([markers]) .control.vertical .track-start{--_track-start-inset-inline-start: auto;--_track-start-inset-block-start: auto}";
 
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -543,6 +540,7 @@ const RangeSliderTemplate = (context) => {
   )}
 				</div>
 				<div
+					id="start-thumb"
 					${ref("_startThumbEl")}
 					class="${getThumbClassesFor("start")}"
 					style="${(x) => x._startThumbCss}"
@@ -573,6 +571,7 @@ const RangeSliderTemplate = (context) => {
 				</${popupTag}>`
   )}
 				<div
+					id="end-thumb"
 					${ref("_endThumbEl")}
 					class="${getThumbClassesFor("end")}"
 					style="${(x) => x._endThumbCss}"
@@ -623,4 +622,4 @@ const registerRangeSlider = createRegisterFunction(
   rangeSliderDefinition
 );
 
-export { RangeSlider as R, registerRangeSlider as a, rangeSliderDefinition as r };
+export { RangeSlider as VwcRangeSliderElement, rangeSliderDefinition, registerRangeSlider };

package/range-slider/index.cjs

@@ -1,5 +1,68 @@
-'use strict';
-
-const definition = require('../shared/definition43.cjs');
-
-definition.registerRangeSlider();
+"use strict";const h=require("../bundled/definition9.cjs"),i=require("../bundled/vivid-element.cjs"),c=require("../bundled/key-codes.cjs"),k=require("../bundled/form-associated.cjs"),u=require("../bundled/slider.template.cjs"),f=require("../bundled/localized.cjs"),y=require("../bundled/form-element.cjs"),d=require("../bundled/aria.cjs"),T=require("../bundled/numbers.cjs"),_=require("../bundled/class-names.cjs"),m=require("../bundled/ref.cjs"),b=require("../bundled/when.cjs"),z=':host{display:inline-block}:host(:not([orientation=vertical])){inline-size:100%}:host([orientation=vertical]){block-size:100%;min-block-size:calc(var(--_thumb-interaction-indicator-size) * 5)}:host([disabled]){cursor:not-allowed}.control.connotation-cta{--_connotation-color-primary: var(--vvd-slider-cta-primary, var(--vvd-color-cta-500))}.control:not(.connotation-cta){--_connotation-color-primary: var(--vvd-slider-accent-primary, var(--vvd-color-canvas-text))}.control{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.control{--_thumb-size: 12px;--_thumb-interaction-indicator-size: 36px;--_track-start-inset-inline-start: 0;--_track-start-inset-block-start: 0;cursor:pointer;outline:none;user-select:none}.control .positioning-region{position:relative}.control .track{position:absolute;border-radius:4px;background:var(--_track-background-color)}.control .track-start{position:absolute;border-radius:inherit;background:var(--_track-start-background-color);block-size:100%;inset-inline-start:var(--_track-start-inset-inline-start)}.control.horizontal{block-size:var(--_thumb-interaction-indicator-size);inline-size:calc(100% - var(--_thumb-size));margin-inline-start:calc(var(--_thumb-size) / 2);min-inline-size:var(--_thumb-size)}.control.horizontal .track{top:calc((var(--_thumb-interaction-indicator-size) - 2px) / 2);right:0;left:0;block-size:2px}:host([markers]) .control.horizontal .track-start{--_track-start-inset-inline-start: 1px;border-bottom-left-radius:0;border-top-left-radius:0}.control.horizontal .track .mark{position:absolute;block-size:6px;inline-size:100%;inset-block-start:-2px;inset-inline-start:0}.control.vertical{margin-top:calc(var(--_thumb-interaction-indicator-size) / 2);block-size:calc(100% - var(--_thumb-interaction-indicator-size));inline-size:var(--_thumb-interaction-indicator-size);min-block-size:var(--_thumb-interaction-indicator-size)}.control.vertical .positioning-region{block-size:100%}.control.vertical .track{left:calc((var(--_thumb-interaction-indicator-size) - 2px) / 2);block-size:100%;inline-size:2px}.control.vertical .track .mark{position:absolute;block-size:100%;inline-size:6px;inset-block-start:0;inset-inline-start:-2px}.control.vertical .track-start{block-size:auto;inline-size:100%;inset-block-start:var(--_track-start-inset-block-start)}:host([markers]) .control.vertical .track-start{--_track-start-inset-block-start: 1px;border-radius:0}.control.disabled{--_track-background-color: var(--vvd-color-neutral-100);--_track-start-background-color: var(--vvd-color-neutral-300);pointer-events:none}.control:not(.disabled){--_track-background-color: var(--vvd-color-neutral-300);--_track-start-background-color: var(--_appearance-color-fill)}.control:not(.disabled) .mark{color:var(--vvd-color-neutral-950)}.control.disabled .mark{color:var(--_track-start-background-color)}.thumb-container{position:absolute;border-radius:50%;block-size:var(--_thumb-interaction-indicator-size);cursor:inherit;inline-size:var(--_thumb-interaction-indicator-size);outline:none;touch-action:none}.thumb-container.focus-visible{box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));--focus-stroke-gap-color: transparent;--_thumb-interaction-indicator-alpha: .05;border-radius:50%}.control.horizontal .thumb-container{transform:translate(calc(var(--_thumb-interaction-indicator-size) / 2))}.control.vertical .thumb-container{transform:translateY(calc(var(--_thumb-interaction-indicator-size) / 2))}@media (hover: hover){.control:not(.disabled) .thumb-container:hover{--_thumb-interaction-indicator-alpha: .12}}.control:not(.disabled) .thumb-container:active{--_thumb-interaction-indicator-alpha: .25}.thumb-container:before{position:absolute;display:block;border-radius:inherit;background-color:var(--_track-start-background-color);block-size:var(--_thumb-interaction-indicator-size);content:"";inline-size:var(--_thumb-interaction-indicator-size);opacity:var(--_thumb-interaction-indicator-alpha, 0);transition:opacity .2s ease-out 0s}.thumb-container:after{position:absolute;display:block;border-radius:inherit;background-color:var(--_track-start-background-color);block-size:var(--_thumb-size);content:"";inline-size:var(--_thumb-size);inset:calc((var(--_thumb-interaction-indicator-size) - var(--_thumb-size)) / 2)}.popup{pointer-events:none}.tooltip{width:auto;padding:8px 12px;color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base-bold)}:host([internal-part]) .thumb-container{opacity:0;transition:opacity .2s ease}:host([internal-part]) .control.horizontal .track{top:16px;block-size:4px;overflow:hidden}:host([internal-part]) .control:focus .thumb-container{opacity:1}@media (hover: hover){:host([internal-part]) .control:hover .thumb-container{opacity:1}}.control{--_track-start-inset-inline-start: auto;--_track-start-inset-block-start: auto}:host([markers]) .control.horizontal .track-start,:host([markers]) .control.vertical .track-start{--_track-start-inset-inline-start: auto;--_track-start-inset-block-start: auto}';var $=Object.defineProperty,a=(l,e,t,n)=>{for(var s=void 0,o=l.length-1,v;o>=0;o--)(v=l[o])&&(s=v(e,t,s)||s);return s&&$(e,t,s),s};const p={Increment:1,Decrement:-1};class r extends f.Localized(y.FormElement(k.FormAssociated(i.VividElement))){constructor(){super(...arguments),this.#r=!1,this.start="",this.end="",this.min=0,this.max=10,this.step=1,this.orientation=d.Orientation.horizontal,this.ariaStartLabel=null,this.ariaEndLabel=null,this.markers=!1,this.pin=!1,this.valueTextFormatter=e=>parseFloat(e).toLocaleString(this.locale.lang),this.proxy=document.createElement("input"),this._trackEl=null,this._startThumbEl=null,this._endThumbEl=null,this._draggingThumb=!1,this._visiblyFocusedThumb=null,this._hoveredThumb=null,this._startThumbCss="",this._endThumbCss="",this._selectedRangeCss="",this.#c=!1,this.#d=e=>{this.#c||(this._visiblyFocusedThumb=this.#h(e))},this.#m=()=>{this._visiblyFocusedThumb=null},this.#b=e=>{this._hoveredThumb=this.#h(e)},this.#v=()=>{this._hoveredThumb=null},this.#a=e=>{if(this.disabled||e.defaultPrevented)return;let t=e.target;t===this._endThumbEl&&this.startAsNumber===this.max&&this.endAsNumber===this.max&&(t=this._startThumbEl),this.#y(t),this._draggingThumb=this.#_(t),this.#T()},this.#p=e=>{const t=this.#h(e);if(this._visiblyFocusedThumb=t,e.key===c.keyHome)e.preventDefault(),this.#e({[t]:`${this.#s[t].min}`});else if(e.key===c.keyEnd)e.preventDefault(),this.#e({[t]:`${this.#s[t].max}`});else if(!e.shiftKey)switch(e.key){case c.keyArrowRight:case c.keyArrowDown:e.preventDefault(),this.#g(t,p.Increment);break;case c.keyArrowLeft:case c.keyArrowUp:e.preventDefault(),this.#g(t,p.Decrement);break}},this.#n=e=>{if(this.disabled||e.defaultPrevented||!this._draggingThumb)return;const t="TouchEvent"in window&&e instanceof TouchEvent?e.touches[0]:e,n=this.#f(t);this.#e({[this._draggingThumb]:`${this.#u(this._draggingThumb,n)}`})},this.#i=()=>{this._draggingThumb=!1,this.#z()}}#r;startChanged(){this.currentStart=this.start,this.#r||(this.dirtyValue=!0,this.#o()),this.$fastController.isConnected&&this.#l()}initialStartChanged(e,t){t&&!this.dirtyValue&&(this.start=t,this.dirtyValue=!1)}currentStartChanged(){this.start=this.currentStart}get startAsNumber(){return parseFloat(this.start)}set startAsNumber(e){this.start=e.toString()}endChanged(){this.currentEnd=this.end,this.#r||(this.dirtyValue=!0,this.#o()),this.$fastController.isConnected&&this.#l()}initialEndChanged(e,t){t&&!this.dirtyValue&&(this.end=t,this.dirtyValue=!1)}currentEndChanged(){this.end=this.currentEnd}get endAsNumber(){return parseFloat(this.end)}set endAsNumber(e){this.end=e.toString()}#e({start:e,end:t},n=!0){e===this.start&&(e=void 0),t===this.end&&(t=void 0),!(e===void 0&&t===void 0)&&(this.#r=!0,e!==void 0&&(this.start=e),t!==void 0&&(this.end=t),this.#r=!1,n&&(e!==void 0&&this.$emit("input:start"),t!==void 0&&this.$emit("input:end"),this.$emit("input"),this.$emit("change"),this.dirtyValue=!0),this.#o())}#g(e,t){this.#e({[e]:this.#u(e,Number(this[e])+t*this.step).toString()})}orientationChanged(){this.$fastController.isConnected&&this.#l()}nameChanged(e,t){super.nameChanged(e,t),this.#o()}#o(){if(!this.name)this.setFormValue(null);else{const e=new FormData;e.append(this.name,this.start),e.append(this.name,this.end),this.setFormValue(e)}}formResetCallback(){this.#e({start:this.initialStart??this.min.toString(),end:this.initialEnd??this.max.toString()}),super.formResetCallback()}get#t(){return{start:this._startThumbEl,end:this._endThumbEl}}get#s(){return{start:{min:this.min,max:this.endAsNumber},end:{min:this.startAsNumber,max:this.max}}}#_(e){return e===this._startThumbEl?"start":"end"}#h(e){return this.#_(e.target)}#l(){const e=this.#k(this.startAsNumber),t=this.#k(this.endAsNumber),[n,s]=this.orientation===d.Orientation.horizontal?["right","width"]:["bottom","height"],o=`transition: ${this._draggingThumb?"none":"all 0.2s ease"};`;this._startThumbCss=`${n}: ${e}%; ${o}`,this._endThumbCss=`${n}: ${t}%; ${o}`,this._selectedRangeCss=`${n}: ${t}%; ${s}: ${e-t}%; ${o}`}#k(e){return(1-u.inverseLerp(this.min,this.max,e))*100}#f(e){const t=this._trackEl.getBoundingClientRect(),[n,s,o]=this.orientation===d.Orientation.horizontal?[this._trackEl.clientLeft,this._trackEl.clientWidth,e.pageX-document.documentElement.scrollLeft-this.getBoundingClientRect().left]:[t.top,t.bottom,e.pageY-document.documentElement.scrollTop];return u.lerp(this.min,this.max,u.inverseLerp(n,s,o))}#u(e,t){return T.limit(this.#s[e].min,this.#s[e].max,u.roundToStepValue(t-this.min,this.step)+this.min)}#c;#y(e){this.#c=!0,e.focus(),this.#c=!1}_isThumbPopupOpen(e){return this._visiblyFocusedThumb===e||this._hoveredThumb===e||this._draggingThumb===e}connectedCallback(){super.connectedCallback(),this.#e({start:this.start||this.initialStart||this.min.toString(),end:this.end||this.initialEnd||this.max.toString()},!1),this.#$(),this.#l()}disconnectedCallback(){super.disconnectedCallback(),this.#E(),this.#z()}#$(){for(const e of["start","end"])this.#t[e].addEventListener("keydown",this.#p),this.#t[e].addEventListener("mousedown",this.#a,{passive:!0}),this.#t[e].addEventListener("touchstart",this.#a,{passive:!0}),this.#t[e].addEventListener("mouseover",this.#b,{passive:!0}),this.#t[e].addEventListener("mouseout",this.#v,{passive:!0}),this.#t[e].addEventListener("focus",this.#d),this.#t[e].addEventListener("blur",this.#m)}#E(){for(const e of["start","end"])this.#t[e].removeEventListener("keydown",this.#p),this.#t[e].removeEventListener("mousedown",this.#a),this.#t[e].removeEventListener("touchstart",this.#a),this.#t[e].removeEventListener("mouseover",this.#b),this.#t[e].removeEventListener("mouseout",this.#v),this.#t[e].removeEventListener("focus",this.#d),this.#t[e].removeEventListener("blur",this.#m)}_onMouseDown(e){if(this.disabled||this._draggingThumb)return;const t=this.#f(e),n=Math.abs(t-Number(this.start)),s=Math.abs(t-Number(this.end)),o=n<s||n===s&&t<Number(this.start)?"start":"end";this.#e({[o]:`${this.#u(o,t)}`}),this._draggingThumb=o,this.#y(this.#t[o]),this.#T()}#d;#m;#b;#v;#a;#p;#T(){window.addEventListener("mousemove",this.#n,{passive:!0}),window.addEventListener("touchmove",this.#n,{passive:!0}),window.addEventListener("mouseup",this.#i),window.addEventListener("touchend",this.#i),window.document.addEventListener("mouseleave",this.#i)}#z(){window.removeEventListener("mouseup",this.#i),window.document.removeEventListener("mouseleave",this.#i),window.removeEventListener("mousemove",this.#n),window.removeEventListener("touchmove",this.#n),window.removeEventListener("touchend",this.#i)}#n;#i}a([i.observable],r.prototype,"start");a([i.attr({mode:"fromView",attribute:"start"})],r.prototype,"initialStart");a([i.attr({attribute:"current-start"})],r.prototype,"currentStart");a([i.observable],r.prototype,"end");a([i.attr({mode:"fromView",attribute:"end"})],r.prototype,"initialEnd");a([i.attr({attribute:"current-end"})],r.prototype,"currentEnd");a([i.attr({converter:i.nullableNumberConverter})],r.prototype,"min");a([i.attr({converter:i.nullableNumberConverter})],r.prototype,"max");a([i.attr({converter:u.defaultToOneConverter})],r.prototype,"step");a([i.attr],r.prototype,"orientation");a([i.attr({attribute:"aria-start-label"})],r.prototype,"ariaStartLabel");a([i.attr({attribute:"aria-end-label"})],r.prototype,"ariaEndLabel");a([i.attr({mode:"boolean"})],r.prototype,"markers");a([i.attr],r.prototype,"connotation");a([i.attr({mode:"boolean"})],r.prototype,"pin");a([i.observable],r.prototype,"valueTextFormatter");a([i.observable],r.prototype,"_draggingThumb");a([i.observable],r.prototype,"_visiblyFocusedThumb");a([i.observable],r.prototype,"_hoveredThumb");a([i.observable],r.prototype,"_startThumbCss");a([i.observable],r.prototype,"_endThumbCss");a([i.observable],r.prototype,"_selectedRangeCss");const E=({disabled:l,connotation:e})=>_.classNames("control",["disabled",!!l],[`connotation-${e}`,!!e]),g=l=>({_visiblyFocusedThumb:e})=>_.classNames("thumb-container",["focus-visible",e===l]),w=l=>{const e=l.tagFor(h.Popup);return i.html` <template
+		@mousedown="${(t,n)=>t._onMouseDown(n.event)}"
+	>
+		<div class="${E} ${t=>t.orientation}">
+			<div class="positioning-region">
+				<div ${m.ref("_trackEl")} class="track">
+					<div class="track-start" style="${t=>t._selectedRangeCss}"></div>
+					${b.when(t=>t.markers,i.html`${t=>u.getMarkersTemplate(t.orientation===d.Orientation.horizontal,Math.floor((t.max-t.min)/t.step))}`)}
+				</div>
+				<div
+					id="start-thumb"
+					${m.ref("_startThumbEl")}
+					class="${g("start")}"
+					style="${t=>t._startThumbCss}"
+					role="slider"
+					tabindex="${t=>t.disabled?null:0}"
+					aria-label="${t=>t.ariaStartLabel||t.locale.rangeSlider.startThumbLabel}"
+					aria-valuetext="${t=>t.valueTextFormatter(t.start)}"
+					aria-valuenow="${t=>t.start}"
+					aria-valuemin="${t=>t.min}"
+					aria-valuemax="${t=>t.end}"
+					aria-disabled="${t=>t.disabled}"
+					aria-orientation="${t=>t.orientation}"
+				></div>
+				${b.when(t=>t.pin,i.html`<${e}
+					class="popup"
+					arrow
+					alternate
+					:anchor="${t=>t._startThumbEl}"
+					:open=${t=>t._isThumbPopupOpen("start")}
+					:placementStrategy=${t=>t.orientation===d.Orientation.horizontal?h.PlacementStrategy.AutoPlacementHorizontal:h.PlacementStrategy.AutoPlacementVertical}
+					animation-frame
+					exportparts="vvd-theme-alternate"
+					aria-hidden="true"
+				>
+					<div class="tooltip">${t=>t.valueTextFormatter(t.start)}</div>
+				</${e}>`)}
+				<div
+					id="end-thumb"
+					${m.ref("_endThumbEl")}
+					class="${g("end")}"
+					style="${t=>t._endThumbCss}"
+					role="slider"
+					tabindex="${t=>t.disabled?null:0}"
+					aria-label="${t=>t.ariaEndLabel||t.locale.rangeSlider.endThumbLabel}"
+					aria-valuetext="${t=>t.valueTextFormatter(t.end)}"
+					aria-valuenow="${t=>t.end}"
+					aria-valuemin="${t=>t.start}"
+					aria-valuemax="${t=>t.max}"
+					aria-disabled="${t=>t.disabled}"
+					aria-orientation="${t=>t.orientation}"
+				></div>
+				${b.when(t=>t.pin,i.html`<${e}
+					class="popup"
+					arrow
+					alternate
+					:anchor="${t=>t._endThumbEl}"
+					:open=${t=>t._isThumbPopupOpen("end")}
+					:placementStrategy=${t=>t.orientation===d.Orientation.horizontal?h.PlacementStrategy.AutoPlacementHorizontal:h.PlacementStrategy.AutoPlacementVertical}
+					animation-frame
+					exportparts="vvd-theme-alternate"
+					aria-hidden="true"
+				>
+					<div class="tooltip">${t=>t.valueTextFormatter(t.end)}</div>
+				</${e}>`)}
+			</div>
+		</div>
+	</template>`},x=i.defineVividComponent("range-slider",r,w,[h.popupDefinition],{styles:z,shadowOptions:{delegatesFocus:!0}}),C=i.createRegisterFunction(x);C();