@vonage/vivid 5.2.0 → 5.3.0

package/radio-group/definition.cjs

@@ -308,6 +308,7 @@ __decorateClass([
 ], RadioGroup.prototype, "slottedRadioButtons");
 
 const RadioGroupTemplate = (context) => {
+  const radioTagName = context.tagFor(radio_definition.VwcRadioElement, true);
   return fastElement.html`
 		<template
 			@keydown="${(x, c) => x.keydownHandler(c.event)}"
@@ -333,7 +334,7 @@ const RadioGroupTemplate = (context) => {
 					<slot
 						${fastElement.slotted({
     property: "slottedRadioButtons",
-    filter: fastElement.elements(context.tagFor(radio_definition.VwcRadioElement))
+    filter: fastElement.elements(radioTagName)
   })}
 						@slotchange="${(x) => x.handleSlotChange()}"
 					></slot>

package/radio-group/definition.js

@@ -304,6 +304,7 @@ __decorateClass([
 ], RadioGroup.prototype, "slottedRadioButtons");
 
 const RadioGroupTemplate = (context) => {
+  const radioTagName = context.tagFor(Radio, true);
   return html`
 		<template
 			@keydown="${(x, c) => x.keydownHandler(c.event)}"
@@ -329,7 +330,7 @@ const RadioGroupTemplate = (context) => {
 					<slot
 						${slotted({
     property: "slottedRadioButtons",
-    filter: elements(context.tagFor(Radio))
+    filter: elements(radioTagName)
   })}
 						@slotchange="${(x) => x.handleSlotChange()}"
 					></slot>

package/radio-group/index.cjs

@@ -1,7 +1,7 @@
-"use strict";const r=require("../bundled/vivid-element.cjs"),c=require("../bundled/definition17.cjs"),f=require("../bundled/mixins.cjs"),n=require("../bundled/key-codes.cjs"),g=require("../bundled/aria.cjs"),p=require("../bundled/delegates-aria.cjs"),u=require("../bundled/slotted.cjs"),b=require("../bundled/when.cjs"),v=".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 y=Object.defineProperty,s=(d,e,t,i)=>{for(var o=void 0,l=d.length-1,h;l>=0;l--)(h=d[l])&&(o=h(e,t,o)||o);return o&&y(e,t,o),o};class a extends f.WithFeedback(r.VividElement){constructor(){super(...arguments),this.errorValidationMessage="",this.orientation=g.Orientation.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(i=>{i!==t&&(i.checked=!1)}),this.value=t.value,this.#e(t)),e.stopPropagation()},this.moveToRadioByIndex=(e,t)=>{const i=e[t];!this.isInsideToolbar&&!i.readOnly&&(i.checked=!0),i.focus()},this.moveRightOffGroup=()=>{this.nextElementSibling?.focus()},this.moveLeftOffGroup=()=>{this.previousElementSibling?.focus()},this.moveRight=e=>{const t=e.target,i=this.#t;let o=0;if(o=i.indexOf(t)+1,o===i.length&&this.isInsideToolbar&&e.key===n.keyArrowRight){this.moveRightOffGroup();return}o===i.length&&(o=0),this.moveToRadioByIndex(i,o)},this.moveLeft=e=>{const t=e.target,i=this.#t;let o=i.indexOf(t)-1;if(this.isInsideToolbar&&e.key===n.keyArrowLeft&&o<0){this.moveLeftOffGroup();return}o=o<0?i.length-1:o,this.moveToRadioByIndex(i,o)},this.keydownHandler=e=>{switch(e.key){case n.keyEnter:this.checkFocusedRadio(e.target);break;case n.keyArrowRight:case n.keyArrowDown:this.moveRight(e);break;case n.keyArrowLeft:case n.keyArrowUp:this.moveLeft(e);break;default:return!0}}}requiredChanged(){this.slottedRadioButtons?.forEach(e=>{this.required?e.required=!0:e.required=!1})}readOnlyChanged(){this.slottedRadioButtons?.forEach(e=>{this.readOnly?e.readOnly=!0:e.readOnly=!1})}disabledChanged(){this.slottedRadioButtons?.forEach(e=>{this.disabled?e.disabled=!0:e.disabled=!1})}nameChanged(){this.slottedRadioButtons?.forEach(e=>{e.setAttribute("name",this.name)})}valueChanged(){this.slottedRadioButtons?.forEach(e=>{e.value===this.value&&(e.checked=!0)}),this.$emit("change")}handleSlotChange(){this.errorText&&this.slottedRadioButtons?.forEach(e=>{e.errorText=this.errorText})}errorTextChanged(e,t){t?this.errorValidationMessage=t:this.errorValidationMessage=""}get#t(){return this.slottedRadioButtons?.filter(e=>!e.disabled)}slottedRadioButtonsChanged(){this.slottedRadioButtons&&this.slottedRadioButtons.length>0&&this.setupRadioButtons()}get isInsideToolbar(){return!!this.closest('[role="toolbar"]')}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(i=>i.hasAttribute("checked"));if(t.length>0&&!e){const i=t[t.length-1];i.checked=!0,this.#e(i)}else this.#e(this.slottedRadioButtons[0])}}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.attr],a.prototype,"label");s([r.attr({attribute:"required",mode:"boolean"})],a.prototype,"required");s([r.attr({attribute:"readonly",mode:"boolean"})],a.prototype,"readOnly");s([r.attr({attribute:"disabled",mode:"boolean"})],a.prototype,"disabled");s([r.attr],a.prototype,"name");s([r.attr],a.prototype,"value");s([r.observable],a.prototype,"errorValidationMessage");s([r.attr({attribute:"error-text"})],a.prototype,"errorText");s([r.attr],a.prototype,"orientation");s([r.observable],a.prototype,"slottedRadioButtons");const R=d=>r.html`
+"use strict";const r=require("../bundled/vivid-element.cjs"),c=require("../bundled/definition17.cjs"),f=require("../bundled/mixins.cjs"),n=require("../bundled/key-codes.cjs"),g=require("../bundled/aria.cjs"),p=require("../bundled/delegates-aria.cjs"),b=require("../bundled/when.cjs"),u=require("../bundled/slotted.cjs"),v=".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 y=Object.defineProperty,s=(d,t,e,i)=>{for(var o=void 0,l=d.length-1,h;l>=0;l--)(h=d[l])&&(o=h(t,e,o)||o);return o&&y(t,e,o),o};class a extends f.WithFeedback(r.VividElement){constructor(){super(...arguments),this.errorValidationMessage="",this.orientation=g.Orientation.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(i=>{i!==e&&(i.checked=!1)}),this.value=e.value,this.#e(e)),t.stopPropagation()},this.moveToRadioByIndex=(t,e)=>{const i=t[e];!this.isInsideToolbar&&!i.readOnly&&(i.checked=!0),i.focus()},this.moveRightOffGroup=()=>{this.nextElementSibling?.focus()},this.moveLeftOffGroup=()=>{this.previousElementSibling?.focus()},this.moveRight=t=>{const e=t.target,i=this.#t;let o=0;if(o=i.indexOf(e)+1,o===i.length&&this.isInsideToolbar&&t.key===n.keyArrowRight){this.moveRightOffGroup();return}o===i.length&&(o=0),this.moveToRadioByIndex(i,o)},this.moveLeft=t=>{const e=t.target,i=this.#t;let o=i.indexOf(e)-1;if(this.isInsideToolbar&&t.key===n.keyArrowLeft&&o<0){this.moveLeftOffGroup();return}o=o<0?i.length-1:o,this.moveToRadioByIndex(i,o)},this.keydownHandler=t=>{switch(t.key){case n.keyEnter:this.checkFocusedRadio(t.target);break;case n.keyArrowRight:case n.keyArrowDown:this.moveRight(t);break;case n.keyArrowLeft:case n.keyArrowUp:this.moveLeft(t);break;default:return!0}}}requiredChanged(){this.slottedRadioButtons?.forEach(t=>{this.required?t.required=!0:t.required=!1})}readOnlyChanged(){this.slottedRadioButtons?.forEach(t=>{this.readOnly?t.readOnly=!0:t.readOnly=!1})}disabledChanged(){this.slottedRadioButtons?.forEach(t=>{this.disabled?t.disabled=!0:t.disabled=!1})}nameChanged(){this.slottedRadioButtons?.forEach(t=>{t.setAttribute("name",this.name)})}valueChanged(){this.slottedRadioButtons?.forEach(t=>{t.value===this.value&&(t.checked=!0)}),this.$emit("change")}handleSlotChange(){this.errorText&&this.slottedRadioButtons?.forEach(t=>{t.errorText=this.errorText})}errorTextChanged(t,e){e?this.errorValidationMessage=e:this.errorValidationMessage=""}get#t(){return this.slottedRadioButtons?.filter(t=>!t.disabled)}slottedRadioButtonsChanged(){this.slottedRadioButtons&&this.slottedRadioButtons.length>0&&this.setupRadioButtons()}get isInsideToolbar(){return!!this.closest('[role="toolbar"]')}connectedCallback(){super.connectedCallback(),this.setupRadioButtons()}disconnectedCallback(){this.slottedRadioButtons?.forEach(t=>{t.removeEventListener("change",this.radioChangeHandler),t.removeEventListener("invalid",this.radioErrorHandler)})}setupRadioButtons(){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),e.addEventListener("invalid",this.radioErrorHandler);if(this.value===void 0&&this.slottedRadioButtons?.length>0){const e=this.slottedRadioButtons?.filter(i=>i.hasAttribute("checked"));if(e.length>0&&!t){const i=e[e.length-1];i.checked=!0,this.#e(i)}else this.#e(this.slottedRadioButtons[0])}}focusInHandler(t){this.#e(t.target)}#e(t){t.setAttribute("tabindex","0");for(const e of this.slottedRadioButtons)e!==t&&e.setAttribute("tabindex","-1")}checkFocusedRadio(t){t.readOnly||(t.checked=!0)}}s([r.attr],a.prototype,"label");s([r.attr({attribute:"required",mode:"boolean"})],a.prototype,"required");s([r.attr({attribute:"readonly",mode:"boolean"})],a.prototype,"readOnly");s([r.attr({attribute:"disabled",mode:"boolean"})],a.prototype,"disabled");s([r.attr],a.prototype,"name");s([r.attr],a.prototype,"value");s([r.observable],a.prototype,"errorValidationMessage");s([r.attr({attribute:"error-text"})],a.prototype,"errorText");s([r.attr],a.prototype,"orientation");s([r.observable],a.prototype,"slottedRadioButtons");const R=d=>{const t=d.tagFor(c.Radio,!0);return r.html`
 		<template
-			@keydown="${(e,t)=>e.keydownHandler(t.event)}"
-			@focusin="${(e,t)=>e.focusInHandler(t.event)}"
+			@keydown="${(e,i)=>e.keydownHandler(i.event)}"
+			@focusin="${(e,i)=>e.focusInHandler(i.event)}"
 		>
 			<div class="base">
 				<fieldset
@@ -13,11 +13,11 @@
 				>
 					${b.when(e=>e.label,r.html`<legend id="label">${e=>e.label}</legend>`)}
 					<slot
-						${u.slotted({property:"slottedRadioButtons",filter:u.elements(d.tagFor(c.Radio))})}
+						${u.slotted({property:"slottedRadioButtons",filter:u.elements(t)})}
 						@slotchange="${e=>e.handleSlotChange()}"
 					></slot>
 				</fieldset>
 				${e=>e._getFeedbackTemplate(d)}
 			</div>
 		</template>
-	`,m=r.defineVividComponent("radio-group",a,R,[c.radioDefinition,f.feedbackMessageDefinition],{styles:v}),k=r.createRegisterFunction(m);k();
+	`},m=r.defineVividComponent("radio-group",a,R,[c.radioDefinition,f.feedbackMessageDefinition],{styles:v}),k=r.createRegisterFunction(m);k();

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/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

@@ -991,7 +991,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

@@ -6,7 +6,7 @@ import { VwcTooltipElement as Tooltip, tooltipDefinition } from '../tooltip/defi
 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';
@@ -987,7 +987,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;
     });
   }