@vonage/vivid 5.1.0 → 5.3.0

package/bundled/vivid-element.js

@@ -1,170 +1,195 @@
-const v = function() {
-  if (typeof globalThis < "u")
-    return globalThis;
-  if (typeof global < "u")
-    return global;
-  if (typeof self < "u")
-    return self;
-  if (typeof window < "u")
-    return window;
-  try {
-    return new Function("return this")();
-  } catch {
-    return {};
-  }
-}();
-v.trustedTypes === void 0 && (v.trustedTypes = { createPolicy: (s, e) => e });
-const ee = {
+let F;
+const ft = "fast-kernel";
+try {
+  if (document.currentScript)
+    F = document.currentScript.getAttribute(ft);
+  else {
+    const i = document.getElementsByTagName("script");
+    F = i[i.length - 1].getAttribute(ft);
+  }
+} catch {
+  F = "isolate";
+}
+let k;
+switch (F) {
+  case "share":
+    k = Object.freeze({
+      updateQueue: 1,
+      observable: 2,
+      contextEvent: 3,
+      elementRegistry: 4
+    });
+    break;
+  case "share-v2":
+    k = Object.freeze({
+      updateQueue: 1.2,
+      observable: 2.2,
+      contextEvent: 3.2,
+      elementRegistry: 4.2
+    });
+    break;
+  default:
+    const i = `-${Math.random().toString(36).substring(2, 8)}`;
+    k = Object.freeze({
+      updateQueue: `1.2${i}`,
+      observable: `2.2${i}`,
+      contextEvent: `3.2${i}`,
+      elementRegistry: `4.2${i}`
+    });
+    break;
+}
+const O = (i) => typeof i == "function", B = (i) => typeof i == "string", pe = () => {
+};
+var Z = typeof globalThis < "u" ? globalThis : typeof window < "u" ? window : typeof global < "u" ? global : typeof self < "u" ? self : {};
+function li(i) {
+  return i && i.__esModule && Object.prototype.hasOwnProperty.call(i, "default") ? i.default : i;
+}
+function ci(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 Z < "u")
+      Z.globalThis = Z;
+    else if (typeof self < "u")
+      self.globalThis = self;
+    else if (typeof window < "u")
+      window.globalThis = window;
+    else {
+      const t = new Function("return this")();
+      t.globalThis = t;
+    }
+})();
+const Pt = {
   configurable: !1,
   enumerable: !1,
   writable: !1
 };
