@vonage/vivid 5.2.0 → 5.4.0

package/radio-group/index.js

@@ -4,60 +4,60 @@ 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";
+import { w as E } from "../bundled/when.js";
+import { s as T, e as w } from "../bundled/slotted.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) => {
+var A = Object.defineProperty, s = (d, t, e, 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;
+    (l = d[n]) && (i = l(t, e, i) || i);
+  return i && A(t, e, 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];
+    g.horizontal, this.slottedRadioButtons = [], this.radioErrorHandler = (t) => {
+      const e = t.target;
+      this.errorValidationMessage = e.errorValidationMessage || "";
+    }, this.radioChangeHandler = (t) => {
+      const e = t.target;
+      e.checked && (this.slottedRadioButtons?.forEach((o) => {
+        o !== e && (o.checked = !1);
+      }), this.value = e.value, this.#e(e)), t.stopPropagation();
+    }, this.moveToRadioByIndex = (t, e) => {
+      const o = t[e];
       !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;
+    }, this.moveRight = (t) => {
+      const e = t.target, o = this.#t;
       let i = 0;
-      if (i = o.indexOf(t) + 1, i === o.length && this.isInsideToolbar && e.key === u) {
+      if (i = o.indexOf(e) + 1, i === o.length && this.isInsideToolbar && t.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.moveLeft = (t) => {
+      const e = t.target, o = this.#t;
+      let i = o.indexOf(e) - 1;
+      if (this.isInsideToolbar && t.key === c && i < 0) {
         this.moveLeftOffGroup();
         return;
       }
       i = i < 0 ? o.length - 1 : i, this.moveToRadioByIndex(o, i);
-    }, this.keydownHandler = (e) => {
-      switch (e.key) {
+    }, this.keydownHandler = (t) => {
+      switch (t.key) {
         case O:
-          this.checkFocusedRadio(e.target);
+          this.checkFocusedRadio(t.target);
           break;
         case u:
         case x:
-          this.moveRight(e);
+          this.moveRight(t);
           break;
         case c:
         case B:
-          this.moveLeft(e);
+          this.moveLeft(t);
           break;
         default:
           return !0;
@@ -68,55 +68,55 @@ class a extends R(p) {
    * @internal
    */
   requiredChanged() {
-    this.slottedRadioButtons?.forEach((e) => {
-      this.required ? e.required = !0 : e.required = !1;
+    this.slottedRadioButtons?.forEach((t) => {
+      this.required ? t.required = !0 : t.required = !1;
     });
   }
   /**
    * @internal
    */
   readOnlyChanged() {
-    this.slottedRadioButtons?.forEach((e) => {
-      this.readOnly ? e.readOnly = !0 : e.readOnly = !1;
+    this.slottedRadioButtons?.forEach((t) => {
+      this.readOnly ? t.readOnly = !0 : t.readOnly = !1;
     });
   }
   /**
    * @internal
    */
   disabledChanged() {
-    this.slottedRadioButtons?.forEach((e) => {
-      this.disabled ? e.disabled = !0 : e.disabled = !1;
+    this.slottedRadioButtons?.forEach((t) => {
+      this.disabled ? t.disabled = !0 : t.disabled = !1;
     });
   }
   nameChanged() {
-    this.slottedRadioButtons?.forEach((e) => {
-      e.setAttribute("name", this.name);
+    this.slottedRadioButtons?.forEach((t) => {
+      t.setAttribute("name", this.name);
     });
   }
   /**
    * @internal
    */
   valueChanged() {
-    this.slottedRadioButtons?.forEach((e) => {
-      e.value === this.value && (e.checked = !0);
+    this.slottedRadioButtons?.forEach((t) => {
+      t.value === this.value && (t.checked = !0);
     }), this.$emit("change");
   }
   /**
    * @internal
    */
   handleSlotChange() {
-    this.errorText && this.slottedRadioButtons?.forEach((e) => {
-      e.errorText = this.errorText;
+    this.errorText && this.slottedRadioButtons?.forEach((t) => {
+      t.errorText = this.errorText;
     });
   }
   /**
    * @internal
    */
-  errorTextChanged(e, t) {
-    t ? this.errorValidationMessage = t : this.errorValidationMessage = "";
+  errorTextChanged(t, e) {
+    e ? this.errorValidationMessage = e : this.errorValidationMessage = "";
   }
   get #t() {
-    return this.slottedRadioButtons?.filter((e) => !e.disabled);
+    return this.slottedRadioButtons?.filter((t) => !t.disabled);
   }
   /**
    * @internal
@@ -134,32 +134,32 @@ class a extends R(p) {
     super.connectedCallback(), this.setupRadioButtons();
   }
   disconnectedCallback() {
-    this.slottedRadioButtons?.forEach((e) => {
-      e.removeEventListener(
+    this.slottedRadioButtons?.forEach((t) => {
+      t.removeEventListener(
         "change",
         this.radioChangeHandler
-      ), e.removeEventListener(
+      ), t.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(
+    let t = !1;
+    for (const e of this.slottedRadioButtons)
+      this.name !== void 0 && e.setAttribute("name", this.name), this.disabled && (e.disabled = !0), this.readOnly && (e.readOnly = !0), this.required && (e.required = !0), this.value && this.value === e.value ? (e.checked = !0, this.#e(e), t = !0) : e.checked = !1, e.addEventListener(
         "change",
         this.radioChangeHandler
-      ), t.addEventListener(
+      ), e.addEventListener(
         "invalid",
         this.radioErrorHandler
       );
     if (this.value === void 0 && this.slottedRadioButtons?.length > 0) {
-      const t = this.slottedRadioButtons?.filter(
+      const e = this.slottedRadioButtons?.filter(
         (o) => o.hasAttribute("checked")
       );
-      if (t.length > 0 && !e) {
-        const o = t[t.length - 1];
+      if (e.length > 0 && !t) {
+        const o = e[e.length - 1];
         o.checked = !0, this.#e(o);
       } else
         this.#e(this.slottedRadioButtons[0]);
@@ -168,16 +168,16 @@ class a extends R(p) {
   /**
    * @internal
    */
-  focusInHandler(e) {
-    this.#e(e.target);
+  focusInHandler(t) {
+    this.#e(t.target);
   }
-  #e(e) {
-    e.setAttribute("tabindex", "0");
-    for (const t of this.slottedRadioButtons)
-      t !== e && t.setAttribute("tabindex", "-1");
+  #e(t) {
+    t.setAttribute("tabindex", "0");
+    for (const e of this.slottedRadioButtons)
+      e !== t && e.setAttribute("tabindex", "-1");
   }
-  checkFocusedRadio(e) {
-    e.readOnly || (e.checked = !0);
+  checkFocusedRadio(t) {
+    t.readOnly || (t.checked = !0);
   }
 }
 s([
@@ -210,40 +210,43 @@ s([
 s([
   f
 ], a.prototype, "slottedRadioButtons");
-const H = (d) => h`
+const H = (d) => {
+  const t = d.tagFor(m, !0);
+  return h`
 		<template
-			@keydown="${(e, t) => e.keydownHandler(t.event)}"
-			@focusin="${(e, t) => e.focusInHandler(t.event)}"
+			@keydown="${(e, o) => e.keydownHandler(o.event)}"
+			@focusin="${(e, o) => e.focusInHandler(o.event)}"
 		>
 			<div class="base">
 				<fieldset
 					${C({
-  role: "radiogroup",
-  ariaDisabled: (e) => e.disabled,
-  ariaReadOnly: (e) => e.readOnly,
-  ariaOrientation: (e) => e.orientation
-})}
+    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>`
-)}
+					${E(
+    (e) => e.label,
+    h`<legend id="label">${(e) => e.label}</legend>`
+  )}
 					<slot
-						${E({
-  property: "slottedRadioButtons",
-  filter: T(d.tagFor(m))
-})}
+						${T({
+    property: "slottedRadioButtons",
+    filter: w(t)
+  })}
 						@slotchange="${(e) => e.handleSlotChange()}"
 					></slot>
 				</fieldset>
 				${(e) => e._getFeedbackTemplate(d)}
 			</div>
 		</template>
-	`, V = v(
+	`;
+}, V = v(
   "radio-group",
   a,
   H,

package/range-slider/definition.cjs

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const popup_definition = require('../unbundled/definition4.cjs');
+const popup_definition = require('../unbundled/definition5.cjs');
 const vividElement = require('../unbundled/vivid-element.cjs');
 const fastElement = require('@microsoft/fast-element');
 const fastWebUtilities = require('@microsoft/fast-web-utilities');

package/range-slider/definition.js

@@ -1,4 +1,4 @@
-import { P as Popup, a as PlacementStrategy, p as popupDefinition } from '../unbundled/definition4.js';
+import { P as Popup, a as PlacementStrategy, p as popupDefinition } from '../unbundled/definition5.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';

package/range-slider/index.cjs

@@ -1,4 +1,4 @@
-"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
+"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"),m=require("../bundled/ref.cjs"),b=require("../bundled/when.cjs"),_=require("../bundled/class-names.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}">

package/range-slider/index.js

@@ -7,9 +7,9 @@ import { L as R } from "../bundled/localized.js";
 import { F as O } from "../bundled/form-element.js";
 import { O as h } from "../bundled/aria.js";
 import { l as M } from "../bundled/numbers.js";
-import { c as _ } from "../bundled/class-names.js";
 import { r as m } from "../bundled/ref.js";
 import { w as b } from "../bundled/when.js";
+import { c as _ } from "../bundled/class-names.js";
 const B = ':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 I = Object.defineProperty, r = (l, e, t, a) => {
   for (var s = void 0, o = l.length - 1, p; o >= 0; o--)

package/rich-text-editor/definition.cjs

@@ -5,7 +5,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const vividElement = require('../unbundled/vivid-element.cjs');
 const button_definition = require('../unbundled/definition.cjs');
 const divider_definition = require('../divider/definition.cjs');
-const option_definition = require('../option/definition.cjs');
+const option_definition = require('../unbundled/definition3.cjs');
 const tooltip_definition = require('../tooltip/definition.cjs');
 const menu_definition = require('../menu/definition.cjs');
 const menuItem_definition = require('../unbundled/definition2.cjs');
@@ -13,7 +13,6 @@ const select_definition = require('../select/definition.cjs');
 const fastElement = require('@microsoft/fast-element');
 const fastWebUtilities = require('@microsoft/fast-web-utilities');
 const divider = require('../unbundled/divider.cjs');
-const option = require('../unbundled/option.cjs');
 const localized = require('../unbundled/localized.cjs');
 const prosemirrorState = require('prosemirror-state');
 const prosemirrorModel = require('prosemirror-model');
@@ -122,7 +121,7 @@ const MENU_BAR_ITEMS = {
     },
     render: function(context) {
       const selectTag = context.tagFor(select_definition.VwcSelectElement);
-      const optionTag = context.tagFor(option.ListboxOption);
+      const optionTag = context.tagFor(option_definition.ListboxOption);
       const tooltipTag = context.tagFor(tooltip_definition.VwcTooltipElement);
       return fastElement.html`
 		<${tooltipTag} text="${(_, { parent }) => parent.locale.richTextEditor.textBlockType}" placement="top">
@@ -991,7 +990,7 @@ class RichTextEditor extends localized.Localized(vividElement.VividElement) {
     );
   }
   scrollToAttachments(additionalPixels = 0) {
-    fastElement.DOM.queueUpdate(() => {
+    fastElement.Updates.enqueue(() => {
       this.#editorWrapperElement.scrollTop = this.#editableAreaElement.getBoundingClientRect().height - this.#editorWrapperElement.getBoundingClientRect().height + additionalPixels;
     });
   }

package/rich-text-editor/definition.js

@@ -1,15 +1,14 @@
 import { V as VividElement, d as defineVividComponent, c as createRegisterFunction } from '../unbundled/vivid-element.js';
 import { B as Button, b as buttonDefinition } from '../unbundled/definition.js';
 import { dividerDefinition } from '../divider/definition.js';
-import { listboxOptionDefinition } from '../option/definition.js';
+import { L as ListboxOption, l as listboxOptionDefinition } from '../unbundled/definition3.js';
 import { VwcTooltipElement as Tooltip, tooltipDefinition } from '../tooltip/definition.js';
 import { VwcMenuElement as Menu, menuDefinition } from '../menu/definition.js';
 import { M as MenuItem, m as menuItemDefinition } from '../unbundled/definition2.js';
 import { VwcSelectElement as Select, selectDefinition } from '../select/definition.js';
-import { html, repeat, attr, DOM, nullableNumberConverter, when } from '@microsoft/fast-element';
+import { html, repeat, attr, Updates, nullableNumberConverter, when } from '@microsoft/fast-element';
 import { classNames } from '@microsoft/fast-web-utilities';
 import { D as Divider } from '../unbundled/divider.js';
-import { L as ListboxOption } from '../unbundled/option.js';
 import { L as Localized } from '../unbundled/localized.js';
 import { EditorState, PluginKey, TextSelection, Plugin } from 'prosemirror-state';
 import { Schema, DOMParser } from 'prosemirror-model';
@@ -987,7 +986,7 @@ class RichTextEditor extends Localized(VividElement) {
     );
   }
   scrollToAttachments(additionalPixels = 0) {
-    DOM.queueUpdate(() => {
+    Updates.enqueue(() => {
       this.#editorWrapperElement.scrollTop = this.#editableAreaElement.getBoundingClientRect().height - this.#editorWrapperElement.getBoundingClientRect().height + additionalPixels;
     });
   }