@vonage/vivid 5.5.0 → 5.7.0

package/bundled/vivid-element.js

@@ -1,17 +1,17 @@
-let I;
+let F;
 const ft = "fast-kernel";
 try {
   if (document.currentScript)
-    I = document.currentScript.getAttribute(ft);
+    F = document.currentScript.getAttribute(ft);
   else {
     const i = document.getElementsByTagName("script");
-    I = i[i.length - 1].getAttribute(ft);
+    F = i[i.length - 1].getAttribute(ft);
   }
 } catch {
-  I = "isolate";
+  F = "isolate";
 }
 let N;
-switch (I) {
+switch (F) {
   case "share":
     N = Object.freeze({
       updateQueue: 1,
@@ -38,31 +38,12 @@ switch (I) {
     });
     break;
 }
-const O = (i) => typeof i == "function", B = (i) => typeof i == "string", pe = () => {
+const E = (i) => typeof i == "function", B = (i) => typeof i == "string", pe = () => {
 };
 var tt = typeof globalThis < "u" ? globalThis : typeof window < "u" ? window : typeof global < "u" ? global : typeof self < "u" ? self : {};
-function di(i) {
+function ci(i) {
   return i && i.__esModule && Object.prototype.hasOwnProperty.call(i, "default") ? i.default : i;
 }
-function hi(i) {
-  if (i.__esModule) return i;
-  var t = i.default;
-  if (typeof t == "function") {
-    var e = function s() {
-      return this instanceof s ? Reflect.construct(t, arguments, this.constructor) : t.apply(this, arguments);
-    };
-    e.prototype = t.prototype;
-  } else e = {};
-  return Object.defineProperty(e, "__esModule", { value: !0 }), Object.keys(i).forEach(function(s) {
-    var n = Object.getOwnPropertyDescriptor(i, s);
-    Object.defineProperty(e, s, n.get ? n : {
-      enumerable: !0,
-      get: function() {
-        return i[s];
-      }
-    });
-  }), e;
-}
 (function() {
   if (!(typeof globalThis < "u"))
     if (typeof tt < "u")
@@ -76,21 +57,34 @@ function hi(i) {
       t.globalThis = t;
     }
 })();
-const Dt = {
+(function() {
+  "requestIdleCallback" in globalThis || (globalThis.requestIdleCallback = function(e, s) {
+    const n = Date.now();
+    return setTimeout(() => {
+      e({
+        didTimeout: s?.timeout ? Date.now() - n >= s.timeout : !1,
+        timeRemaining: () => 0
+      });
+    }, 1);
+  }, globalThis.cancelIdleCallback = function(e) {
+    clearTimeout(e);
+  });
+})();
+const Ht = {
   configurable: !1,
   enumerable: !1,
   writable: !1
 };
-globalThis.FAST === void 0 && Reflect.defineProperty(globalThis, "FAST", Object.assign({ value: /* @__PURE__ */ Object.create(null) }, Dt));
-const y = globalThis.FAST;
-if (y.getById === void 0) {
+globalThis.FAST === void 0 && Reflect.defineProperty(globalThis, "FAST", Object.assign({ value: /* @__PURE__ */ Object.create(null) }, Ht));
+const v = globalThis.FAST;
+if (v.getById === void 0) {
   const i = /* @__PURE__ */ Object.create(null);
-  Reflect.defineProperty(y, "getById", Object.assign({ value(t, e) {
+  Reflect.defineProperty(v, "getById", Object.assign({ value(t, e) {
     let s = i[t];
     return s === void 0 && (s = e ? i[t] = e() : null), s;
-  } }, Dt));
+  } }, Ht));
 }
-y.error === void 0 && Object.assign(y, {
+v.error === void 0 && Object.assign(v, {
   warn() {
   },
   error(i) {
@@ -99,7 +93,7 @@ y.error === void 0 && Object.assign(y, {
   addMessages() {
   }
 });
-const ui = Object.freeze([]);
+const di = Object.freeze([]);
 function Pt() {
   const i = /* @__PURE__ */ new Map();
   return Object.freeze({
@@ -131,7 +125,7 @@ function zt() {
 function x(i) {
   i.prototype.toJSON = pe;
 }
-const g = Object.freeze({
+const y = Object.freeze({
   /**
    * Not aspected.
    */
@@ -161,7 +155,7 @@ const g = Object.freeze({
    */
   event: 6
 }), pt = (i) => i, be = globalThis.trustedTypes ? globalThis.trustedTypes.createPolicy("fast-html", { createHTML: pt }) : { createHTML: pt };
-let H = Object.freeze({
+let D = Object.freeze({
   createHTML(i) {
     return be.createHTML(i);
   },
@@ -169,12 +163,12 @@ let H = Object.freeze({
     return s;
   }
 });
-const ge = H, T = Object.freeze({
+const ge = D, T = Object.freeze({
   /**
    * Gets the dom policy used by the templating system.
    */
   get policy() {
-    return H;
+    return D;
   },
   /**
    * Sets the dom policy used by the templating system.
@@ -184,12 +178,12 @@ const ge = H, T = Object.freeze({
    * called by the application developer at the start of their program.
    */
   setPolicy(i) {
-    if (H !== ge)
-      throw y.error(
+    if (D !== ge)
+      throw v.error(
         1201
         /* Message.onlySetDOMPolicyOnce */
       );
-    H = i;
+    D = i;
   },
   /**
    * Sets an attribute value on an element.
@@ -214,7 +208,7 @@ const ge = H, T = Object.freeze({
   setBooleanAttribute(i, t, e) {
     e ? i.setAttribute(t, "") : i.removeAttribute(t);
   }
-}), Ut = y.getById(N.updateQueue, () => {
+}), Ut = v.getById(N.updateQueue, () => {
   const i = [], t = [], e = globalThis.requestAnimationFrame;
   let s = !0;
   function n() {
@@ -231,23 +225,23 @@ const ge = H, T = Object.freeze({
         throw i.length = 0, l;
     }
   }
-  function a() {
+  function o() {
     let l = 0;
     for (; l < i.length; )
       if (r(i[l]), l++, l > 1024) {
-        for (let o = 0, h = i.length - l; o < h; o++)
-          i[o] = i[o + l];
+        for (let a = 0, h = i.length - l; a < h; a++)
+          i[a] = i[a + l];
         i.length -= l, l = 0;
       }
     i.length = 0;
   }
   function c(d) {
-    i.push(d), i.length < 2 && (s ? e(a) : a());
+    i.push(d), i.length < 2 && (s ? e(o) : o());
   }
   return Object.freeze({
     enqueue: c,
     next: () => new Promise(c),
-    process: a,
+    process: o,
     setMode: (d) => s = d
   });
 });
@@ -315,7 +309,7 @@ class rt {
         e[n].handleChange(s, t);
   }
 }
-class Wt {
+class qt {
   /**
    * Creates an instance of PropertyChangeNotifier for the specified subject.
    * @param subject - The object that subscribers will receive notifications for.
@@ -361,65 +355,65 @@ const J = Object.freeze({
    * They can/will be GC'd together.
    */
   coupled: 1
-}), b = y.getById(N.observable, () => {
+}), g = v.getById(N.observable, () => {
   const i = Ut.enqueue, t = /(:|&&|\|\||if|\?\.)/, e = /* @__PURE__ */ new WeakMap();
   let s, n = (l) => {
-    throw y.error(
+    throw v.error(
       1101
       /* Message.needsArrayObservation */
     );
   };
   function r(l) {
-    var o;
-    let h = (o = l.$fastController) !== null && o !== void 0 ? o : e.get(l);
-    return h === void 0 && (Array.isArray(l) ? h = n(l) : e.set(l, h = new Wt(l))), h;
+    var a;
+    let h = (a = l.$fastController) !== null && a !== void 0 ? a : e.get(l);
+    return h === void 0 && (Array.isArray(l) ? h = n(l) : e.set(l, h = new qt(l))), h;
   }
-  const a = zt();
+  const o = zt();
   class c {
-    constructor(o) {
-      this.name = o, this.field = `_${o}`, this.callback = `${o}Changed`;
-    }
-    getValue(o) {
-      return s !== void 0 && s.watch(o, this.name), o[this.field];
-    }
-    setValue(o, h) {
-      const u = this.field, p = o[u];
-      if (p !== h) {
-        o[u] = h;
-        const $ = o[this.callback];
-        O($) && $.call(o, p, h), r(o).notify(this.name);
+    constructor(a) {
+      this.name = a, this.field = `_${a}`, this.callback = `${a}Changed`;
+    }
+    getValue(a) {
+      return s !== void 0 && s.watch(a, this.name), a[this.field];
+    }
+    setValue(a, h) {
+      const u = this.field, b = a[u];
+      if (b !== h) {
+        a[u] = h;
+        const k = a[this.callback];
+        E(k) && k.call(a, b, h), r(a).notify(this.name);
       }
     }
   }
   class d extends rt {
-    constructor(o, h, u = !1) {
-      super(o, h), this.expression = o, this.isVolatileBinding = u, this.needsRefresh = !0, this.needsQueue = !0, this.isAsync = !0, this.first = this, this.last = null, this.propertySource = void 0, this.propertyName = void 0, this.notifier = void 0, this.next = void 0;
+    constructor(a, h, u = !1) {
+      super(a, h), this.expression = a, this.isVolatileBinding = u, this.needsRefresh = !0, this.needsQueue = !0, this.isAsync = !0, this.first = this, this.last = null, this.propertySource = void 0, this.propertyName = void 0, this.notifier = void 0, this.next = void 0;
     }
-    setMode(o) {
-      this.isAsync = this.needsQueue = o;
+    setMode(a) {
+      this.isAsync = this.needsQueue = a;
     }
-    bind(o) {
-      this.controller = o;
-      const h = this.observe(o.source, o.context);
-      return !o.isBound && this.requiresUnbind(o) && o.onUnbind(this), h;
+    bind(a) {
+      this.controller = a;
+      const h = this.observe(a.source, a.context);
+      return !a.isBound && this.requiresUnbind(a) && a.onUnbind(this), h;
     }
-    requiresUnbind(o) {
-      return o.sourceLifetime !== J.coupled || this.first !== this.last || this.first.propertySource !== o.source;
+    requiresUnbind(a) {
+      return a.sourceLifetime !== J.coupled || this.first !== this.last || this.first.propertySource !== a.source;
     }
-    unbind(o) {
+    unbind(a) {
       this.dispose();
     }
-    observe(o, h) {
+    observe(a, h) {
       this.needsRefresh && this.last !== null && this.dispose();
       const u = s;
       s = this.needsRefresh ? this : void 0, this.needsRefresh = this.isVolatileBinding;
-      let p;
+      let b;
       try {
-        p = this.expression(o, h);
+        b = this.expression(a, h);
       } finally {
         s = u;
       }
-      return p;
+      return b;
     }
     // backwards compat with v1 kernel
     disconnect() {
@@ -427,22 +421,22 @@ const J = Object.freeze({
     }
     dispose() {
       if (this.last !== null) {
-        let o = this.first;
-        for (; o !== void 0; )
-          o.notifier.unsubscribe(this, o.propertyName), o = o.next;
+        let a = this.first;
+        for (; a !== void 0; )
+          a.notifier.unsubscribe(this, a.propertyName), a = a.next;
         this.last = null, this.needsRefresh = this.needsQueue = this.isAsync;
       }
     }
-    watch(o, h) {
-      const u = this.last, p = r(o), $ = u === null ? this.first : {};
-      if ($.propertySource = o, $.propertyName = h, $.notifier = p, p.subscribe(this, h), u !== null) {
+    watch(a, h) {
+      const u = this.last, b = r(a), k = u === null ? this.first : {};
+      if (k.propertySource = a, k.propertyName = h, k.notifier = b, b.subscribe(this, h), u !== null) {
         if (!this.needsRefresh) {
           let ut;
-          s = void 0, ut = u.propertySource[u.propertyName], s = this, o === ut && (this.needsRefresh = !0);
+          s = void 0, ut = u.propertySource[u.propertyName], s = this, a === ut && (this.needsRefresh = !0);
         }
-        u.next = $;
+        u.next = k;
       }
-      this.last = $;
+      this.last = k;
     }
     handleChange() {
       this.needsQueue ? (this.needsQueue = !1, i(this)) : this.isAsync || this.call();
@@ -451,9 +445,9 @@ const J = Object.freeze({
       this.last !== null && (this.needsQueue = this.isAsync, this.notify(this));
     }
     *records() {
-      let o = this.first;
-      for (; o !== void 0; )
-        yield o, o = o.next;
+      let a = this.first;
+      for (; a !== void 0; )
+        yield a, a = a.next;
     }
   }
   return x(d), Object.freeze({
@@ -474,8 +468,8 @@ const J = Object.freeze({
      * @param source - The object to record the change against.
      * @param propertyName - The property to track as changed.
      */
-    track(l, o) {
-      s && s.watch(l, o);
+    track(l, a) {
+      s && s.watch(l, a);
     },
     /**
      * Notifies watchers that the currently executing property getter or function is volatile
@@ -489,8 +483,8 @@ const J = Object.freeze({
      * @param source - the object to notify of changes.
      * @param args - The change args to pass to subscribers.
      */
-    notify(l, o) {
-      r(l).notify(o);
+    notify(l, a) {
+      r(l).notify(a);
     },
     /**
      * Defines an observable property on an object or prototype.
@@ -498,14 +492,14 @@ const J = Object.freeze({
      * @param nameOrAccessor - The name of the property to define as observable;
      * or a custom accessor that specifies the property name and accessor implementation.
      */
-    defineProperty(l, o) {
-      B(o) && (o = new c(o)), a(l).push(o), Reflect.defineProperty(l, o.name, {
+    defineProperty(l, a) {
+      B(a) && (a = new c(a)), o(l).push(a), Reflect.defineProperty(l, a.name, {
         enumerable: !0,
         get() {
-          return o.getValue(this);
+          return a.getValue(this);
         },
         set(h) {
-          o.setValue(this, h);
+          a.setValue(this, h);
         }
       });
     },
@@ -514,7 +508,7 @@ const J = Object.freeze({
      * including its prototype chain.
      * @param target - The target object to search for accessor on.
      */
-    getAccessors: a,
+    getAccessors: o,
     /**
      * Creates a {@link ExpressionNotifier} that can watch the
      * provided {@link Expression} for changes.
@@ -522,8 +516,8 @@ const J = Object.freeze({
      * @param initialSubscriber - An initial subscriber to changes in the binding value.
      * @param isVolatileBinding - Indicates whether the binding's dependency list must be re-evaluated on every value evaluation.
      */
-    binding(l, o, h = this.isVolatileBinding(l)) {
-      return new d(l, o, h);
+    binding(l, a, h = this.isVolatileBinding(l)) {
+      return new d(l, a, h);
     },
     /**
      * Determines whether a binding expression is volatile and needs to have its dependency list re-evaluated
@@ -535,17 +529,17 @@ const J = Object.freeze({
     }
   });
 });
-function fi(i, t) {
-  b.defineProperty(i, t);
+function hi(i, t) {
+  g.defineProperty(i, t);
 }
-function pi(i, t, e) {
+function ui(i, t, e) {
   return Object.assign({}, e, {
     get() {
-      return b.trackVolatile(), e.get.apply(this);
+      return g.trackVolatile(), e.get.apply(this);
     }
   });
 }
-const bt = y.getById(N.contextEvent, () => {
+const bt = v.getById(N.contextEvent, () => {
   let i = null;
   return {
     get() {
@@ -555,7 +549,7 @@ const bt = y.getById(N.contextEvent, () => {
       i = t;
     }
   };
-}), E = Object.freeze({
+}), O = Object.freeze({
   /**
    * A default execution context.
    */
@@ -563,7 +557,7 @@ const bt = y.getById(N.contextEvent, () => {
     index: 0,
     length: 0,
     get event() {
-      return E.getEvent();
+      return O.getEvent();
     },
     eventDetail() {
       return this.event.detail;
@@ -600,10 +594,10 @@ class lt {
 }
 class ye extends lt {
   createObserver(t) {
-    return b.binding(this.evaluate, t, this.isVolatile);
+    return g.binding(this.evaluate, t, this.isVolatile);
   }
 }
-function qt(i, t, e = b.isVolatileBinding(i)) {
+function Wt(i, t, e = g.isVolatileBinding(i)) {
   return new ye(i, t, e);
 }
 class Qt extends lt {
@@ -680,7 +674,7 @@ class m {
 }
 m.supportsAdoptedStyleSheets = Array.isArray(document.adoptedStyleSheets) && "replace" in CSSStyleSheet.prototype;
 const yt = /fe-b\$\$start\$\$(\d+)\$\$(.+)\$\$fe-b/, vt = /fe-b\$\$end\$\$(\d+)\$\$(.+)\$\$fe-b/, mt = /fe-repeat\$\$start\$\$(\d+)\$\$fe-repeat/, wt = /fe-repeat\$\$end\$\$(\d+)\$\$fe-repeat/, St = /^(?:.{0,1000})fe-eb\$\$start\$\$(.+?)\$\$fe-eb/, Ct = /fe-eb\$\$end\$\$(.{0,1000})\$\$fe-eb(?:.{0,1000})$/;
-function $t(i) {
+function kt(i) {
   return i && i.nodeType === Node.COMMENT_NODE;
 }
 const w = Object.freeze({
@@ -711,10 +705,10 @@ const w = Object.freeze({
     return wt.test(i);
   },
   isElementBoundaryStartMarker(i) {
-    return $t(i) && St.test(i.data.trim());
+    return kt(i) && St.test(i.data.trim());
   },
   isElementBoundaryEndMarker(i) {
-    return $t(i) && Ct.test(i.data);
+    return kt(i) && Ct.test(i.data);
   },
   /**
    * Returns the indexes of the ViewBehaviorFactories affecting
@@ -765,17 +759,17 @@ const w = Object.freeze({
    * Parses element Id from element boundary markers
    */
   parseElementBoundaryStartMarker(i) {
-    return kt(St, i.trim());
+    return $t(St, i.trim());
   },
   parseElementBoundaryEndMarker(i) {
-    return kt(Ct, i);
+    return $t(Ct, i);
   }
 });
 function Tt(i, t) {
   const e = i.exec(t);
   return e === null ? e : parseInt(e[1]);
 }
-function kt(i, t) {
+function $t(i, t) {
   const e = i.exec(t);
   return e === null ? e : e[1];
 }
@@ -787,7 +781,7 @@ const z = Symbol.for("fe-hydration");
 function U(i) {
   return i[z] === z;
 }
-const ct = `fast-${Math.random().toString(36).substring(2, 8)}`, D = `${ct}{`, _ = `}${ct}`, ve = _.length;
+const ct = `fast-${Math.random().toString(36).substring(2, 8)}`, H = `${ct}{`, R = `}${ct}`, ve = R.length;
 let me = 0;
 const L = () => `${ct}-${++me}`, Kt = Object.freeze({
   /**
@@ -797,7 +791,7 @@ const L = () => `${ct}-${++me}`, Kt = Object.freeze({
    * @remarks
    * Used internally by binding directives.
    */
-  interpolation: (i) => `${D}${i}${_}`,
+  interpolation: (i) => `${H}${i}${R}`,
   /**
    * Creates a placeholder that manifests itself as an attribute on an
    * element.
@@ -806,14 +800,14 @@ const L = () => `${ct}-${++me}`, Kt = Object.freeze({
    * @remarks
    * Used internally by attribute directives such as `ref`, `slotted`, and `children`.
    */
-  attribute: (i) => `${L()}="${D}${i}${_}"`,
+  attribute: (i) => `${L()}="${H}${i}${R}"`,
   /**
    * Creates a placeholder that manifests itself as a marker within the DOM structure.
    * @param index - The directive index to create the placeholder for.
    * @remarks
    * Used internally by structural directives such as `repeat`.
    */
-  comment: (i) => `<!--${D}${i}${_}-->`
+  comment: (i) => `<!--${H}${i}${R}-->`
 }), K = Object.freeze({
   /**
    * Parses text content or HTML attribute content, separating out the static strings
@@ -824,24 +818,24 @@ const L = () => `${ct}-${++me}`, Kt = Object.freeze({
    * directives or null if no directives are found in the string.
    */
   parse(i, t) {
-    const e = i.split(D);
+    const e = i.split(H);
     if (e.length === 1)
       return null;
     const s = [];
     for (let n = 0, r = e.length; n < r; ++n) {
-      const a = e[n], c = a.indexOf(_);
+      const o = e[n], c = o.indexOf(R);
       let d;
       if (c === -1)
-        d = a;
+        d = o;
       else {
-        const l = a.substring(0, c);
-        s.push(t[l]), d = a.substring(c + ve);
+        const l = o.substring(0, c);
+        s.push(t[l]), d = o.substring(c + ve);
       }
       d !== "" && s.push(d);
     }
     return s;
   }
-}), et = Pt(), k = Object.freeze({
+}), et = Pt(), $ = Object.freeze({
   /**
    * Gets the directive definition associated with the instance.
    * @param instance - The directive instance to retrieve the definition for.
@@ -869,21 +863,21 @@ const L = () => `${ct}-${++me}`, Kt = Object.freeze({
    */
   assignAspect(i, t) {
     if (!t) {
-      i.aspectType = g.content;
+      i.aspectType = y.content;
       return;
     }
     switch (i.sourceAspect = t, t[0]) {
       case ":":
-        i.targetAspect = t.substring(1), i.aspectType = i.targetAspect === "classList" ? g.tokenList : g.property;
+        i.targetAspect = t.substring(1), i.aspectType = i.targetAspect === "classList" ? y.tokenList : y.property;
         break;
       case "?":
-        i.targetAspect = t.substring(1), i.aspectType = g.booleanAttribute;
+        i.targetAspect = t.substring(1), i.aspectType = y.booleanAttribute;
         break;
       case "@":
-        i.targetAspect = t.substring(1), i.aspectType = g.event;
+        i.targetAspect = t.substring(1), i.aspectType = y.event;
         break;
       default:
-        i.targetAspect = t, i.aspectType = g.attribute;
+        i.targetAspect = t, i.aspectType = y.attribute;
         break;
     }
   }
@@ -937,73 +931,73 @@ function Ce(i, t, e) {
     acceptNode(l) {
       return s.comparePoint(l, 0) === 0 ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_REJECT;
     }
-  }), a = {}, c = {};
+  }), o = {}, c = {};
   let d = r.currentNode = i;
   for (; d !== null; ) {
     switch (d.nodeType) {
       case Node.ELEMENT_NODE: {
-        $e(d, e, a);
+        ke(d, e, o);
         break;
       }
       case Node.COMMENT_NODE: {
-        Te(d, r, e, a, c);
+        Te(d, r, e, o, c);
         break;
       }
     }
     d = r.nextNode();
   }
-  return s.detach(), { targets: a, boundaries: c };
+  return s.detach(), { targets: o, boundaries: c };
 }
-function $e(i, t, e) {
+function ke(i, t, e) {
   var s;
   const n = (s = w.parseAttributeBinding(i)) !== null && s !== void 0 ? s : w.parseEnumeratedAttributeBinding(i);
   if (n !== null) {
     for (const r of n) {
       if (!t[r])
         throw new Xt(`HydrationView was unable to successfully target factory on ${i.nodeName} inside ${i.getRootNode().host.nodeName}. This likely indicates a template mismatch between SSR rendering and hydration.`, t, i);
-      W(t[r], i, e);
+      q(t[r], i, e);
     }
     i.removeAttribute(w.attributeMarkerName);
   }
 }
 function Te(i, t, e, s, n) {
   if (w.isElementBoundaryStartMarker(i)) {
-    ke(i, t);
+    $e(i, t);
     return;
   }
   if (w.isContentBindingStartMarker(i.data)) {
     const r = w.parseContentBindingStartMarker(i.data);
     if (r === null)
       return;
-    const [a, c] = r, d = e[a], l = [];
-    let o = t.nextSibling();
+    const [o, c] = r, d = e[o], l = [];
+    let a = t.nextSibling();
     i.data = "";
-    const h = o;
-    for (; o !== null; ) {
-      if (dt(o)) {
-        const u = w.parseContentBindingEndMarker(o.data);
+    const h = a;
+    for (; a !== null; ) {
+      if (dt(a)) {
+        const u = w.parseContentBindingEndMarker(a.data);
         if (u && u[1] === c)
           break;
       }
-      l.push(o), o = t.nextSibling();
+      l.push(a), a = t.nextSibling();
     }
-    if (o === null) {
+    if (a === null) {
       const u = i.getRootNode();
       throw new Error(`Error hydrating Comment node inside "${Se(u) ? u.host.nodeName : u.nodeName}".`);
     }
-    if (o.data = "", l.length === 1 && Yt(l[0]))
-      W(d, l[0], s);
+    if (a.data = "", l.length === 1 && Yt(l[0]))
+      q(d, l[0], s);
     else {
-      o !== h && o.previousSibling !== null && (n[d.targetNodeId] = {
+      a !== h && a.previousSibling !== null && (n[d.targetNodeId] = {
         first: h,
-        last: o.previousSibling
+        last: a.previousSibling
       });
-      const u = o.parentNode.insertBefore(document.createTextNode(""), o);
-      W(d, u, s);
+      const u = a.parentNode.insertBefore(document.createTextNode(""), a);
+      q(d, u, s);
     }
   }
 }
-function ke(i, t) {
+function $e(i, t) {
   const e = w.parseElementBoundaryStartMarker(i.data);
   let s = t.nextSibling();
   for (; s !== null; ) {
@@ -1015,13 +1009,13 @@ function ke(i, t) {
     s = t.nextSibling();
   }
 }
-function W(i, t, e) {
+function q(i, t, e) {
   if (i.targetNodeId === void 0)
     throw new Error("Factory could not be target to the node");
   e[i.targetNodeId] = t;
 }
 var te;
-function ot(i, t) {
+function at(i, t) {
   const e = i.parentNode;
   let s = i, n;
   for (; s !== t; ) {
@@ -1039,7 +1033,7 @@ class ee {
    * The current event within an event handler.
    */
   get event() {
-    return E.getEvent();
+    return O.getEvent();
   }
   /**
    * Indicates whether the current item within a repeat context
@@ -1139,7 +1133,7 @@ class X extends ee {
    * Once a view has been disposed, it cannot be inserted or bound again.
    */
   dispose() {
-    ot(this.firstChild, this.lastChild), this.unbind();
+    at(this.firstChild, this.lastChild), this.unbind();
   }
   onUnbind(t) {
     this.unbindables.push(t);
@@ -1156,7 +1150,7 @@ class X extends ee {
     if (s === null) {
       this.source = t, this.context = e, this.behaviors = s = new Array(this.factories.length);
       const n = this.factories;
-      for (let r = 0, a = n.length; r < a; ++r) {
+      for (let r = 0, o = n.length; r < o; ++r) {
         const c = n[r].createBehavior();
         c.bind(this), s[r] = c;
       }
@@ -1185,15 +1179,15 @@ class X extends ee {
    */
   static disposeContiguousBatch(t) {
     if (t.length !== 0) {
-      ot(t[0].firstChild, t[t.length - 1].lastChild);
+      at(t[0].firstChild, t[t.length - 1].lastChild);
       for (let e = 0, s = t.length; e < s; ++e)
         t[e].unbind();
     }
   }
 }
 x(X);
-b.defineProperty(X.prototype, "index");
-b.defineProperty(X.prototype, "length");
+g.defineProperty(X.prototype, "index");
+g.defineProperty(X.prototype, "length");
 const A = {
   unhydrated: "unhydrated",
   hydrating: "hydrating",
@@ -1262,41 +1256,41 @@ class Be extends ee {
     if (n === null) {
       this.source = t, this.context = e;
       try {
-        const { targets: a, boundaries: c } = Ce(this.firstChild, this.lastChild, this.factories);
-        this._targets = a, this._bindingViewBoundaries = c;
-      } catch (a) {
-        if (a instanceof Xt) {
+        const { targets: o, boundaries: c } = Ce(this.firstChild, this.lastChild, this.factories);
+        this._targets = o, this._bindingViewBoundaries = c;
+      } catch (o) {
+        if (o instanceof Xt) {
           let c = this.sourceTemplate.html;
-          typeof c != "string" && (c = c.innerHTML), a.templateString = c;
+          typeof c != "string" && (c = c.innerHTML), o.templateString = c;
         }
-        throw a;
+        throw o;
       }
       this.behaviors = n = new Array(this.factories.length);
       const r = this.factories;
-      for (let a = 0, c = r.length; a < c; ++a) {
-        const d = r[a];
-        if (d.targetNodeId === "h" && this.hostBindingTarget && W(d, this.hostBindingTarget, this._targets), d.targetNodeId in this.targets) {
+      for (let o = 0, c = r.length; o < c; ++o) {
+        const d = r[o];
+        if (d.targetNodeId === "h" && this.hostBindingTarget && q(d, this.hostBindingTarget, this._targets), d.targetNodeId in this.targets) {
           const l = d.createBehavior();
-          l.bind(this), n[a] = l;
+          l.bind(this), n[o] = l;
         } else {
           let l = this.sourceTemplate.html;
           typeof l != "string" && (l = l.innerHTML);
-          const o = ((s = this.firstChild) === null || s === void 0 ? void 0 : s.getRootNode()).host, h = o?.nodeName || "unknown", u = d, p = [
+          const a = ((s = this.firstChild) === null || s === void 0 ? void 0 : s.getRootNode()).host, h = a?.nodeName || "unknown", u = d, b = [
             `HydrationView was unable to successfully target bindings inside "<${h.toLowerCase()}>".`,
             `
 Mismatch Details:`,
             `  - Expected target node ID: "${d.targetNodeId}"`,
             `  - Available target IDs: [${Object.keys(this.targets).join(", ") || "none"}]`
           ];
-          throw d.targetTagName && p.push(`  - Expected tag name: "${d.targetTagName}"`), u.sourceAspect && p.push(`  - Source aspect: "${u.sourceAspect}"`), u.aspectType !== void 0 && p.push(`  - Aspect type: ${u.aspectType}`), p.push(`
+          throw d.targetTagName && b.push(`  - Expected tag name: "${d.targetTagName}"`), u.sourceAspect && b.push(`  - Source aspect: "${u.sourceAspect}"`), u.aspectType !== void 0 && b.push(`  - Aspect type: ${u.aspectType}`), b.push(`
 This usually means:`, "  1. The server-rendered HTML doesn't match the client template", "  2. The hydration markers are missing or corrupted", "  3. The DOM structure was modified before hydration", `
-Template: ${l.slice(0, 200)}${l.length > 200 ? "..." : ""}`), new Ne(p.join(`
+Template: ${l.slice(0, 200)}${l.length > 200 ? "..." : ""}`), new Ne(b.join(`
 `), d, Zt(this.firstChild, this.lastChild).cloneContents(), l);
         }
       }
     } else {
       this.source !== null && this.evaluateUnbindables(), this.isBound = !1, this.source = t, this.context = e;
-      for (let r = 0, a = n.length; r < a; ++r)
+      for (let r = 0, o = n.length; r < o; ++r)
         n[r].bind(this);
     }
     this.isBound = !0, this._hydrationStage = A.hydrated;
@@ -1309,7 +1303,7 @@ Template: ${l.slice(0, 200)}${l.length > 200 ? "..." : ""}`), new Ne(p.join(`
    * Once a view has been disposed, it cannot be inserted or bound again.
    */
   dispose() {
-    ot(this.firstChild, this.lastChild), this.unbind();
+    at(this.firstChild, this.lastChild), this.unbind();
   }
   onUnbind(t) {
     this.unbindables.push(t);
@@ -1346,29 +1340,29 @@ function Ae(i, t, e, s) {
 }
 function Me(i, t, e) {
   var s;
-  const n = `${this.id}-t`, r = (s = i[n]) !== null && s !== void 0 ? s : i[n] = { v: 0, cv: /* @__PURE__ */ Object.create(null) }, a = r.cv;
+  const n = `${this.id}-t`, r = (s = i[n]) !== null && s !== void 0 ? s : i[n] = { v: 0, cv: /* @__PURE__ */ Object.create(null) }, o = r.cv;
   let c = r.v;
   const d = i[t];
   if (e != null && e.length) {
     const l = e.split(/\s+/);
-    for (let o = 0, h = l.length; o < h; ++o) {
-      const u = l[o];
-      u !== "" && (a[u] = c, d.add(u));
+    for (let a = 0, h = l.length; a < h; ++a) {
+      const u = l[a];
+      u !== "" && (o[u] = c, d.add(u));
     }
   }
   if (r.v = c + 1, c !== 0) {
     c -= 1;
-    for (const l in a)
-      a[l] === c && d.remove(l);
+    for (const l in o)
+      o[l] === c && d.remove(l);
   }
 }
-const Ee = {
-  [g.attribute]: T.setAttribute,
-  [g.booleanAttribute]: T.setBooleanAttribute,
-  [g.property]: (i, t, e) => i[t] = e,
-  [g.content]: Ae,
-  [g.tokenList]: Me,
-  [g.event]: () => {
+const Oe = {
+  [y.attribute]: T.setAttribute,
+  [y.booleanAttribute]: T.setBooleanAttribute,
+  [y.property]: (i, t, e) => i[t] = e,
+  [y.content]: Ae,
+  [y.tokenList]: Me,
+  [y.event]: () => {
   }
 };
 class M {
@@ -1377,7 +1371,7 @@ class M {
    * @param dataBinding - The binding configuration to apply.
    */
   constructor(t) {
-    this.dataBinding = t, this.updateTarget = null, this.aspectType = g.content;
+    this.dataBinding = t, this.updateTarget = null, this.aspectType = y.content;
   }
   /**
    * Creates HTML to be used within a template.
@@ -1392,9 +1386,9 @@ class M {
   createBehavior() {
     var t;
     if (this.updateTarget === null) {
-      const e = Ee[this.aspectType], s = (t = this.dataBinding.policy) !== null && t !== void 0 ? t : this.policy;
+      const e = Oe[this.aspectType], s = (t = this.dataBinding.policy) !== null && t !== void 0 ? t : this.policy;
       if (!e)
-        throw y.error(
+        throw v.error(
           1205
           /* Message.unsupportedBindingBehavior */
         );
@@ -1407,14 +1401,14 @@ class M {
     var e;
     const s = t.targets[this.targetNodeId], n = U(t) && t.hydrationStage && t.hydrationStage !== A.hydrated;
     switch (this.aspectType) {
-      case g.event:
+      case y.event:
         s[this.data] = t, s.addEventListener(this.targetAspect, this, this.dataBinding.options);
         break;
-      case g.content:
+      case y.content:
         t.onUnbind(this);
       default:
         const r = (e = s[this.data]) !== null && e !== void 0 ? e : s[this.data] = this.dataBinding.createObserver(this, this);
-        if (r.target = s, r.controller = t, n && (this.aspectType === g.attribute || this.aspectType === g.booleanAttribute)) {
+        if (r.target = s, r.controller = t, n && (this.aspectType === y.attribute || this.aspectType === y.booleanAttribute)) {
           r.bind(t);
           break;
         }
@@ -1431,9 +1425,9 @@ class M {
   handleEvent(t) {
     const e = t.currentTarget[this.data];
     if (e.isBound) {
-      E.setEvent(t);
+      O.setEvent(t);
       const s = this.dataBinding.evaluate(e.source, e.context);
-      E.setEvent(null), s !== !0 && t.preventDefault();
+      O.setEvent(null), s !== !0 && t.preventDefault();
     }
   }
   /** @internal */
@@ -1442,31 +1436,31 @@ class M {
     this.updateTarget(s, this.targetAspect, e.bind(n), n);
   }
 }
-k.define(M, { aspected: !0 });
-const ie = (i, t) => `${i}.${t}`, Bt = {}, S = {
+$.define(M, { aspected: !0 });
+const ie = (i, t) => `${i}.${t}`, Bt = {}, C = {
   index: 0,
   node: null
 };
 function xt(i) {
-  i.startsWith("fast-") || y.warn(1204, { name: i });
+  i.startsWith("fast-") || v.warn(1204, { name: i });
 }
-const Oe = new Proxy(document.createElement("div"), {
+const Ee = new Proxy(document.createElement("div"), {
   get(i, t) {
     xt(t);
     const e = Reflect.get(i, t);
-    return O(e) ? e.bind(i) : e;
+    return E(e) ? e.bind(i) : e;
   },
   set(i, t, e) {
     return xt(t), Reflect.set(i, t, e);
   }
 });
-class _e {
+class Re {
   constructor(t, e, s) {
     this.fragment = t, this.directives = e, this.policy = s, this.proto = null, this.nodeIds = /* @__PURE__ */ new Set(), this.descriptors = {}, this.factories = [];
   }
   addFactory(t, e, s, n, r) {
-    var a, c;
-    this.nodeIds.has(s) || (this.nodeIds.add(s), this.addTargetDescriptor(e, s, n)), t.id = (a = t.id) !== null && a !== void 0 ? a : L(), t.targetNodeId = s, t.targetTagName = r, t.policy = (c = t.policy) !== null && c !== void 0 ? c : this.policy, this.factories.push(t);
+    var o, c;
+    this.nodeIds.has(s) || (this.nodeIds.add(s), this.addTargetDescriptor(e, s, n)), t.id = (o = t.id) !== null && o !== void 0 ? o : L(), t.targetNodeId = s, t.targetTagName = r, t.policy = (c = t.policy) !== null && c !== void 0 ? c : this.policy, this.factories.push(t);
   }
   freeze() {
     return this.proto = Object.create(null, this.descriptors), this;
@@ -1478,16 +1472,16 @@ class _e {
     n[e])
       return;
     if (!n[t]) {
-      const a = t.lastIndexOf("."), c = t.substring(0, a), d = parseInt(t.substring(a + 1));
+      const o = t.lastIndexOf("."), c = t.substring(0, o), d = parseInt(t.substring(o + 1));
       this.addTargetDescriptor(c, t, d);
     }
     let r = Bt[e];
     if (!r) {
-      const a = `_${e}`;
+      const o = `_${e}`;
       Bt[e] = r = {
         get() {
           var c;
-          return (c = this[a]) !== null && c !== void 0 ? c : this[a] = this[t].childNodes[s];
+          return (c = this[o]) !== null && c !== void 0 ? c : this[o] = this[t].childNodes[s];
         }
       };
     }
@@ -1495,46 +1489,46 @@ class _e {
   }
   createView(t) {
     const e = this.fragment.cloneNode(!0), s = Object.create(this.proto);
-    s.r = e, s.h = t ?? Oe;
+    s.r = e, s.h = t ?? Ee;
     for (const n of this.nodeIds)
       s[n];
     return new X(e, this.factories, s);
   }
 }
 function se(i, t, e, s, n, r = !1) {
-  const a = e.attributes, c = i.directives;
-  for (let d = 0, l = a.length; d < l; ++d) {
-    const o = a[d], h = o.value, u = K.parse(h, c);
-    let p = null;
-    u === null ? r && (p = new M(Gt(() => h, i.policy)), k.assignAspect(p, o.name)) : p = ht.aggregate(u, i.policy), p !== null && (e.removeAttributeNode(o), d--, l--, i.addFactory(p, t, s, n, e.tagName));
+  const o = e.attributes, c = i.directives;
+  for (let d = 0, l = o.length; d < l; ++d) {
+    const a = o[d], h = a.value, u = K.parse(h, c);
+    let b = null;
+    u === null ? r && (b = new M(Gt(() => h, i.policy)), $.assignAspect(b, a.name)) : b = ht.aggregate(u, i.policy), b !== null && (e.removeAttributeNode(a), d--, l--, i.addFactory(b, t, s, n, e.tagName));
   }
 }
-function Re(i, t, e, s, n) {
+function Ie(i, t, e, s, n) {
   const r = K.parse(t.textContent, i.directives);
   if (r === null)
-    return S.node = t.nextSibling, S.index = n + 1, S;
-  let a, c = a = t;
+    return C.node = t.nextSibling, C.index = n + 1, C;
+  let o, c = o = t;
   for (let d = 0, l = r.length; d < l; ++d) {
-    const o = r[d];
-    d !== 0 && (n++, s = ie(e, n), a = c.parentNode.insertBefore(document.createTextNode(""), c.nextSibling)), B(o) ? a.textContent = o : (a.textContent = " ", k.assignAspect(o), i.addFactory(o, e, s, n, null)), c = a;
+    const a = r[d];
+    d !== 0 && (n++, s = ie(e, n), o = c.parentNode.insertBefore(document.createTextNode(""), c.nextSibling)), B(a) ? o.textContent = a : (o.textContent = " ", $.assignAspect(a), i.addFactory(a, e, s, n, null)), c = o;
   }
-  return S.index = n + 1, S.node = c.nextSibling, S;
+  return C.index = n + 1, C.node = c.nextSibling, C;
 }
 function ne(i, t, e) {
   let s = 0, n = t.firstChild;
   for (; n; ) {
-    const r = je(i, e, n, s);
+    const r = _e(i, e, n, s);
     n = r.node, s = r.index;
   }
 }
-function je(i, t, e, s) {
+function _e(i, t, e, s) {
   const n = ie(t, s);
   switch (e.nodeType) {
     case 1:
       se(i, t, e, n, s), ne(i, e, n);
       break;
     case 3:
-      return Re(i, e, t, n, s);
+      return Ie(i, e, t, n, s);
     case 8:
       const r = K.parse(e.data, i.directives);
       r !== null && i.addFactory(
@@ -1547,7 +1541,7 @@ function je(i, t, e, s) {
       );
       break;
   }
-  return S.index = s + 1, S.node = e.nextSibling, S;
+  return C.index = s + 1, C.node = e.nextSibling, C;
 }
 function Le(i, t) {
   return i && i.nodeType == 8 && K.parse(i.data, t) !== null;
@@ -1569,12 +1563,12 @@ const At = "TEMPLATE", ht = {
     let s;
     if (B(i)) {
       s = document.createElement(At), s.innerHTML = e.createHTML(i);
-      const a = s.content.firstElementChild;
-      a !== null && a.tagName === At && (s = a);
+      const o = s.content.firstElementChild;
+      o !== null && o.tagName === At && (s = o);
     } else
       s = i;
     !s.content.firstChild && !s.content.lastChild && s.content.appendChild(document.createComment(""));
-    const n = document.adoptNode(s.content), r = new _e(n, t, e);
+    const n = document.adoptNode(s.content), r = new Re(n, t, e);
     return se(
       r,
       "",
@@ -1595,7 +1589,7 @@ const At = "TEMPLATE", ht = {
       n,
       /* root */
       "r"
-    ), S.node = null, r.freeze();
+    ), C.node = null, r.freeze();
   },
   /**
    * Sets the default compilation strategy that will be used by the ViewTemplate whenever
@@ -1616,24 +1610,24 @@ const At = "TEMPLATE", ht = {
     if (i.length === 1)
       return i[0];
     let e, s = !1, n;
-    const r = i.length, a = i.map((l) => B(l) ? () => l : (e = l.sourceAspect || e, s = s || l.dataBinding.isVolatile, n = n || l.dataBinding.policy, l.dataBinding.evaluate)), c = (l, o) => {
+    const r = i.length, o = i.map((l) => B(l) ? () => l : (e = l.sourceAspect || e, s = s || l.dataBinding.isVolatile, n = n || l.dataBinding.policy, l.dataBinding.evaluate)), c = (l, a) => {
       let h = "";
       for (let u = 0; u < r; ++u)
-        h += a[u](l, o);
+        h += o[u](l, a);
       return h;
-    }, d = new M(qt(c, n ?? t, s));
-    return k.assignAspect(d, e), d;
+    }, d = new M(Wt(c, n ?? t, s));
+    return $.assignAspect(d, e), d;
   }
 }, Ve = (
   /* eslint-disable-next-line no-control-regex, max-len */
   /([ \x09\x0a\x0c\x0d])([^\0-\x1F\x7F-\x9F "'>=/]+)([ \x09\x0a\x0c\x0d]*=[ \x09\x0a\x0c\x0d]*(?:[^ \x09\x0a\x0c\x0d"'`<>=]*|"[^"]*|'[^']*))$/
-), Fe = /* @__PURE__ */ Object.create(null);
+), je = /* @__PURE__ */ Object.create(null);
 class V {
   /**
    * Creates an instance of InlineTemplateDirective.
    * @param template - The template to inline.
    */
-  constructor(t, e = Fe) {
+  constructor(t, e = je) {
     this.html = t, this.factories = e;
   }
   /**
@@ -1648,11 +1642,11 @@ class V {
   }
 }
 V.empty = new V("");
-k.define(V);
-function Ie(i, t, e, s = k.getForInstance(i)) {
+$.define(V);
+function Fe(i, t, e, s = $.getForInstance(i)) {
   if (s.aspected) {
     const n = Ve.exec(t);
-    n !== null && k.assignAspect(i, n[2]);
+    n !== null && $.assignAspect(i, n[2]);
   }
   return i.createHTML(e);
 }
@@ -1695,12 +1689,12 @@ class Y {
    */
   withPolicy(t) {
     if (this.result)
-      throw y.error(
+      throw v.error(
         1208
         /* Message.cannotSetTemplatePolicyAfterCompilation */
       );
     if (this.policy)
-      throw y.error(
+      throw v.error(
         1207
         /* Message.onlySetTemplatePolicyOnce */
       );
@@ -1732,23 +1726,23 @@ class Y {
    */
   static create(t, e, s) {
     let n = "";
-    const r = /* @__PURE__ */ Object.create(null), a = (c) => {
+    const r = /* @__PURE__ */ Object.create(null), o = (c) => {
       var d;
       const l = (d = c.id) !== null && d !== void 0 ? d : c.id = L();
       return r[l] = c, l;
     };
     for (let c = 0, d = t.length - 1; c < d; ++c) {
       const l = t[c];
-      let o = e[c], h;
-      if (n += l, O(o))
-        o = new M(qt(o));
-      else if (o instanceof lt)
-        o = new M(o);
-      else if (!(h = k.getForInstance(o))) {
-        const u = o;
-        o = new M(Gt(() => u));
+      let a = e[c], h;
+      if (n += l, E(a))
+        a = new M(Wt(a));
+      else if (a instanceof lt)
+        a = new M(a);
+      else if (!(h = $.getForInstance(a))) {
+        const u = a;
+        a = new M(Gt(() => u));
       }
-      n += Ie(o, l, a, h);
+      n += Fe(a, l, o, h);
     }
     return new Y(n + t[t.length - 1], r, s);
   }
@@ -1757,18 +1751,18 @@ x(Y);
 const re = (i, ...t) => {
   if (Array.isArray(i) && Array.isArray(i.raw))
     return Y.create(i, t);
-  throw y.error(
+  throw v.error(
     1206
     /* Message.directCallToHTMLTagNotAllowed */
   );
 };
 re.partial = (i) => new V(i);
-const Mt = "boolean", Et = "reflect", oe = Object.freeze({
+const Mt = "boolean", Ot = "reflect", ae = Object.freeze({
   /**
    * Locates all attribute configurations associated with a type.
    */
   locate: zt()
-}), He = {
+}), De = {
   toView(i) {
     return i ? "true" : "false";
   },
@@ -1776,20 +1770,20 @@ const Mt = "boolean", Et = "reflect", oe = Object.freeze({
     return !(i == null || i === "false" || i === !1 || i === 0);
   }
 };
-function Ot(i) {
+function Et(i) {
   if (i == null)
     return null;
   const t = i * 1;
   return isNaN(t) ? null : t;
 }
-const bi = {
+const fi = {
   toView(i) {
-    const t = Ot(i);
+    const t = Et(i);
     return t && t.toString();
   },
-  fromView: Ot
+  fromView: Et
 };
-class q {
+class W {
   /**
    * Creates an instance of AttributeDefinition.
    * @param Owner - The class constructor that owns this attribute.
@@ -1799,8 +1793,8 @@ class q {
    * @param converter - A {@link ValueConverter} that integrates with the property getter/setter
    * to convert values to and from a DOM string.
    */
-  constructor(t, e, s = e.toLowerCase(), n = Et, r) {
-    this.guards = /* @__PURE__ */ new Set(), this.Owner = t, this.name = e, this.attribute = s, this.mode = n, this.converter = r, this.fieldName = `_${e}`, this.callbackName = `${e}Changed`, this.hasCallback = this.callbackName in t.prototype, n === Mt && r === void 0 && (this.converter = He);
+  constructor(t, e, s = e.toLowerCase(), n = Ot, r) {
+    this.guards = /* @__PURE__ */ new Set(), this.Owner = t, this.name = e, this.attribute = s, this.mode = n, this.converter = r, this.fieldName = `_${e}`, this.callbackName = `${e}Changed`, this.hasCallback = this.callbackName in t.prototype, n === Mt && r === void 0 && (this.converter = De);
   }
   /**
    * Sets the value of the attribute/property on the source element.
@@ -1816,7 +1810,7 @@ class q {
    * @param source - The source element to access.
    */
   getValue(t) {
-    return b.track(t, this.name), t[this.fieldName];
+    return g.track(t, this.name), t[this.fieldName];
   }
   /** @internal */
   onAttributeChangedCallback(t, e) {
@@ -1828,7 +1822,7 @@ class q {
       s.add(t);
       const n = t[this.fieldName];
       switch (e) {
-        case Et:
+        case Ot:
           const r = this.converter;
           T.setAttribute(t, this.attribute, r !== void 0 ? r.toView(n) : n);
           break;
@@ -1847,22 +1841,22 @@ class q {
    */
   static collect(t, ...e) {
     const s = [];
-    e.push(oe.locate(t));
+    e.push(ae.locate(t));
     for (let n = 0, r = e.length; n < r; ++n) {
-      const a = e[n];
-      if (a !== void 0)
-        for (let c = 0, d = a.length; c < d; ++c) {
-          const l = a[c];
-          B(l) ? s.push(new q(t, l)) : s.push(new q(t, l.property, l.attribute, l.mode, l.converter));
+      const o = e[n];
+      if (o !== void 0)
+        for (let c = 0, d = o.length; c < d; ++c) {
+          const l = o[c];
+          B(l) ? s.push(new W(t, l)) : s.push(new W(t, l.property, l.attribute, l.mode, l.converter));
         }
     }
     return s;
   }
 }
-function De(i, t) {
+function He(i, t) {
   let e;
   function s(n, r) {
-    arguments.length > 1 && (e.property = r), oe.locate(n.constructor).push(e);
+    arguments.length > 1 && (e.property = r), ae.locate(n.constructor).push(e);
   }
   if (arguments.length > 1) {
     e = {}, s(i, t);
@@ -1872,47 +1866,47 @@ function De(i, t) {
 }
 var Pe = function(i, t, e, s) {
   function n(r) {
-    return r instanceof e ? r : new e(function(a) {
-      a(r);
+    return r instanceof e ? r : new e(function(o) {
+      o(r);
     });
   }
-  return new (e || (e = Promise))(function(r, a) {
-    function c(o) {
+  return new (e || (e = Promise))(function(r, o) {
+    function c(a) {
       try {
-        l(s.next(o));
+        l(s.next(a));
       } catch (h) {
-        a(h);
+        o(h);
       }
     }
-    function d(o) {
+    function d(a) {
       try {
-        l(s.throw(o));
+        l(s.throw(a));
       } catch (h) {
-        a(h);
+        o(h);
       }
     }
-    function l(o) {
-      o.done ? r(o.value) : n(o.value).then(c, d);
+    function l(a) {
+      a.done ? r(a.value) : n(a.value).then(c, d);
     }
     l((s = s.apply(i, t || [])).next());
   });
 };
-const _t = { mode: "open" }, Rt = {}, it = /* @__PURE__ */ new Set(), R = y.getById(N.elementRegistry, () => Pt()), ze = {
+const Rt = { mode: "open" }, It = {}, it = /* @__PURE__ */ new Set(), I = v.getById(N.elementRegistry, () => Pt()), ze = {
   deferAndHydrate: "defer-and-hydrate"
 };
-class f {
+class p {
   constructor(t, e = t.definition) {
     var s;
     this.platformDefined = !1, B(e) && (e = { name: e }), this.type = t, this.name = e.name, this.template = e.template, this.templateOptions = e.templateOptions, this.registry = (s = e.registry) !== null && s !== void 0 ? s : customElements;
-    const n = t.prototype, r = q.collect(t, e.attributes), a = new Array(r.length), c = {}, d = {};
-    for (let l = 0, o = r.length; l < o; ++l) {
+    const n = t.prototype, r = W.collect(t, e.attributes), o = new Array(r.length), c = {}, d = {};
+    for (let l = 0, a = r.length; l < a; ++l) {
       const h = r[l];
-      a[l] = h.attribute, c[h.name] = h, d[h.attribute] = h, b.defineProperty(n, h);
+      o[l] = h.attribute, c[h.name] = h, d[h.attribute] = h, g.defineProperty(n, h);
     }
     Reflect.defineProperty(t, "observedAttributes", {
-      value: a,
+      value: o,
       enumerable: !0
-    }), this.attributes = r, this.propertyLookup = c, this.attributeLookup = d, this.shadowOptions = e.shadowOptions === void 0 ? _t : e.shadowOptions === null ? void 0 : Object.assign(Object.assign({}, _t), e.shadowOptions), this.elementOptions = e.elementOptions === void 0 ? Rt : Object.assign(Object.assign({}, Rt), e.elementOptions), this.styles = m.normalize(e.styles), R.register(this), b.defineProperty(f.isRegistered, this.name), f.isRegistered[this.name] = this.type;
+    }), this.attributes = r, this.propertyLookup = c, this.attributeLookup = d, this.shadowOptions = e.shadowOptions === void 0 ? Rt : e.shadowOptions === null ? void 0 : Object.assign(Object.assign({}, Rt), e.shadowOptions), this.elementOptions = e.elementOptions === void 0 ? It : Object.assign(Object.assign({}, It), e.elementOptions), this.styles = m.normalize(e.styles), I.register(this), g.defineProperty(p.isRegistered, this.name), p.isRegistered[this.name] = this.type;
   }
   /**
    * Indicates if this element has been defined in at least one registry.
@@ -1938,8 +1932,8 @@ class f {
    * that describes the element to define.
    */
   static compose(t, e) {
-    return it.has(t) || R.getByType(t) ? new f(class extends t {
-    }, e) : new f(t, e);
+    return it.has(t) || I.getByType(t) ? new p(class extends t {
+    }, e) : new p(t, e);
   }
   /**
    * Registers a FASTElement base type.
@@ -1960,27 +1954,27 @@ class f {
    */
   static composeAsync(t, e) {
     return new Promise((s) => {
-      (it.has(t) || R.getByType(t)) && s(new f(class extends t {
+      (it.has(t) || I.getByType(t)) && s(new p(class extends t {
       }, e));
-      const n = new f(t, e);
-      b.getNotifier(n).subscribe({
+      const n = new p(t, e);
+      g.getNotifier(n).subscribe({
         handleChange: () => {
-          var r, a;
-          (a = (r = n.lifecycleCallbacks) === null || r === void 0 ? void 0 : r.templateDidUpdate) === null || a === void 0 || a.call(r, n.name), s(n);
+          var r, o;
+          (o = (r = n.lifecycleCallbacks) === null || r === void 0 ? void 0 : r.templateDidUpdate) === null || o === void 0 || o.call(r, n.name), s(n);
         }
       }, "template");
     });
   }
 }
-f.isRegistered = {};
-f.getByType = R.getByType;
-f.getForInstance = R.getForInstance;
-f.registerAsync = (i) => Pe(void 0, void 0, void 0, function* () {
+p.isRegistered = {};
+p.getByType = I.getByType;
+p.getForInstance = I.getForInstance;
+p.registerAsync = (i) => Pe(void 0, void 0, void 0, function* () {
   return new Promise((t) => {
-    f.isRegistered[i] && t(f.isRegistered[i]), b.getNotifier(f.isRegistered).subscribe({ handleChange: () => t(f.isRegistered[i]) }, i);
+    p.isRegistered[i] && t(p.isRegistered[i]), g.getNotifier(p.isRegistered).subscribe({ handleChange: () => t(p.isRegistered[i]) }, i);
   });
 });
-b.defineProperty(f.prototype, "template");
+g.defineProperty(p.prototype, "template");
 class Ue extends MutationObserver {
   /**
    * Creates an instance of UnobservableMutationObserver.
@@ -1999,7 +1993,7 @@ class Ue extends MutationObserver {
     this.observedNodes.delete(t), this.observedNodes.size < 1 && this.disconnect();
   }
 }
-const gi = Object.freeze({
+const pi = Object.freeze({
   /**
    * Creates a ViewBehaviorOrchestrator.
    * @param source - The source to to associate behaviors with.
@@ -2010,18 +2004,18 @@ const gi = Object.freeze({
     let s = null, n = !1;
     return {
       source: i,
-      context: E.default,
+      context: O.default,
       targets: e,
       get isBound() {
         return n;
       },
-      addBehaviorFactory(r, a) {
-        var c, d, l, o;
+      addBehaviorFactory(r, o) {
+        var c, d, l, a;
         const h = r;
-        h.id = (c = h.id) !== null && c !== void 0 ? c : L(), h.targetNodeId = (d = h.targetNodeId) !== null && d !== void 0 ? d : L(), h.targetTagName = (l = a.tagName) !== null && l !== void 0 ? l : null, h.policy = (o = h.policy) !== null && o !== void 0 ? o : T.policy, this.addTarget(h.targetNodeId, a), this.addBehavior(h.createBehavior());
+        h.id = (c = h.id) !== null && c !== void 0 ? c : L(), h.targetNodeId = (d = h.targetNodeId) !== null && d !== void 0 ? d : L(), h.targetTagName = (l = o.tagName) !== null && l !== void 0 ? l : null, h.policy = (a = h.policy) !== null && a !== void 0 ? a : T.policy, this.addTarget(h.targetNodeId, o), this.addBehavior(h.createBehavior());
       },
-      addTarget(r, a) {
-        e[r] = a;
+      addTarget(r, o) {
+        e[r] = o;
       },
       addBehavior(r) {
         t.push(r), n && r.bind(this);
@@ -2030,24 +2024,24 @@ const gi = Object.freeze({
         s === null && (s = []), s.push(r);
       },
       connectedCallback(r) {
-        n || (n = !0, t.forEach((a) => a.bind(this)));
+        n || (n = !0, t.forEach((o) => o.bind(this)));
       },
       disconnectedCallback(r) {
-        n && (n = !1, s !== null && s.forEach((a) => a.unbind(this)));
+        n && (n = !1, s !== null && s.forEach((o) => o.unbind(this)));
       }
     };
   }
-}), We = {
+}), qe = {
   bubbles: !0,
   composed: !0,
   cancelable: !0
-}, P = "isConnected", ae = /* @__PURE__ */ new WeakMap();
-function j(i) {
+}, P = "isConnected", oe = /* @__PURE__ */ new WeakMap();
+function _(i) {
   var t, e;
-  return (e = (t = i.shadowRoot) !== null && t !== void 0 ? t : ae.get(i)) !== null && e !== void 0 ? e : null;
+  return (e = (t = i.shadowRoot) !== null && t !== void 0 ? t : oe.get(i)) !== null && e !== void 0 ? e : null;
 }
-let jt;
-class C extends Wt {
+let _t;
+class S extends qt {
   /**
    * Creates a Controller to control the specified element.
    * @param element - The element to be controlled by this controller.
@@ -2057,10 +2051,10 @@ class C extends Wt {
    */
   constructor(t, e) {
     super(t), this.boundObservables = null, this.needsInitialization = !0, this.hasExistingShadowRoot = !1, this._template = null, this.stage = 3, this.guardBehaviorConnection = !1, this.behaviors = null, this.behaviorsConnected = !1, this._mainStyles = null, this.$fastController = this, this.view = null, this.source = t, this.definition = e, this.shadowOptions = e.shadowOptions;
-    const s = b.getAccessors(t);
+    const s = g.getAccessors(t);
     if (s.length > 0) {
       const n = this.boundObservables = /* @__PURE__ */ Object.create(null);
-      for (let r = 0, a = s.length; r < a; ++r) {
+      for (let r = 0, o = s.length; r < o; ++r) {
         const c = s[r].name, d = t[c];
         d !== void 0 && (delete t[c], n[c] = d);
       }
@@ -2071,14 +2065,14 @@ class C extends Wt {
    * connected to the document.
    */
   get isConnected() {
-    return b.track(this, P), this.stage === 1;
+    return g.track(this, P), this.stage === 1;
   }
   /**
    * The context the expression is evaluated against.
    */
   get context() {
     var t, e;
-    return (e = (t = this.view) === null || t === void 0 ? void 0 : t.context) !== null && e !== void 0 ? e : E.default;
+    return (e = (t = this.view) === null || t === void 0 ? void 0 : t.context) !== null && e !== void 0 ? e : O.default;
   }
   /**
    * Indicates whether the controller is bound.
@@ -2110,6 +2104,9 @@ class C extends Wt {
   set template(t) {
     this._template !== t && (this._template = t, this.needsInitialization || this.renderTemplate(t));
   }
+  /**
+   * The shadow root options for the component.
+   */
   get shadowOptions() {
     return this._shadowRootOptions;
   }
@@ -2117,7 +2114,7 @@ class C extends Wt {
     if (this._shadowRootOptions === void 0 && t !== void 0) {
       this._shadowRootOptions = t;
       let e = this.source.shadowRoot;
-      e ? this.hasExistingShadowRoot = !0 : (e = this.source.attachShadow(t), t.mode === "closed" && ae.set(this.source, e));
+      e ? this.hasExistingShadowRoot = !0 : (e = this.source.attachShadow(t), t.mode === "closed" && oe.set(this.source, e));
     }
   }
   /**
@@ -2174,11 +2171,11 @@ class C extends Wt {
       return;
     const s = this.source;
     if (t instanceof HTMLElement)
-      ((e = j(s)) !== null && e !== void 0 ? e : this.source).append(t);
+      ((e = _(s)) !== null && e !== void 0 ? e : this.source).append(t);
     else if (!t.isAttachedTo(s)) {
       const n = t.behaviors;
       if (t.addStylesTo(s), n !== null)
-        for (let r = 0, a = n.length; r < a; ++r)
+        for (let r = 0, o = n.length; r < o; ++r)
           this.addBehavior(n[r]);
     }
   }
@@ -2192,11 +2189,11 @@ class C extends Wt {
       return;
     const s = this.source;
     if (t instanceof HTMLElement)
-      ((e = j(s)) !== null && e !== void 0 ? e : s).removeChild(t);
+      ((e = _(s)) !== null && e !== void 0 ? e : s).removeChild(t);
     else if (t.isAttachedTo(s)) {
       const n = t.behaviors;
       if (t.removeStylesFrom(s), n !== null)
-        for (let r = 0, a = n.length; r < a; ++r)
+        for (let r = 0, o = n.length; r < o; ++r)
           this.removeBehavior(n[r]);
     }
   }
@@ -2204,18 +2201,24 @@ class C extends Wt {
    * Runs connected lifecycle behavior on the associated element.
    */
   connect() {
-    this.stage === 3 && (this.stage = 0, this.bindObservables(), this.connectBehaviors(), this.needsInitialization ? (this.renderTemplate(this.template), this.addStyles(this.mainStyles), this.needsInitialization = !1) : this.view !== null && this.view.bind(this.source), this.stage = 1, b.notify(this, P));
+    this.stage === 3 && (this.stage = 0, this.bindObservables(), this.connectBehaviors(), this.needsInitialization ? (this.renderTemplate(this.template), this.addStyles(this.mainStyles), this.needsInitialization = !1) : this.view !== null && this.view.bind(this.source), this.stage = 1, g.notify(this, P));
   }
+  /**
+   * Binds any observables that were set before upgrade.
+   */
   bindObservables() {
     if (this.boundObservables !== null) {
       const t = this.source, e = this.boundObservables, s = Object.keys(e);
       for (let n = 0, r = s.length; n < r; ++n) {
-        const a = s[n];
-        t[a] = e[a];
+        const o = s[n];
+        t[o] = e[o];
       }
       this.boundObservables = null;
     }
   }
+  /**
+   * Connects any existing behaviors on the associated element.
+   */
   connectBehaviors() {
     if (this.behaviorsConnected === !1) {
       const t = this.behaviors;
@@ -2228,6 +2231,9 @@ class C extends Wt {
       this.behaviorsConnected = !0;
     }
   }
+  /**
+   * Disconnects any behaviors on the associated element.
+   */
   disconnectBehaviors() {
     if (this.behaviorsConnected === !0) {
       const t = this.behaviors;
@@ -2241,7 +2247,7 @@ class C extends Wt {
    * Runs disconnected lifecycle behavior on the associated element.
    */
   disconnect() {
-    this.stage === 1 && (this.stage = 2, b.notify(this, P), this.view !== null && this.view.unbind(), this.disconnectBehaviors(), this.stage = 3);
+    this.stage === 1 && (this.stage = 2, g.notify(this, P), this.view !== null && this.view.unbind(), this.disconnectBehaviors(), this.stage = 3);
   }
   /**
    * Runs the attribute changed callback for the associated element.
@@ -2262,11 +2268,18 @@ class C extends Wt {
    * Only emits events if connected.
    */
   emit(t, e, s) {
-    return this.stage === 1 ? this.source.dispatchEvent(new CustomEvent(t, Object.assign(Object.assign({ detail: e }, We), s))) : !1;
+    return this.stage === 1 ? this.source.dispatchEvent(new CustomEvent(t, Object.assign(Object.assign({ detail: e }, qe), s))) : !1;
   }
+  /**
+   * Renders the provided template to the element.
+   *
+   * @param template - The template to render.
+   * @remarks
+   * If `null` is provided, any existing view will be removed.
+   */
   renderTemplate(t) {
     var e;
-    const s = this.source, n = (e = j(s)) !== null && e !== void 0 ? e : s;
+    const s = this.source, n = (e = _(s)) !== null && e !== void 0 ? e : s;
     if (this.view !== null)
       this.view.dispose(), this.view = null;
     else if (!this.needsInitialization || this.hasExistingShadowRoot) {
@@ -2289,21 +2302,21 @@ class C extends Wt {
     const s = t.$fastController;
     if (s !== void 0 && !e)
       return s;
-    const n = f.getForInstance(t);
+    const n = p.getForInstance(t);
     if (n === void 0)
-      throw y.error(
+      throw v.error(
         1401
         /* Message.missingElementDefinition */
       );
-    return b.getNotifier(n).subscribe({
+    return g.getNotifier(n).subscribe({
       handleChange: () => {
-        C.forCustomElement(t, !0), t.$fastController.connect();
+        S.forCustomElement(t, !0), t.$fastController.connect();
       }
-    }, "template"), b.getNotifier(n).subscribe({
+    }, "template"), g.getNotifier(n).subscribe({
       handleChange: () => {
-        C.forCustomElement(t, !0), t.$fastController.connect();
+        S.forCustomElement(t, !0), t.$fastController.connect();
       }
-    }, "shadowOptions"), t.$fastController = new jt(t, n);
+    }, "shadowOptions"), t.$fastController = new _t(t, n);
   }
   /**
    * Sets the strategy that ElementController.forCustomElement uses to construct
@@ -2311,14 +2324,14 @@ class C extends Wt {
    * @param strategy - The strategy to use.
    */
   static setStrategy(t) {
-    jt = t;
+    _t = t;
   }
 }
-x(C);
-C.setStrategy(C);
+x(S);
+S.setStrategy(S);
 function Q(i) {
   var t;
-  return "adoptedStyleSheets" in i ? i : (t = j(i)) !== null && t !== void 0 ? t : i.getRootNode();
+  return "adoptedStyleSheets" in i ? i : (t = _(i)) !== null && t !== void 0 ? t : i.getRootNode();
 }
 class Z {
   constructor(t) {
@@ -2338,8 +2351,8 @@ class Z {
   }
 }
 Z.styleSheetCache = /* @__PURE__ */ new Map();
-let qe = 0;
-const Qe = () => `fast-${++qe}`;
+let We = 0;
+const Qe = () => `fast-${++We}`;
 function Lt(i) {
   return i === document ? document.body : i;
 }
@@ -2382,92 +2395,111 @@ if (m.supportsAdoptedStyleSheets) {
   m.setDefaultStrategy(Z);
 } else
   m.setDefaultStrategy(Ge);
-const st = "defer-hydration", F = "needs-hydration";
-class v extends C {
+const j = "defer-hydration", st = "needs-hydration";
+class f extends S {
+  /**
+   * {@inheritdoc ElementController.shadowOptions}
+   */
+  get shadowOptions() {
+    return super.shadowOptions;
+  }
+  set shadowOptions(t) {
+    super.shadowOptions = t, (this.hasExistingShadowRoot || t !== void 0 && !this.template) && this.definition.templateOptions === ze.deferAndHydrate && (this.source.toggleAttribute(j, !0), this.source.toggleAttribute(st, !0));
+  }
+  /**
+   * Adds the current element instance to the hydrating instances map
+   */
+  addHydratingInstance() {
+    if (!f.hydratingInstances)
+      return;
+    const t = this.definition.name;
+    let e = f.hydratingInstances.get(t);
+    e || (e = /* @__PURE__ */ new Set(), f.hydratingInstances.set(t, e)), e.add(this.source);
+  }
   /**
    * Configure lifecycle callbacks for hydration events
    */
   static config(t) {
-    return v.lifecycleCallbacks = t, this;
+    return f.lifecycleCallbacks = t, this;
   }
   static hydrationObserverHandler(t) {
     for (const e of t)
-      v.hydrationObserver.unobserve(e.target), e.target.$fastController.connect();
+      e.target.hasAttribute(j) || (f.hydrationObserver.unobserve(e.target), e.target.$fastController.connect());
   }
   /**
-   * Checks if all elements have completed hydration and dispatches event if complete
+   * Checks to see if hydration is complete and if so, invokes the hydrationComplete callback.
+   * Then resets the ElementController strategy to the default so that future elements
+   * don't use the HydratableElementController.
+   *
+   * @param deadline - the idle deadline object
    */
-  static checkHydrationComplete() {
-    var t, e;
-    document.querySelector(`[${F}]`) || (e = (t = v.lifecycleCallbacks) === null || t === void 0 ? void 0 : t.hydrationComplete) === null || e === void 0 || e.call(t);
-  }
-  static forCustomElement(t, e) {
-    const s = f.getForInstance(t);
-    return s?.templateOptions === ze.deferAndHydrate && !s.template && (t.toggleAttribute(st, !0), t.toggleAttribute(F, !0)), super.forCustomElement(t, e);
+  static checkHydrationComplete(t) {
+    var e, s, n;
+    if (t.didTimeout) {
+      f.idleCallbackId = requestIdleCallback(f.checkHydrationComplete, { timeout: 50 });
+      return;
+    }
+    ((e = f.hydratingInstances) === null || e === void 0 ? void 0 : e.size) === 0 && ((n = (s = f.lifecycleCallbacks) === null || s === void 0 ? void 0 : s.hydrationComplete) === null || n === void 0 || n.call(s), S.setStrategy(S));
   }
+  /**
+   * Runs connected lifecycle behavior on the associated element.
+   */
   connect() {
-    var t, e, s, n, r, a;
-    if (this.needsHydration === void 0 && (this.needsHydration = this.source.getAttribute(F) !== null), this.source.hasAttribute(st)) {
-      v.hydrationObserver.observe(this.source, {
-        attributeFilter: [st]
+    var t, e, s, n, r;
+    if (this.needsHydration = (t = this.needsHydration) !== null && t !== void 0 ? t : this.source.hasAttribute(st), this.needsHydration && ((s = (e = f.lifecycleCallbacks) === null || e === void 0 ? void 0 : e.elementWillHydrate) === null || s === void 0 || s.call(e, this.definition.name)), this.source.hasAttribute(j)) {
+      this.addHydratingInstance(), f.hydrationObserver.observe(this.source, {
+        attributeFilter: [j]
       });
       return;
     }
     if (!this.needsHydration) {
-      super.connect();
+      super.connect(), this.removeHydratingInstance();
       return;
     }
-    if (this.stage !== 3)
+    if (this.stage === 3) {
+      if (this.stage = 0, this.bindObservables(), this.connectBehaviors(), this.template)
+        if (U(this.template)) {
+          const o = this.source, c = (n = _(o)) !== null && n !== void 0 ? n : o;
+          let d = c.firstChild, l = c.lastChild;
+          o.shadowRoot === null && (w.isElementBoundaryStartMarker(d) && (d.data = "", d = d.nextSibling), w.isElementBoundaryEndMarker(l) && (l.data = "", l = l.previousSibling)), this.view = this.template.hydrate(d, l, o), (r = this.view) === null || r === void 0 || r.bind(this.source);
+        } else
+          this.renderTemplate(this.template);
+      this.addStyles(this.mainStyles), this.stage = 1, this.source.removeAttribute(st), this.needsInitialization = this.needsHydration = !1, this.removeHydratingInstance(), g.notify(this, P);
+    }
+  }
+  /**
+   * Removes the current element instance from the hydrating instances map
+   */
+  removeHydratingInstance() {
+    var t, e;
+    if (!f.hydratingInstances)
       return;
-    (e = (t = v.lifecycleCallbacks) === null || t === void 0 ? void 0 : t.elementWillHydrate) === null || e === void 0 || e.call(t, this.definition.name), this.stage = 0, this.bindObservables(), this.connectBehaviors();
-    const c = this.source, d = (s = j(c)) !== null && s !== void 0 ? s : c;
-    if (this.template)
-      if (U(this.template)) {
-        let l = d.firstChild, o = d.lastChild;
-        c.shadowRoot === null && (w.isElementBoundaryStartMarker(l) && (l.data = "", l = l.nextSibling), w.isElementBoundaryEndMarker(o) && (o.data = "", o = o.previousSibling)), this.view = this.template.hydrate(l, o, c), (n = this.view) === null || n === void 0 || n.bind(this.source);
-      } else
-        this.renderTemplate(this.template);
-    this.addStyles(this.mainStyles), this.stage = 1, this.source.removeAttribute(F), this.needsInitialization = this.needsHydration = !1, b.notify(this, P), (a = (r = v.lifecycleCallbacks) === null || r === void 0 ? void 0 : r.elementDidHydrate) === null || a === void 0 || a.call(r, this.definition.name), v.checkHydrationComplete();
+    const s = this.definition.name, n = f.hydratingInstances.get(s);
+    (e = (t = f.lifecycleCallbacks) === null || t === void 0 ? void 0 : t.elementDidHydrate) === null || e === void 0 || e.call(t, this.definition.name), n && (n.delete(this.source), n.size || f.hydratingInstances.delete(s), f.idleCallbackId && cancelIdleCallback(f.idleCallbackId), f.idleCallbackId = requestIdleCallback(f.checkHydrationComplete, { timeout: 50 }));
   }
+  /**
+   * Unregisters the hydration observer when the element is disconnected.
+   */
   disconnect() {
-    super.disconnect(), v.hydrationObserver.unobserve(this.source);
+    super.disconnect(), f.hydrationObserver.unobserve(this.source);
   }
+  /**
+   * Sets the ElementController strategy to HydratableElementController.
+   * @remarks
+   * This method is typically called during application startup to enable
+   * hydration support for FAST elements.
+   */
   static install() {
-    C.setStrategy(v);
+    S.setStrategy(f);
   }
 }
-v.hydrationObserver = new Ue(v.hydrationObserverHandler);
-var Je = function(i, t, e, s) {
-  function n(r) {
-    return r instanceof e ? r : new e(function(a) {
-      a(r);
-    });
-  }
-  return new (e || (e = Promise))(function(r, a) {
-    function c(o) {
-      try {
-        l(s.next(o));
-      } catch (h) {
-        a(h);
-      }
-    }
-    function d(o) {
-      try {
-        l(s.throw(o));
-      } catch (h) {
-        a(h);
-      }
-    }
-    function l(o) {
-      o.done ? r(o.value) : n(o.value).then(c, d);
-    }
-    l((s = s.apply(i, t || [])).next());
-  });
-};
+f.hydrationObserver = new Ue(f.hydrationObserverHandler);
+f.idleCallbackId = null;
+f.hydratingInstances = /* @__PURE__ */ new Map();
 function de(i) {
   const t = class extends i {
     constructor() {
-      super(), C.forCustomElement(this);
+      super(), S.forCustomElement(this);
     }
     $emit(e, s, n) {
       return this.$fastController.emit(e, s, n);
@@ -2482,81 +2514,87 @@ function de(i) {
       this.$fastController.onAttributeChangedCallback(e, s, n);
     }
   };
-  return f.registerBaseType(t), t;
+  return p.registerBaseType(t), t;
+}
+function Je(i, t) {
+  return E(i) ? p.compose(i, t) : p.compose(this, i);
 }
 function Ke(i, t) {
-  return O(i) ? f.compose(i, t) : f.compose(this, i);
+  return E(i) ? new Promise((e) => {
+    p.composeAsync(i, t).then((s) => {
+      e(s);
+    });
+  }).then((e) => e.define().type) : new Promise((e) => {
+    p.composeAsync(this, i).then((s) => {
+      e(s);
+    });
+  }).then((e) => e.define().type);
 }
 function Xe(i, t) {
-  return Je(this, void 0, void 0, function* () {
-    return O(i) ? (yield f.composeAsync(i, t)).define().type : (yield f.composeAsync(this, i)).define().type;
-  });
-}
-function Ye(i, t) {
-  return O(i) ? f.compose(i, t).define().type : f.compose(this, i).define().type;
+  return E(i) ? p.compose(i, t).define().type : p.compose(this, i).define().type;
 }
-function Ze(i) {
+function Ye(i) {
   return de(i);
 }
-const ti = Object.assign(de(HTMLElement), {
+const Ze = Object.assign(de(HTMLElement), {
   /**
    * Creates a new FASTElement base class inherited from the
    * provided base type.
    * @param BaseType - The base element type to inherit from.
    */
-  from: Ze,
+  from: Ye,
   /**
    * Defines a platform custom element based on the provided type and definition.
    * @param type - The custom element type to define.
    * @param nameOrDef - The name of the element to define or a definition object
    * that describes the element to define.
    */
-  define: Ye,
+  define: Xe,
   /**
    * Defines metadata for a FASTElement which can be used to later define the element.
    * @public
    */
-  compose: Ke,
+  compose: Je,
   /**
    * Defines metadata for a FASTElement which can be used after it has been resolved to define the element.
    * @alpha
    */
-  defineAsync: Xe
+  defineAsync: Ke
 });
-function ei(i, t) {
+function ti(i, t) {
   return i instanceof Function ? i(t) : i;
 }
-const Vt = /* @__PURE__ */ new Set(), nt = /* @__PURE__ */ new Map(), yi = (i) => (t = "vwc") => {
+const Vt = /* @__PURE__ */ new Set(), nt = /* @__PURE__ */ new Map(), bi = (i) => (t = "vwc") => {
   const e = (n) => `${t}-${n}`, s = (n) => {
     const r = e(n.name);
-    let a = n.type;
-    if (a.componentName = n.name, Vt.has(r))
+    let o = n.type;
+    if (o.componentName = n.name, Vt.has(r))
       return;
-    nt.has(a) && nt.get(a) !== r && (a = class extends a {
-    }), Vt.add(r), nt.set(a, r);
-    for (const o of n.dependencies)
-      s(o);
+    nt.has(o) && nt.get(o) !== r && (o = class extends o {
+    }), Vt.add(r), nt.set(o, r);
+    for (const a of n.dependencies)
+      s(a);
     const c = new Map([
       [n.type, r],
       ...n.dependencies.map(
-        (o) => [o.type, e(o.name)]
+        (a) => [a.type, e(a.name)]
       )
     ]), l = {
-      tagFor: (o, h) => {
-        if (!c.has(o))
+      tagFor: (a, h) => {
+        if (!c.has(a))
           throw new Error(
-            `Could not get tag for ${o.name} as it is not a dependency of ${n.name}.`
+            `Could not get tag for ${a.name} as it is not a dependency of ${n.name}.`
           );
-        const u = c.get(o);
+        const u = c.get(a);
         return h ? u : re.partial(u);
       },
-      tagForNonDependency(o) {
-        return e(o);
+      tagForNonDependency(a) {
+        return e(a);
       }
     };
-    f.compose(a, {
+    p.compose(o, {
       ...n.options,
-      template: ei(
+      template: ti(
         n.template,
         l
       ),
@@ -2564,42 +2602,42 @@ const Vt = /* @__PURE__ */ new Set(), nt = /* @__PURE__ */ new Map(), yi = (i) =
     }).define();
   };
   s(i);
-}, vi = (i, t, e, s, n) => ({
+}, gi = (i, t, e, s, n) => ({
   name: i,
   type: t,
   template: e,
   dependencies: s,
   options: n
-}), Ft = /* @__PURE__ */ new WeakMap(), he = (i) => {
-  let t = Ft.get(i);
-  return t || (t = [], Ft.set(i, t)), t;
-}, mi = (i, t) => {
+}), jt = /* @__PURE__ */ new WeakMap(), he = (i) => {
+  let t = jt.get(i);
+  return t || (t = [], jt.set(i, t)), t;
+}, yi = (i, t) => {
   he(i).push(t);
-}, ii = (i, t) => {
+}, ei = (i, t) => {
   he(i).forEach((e) => e(i, t));
-}, si = (i) => i === "delegate", It = (i) => `vvd${i.charAt(0).toUpperCase()}${i.slice(1)}`, ue = (i, t) => {
-  if (si(i._vividAriaBehaviour)) {
+}, ii = (i) => i === "delegate", Ft = (i) => `vvd${i.charAt(0).toUpperCase()}${i.slice(1)}`, ue = (i, t) => {
+  if (ii(i._vividAriaBehaviour)) {
     const e = i[t];
-    i[`_${t}`] = null, i.removeAttribute(at(t)), i[`_${t}`] = e, i[t] !== null ? i.dataset[It(t)] = i[t] : delete i.dataset[It(t)];
+    i[`_${t}`] = null, i.removeAttribute(ot(t)), i[`_${t}`] = e, i[t] !== null ? i.dataset[Ft(t)] = i[t] : delete i.dataset[Ft(t)];
   } else
     T.setAttribute(
       i,
-      at(t),
+      ot(t),
       i[t]
     );
-}, G = /* @__PURE__ */ new WeakMap(), ni = (i, t) => {
+}, G = /* @__PURE__ */ new WeakMap(), si = (i, t) => {
   const e = G.get(i);
   e ? e.add(t) : G.set(i, /* @__PURE__ */ new Set([t]));
-}, ri = (i, t) => {
-  i.isConnected ? ue(i, t) : ni(i, t);
-}, oi = (i) => {
+}, ni = (i, t) => {
+  i.isConnected ? ue(i, t) : si(i, t);
+}, ri = (i) => {
   const t = G.get(i);
   if (t) {
     for (const e of t)
       ue(i, e);
     G.delete(i);
   }
-}, Ht = [
+}, Dt = [
   "role",
   "ariaAtomic",
   "ariaAutoComplete",
@@ -2643,57 +2681,57 @@ const Vt = /* @__PURE__ */ new Set(), nt = /* @__PURE__ */ new Map(), yi = (i) =
   "ariaValueText",
   "ariaRelevant"
   // Non-standard
-], at = (i) => i.replace("aria", "aria-").toLowerCase(), ai = (i) => {
+], ot = (i) => i.replace("aria", "aria-").toLowerCase(), ai = (i) => {
   class t extends i {
     constructor(...s) {
       super(...s), this._vividAriaBehaviour = "default";
-      for (const n of Ht)
+      for (const n of Dt)
         this[`_${n}`] = null;
     }
     connectedCallback() {
-      super.connectedCallback(), oi(this);
+      super.connectedCallback(), ri(this);
     }
   }
-  for (const e of Ht)
-    De({
-      attribute: at(e),
+  for (const e of Dt)
+    He({
+      attribute: ot(e),
       mode: "fromView"
     })(t.prototype, e), t.prototype[`${e}Changed`] = function() {
-      ri(this, e), this._vividAriaBehaviour !== "default" && ii(this, e);
+      ni(this, e), this._vividAriaBehaviour !== "default" && ei(this, e);
     };
   return t;
 };
-function li() {
+function oi() {
   const i = /* @__PURE__ */ new WeakMap();
   return (t) => (i.has(t) || i.set(t, []), i.get(t));
 }
-const fe = li(), wi = (i) => (t, e) => {
+const fe = oi(), vi = (i) => (t, e) => {
   fe(t.constructor).push({
     newPropertyName: e,
     ...i
   });
-}, ci = (i) => {
+}, li = (i) => {
   class t extends i {
     #t(s) {
       let n = !1, r = !1;
-      const a = (o) => r && s.fromDeprecated(
-        o[s.deprecatedPropertyName]
-      ) === o[s.newPropertyName], c = (o) => n && s.toDeprecated && s.toDeprecated(o[s.newPropertyName]) === o[s.deprecatedPropertyName], d = {
-        handleChange(o, h) {
+      const o = (a) => r && s.fromDeprecated(
+        a[s.deprecatedPropertyName]
+      ) === a[s.newPropertyName], c = (a) => n && s.toDeprecated && s.toDeprecated(a[s.newPropertyName]) === a[s.deprecatedPropertyName], d = {
+        handleChange(a, h) {
           if (h === s.newPropertyName) {
-            if (n = !0, !s.toDeprecated || a(o))
+            if (n = !0, !s.toDeprecated || o(a))
               return;
-            o[s.deprecatedPropertyName] = s.toDeprecated(o[s.newPropertyName]);
+            a[s.deprecatedPropertyName] = s.toDeprecated(a[s.newPropertyName]);
           }
           if (h === s.deprecatedPropertyName) {
-            if (r = !0, c(o))
+            if (r = !0, c(a))
               return;
-            o[s.newPropertyName] = s.fromDeprecated(
-              o[s.deprecatedPropertyName]
+            a[s.newPropertyName] = s.fromDeprecated(
+              a[s.deprecatedPropertyName]
             );
           }
         }
-      }, l = b.getNotifier(this);
+      }, l = g.getNotifier(this);
       l.subscribe(d, s.newPropertyName), l.subscribe(d, s.deprecatedPropertyName);
     }
     constructor(...s) {
@@ -2704,9 +2742,9 @@ const fe = li(), wi = (i) => (t, e) => {
   }
   return t;
 };
-class Si extends ai(ci(ti)) {
+class mi extends ai(li(Ze)) {
   static {
-    this.VIVID_VERSION = "5.5.0";
+    this.VIVID_VERSION = "5.7.0";
   }
   /**
    * Add data-vvd-component attribute with component name globally,
@@ -2719,40 +2757,39 @@ class Si extends ai(ci(ti)) {
   }
 }
 export {
-  hi as A,
   lt as B,
   T as D,
-  E,
-  k as H,
+  O as E,
+  $ as H,
   Kt as M,
-  b as O,
+  g as O,
   we as S,
   Ut as U,
-  Si as V,
-  De as a,
-  gi as b,
-  yi as c,
-  vi as d,
-  ui as e,
-  O as f,
-  qt as g,
+  mi as V,
+  He as a,
+  pi as b,
+  bi as c,
+  gi as d,
+  di as e,
+  E as f,
+  Wt as g,
   re as h,
   B as i,
-  at as j,
-  Ht as k,
+  ot as j,
+  Dt as k,
   rt as l,
   U as m,
-  bi as n,
-  fi as o,
+  fi as n,
+  hi as o,
   A as p,
   X as q,
-  wi as r,
-  mi as s,
+  vi as r,
+  yi as s,
   w as t,
   Gt as u,
-  pi as v,
+  ui as v,
   m as w,
   pe as x,
-  di as y,
+  ci as y,
   tt as z
 };