-v.FAST === void 0 && Reflect.defineProperty(v, "FAST", Object.assign({ value: /* @__PURE__ */ Object.create(null) }, ee));
-const S = v.FAST;
-if (S.getById === void 0) {
-  const s = /* @__PURE__ */ Object.create(null);
-  Reflect.defineProperty(S, "getById", Object.assign({ value(e, t) {
-    let i = s[e];
-    return i === void 0 && (i = t ? s[e] = t() : null), i;
-  } }, ee));
-}
-const Ke = Object.freeze([]);
-function _() {
-  const s = /* @__PURE__ */ new WeakMap();
-  return function(e) {
-    let t = s.get(e);
-    if (t === void 0) {
-      let i = Reflect.getPrototypeOf(e);
-      for (; t === void 0 && i !== null; )
-        t = s.get(i), i = Reflect.getPrototypeOf(i);
-      t = t === void 0 ? [] : t.slice(0), s.set(e, t);
-    }
-    return t;
-  };
+globalThis.FAST === void 0 && Reflect.defineProperty(globalThis, "FAST", Object.assign({ value: /* @__PURE__ */ Object.create(null) }, Pt));
+const g = globalThis.FAST;
+if (g.getById === void 0) {
+  const i = /* @__PURE__ */ Object.create(null);
+  Reflect.defineProperty(g, "getById", Object.assign({ value(t, e) {
+    let s = i[t];
+    return s === void 0 && (s = e ? i[t] = e() : null), s;
+  } }, Pt));
 }
-const N = v.FAST.getById(1, () => {
-  const s = [], e = [];
-  function t() {
-    if (e.length)
-      throw e.shift();
-  }
-  function i(o) {
-    try {
-      o.call();
-    } catch (a) {
-      e.push(a), setTimeout(t, 0);
-    }
-  }
-  function n() {
-    let a = 0;
-    for (; a < s.length; )
-      if (i(s[a]), a++, a > 1024) {
-        for (let c = 0, l = s.length - a; c < l; c++)
-          s[c] = s[c + a];
-        s.length -= a, a = 0;
-      }
-    s.length = 0;
-  }
-  function r(o) {
-    s.length < 1 && v.requestAnimationFrame(n), s.push(o);
+g.error === void 0 && Object.assign(g, {
+  warn() {
+  },
+  error(i) {
+    return new Error(`Error ${i}`);
+  },
+  addMessages() {
   }
+});
+const di = Object.freeze([]);
+function Dt() {
+  const i = /* @__PURE__ */ new Map();
   return Object.freeze({
-    enqueue: r,
-    process: n
+    register(t) {
+      return i.has(t.type) ? !1 : (i.set(t.type, t), !0);
+    },
+    getByType(t) {
+      return i.get(t);
+    },
+    getForInstance(t) {
+      if (t != null)
+        return i.get(t.constructor);
+    }
   });
-}), te = v.trustedTypes.createPolicy("fast-html", {
-  createHTML: (s) => s
-});
-let k = te;
-const m = `fast-${Math.random().toString(36).substring(2, 8)}`, se = `${m}{`, R = `}${m}`, u = Object.freeze({
+}
+function zt() {
+  const i = /* @__PURE__ */ new WeakMap();
+  return function(t) {
+    let e = i.get(t);
+    if (e === void 0) {
+      let s = Reflect.getPrototypeOf(t);
+      for (; e === void 0 && s !== null; )
+        e = i.get(s), s = Reflect.getPrototypeOf(s);
+      e = e === void 0 ? [] : e.slice(0), i.set(t, e);
+    }
+    return e;
+  };
+}
+function x(i) {
+  i.prototype.toJSON = pe;
+}
+const b = Object.freeze({
   /**
-   * Indicates whether the DOM supports the adoptedStyleSheets feature.
+   * Not aspected.
    */
-  supportsAdoptedStyleSheets: Array.isArray(document.adoptedStyleSheets) && "replace" in CSSStyleSheet.prototype,
+  none: 0,
   /**
-   * Sets the HTML trusted types policy used by the templating engine.
-   * @param policy - The policy to set for HTML.
-   * @remarks
-   * This API can only be called once, for security reasons. It should be
-   * called by the application developer at the start of their program.
+   * An attribute.
    */
-  setHTMLPolicy(s) {
-    if (k !== te)
-      throw new Error("The HTML policy can only be set once.");
-    k = s;
-  },
+  attribute: 1,
   /**
-   * Turns a string into trusted HTML using the configured trusted types policy.
-   * @param html - The string to turn into trusted HTML.
-   * @remarks
-   * Used internally by the template engine when creating templates
-   * and setting innerHTML.
+   * A boolean attribute.
    */
-  createHTML(s) {
-    return k.createHTML(s);
-  },
+  booleanAttribute: 2,
   /**
-   * Determines if the provided node is a template marker used by the runtime.
-   * @param node - The node to test.
+   * A property.
    */
-  isMarker(s) {
-    return s && s.nodeType === 8 && s.data.startsWith(m);
-  },
+  property: 3,
   /**
-   * Given a marker node, extract the {@link HTMLDirective} index from the placeholder.
-   * @param node - The marker node to extract the index from.
+   * Content
    */
-  extractDirectiveIndexFromMarker(s) {
-    return parseInt(s.data.replace(`${m}:`, ""));
-  },
+  content: 4,
   /**
-   * Creates a placeholder string suitable for marking out a location *within*
-   * an attribute value or HTML content.
-   * @param index - The directive index to create the placeholder for.
-   * @remarks
-   * Used internally by binding directives.
+   * A token list.
    */
-  createInterpolationPlaceholder(s) {
-    return `${se}${s}${R}`;
-  },
+  tokenList: 5,
   /**
-   * Creates a placeholder that manifests itself as an attribute on an
-   * element.
-   * @param attributeName - The name of the custom attribute.
-   * @param index - The directive index to create the placeholder for.
-   * @remarks
-   * Used internally by attribute directives such as `ref`, `slotted`, and `children`.
+   * An event.
    */
-  createCustomAttributePlaceholder(s, e) {
-    return `${s}="${this.createInterpolationPlaceholder(e)}"`;
+  event: 6
+}), pt = (i) => i, be = globalThis.trustedTypes ? globalThis.trustedTypes.createPolicy("fast-html", { createHTML: pt }) : { createHTML: pt };
+let H = Object.freeze({
+  createHTML(i) {
+    return be.createHTML(i);
   },
+  protect(i, t, e, s) {
+    return s;
+  }
+});
+const ge = H, $ = Object.freeze({
   /**
-   * 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`.
+   * Gets the dom policy used by the templating system.
    */
-  createBlockPlaceholder(s) {
-    return `<!--${m}:${s}-->`;
+  get policy() {
+    return H;
   },
   /**
-   * Schedules DOM update work in the next async batch.
-   * @param callable - The callable function or object to queue.
-   */
-  queueUpdate: N.enqueue,
-  /**
-   * Immediately processes all work previously scheduled
-   * through queueUpdate.
+   * Sets the dom policy used by the templating system.
+   * @param policy - The policy to set.
    * @remarks
-   * This also forces nextUpdate promises
-   * to resolve.
-   */
-  processUpdates: N.process,
-  /**
-   * Resolves with the next DOM update.
+   * This API can only be called once, for security reasons. It should be
+   * called by the application developer at the start of their program.
    */
-  nextUpdate() {
-    return new Promise(N.enqueue);
+  setPolicy(i) {
+    if (H !== ge)
+      throw g.error(
+        1201
+        /* Message.onlySetDOMPolicyOnce */
+      );
+    H = i;
   },
   /**
    * Sets an attribute value on an element.
@@ -175,8 +200,8 @@ const m = `fast-${Math.random().toString(36).substring(2, 8)}`, se = `${m}{`, R
    * If the value is `null` or `undefined`, the attribute is removed, otherwise
    * it is set to the provided value using the standard `setAttribute` API.
    */
-  setAttribute(s, e, t) {
-    t == null ? s.removeAttribute(e) : s.setAttribute(e, t);
+  setAttribute(i, t, e) {
+    e == null ? i.removeAttribute(t) : i.setAttribute(t, e);
   },
   /**
    * Sets a boolean attribute value.
@@ -186,218 +211,252 @@ const m = `fast-${Math.random().toString(36).substring(2, 8)}`, se = `${m}{`, R
    * @remarks
    * If the value is true, the attribute is added; otherwise it is removed.
    */
-  setBooleanAttribute(s, e, t) {
-    t ? s.setAttribute(e, "") : s.removeAttribute(e);
-  },
-  /**
-   * Removes all the child nodes of the provided parent node.
-   * @param parent - The node to remove the children from.
-   */
-  removeChildNodes(s) {
-    for (let e = s.firstChild; e !== null; e = s.firstChild)
-      s.removeChild(e);
-  },
-  /**
-   * Creates a TreeWalker configured to walk a template fragment.
-   * @param fragment - The fragment to walk.
-   */
-  createTemplateWalker(s) {
-    return document.createTreeWalker(
-      s,
-      133,
-      // element, text, comment
-      null,
-      !1
-    );
+  setBooleanAttribute(i, t, e) {
+    e ? i.setAttribute(t, "") : i.removeAttribute(t);
+  }
+}), Ut = g.getById(k.updateQueue, () => {
+  const i = [], t = [], e = globalThis.requestAnimationFrame;
+  let s = !0;
+  function n() {
+    if (t.length)
+      throw t.shift();
+  }
+  function r(d) {
+    try {
+      d.call();
+    } catch (l) {
+      if (s)
+        t.push(l), setTimeout(n, 0);
+      else
+        throw i.length = 0, l;
+    }
+  }
+  function a() {
+    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];
+        i.length -= l, l = 0;
+      }
+    i.length = 0;
+  }
+  function c(d) {
+    i.push(d), i.length < 2 && (s ? e(a) : a());
   }
+  return Object.freeze({
+    enqueue: c,
+    next: () => new Promise(c),
+    process: a,
+    setMode: (d) => s = d
+  });
 });
-class I {
+class rt {
   /**
-   * Creates an instance of SubscriberSet for the specified source.
-   * @param source - The object source that subscribers will receive notifications from.
+   * Creates an instance of SubscriberSet for the specified subject.
+   * @param subject - The subject that subscribers will receive notifications from.
    * @param initialSubscriber - An initial subscriber to changes.
    */
-  constructor(e, t) {
-    this.sub1 = void 0, this.sub2 = void 0, this.spillover = void 0, this.source = e, this.sub1 = t;
+  constructor(t, e) {
+    this.sub1 = void 0, this.sub2 = void 0, this.spillover = void 0, this.subject = t, this.sub1 = e;
   }
   /**
    * Checks whether the provided subscriber has been added to this set.
    * @param subscriber - The subscriber to test for inclusion in this set.
    */
-  has(e) {
-    return this.spillover === void 0 ? this.sub1 === e || this.sub2 === e : this.spillover.indexOf(e) !== -1;
+  has(t) {
+    return this.spillover === void 0 ? this.sub1 === t || this.sub2 === t : this.spillover.indexOf(t) !== -1;
   }
   /**
    * Subscribes to notification of changes in an object's state.
    * @param subscriber - The object that is subscribing for change notification.
    */
-  subscribe(e) {
-    const t = this.spillover;
-    if (t === void 0) {
-      if (this.has(e))
+  subscribe(t) {
+    const e = this.spillover;
+    if (e === void 0) {
+      if (this.has(t))
         return;
       if (this.sub1 === void 0) {
-        this.sub1 = e;
+        this.sub1 = t;
         return;
       }
       if (this.sub2 === void 0) {
-        this.sub2 = e;
+        this.sub2 = t;
         return;
       }
-      this.spillover = [this.sub1, this.sub2, e], this.sub1 = void 0, this.sub2 = void 0;
+      this.spillover = [this.sub1, this.sub2, t], this.sub1 = void 0, this.sub2 = void 0;
     } else
-      t.indexOf(e) === -1 && t.push(e);
+      e.indexOf(t) === -1 && e.push(t);
   }
   /**
    * Unsubscribes from notification of changes in an object's state.
    * @param subscriber - The object that is unsubscribing from change notification.
    */
-  unsubscribe(e) {
-    const t = this.spillover;
-    if (t === void 0)
-      this.sub1 === e ? this.sub1 = void 0 : this.sub2 === e && (this.sub2 = void 0);
+  unsubscribe(t) {
+    const e = this.spillover;
+    if (e === void 0)
+      this.sub1 === t ? this.sub1 = void 0 : this.sub2 === t && (this.sub2 = void 0);
     else {
-      const i = t.indexOf(e);
-      i !== -1 && t.splice(i, 1);
+      const s = e.indexOf(t);
+      s !== -1 && e.splice(s, 1);
     }
   }
   /**
    * Notifies all subscribers.
    * @param args - Data passed along to subscribers during notification.
    */
-  notify(e) {
-    const t = this.spillover, i = this.source;
-    if (t === void 0) {
+  notify(t) {
+    const e = this.spillover, s = this.subject;
+    if (e === void 0) {
       const n = this.sub1, r = this.sub2;
-      n !== void 0 && n.handleChange(i, e), r !== void 0 && r.handleChange(i, e);
+      n !== void 0 && n.handleChange(s, t), r !== void 0 && r.handleChange(s, t);
     } else
-      for (let n = 0, r = t.length; n < r; ++n)
-        t[n].handleChange(i, e);
+      for (let n = 0, r = e.length; n < r; ++n)
+        e[n].handleChange(s, t);
   }
 }
-class ie {
+class Wt {
   /**
-   * Creates an instance of PropertyChangeNotifier for the specified source.
-   * @param source - The object source that subscribers will receive notifications from.
+   * Creates an instance of PropertyChangeNotifier for the specified subject.
+   * @param subject - The object that subscribers will receive notifications for.
    */
-  constructor(e) {
-    this.subscribers = {}, this.sourceSubscribers = null, this.source = e;
+  constructor(t) {
+    this.subscribers = {}, this.subjectSubscribers = null, this.subject = t;
   }
   /**
    * Notifies all subscribers, based on the specified property.
    * @param propertyName - The property name, passed along to subscribers during notification.
    */
-  notify(e) {
-    var t;
-    const i = this.subscribers[e];
-    i !== void 0 && i.notify(e), (t = this.sourceSubscribers) === null || t === void 0 || t.notify(e);
+  notify(t) {
+    var e, s;
+    (e = this.subscribers[t]) === null || e === void 0 || e.notify(t), (s = this.subjectSubscribers) === null || s === void 0 || s.notify(t);
   }
   /**
    * Subscribes to notification of changes in an object's state.
    * @param subscriber - The object that is subscribing for change notification.
    * @param propertyToWatch - The name of the property that the subscriber is interested in watching for changes.
    */
-  subscribe(e, t) {
-    var i;
-    if (t) {
-      let n = this.subscribers[t];
-      n === void 0 && (this.subscribers[t] = n = new I(this.source)), n.subscribe(e);
-    } else
-      this.sourceSubscribers = (i = this.sourceSubscribers) !== null && i !== void 0 ? i : new I(this.source), this.sourceSubscribers.subscribe(e);
+  subscribe(t, e) {
+    var s, n;
+    let r;
+    e ? r = (s = this.subscribers[e]) !== null && s !== void 0 ? s : this.subscribers[e] = new rt(this.subject) : r = (n = this.subjectSubscribers) !== null && n !== void 0 ? n : this.subjectSubscribers = new rt(this.subject), r.subscribe(t);
   }
   /**
    * Unsubscribes from notification of changes in an object's state.
    * @param subscriber - The object that is unsubscribing from change notification.
    * @param propertyToUnwatch - The name of the property that the subscriber is no longer interested in watching.
    */
-  unsubscribe(e, t) {
-    var i;
-    if (t) {
-      const n = this.subscribers[t];
-      n !== void 0 && n.unsubscribe(e);
-    } else
-      (i = this.sourceSubscribers) === null || i === void 0 || i.unsubscribe(e);
+  unsubscribe(t, e) {
+    var s, n;
+    e ? (s = this.subscribers[e]) === null || s === void 0 || s.unsubscribe(t) : (n = this.subjectSubscribers) === null || n === void 0 || n.unsubscribe(t);
   }
 }
-const b = S.getById(2, () => {
-  const s = /(:|&&|\|\||if)/, e = /* @__PURE__ */ new WeakMap(), t = u.queueUpdate;
-  let i, n = (l) => {
-    throw new Error("Must call enableArrayObservation before observing arrays.");
+const G = Object.freeze({
+  /**
+   * The source to controller lifetime relationship is unknown.
+   */
+  unknown: void 0,
+  /**
+   * The source and controller lifetimes are coupled to one another.
+   * They can/will be GC'd together.
+   */
+  coupled: 1
+}), p = g.getById(k.observable, () => {
+  const i = Ut.enqueue, t = /(:|&&|\|\||if|\?\.)/, e = /* @__PURE__ */ new WeakMap();
+  let s, n = (l) => {
+    throw g.error(
+      1101
+      /* Message.needsArrayObservation */
+    );
   };
   function r(l) {
-    let h = l.$fastController || e.get(l);
-    return h === void 0 && (Array.isArray(l) ? h = n(l) : e.set(l, h = new ie(l))), h;
-  }
-  const o = _();
-  class a {
-    constructor(h) {
-      this.name = h, this.field = `_${h}`, this.callback = `${h}Changed`;
-    }
-    getValue(h) {
-      return i !== void 0 && i.watch(h, this.name), h[this.field];
-    }
-    setValue(h, d) {
-      const f = this.field, y = h[f];
-      if (y !== d) {
-        h[f] = d;
-        const p = h[this.callback];
-        typeof p == "function" && p.call(h, y, d), r(h).notify(this.name);
+    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;
+  }
+  const a = 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, y = o[u];
+      if (y !== h) {
+        o[u] = h;
+        const C = o[this.callback];
+        O(C) && C.call(o, y, h), r(o).notify(this.name);
       }
     }
   }
-  class c extends I {
-    constructor(h, d, f = !1) {
-      super(h, d), this.binding = h, this.isVolatileBinding = f, this.needsRefresh = !0, this.needsQueue = !0, this.first = this, this.last = null, this.propertySource = void 0, this.propertyName = void 0, this.notifier = void 0, this.next = void 0;
+  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;
+    }
+    setMode(o) {
+      this.isAsync = this.needsQueue = o;
+    }
+    bind(o) {
+      this.controller = o;
+      const h = this.observe(o.source, o.context);
+      return !o.isBound && this.requiresUnbind(o) && o.onUnbind(this), h;
     }
-    observe(h, d) {
-      this.needsRefresh && this.last !== null && this.disconnect();
-      const f = i;
-      i = this.needsRefresh ? this : void 0, this.needsRefresh = this.isVolatileBinding;
-      const y = this.binding(h, d);
-      return i = f, y;
+    requiresUnbind(o) {
+      return o.sourceLifetime !== G.coupled || this.first !== this.last || this.first.propertySource !== o.source;
+    }
+    unbind(o) {
+      this.dispose();
+    }
+    observe(o, h) {
+      this.needsRefresh && this.last !== null && this.dispose();
+      const u = s;
+      s = this.needsRefresh ? this : void 0, this.needsRefresh = this.isVolatileBinding;
+      let y;
+      try {
+        y = this.expression(o, h);
+      } finally {
+        s = u;
+      }
+      return y;
     }
+    // backwards compat with v1 kernel
     disconnect() {
+      this.dispose();
+    }
+    dispose() {
       if (this.last !== null) {
-        let h = this.first;
-        for (; h !== void 0; )
-          h.notifier.unsubscribe(this, h.propertyName), h = h.next;
-        this.last = null, this.needsRefresh = this.needsQueue = !0;
+        let o = this.first;
+        for (; o !== void 0; )
+          o.notifier.unsubscribe(this, o.propertyName), o = o.next;
+        this.last = null, this.needsRefresh = this.needsQueue = this.isAsync;
       }
     }
-    watch(h, d) {
-      const f = this.last, y = r(h), p = f === null ? this.first : {};
-      if (p.propertySource = h, p.propertyName = d, p.notifier = y, y.subscribe(this, d), f !== null) {
+    watch(o, h) {
+      const u = this.last, y = r(o), C = u === null ? this.first : {};
+      if (C.propertySource = o, C.propertyName = h, C.notifier = y, y.subscribe(this, h), u !== null) {
         if (!this.needsRefresh) {
-          let z;
-          i = void 0, z = f.propertySource[f.propertyName], i = this, h === z && (this.needsRefresh = !0);
+          let ut;
+          s = void 0, ut = u.propertySource[u.propertyName], s = this, o === ut && (this.needsRefresh = !0);
         }
-        f.next = p;
+        u.next = C;
       }
-      this.last = p;
+      this.last = C;
     }
     handleChange() {
-      this.needsQueue && (this.needsQueue = !1, t(this));
+      this.needsQueue ? (this.needsQueue = !1, i(this)) : this.isAsync || this.call();
     }
     call() {
-      this.last !== null && (this.needsQueue = !0, this.notify(this));
-    }
-    records() {
-      let h = this.first;
-      return {
-        next: () => {
-          const d = h;
-          return d === void 0 ? { value: void 0, done: !0 } : (h = h.next, {
-            value: d,
-            done: !1
-          });
-        },
-        [Symbol.iterator]: function() {
-          return this;
-        }
-      };
+      this.last !== null && (this.needsQueue = this.isAsync, this.notify(this));
+    }
+    *records() {
+      let o = this.first;
+      for (; o !== void 0; )
+        yield o, o = o.next;
     }
   }
-  return Object.freeze({
+  return x(d), Object.freeze({
     /**
      * @internal
      * @param factory - The factory used to create array observers.
@@ -415,23 +474,23 @@ const b = S.getById(2, () => {
      * @param source - The object to record the change against.
      * @param propertyName - The property to track as changed.
      */
-    track(l, h) {
-      i !== void 0 && i.watch(l, h);
+    track(l, o) {
+      s && s.watch(l, o);
     },
     /**
      * Notifies watchers that the currently executing property getter or function is volatile
      * with respect to its observable dependencies.
      */
     trackVolatile() {
-      i !== void 0 && (i.needsRefresh = !0);
+      s && (s.needsRefresh = !0);
     },
     /**
      * Notifies subscribers of a source object of changes.
      * @param source - the object to notify of changes.
      * @param args - The change args to pass to subscribers.
      */
-    notify(l, h) {
-      r(l).notify(h);
+    notify(l, o) {
+      r(l).notify(o);
     },
     /**
      * Defines an observable property on an object or prototype.
@@ -439,14 +498,14 @@ const b = S.getById(2, () => {
      * @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, h) {
-      typeof h == "string" && (h = new a(h)), o(l).push(h), Reflect.defineProperty(l, h.name, {
+    defineProperty(l, o) {
+      B(o) && (o = new c(o)), a(l).push(o), Reflect.defineProperty(l, o.name, {
         enumerable: !0,
-        get: function() {
-          return h.getValue(this);
+        get() {
+          return o.getValue(this);
         },
-        set: function(d) {
-          h.setValue(this, d);
+        set(h) {
+          o.setValue(this, h);
         }
       });
     },
@@ -455,57 +514,532 @@ const b = S.getById(2, () => {
      * including its prototype chain.
      * @param target - The target object to search for accessor on.
      */
-    getAccessors: o,
+    getAccessors: a,
     /**
-     * Creates a {@link BindingObserver} that can watch the
-     * provided {@link Binding} for changes.
-     * @param binding - The binding to observe.
+     * Creates a {@link ExpressionNotifier} that can watch the
+     * provided {@link Expression} for changes.
+     * @param expression - The binding to observe.
      * @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, h, d = this.isVolatileBinding(l)) {
-      return new c(l, h, d);
+    binding(l, o, h = this.isVolatileBinding(l)) {
+      return new d(l, o, h);
     },
     /**
      * Determines whether a binding expression is volatile and needs to have its dependency list re-evaluated
      * on every evaluation of the value.
-     * @param binding - The binding to inspect.
+     * @param expression - The binding to inspect.
      */
     isVolatileBinding(l) {
-      return s.test(l.toString());
+      return t.test(l.toString());
     }
   });
 });
-function Ge(s, e) {
-  b.defineProperty(s, e);
+function hi(i, t) {
+  p.defineProperty(i, t);
 }
-function Je(s, e, t) {
-  return Object.assign({}, t, {
-    get: function() {
-      return b.trackVolatile(), t.get.apply(this);
+function ui(i, t, e) {
+  return Object.assign({}, e, {
+    get() {
+      return p.trackVolatile(), e.get.apply(this);
     }
   });
 }
-const q = S.getById(3, () => {
-  let s = null;
+const bt = g.getById(k.contextEvent, () => {
+  let i = null;
   return {
     get() {
-      return s;
+      return i;
     },
-    set(e) {
-      s = e;
+    set(t) {
+      i = t;
     }
   };
+}), M = Object.freeze({
+  /**
+   * A default execution context.
+   */
+  default: {
+    index: 0,
+    length: 0,
+    get event() {
+      return M.getEvent();
+    },
+    eventDetail() {
+      return this.event.detail;
+    },
+    eventTarget() {
+      return this.event.target;
+    }
+  },
+  /**
+   * Gets the current event.
+   * @returns An event object.
+   */
+  getEvent() {
+    return bt.get();
+  },
+  /**
+   * Sets the current event.
+   * @param event - An event object.
+   */
+  setEvent(i) {
+    bt.set(i);
+  }
+});
+class lt {
+  /**
+   * Creates a binding.
+   * @param evaluate - Evaluates the binding.
+   * @param policy - The security policy to associate with this binding.
+   * @param isVolatile - Indicates whether the binding is volatile.
+   */
+  constructor(t, e, s = !1) {
+    this.evaluate = t, this.policy = e, this.isVolatile = s;
+  }
+}
+class ye extends lt {
+  createObserver(t) {
+    return p.binding(this.evaluate, t, this.isVolatile);
+  }
+}
+function qt(i, t, e = p.isVolatileBinding(i)) {
+  return new ye(i, t, e);
+}
+class Qt extends lt {
+  createObserver() {
+    return this;
+  }
+  bind(t) {
+    return this.evaluate(t.source, t.context);
+  }
+}
+x(Qt);
+function Gt(i, t) {
+  return new Qt(i, t);
+}
+let gt;
+function Jt(i) {
+  return i.map((t) => t instanceof v ? Jt(t.styles) : [t]).reduce((t, e) => t.concat(e), []);
+}
+class v {
+  /**
+   * Creates an instance of ElementStyles.
+   * @param styles - The styles that will be associated with elements.
+   */
+  constructor(t) {
+    this.styles = t, this.targets = /* @__PURE__ */ new WeakSet(), this._strategy = null, this.behaviors = t.map((e) => e instanceof v ? e.behaviors : null).reduce((e, s) => s === null ? e : e === null ? s : e.concat(s), null);
+  }
+  /**
+   * Gets the StyleStrategy associated with these element styles.
+   */
+  get strategy() {
+    return this._strategy === null && this.withStrategy(gt), this._strategy;
+  }
+  /** @internal */
+  addStylesTo(t) {
+    this.strategy.addStylesTo(t), this.targets.add(t);
+  }
+  /** @internal */
+  removeStylesFrom(t) {
+    this.strategy.removeStylesFrom(t), this.targets.delete(t);
+  }
+  /** @internal */
+  isAttachedTo(t) {
+    return this.targets.has(t);
+  }
+  /**
+   * Associates behaviors with this set of styles.
+   * @param behaviors - The behaviors to associate.
+   */
+  withBehaviors(...t) {
+    return this.behaviors = this.behaviors === null ? t : this.behaviors.concat(t), this;
+  }
+  /**
+   * Sets the strategy that handles adding/removing these styles for an element.
+   * @param strategy - The strategy to use.
+   */
+  withStrategy(t) {
+    return this._strategy = new t(Jt(this.styles)), this;
+  }
+  /**
+   * Sets the default strategy type to use when creating style strategies.
+   * @param Strategy - The strategy type to construct.
+   */
+  static setDefaultStrategy(t) {
+    gt = t;
+  }
+  /**
+   * Normalizes a set of composable style options.
+   * @param styles - The style options to normalize.
+   * @returns A singular ElementStyles instance or undefined.
+   */
+  static normalize(t) {
+    return t === void 0 ? void 0 : Array.isArray(t) ? new v(t) : t instanceof v ? t : new v([t]);
+  }
+}
+v.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) {
+  return i && i.nodeType === Node.COMMENT_NODE;
+}
+const m = Object.freeze({
+  attributeMarkerName: "data-fe-b",
+  attributeBindingSeparator: " ",
+  contentBindingStartMarker(i, t) {
+    return `fe-b$$start$$${i}$$${t}$$fe-b`;
+  },
+  contentBindingEndMarker(i, t) {
+    return `fe-b$$end$$${i}$$${t}$$fe-b`;
+  },
+  repeatStartMarker(i) {
+    return `fe-repeat$$start$$${i}$$fe-repeat`;
+  },
+  repeatEndMarker(i) {
+    return `fe-repeat$$end$$${i}$$fe-repeat`;
+  },
+  isContentBindingStartMarker(i) {
+    return yt.test(i);
+  },
+  isContentBindingEndMarker(i) {
+    return vt.test(i);
+  },
+  isRepeatViewStartMarker(i) {
+    return mt.test(i);
+  },
+  isRepeatViewEndMarker(i) {
+    return wt.test(i);
+  },
+  isElementBoundaryStartMarker(i) {
+    return $t(i) && St.test(i.data.trim());
+  },
+  isElementBoundaryEndMarker(i) {
+    return $t(i) && Ct.test(i.data);
+  },
+  /**
+   * Returns the indexes of the ViewBehaviorFactories affecting
+   * attributes for the element, or null if no factories were found.
+   */
+  parseAttributeBinding(i) {
+    const t = i.getAttribute(this.attributeMarkerName);
+    return t === null ? t : t.split(this.attributeBindingSeparator).map((e) => parseInt(e));
+  },
+  /**
+   * Returns the indexes of the ViewBehaviorFactories affecting
+   * attributes for the element, or null if no factories were found.
+   *
+   * Uses the alternative syntax of data-fe-b-<number>
+   */
+  parseEnumeratedAttributeBinding(i) {
+    const t = [], e = this.attributeMarkerName.length + 1, s = `${this.attributeMarkerName}-`;
+    for (const n of i.getAttributeNames())
+      if (n.startsWith(s)) {
+        const r = Number(n.slice(e));
+        if (!Number.isNaN(r))
+          t.push(r);
+        else
+          throw new Error(`Invalid attribute marker name: ${n}. Expected format is ${s}<number>.`);
+      }
+    return t.length === 0 ? null : t;
+  },
+  /**
+   * Parses the ViewBehaviorFactory index from string data. Returns
+   * the binding index or null if the index cannot be retrieved.
+   */
+  parseContentBindingStartMarker(i) {
+    return kt(yt, i);
+  },
+  parseContentBindingEndMarker(i) {
+    return kt(vt, i);
+  },
+  /**
+   * Parses the index of a repeat directive from a content string.
+   */
+  parseRepeatStartMarker(i) {
+    return Tt(mt, i);
+  },
+  parseRepeatEndMarker(i) {
+    return Tt(wt, i);
+  },
+  /**
+   * Parses element Id from element boundary markers
+   */
+  parseElementBoundaryStartMarker(i) {
+    return Nt(St, i.trim());
+  },
+  parseElementBoundaryEndMarker(i) {
+    return Nt(Ct, i);
+  }
+});
+function Tt(i, t) {
+  const e = i.exec(t);
+  return e === null ? e : parseInt(e[1]);
+}
+function Nt(i, t) {
+  const e = i.exec(t);
+  return e === null ? e : e[1];
+}
+function kt(i, t) {
+  const e = i.exec(t);
+  return e === null ? e : [parseInt(e[1]), e[2]];
+}
+const D = Symbol.for("fe-hydration");
+function z(i) {
+  return i[D] === D;
+}
+const ct = `fast-${Math.random().toString(36).substring(2, 8)}`, I = `${ct}{`, _ = `}${ct}`, ve = _.length;
+let me = 0;
+const L = () => `${ct}-${++me}`, Kt = Object.freeze({
+  /**
+   * Creates a placeholder string suitable for marking out a location *within*
+   * an attribute value or HTML content.
+   * @param index - The directive index to create the placeholder for.
+   * @remarks
+   * Used internally by binding directives.
+   */
+  interpolation: (i) => `${I}${i}${_}`,
+  /**
+   * Creates a placeholder that manifests itself as an attribute on an
+   * element.
+   * @param attributeName - The name of the custom attribute.
+   * @param index - The directive index to create the placeholder for.
+   * @remarks
+   * Used internally by attribute directives such as `ref`, `slotted`, and `children`.
+   */
+  attribute: (i) => `${L()}="${I}${i}${_}"`,
+  /**
+   * 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) => `<!--${I}${i}${_}-->`
+}), J = Object.freeze({
+  /**
+   * Parses text content or HTML attribute content, separating out the static strings
+   * from the directives.
+   * @param value - The content or attribute string to parse.
+   * @param factories - A list of directives to search for in the string.
+   * @returns A heterogeneous array of static strings interspersed with
+   * directives or null if no directives are found in the string.
+   */
+  parse(i, t) {
+    const e = i.split(I);
+    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(_);
+      let d;
+      if (c === -1)
+        d = a;
+      else {
+        const l = a.substring(0, c);
+        s.push(t[l]), d = a.substring(c + ve);
+      }
+      d !== "" && s.push(d);
+    }
+    return s;
+  }
+}), tt = Dt(), T = Object.freeze({
+  /**
+   * Gets the directive definition associated with the instance.
+   * @param instance - The directive instance to retrieve the definition for.
+   */
+  getForInstance: tt.getForInstance,
+  /**
+   * Gets the directive definition associated with the specified type.
+   * @param type - The directive type to retrieve the definition for.
+   */
+  getByType: tt.getByType,
+  /**
+   * Defines an HTMLDirective based on the options.
+   * @param type - The type to define as a directive.
+   * @param options - Options that specify the directive's application.
+   */
+  define(i, t) {
+    return t = t || {}, t.type = i, tt.register(t), i;
+  },
+  /**
+   *
+   * @param directive - The directive to assign the aspect to.
+   * @param value - The value to base the aspect determination on.
+   * @remarks
+   * If a falsy value is provided, then the content aspect will be assigned.
+   */
+  assignAspect(i, t) {
+    if (!t) {
+      i.aspectType = b.content;
+      return;
+    }
+    switch (i.sourceAspect = t, t[0]) {
+      case ":":
+        i.targetAspect = t.substring(1), i.aspectType = i.targetAspect === "classList" ? b.tokenList : b.property;
+        break;
+      case "?":
+        i.targetAspect = t.substring(1), i.aspectType = b.booleanAttribute;
+        break;
+      case "@":
+        i.targetAspect = t.substring(1), i.aspectType = b.event;
+        break;
+      default:
+        i.targetAspect = t, i.aspectType = b.attribute;
+        break;
+    }
+  }
 });
-class C {
+class we {
+  /**
+   * Creates an instance of RefDirective.
+   * @param options - The options to use in configuring the directive.
+   */
+  constructor(t) {
+    this.options = t;
+  }
+  /**
+   * Creates a placeholder string based on the directive's index within the template.
+   * @param index - The index of the directive within the template.
+   * @remarks
+   * Creates a custom attribute placeholder.
+   */
+  createHTML(t) {
+    return Kt.attribute(t(this));
+  }
+  /**
+   * Creates a behavior.
+   * @param targets - The targets available for behaviors to be attached to.
+   */
+  createBehavior() {
+    return this;
+  }
+}
+x(we);
+class Xt extends Error {
+  constructor(t, e, s) {
+    super(t), this.factories = e, this.node = s;
+  }
+}
+function dt(i) {
+  return i.nodeType === Node.COMMENT_NODE;
+}
+function Yt(i) {
+  return i.nodeType === Node.TEXT_NODE;
+}
+function Zt(i, t) {
+  const e = document.createRange();
+  return e.setStart(i, 0), e.setEnd(t, dt(t) || Yt(t) ? t.data.length : t.childNodes.length), e;
+}
+function Se(i) {
+  return i instanceof DocumentFragment && "mode" in i;
+}
+function Ce(i, t, e) {
+  const s = Zt(i, t), n = s.commonAncestorContainer, r = document.createTreeWalker(n, NodeFilter.SHOW_ELEMENT + NodeFilter.SHOW_COMMENT + NodeFilter.SHOW_TEXT, {
+    acceptNode(l) {
+      return s.comparePoint(l, 0) === 0 ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_REJECT;
+    }
+  }), a = {}, c = {};
+  let d = r.currentNode = i;
+  for (; d !== null; ) {
+    switch (d.nodeType) {
+      case Node.ELEMENT_NODE: {
+        $e(d, e, a);
+        break;
+      }
+      case Node.COMMENT_NODE: {
+        Te(d, r, e, a, c);
+        break;
+      }
+    }
+    d = r.nextNode();
+  }
+  return s.detach(), { targets: a, boundaries: c };
+}
+function $e(i, t, e) {
+  var s;
+  const n = (s = m.parseAttributeBinding(i)) !== null && s !== void 0 ? s : m.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);
+      U(t[r], i, e);
+    }
+    i.removeAttribute(m.attributeMarkerName);
+  }
+}
+function Te(i, t, e, s, n) {
+  if (m.isElementBoundaryStartMarker(i)) {
+    Ne(i, t);
+    return;
+  }
+  if (m.isContentBindingStartMarker(i.data)) {
+    const r = m.parseContentBindingStartMarker(i.data);
+    if (r === null)
+      return;
+    const [a, c] = r, d = e[a], l = [];
+    let o = t.nextSibling();
+    i.data = "";
+    const h = o;
+    for (; o !== null; ) {
+      if (dt(o)) {
+        const u = m.parseContentBindingEndMarker(o.data);
+        if (u && u[1] === c)
+          break;
+      }
+      l.push(o), o = t.nextSibling();
+    }
+    if (o === 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]))
+      U(d, l[0], s);
+    else {
+      o !== h && o.previousSibling !== null && (n[d.targetNodeId] = {
+        first: h,
+        last: o.previousSibling
+      });
+      const u = o.parentNode.insertBefore(document.createTextNode(""), o);
+      U(d, u, s);
+    }
+  }
+}
+function Ne(i, t) {
+  const e = m.parseElementBoundaryStartMarker(i.data);
+  let s = t.nextSibling();
+  for (; s !== null; ) {
+    if (dt(s)) {
+      const n = m.parseElementBoundaryEndMarker(s.data);
+      if (n && n === e)
+        break;
+    }
+    s = t.nextSibling();
+  }
+}
+function U(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) {
+  const e = i.parentNode;
+  let s = i, n;
+  for (; s !== t; ) {
+    if (n = s.nextSibling, !n)
+      throw new Error(`Unmatched first/last child inside "${t.getRootNode().host.nodeName}".`);
+    e.removeChild(s), s = n;
+  }
+  e.removeChild(t);
+}
+class ee {
   constructor() {
-    this.index = 0, this.length = 0, this.parent = null, this.parentContext = null;
+    this.index = 0, this.length = 0;
   }
   /**
    * The current event within an event handler.
    */
   get event() {
-    return q.get();
+    return M.getEvent();
   }
   /**
    * Indicates whether the current item within a repeat context
@@ -543,441 +1077,623 @@ class C {
     return this.index === this.length - 1;
   }
   /**
-   * Sets the event for the current execution context.
-   * @param event - The event to set.
-   * @internal
+   * Returns the typed event detail of a custom event.
    */
-  static setEvent(e) {
-    q.set(e);
+  eventDetail() {
+    return this.event.detail;
   }
-}
-b.defineProperty(C.prototype, "index");
-b.defineProperty(C.prototype, "length");
-const w = Object.seal(new C());
-class P {
-  constructor() {
-    this.targetIndex = 0;
+  /**
+   * Returns the typed event target of the event.
+   */
+  eventTarget() {
+    return this.event.target;
   }
 }
-class ne extends P {
-  constructor() {
-    super(...arguments), this.createPlaceholder = u.createInterpolationPlaceholder;
+class K extends ee {
+  /**
+   * Constructs an instance of HTMLView.
+   * @param fragment - The html fragment that contains the nodes for this view.
+   * @param behaviors - The behaviors to be applied to this view.
+   */
+  constructor(t, e, s) {
+    super(), this.fragment = t, this.factories = e, this.targets = s, this.behaviors = null, this.unbindables = [], this.source = null, this.isBound = !1, this.sourceLifetime = G.unknown, this.context = this, this.firstChild = t.firstChild, this.lastChild = t.lastChild;
   }
-}
-class Xe extends P {
   /**
-   *
-   * @param name - The name of the behavior; used as a custom attribute on the element.
-   * @param behavior - The behavior to instantiate and attach to the element.
-   * @param options - Options to pass to the behavior during creation.
+   * Appends the view's DOM nodes to the referenced node.
+   * @param node - The parent node to append the view's DOM nodes to.
    */
-  constructor(e, t, i) {
-    super(), this.name = e, this.behavior = t, this.options = i;
+  appendTo(t) {
+    t.appendChild(this.fragment);
   }
   /**
-   * Creates a placeholder string based on the directive's index within the template.
-   * @param index - The index of the directive within the template.
-   * @remarks
-   * Creates a custom attribute placeholder.
+   * Inserts the view's DOM nodes before the referenced node.
+   * @param node - The node to insert the view's DOM before.
    */
-  createPlaceholder(e) {
-    return u.createCustomAttributePlaceholder(this.name, e);
+  insertBefore(t) {
+    if (this.fragment.hasChildNodes())
+      t.parentNode.insertBefore(this.fragment, t);
+    else {
+      const e = this.lastChild;
+      if (t.previousSibling === e)
+        return;
+      const s = t.parentNode;
+      let n = this.firstChild, r;
+      for (; n !== e; )
+        r = n.nextSibling, s.insertBefore(n, t), n = r;
+      s.insertBefore(e, t);
+    }
   }
   /**
-   * Creates a behavior for the provided target node.
-   * @param target - The node instance to create the behavior for.
-   * @remarks
-   * Creates an instance of the `behavior` type this directive was constructed with
-   * and passes the target and options to that `behavior`'s constructor.
+   * Removes the view's DOM nodes.
+   * The nodes are not disposed and the view can later be re-inserted.
    */
-  createBehavior(e) {
-    return new this.behavior(e, this.options);
+  remove() {
+    const t = this.fragment, e = this.lastChild;
+    let s = this.firstChild, n;
+    for (; s !== e; )
+      n = s.nextSibling, t.appendChild(s), s = n;
+    t.appendChild(e);
+  }
+  /**
+   * Removes the view and unbinds its behaviors, disposing of DOM nodes afterward.
+   * Once a view has been disposed, it cannot be inserted or bound again.
+   */
+  dispose() {
+    ot(this.firstChild, this.lastChild), this.unbind();
+  }
+  onUnbind(t) {
+    this.unbindables.push(t);
+  }
+  /**
+   * Binds a view's behaviors to its binding source.
+   * @param source - The binding source for the view's binding behaviors.
+   * @param context - The execution context to run the behaviors within.
+   */
+  bind(t, e = this) {
+    if (this.source === t)
+      return;
+    let s = this.behaviors;
+    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) {
+        const c = n[r].createBehavior();
+        c.bind(this), s[r] = c;
+      }
+    } else {
+      this.source !== null && this.evaluateUnbindables(), this.isBound = !1, this.source = t, this.context = e;
+      for (let n = 0, r = s.length; n < r; ++n)
+        s[n].bind(this);
+    }
+    this.isBound = !0;
+  }
+  /**
+   * Unbinds a view's behaviors from its binding source.
+   */
+  unbind() {
+    !this.isBound || this.source === null || (this.evaluateUnbindables(), this.source = null, this.context = this, this.isBound = !1);
+  }
+  evaluateUnbindables() {
+    const t = this.unbindables;
+    for (let e = 0, s = t.length; e < s; ++e)
+      t[e].unbind(this);
+    t.length = 0;
+  }
+  /**
+   * Efficiently disposes of a contiguous range of synthetic view instances.
+   * @param views - A contiguous range of views to be disposed.
+   */
+  static disposeContiguousBatch(t) {
+    if (t.length !== 0) {
+      ot(t[0].firstChild, t[t.length - 1].lastChild);
+      for (let e = 0, s = t.length; e < s; ++e)
+        t[e].unbind();
+    }
   }
 }
-function be(s, e) {
-  this.source = s, this.context = e, this.bindingObserver === null && (this.bindingObserver = b.binding(this.binding, this, this.isBindingVolatile)), this.updateTarget(this.bindingObserver.observe(s, e));
-}
-function pe(s, e) {
-  this.source = s, this.context = e, this.target.addEventListener(this.targetName, this);
-}
-function ge() {
-  this.bindingObserver.disconnect(), this.source = null, this.context = null;
-}
-function ve() {
-  this.bindingObserver.disconnect(), this.source = null, this.context = null;
-  const s = this.target.$fastView;
-  s !== void 0 && s.isComposed && (s.unbind(), s.needsBindOnly = !0);
-}
-function ye() {
-  this.target.removeEventListener(this.targetName, this), this.source = null, this.context = null;
+x(K);
+p.defineProperty(K.prototype, "index");
+p.defineProperty(K.prototype, "length");
+const A = {
+  unhydrated: "unhydrated",
+  hydrating: "hydrating",
+  hydrated: "hydrated"
+};
+class ke extends Error {
+  constructor(t, e, s, n) {
+    super(t), this.factory = e, this.fragment = s, this.templateString = n;
+  }
 }
-function me(s) {
-  u.setAttribute(this.target, this.targetName, s);
+class Be extends ee {
+  constructor(t, e, s, n) {
+    super(), this.firstChild = t, this.lastChild = e, this.sourceTemplate = s, this.hostBindingTarget = n, this[te] = D, this.context = this, this.source = null, this.isBound = !1, this.sourceLifetime = G.unknown, this.unbindables = [], this.fragment = null, this.behaviors = null, this._hydrationStage = A.unhydrated, this._bindingViewBoundaries = {}, this._targets = {}, this.factories = s.compile().factories;
+  }
+  get hydrationStage() {
+    return this._hydrationStage;
+  }
+  get targets() {
+    return this._targets;
+  }
+  get bindingViewBoundaries() {
+    return this._bindingViewBoundaries;
+  }
+  /**
+   * no-op. Hydrated views are don't need to be moved from a documentFragment
+   * to the target node.
+   */
+  insertBefore(t) {
+    if (this.fragment !== null)
+      if (this.fragment.hasChildNodes())
+        t.parentNode.insertBefore(this.fragment, t);
+      else {
+        const e = this.lastChild;
+        if (t.previousSibling === e)
+          return;
+        const s = t.parentNode;
+        let n = this.firstChild, r;
+        for (; n !== e; )
+          r = n.nextSibling, s.insertBefore(n, t), n = r;
+        s.insertBefore(e, t);
+      }
+  }
+  /**
+   * Appends the view to a node. In cases where this is called before the
+   * view has been removed, the method will no-op.
+   * @param node - the node to append the view to.
+   */
+  appendTo(t) {
+    this.fragment !== null && t.appendChild(this.fragment);
+  }
+  remove() {
+    const t = this.fragment || (this.fragment = document.createDocumentFragment()), e = this.lastChild;
+    let s = this.firstChild, n;
+    for (; s !== e; ) {
+      if (n = s.nextSibling, !n)
+        throw new Error(`Unmatched first/last child inside "${e.getRootNode().host.nodeName}".`);
+      t.appendChild(s), s = n;
+    }
+    t.appendChild(e);
+  }
+  bind(t, e = this) {
+    var s, n;
+    if (this.hydrationStage !== A.hydrated && (this._hydrationStage = A.hydrating), this.source === t)
+      return;
+    let r = this.behaviors;
+    if (r === null) {
+      this.source = t, this.context = e;
+      try {
+        const { targets: c, boundaries: d } = Ce(this.firstChild, this.lastChild, this.factories);
+        this._targets = c, this._bindingViewBoundaries = d;
+      } catch (c) {
+        if (c instanceof Xt) {
+          let d = this.sourceTemplate.html;
+          typeof d != "string" && (d = d.innerHTML), c.templateString = d;
+        }
+        throw c;
+      }
+      this.behaviors = r = new Array(this.factories.length);
+      const a = this.factories;
+      for (let c = 0, d = a.length; c < d; ++c) {
+        const l = a[c];
+        if (l.targetNodeId === "h" && this.hostBindingTarget && U(l, this.hostBindingTarget, this._targets), l.targetNodeId in this.targets) {
+          const o = l.createBehavior();
+          o.bind(this), r[c] = o;
+        } else {
+          let o = this.sourceTemplate.html;
+          throw typeof o != "string" && (o = o.innerHTML), new ke(`HydrationView was unable to successfully target bindings inside "${(n = ((s = this.firstChild) === null || s === void 0 ? void 0 : s.getRootNode()).host) === null || n === void 0 ? void 0 : n.nodeName}".`, l, Zt(this.firstChild, this.lastChild).cloneContents(), o);
+        }
+      }
+    } else {
+      this.source !== null && this.evaluateUnbindables(), this.isBound = !1, this.source = t, this.context = e;
+      for (let a = 0, c = r.length; a < c; ++a)
+        r[a].bind(this);
+    }
+    this.isBound = !0, this._hydrationStage = A.hydrated;
+  }
+  unbind() {
+    !this.isBound || this.source === null || (this.evaluateUnbindables(), this.source = null, this.context = this, this.isBound = !1);
+  }
+  /**
+   * Removes the view and unbinds its behaviors, disposing of DOM nodes afterward.
+   * Once a view has been disposed, it cannot be inserted or bound again.
+   */
+  dispose() {
+    ot(this.firstChild, this.lastChild), this.unbind();
+  }
+  onUnbind(t) {
+    this.unbindables.push(t);
+  }
+  evaluateUnbindables() {
+    const t = this.unbindables;
+    for (let e = 0, s = t.length; e < s; ++e)
+      t[e].unbind(this);
+    t.length = 0;
+  }
 }
-function Se(s) {
-  u.setBooleanAttribute(this.target, this.targetName, s);
+te = D;
+x(Be);
+function xe(i) {
+  return i.create !== void 0;
 }
-function Ce(s) {
-  if (s == null && (s = ""), s.create) {
-    this.target.textContent = "";
-    let e = this.target.$fastView;
-    e === void 0 ? e = s.create() : this.target.$fastTemplate !== s && (e.isComposed && (e.remove(), e.unbind()), e = s.create()), e.isComposed ? e.needsBindOnly && (e.needsBindOnly = !1, e.bind(this.source, this.context)) : (e.isComposed = !0, e.bind(this.source, this.context), e.insertBefore(this.target), this.target.$fastView = e, this.target.$fastTemplate = s);
+function Ae(i, t, e, s) {
+  if (e == null && (e = ""), xe(e)) {
+    i.textContent = "";
+    let n = i.$fastView;
+    if (n === void 0)
+      if (z(s) && z(e) && s.bindingViewBoundaries[this.targetNodeId] !== void 0 && s.hydrationStage !== A.hydrated) {
+        const r = s.bindingViewBoundaries[this.targetNodeId];
+        n = e.hydrate(r.first, r.last);
+      } else
+        n = e.create();
+    else
+      i.$fastTemplate !== e && (n.isComposed && (n.remove(), n.unbind()), n = e.create());
+    n.isComposed ? n.needsBindOnly && (n.needsBindOnly = !1, n.bind(s.source, s.context)) : (n.isComposed = !0, n.bind(s.source, s.context), n.insertBefore(i), i.$fastView = n, i.$fastTemplate = e);
   } else {
-    const e = this.target.$fastView;
-    e !== void 0 && e.isComposed && (e.isComposed = !1, e.remove(), e.needsBindOnly ? e.needsBindOnly = !1 : e.unbind()), this.target.textContent = s;
+    const n = i.$fastView;
+    n !== void 0 && n.isComposed && (n.isComposed = !1, n.remove(), n.needsBindOnly ? n.needsBindOnly = !1 : n.unbind()), i.textContent = e;
   }
 }
-function we(s) {
-  this.target[this.targetName] = s;
-}
-function xe(s) {
-  const e = this.classVersions || /* @__PURE__ */ Object.create(null), t = this.target;
-  let i = this.version || 0;
-  if (s != null && s.length) {
-    const n = s.split(/\s+/);
-    for (let r = 0, o = n.length; r < o; ++r) {
-      const a = n[r];
-      a !== "" && (e[a] = i, t.classList.add(a));
+function Ee(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;
+  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));
     }
   }
-  if (this.classVersions = e, this.version = i + 1, i !== 0) {
-    i -= 1;
-    for (const n in e)
-      e[n] === i && t.classList.remove(n);
+  if (r.v = c + 1, c !== 0) {
+    c -= 1;
+    for (const l in a)
+      a[l] === c && d.remove(l);
   }
 }
-class L extends ne {
-  /**
-   * Creates an instance of BindingDirective.
-   * @param binding - A binding that returns the data used to update the DOM.
-   */
-  constructor(e) {
-    super(), this.binding = e, this.bind = be, this.unbind = ge, this.updateTarget = me, this.isBindingVolatile = b.isVolatileBinding(this.binding);
+const Me = {
+  [b.attribute]: $.setAttribute,
+  [b.booleanAttribute]: $.setBooleanAttribute,
+  [b.property]: (i, t, e) => i[t] = e,
+  [b.content]: Ae,
+  [b.tokenList]: Ee,
+  [b.event]: () => {
   }
+};
+class E {
   /**
-   * Gets/sets the name of the attribute or property that this
-   * binding is targeting.
+   * Creates an instance of HTMLBindingDirective.
+   * @param dataBinding - The binding configuration to apply.
    */
-  get targetName() {
-    return this.originalTargetName;
-  }
-  set targetName(e) {
-    if (this.originalTargetName = e, e !== void 0)
-      switch (e[0]) {
-        case ":":
-          if (this.cleanedTargetName = e.substr(1), this.updateTarget = we, this.cleanedTargetName === "innerHTML") {
-            const t = this.binding;
-            this.binding = (i, n) => u.createHTML(t(i, n));
-          }
-          break;
-        case "?":
-          this.cleanedTargetName = e.substr(1), this.updateTarget = Se;
-          break;
-        case "@":
-          this.cleanedTargetName = e.substr(1), this.bind = pe, this.unbind = ye;
-          break;
-        default:
-          this.cleanedTargetName = e, e === "class" && (this.updateTarget = xe);
-          break;
-      }
+  constructor(t) {
+    this.dataBinding = t, this.updateTarget = null, this.aspectType = b.content;
   }
   /**
-   * Makes this binding target the content of an element rather than
-   * a particular attribute or property.
+   * Creates HTML to be used within a template.
+   * @param add - Can be used to add  behavior factories to a template.
    */
-  targetAtContent() {
-    this.updateTarget = Ce, this.unbind = ve;
+  createHTML(t) {
+    return Kt.interpolation(t(this));
   }
   /**
-   * Creates the runtime BindingBehavior instance based on the configuration
-   * information stored in the BindingDirective.
-   * @param target - The target node that the binding behavior should attach to.
+   * Creates a behavior.
    */
-  createBehavior(e) {
-    return new Te(e, this.binding, this.isBindingVolatile, this.bind, this.unbind, this.updateTarget, this.cleanedTargetName);
+  createBehavior() {
+    var t;
+    if (this.updateTarget === null) {
+      const e = Me[this.aspectType], s = (t = this.dataBinding.policy) !== null && t !== void 0 ? t : this.policy;
+      if (!e)
+        throw g.error(
+          1205
+          /* Message.unsupportedBindingBehavior */
+        );
+      this.data = `${this.id}-d`, this.updateTarget = s.protect(this.targetTagName, this.aspectType, this.targetAspect, e);
+    }
+    return this;
   }
-}
-class Te {
-  /**
-   * Creates an instance of BindingBehavior.
-   * @param target - The target of the data updates.
-   * @param binding - The binding that returns the latest value for an update.
-   * @param isBindingVolatile - Indicates whether the binding has volatile dependencies.
-   * @param bind - The operation to perform during binding.
-   * @param unbind - The operation to perform during unbinding.
-   * @param updateTarget - The operation to perform when updating.
-   * @param targetName - The name of the target attribute or property to update.
-   */
-  constructor(e, t, i, n, r, o, a) {
-    this.source = null, this.context = null, this.bindingObserver = null, this.target = e, this.binding = t, this.isBindingVolatile = i, this.bind = n, this.unbind = r, this.updateTarget = o, this.targetName = a;
+  /** @internal */
+  bind(t) {
+    var e;
+    const s = t.targets[this.targetNodeId], n = z(t) && t.hydrationStage && t.hydrationStage !== A.hydrated;
+    switch (this.aspectType) {
+      case b.event:
+        s[this.data] = t, s.addEventListener(this.targetAspect, this, this.dataBinding.options);
+        break;
+      case b.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 === b.attribute || this.aspectType === b.booleanAttribute)) {
+          r.bind(t);
+          break;
+        }
+        this.updateTarget(s, this.targetAspect, r.bind(t), t);
+        break;
+    }
   }
   /** @internal */
-  handleChange() {
-    this.updateTarget(this.bindingObserver.observe(this.source, this.context));
+  unbind(t) {
+    const s = t.targets[this.targetNodeId].$fastView;
+    s !== void 0 && s.isComposed && (s.unbind(), s.needsBindOnly = !0);
   }
   /** @internal */
-  handleEvent(e) {
-    C.setEvent(e);
-    const t = this.binding(this.source, this.context);
-    C.setEvent(null), t !== !0 && e.preventDefault();
+  handleEvent(t) {
+    const e = t.currentTarget[this.data];
+    if (e.isBound) {
+      M.setEvent(t);
+      const s = this.dataBinding.evaluate(e.source, e.context);
+      M.setEvent(null), s !== !0 && t.preventDefault();
+    }
   }
-}
-let F = null;
-class j {
-  addFactory(e) {
-    e.targetIndex = this.targetIndex, this.behaviorFactories.push(e);
+  /** @internal */
+  handleChange(t, e) {
+    const s = e.target, n = e.controller;
+    this.updateTarget(s, this.targetAspect, e.bind(n), n);
   }
-  captureContentBinding(e) {
-    e.targetAtContent(), this.addFactory(e);
+}
+T.define(E, { aspected: !0 });
+const ie = (i, t) => `${i}.${t}`, Bt = {}, w = {
+  index: 0,
+  node: null
+};
+function xt(i) {
+  i.startsWith("fast-") || g.warn(1204, { name: i });
+}
+const Oe = new Proxy(document.createElement("div"), {
+  get(i, t) {
+    xt(t);
+    const e = Reflect.get(i, t);
+    return O(e) ? e.bind(i) : e;
+  },
+  set(i, t, e) {
+    return xt(t), Reflect.set(i, t, e);
   }
-  reset() {
-    this.behaviorFactories = [], this.targetIndex = -1;
+});
+class _e {
+  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);
+  }
+  freeze() {
+    return this.proto = Object.create(null, this.descriptors), this;
+  }
+  addTargetDescriptor(t, e, s) {
+    const n = this.descriptors;
+    if (e === "r" || // root
+    e === "h" || // host
+    n[e])
+      return;
+    if (!n[t]) {
+      const a = t.lastIndexOf("."), c = t.substring(0, a), d = parseInt(t.substring(a + 1));
+      this.addTargetDescriptor(c, t, d);
+    }
+    let r = Bt[e];
+    if (!r) {
+      const a = `_${e}`;
+      Bt[e] = r = {
+        get() {
+          var c;
+          return (c = this[a]) !== null && c !== void 0 ? c : this[a] = this[t].childNodes[s];
+        }
+      };
+    }
+    n[e] = r;
   }
-  release() {
-    F = this;
+  createView(t) {
+    const e = this.fragment.cloneNode(!0), s = Object.create(this.proto);
+    s.r = e, s.h = t ?? Oe;
+    for (const n of this.nodeIds)
+      s[n];
+    return new K(e, this.factories, s);
   }
-  static borrow(e) {
-    const t = F || new j();
-    return t.directives = e, t.reset(), F = null, t;
+}
+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 = J.parse(h, c);
+    let y = null;
+    u === null ? r && (y = new E(Gt(() => h, i.policy)), T.assignAspect(y, o.name)) : y = ht.aggregate(u, i.policy), y !== null && (e.removeAttributeNode(o), d--, l--, i.addFactory(y, t, s, n, e.tagName));
   }
 }
-function Ae(s) {
-  if (s.length === 1)
-    return s[0];
-  let e;
-  const t = s.length, i = s.map((o) => typeof o == "string" ? () => o : (e = o.targetName || e, o.binding)), n = (o, a) => {
-    let c = "";
-    for (let l = 0; l < t; ++l)
-      c += i[l](o, a);
-    return c;
-  }, r = new L(n);
-  return r.targetName = e, r;
-}
-const Be = R.length;
-function re(s, e) {
-  const t = e.split(se);
-  if (t.length === 1)
-    return null;
-  const i = [];
-  for (let n = 0, r = t.length; n < r; ++n) {
-    const o = t[n], a = o.indexOf(R);
-    let c;
-    if (a === -1)
-      c = o;
-    else {
-      const l = parseInt(o.substring(0, a));
-      i.push(s.directives[l]), c = o.substring(a + Be);
-    }
-    c !== "" && i.push(c);
-  }
-  return i;
-}
-function U(s, e, t = !1) {
-  const i = e.attributes;
-  for (let n = 0, r = i.length; n < r; ++n) {
-    const o = i[n], a = o.value, c = re(s, a);
-    let l = null;
-    c === null ? t && (l = new L(() => a), l.targetName = o.name) : l = Ae(c), l !== null && (e.removeAttributeNode(o), n--, r--, s.addFactory(l));
-  }
-}
-function Ne(s, e, t) {
-  const i = re(s, e.textContent);
-  if (i !== null) {
-    let n = e;
-    for (let r = 0, o = i.length; r < o; ++r) {
-      const a = i[r], c = r === 0 ? e : n.parentNode.insertBefore(document.createTextNode(""), n.nextSibling);
-      typeof a == "string" ? c.textContent = a : (c.textContent = " ", s.captureContentBinding(a)), n = c, s.targetIndex++, c !== e && t.nextNode();
-    }
-    s.targetIndex--;
-  }
-}
-function ke(s, e) {
-  const t = s.content;
-  document.adoptNode(t);
-  const i = j.borrow(e);
-  U(i, s, !0);
-  const n = i.behaviorFactories;
-  i.reset();
-  const r = u.createTemplateWalker(t);
-  let o;
-  for (; o = r.nextNode(); )
-    switch (i.targetIndex++, o.nodeType) {
-      case 1:
-        U(i, o);
-        break;
-      case 3:
-        Ne(i, o, r);
-        break;
-      case 8:
-        u.isMarker(o) && i.addFactory(e[u.extractDirectiveIndexFromMarker(o)]);
-    }
-  let a = 0;
-  // If the first node in a fragment is a marker, that means it's an unstable first node,
-  // because something like a when, repeat, etc. could add nodes before the marker.
-  // To mitigate this, we insert a stable first node. However, if we insert a node,
-  // that will alter the result of the TreeWalker. So, we also need to offset the target index.
-  (u.isMarker(t.firstChild) || // Or if there is only one node and a directive, it means the template's content
-  // is *only* the directive. In that case, HTMLView.dispose() misses any nodes inserted by
-  // the directive. Inserting a new node ensures proper disposal of nodes added by the directive.
-  t.childNodes.length === 1 && e.length) && (t.insertBefore(document.createComment(""), t.firstChild), a = -1);
-  const c = i.behaviorFactories;
-  return i.release(), {
-    fragment: t,
-    viewBehaviorFactories: c,
-    hostBehaviorFactories: n,
-    targetOffset: a
-  };
+function Re(i, t, e, s, n) {
+  const r = J.parse(t.textContent, i.directives);
+  if (r === null)
+    return w.node = t.nextSibling, w.index = n + 1, w;
+  let a, c = a = 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 = " ", T.assignAspect(o), i.addFactory(o, e, s, n, null)), c = a;
+  }
+  return w.index = n + 1, w.node = c.nextSibling, w;
 }
-const O = document.createRange();
-class Fe {
-  /**
-   * Constructs an instance of HTMLView.
-   * @param fragment - The html fragment that contains the nodes for this view.
-   * @param behaviors - The behaviors to be applied to this view.
-   */
-  constructor(e, t) {
-    this.fragment = e, this.behaviors = t, this.source = null, this.context = null, this.firstChild = e.firstChild, this.lastChild = e.lastChild;
+function ne(i, t, e) {
+  let s = 0, n = t.firstChild;
+  for (; n; ) {
+    const r = Ve(i, e, n, s);
+    n = r.node, s = r.index;
   }
+}
+function Ve(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);
+    case 8:
+      const r = J.parse(e.data, i.directives);
+      r !== null && i.addFactory(
+        /* eslint-disable-next-line @typescript-eslint/no-use-before-define */
+        ht.aggregate(r),
+        t,
+        n,
+        s,
+        null
+      );
+      break;
+  }
+  return w.index = s + 1, w.node = e.nextSibling, w;
+}
+function Le(i, t) {
+  return i && i.nodeType == 8 && J.parse(i.data, t) !== null;
+}
+const At = "TEMPLATE", ht = {
   /**
-   * Appends the view's DOM nodes to the referenced node.
-   * @param node - The parent node to append the view's DOM nodes to.
-   */
-  appendTo(e) {
-    e.appendChild(this.fragment);
-  }
+   * Compiles a template and associated directives into a compilation
+   * result which can be used to create views.
+   * @param html - The html string or template element to compile.
+   * @param factories - The behavior factories referenced by the template.
+   * @param policy - The security policy to compile the html with.
+   * @remarks
+   * The template that is provided for compilation is altered in-place
+   * and cannot be compiled again. If the original template must be preserved,
+   * it is recommended that you clone the original and pass the clone to this API.
+   * @public
+   */
+  compile(i, t, e = $.policy) {
+    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);
+    } 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);
+    return se(
+      r,
+      "",
+      s,
+      /* host */
+      "h",
+      0,
+      !0
+    ), // If the first node in a fragment is a marker, that means it's an unstable first node,
+    // because something like a when, repeat, etc. could add nodes before the marker.
+    // To mitigate this, we insert a stable first node. However, if we insert a node,
+    // that will alter the result of the TreeWalker. So, we also need to offset the target index.
+    (Le(n.firstChild, t) || // Or if there is only one node and a directive, it means the template's content
+    // is *only* the directive. In that case, HTMLView.dispose() misses any nodes inserted by
+    // the directive. Inserting a new node ensures proper disposal of nodes added by the directive.
+    n.childNodes.length === 1 && Object.keys(t).length > 0) && n.insertBefore(document.createComment(""), n.firstChild), ne(
+      r,
+      n,
+      /* root */
+      "r"
+    ), w.node = null, r.freeze();
+  },
   /**
-   * Inserts the view's DOM nodes before the referenced node.
-   * @param node - The node to insert the view's DOM before.
+   * Sets the default compilation strategy that will be used by the ViewTemplate whenever
+   * it needs to compile a view preprocessed with the html template function.
+   * @param strategy - The compilation strategy to use when compiling templates.
    */
-  insertBefore(e) {
-    if (this.fragment.hasChildNodes())
-      e.parentNode.insertBefore(this.fragment, e);
-    else {
-      const t = this.lastChild;
-      if (e.previousSibling === t)
-        return;
-      const i = e.parentNode;
-      let n = this.firstChild, r;
-      for (; n !== t; )
-        r = n.nextSibling, i.insertBefore(n, e), n = r;
-      i.insertBefore(t, e);
-    }
-  }
+  setDefaultStrategy(i) {
+    this.compile = i;
+  },
   /**
-   * Removes the view's DOM nodes.
-   * The nodes are not disposed and the view can later be re-inserted.
+   * Aggregates an array of strings and directives into a single directive.
+   * @param parts - A heterogeneous array of static strings interspersed with
+   * directives.
+   * @param policy - The security policy to use with the aggregated bindings.
+   * @returns A single inline directive that aggregates the behavior of all the parts.
+   */
+  aggregate(i, t = $.policy) {
+    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) => {
+      let h = "";
+      for (let u = 0; u < r; ++u)
+        h += a[u](l, o);
+      return h;
+    }, d = new E(qt(c, n ?? t, s));
+    return T.assignAspect(d, e), d;
+  }
+}, je = (
+  /* 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);
+class j {
+  /**
+   * Creates an instance of InlineTemplateDirective.
+   * @param template - The template to inline.
    */
-  remove() {
-    const e = this.fragment, t = this.lastChild;
-    let i = this.firstChild, n;
-    for (; i !== t; )
-      n = i.nextSibling, e.appendChild(i), i = n;
-    e.appendChild(t);
+  constructor(t, e = Fe) {
+    this.html = t, this.factories = e;
   }
   /**
-   * Removes the view and unbinds its behaviors, disposing of DOM nodes afterward.
-   * Once a view has been disposed, it cannot be inserted or bound again.
+   * Creates HTML to be used within a template.
+   * @param add - Can be used to add  behavior factories to a template.
    */
-  dispose() {
-    const e = this.firstChild.parentNode, t = this.lastChild;
-    let i = this.firstChild, n;
-    for (; i !== t; )
-      n = i.nextSibling, e.removeChild(i), i = n;
-    e.removeChild(t);
-    const r = this.behaviors, o = this.source;
-    for (let a = 0, c = r.length; a < c; ++a)
-      r[a].unbind(o);
+  createHTML(t) {
+    const e = this.factories;
+    for (const s in e)
+      t(e[s]);
+    return this.html;
   }
+}
+j.empty = new j("");
+T.define(j);
+function He(i, t, e, s = T.getForInstance(i)) {
+  if (s.aspected) {
+    const n = je.exec(t);
+    n !== null && T.assignAspect(i, n[2]);
+  }
+  return i.createHTML(e);
+}
+class X {
   /**
-   * Binds a view's behaviors to its binding source.
-   * @param source - The binding source for the view's binding behaviors.
-   * @param context - The execution context to run the behaviors within.
+   * Creates an instance of ViewTemplate.
+   * @param html - The html representing what this template will instantiate, including placeholders for directives.
+   * @param factories - The directives that will be connected to placeholders in the html.
+   * @param policy - The security policy to use when compiling this template.
    */
-  bind(e, t) {
-    const i = this.behaviors;
-    if (this.source !== e)
-      if (this.source !== null) {
-        const n = this.source;
-        this.source = e, this.context = t;
-        for (let r = 0, o = i.length; r < o; ++r) {
-          const a = i[r];
-          a.unbind(n), a.bind(e, t);
-        }
-      } else {
-        this.source = e, this.context = t;
-        for (let n = 0, r = i.length; n < r; ++n)
-          i[n].bind(e, t);
-      }
+  constructor(t, e = {}, s) {
+    this.policy = s, this.result = null, this.html = t, this.factories = e;
   }
   /**
-   * Unbinds a view's behaviors from its binding source.
+   * @internal
    */
-  unbind() {
-    if (this.source === null)
-      return;
-    const e = this.behaviors, t = this.source;
-    for (let i = 0, n = e.length; i < n; ++i)
-      e[i].unbind(t);
-    this.source = null;
+  compile() {
+    return this.result === null && (this.result = ht.compile(this.html, this.factories, this.policy)), this.result;
   }
   /**
-   * Efficiently disposes of a contiguous range of synthetic view instances.
-   * @param views - A contiguous range of views to be disposed.
+   * Creates an HTMLView instance based on this template definition.
+   * @param hostBindingTarget - The element that host behaviors will be bound to.
    */
-  static disposeContiguousBatch(e) {
-    if (e.length !== 0) {
-      O.setStartBefore(e[0].firstChild), O.setEndAfter(e[e.length - 1].lastChild), O.deleteContents();
-      for (let t = 0, i = e.length; t < i; ++t) {
-        const n = e[t], r = n.behaviors, o = n.source;
-        for (let a = 0, c = r.length; a < c; ++a)
-          r[a].unbind(o);
-      }
-    }
+  create(t) {
+    return this.compile().createView(t);
   }
-}
-class W {
   /**
-   * Creates an instance of ViewTemplate.
-   * @param html - The html representing what this template will instantiate, including placeholders for directives.
-   * @param directives - The directives that will be connected to placeholders in the html.
+   * Returns a directive that can inline the template.
    */
-  constructor(e, t) {
-    this.behaviorCount = 0, this.hasHostBehaviors = !1, this.fragment = null, this.targetOffset = 0, this.viewBehaviorFactories = null, this.hostBehaviorFactories = null, this.html = e, this.directives = t;
+  inline() {
+    return new j(B(this.html) ? this.html : this.html.innerHTML, this.factories);
   }
   /**
-   * Creates an HTMLView instance based on this template definition.
-   * @param hostBindingTarget - The element that host behaviors will be bound to.
-   */
-  create(e) {
-    if (this.fragment === null) {
-      let l;
-      const h = this.html;
-      if (typeof h == "string") {
-        l = document.createElement("template"), l.innerHTML = u.createHTML(h);
-        const f = l.content.firstElementChild;
-        f !== null && f.tagName === "TEMPLATE" && (l = f);
-      } else
-        l = h;
-      const d = ke(l, this.directives);
-      this.fragment = d.fragment, this.viewBehaviorFactories = d.viewBehaviorFactories, this.hostBehaviorFactories = d.hostBehaviorFactories, this.targetOffset = d.targetOffset, this.behaviorCount = this.viewBehaviorFactories.length + this.hostBehaviorFactories.length, this.hasHostBehaviors = this.hostBehaviorFactories.length > 0;
-    }
-    const t = this.fragment.cloneNode(!0), i = this.viewBehaviorFactories, n = new Array(this.behaviorCount), r = u.createTemplateWalker(t);
-    let o = 0, a = this.targetOffset, c = r.nextNode();
-    for (let l = i.length; o < l; ++o) {
-      const h = i[o], d = h.targetIndex;
-      for (; c !== null; )
-        if (a === d) {
-          n[o] = h.createBehavior(c);
-          break;
-        } else
-          c = r.nextNode(), a++;
-    }
-    if (this.hasHostBehaviors) {
-      const l = this.hostBehaviorFactories;
-      for (let h = 0, d = l.length; h < d; ++h, ++o)
-        n[o] = l[h].createBehavior(e);
-    }
-    return new Fe(t, n);
+   * Sets the DOMPolicy for this template.
+   * @param policy - The policy to associated with this template.
+   * @returns The modified template instance.
+   * @remarks
+   * The DOMPolicy can only be set once for a template and cannot be
+   * set after the template is compiled.
+   */
+  withPolicy(t) {
+    if (this.result)
+      throw g.error(
+        1208
+        /* Message.cannotSetTemplatePolicyAfterCompilation */
+      );
+    if (this.policy)
+      throw g.error(
+        1207
+        /* Message.onlySetTemplatePolicyOnce */
+      );
+    return this.policy = t, this;
   }
   /**
    * Creates an HTMLView from this template, binds it to the source, and then appends it to the host.
@@ -986,179 +1702,83 @@ class W {
    * @param hostBindingTarget - An HTML element to target the host bindings at if different from the
    * host that the template is being attached to.
    */
-  render(e, t, i) {
-    typeof t == "string" && (t = document.getElementById(t)), i === void 0 && (i = t);
-    const n = this.create(i);
-    return n.bind(e, w), n.appendTo(t), n;
-  }
-}
-const Oe = (
-  /* eslint-disable-next-line no-control-regex */
-  /([ \x09\x0a\x0c\x0d])([^\0-\x1F\x7F-\x9F "'>=/]+)([ \x09\x0a\x0c\x0d]*=[ \x09\x0a\x0c\x0d]*(?:[^ \x09\x0a\x0c\x0d"'`<>=]*|"[^"]*|'[^']*))$/
-);
-function Ye(s, ...e) {
-  const t = [];
-  let i = "";
-  for (let n = 0, r = s.length - 1; n < r; ++n) {
-    const o = s[n];
-    let a = e[n];
-    if (i += o, a instanceof W) {
-      const c = a;
-      a = () => c;
-    }
-    if (typeof a == "function" && (a = new L(a)), a instanceof ne) {
-      const c = Oe.exec(o);
-      c !== null && (a.targetName = c[2]);
-    }
-    a instanceof P ? (i += a.createPlaceholder(t.length), t.push(a)) : i += a;
-  }
-  return i += s[s.length - 1], new W(i, t);
-}
-class g {
-  constructor() {
-    this.targets = /* @__PURE__ */ new WeakSet();
-  }
-  /** @internal */
-  addStylesTo(e) {
-    this.targets.add(e);
-  }
-  /** @internal */
-  removeStylesFrom(e) {
-    this.targets.delete(e);
-  }
-  /** @internal */
-  isAttachedTo(e) {
-    return this.targets.has(e);
+  render(t, e, s) {
+    const n = this.create(s);
+    return n.bind(t), n.appendTo(e), n;
   }
   /**
-   * Associates behaviors with this set of styles.
-   * @param behaviors - The behaviors to associate.
-   */
-  withBehaviors(...e) {
-    return this.behaviors = this.behaviors === null ? e : this.behaviors.concat(e), this;
-  }
-}
-g.create = (() => {
-  if (u.supportsAdoptedStyleSheets) {
-    const s = /* @__PURE__ */ new Map();
-    return (e) => (
-      // eslint-disable-next-line @typescript-eslint/no-use-before-define
-      new Me(e, s)
-    );
-  }
-  return (s) => new Ve(s);
-})();
-function H(s) {
-  return s.map((e) => e instanceof g ? H(e.styles) : [e]).reduce((e, t) => e.concat(t), []);
-}
-function oe(s) {
-  return s.map((e) => e instanceof g ? e.behaviors : null).reduce((e, t) => t === null ? e : (e === null && (e = []), e.concat(t)), null);
-}
-const Ee = Symbol("prependToAdoptedStyleSheets");
-function ae(s) {
-  const e = [], t = [];
-  return s.forEach((i) => (i[Ee] ? e : t).push(i)), { prepend: e, append: t };
-}
-let le = (s, e) => {
-  const { prepend: t, append: i } = ae(e);
-  s.adoptedStyleSheets = [...t, ...s.adoptedStyleSheets, ...i];
-}, he = (s, e) => {
-  s.adoptedStyleSheets = s.adoptedStyleSheets.filter((t) => e.indexOf(t) === -1);
-};
-if (u.supportsAdoptedStyleSheets)
-  try {
-    document.adoptedStyleSheets.push(), document.adoptedStyleSheets.splice(), le = (s, e) => {
-      const { prepend: t, append: i } = ae(e);
-      s.adoptedStyleSheets.splice(0, 0, ...t), s.adoptedStyleSheets.push(...i);
-    }, he = (s, e) => {
-      for (const t of e) {
-        const i = s.adoptedStyleSheets.indexOf(t);
-        i !== -1 && s.adoptedStyleSheets.splice(i, 1);
-      }
+   * Creates a template based on a set of static strings and dynamic values.
+   * @param strings - The static strings to create the template with.
+   * @param values - The dynamic values to create the template with.
+   * @param policy - The DOMPolicy to associated with the template.
+   * @returns A ViewTemplate.
+   * @remarks
+   * This API should not be used directly under normal circumstances because constructing
+   * a template in this way, if not done properly, can open up the application to XSS
+   * attacks. When using this API, provide a strong DOMPolicy that can properly sanitize
+   * and also be sure to manually sanitize all static strings particularly if they can
+   * come from user input.
+   */
+  static create(t, e, s) {
+    let n = "";
+    const r = /* @__PURE__ */ Object.create(null), a = (c) => {
+      var d;
+      const l = (d = c.id) !== null && d !== void 0 ? d : c.id = L();
+      return r[l] = c, l;
     };
-  } catch {
-  }
-class Me extends g {
-  constructor(e, t) {
-    super(), this.styles = e, this.styleSheetCache = t, this._styleSheets = void 0, this.behaviors = oe(e);
-  }
-  get styleSheets() {
-    if (this._styleSheets === void 0) {
-      const e = this.styles, t = this.styleSheetCache;
-      this._styleSheets = H(e).map((i) => {
-        if (i instanceof CSSStyleSheet)
-          return i;
-        let n = t.get(i);
-        return n === void 0 && (n = new CSSStyleSheet(), n.replaceSync(i), t.set(i, n)), n;
-      });
-    }
-    return this._styleSheets;
-  }
-  addStylesTo(e) {
-    le(e, this.styleSheets), super.addStylesTo(e);
-  }
-  removeStylesFrom(e) {
-    he(e, this.styleSheets), super.removeStylesFrom(e);
-  }
-}
-let Ie = 0;
-function $e() {
-  return `fast-style-class-${++Ie}`;
-}
-class Ve extends g {
-  constructor(e) {
-    super(), this.styles = e, this.behaviors = null, this.behaviors = oe(e), this.styleSheets = H(e), this.styleClass = $e();
-  }
-  addStylesTo(e) {
-    const t = this.styleSheets, i = this.styleClass;
-    e = this.normalizeTarget(e);
-    for (let n = 0; n < t.length; n++) {
-      const r = document.createElement("style");
-      r.innerHTML = t[n], r.className = i, e.append(r);
+    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 E(qt(o));
+      else if (o instanceof lt)
+        o = new E(o);
+      else if (!(h = T.getForInstance(o))) {
+        const u = o;
+        o = new E(Gt(() => u));
+      }
+      n += He(o, l, a, h);
     }
-    super.addStylesTo(e);
-  }
-  removeStylesFrom(e) {
-    e = this.normalizeTarget(e);
-    const t = e.querySelectorAll(`.${this.styleClass}`);
-    for (let i = 0, n = t.length; i < n; ++i)
-      e.removeChild(t[i]);
-    super.removeStylesFrom(e);
-  }
-  isAttachedTo(e) {
-    return super.isAttachedTo(this.normalizeTarget(e));
-  }
-  normalizeTarget(e) {
-    return e === document ? document.body : e;
+    return new X(n + t[t.length - 1], r, s);
   }
 }
-const ce = Object.freeze({
+x(X);
+const re = (i, ...t) => {
+  if (Array.isArray(i) && Array.isArray(i.raw))
+    return X.create(i, t);
+  throw g.error(
+    1206
+    /* Message.directCallToHTMLTagNotAllowed */
+  );
+};
+re.partial = (i) => new j(i);
+const Et = "boolean", Mt = "reflect", oe = Object.freeze({
   /**
    * Locates all attribute configurations associated with a type.
    */
-  locate: _()
-}), _e = {
-  toView(s) {
-    return s ? "true" : "false";
+  locate: zt()
+}), Ie = {
+  toView(i) {
+    return i ? "true" : "false";
   },
-  fromView(s) {
-    return !(s == null || s === "false" || s === !1 || s === 0);
+  fromView(i) {
+    return !(i == null || i === "false" || i === !1 || i === 0);
   }
-}, Ze = {
-  toView(s) {
-    if (s == null)
-      return null;
-    const e = s * 1;
-    return isNaN(e) ? null : e.toString();
+};
+function Ot(i) {
+  if (i == null)
+    return null;
+  const t = i * 1;
+  return isNaN(t) ? null : t;
+}
+const fi = {
+  toView(i) {
+    const t = Ot(i);
+    return t && t.toString();
   },
-  fromView(s) {
-    if (s == null)
-      return null;
-    const e = s * 1;
-    return isNaN(e) ? null : e;
-  }
+  fromView: Ot
 };
-class x {
+class W {
   /**
    * Creates an instance of AttributeDefinition.
    * @param Owner - The class constructor that owns this attribute.
@@ -1168,44 +1788,44 @@ class x {
    * @param converter - A {@link ValueConverter} that integrates with the property getter/setter
    * to convert values to and from a DOM string.
    */
-  constructor(e, t, i = t.toLowerCase(), n = "reflect", r) {
-    this.guards = /* @__PURE__ */ new Set(), this.Owner = e, this.name = t, this.attribute = i, this.mode = n, this.converter = r, this.fieldName = `_${t}`, this.callbackName = `${t}Changed`, this.hasCallback = this.callbackName in e.prototype, n === "boolean" && r === void 0 && (this.converter = _e);
+  constructor(t, e, s = e.toLowerCase(), n = Mt, 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 === Et && r === void 0 && (this.converter = Ie);
   }
   /**
    * Sets the value of the attribute/property on the source element.
    * @param source - The source element to access.
-   * @param value - The value to set the attribute/property to.
+   * @param newValue - The value to set the attribute/property to.
    */
-  setValue(e, t) {
-    const i = e[this.fieldName], n = this.converter;
-    n !== void 0 && (t = n.fromView(t)), i !== t && (e[this.fieldName] = t, this.tryReflectToAttribute(e), this.hasCallback && e[this.callbackName](i, t), e.$fastController.notify(this.name));
+  setValue(t, e) {
+    const s = t[this.fieldName], n = this.converter;
+    n !== void 0 && (e = n.fromView(e)), s !== e && (t[this.fieldName] = e, this.tryReflectToAttribute(t), this.hasCallback && t[this.callbackName](s, e), t.$fastController.notify(this.name));
   }
   /**
    * Gets the value of the attribute/property on the source element.
    * @param source - The source element to access.
    */
-  getValue(e) {
-    return b.track(e, this.name), e[this.fieldName];
+  getValue(t) {
+    return p.track(t, this.name), t[this.fieldName];
   }
   /** @internal */
-  onAttributeChangedCallback(e, t) {
-    this.guards.has(e) || (this.guards.add(e), this.setValue(e, t), this.guards.delete(e));
-  }
-  tryReflectToAttribute(e) {
-    const t = this.mode, i = this.guards;
-    i.has(e) || t === "fromView" || u.queueUpdate(() => {
-      i.add(e);
-      const n = e[this.fieldName];
-      switch (t) {
-        case "reflect":
+  onAttributeChangedCallback(t, e) {
+    this.guards.has(t) || (this.guards.add(t), this.setValue(t, e), this.guards.delete(t));
+  }
+  tryReflectToAttribute(t) {
+    const e = this.mode, s = this.guards;
+    s.has(t) || e === "fromView" || Ut.enqueue(() => {
+      s.add(t);
+      const n = t[this.fieldName];
+      switch (e) {
+        case Mt:
           const r = this.converter;
-          u.setAttribute(e, this.attribute, r !== void 0 ? r.toView(n) : n);
+          $.setAttribute(t, this.attribute, r !== void 0 ? r.toView(n) : n);
           break;
-        case "boolean":
-          u.setBooleanAttribute(e, this.attribute, n);
+        case Et:
+          $.setBooleanAttribute(t, this.attribute, n);
           break;
       }
-      i.delete(e);
+      s.delete(t);
     });
   }
   /**
@@ -1214,92 +1834,211 @@ class x {
    * @param attributeLists - Any existing attributes to collect and merge with those associated with the owner.
    * @internal
    */
-  static collect(e, ...t) {
-    const i = [];
-    t.push(ce.locate(e));
-    for (let n = 0, r = t.length; n < r; ++n) {
-      const o = t[n];
-      if (o !== void 0)
-        for (let a = 0, c = o.length; a < c; ++a) {
-          const l = o[a];
-          typeof l == "string" ? i.push(new x(e, l)) : i.push(new x(e, l.property, l.attribute, l.mode, l.converter));
+  static collect(t, ...e) {
+    const s = [];
+    e.push(oe.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 W(t, l)) : s.push(new W(t, l.property, l.attribute, l.mode, l.converter));
         }
     }
-    return i;
+    return s;
   }
 }
-function Re(s, e) {
-  let t;
-  function i(n, r) {
-    arguments.length > 1 && (t.property = r), ce.locate(n.constructor).push(t);
+function Pe(i, t) {
+  let e;
+  function s(n, r) {
+    arguments.length > 1 && (e.property = r), oe.locate(n.constructor).push(e);
   }
   if (arguments.length > 1) {
-    t = {}, i(s, e);
+    e = {}, s(i, t);
     return;
   }
-  return t = s === void 0 ? {} : s, i;
+  return e = i === void 0 ? {} : i, s;
 }
-const Q = { mode: "open" }, K = {}, $ = S.getById(4, () => {
-  const s = /* @__PURE__ */ new Map();
-  return Object.freeze({
-    register(e) {
-      return s.has(e.type) ? !1 : (s.set(e.type, e), !0);
-    },
-    getByType(e) {
-      return s.get(e);
+var De = 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());
   });
-});
-class B {
-  /**
-   * Creates an instance of FASTElementDefinition.
-   * @param type - The type this definition is being created for.
-   * @param nameOrConfig - The name of the element to define or a config object
-   * that describes the element to define.
-   */
-  constructor(e, t = e.definition) {
-    typeof t == "string" && (t = { name: t }), this.type = e, this.name = t.name, this.template = t.template;
-    const i = x.collect(e, t.attributes), n = new Array(i.length), r = {}, o = {};
-    for (let a = 0, c = i.length; a < c; ++a) {
-      const l = i[a];
-      n[a] = l.attribute, r[l.name] = l, o[l.attribute] = l;
+};
+const _t = { mode: "open" }, Rt = {}, et = /* @__PURE__ */ new Set(), R = g.getById(k.elementRegistry, () => Dt());
+class f {
+  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 = W.collect(t, e.attributes), a = new Array(r.length), c = {}, d = {};
+    for (let l = 0, o = r.length; l < o; ++l) {
+      const h = r[l];
+      a[l] = h.attribute, c[h.name] = h, d[h.attribute] = h, p.defineProperty(n, h);
     }
-    this.attributes = i, this.observedAttributes = n, this.propertyLookup = r, this.attributeLookup = o, this.shadowOptions = t.shadowOptions === void 0 ? Q : t.shadowOptions === null ? void 0 : Object.assign(Object.assign({}, Q), t.shadowOptions), this.elementOptions = t.elementOptions === void 0 ? K : Object.assign(Object.assign({}, K), t.elementOptions), this.styles = t.styles === void 0 ? void 0 : Array.isArray(t.styles) ? g.create(t.styles) : t.styles instanceof g ? t.styles : g.create([t.styles]);
+    Reflect.defineProperty(t, "observedAttributes", {
+      value: a,
+      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 = v.normalize(e.styles), R.register(this), p.defineProperty(f.isRegistered, this.name), f.isRegistered[this.name] = this.type;
   }
   /**
    * Indicates if this element has been defined in at least one registry.
    */
   get isDefined() {
-    return !!$.getByType(this.type);
+    return this.platformDefined;
   }
   /**
    * Defines a custom element based on this definition.
    * @param registry - The element registry to define the element in.
+   * @remarks
+   * This operation is idempotent per registry.
+   */
+  define(t = this.registry) {
+    const e = this.type;
+    return t.get(this.name) || (this.platformDefined = !0, t.define(this.name, e, this.elementOptions)), this;
+  }
+  /**
+   * Creates an instance of FASTElementDefinition.
+   * @param type - The type this definition is being created for.
+   * @param nameOrDef - The name of the element to define or a config object
+   * that describes the element to define.
    */
-  define(e = customElements) {
-    const t = this.type;
-    if ($.register(this)) {
-      const i = this.attributes, n = t.prototype;
-      for (let r = 0, o = i.length; r < o; ++r)
-        b.defineProperty(n, i[r]);
-      Reflect.defineProperty(t, "observedAttributes", {
-        value: this.observedAttributes,
-        enumerable: !0
+  static compose(t, e) {
+    return et.has(t) || R.getByType(t) ? new f(class extends t {
+    }, e) : new f(t, e);
+  }
+  /**
+   * Registers a FASTElement base type.
+   * @param type - The type to register as a base type.
+   * @internal
+   */
+  static registerBaseType(t) {
+    et.add(t);
+  }
+  /**
+   * Creates an instance of FASTElementDefinition asynchronously. This option assumes
+   * that a template and shadowOptions will be provided and completes when those requirements
+   * are met.
+   * @param type - The type this definition is being created for.
+   * @param nameOrDef - The name of the element to define or a config object
+   * that describes the element to define.
+   * @alpha
+   */
+  static composeAsync(t, e) {
+    return new Promise((s) => {
+      (et.has(t) || R.getByType(t)) && s(new f(class extends t {
+      }, e));
+      const n = new f(t, e);
+      Promise.all([
+        new Promise((r) => {
+          p.getNotifier(n).subscribe({
+            handleChange: () => r()
+          }, "template");
+        })
+      ]).then(() => {
+        s(n);
       });
+    });
+  }
+}
+f.isRegistered = {};
+f.getByType = R.getByType;
+f.getForInstance = R.getForInstance;
+f.registerAsync = (i) => De(void 0, void 0, void 0, function* () {
+  return new Promise((t) => {
+    f.isRegistered[i] && t(f.isRegistered[i]), p.getNotifier(f.isRegistered).subscribe({
+      handleChange: () => t(f.isRegistered[i])
+    }, i);
+  });
+});
+p.defineProperty(f.prototype, "template");
+class ze extends MutationObserver {
+  /**
+   * Creates an instance of UnobservableMutationObserver.
+   * @param callback - The callback to invoke when observed nodes are changed.
+   */
+  constructor(t) {
+    function e(s) {
+      this.callback.call(null, s.filter((n) => this.observedNodes.has(n.target)));
     }
-    return e.get(this.name) || e.define(this.name, t, this.elementOptions), this;
+    super(e), this.callback = t, this.observedNodes = /* @__PURE__ */ new Set();
+  }
+  observe(t, e) {
+    this.observedNodes.add(t), super.observe(t, e);
+  }
+  unobserve(t) {
+    this.observedNodes.delete(t), this.observedNodes.size < 1 && this.disconnect();
   }
 }
-B.forType = $.getByType;
-const de = /* @__PURE__ */ new WeakMap(), Pe = {
+const pi = Object.freeze({
+  /**
+   * Creates a ViewBehaviorOrchestrator.
+   * @param source - The source to to associate behaviors with.
+   * @returns A ViewBehaviorOrchestrator.
+   */
+  create(i) {
+    const t = [], e = {};
+    let s = null, n = !1;
+    return {
+      source: i,
+      context: M.default,
+      targets: e,
+      get isBound() {
+        return n;
+      },
+      addBehaviorFactory(r, a) {
+        var c, d, l, o;
+        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 : $.policy, this.addTarget(h.targetNodeId, a), this.addBehavior(h.createBehavior());
+      },
+      addTarget(r, a) {
+        e[r] = a;
+      },
+      addBehavior(r) {
+        t.push(r), n && r.bind(this);
+      },
+      onUnbind(r) {
+        s === null && (s = []), s.push(r);
+      },
+      connectedCallback(r) {
+        n || (n = !0, t.forEach((a) => a.bind(this)));
+      },
+      disconnectedCallback(r) {
+        n && (n = !1, s !== null && s.forEach((a) => a.unbind(this)));
+      }
+    };
+  }
+}), Ue = {
   bubbles: !0,
   composed: !0,
   cancelable: !0
-};
-function E(s) {
-  return s.shadowRoot || de.get(s) || null;
+}, P = "isConnected", ae = /* @__PURE__ */ new WeakMap();
+function V(i) {
+  var t, e;
+  return (e = (t = i.shadowRoot) !== null && t !== void 0 ? t : ae.get(i)) !== null && e !== void 0 ? e : null;
 }
-class D extends ie {
+let Vt;
+class S extends Wt {
   /**
    * Creates a Controller to control the specified element.
    * @param element - The element to be controlled by this controller.
@@ -1307,19 +2046,14 @@ class D extends ie {
    * controller in how to handle rendering and other platform integrations.
    * @internal
    */
-  constructor(e, t) {
-    super(e), this.boundObservables = null, this.behaviors = null, this.needsInitialization = !0, this._template = null, this._styles = null, this._isConnected = !1, this.$fastController = this, this.view = null, this.element = e, this.definition = t;
-    const i = t.shadowOptions;
-    if (i !== void 0) {
-      const r = e.attachShadow(i);
-      i.mode === "closed" && de.set(e, r);
-    }
-    const n = b.getAccessors(e);
-    if (n.length > 0) {
-      const r = this.boundObservables = /* @__PURE__ */ Object.create(null);
-      for (let o = 0, a = n.length; o < a; ++o) {
-        const c = n[o].name, l = e[c];
-        l !== void 0 && (delete e[c], r[c] = l);
+  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 = p.getAccessors(t);
+    if (s.length > 0) {
+      const n = this.boundObservables = /* @__PURE__ */ Object.create(null);
+      for (let r = 0, a = s.length; r < a; ++r) {
+        const c = s[r].name, d = t[c];
+        d !== void 0 && (delete t[c], n[c] = d);
       }
     }
   }
@@ -1328,10 +2062,28 @@ class D extends ie {
    * connected to the document.
    */
   get isConnected() {
-    return b.track(this, "isConnected"), this._isConnected;
+    return p.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 : M.default;
+  }
+  /**
+   * Indicates whether the controller is bound.
+   */
+  get isBound() {
+    var t, e;
+    return (e = (t = this.view) === null || t === void 0 ? void 0 : t.isBound) !== null && e !== void 0 ? e : !1;
   }
-  setIsConnected(e) {
-    this._isConnected = e, b.notify(this, "isConnected");
+  /**
+   * Indicates how the source's lifetime relates to the controller's lifetime.
+   */
+  get sourceLifetime() {
+    var t;
+    return (t = this.view) === null || t === void 0 ? void 0 : t.sourceLifetime;
   }
   /**
    * Gets/sets the template used to render the component.
@@ -1339,116 +2091,148 @@ class D extends ie {
    * This value can only be accurately read after connect but can be set at any time.
    */
   get template() {
+    var t;
+    if (this._template === null) {
+      const e = this.definition;
+      this.source.resolveTemplate ? this._template = this.source.resolveTemplate() : e.template && (this._template = (t = e.template) !== null && t !== void 0 ? t : null);
+    }
     return this._template;
   }
-  set template(e) {
-    this._template !== e && (this._template = e, this.needsInitialization || this.renderTemplate(e));
+  set template(t) {
+    this._template !== t && (this._template = t, this.needsInitialization || this.renderTemplate(t));
+  }
+  get shadowOptions() {
+    return this._shadowRootOptions;
+  }
+  set shadowOptions(t) {
+    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));
+    }
   }
   /**
-   * Gets/sets the primary styles used for the component.
-   * @remarks
-   * This value can only be accurately read after connect but can be set at any time.
+   * The main set of styles used for the component, independent
+   * of any dynamically added styles.
+   */
+  get mainStyles() {
+    var t;
+    if (this._mainStyles === null) {
+      const e = this.definition;
+      this.source.resolveStyles ? this._mainStyles = this.source.resolveStyles() : e.styles && (this._mainStyles = (t = e.styles) !== null && t !== void 0 ? t : null);
+    }
+    return this._mainStyles;
+  }
+  set mainStyles(t) {
+    this._mainStyles !== t && (this._mainStyles !== null && this.removeStyles(this._mainStyles), this._mainStyles = t, this.needsInitialization || this.addStyles(t));
+  }
+  /**
+   * Registers an unbind handler with the controller.
+   * @param behavior - An object to call when the controller unbinds.
+   */
+  onUnbind(t) {
+    var e;
+    (e = this.view) === null || e === void 0 || e.onUnbind(t);
+  }
+  /**
+   * Adds the behavior to the component.
+   * @param behavior - The behavior to add.
    */
-  get styles() {
-    return this._styles;
+  addBehavior(t) {
+    var e, s;
+    const n = (e = this.behaviors) !== null && e !== void 0 ? e : this.behaviors = /* @__PURE__ */ new Map(), r = (s = n.get(t)) !== null && s !== void 0 ? s : 0;
+    r === 0 ? (n.set(t, 1), t.addedCallback && t.addedCallback(this), t.connectedCallback && !this.guardBehaviorConnection && (this.stage === 1 || this.stage === 0) && t.connectedCallback(this)) : n.set(t, r + 1);
   }
-  set styles(e) {
-    this._styles !== e && (this._styles !== null && this.removeStyles(this._styles), this._styles = e, !this.needsInitialization && e !== null && this.addStyles(e));
+  /**
+   * Removes the behavior from the component.
+   * @param behavior - The behavior to remove.
+   * @param force - Forces removal even if this behavior was added more than once.
+   */
+  removeBehavior(t, e = !1) {
+    const s = this.behaviors;
+    if (s === null)
+      return;
+    const n = s.get(t);
+    n !== void 0 && (n === 1 || e ? (s.delete(t), t.disconnectedCallback && this.stage !== 3 && t.disconnectedCallback(this), t.removedCallback && t.removedCallback(this)) : s.set(t, n - 1));
   }
   /**
    * Adds styles to this element. Providing an HTMLStyleElement will attach the element instance to the shadowRoot.
    * @param styles - The styles to add.
    */
-  addStyles(e) {
-    const t = E(this.element) || this.element.getRootNode();
-    if (e instanceof HTMLStyleElement)
-      t.append(e);
-    else if (!e.isAttachedTo(t)) {
-      const i = e.behaviors;
-      e.addStylesTo(t), i !== null && this.addBehaviors(i);
+  addStyles(t) {
+    var e;
+    if (!t)
+      return;
+    const s = this.source;
+    if (t instanceof HTMLElement)
+      ((e = V(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)
+          this.addBehavior(n[r]);
     }
   }
   /**
    * Removes styles from this element. Providing an HTMLStyleElement will detach the element instance from the shadowRoot.
    * @param styles - the styles to remove.
    */
-  removeStyles(e) {
-    const t = E(this.element) || this.element.getRootNode();
-    if (e instanceof HTMLStyleElement)
-      t.removeChild(e);
-    else if (e.isAttachedTo(t)) {
-      const i = e.behaviors;
-      e.removeStylesFrom(t), i !== null && this.removeBehaviors(i);
+  removeStyles(t) {
+    var e;
+    if (!t)
+      return;
+    const s = this.source;
+    if (t instanceof HTMLElement)
+      ((e = V(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)
+          this.removeBehavior(n[r]);
     }
   }
   /**
-   * Adds behaviors to this element.
-   * @param behaviors - The behaviors to add.
+   * Runs connected lifecycle behavior on the associated element.
    */
-  addBehaviors(e) {
-    const t = this.behaviors || (this.behaviors = /* @__PURE__ */ new Map()), i = e.length, n = [];
-    for (let r = 0; r < i; ++r) {
-      const o = e[r];
-      t.has(o) ? t.set(o, t.get(o) + 1) : (t.set(o, 1), n.push(o));
-    }
-    if (this._isConnected) {
-      const r = this.element;
-      for (let o = 0; o < n.length; ++o)
-        n[o].bind(r, w);
-    }
+  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, p.notify(this, P));
   }
-  /**
-   * Removes behaviors from this element.
-   * @param behaviors - The behaviors to remove.
-   * @param force - Forces unbinding of behaviors.
-   */
-  removeBehaviors(e, t = !1) {
-    const i = this.behaviors;
-    if (i === null)
-      return;
-    const n = e.length, r = [];
-    for (let o = 0; o < n; ++o) {
-      const a = e[o];
-      if (i.has(a)) {
-        const c = i.get(a) - 1;
-        c === 0 || t ? i.delete(a) && r.push(a) : i.set(a, c);
+  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];
       }
+      this.boundObservables = null;
     }
-    if (this._isConnected) {
-      const o = this.element;
-      for (let a = 0; a < r.length; ++a)
-        r[a].unbind(o);
+  }
+  connectBehaviors() {
+    if (this.behaviorsConnected === !1) {
+      const t = this.behaviors;
+      if (t !== null) {
+        this.guardBehaviorConnection = !0;
+        for (const e of t.keys())
+          e.connectedCallback && e.connectedCallback(this);
+        this.guardBehaviorConnection = !1;
+      }
+      this.behaviorsConnected = !0;
     }
   }
-  /**
-   * Runs connected lifecycle behavior on the associated element.
-   */
-  onConnectedCallback() {
-    if (this._isConnected)
-      return;
-    const e = this.element;
-    this.needsInitialization ? this.finishInitialization() : this.view !== null && this.view.bind(e, w);
-    const t = this.behaviors;
-    if (t !== null)
-      for (const [i] of t)
-        i.bind(e, w);
-    this.setIsConnected(!0);
+  disconnectBehaviors() {
+    if (this.behaviorsConnected === !0) {
+      const t = this.behaviors;
+      if (t !== null)
+        for (const e of t.keys())
+          e.disconnectedCallback && e.disconnectedCallback(this);
+      this.behaviorsConnected = !1;
+    }
   }
   /**
    * Runs disconnected lifecycle behavior on the associated element.
    */
-  onDisconnectedCallback() {
-    if (!this._isConnected)
-      return;
-    this.setIsConnected(!1);
-    const e = this.view;
-    e !== null && e.unbind();
-    const t = this.behaviors;
-    if (t !== null) {
-      const i = this.element;
-      for (const [n] of t)
-        n.unbind(i);
-    }
+  disconnect() {
+    this.stage === 1 && (this.stage = 2, p.notify(this, P), this.view !== null && this.view.unbind(), this.disconnectBehaviors(), this.stage = 3);
   }
   /**
    * Runs the attribute changed callback for the associated element.
@@ -1456,9 +2240,9 @@ class D extends ie {
    * @param oldValue - The previous value of the attribute.
    * @param newValue - The new value of the attribute.
    */
-  onAttributeChangedCallback(e, t, i) {
-    const n = this.definition.attributeLookup[e];
-    n !== void 0 && n.onAttributeChangedCallback(this.element, i);
+  onAttributeChangedCallback(t, e, s) {
+    const n = this.definition.attributeLookup[t];
+    n !== void 0 && n.onAttributeChangedCallback(this.source, s);
   }
   /**
    * Emits a custom HTML event.
@@ -1468,160 +2252,311 @@ class D extends ie {
    * @remarks
    * Only emits events if connected.
    */
-  emit(e, t, i) {
-    return this._isConnected ? this.element.dispatchEvent(new CustomEvent(e, Object.assign(Object.assign({ detail: t }, Pe), i))) : !1;
-  }
-  finishInitialization() {
-    const e = this.element, t = this.boundObservables;
-    if (t !== null) {
-      const n = Object.keys(t);
-      for (let r = 0, o = n.length; r < o; ++r) {
-        const a = n[r];
-        e[a] = t[a];
-      }
-      this.boundObservables = null;
+  emit(t, e, s) {
+    return this.stage === 1 ? this.source.dispatchEvent(new CustomEvent(t, Object.assign(Object.assign({ detail: e }, Ue), s))) : !1;
+  }
+  renderTemplate(t) {
+    var e;
+    const s = this.source, n = (e = V(s)) !== null && e !== void 0 ? e : s;
+    if (this.view !== null)
+      this.view.dispose(), this.view = null;
+    else if (!this.needsInitialization || this.hasExistingShadowRoot) {
+      this.hasExistingShadowRoot = !1;
+      for (let r = n.firstChild; r !== null; r = n.firstChild)
+        n.removeChild(r);
     }
-    const i = this.definition;
-    this._template === null && (this.element.resolveTemplate ? this._template = this.element.resolveTemplate() : i.template && (this._template = i.template || null)), this._template !== null && this.renderTemplate(this._template), this._styles === null && (this.element.resolveStyles ? this._styles = this.element.resolveStyles() : i.styles && (this._styles = i.styles || null)), this._styles !== null && this.addStyles(this._styles), this.needsInitialization = !1;
-  }
-  renderTemplate(e) {
-    const t = this.element, i = E(t) || t;
-    this.view !== null ? (this.view.dispose(), this.view = null) : this.needsInitialization || u.removeChildNodes(i), e && (this.view = e.render(t, i, t));
+    t && (this.view = t.render(s, n, s), this.view.sourceLifetime = G.coupled);
   }
   /**
    * Locates or creates a controller for the specified element.
    * @param element - The element to return the controller for.
+   * @param override - Reset the controller even if one has been defined.
    * @remarks
    * The specified element must have a {@link FASTElementDefinition}
    * registered either through the use of the {@link customElement}
    * decorator or a call to `FASTElement.define`.
    */
-  static forCustomElement(e) {
-    const t = e.$fastController;
-    if (t !== void 0)
-      return t;
-    const i = B.forType(e.constructor);
-    if (i === void 0)
-      throw new Error("Missing FASTElement definition.");
-    return e.$fastController = new D(e, i);
+  static forCustomElement(t, e = !1) {
+    const s = t.$fastController;
+    if (s !== void 0 && !e)
+      return s;
+    const n = f.getForInstance(t);
+    if (n === void 0)
+      throw g.error(
+        1401
+        /* Message.missingElementDefinition */
+      );
+    return p.getNotifier(n).subscribe({
+      handleChange: () => {
+        S.forCustomElement(t, !0), t.$fastController.connect();
+      }
+    }, "template"), p.getNotifier(n).subscribe({
+      handleChange: () => {
+        S.forCustomElement(t, !0), t.$fastController.connect();
+      }
+    }, "shadowOptions"), t.$fastController = new Vt(t, n);
+  }
+  /**
+   * Sets the strategy that ElementController.forCustomElement uses to construct
+   * ElementController instances for an element.
+   * @param strategy - The strategy to use.
+   */
+  static setStrategy(t) {
+    Vt = t;
+  }
+}
+x(S);
+S.setStrategy(S);
+function q(i) {
+  var t;
+  return "adoptedStyleSheets" in i ? i : (t = V(i)) !== null && t !== void 0 ? t : i.getRootNode();
+}
+class Y {
+  constructor(t) {
+    const e = Y.styleSheetCache;
+    this.sheets = t.map((s) => {
+      if (s instanceof CSSStyleSheet)
+        return s;
+      let n = e.get(s);
+      return n === void 0 && (n = new CSSStyleSheet(), n.replaceSync(s), e.set(s, n)), n;
+    });
+  }
+  addStylesTo(t) {
+    le(q(t), this.sheets);
+  }
+  removeStylesFrom(t) {
+    ce(q(t), this.sheets);
+  }
+}
+Y.styleSheetCache = /* @__PURE__ */ new Map();
+let We = 0;
+const qe = () => `fast-${++We}`;
+function Lt(i) {
+  return i === document ? document.body : i;
+}
+class Qe {
+  constructor(t) {
+    this.styles = t, this.styleClass = qe();
+  }
+  addStylesTo(t) {
+    t = Lt(q(t));
+    const e = this.styles, s = this.styleClass;
+    for (let n = 0; n < e.length; n++) {
+      const r = document.createElement("style");
+      r.innerHTML = e[n], r.className = s, t.append(r);
+    }
+  }
+  removeStylesFrom(t) {
+    t = Lt(q(t));
+    const e = t.querySelectorAll(`.${this.styleClass}`);
+    for (let s = 0, n = e.length; s < n; ++s)
+      t.removeChild(e[s]);
+  }
+}
+let le = (i, t) => {
+  i.adoptedStyleSheets = [...i.adoptedStyleSheets, ...t];
+}, ce = (i, t) => {
+  i.adoptedStyleSheets = i.adoptedStyleSheets.filter((e) => t.indexOf(e) === -1);
+};
+if (v.supportsAdoptedStyleSheets) {
+  try {
+    document.adoptedStyleSheets.push(), document.adoptedStyleSheets.splice(), le = (i, t) => {
+      i.adoptedStyleSheets.push(...t);
+    }, ce = (i, t) => {
+      for (const e of t) {
+        const s = i.adoptedStyleSheets.indexOf(e);
+        s !== -1 && i.adoptedStyleSheets.splice(s, 1);
+      }
+    };
+  } catch {
+  }
+  v.setDefaultStrategy(Y);
+} else
+  v.setDefaultStrategy(Qe);
+const it = "defer-hydration", st = "needs-hydration";
+class N extends S {
+  static hydrationObserverHandler(t) {
+    for (const e of t)
+      N.hydrationObserver.unobserve(e.target), e.target.$fastController.connect();
+  }
+  static forCustomElement(t, e) {
+    const s = f.getForInstance(t);
+    return s !== void 0 && s.templateOptions === "defer-and-hydrate" && !s.template && (t.setAttribute(it, ""), t.setAttribute(st, "")), super.forCustomElement(t, e);
+  }
+  connect() {
+    var t, e;
+    if (this.needsHydration === void 0 && (this.needsHydration = this.source.getAttribute(st) !== null), this.source.hasAttribute(it)) {
+      N.hydrationObserver.observe(this.source, {
+        attributeFilter: [it]
+      });
+      return;
+    }
+    if (!this.needsHydration) {
+      super.connect();
+      return;
+    }
+    if (this.stage !== 3)
+      return;
+    this.stage = 0, this.bindObservables(), this.connectBehaviors();
+    const s = this.source, n = (t = V(s)) !== null && t !== void 0 ? t : s;
+    if (this.template)
+      if (z(this.template)) {
+        let r = n.firstChild, a = n.lastChild;
+        s.shadowRoot === null && (m.isElementBoundaryStartMarker(r) && (r.data = "", r = r.nextSibling), m.isElementBoundaryEndMarker(a) && (a.data = "", a = a.previousSibling)), this.view = this.template.hydrate(r, a, s), (e = this.view) === null || e === void 0 || e.bind(this.source);
+      } else
+        this.renderTemplate(this.template);
+    this.addStyles(this.mainStyles), this.stage = 1, this.source.removeAttribute(st), this.needsInitialization = this.needsHydration = !1, p.notify(this, P);
+  }
+  disconnect() {
+    super.disconnect(), N.hydrationObserver.unobserve(this.source);
+  }
+  static install() {
+    S.setStrategy(N);
   }
 }
-function G(s) {
-  return class extends s {
+N.hydrationObserver = new ze(N.hydrationObserverHandler);
+function de(i) {
+  const t = class extends i {
     constructor() {
-      super(), D.forCustomElement(this);
+      super(), S.forCustomElement(this);
     }
-    $emit(e, t, i) {
-      return this.$fastController.emit(e, t, i);
+    $emit(e, s, n) {
+      return this.$fastController.emit(e, s, n);
     }
     connectedCallback() {
-      this.$fastController.onConnectedCallback();
+      this.$fastController.connect();
     }
     disconnectedCallback() {
-      this.$fastController.onDisconnectedCallback();
+      this.$fastController.disconnect();
     }
-    attributeChangedCallback(e, t, i) {
-      this.$fastController.onAttributeChangedCallback(e, t, i);
+    attributeChangedCallback(e, s, n) {
+      this.$fastController.onAttributeChangedCallback(e, s, n);
     }
   };
+  return f.registerBaseType(t), t;
 }
-const Le = Object.assign(G(HTMLElement), {
+function Ge(i, t) {
+  return O(i) ? f.compose(i, t) : f.compose(this, i);
+}
+function Je(i, t) {
+  return O(i) ? new Promise((e) => {
+    f.composeAsync(i, t).then((s) => {
+      e(s);
+    });
+  }).then((e) => e.define().type) : new Promise((e) => {
+    f.composeAsync(this, i).then((s) => {
+      e(s);
+    });
+  }).then((e) => e.define().type);
+}
+function Ke(i, t) {
+  return O(i) ? f.compose(i, t).define().type : f.compose(this, i).define().type;
+}
+function Xe(i) {
+  return de(i);
+}
+const Ye = 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(s) {
-    return G(s);
-  },
+  from: Xe,
   /**
    * 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(s, e) {
-    return new B(s, e).define().type;
-  }
+  define: Ke,
+  /**
+   * Defines metadata for a FASTElement which can be used to later define the element.
+   * @public
+   */
+  compose: Ge,
+  /**
+   * Defines metadata for a FASTElement which can be used after it has been resolved to define the element.
+   * @alpha
+   */
+  defineAsync: Je
 });
-function je(s, e) {
-  return s instanceof Function ? s(e) : s;
-}
-const J = /* @__PURE__ */ new Set(), M = /* @__PURE__ */ new Map(), et = (s) => (e = "vwc") => {
-  const t = (n) => `${e}-${n}`, i = (n) => {
-    const r = t(n.name);
-    let o = n.type;
-    if (o.componentName = n.name, J.has(r))
+function Ze(i, t) {
+  return i instanceof Function ? i(t) : i;
+}
+const jt = /* @__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, jt.has(r))
       return;
-    M.has(o) && M.get(o) !== r && (o = class extends o {
-    }), J.add(r), M.set(o, r);
-    for (const l of n.dependencies)
-      i(l);
-    const a = new Map([
+    nt.has(a) && nt.get(a) !== r && (a = class extends a {
+    }), jt.add(r), nt.set(a, r);
+    for (const o of n.dependencies)
+      s(o);
+    const c = new Map([
       [n.type, r],
       ...n.dependencies.map(
-        (l) => [l.type, t(l.name)]
+        (o) => [o.type, e(o.name)]
       )
-    ]), c = {
-      tagFor(l) {
-        if (!a.has(l))
+    ]), l = {
+      tagFor: (o, h) => {
+        if (!c.has(o))
           throw new Error(
-            `Could not get tag for ${l.name} as it is not a dependency of ${n.name}.`
+            `Could not get tag for ${o.name} as it is not a dependency of ${n.name}.`
           );
-        return a.get(l);
+        const u = c.get(o);
+        return h ? u : re.partial(u);
       },
-      tagForNonDependency(l) {
-        return t(l);
+      tagForNonDependency(o) {
+        return e(o);
       }
     };
-    new B(o, {
+    f.compose(a, {
       ...n.options,
-      template: je(
+      template: Ze(
         n.template,
-        c
+        l
       ),
-      name: `${e}-${n.name}`
+      name: `${t}-${n.name}`
     }).define();
   };
-  i(s);
-}, tt = (s, e, t, i, n) => ({
-  name: s,
-  type: e,
-  template: t,
-  dependencies: i,
+  s(i);
+}, gi = (i, t, e, s, n) => ({
+  name: i,
+  type: t,
+  template: e,
+  dependencies: s,
   options: n
-}), X = /* @__PURE__ */ new WeakMap(), T = (s) => {
-  let e = X.get(s);
-  return e || (e = [], X.set(s, e)), e;
-}, st = (s, e) => {
-  T(s).push(e);
-}, it = (s, e) => {
-  T(s).splice(T(s).indexOf(e), 1);
-}, He = (s, e) => {
-  T(s).forEach((t) => t(s, e));
-}, De = (s) => s === "delegate", Y = (s) => `vvd${s.charAt(0).toUpperCase()}${s.slice(1)}`, ue = (s, e) => {
-  if (De(s._vividAriaBehaviour)) {
-    const t = s[e];
-    s[`_${e}`] = null, s.removeAttribute(V(e)), s[`_${e}`] = t, s[e] !== null ? s.dataset[Y(e)] = s[e] : delete s.dataset[Y(e)];
+}), Ft = /* @__PURE__ */ new WeakMap(), he = (i) => {
+  let t = Ft.get(i);
+  return t || (t = [], Ft.set(i, t)), t;
+}, yi = (i, t) => {
+  he(i).push(t);
+}, ti = (i, t) => {
+  he(i).forEach((e) => e(i, t));
+}, ei = (i) => i === "delegate", Ht = (i) => `vvd${i.charAt(0).toUpperCase()}${i.slice(1)}`, ue = (i, t) => {
+  if (ei(i._vividAriaBehaviour)) {
+    const e = i[t];
+    i[`_${t}`] = null, i.removeAttribute(at(t)), i[`_${t}`] = e, i[t] !== null ? i.dataset[Ht(t)] = i[t] : delete i.dataset[Ht(t)];
   } else
-    u.setAttribute(
-      s,
-      V(e),
-      s[e]
+    $.setAttribute(
+      i,
+      at(t),
+      i[t]
     );
-}, A = /* @__PURE__ */ new WeakMap(), ze = (s, e) => {
-  const t = A.get(s);
-  t ? t.add(e) : A.set(s, /* @__PURE__ */ new Set([e]));
-}, qe = (s, e) => {
-  s.isConnected ? ue(s, e) : ze(s, e);
-}, Ue = (s) => {
-  const e = A.get(s);
-  if (e) {
-    for (const t of e)
-      ue(s, t);
-    A.delete(s);
-  }
-}, Z = [
+}, Q = /* @__PURE__ */ new WeakMap(), ii = (i, t) => {
+  const e = Q.get(i);
+  e ? e.add(t) : Q.set(i, /* @__PURE__ */ new Set([t]));
+}, si = (i, t) => {
+  i.isConnected ? ue(i, t) : ii(i, t);
+}, ni = (i) => {
+  const t = Q.get(i);
+  if (t) {
+    for (const e of t)
+      ue(i, e);
+    Q.delete(i);
+  }
+}, It = [
   "role",
   "ariaAtomic",
   "ariaAutoComplete",
@@ -1665,65 +2600,70 @@ const J = /* @__PURE__ */ new Set(), M = /* @__PURE__ */ new Map(), et = (s) =>
   "ariaValueText",
   "ariaRelevant"
   // Non-standard
-], V = (s) => s.replace("aria", "aria-").toLowerCase(), We = (s) => {
-  class e extends s {
-    constructor(...i) {
-      super(...i), this._vividAriaBehaviour = "default";
-      for (const n of Z)
+], at = (i) => i.replace("aria", "aria-").toLowerCase(), ri = (i) => {
+  class t extends i {
+    constructor(...s) {
+      super(...s), this._vividAriaBehaviour = "default";
+      for (const n of It)
         this[`_${n}`] = null;
     }
     connectedCallback() {
-      super.connectedCallback(), Ue(this);
+      super.connectedCallback(), ni(this);
     }
   }
-  for (const t of Z)
-    Re({
-      attribute: V(t),
+  for (const e of It)
+    Pe({
+      attribute: at(e),
       mode: "fromView"
-    })(e.prototype, t), e.prototype[`${t}Changed`] = function() {
-      qe(this, t), this._vividAriaBehaviour !== "default" && He(this, t);
+    })(t.prototype, e), t.prototype[`${e}Changed`] = function() {
+      si(this, e), this._vividAriaBehaviour !== "default" && ti(this, e);
     };
-  return e;
-}, fe = _(), nt = (s) => (e, t) => {
-  fe(e.constructor).push({
-    newPropertyName: t,
-    ...s
+  return t;
+};
+function oi() {
+  const i = /* @__PURE__ */ new WeakMap();
+  return (t) => (i.has(t) || i.set(t, []), i.get(t));
+}
+const fe = oi(), vi = (i) => (t, e) => {
+  fe(t.constructor).push({
+    newPropertyName: e,
+    ...i
   });
-}, Qe = (s) => {
-  class e extends s {
-    #e(i) {
+}, ai = (i) => {
+  class t extends i {
+    #t(s) {
       let n = !1, r = !1;
-      const o = (h) => r && i.fromDeprecated(
-        h[i.deprecatedPropertyName]
-      ) === h[i.newPropertyName], a = (h) => n && i.toDeprecated && i.toDeprecated(h[i.newPropertyName]) === h[i.deprecatedPropertyName], c = {
-        handleChange(h, d) {
-          if (d === i.newPropertyName) {
-            if (n = !0, !i.toDeprecated || o(h))
+      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) {
+          if (h === s.newPropertyName) {
+            if (n = !0, !s.toDeprecated || a(o))
               return;
-            h[i.deprecatedPropertyName] = i.toDeprecated(h[i.newPropertyName]);
+            o[s.deprecatedPropertyName] = s.toDeprecated(o[s.newPropertyName]);
           }
-          if (d === i.deprecatedPropertyName) {
-            if (r = !0, a(h))
+          if (h === s.deprecatedPropertyName) {
+            if (r = !0, c(o))
               return;
-            h[i.newPropertyName] = i.fromDeprecated(
-              h[i.deprecatedPropertyName]
+            o[s.newPropertyName] = s.fromDeprecated(
+              o[s.deprecatedPropertyName]
             );
           }
         }
-      }, l = b.getNotifier(this);
-      l.subscribe(c, i.newPropertyName), l.subscribe(c, i.deprecatedPropertyName);
+      }, l = p.getNotifier(this);
+      l.subscribe(d, s.newPropertyName), l.subscribe(d, s.deprecatedPropertyName);
     }
-    constructor(...i) {
-      super(...i);
+    constructor(...s) {
+      super(...s);
       for (const n of fe(this.constructor))
-        this.#e(n);
+        this.#t(n);
     }
   }
-  return e;
+  return t;
 };
-class rt extends We(Qe(Le)) {
+class mi extends ri(ai(Ye)) {
   static {
-    this.VIVID_VERSION = "5.1.0";
+    this.VIVID_VERSION = "5.3.0";
   }
   /**
    * Add data-vvd-component attribute with component name globally,
@@ -1731,31 +2671,45 @@ class rt extends We(Qe(Le)) {
    */
   connectedCallback() {
     super.connectedCallback();
-    const e = this.constructor.componentName;
-    this.setAttribute("data-vvd-component", e);
+    const t = this.constructor.componentName;
+    this.setAttribute("data-vvd-component", t);
   }
 }
 export {
-  Xe as A,
-  u as D,
-  g as E,
-  P as H,
-  b as O,
-  I as S,
-  rt as V,
-  Re as a,
-  w as b,
-  et as c,
-  tt as d,
-  Ke as e,
-  V as f,
-  Z as g,
-  Ye as h,
-  Fe as i,
-  Ze as n,
-  Ge as o,
-  nt as r,
-  st as s,
-  it as u,
-  Je as v
+  ci as A,
+  lt as B,
+  $ as D,
+  M as E,
+  T as H,
+  Kt as M,
+  p as O,
+  we as S,
+  Ut as U,
+  mi as V,
+  Pe as a,
+  pi as b,
+  bi as c,
+  gi as d,
+  di as e,
+  O as f,
+  qt as g,
+  re as h,
+  B as i,
+  at as j,
+  It as k,
+  rt as l,
+  z as m,
+  fi as n,
+  hi as o,
+  A as p,
+  K as q,
+  vi as r,
+  yi as s,
+  m as t,
+  Gt as u,
+  ui as v,
+  v as w,
+  pe as x,
+  li as y,
+  Z as z
 };