@vonage/vivid 5.1.0 → 5.3.0

package/pagination/index.cjs

@@ -1,10 +1,10 @@
-"use strict";const b=require("../bundled/definition3.cjs"),s=require("../bundled/vivid-element.cjs"),I=require("../bundled/localized.cjs"),l=require("../bundled/enums.cjs"),m=require("../bundled/slotted.cjs"),z=require("../bundled/class-names.cjs"),v=require("../bundled/ref.cjs"),y=require("../bundled/children.cjs"),w=require("../bundled/repeat.cjs"),g=require("../bundled/when.cjs"),S=".control{display:inline-flex;justify-content:space-between}.control:not(.shape-pill){border-radius:4px}.control.shape-pill{border-radius:16px}.buttons-wrapper{display:flex;column-gap:4px}.vwc-pagination-button[size=super-condensed]{--base-size: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.vwc-pagination-button[size=condensed]{--base-size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.vwc-pagination-button[size=normal]{--base-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.vwc-pagination-button::part(button){padding-inline:0}.dots{align-self:center;text-align:center}.dots:not(.size-super-condensed){font:var(--vvd-typography-base-bold)}.dots.size-super-condensed{font:var(--vvd-typography-base-condensed-bold);inline-size:calc(1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.dots.size-condensed{inline-size:calc(1px*(32 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.dots.size-normal{inline-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}";var B=Object.defineProperty,_=Object.getOwnPropertyDescriptor,r=(i,e,t,n)=>{for(var o=n>1?void 0:n?_(e,t):e,c=i.length-1,d;c>=0;c--)(d=i[c])&&(o=(n?d(e,t,o):d(o))||o);return n&&o&&B(e,t,o),o};const p=7,f={fromView:i=>parseInt(i,10),toView:i=>i.toString()};class a extends I.Localized(s.VividElement){constructor(){super(),this.navIcons=!1,this.total=0,this.selectedIndex=0,this.addEventListener("tabpressed",e=>{const{value:t,shiftKey:n}=e.detail,o=this.paginationButtons.findIndex($=>Number($.label)===t),c=n?-1:1,d=o+c;if(d<0)return this.prevButton.focus();if(d>this.paginationButtons.length-1)return this.nextButton.focus();this.paginationButtons&&this.paginationButtons[o+c].focus()})}get pagesList(){return new Array(this.total<p?this.total:p).fill(0).map((e,t,n)=>{if(t===0)return 1;if(t===n.length-1)return this.total;if(this.selectedIndex!==void 0&&this.total>p){if(this.selectedIndex<4&&t===p-2)return"...";if(this.selectedIndex>=4&&this.selectedIndex<=this.total-5){if(t>1&&t<p-2)return this.selectedIndex+(t-2);if(t===1||t===p-2)return"..."}if(this.selectedIndex>this.total-5){if(t>1)return this.total-(6-t);if(t===1)return"..."}}return t+1})}totalChanged(e,t){if(t<0){this.total=0;return}this.#t()}selectedIndexChanged(e,t){e!==void 0&&(this.$emit("pagination-change",{selectedIndex:t,total:this.total,oldIndex:e}),this.#t())}paginationButtonsChanged(e,t){t.forEach(n=>{n.shadowRoot.querySelector("button").setAttribute("part","button")})}get#e(){return Math.max(0,Math.min(this.selectedIndex??0,this.total-1))}#t(){this.selectedIndex!==this.#e&&window.queueMicrotask(()=>{this.selectedIndex!==this.#e&&(this.selectedIndex=this.#e)})}}r([s.attr],a.prototype,"size",2);r([s.attr],a.prototype,"shape",2);r([s.observable],a.prototype,"paginationButtons",2);r([s.observable],a.prototype,"prevButton",2);r([s.observable],a.prototype,"nextButton",2);r([s.attr({attribute:"nav-icons",mode:"boolean"})],a.prototype,"navIcons",2);r([s.volatile],a.prototype,"pagesList",1);r([s.attr({mode:"reflect",converter:f})],a.prototype,"total",2);r([s.attr({mode:"reflect",converter:f,attribute:"selected-index"})],a.prototype,"selectedIndex",2);const P=[l.Size.SuperCondensed,l.Size.Condensed,l.Size.Normal],L=[l.Shape.Rounded,l.Shape.Pill],x=(i,{parent:e})=>e.selectedIndex=Number(i)-1,E=(i,{event:e,parent:t})=>{(e.key===" "||e.key==="Enter")&&x(i,{parent:t}),e.key==="Tab"&&e.target.dispatchEvent(new CustomEvent("tabpressed",{detail:{value:i,shiftKey:e.shiftKey},bubbles:!0,composed:!0}))},q=i=>z.classNames("control");function C(i,{parent:e}){return e.selectedIndex===Number(i)-1?"filled":"ghost"}const D=i=>s.html` ${g.when(e=>e!=="...",s.html`
+"use strict";const h=require("../bundled/definition3.cjs"),s=require("../bundled/vivid-element.cjs"),m=require("../bundled/localized.cjs"),l=require("../bundled/enums.cjs"),g=require("../bundled/ref.cjs"),I=require("../bundled/children.cjs"),z=require("../bundled/repeat.cjs"),y=require("../bundled/slotted.cjs"),b=require("../bundled/when.cjs"),w=require("../bundled/class-names.cjs"),S=".control{display:inline-flex;justify-content:space-between}.control:not(.shape-pill){border-radius:4px}.control.shape-pill{border-radius:16px}.buttons-wrapper{display:flex;column-gap:4px}.vwc-pagination-button[size=super-condensed]{--base-size: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.vwc-pagination-button[size=condensed]{--base-size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.vwc-pagination-button[size=normal]{--base-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.vwc-pagination-button::part(button){padding-inline:0}.dots{align-self:center;text-align:center}.dots:not(.size-super-condensed){font:var(--vvd-typography-base-bold)}.dots.size-super-condensed{font:var(--vvd-typography-base-condensed-bold);inline-size:calc(1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.dots.size-condensed{inline-size:calc(1px*(32 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.dots.size-normal{inline-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}";var B=Object.defineProperty,_=Object.getOwnPropertyDescriptor,r=(i,e,t,o)=>{for(var n=o>1?void 0:o?_(e,t):e,c=i.length-1,d;c>=0;c--)(d=i[c])&&(n=(o?d(e,t,n):d(n))||n);return o&&n&&B(e,t,n),n};const p=7,f={fromView:i=>parseInt(i,10),toView:i=>i.toString()};class a extends m.Localized(s.VividElement){constructor(){super(),this.navIcons=!1,this.total=0,this.selectedIndex=0,this.addEventListener("tabpressed",e=>{const{value:t,shiftKey:o}=e.detail,n=this.paginationButtons.findIndex($=>Number($.label)===t),c=o?-1:1,d=n+c;if(d<0)return this.prevButton.focus();if(d>this.paginationButtons.length-1)return this.nextButton.focus();this.paginationButtons&&this.paginationButtons[n+c].focus()})}get pagesList(){return new Array(this.total<p?this.total:p).fill(0).map((e,t,o)=>{if(t===0)return 1;if(t===o.length-1)return this.total;if(this.selectedIndex!==void 0&&this.total>p){if(this.selectedIndex<4&&t===p-2)return"...";if(this.selectedIndex>=4&&this.selectedIndex<=this.total-5){if(t>1&&t<p-2)return this.selectedIndex+(t-2);if(t===1||t===p-2)return"..."}if(this.selectedIndex>this.total-5){if(t>1)return this.total-(6-t);if(t===1)return"..."}}return t+1})}totalChanged(e,t){if(t<0){this.total=0;return}this.#t()}selectedIndexChanged(e,t){e!==void 0&&(this.$emit("pagination-change",{selectedIndex:t,total:this.total,oldIndex:e}),this.#t())}paginationButtonsChanged(e,t){t.forEach(o=>{o.shadowRoot.querySelector("button").setAttribute("part","button")})}get#e(){return Math.max(0,Math.min(this.selectedIndex??0,this.total-1))}#t(){this.selectedIndex!==this.#e&&window.queueMicrotask(()=>{this.selectedIndex!==this.#e&&(this.selectedIndex=this.#e)})}}r([s.attr],a.prototype,"size",2);r([s.attr],a.prototype,"shape",2);r([s.observable],a.prototype,"paginationButtons",2);r([s.observable],a.prototype,"prevButton",2);r([s.observable],a.prototype,"nextButton",2);r([s.attr({attribute:"nav-icons",mode:"boolean"})],a.prototype,"navIcons",2);r([s.volatile],a.prototype,"pagesList",1);r([s.attr({mode:"reflect",converter:f})],a.prototype,"total",2);r([s.attr({mode:"reflect",converter:f,attribute:"selected-index"})],a.prototype,"selectedIndex",2);const P=[l.Size.SuperCondensed,l.Size.Condensed,l.Size.Normal],L=[l.Shape.Rounded,l.Shape.Pill],x=(i,{parent:e})=>e.selectedIndex=Number(i)-1,E=(i,{event:e,parent:t})=>{(e.key===" "||e.key==="Enter")&&x(i,{parent:t}),e.key==="Tab"&&e.target.dispatchEvent(new CustomEvent("tabpressed",{detail:{value:i,shiftKey:e.shiftKey},bubbles:!0,composed:!0}))},q=i=>w.classNames("control");function C(i,{parent:e}){return e.selectedIndex===Number(i)-1?"filled":"ghost"}const D=i=>s.html` ${b.when(e=>e!=="...",s.html`
 		<${i} class="vwc-pagination-button"
 			label="${e=>e}"
 			appearance="${C}"
 			size="${(e,{parent:t})=>u(t)}"
-			shape="${(e,{parent:t})=>h(t)}"
-			style="inline-size: ${e=>A(e)};"
+			shape="${(e,{parent:t})=>v(t)}"
+			style="inline-size: ${e=>N(e)};"
 			tabindex="0"
 			aria-label="${(e,{parent:t})=>t.locale.pagination.goToPageLabel(e)}"
 			aria-current="${(e,{parent:t})=>t.selectedIndex===Number(e)-1}"
@@ -12,32 +12,32 @@
 			@keydown="${E}">
 		</${i}>
 	`)}
-${g.when(e=>e==="...",s.html` <div
+${b.when(e=>e==="...",s.html` <div
 		class="dots size-${(e,{parent:t})=>u(t)}"
 		aria-hidden="true"
 	>
 		...
-	</div>`)}`,u=i=>!i.size||!P.includes(i.size)?l.Size.SuperCondensed:i.size,h=i=>!i.shape||!L.includes(i.shape)?l.Shape.Rounded:i.shape,A=i=>`calc(var(--base-size) + ${String(i).length-1}ch)`,N=i=>{const e=i.tagFor(b.Button),t=D(e);return s.html`
+	</div>`)}`,u=i=>!i.size||!P.includes(i.size)?l.Size.SuperCondensed:i.size,v=i=>!i.shape||!L.includes(i.shape)?l.Shape.Rounded:i.shape,N=i=>`calc(var(--base-size) + ${String(i).length-1}ch)`,A=i=>{const e=i.tagFor(h.Button),t=i.tagFor(h.Button,!0),o=D(e);return s.html`
 	<div class="${q}">
-		<${e} class="prev-button" ${v.ref("prevButton")}
+		<${e} class="prev-button" ${g.ref("prevButton")}
 			label="${n=>n.navIcons?null:"Previous"}"
 			icon="${n=>n.navIcons?"chevron-left-line":null}"
 			size="${u}"
-			shape="${h}"
+			shape="${v}"
 			?disabled="${n=>n.total===0||n.selectedIndex===0}"
 			@click="${n=>n.selectedIndex!==void 0&&n.selectedIndex--}"
 			aria-label="${n=>n.locale.pagination.previousPageLabel}"
 		></${e}>
-		<div id="buttons-wrapper" class="buttons-wrapper" ${y.children({property:"paginationButtons",filter:m.elements(e)})}>
-			${w.repeat(n=>n.pagesList,t,{positioning:!0})}
+		<div id="buttons-wrapper" class="buttons-wrapper" ${I.children({property:"paginationButtons",filter:y.elements(t)})}>
+			${z.repeat(n=>n.pagesList,o,{positioning:!0})}
 		</div>
-		<${e} class="next-button" ${v.ref("nextButton")}
+		<${e} class="next-button" ${g.ref("nextButton")}
 			label="${n=>n.navIcons?null:"Next"}"
 			icon="${n=>n.navIcons?"chevron-right-line":null}"
 			size="${u}"
-			shape="${h}"
+			shape="${v}"
 			?disabled="${n=>n.total===0||n.selectedIndex===n.total-1}"
 			@click="${n=>n.selectedIndex!==void 0&&n.selectedIndex++}"
 			aria-label="${n=>n.locale.pagination.nextPageLabel}"
 		></${e}>
-</div>`},O=s.defineVividComponent("pagination",a,N,[b.buttonDefinition],{styles:S}),R=s.createRegisterFunction(O);R();
+</div>`},O=s.defineVividComponent("pagination",a,A,[h.buttonDefinition],{styles:S}),R=s.createRegisterFunction(O);R();

package/pagination/index.js

@@ -1,42 +1,42 @@
-import { B as y, b as z } from "../bundled/definition3.js";
+import { B as b, b as z } from "../bundled/definition3.js";
 import { V as w, a as c, o as g, v as B, h as p, c as S, d as _ } from "../bundled/vivid-element.js";
 import { L as P } from "../bundled/localized.js";
 import { a as u, b as v } from "../bundled/enums.js";
-import { e as L } from "../bundled/slotted.js";
-import { c as C } from "../bundled/class-names.js";
-import { r as b } from "../bundled/ref.js";
-import { c as E } from "../bundled/children.js";
-import { r as D } from "../bundled/repeat.js";
-import { w as m } from "../bundled/when.js";
+import { r as m } from "../bundled/ref.js";
+import { c as L } from "../bundled/children.js";
+import { r as C } from "../bundled/repeat.js";
+import { e as E } from "../bundled/slotted.js";
+import { w as x } from "../bundled/when.js";
+import { c as D } from "../bundled/class-names.js";
 const A = ".control{display:inline-flex;justify-content:space-between}.control:not(.shape-pill){border-radius:4px}.control.shape-pill{border-radius:16px}.buttons-wrapper{display:flex;column-gap:4px}.vwc-pagination-button[size=super-condensed]{--base-size: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.vwc-pagination-button[size=condensed]{--base-size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.vwc-pagination-button[size=normal]{--base-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.vwc-pagination-button::part(button){padding-inline:0}.dots{align-self:center;text-align:center}.dots:not(.size-super-condensed){font:var(--vvd-typography-base-bold)}.dots.size-super-condensed{font:var(--vvd-typography-base-condensed-bold);inline-size:calc(1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.dots.size-condensed{inline-size:calc(1px*(32 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.dots.size-normal{inline-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}";
-var N = Object.defineProperty, O = Object.getOwnPropertyDescriptor, a = (s, e, t, n) => {
-  for (var i = n > 1 ? void 0 : n ? O(e, t) : e, r = s.length - 1, l; r >= 0; r--)
-    (l = s[r]) && (i = (n ? l(e, t, i) : l(i)) || i);
-  return n && i && N(e, t, i), i;
+var N = Object.defineProperty, O = Object.getOwnPropertyDescriptor, o = (s, e, t, i) => {
+  for (var n = i > 1 ? void 0 : i ? O(e, t) : e, r = s.length - 1, l; r >= 0; r--)
+    (l = s[r]) && (n = (i ? l(e, t, n) : l(n)) || n);
+  return i && n && N(e, t, n), n;
 };
-const d = 7, x = {
+const d = 7, $ = {
   fromView: (s) => parseInt(s, 10),
   toView: (s) => s.toString()
 };
-class o extends P(w) {
+class a extends P(w) {
   constructor() {
     super(), this.navIcons = !1, this.total = 0, this.selectedIndex = 0, this.addEventListener("tabpressed", (e) => {
-      const { value: t, shiftKey: n } = e.detail, i = this.paginationButtons.findIndex(
-        (I) => Number(I.label) === t
-      ), r = n ? -1 : 1, l = i + r;
+      const { value: t, shiftKey: i } = e.detail, n = this.paginationButtons.findIndex(
+        (y) => Number(y.label) === t
+      ), r = i ? -1 : 1, l = n + r;
       if (l < 0)
         return this.prevButton.focus();
       if (l > this.paginationButtons.length - 1)
         return this.nextButton.focus();
-      this.paginationButtons && this.paginationButtons[i + r].focus();
+      this.paginationButtons && this.paginationButtons[n + r].focus();
     });
   }
   get pagesList() {
     return new Array(
       this.total < d ? this.total : d
-    ).fill(0).map((e, t, n) => {
+    ).fill(0).map((e, t, i) => {
       if (t === 0) return 1;
-      if (t === n.length - 1) return this.total;
+      if (t === i.length - 1) return this.total;
       if (this.selectedIndex !== void 0 && this.total > d) {
         if (this.selectedIndex < 4 && t === d - 2)
           return "...";
@@ -68,8 +68,8 @@ class o extends P(w) {
     }), this.#t());
   }
   paginationButtonsChanged(e, t) {
-    t.forEach((n) => {
-      n.shadowRoot.querySelector("button").setAttribute("part", "button");
+    t.forEach((i) => {
+      i.shadowRoot.querySelector("button").setAttribute("part", "button");
     });
   }
   get #e() {
@@ -81,54 +81,54 @@ class o extends P(w) {
     });
   }
 }
-a([
+o([
   c
-], o.prototype, "size", 2);
-a([
+], a.prototype, "size", 2);
+o([
   c
-], o.prototype, "shape", 2);
-a([
+], a.prototype, "shape", 2);
+o([
   g
-], o.prototype, "paginationButtons", 2);
-a([
+], a.prototype, "paginationButtons", 2);
+o([
   g
-], o.prototype, "prevButton", 2);
-a([
+], a.prototype, "prevButton", 2);
+o([
   g
-], o.prototype, "nextButton", 2);
-a([
+], a.prototype, "nextButton", 2);
+o([
   c({ attribute: "nav-icons", mode: "boolean" })
-], o.prototype, "navIcons", 2);
-a([
+], a.prototype, "navIcons", 2);
+o([
   B
-], o.prototype, "pagesList", 1);
-a([
-  c({ mode: "reflect", converter: x })
-], o.prototype, "total", 2);
-a([
+], a.prototype, "pagesList", 1);
+o([
+  c({ mode: "reflect", converter: $ })
+], a.prototype, "total", 2);
+o([
   c({
     mode: "reflect",
-    converter: x,
+    converter: $,
     attribute: "selected-index"
   })
-], o.prototype, "selectedIndex", 2);
+], a.prototype, "selectedIndex", 2);
 const R = [
   u.SuperCondensed,
   u.Condensed,
   u.Normal
-], T = [v.Rounded, v.Pill], $ = (s, { parent: e }) => e.selectedIndex = Number(s) - 1, K = (s, { event: e, parent: t }) => {
-  (e.key === " " || e.key === "Enter") && $(s, { parent: t }), e.key === "Tab" && e.target.dispatchEvent(
+], T = [v.Rounded, v.Pill], I = (s, { parent: e }) => e.selectedIndex = Number(s) - 1, K = (s, { event: e, parent: t }) => {
+  (e.key === " " || e.key === "Enter") && I(s, { parent: t }), e.key === "Tab" && e.target.dispatchEvent(
     new CustomEvent("tabpressed", {
       detail: { value: s, shiftKey: e.shiftKey },
       bubbles: !0,
       composed: !0
     })
   );
-}, M = (s) => C("control");
+}, M = (s) => D("control");
 function V(s, { parent: e }) {
   return e.selectedIndex === Number(s) - 1 ? "filled" : "ghost";
 }
-const j = (s) => p` ${m(
+const j = (s) => p` ${x(
   (e) => e !== "...",
   p`
 		<${s} class="vwc-pagination-button"
@@ -140,12 +140,12 @@ const j = (s) => p` ${m(
 			tabindex="0"
 			aria-label="${(e, { parent: t }) => t.locale.pagination.goToPageLabel(e)}"
 			aria-current="${(e, { parent: t }) => t.selectedIndex === Number(e) - 1}"
-			@click="${$}"
+			@click="${I}"
 			@keydown="${K}">
 		</${s}>
 	`
 )}
-${m(
+${x(
   (e) => e === "...",
   p` <div
 		class="dots size-${(e, { parent: t }) => h(t)}"
@@ -153,11 +153,11 @@ ${m(
 	>
 		...
 	</div>`
-)}`, h = (s) => !s.size || !R.includes(s.size) ? u.SuperCondensed : s.size, f = (s) => !s.shape || !T.includes(s.shape) ? v.Rounded : s.shape, k = (s) => `calc(var(--base-size) + ${String(s).length - 1}ch)`, W = (s) => {
-  const e = s.tagFor(y), t = j(e);
+)}`, h = (s) => !s.size || !R.includes(s.size) ? u.SuperCondensed : s.size, f = (s) => !s.shape || !T.includes(s.shape) ? v.Rounded : s.shape, k = (s) => `calc(var(--base-size) + ${String(s).length - 1}ch)`, F = (s) => {
+  const e = s.tagFor(b), t = s.tagFor(b, !0), i = j(e);
   return p`
 	<div class="${M}">
-		<${e} class="prev-button" ${b("prevButton")}
+		<${e} class="prev-button" ${m("prevButton")}
 			label="${(n) => n.navIcons ? null : "Previous"}"
 			icon="${(n) => n.navIcons ? "chevron-left-line" : null}"
 			size="${h}"
@@ -166,13 +166,13 @@ ${m(
 			@click="${(n) => n.selectedIndex !== void 0 && n.selectedIndex--}"
 			aria-label="${(n) => n.locale.pagination.previousPageLabel}"
 		></${e}>
-		<div id="buttons-wrapper" class="buttons-wrapper" ${E({
+		<div id="buttons-wrapper" class="buttons-wrapper" ${L({
     property: "paginationButtons",
-    filter: L(e)
+    filter: E(t)
   })}>
-			${D((n) => n.pagesList, t, { positioning: !0 })}
+			${C((n) => n.pagesList, i, { positioning: !0 })}
 		</div>
-		<${e} class="next-button" ${b("nextButton")}
+		<${e} class="next-button" ${m("nextButton")}
 			label="${(n) => n.navIcons ? null : "Next"}"
 			icon="${(n) => n.navIcons ? "chevron-right-line" : null}"
 			size="${h}"
@@ -182,13 +182,13 @@ ${m(
 			aria-label="${(n) => n.locale.pagination.nextPageLabel}"
 		></${e}>
 </div>`;
-}, q = _(
+}, W = _(
   "pagination",
-  o,
-  W,
+  a,
+  F,
   [z],
   {
     styles: A
   }
-), F = S(q);
-F();
+), q = S(W);
+q();

package/progress/index.cjs

@@ -1,4 +1,4 @@
-"use strict";const a=require("../bundled/vivid-element.cjs"),d=require("../bundled/base-progress.cjs"),v=require("../bundled/delegates-aria.cjs"),m=require("../bundled/class-names.cjs"),p=require("../bundled/when.cjs"),u=".base{height:6px;align-items:center;margin:0;outline:none}.base:not(.connotation-pacific).connotation-cta{--_connotation-color-primary: var(--vvd-progress-cta-primary, var(--vvd-color-cta-500));--_connotation-color-soft: var(--vvd-progress-cta-soft, var(--vvd-color-cta-100))}.base:not(.connotation-pacific).connotation-alert{--_connotation-color-primary: var(--vvd-progress-alert-primary, var(--vvd-color-alert-500));--_connotation-color-soft: var(--vvd-progress-alert-soft, var(--vvd-color-alert-100))}.base:not(.connotation-pacific).connotation-success{--_connotation-color-primary: var(--vvd-progress-success-primary, var(--vvd-color-success-500));--_connotation-color-soft: var(--vvd-progress-success-soft, var(--vvd-color-success-100))}.base:not(.connotation-pacific):not(.connotation-cta,.connotation-alert,.connotation-success){--_connotation-color-primary: var(--vvd-progress-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-soft: var(--vvd-progress-accent-soft, var(--vvd-color-neutral-100))}.base:not(.connotation-pacific){--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base.connotation-pacific{--_connotation-color-primary: linear-gradient(to right, var(--vvd-color-information-200), var(--vvd-color-cta-600))}.progress{position:relative;display:flex;overflow:hidden;align-items:center;block-size:100%;inline-size:100%}.base:not(.connotation-pacific) .progress{background-color:var(--_appearance-color-fill)}.base.connotation-pacific .progress{background-color:var(--vvd-color-neutral-100)}.base:not(.shape-sharp) .progress{border-radius:4px}.indeterminate{display:flex;border-radius:inherit;background-color:var(--_connotation-color-primary);block-size:100%;inline-size:100%}.determinate{border-radius:inherit;background-color:var(--_connotation-color-primary);block-size:100%;transition:all .2s ease-in-out}.connotation-pacific .determinate{background-image:var(--_connotation-color-primary)}.reverse .determinate{position:absolute;right:0}.paused .determinate{background:var(--vvd-color-neutral-300)}.indicator-1{animation:indeterminate-1 2s infinite;inline-size:30%}.indicator-2{animation:indeterminate-2 2s infinite;inline-size:60%}.indicator-1,.indicator-2{position:absolute;animation-timing-function:cubic-bezier(.4,0,.6,1);background-color:var(--vvd-color-neutral-100);block-size:100%;opacity:0}.connotation-pacific .indicator-1,.connotation-pacific .indicator-2{background-image:var(--_connotation-color-primary)}.paused .indicator-1,.paused .indicator-2{animation-play-state:paused;background-color:var(--_connotation-color-primary)}.reverse .indicator-1,.reverse .indicator-2{animation-direction:reverse}@keyframes indeterminate-1{0%{opacity:1;transform:translate(-100%)}70%{opacity:1;transform:translate(300%)}70.01%{opacity:0}to{opacity:0;transform:translate(300%)}}@keyframes indeterminate-2{0%{opacity:0;transform:translate(-150%)}29.99%{opacity:0}30%{opacity:1;transform:translate(-150%)}to{opacity:1;transform:translate(166.66%)}}";var f=Object.defineProperty,s=(o,n,t,c)=>{for(var r=void 0,i=o.length-1,l;i>=0;i--)(l=o[i])&&(r=l(n,t,r)||r);return r&&f(n,t,r),r};class e extends v.DelegatesAria(d.BaseProgress){constructor(){super(...arguments),this.reverse=!1}}s([a.attr()],e.prototype,"shape");s([a.attr()],e.prototype,"connotation");s([a.attr({mode:"boolean"})],e.prototype,"reverse");const g=({connotation:o,shape:n,reverse:t,paused:c})=>m.classNames("base",[`connotation-${o}`,!!o],[`shape-${n}`,!!n],["reverse",!!t],["paused",!!c]);function b(){return a.html` <span
+"use strict";const a=require("../bundled/vivid-element.cjs"),d=require("../bundled/base-progress.cjs"),v=require("../bundled/delegates-aria.cjs"),p=require("../bundled/when.cjs"),m=require("../bundled/class-names.cjs"),u=".base{height:6px;align-items:center;margin:0;outline:none}.base:not(.connotation-pacific).connotation-cta{--_connotation-color-primary: var(--vvd-progress-cta-primary, var(--vvd-color-cta-500));--_connotation-color-soft: var(--vvd-progress-cta-soft, var(--vvd-color-cta-100))}.base:not(.connotation-pacific).connotation-alert{--_connotation-color-primary: var(--vvd-progress-alert-primary, var(--vvd-color-alert-500));--_connotation-color-soft: var(--vvd-progress-alert-soft, var(--vvd-color-alert-100))}.base:not(.connotation-pacific).connotation-success{--_connotation-color-primary: var(--vvd-progress-success-primary, var(--vvd-color-success-500));--_connotation-color-soft: var(--vvd-progress-success-soft, var(--vvd-color-success-100))}.base:not(.connotation-pacific):not(.connotation-cta,.connotation-alert,.connotation-success){--_connotation-color-primary: var(--vvd-progress-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-soft: var(--vvd-progress-accent-soft, var(--vvd-color-neutral-100))}.base:not(.connotation-pacific){--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base.connotation-pacific{--_connotation-color-primary: linear-gradient(to right, var(--vvd-color-information-200), var(--vvd-color-cta-600))}.progress{position:relative;display:flex;overflow:hidden;align-items:center;block-size:100%;inline-size:100%}.base:not(.connotation-pacific) .progress{background-color:var(--_appearance-color-fill)}.base.connotation-pacific .progress{background-color:var(--vvd-color-neutral-100)}.base:not(.shape-sharp) .progress{border-radius:4px}.indeterminate{display:flex;border-radius:inherit;background-color:var(--_connotation-color-primary);block-size:100%;inline-size:100%}.determinate{border-radius:inherit;background-color:var(--_connotation-color-primary);block-size:100%;transition:all .2s ease-in-out}.connotation-pacific .determinate{background-image:var(--_connotation-color-primary)}.reverse .determinate{position:absolute;right:0}.paused .determinate{background:var(--vvd-color-neutral-300)}.indicator-1{animation:indeterminate-1 2s infinite;inline-size:30%}.indicator-2{animation:indeterminate-2 2s infinite;inline-size:60%}.indicator-1,.indicator-2{position:absolute;animation-timing-function:cubic-bezier(.4,0,.6,1);background-color:var(--vvd-color-neutral-100);block-size:100%;opacity:0}.connotation-pacific .indicator-1,.connotation-pacific .indicator-2{background-image:var(--_connotation-color-primary)}.paused .indicator-1,.paused .indicator-2{animation-play-state:paused;background-color:var(--_connotation-color-primary)}.reverse .indicator-1,.reverse .indicator-2{animation-direction:reverse}@keyframes indeterminate-1{0%{opacity:1;transform:translate(-100%)}70%{opacity:1;transform:translate(300%)}70.01%{opacity:0}to{opacity:0;transform:translate(300%)}}@keyframes indeterminate-2{0%{opacity:0;transform:translate(-150%)}29.99%{opacity:0}30%{opacity:1;transform:translate(-150%)}to{opacity:1;transform:translate(166.66%)}}";var f=Object.defineProperty,s=(o,n,t,c)=>{for(var r=void 0,i=o.length-1,l;i>=0;i--)(l=o[i])&&(r=l(n,t,r)||r);return r&&f(n,t,r),r};class e extends v.DelegatesAria(d.BaseProgress){constructor(){super(...arguments),this.reverse=!1}}s([a.attr()],e.prototype,"shape");s([a.attr()],e.prototype,"connotation");s([a.attr({mode:"boolean"})],e.prototype,"reverse");const g=({connotation:o,shape:n,reverse:t,paused:c})=>m.classNames("base",[`connotation-${o}`,!!o],[`shape-${n}`,!!n],["reverse",!!t],["paused",!!c]);function b(){return a.html` <span
 		class="determinate"
 		style="width: ${o=>o.percentComplete}%"
 	></span>`}function y(){return a.html` <span class="indeterminate" name="indeterminate">

package/progress/index.js

@@ -1,8 +1,8 @@
 import { a as i, h as s, c as d, d as m } from "../bundled/vivid-element.js";
 import { B as f } from "../bundled/base-progress.js";
 import { D as u, d as g } from "../bundled/delegates-aria.js";
-import { c as b } from "../bundled/class-names.js";
 import { w as v } from "../bundled/when.js";
+import { c as b } from "../bundled/class-names.js";
 const y = ".base{height:6px;align-items:center;margin:0;outline:none}.base:not(.connotation-pacific).connotation-cta{--_connotation-color-primary: var(--vvd-progress-cta-primary, var(--vvd-color-cta-500));--_connotation-color-soft: var(--vvd-progress-cta-soft, var(--vvd-color-cta-100))}.base:not(.connotation-pacific).connotation-alert{--_connotation-color-primary: var(--vvd-progress-alert-primary, var(--vvd-color-alert-500));--_connotation-color-soft: var(--vvd-progress-alert-soft, var(--vvd-color-alert-100))}.base:not(.connotation-pacific).connotation-success{--_connotation-color-primary: var(--vvd-progress-success-primary, var(--vvd-color-success-500));--_connotation-color-soft: var(--vvd-progress-success-soft, var(--vvd-color-success-100))}.base:not(.connotation-pacific):not(.connotation-cta,.connotation-alert,.connotation-success){--_connotation-color-primary: var(--vvd-progress-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-soft: var(--vvd-progress-accent-soft, var(--vvd-color-neutral-100))}.base:not(.connotation-pacific){--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base.connotation-pacific{--_connotation-color-primary: linear-gradient(to right, var(--vvd-color-information-200), var(--vvd-color-cta-600))}.progress{position:relative;display:flex;overflow:hidden;align-items:center;block-size:100%;inline-size:100%}.base:not(.connotation-pacific) .progress{background-color:var(--_appearance-color-fill)}.base.connotation-pacific .progress{background-color:var(--vvd-color-neutral-100)}.base:not(.shape-sharp) .progress{border-radius:4px}.indeterminate{display:flex;border-radius:inherit;background-color:var(--_connotation-color-primary);block-size:100%;inline-size:100%}.determinate{border-radius:inherit;background-color:var(--_connotation-color-primary);block-size:100%;transition:all .2s ease-in-out}.connotation-pacific .determinate{background-image:var(--_connotation-color-primary)}.reverse .determinate{position:absolute;right:0}.paused .determinate{background:var(--vvd-color-neutral-300)}.indicator-1{animation:indeterminate-1 2s infinite;inline-size:30%}.indicator-2{animation:indeterminate-2 2s infinite;inline-size:60%}.indicator-1,.indicator-2{position:absolute;animation-timing-function:cubic-bezier(.4,0,.6,1);background-color:var(--vvd-color-neutral-100);block-size:100%;opacity:0}.connotation-pacific .indicator-1,.connotation-pacific .indicator-2{background-image:var(--_connotation-color-primary)}.paused .indicator-1,.paused .indicator-2{animation-play-state:paused;background-color:var(--_connotation-color-primary)}.reverse .indicator-1,.reverse .indicator-2{animation-direction:reverse}@keyframes indeterminate-1{0%{opacity:1;transform:translate(-100%)}70%{opacity:1;transform:translate(300%)}70.01%{opacity:0}to{opacity:0;transform:translate(300%)}}@keyframes indeterminate-2{0%{opacity:0;transform:translate(-150%)}29.99%{opacity:0}30%{opacity:1;transform:translate(-150%)}to{opacity:1;transform:translate(166.66%)}}";
 var _ = Object.defineProperty, c = (o, r, n, l) => {
   for (var a = void 0, e = o.length - 1, p; e >= 0; e--)

package/radio/definition.cjs

@@ -106,14 +106,14 @@ class Radio extends withErrorText.WithErrorText(
   nameChanged(previous, next) {
     super.nameChanged(previous, next);
     next !== null ? this.proxy.setAttribute("name", this.name) : this.proxy.removeAttribute("name");
-    fastElement.DOM.queueUpdate(this.validate);
+    fastElement.Updates.enqueue(this.validate);
   }
   /**
    * @internal
    */
   connectedCallback() {
     super.connectedCallback();
-    fastElement.DOM.queueUpdate(this.validate);
+    fastElement.Updates.enqueue(this.validate);
     if (this.parentElement.getAttribute("data-vvd-component") !== "radio-group" && this.getAttribute("tabindex") === null) {
       if (!this.disabled) {
         this.setAttribute("tabindex", "0");
@@ -195,18 +195,18 @@ const getClasses = ({ connotation, checked, readOnly, disabled }) => fastWebUtil
   ["disabled", Boolean(disabled)]
 );
 const RadioTemplate = fastElement.html`<template
-	aria-checked="${(x) => x.checked}"
-	aria-disabled="${(x) => x.disabled}"
-	aria-required="${(x) => x.required}"
-	@keypress="${(x, c) => x.keypressHandler(c.event)}"
-	@click="${(x, c) => x.clickHandler(c.event)}"
+	aria-checked="${(x) => x?.checked}"
+	aria-disabled="${(x) => x?.disabled}"
+	aria-required="${(x) => x?.required}"
+	@keypress="${(x, c) => x?.keypressHandler(c.event)}"
+	@click="${(x, c) => x?.clickHandler(c.event)}"
 	role="radio"
 >
 	<div class="${getClasses}">
 		<div class="control"></div>
 		${fastElement.when(
-  (x) => x.label,
-  fastElement.html`<label class="label">${(x) => x.label}</label>`
+  (x) => x?.label,
+  fastElement.html`<label class="label">${(x) => x?.label}</label>`
 )}
 	</div>
 </template>`;

package/radio/definition.js

@@ -1,5 +1,5 @@
 import { V as VividElement, d as defineVividComponent, c as createRegisterFunction } from '../unbundled/vivid-element.js';
-import { DOM, attr, observable, when, html } from '@microsoft/fast-element';
+import { Updates, attr, observable, when, html } from '@microsoft/fast-element';
 import { keySpace, classNames } from '@microsoft/fast-web-utilities';
 import { C as CheckableFormAssociated } from '../unbundled/form-associated.js';
 import { W as WithErrorText } from '../unbundled/with-error-text.js';
@@ -102,14 +102,14 @@ class Radio extends WithErrorText(
   nameChanged(previous, next) {
     super.nameChanged(previous, next);
     next !== null ? this.proxy.setAttribute("name", this.name) : this.proxy.removeAttribute("name");
-    DOM.queueUpdate(this.validate);
+    Updates.enqueue(this.validate);
   }
   /**
    * @internal
    */
   connectedCallback() {
     super.connectedCallback();
-    DOM.queueUpdate(this.validate);
+    Updates.enqueue(this.validate);
     if (this.parentElement.getAttribute("data-vvd-component") !== "radio-group" && this.getAttribute("tabindex") === null) {
       if (!this.disabled) {
         this.setAttribute("tabindex", "0");
@@ -191,18 +191,18 @@ const getClasses = ({ connotation, checked, readOnly, disabled }) => classNames(
   ["disabled", Boolean(disabled)]
 );
 const RadioTemplate = html`<template
-	aria-checked="${(x) => x.checked}"
-	aria-disabled="${(x) => x.disabled}"
-	aria-required="${(x) => x.required}"
-	@keypress="${(x, c) => x.keypressHandler(c.event)}"
-	@click="${(x, c) => x.clickHandler(c.event)}"
+	aria-checked="${(x) => x?.checked}"
+	aria-disabled="${(x) => x?.disabled}"
+	aria-required="${(x) => x?.required}"
+	@keypress="${(x, c) => x?.keypressHandler(c.event)}"
+	@click="${(x, c) => x?.clickHandler(c.event)}"
 	role="radio"
 >
 	<div class="${getClasses}">
 		<div class="control"></div>
 		${when(
-  (x) => x.label,
-  html`<label class="label">${(x) => x.label}</label>`
+  (x) => x?.label,
+  html`<label class="label">${(x) => x?.label}</label>`
 )}
 	</div>
 </template>`;

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();