@vonage/vivid 4.31.0 → 5.1.0

package/radio-group/index.js

@@ -1,3 +1,255 @@
-import { a as registerRadioGroup } from '../shared/definition41.js';
-
-registerRadioGroup();
+import { V as p, a as r, o as f, h, c as b, d as v } from "../bundled/vivid-element.js";
+import { R as m, a as y } from "../bundled/definition17.js";
+import { W as R, f as k } from "../bundled/mixins.js";
+import { g as u, h as c, c as B, b as x, f as O } from "../bundled/key-codes.js";
+import { O as g } from "../bundled/aria.js";
+import { d as C } from "../bundled/delegates-aria.js";
+import { s as E, e as T } from "../bundled/slotted.js";
+import { w } from "../bundled/when.js";
+const $ = ".base{display:flex;flex-direction:column;gap:8px;--_low-ink-color: var(--vvd-color-neutral-600)}.positioning-region{display:flex;flex-wrap:wrap;gap:8px}.positioning-region.vertical{flex-direction:column}fieldset{display:block;padding:0;border:none;margin:0}legend{padding:0;color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base);margin-block-end:8px}";
+var A = Object.defineProperty, s = (d, e, t, o) => {
+  for (var i = void 0, n = d.length - 1, l; n >= 0; n--)
+    (l = d[n]) && (i = l(e, t, i) || i);
+  return i && A(e, t, i), i;
+};
+class a extends R(p) {
+  constructor() {
+    super(...arguments), this.errorValidationMessage = "", this.orientation = // eslint-disable-next-line @repo/repo/no-attribute-default-value
+    g.horizontal, this.slottedRadioButtons = [], this.radioErrorHandler = (e) => {
+      const t = e.target;
+      this.errorValidationMessage = t.errorValidationMessage || "";
+    }, this.radioChangeHandler = (e) => {
+      const t = e.target;
+      t.checked && (this.slottedRadioButtons?.forEach((o) => {
+        o !== t && (o.checked = !1);
+      }), this.value = t.value, this.#e(t)), e.stopPropagation();
+    }, this.moveToRadioByIndex = (e, t) => {
+      const o = e[t];
+      !this.isInsideToolbar && !o.readOnly && (o.checked = !0), o.focus();
+    }, this.moveRightOffGroup = () => {
+      this.nextElementSibling?.focus();
+    }, this.moveLeftOffGroup = () => {
+      this.previousElementSibling?.focus();
+    }, this.moveRight = (e) => {
+      const t = e.target, o = this.#t;
+      let i = 0;
+      if (i = o.indexOf(t) + 1, i === o.length && this.isInsideToolbar && e.key === u) {
+        this.moveRightOffGroup();
+        return;
+      }
+      i === o.length && (i = 0), this.moveToRadioByIndex(o, i);
+    }, this.moveLeft = (e) => {
+      const t = e.target, o = this.#t;
+      let i = o.indexOf(t) - 1;
+      if (this.isInsideToolbar && e.key === c && i < 0) {
+        this.moveLeftOffGroup();
+        return;
+      }
+      i = i < 0 ? o.length - 1 : i, this.moveToRadioByIndex(o, i);
+    }, this.keydownHandler = (e) => {
+      switch (e.key) {
+        case O:
+          this.checkFocusedRadio(e.target);
+          break;
+        case u:
+        case x:
+          this.moveRight(e);
+          break;
+        case c:
+        case B:
+          this.moveLeft(e);
+          break;
+        default:
+          return !0;
+      }
+    };
+  }
+  /**
+   * @internal
+   */
+  requiredChanged() {
+    this.slottedRadioButtons?.forEach((e) => {
+      this.required ? e.required = !0 : e.required = !1;
+    });
+  }
+  /**
+   * @internal
+   */
+  readOnlyChanged() {
+    this.slottedRadioButtons?.forEach((e) => {
+      this.readOnly ? e.readOnly = !0 : e.readOnly = !1;
+    });
+  }
+  /**
+   * @internal
+   */
+  disabledChanged() {
+    this.slottedRadioButtons?.forEach((e) => {
+      this.disabled ? e.disabled = !0 : e.disabled = !1;
+    });
+  }
+  nameChanged() {
+    this.slottedRadioButtons?.forEach((e) => {
+      e.setAttribute("name", this.name);
+    });
+  }
+  /**
+   * @internal
+   */
+  valueChanged() {
+    this.slottedRadioButtons?.forEach((e) => {
+      e.value === this.value && (e.checked = !0);
+    }), this.$emit("change");
+  }
+  /**
+   * @internal
+   */
+  handleSlotChange() {
+    this.errorText && this.slottedRadioButtons?.forEach((e) => {
+      e.errorText = this.errorText;
+    });
+  }
+  /**
+   * @internal
+   */
+  errorTextChanged(e, t) {
+    t ? this.errorValidationMessage = t : this.errorValidationMessage = "";
+  }
+  get #t() {
+    return this.slottedRadioButtons?.filter((e) => !e.disabled);
+  }
+  /**
+   * @internal
+   */
+  slottedRadioButtonsChanged() {
+    this.slottedRadioButtons && this.slottedRadioButtons.length > 0 && this.setupRadioButtons();
+  }
+  get isInsideToolbar() {
+    return !!this.closest('[role="toolbar"]');
+  }
+  /**
+   * @internal
+   */
+  connectedCallback() {
+    super.connectedCallback(), this.setupRadioButtons();
+  }
+  disconnectedCallback() {
+    this.slottedRadioButtons?.forEach((e) => {
+      e.removeEventListener(
+        "change",
+        this.radioChangeHandler
+      ), e.removeEventListener(
+        "invalid",
+        this.radioErrorHandler
+      );
+    });
+  }
+  setupRadioButtons() {
+    let e = !1;
+    for (const t of this.slottedRadioButtons)
+      this.name !== void 0 && t.setAttribute("name", this.name), this.disabled && (t.disabled = !0), this.readOnly && (t.readOnly = !0), this.required && (t.required = !0), this.value && this.value === t.value ? (t.checked = !0, this.#e(t), e = !0) : t.checked = !1, t.addEventListener(
+        "change",
+        this.radioChangeHandler
+      ), t.addEventListener(
+        "invalid",
+        this.radioErrorHandler
+      );
+    if (this.value === void 0 && this.slottedRadioButtons?.length > 0) {
+      const t = this.slottedRadioButtons?.filter(
+        (o) => o.hasAttribute("checked")
+      );
+      if (t.length > 0 && !e) {
+        const o = t[t.length - 1];
+        o.checked = !0, this.#e(o);
+      } else
+        this.#e(this.slottedRadioButtons[0]);
+    }
+  }
+  /**
+   * @internal
+   */
+  focusInHandler(e) {
+    this.#e(e.target);
+  }
+  #e(e) {
+    e.setAttribute("tabindex", "0");
+    for (const t of this.slottedRadioButtons)
+      t !== e && t.setAttribute("tabindex", "-1");
+  }
+  checkFocusedRadio(e) {
+    e.readOnly || (e.checked = !0);
+  }
+}
+s([
+  r
+], a.prototype, "label");
+s([
+  r({ attribute: "required", mode: "boolean" })
+], a.prototype, "required");
+s([
+  r({ attribute: "readonly", mode: "boolean" })
+], a.prototype, "readOnly");
+s([
+  r({ attribute: "disabled", mode: "boolean" })
+], a.prototype, "disabled");
+s([
+  r
+], a.prototype, "name");
+s([
+  r
+], a.prototype, "value");
+s([
+  f
+], a.prototype, "errorValidationMessage");
+s([
+  r({ attribute: "error-text" })
+], a.prototype, "errorText");
+s([
+  r
+], a.prototype, "orientation");
+s([
+  f
+], a.prototype, "slottedRadioButtons");
+const H = (d) => h`
+		<template
+			@keydown="${(e, t) => e.keydownHandler(t.event)}"
+			@focusin="${(e, t) => e.focusInHandler(t.event)}"
+		>
+			<div class="base">
+				<fieldset
+					${C({
+  role: "radiogroup",
+  ariaDisabled: (e) => e.disabled,
+  ariaReadOnly: (e) => e.readOnly,
+  ariaOrientation: (e) => e.orientation
+})}
+					aria-labelledby="label"
+					aria-describedby="${(e) => e._feedbackDescribedBy}"
+					aria-invalid="${(e) => e.errorText ? "true" : "false"}"
+					class="control positioning-region ${(e) => e.orientation === g.horizontal ? "horizontal" : "vertical"}"
+				>
+					${w(
+  (e) => e.label,
+  h`<legend id="label">${(e) => e.label}</legend>`
+)}
+					<slot
+						${E({
+  property: "slottedRadioButtons",
+  filter: T(d.tagFor(m))
+})}
+						@slotchange="${(e) => e.handleSlotChange()}"
+					></slot>
+				</fieldset>
+				${(e) => e._getFeedbackTemplate(d)}
+			</div>
+		</template>
+	`, V = v(
+  "radio-group",
+  a,
+  H,
+  [y, k],
+  {
+    styles: $
+  }
+), I = b(V);
+I();

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 };