@vonage/vivid 3.0.0-next.7 → 3.0.0-test.0

package/shared/index.js

@@ -0,0 +1,4998 @@
+/**
+ * A reference to globalThis, with support
+ * for browsers that don't yet support the spec.
+ * @public
+ */
+const $global = (function () {
+    if (typeof globalThis !== "undefined") {
+        // We're running in a modern environment.
+        return globalThis;
+    }
+    if (typeof global !== "undefined") {
+        // We're running in NodeJS
+        return global;
+    }
+    if (typeof self !== "undefined") {
+        // We're running in a worker.
+        return self;
+    }
+    if (typeof window !== "undefined") {
+        // We're running in the browser's main thread.
+        return window;
+    }
+    try {
+        // Hopefully we never get here...
+        // Not all environments allow eval and Function. Use only as a last resort:
+        // eslint-disable-next-line no-new-func
+        return new Function("return this")();
+    }
+    catch (_a) {
+        // If all fails, give up and create an object.
+        // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+        return {};
+    }
+})();
+// API-only Polyfill for trustedTypes
+if ($global.trustedTypes === void 0) {
+    $global.trustedTypes = { createPolicy: (n, r) => r };
+}
+const propConfig = {
+    configurable: false,
+    enumerable: false,
+    writable: false,
+};
+if ($global.FAST === void 0) {
+    Reflect.defineProperty($global, "FAST", Object.assign({ value: Object.create(null) }, propConfig));
+}
+/**
+ * The FAST global.
+ * @internal
+ */
+const FAST = $global.FAST;
+if (FAST.getById === void 0) {
+    const storage = Object.create(null);
+    Reflect.defineProperty(FAST, "getById", Object.assign({ value(id, initialize) {
+            let found = storage[id];
+            if (found === void 0) {
+                found = initialize ? (storage[id] = initialize()) : null;
+            }
+            return found;
+        } }, propConfig));
+}
+/**
+ * A readonly, empty array.
+ * @remarks
+ * Typically returned by APIs that return arrays when there are
+ * no actual items to return.
+ * @internal
+ */
+const emptyArray = Object.freeze([]);
+
+const updateQueue = $global.FAST.getById(1 /* updateQueue */, () => {
+    const tasks = [];
+    const pendingErrors = [];
+    function throwFirstError() {
+        if (pendingErrors.length) {
+            throw pendingErrors.shift();
+        }
+    }
+    function tryRunTask(task) {
+        try {
+            task.call();
+        }
+        catch (error) {
+            pendingErrors.push(error);
+            setTimeout(throwFirstError, 0);
+        }
+    }
+    function process() {
+        const capacity = 1024;
+        let index = 0;
+        while (index < tasks.length) {
+            tryRunTask(tasks[index]);
+            index++;
+            // Prevent leaking memory for long chains of recursive calls to `DOM.queueUpdate`.
+            // If we call `DOM.queueUpdate` within a task scheduled by `DOM.queueUpdate`, the queue will
+            // grow, but to avoid an O(n) walk for every task we execute, we don't
+            // shift tasks off the queue after they have been executed.
+            // Instead, we periodically shift 1024 tasks off the queue.
+            if (index > capacity) {
+                // Manually shift all values starting at the index back to the
+                // beginning of the queue.
+                for (let scan = 0, newLength = tasks.length - index; scan < newLength; scan++) {
+                    tasks[scan] = tasks[scan + index];
+                }
+                tasks.length -= index;
+                index = 0;
+            }
+        }
+        tasks.length = 0;
+    }
+    function enqueue(callable) {
+        if (tasks.length < 1) {
+            $global.requestAnimationFrame(process);
+        }
+        tasks.push(callable);
+    }
+    return Object.freeze({
+        enqueue,
+        process,
+    });
+});
+/* eslint-disable */
+const fastHTMLPolicy = $global.trustedTypes.createPolicy("fast-html", {
+    createHTML: html => html,
+});
+/* eslint-enable */
+let htmlPolicy = fastHTMLPolicy;
+const marker = `fast-${Math.random().toString(36).substring(2, 8)}`;
+/** @internal */
+const _interpolationStart = `${marker}{`;
+/** @internal */
+const _interpolationEnd = `}${marker}`;
+/**
+ * Common DOM APIs.
+ * @public
+ */
+const DOM = Object.freeze({
+    /**
+     * Indicates whether the DOM supports the adoptedStyleSheets feature.
+     */
+    supportsAdoptedStyleSheets: Array.isArray(document.adoptedStyleSheets) &&
+        "replace" in CSSStyleSheet.prototype,
+    /**
+     * 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.
+     */
+    setHTMLPolicy(policy) {
+        if (htmlPolicy !== fastHTMLPolicy) {
+            throw new Error("The HTML policy can only be set once.");
+        }
+        htmlPolicy = policy;
+    },
+    /**
+     * 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.
+     */
+    createHTML(html) {
+        return htmlPolicy.createHTML(html);
+    },
+    /**
+     * Determines if the provided node is a template marker used by the runtime.
+     * @param node - The node to test.
+     */
+    isMarker(node) {
+        return node && node.nodeType === 8 && node.data.startsWith(marker);
+    },
+    /**
+     * Given a marker node, extract the {@link HTMLDirective} index from the placeholder.
+     * @param node - The marker node to extract the index from.
+     */
+    extractDirectiveIndexFromMarker(node) {
+        return parseInt(node.data.replace(`${marker}:`, ""));
+    },
+    /**
+     * 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.
+     */
+    createInterpolationPlaceholder(index) {
+        return `${_interpolationStart}${index}${_interpolationEnd}`;
+    },
+    /**
+     * 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`.
+     */
+    createCustomAttributePlaceholder(attributeName, index) {
+        return `${attributeName}="${this.createInterpolationPlaceholder(index)}"`;
+    },
+    /**
+     * 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`.
+     */
+    createBlockPlaceholder(index) {
+        return `<!--${marker}:${index}-->`;
+    },
+    /**
+     * Schedules DOM update work in the next async batch.
+     * @param callable - The callable function or object to queue.
+     */
+    queueUpdate: updateQueue.enqueue,
+    /**
+     * Immediately processes all work previously scheduled
+     * through queueUpdate.
+     * @remarks
+     * This also forces nextUpdate promises
+     * to resolve.
+     */
+    processUpdates: updateQueue.process,
+    /**
+     * Resolves with the next DOM update.
+     */
+    nextUpdate() {
+        return new Promise(updateQueue.enqueue);
+    },
+    /**
+     * Sets an attribute value on an element.
+     * @param element - The element to set the attribute value on.
+     * @param attributeName - The attribute name to set.
+     * @param value - The value of the attribute to set.
+     * @remarks
+     * 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(element, attributeName, value) {
+        if (value === null || value === undefined) {
+            element.removeAttribute(attributeName);
+        }
+        else {
+            element.setAttribute(attributeName, value);
+        }
+    },
+    /**
+     * Sets a boolean attribute value.
+     * @param element - The element to set the boolean attribute value on.
+     * @param attributeName - The attribute name to set.
+     * @param value - The value of the attribute to set.
+     * @remarks
+     * If the value is true, the attribute is added; otherwise it is removed.
+     */
+    setBooleanAttribute(element, attributeName, value) {
+        value
+            ? element.setAttribute(attributeName, "")
+            : element.removeAttribute(attributeName);
+    },
+    /**
+     * Removes all the child nodes of the provided parent node.
+     * @param parent - The node to remove the children from.
+     */
+    removeChildNodes(parent) {
+        for (let child = parent.firstChild; child !== null; child = parent.firstChild) {
+            parent.removeChild(child);
+        }
+    },
+    /**
+     * Creates a TreeWalker configured to walk a template fragment.
+     * @param fragment - The fragment to walk.
+     */
+    createTemplateWalker(fragment) {
+        return document.createTreeWalker(fragment, 133, // element, text, comment
+        null, false);
+    },
+});
+
+function spilloverSubscribe(subscriber) {
+    const spillover = this.spillover;
+    const index = spillover.indexOf(subscriber);
+    if (index === -1) {
+        spillover.push(subscriber);
+    }
+}
+function spilloverUnsubscribe(subscriber) {
+    const spillover = this.spillover;
+    const index = spillover.indexOf(subscriber);
+    if (index !== -1) {
+        spillover.splice(index, 1);
+    }
+}
+function spilloverNotifySubscribers(args) {
+    const spillover = this.spillover;
+    const source = this.source;
+    for (let i = 0, ii = spillover.length; i < ii; ++i) {
+        spillover[i].handleChange(source, args);
+    }
+}
+function spilloverHas(subscriber) {
+    return this.spillover.indexOf(subscriber) !== -1;
+}
+/**
+ * An implementation of {@link Notifier} that efficiently keeps track of
+ * subscribers interested in a specific change notification on an
+ * observable source.
+ *
+ * @remarks
+ * This set is optimized for the most common scenario of 1 or 2 subscribers.
+ * With this in mind, it can store a subscriber in an internal field, allowing it to avoid Array#push operations.
+ * If the set ever exceeds two subscribers, it upgrades to an array automatically.
+ * @public
+ */
+class SubscriberSet {
+    /**
+     * Creates an instance of SubscriberSet for the specified source.
+     * @param source - The object source that subscribers will receive notifications from.
+     * @param initialSubscriber - An initial subscriber to changes.
+     */
+    constructor(source, initialSubscriber) {
+        this.sub1 = void 0;
+        this.sub2 = void 0;
+        this.spillover = void 0;
+        this.source = source;
+        this.sub1 = initialSubscriber;
+    }
+    /**
+     * Checks whether the provided subscriber has been added to this set.
+     * @param subscriber - The subscriber to test for inclusion in this set.
+     */
+    has(subscriber) {
+        return this.sub1 === subscriber || this.sub2 === subscriber;
+    }
+    /**
+     * Subscribes to notification of changes in an object's state.
+     * @param subscriber - The object that is subscribing for change notification.
+     */
+    subscribe(subscriber) {
+        if (this.has(subscriber)) {
+            return;
+        }
+        if (this.sub1 === void 0) {
+            this.sub1 = subscriber;
+            return;
+        }
+        if (this.sub2 === void 0) {
+            this.sub2 = subscriber;
+            return;
+        }
+        this.spillover = [this.sub1, this.sub2, subscriber];
+        this.subscribe = spilloverSubscribe;
+        this.unsubscribe = spilloverUnsubscribe;
+        this.notify = spilloverNotifySubscribers;
+        this.has = spilloverHas;
+        this.sub1 = void 0;
+        this.sub2 = void 0;
+    }
+    /**
+     * Unsubscribes from notification of changes in an object's state.
+     * @param subscriber - The object that is unsubscribing from change notification.
+     */
+    unsubscribe(subscriber) {
+        if (this.sub1 === subscriber) {
+            this.sub1 = void 0;
+        }
+        else if (this.sub2 === subscriber) {
+            this.sub2 = void 0;
+        }
+    }
+    /**
+     * Notifies all subscribers.
+     * @param args - Data passed along to subscribers during notification.
+     */
+    notify(args) {
+        const sub1 = this.sub1;
+        const sub2 = this.sub2;
+        const source = this.source;
+        if (sub1 !== void 0) {
+            sub1.handleChange(source, args);
+        }
+        if (sub2 !== void 0) {
+            sub2.handleChange(source, args);
+        }
+    }
+}
+/**
+ * An implementation of Notifier that allows subscribers to be notified
+ * of individual property changes on an object.
+ * @public
+ */
+class PropertyChangeNotifier {
+    /**
+     * Creates an instance of PropertyChangeNotifier for the specified source.
+     * @param source - The object source that subscribers will receive notifications from.
+     */
+    constructor(source) {
+        this.subscribers = {};
+        this.sourceSubscribers = null;
+        this.source = source;
+    }
+    /**
+     * Notifies all subscribers, based on the specified property.
+     * @param propertyName - The property name, passed along to subscribers during notification.
+     */
+    notify(propertyName) {
+        var _a;
+        const subscribers = this.subscribers[propertyName];
+        if (subscribers !== void 0) {
+            subscribers.notify(propertyName);
+        }
+        (_a = this.sourceSubscribers) === null || _a === void 0 ? void 0 : _a.notify(propertyName);
+    }
+    /**
+     * 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(subscriber, propertyToWatch) {
+        var _a;
+        if (propertyToWatch) {
+            let subscribers = this.subscribers[propertyToWatch];
+            if (subscribers === void 0) {
+                this.subscribers[propertyToWatch] = subscribers = new SubscriberSet(this.source);
+            }
+            subscribers.subscribe(subscriber);
+        }
+        else {
+            this.sourceSubscribers = (_a = this.sourceSubscribers) !== null && _a !== void 0 ? _a : new SubscriberSet(this.source);
+            this.sourceSubscribers.subscribe(subscriber);
+        }
+    }
+    /**
+     * 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(subscriber, propertyToUnwatch) {
+        var _a;
+        if (propertyToUnwatch) {
+            const subscribers = this.subscribers[propertyToUnwatch];
+            if (subscribers !== void 0) {
+                subscribers.unsubscribe(subscriber);
+            }
+        }
+        else {
+            (_a = this.sourceSubscribers) === null || _a === void 0 ? void 0 : _a.unsubscribe(subscriber);
+        }
+    }
+}
+
+/**
+ * Common Observable APIs.
+ * @public
+ */
+const Observable = FAST.getById(2 /* observable */, () => {
+    const volatileRegex = /(:|&&|\|\||if)/;
+    const notifierLookup = new WeakMap();
+    const accessorLookup = new WeakMap();
+    const queueUpdate = DOM.queueUpdate;
+    let watcher = void 0;
+    let createArrayObserver = (array) => {
+        throw new Error("Must call enableArrayObservation before observing arrays.");
+    };
+    function getNotifier(source) {
+        let found = source.$fastController || notifierLookup.get(source);
+        if (found === void 0) {
+            if (Array.isArray(source)) {
+                found = createArrayObserver(source);
+            }
+            else {
+                notifierLookup.set(source, (found = new PropertyChangeNotifier(source)));
+            }
+        }
+        return found;
+    }
+    function getAccessors(target) {
+        let accessors = accessorLookup.get(target);
+        if (accessors === void 0) {
+            let currentTarget = Reflect.getPrototypeOf(target);
+            while (accessors === void 0 && currentTarget !== null) {
+                accessors = accessorLookup.get(currentTarget);
+                currentTarget = Reflect.getPrototypeOf(currentTarget);
+            }
+            if (accessors === void 0) {
+                accessors = [];
+            }
+            else {
+                accessors = accessors.slice(0);
+            }
+            accessorLookup.set(target, accessors);
+        }
+        return accessors;
+    }
+    class DefaultObservableAccessor {
+        constructor(name) {
+            this.name = name;
+            this.field = `_${name}`;
+            this.callback = `${name}Changed`;
+        }
+        getValue(source) {
+            if (watcher !== void 0) {
+                watcher.watch(source, this.name);
+            }
+            return source[this.field];
+        }
+        setValue(source, newValue) {
+            const field = this.field;
+            const oldValue = source[field];
+            if (oldValue !== newValue) {
+                source[field] = newValue;
+                const callback = source[this.callback];
+                if (typeof callback === "function") {
+                    callback.call(source, oldValue, newValue);
+                }
+                getNotifier(source).notify(this.name);
+            }
+        }
+    }
+    class BindingObserverImplementation extends SubscriberSet {
+        constructor(binding, initialSubscriber, isVolatileBinding = false) {
+            super(binding, initialSubscriber);
+            this.binding = binding;
+            this.isVolatileBinding = isVolatileBinding;
+            this.needsRefresh = true;
+            this.needsQueue = true;
+            this.first = this;
+            this.last = null;
+            this.propertySource = void 0;
+            this.propertyName = void 0;
+            this.notifier = void 0;
+            this.next = void 0;
+        }
+        observe(source, context) {
+            if (this.needsRefresh && this.last !== null) {
+                this.disconnect();
+            }
+            const previousWatcher = watcher;
+            watcher = this.needsRefresh ? this : void 0;
+            this.needsRefresh = this.isVolatileBinding;
+            const result = this.binding(source, context);
+            watcher = previousWatcher;
+            return result;
+        }
+        disconnect() {
+            if (this.last !== null) {
+                let current = this.first;
+                while (current !== void 0) {
+                    current.notifier.unsubscribe(this, current.propertyName);
+                    current = current.next;
+                }
+                this.last = null;
+                this.needsRefresh = this.needsQueue = true;
+            }
+        }
+        watch(propertySource, propertyName) {
+            const prev = this.last;
+            const notifier = getNotifier(propertySource);
+            const current = prev === null ? this.first : {};
+            current.propertySource = propertySource;
+            current.propertyName = propertyName;
+            current.notifier = notifier;
+            notifier.subscribe(this, propertyName);
+            if (prev !== null) {
+                if (!this.needsRefresh) {
+                    // Declaring the variable prior to assignment below circumvents
+                    // a bug in Angular's optimization process causing infinite recursion
+                    // of this watch() method. Details https://github.com/microsoft/fast/issues/4969
+                    let prevValue;
+                    watcher = void 0;
+                    /* eslint-disable-next-line */
+                    prevValue = prev.propertySource[prev.propertyName];
+                    watcher = this;
+                    if (propertySource === prevValue) {
+                        this.needsRefresh = true;
+                    }
+                }
+                prev.next = current;
+            }
+            this.last = current;
+        }
+        handleChange() {
+            if (this.needsQueue) {
+                this.needsQueue = false;
+                queueUpdate(this);
+            }
+        }
+        call() {
+            if (this.last !== null) {
+                this.needsQueue = true;
+                this.notify(this);
+            }
+        }
+        records() {
+            let next = this.first;
+            return {
+                next: () => {
+                    const current = next;
+                    if (current === undefined) {
+                        return { value: void 0, done: true };
+                    }
+                    else {
+                        next = next.next;
+                        return {
+                            value: current,
+                            done: false,
+                        };
+                    }
+                },
+                [Symbol.iterator]: function () {
+                    return this;
+                },
+            };
+        }
+    }
+    return Object.freeze({
+        /**
+         * @internal
+         * @param factory - The factory used to create array observers.
+         */
+        setArrayObserverFactory(factory) {
+            createArrayObserver = factory;
+        },
+        /**
+         * Gets a notifier for an object or Array.
+         * @param source - The object or Array to get the notifier for.
+         */
+        getNotifier,
+        /**
+         * Records a property change for a source object.
+         * @param source - The object to record the change against.
+         * @param propertyName - The property to track as changed.
+         */
+        track(source, propertyName) {
+            if (watcher !== void 0) {
+                watcher.watch(source, propertyName);
+            }
+        },
+        /**
+         * Notifies watchers that the currently executing property getter or function is volatile
+         * with respect to its observable dependencies.
+         */
+        trackVolatile() {
+            if (watcher !== void 0) {
+                watcher.needsRefresh = true;
+            }
+        },
+        /**
+         * 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(source, args) {
+            getNotifier(source).notify(args);
+        },
+        /**
+         * Defines an observable property on an object or prototype.
+         * @param target - The target object to define the observable on.
+         * @param nameOrAccessor - The name of the property to define as observable;
+         * or a custom accessor that specifies the property name and accessor implementation.
+         */
+        defineProperty(target, nameOrAccessor) {
+            if (typeof nameOrAccessor === "string") {
+                nameOrAccessor = new DefaultObservableAccessor(nameOrAccessor);
+            }
+            getAccessors(target).push(nameOrAccessor);
+            Reflect.defineProperty(target, nameOrAccessor.name, {
+                enumerable: true,
+                get: function () {
+                    return nameOrAccessor.getValue(this);
+                },
+                set: function (newValue) {
+                    nameOrAccessor.setValue(this, newValue);
+                },
+            });
+        },
+        /**
+         * Finds all the observable accessors defined on the target,
+         * including its prototype chain.
+         * @param target - The target object to search for accessor on.
+         */
+        getAccessors,
+        /**
+         * Creates a {@link BindingObserver} that can watch the
+         * provided {@link Binding} for changes.
+         * @param binding - 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(binding, initialSubscriber, isVolatileBinding = this.isVolatileBinding(binding)) {
+            return new BindingObserverImplementation(binding, initialSubscriber, isVolatileBinding);
+        },
+        /**
+         * 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.
+         */
+        isVolatileBinding(binding) {
+            return volatileRegex.test(binding.toString());
+        },
+    });
+});
+/**
+ * Decorator: Defines an observable property on the target.
+ * @param target - The target to define the observable on.
+ * @param nameOrAccessor - The property name or accessor to define the observable as.
+ * @public
+ */
+function observable(target, nameOrAccessor) {
+    Observable.defineProperty(target, nameOrAccessor);
+}
+const contextEvent = FAST.getById(3 /* contextEvent */, () => {
+    let current = null;
+    return {
+        get() {
+            return current;
+        },
+        set(event) {
+            current = event;
+        },
+    };
+});
+/**
+ * Provides additional contextual information available to behaviors and expressions.
+ * @public
+ */
+class ExecutionContext {
+    constructor() {
+        /**
+         * The index of the current item within a repeat context.
+         */
+        this.index = 0;
+        /**
+         * The length of the current collection within a repeat context.
+         */
+        this.length = 0;
+        /**
+         * The parent data object within a repeat context.
+         */
+        this.parent = null;
+        /**
+         * The parent execution context when in nested context scenarios.
+         */
+        this.parentContext = null;
+    }
+    /**
+     * The current event within an event handler.
+     */
+    get event() {
+        return contextEvent.get();
+    }
+    /**
+     * Indicates whether the current item within a repeat context
+     * has an even index.
+     */
+    get isEven() {
+        return this.index % 2 === 0;
+    }
+    /**
+     * Indicates whether the current item within a repeat context
+     * has an odd index.
+     */
+    get isOdd() {
+        return this.index % 2 !== 0;
+    }
+    /**
+     * Indicates whether the current item within a repeat context
+     * is the first item in the collection.
+     */
+    get isFirst() {
+        return this.index === 0;
+    }
+    /**
+     * Indicates whether the current item within a repeat context
+     * is somewhere in the middle of the collection.
+     */
+    get isInMiddle() {
+        return !this.isFirst && !this.isLast;
+    }
+    /**
+     * Indicates whether the current item within a repeat context
+     * is the last item in the collection.
+     */
+    get isLast() {
+        return this.index === this.length - 1;
+    }
+    /**
+     * Sets the event for the current execution context.
+     * @param event - The event to set.
+     * @internal
+     */
+    static setEvent(event) {
+        contextEvent.set(event);
+    }
+}
+Observable.defineProperty(ExecutionContext.prototype, "index");
+Observable.defineProperty(ExecutionContext.prototype, "length");
+/**
+ * The default execution context used in binding expressions.
+ * @public
+ */
+const defaultExecutionContext = Object.seal(new ExecutionContext());
+
+/**
+ * Instructs the template engine to apply behavior to a node.
+ * @public
+ */
+class HTMLDirective {
+    constructor() {
+        /**
+         * The index of the DOM node to which the created behavior will apply.
+         */
+        this.targetIndex = 0;
+    }
+}
+/**
+ * A {@link HTMLDirective} that targets a named attribute or property on a node.
+ * @public
+ */
+class TargetedHTMLDirective extends HTMLDirective {
+    constructor() {
+        super(...arguments);
+        /**
+         * Creates a placeholder string based on the directive's index within the template.
+         * @param index - The index of the directive within the template.
+         */
+        this.createPlaceholder = DOM.createInterpolationPlaceholder;
+    }
+}
+/**
+ * A directive that attaches special behavior to an element via a custom attribute.
+ * @public
+ */
+class AttachedBehaviorHTMLDirective extends HTMLDirective {
+    /**
+     *
+     * @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.
+     */
+    constructor(name, behavior, options) {
+        super();
+        this.name = name;
+        this.behavior = behavior;
+        this.options = options;
+    }
+    /**
+     * 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.
+     */
+    createPlaceholder(index) {
+        return DOM.createCustomAttributePlaceholder(this.name, index);
+    }
+    /**
+     * 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.
+     */
+    createBehavior(target) {
+        return new this.behavior(target, this.options);
+    }
+}
+
+function normalBind(source, context) {
+    this.source = source;
+    this.context = context;
+    if (this.bindingObserver === null) {
+        this.bindingObserver = Observable.binding(this.binding, this, this.isBindingVolatile);
+    }
+    this.updateTarget(this.bindingObserver.observe(source, context));
+}
+function triggerBind(source, context) {
+    this.source = source;
+    this.context = context;
+    this.target.addEventListener(this.targetName, this);
+}
+function normalUnbind() {
+    this.bindingObserver.disconnect();
+    this.source = null;
+    this.context = null;
+}
+function contentUnbind() {
+    this.bindingObserver.disconnect();
+    this.source = null;
+    this.context = null;
+    const view = this.target.$fastView;
+    if (view !== void 0 && view.isComposed) {
+        view.unbind();
+        view.needsBindOnly = true;
+    }
+}
+function triggerUnbind() {
+    this.target.removeEventListener(this.targetName, this);
+    this.source = null;
+    this.context = null;
+}
+function updateAttributeTarget(value) {
+    DOM.setAttribute(this.target, this.targetName, value);
+}
+function updateBooleanAttributeTarget(value) {
+    DOM.setBooleanAttribute(this.target, this.targetName, value);
+}
+function updateContentTarget(value) {
+    // If there's no actual value, then this equates to the
+    // empty string for the purposes of content bindings.
+    if (value === null || value === undefined) {
+        value = "";
+    }
+    // If the value has a "create" method, then it's a template-like.
+    if (value.create) {
+        this.target.textContent = "";
+        let view = this.target.$fastView;
+        // If there's no previous view that we might be able to
+        // reuse then create a new view from the template.
+        if (view === void 0) {
+            view = value.create();
+        }
+        else {
+            // If there is a previous view, but it wasn't created
+            // from the same template as the new value, then we
+            // need to remove the old view if it's still in the DOM
+            // and create a new view from the template.
+            if (this.target.$fastTemplate !== value) {
+                if (view.isComposed) {
+                    view.remove();
+                    view.unbind();
+                }
+                view = value.create();
+            }
+        }
+        // It's possible that the value is the same as the previous template
+        // and that there's actually no need to compose it.
+        if (!view.isComposed) {
+            view.isComposed = true;
+            view.bind(this.source, this.context);
+            view.insertBefore(this.target);
+            this.target.$fastView = view;
+            this.target.$fastTemplate = value;
+        }
+        else if (view.needsBindOnly) {
+            view.needsBindOnly = false;
+            view.bind(this.source, this.context);
+        }
+    }
+    else {
+        const view = this.target.$fastView;
+        // If there is a view and it's currently composed into
+        // the DOM, then we need to remove it.
+        if (view !== void 0 && view.isComposed) {
+            view.isComposed = false;
+            view.remove();
+            if (view.needsBindOnly) {
+                view.needsBindOnly = false;
+            }
+            else {
+                view.unbind();
+            }
+        }
+        this.target.textContent = value;
+    }
+}
+function updatePropertyTarget(value) {
+    this.target[this.targetName] = value;
+}
+function updateClassTarget(value) {
+    const classVersions = this.classVersions || Object.create(null);
+    const target = this.target;
+    let version = this.version || 0;
+    // Add the classes, tracking the version at which they were added.
+    if (value !== null && value !== undefined && value.length) {
+        const names = value.split(/\s+/);
+        for (let i = 0, ii = names.length; i < ii; ++i) {
+            const currentName = names[i];
+            if (currentName === "") {
+                continue;
+            }
+            classVersions[currentName] = version;
+            target.classList.add(currentName);
+        }
+    }
+    this.classVersions = classVersions;
+    this.version = version + 1;
+    // If this is the first call to add classes, there's no need to remove old ones.
+    if (version === 0) {
+        return;
+    }
+    // Remove classes from the previous version.
+    version -= 1;
+    for (const name in classVersions) {
+        if (classVersions[name] === version) {
+            target.classList.remove(name);
+        }
+    }
+}
+/**
+ * A directive that configures data binding to element content and attributes.
+ * @public
+ */
+class HTMLBindingDirective extends TargetedHTMLDirective {
+    /**
+     * Creates an instance of BindingDirective.
+     * @param binding - A binding that returns the data used to update the DOM.
+     */
+    constructor(binding) {
+        super();
+        this.binding = binding;
+        this.bind = normalBind;
+        this.unbind = normalUnbind;
+        this.updateTarget = updateAttributeTarget;
+        this.isBindingVolatile = Observable.isVolatileBinding(this.binding);
+    }
+    /**
+     * Gets/sets the name of the attribute or property that this
+     * binding is targeting.
+     */
+    get targetName() {
+        return this.originalTargetName;
+    }
+    set targetName(value) {
+        this.originalTargetName = value;
+        if (value === void 0) {
+            return;
+        }
+        switch (value[0]) {
+            case ":":
+                this.cleanedTargetName = value.substr(1);
+                this.updateTarget = updatePropertyTarget;
+                if (this.cleanedTargetName === "innerHTML") {
+                    const binding = this.binding;
+                    this.binding = (s, c) => DOM.createHTML(binding(s, c));
+                }
+                break;
+            case "?":
+                this.cleanedTargetName = value.substr(1);
+                this.updateTarget = updateBooleanAttributeTarget;
+                break;
+            case "@":
+                this.cleanedTargetName = value.substr(1);
+                this.bind = triggerBind;
+                this.unbind = triggerUnbind;
+                break;
+            default:
+                this.cleanedTargetName = value;
+                if (value === "class") {
+                    this.updateTarget = updateClassTarget;
+                }
+                break;
+        }
+    }
+    /**
+     * Makes this binding target the content of an element rather than
+     * a particular attribute or property.
+     */
+    targetAtContent() {
+        this.updateTarget = updateContentTarget;
+        this.unbind = contentUnbind;
+    }
+    /**
+     * 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.
+     */
+    createBehavior(target) {
+        /* eslint-disable-next-line @typescript-eslint/no-use-before-define */
+        return new BindingBehavior(target, this.binding, this.isBindingVolatile, this.bind, this.unbind, this.updateTarget, this.cleanedTargetName);
+    }
+}
+/**
+ * A behavior that updates content and attributes based on a configured
+ * BindingDirective.
+ * @public
+ */
+class BindingBehavior {
+    /**
+     * 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(target, binding, isBindingVolatile, bind, unbind, updateTarget, targetName) {
+        /** @internal */
+        this.source = null;
+        /** @internal */
+        this.context = null;
+        /** @internal */
+        this.bindingObserver = null;
+        this.target = target;
+        this.binding = binding;
+        this.isBindingVolatile = isBindingVolatile;
+        this.bind = bind;
+        this.unbind = unbind;
+        this.updateTarget = updateTarget;
+        this.targetName = targetName;
+    }
+    /** @internal */
+    handleChange() {
+        this.updateTarget(this.bindingObserver.observe(this.source, this.context));
+    }
+    /** @internal */
+    handleEvent(event) {
+        ExecutionContext.setEvent(event);
+        const result = this.binding(this.source, this.context);
+        ExecutionContext.setEvent(null);
+        if (result !== true) {
+            event.preventDefault();
+        }
+    }
+}
+
+let sharedContext = null;
+class CompilationContext {
+    addFactory(factory) {
+        factory.targetIndex = this.targetIndex;
+        this.behaviorFactories.push(factory);
+    }
+    captureContentBinding(directive) {
+        directive.targetAtContent();
+        this.addFactory(directive);
+    }
+    reset() {
+        this.behaviorFactories = [];
+        this.targetIndex = -1;
+    }
+    release() {
+        sharedContext = this;
+    }
+    static borrow(directives) {
+        const shareable = sharedContext || new CompilationContext();
+        shareable.directives = directives;
+        shareable.reset();
+        sharedContext = null;
+        return shareable;
+    }
+}
+function createAggregateBinding(parts) {
+    if (parts.length === 1) {
+        return parts[0];
+    }
+    let targetName;
+    const partCount = parts.length;
+    const finalParts = parts.map((x) => {
+        if (typeof x === "string") {
+            return () => x;
+        }
+        targetName = x.targetName || targetName;
+        return x.binding;
+    });
+    const binding = (scope, context) => {
+        let output = "";
+        for (let i = 0; i < partCount; ++i) {
+            output += finalParts[i](scope, context);
+        }
+        return output;
+    };
+    const directive = new HTMLBindingDirective(binding);
+    directive.targetName = targetName;
+    return directive;
+}
+const interpolationEndLength = _interpolationEnd.length;
+function parseContent(context, value) {
+    const valueParts = value.split(_interpolationStart);
+    if (valueParts.length === 1) {
+        return null;
+    }
+    const bindingParts = [];
+    for (let i = 0, ii = valueParts.length; i < ii; ++i) {
+        const current = valueParts[i];
+        const index = current.indexOf(_interpolationEnd);
+        let literal;
+        if (index === -1) {
+            literal = current;
+        }
+        else {
+            const directiveIndex = parseInt(current.substring(0, index));
+            bindingParts.push(context.directives[directiveIndex]);
+            literal = current.substring(index + interpolationEndLength);
+        }
+        if (literal !== "") {
+            bindingParts.push(literal);
+        }
+    }
+    return bindingParts;
+}
+function compileAttributes(context, node, includeBasicValues = false) {
+    const attributes = node.attributes;
+    for (let i = 0, ii = attributes.length; i < ii; ++i) {
+        const attr = attributes[i];
+        const attrValue = attr.value;
+        const parseResult = parseContent(context, attrValue);
+        let result = null;
+        if (parseResult === null) {
+            if (includeBasicValues) {
+                result = new HTMLBindingDirective(() => attrValue);
+                result.targetName = attr.name;
+            }
+        }
+        else {
+            result = createAggregateBinding(parseResult);
+        }
+        if (result !== null) {
+            node.removeAttributeNode(attr);
+            i--;
+            ii--;
+            context.addFactory(result);
+        }
+    }
+}
+function compileContent(context, node, walker) {
+    const parseResult = parseContent(context, node.textContent);
+    if (parseResult !== null) {
+        let lastNode = node;
+        for (let i = 0, ii = parseResult.length; i < ii; ++i) {
+            const currentPart = parseResult[i];
+            const currentNode = i === 0
+                ? node
+                : lastNode.parentNode.insertBefore(document.createTextNode(""), lastNode.nextSibling);
+            if (typeof currentPart === "string") {
+                currentNode.textContent = currentPart;
+            }
+            else {
+                currentNode.textContent = " ";
+                context.captureContentBinding(currentPart);
+            }
+            lastNode = currentNode;
+            context.targetIndex++;
+            if (currentNode !== node) {
+                walker.nextNode();
+            }
+        }
+        context.targetIndex--;
+    }
+}
+/**
+ * Compiles a template and associated directives into a raw compilation
+ * result which include a cloneable DocumentFragment and factories capable
+ * of attaching runtime behavior to nodes within the fragment.
+ * @param template - The template to compile.
+ * @param directives - The directives referenced by the template.
+ * @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
+ */
+function compileTemplate(template, directives) {
+    const fragment = template.content;
+    // https://bugs.chromium.org/p/chromium/issues/detail?id=1111864
+    document.adoptNode(fragment);
+    const context = CompilationContext.borrow(directives);
+    compileAttributes(context, template, true);
+    const hostBehaviorFactories = context.behaviorFactories;
+    context.reset();
+    const walker = DOM.createTemplateWalker(fragment);
+    let node;
+    while ((node = walker.nextNode())) {
+        context.targetIndex++;
+        switch (node.nodeType) {
+            case 1: // element node
+                compileAttributes(context, node);
+                break;
+            case 3: // text node
+                compileContent(context, node, walker);
+                break;
+            case 8: // comment
+                if (DOM.isMarker(node)) {
+                    context.addFactory(directives[DOM.extractDirectiveIndexFromMarker(node)]);
+                }
+        }
+    }
+    let targetOffset = 0;
+    if (
+    // 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.
+    DOM.isMarker(fragment.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.
+        (fragment.childNodes.length === 1 && directives.length)) {
+        fragment.insertBefore(document.createComment(""), fragment.firstChild);
+        targetOffset = -1;
+    }
+    const viewBehaviorFactories = context.behaviorFactories;
+    context.release();
+    return {
+        fragment,
+        viewBehaviorFactories,
+        hostBehaviorFactories,
+        targetOffset,
+    };
+}
+
+// A singleton Range instance used to efficiently remove ranges of DOM nodes.
+// See the implementation of HTMLView below for further details.
+const range = document.createRange();
+/**
+ * The standard View implementation, which also implements ElementView and SyntheticView.
+ * @public
+ */
+class HTMLView {
+    /**
+     * 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(fragment, behaviors) {
+        this.fragment = fragment;
+        this.behaviors = behaviors;
+        /**
+         * The data that the view is bound to.
+         */
+        this.source = null;
+        /**
+         * The execution context the view is running within.
+         */
+        this.context = null;
+        this.firstChild = fragment.firstChild;
+        this.lastChild = fragment.lastChild;
+    }
+    /**
+     * Appends the view's DOM nodes to the referenced node.
+     * @param node - The parent node to append the view's DOM nodes to.
+     */
+    appendTo(node) {
+        node.appendChild(this.fragment);
+    }
+    /**
+     * Inserts the view's DOM nodes before the referenced node.
+     * @param node - The node to insert the view's DOM before.
+     */
+    insertBefore(node) {
+        if (this.fragment.hasChildNodes()) {
+            node.parentNode.insertBefore(this.fragment, node);
+        }
+        else {
+            const parentNode = node.parentNode;
+            const end = this.lastChild;
+            let current = this.firstChild;
+            let next;
+            while (current !== end) {
+                next = current.nextSibling;
+                parentNode.insertBefore(current, node);
+                current = next;
+            }
+            parentNode.insertBefore(end, node);
+        }
+    }
+    /**
+     * Removes the view's DOM nodes.
+     * The nodes are not disposed and the view can later be re-inserted.
+     */
+    remove() {
+        const fragment = this.fragment;
+        const end = this.lastChild;
+        let current = this.firstChild;
+        let next;
+        while (current !== end) {
+            next = current.nextSibling;
+            fragment.appendChild(current);
+            current = next;
+        }
+        fragment.appendChild(end);
+    }
+    /**
+     * 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() {
+        const parent = this.firstChild.parentNode;
+        const end = this.lastChild;
+        let current = this.firstChild;
+        let next;
+        while (current !== end) {
+            next = current.nextSibling;
+            parent.removeChild(current);
+            current = next;
+        }
+        parent.removeChild(end);
+        const behaviors = this.behaviors;
+        const oldSource = this.source;
+        for (let i = 0, ii = behaviors.length; i < ii; ++i) {
+            behaviors[i].unbind(oldSource);
+        }
+    }
+    /**
+     * 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(source, context) {
+        const behaviors = this.behaviors;
+        if (this.source === source) {
+            return;
+        }
+        else if (this.source !== null) {
+            const oldSource = this.source;
+            this.source = source;
+            this.context = context;
+            for (let i = 0, ii = behaviors.length; i < ii; ++i) {
+                const current = behaviors[i];
+                current.unbind(oldSource);
+                current.bind(source, context);
+            }
+        }
+        else {
+            this.source = source;
+            this.context = context;
+            for (let i = 0, ii = behaviors.length; i < ii; ++i) {
+                behaviors[i].bind(source, context);
+            }
+        }
+    }
+    /**
+     * Unbinds a view's behaviors from its binding source.
+     */
+    unbind() {
+        if (this.source === null) {
+            return;
+        }
+        const behaviors = this.behaviors;
+        const oldSource = this.source;
+        for (let i = 0, ii = behaviors.length; i < ii; ++i) {
+            behaviors[i].unbind(oldSource);
+        }
+        this.source = null;
+    }
+    /**
+     * Efficiently disposes of a contiguous range of synthetic view instances.
+     * @param views - A contiguous range of views to be disposed.
+     */
+    static disposeContiguousBatch(views) {
+        if (views.length === 0) {
+            return;
+        }
+        range.setStartBefore(views[0].firstChild);
+        range.setEndAfter(views[views.length - 1].lastChild);
+        range.deleteContents();
+        for (let i = 0, ii = views.length; i < ii; ++i) {
+            const view = views[i];
+            const behaviors = view.behaviors;
+            const oldSource = view.source;
+            for (let j = 0, jj = behaviors.length; j < jj; ++j) {
+                behaviors[j].unbind(oldSource);
+            }
+        }
+    }
+}
+
+/**
+ * A template capable of creating HTMLView instances or rendering directly to DOM.
+ * @public
+ */
+/* eslint-disable-next-line @typescript-eslint/no-unused-vars */
+class ViewTemplate {
+    /**
+     * 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.
+     */
+    constructor(html, directives) {
+        this.behaviorCount = 0;
+        this.hasHostBehaviors = false;
+        this.fragment = null;
+        this.targetOffset = 0;
+        this.viewBehaviorFactories = null;
+        this.hostBehaviorFactories = null;
+        this.html = html;
+        this.directives = directives;
+    }
+    /**
+     * Creates an HTMLView instance based on this template definition.
+     * @param hostBindingTarget - The element that host behaviors will be bound to.
+     */
+    create(hostBindingTarget) {
+        if (this.fragment === null) {
+            let template;
+            const html = this.html;
+            if (typeof html === "string") {
+                template = document.createElement("template");
+                template.innerHTML = DOM.createHTML(html);
+                const fec = template.content.firstElementChild;
+                if (fec !== null && fec.tagName === "TEMPLATE") {
+                    template = fec;
+                }
+            }
+            else {
+                template = html;
+            }
+            const result = compileTemplate(template, this.directives);
+            this.fragment = result.fragment;
+            this.viewBehaviorFactories = result.viewBehaviorFactories;
+            this.hostBehaviorFactories = result.hostBehaviorFactories;
+            this.targetOffset = result.targetOffset;
+            this.behaviorCount =
+                this.viewBehaviorFactories.length + this.hostBehaviorFactories.length;
+            this.hasHostBehaviors = this.hostBehaviorFactories.length > 0;
+        }
+        const fragment = this.fragment.cloneNode(true);
+        const viewFactories = this.viewBehaviorFactories;
+        const behaviors = new Array(this.behaviorCount);
+        const walker = DOM.createTemplateWalker(fragment);
+        let behaviorIndex = 0;
+        let targetIndex = this.targetOffset;
+        let node = walker.nextNode();
+        for (let ii = viewFactories.length; behaviorIndex < ii; ++behaviorIndex) {
+            const factory = viewFactories[behaviorIndex];
+            const factoryIndex = factory.targetIndex;
+            while (node !== null) {
+                if (targetIndex === factoryIndex) {
+                    behaviors[behaviorIndex] = factory.createBehavior(node);
+                    break;
+                }
+                else {
+                    node = walker.nextNode();
+                    targetIndex++;
+                }
+            }
+        }
+        if (this.hasHostBehaviors) {
+            const hostFactories = this.hostBehaviorFactories;
+            for (let i = 0, ii = hostFactories.length; i < ii; ++i, ++behaviorIndex) {
+                behaviors[behaviorIndex] = hostFactories[i].createBehavior(hostBindingTarget);
+            }
+        }
+        return new HTMLView(fragment, behaviors);
+    }
+    /**
+     * Creates an HTMLView from this template, binds it to the source, and then appends it to the host.
+     * @param source - The data source to bind the template to.
+     * @param host - The Element where the template will be rendered.
+     * @param hostBindingTarget - An HTML element to target the host bindings at if different from the
+     * host that the template is being attached to.
+     */
+    render(source, host, hostBindingTarget) {
+        if (typeof host === "string") {
+            host = document.getElementById(host);
+        }
+        if (hostBindingTarget === void 0) {
+            hostBindingTarget = host;
+        }
+        const view = this.create(hostBindingTarget);
+        view.bind(source, defaultExecutionContext);
+        view.appendTo(host);
+        return view;
+    }
+}
+// Much thanks to LitHTML for working this out!
+const lastAttributeNameRegex = 
+/* 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"'`<>=]*|"[^"]*|'[^']*))$/;
+/**
+ * Transforms a template literal string into a renderable ViewTemplate.
+ * @param strings - The string fragments that are interpolated with the values.
+ * @param values - The values that are interpolated with the string fragments.
+ * @remarks
+ * The html helper supports interpolation of strings, numbers, binding expressions,
+ * other template instances, and Directive instances.
+ * @public
+ */
+function html(strings, ...values) {
+    const directives = [];
+    let html = "";
+    for (let i = 0, ii = strings.length - 1; i < ii; ++i) {
+        const currentString = strings[i];
+        let value = values[i];
+        html += currentString;
+        if (value instanceof ViewTemplate) {
+            const template = value;
+            value = () => template;
+        }
+        if (typeof value === "function") {
+            value = new HTMLBindingDirective(value);
+        }
+        if (value instanceof TargetedHTMLDirective) {
+            const match = lastAttributeNameRegex.exec(currentString);
+            if (match !== null) {
+                value.targetName = match[2];
+            }
+        }
+        if (value instanceof HTMLDirective) {
+            // Since not all values are directives, we can't use i
+            // as the index for the placeholder. Instead, we need to
+            // use directives.length to get the next index.
+            html += value.createPlaceholder(directives.length);
+            directives.push(value);
+        }
+        else {
+            html += value;
+        }
+    }
+    html += strings[strings.length - 1];
+    return new ViewTemplate(html, directives);
+}
+
+/**
+ * Represents styles that can be applied to a custom element.
+ * @public
+ */
+class ElementStyles {
+    constructor() {
+        this.targets = new WeakSet();
+        /** @internal */
+        this.behaviors = null;
+    }
+    /** @internal */
+    addStylesTo(target) {
+        this.targets.add(target);
+    }
+    /** @internal */
+    removeStylesFrom(target) {
+        this.targets.delete(target);
+    }
+    /** @internal */
+    isAttachedTo(target) {
+        return this.targets.has(target);
+    }
+    /**
+     * Associates behaviors with this set of styles.
+     * @param behaviors - The behaviors to associate.
+     */
+    withBehaviors(...behaviors) {
+        this.behaviors =
+            this.behaviors === null ? behaviors : this.behaviors.concat(behaviors);
+        return this;
+    }
+}
+/**
+ * Create ElementStyles from ComposableStyles.
+ */
+ElementStyles.create = (() => {
+    if (DOM.supportsAdoptedStyleSheets) {
+        const styleSheetCache = new Map();
+        return (styles) => 
+        // eslint-disable-next-line @typescript-eslint/no-use-before-define
+        new AdoptedStyleSheetsStyles(styles, styleSheetCache);
+    }
+    // eslint-disable-next-line @typescript-eslint/no-use-before-define
+    return (styles) => new StyleElementStyles(styles);
+})();
+function reduceStyles(styles) {
+    return styles
+        .map((x) => x instanceof ElementStyles ? reduceStyles(x.styles) : [x])
+        .reduce((prev, curr) => prev.concat(curr), []);
+}
+function reduceBehaviors(styles) {
+    return styles
+        .map((x) => (x instanceof ElementStyles ? x.behaviors : null))
+        .reduce((prev, curr) => {
+        if (curr === null) {
+            return prev;
+        }
+        if (prev === null) {
+            prev = [];
+        }
+        return prev.concat(curr);
+    }, null);
+}
+/**
+ * https://wicg.github.io/construct-stylesheets/
+ * https://developers.google.com/web/updates/2019/02/constructable-stylesheets
+ *
+ * @internal
+ */
+class AdoptedStyleSheetsStyles extends ElementStyles {
+    constructor(styles, styleSheetCache) {
+        super();
+        this.styles = styles;
+        this.styleSheetCache = styleSheetCache;
+        this._styleSheets = void 0;
+        this.behaviors = reduceBehaviors(styles);
+    }
+    get styleSheets() {
+        if (this._styleSheets === void 0) {
+            const styles = this.styles;
+            const styleSheetCache = this.styleSheetCache;
+            this._styleSheets = reduceStyles(styles).map((x) => {
+                if (x instanceof CSSStyleSheet) {
+                    return x;
+                }
+                let sheet = styleSheetCache.get(x);
+                if (sheet === void 0) {
+                    sheet = new CSSStyleSheet();
+                    sheet.replaceSync(x);
+                    styleSheetCache.set(x, sheet);
+                }
+                return sheet;
+            });
+        }
+        return this._styleSheets;
+    }
+    addStylesTo(target) {
+        target.adoptedStyleSheets = [...target.adoptedStyleSheets, ...this.styleSheets];
+        super.addStylesTo(target);
+    }
+    removeStylesFrom(target) {
+        const sourceSheets = this.styleSheets;
+        target.adoptedStyleSheets = target.adoptedStyleSheets.filter((x) => sourceSheets.indexOf(x) === -1);
+        super.removeStylesFrom(target);
+    }
+}
+let styleClassId = 0;
+function getNextStyleClass() {
+    return `fast-style-class-${++styleClassId}`;
+}
+/**
+ * @internal
+ */
+class StyleElementStyles extends ElementStyles {
+    constructor(styles) {
+        super();
+        this.styles = styles;
+        this.behaviors = null;
+        this.behaviors = reduceBehaviors(styles);
+        this.styleSheets = reduceStyles(styles);
+        this.styleClass = getNextStyleClass();
+    }
+    addStylesTo(target) {
+        const styleSheets = this.styleSheets;
+        const styleClass = this.styleClass;
+        target = this.normalizeTarget(target);
+        for (let i = 0; i < styleSheets.length; i++) {
+            const element = document.createElement("style");
+            element.innerHTML = styleSheets[i];
+            element.className = styleClass;
+            target.append(element);
+        }
+        super.addStylesTo(target);
+    }
+    removeStylesFrom(target) {
+        target = this.normalizeTarget(target);
+        const styles = target.querySelectorAll(`.${this.styleClass}`);
+        for (let i = 0, ii = styles.length; i < ii; ++i) {
+            target.removeChild(styles[i]);
+        }
+        super.removeStylesFrom(target);
+    }
+    isAttachedTo(target) {
+        return super.isAttachedTo(this.normalizeTarget(target));
+    }
+    normalizeTarget(target) {
+        return target === document ? document.body : target;
+    }
+}
+
+/**
+ * A {@link ValueConverter} that converts to and from `boolean` values.
+ * @remarks
+ * Used automatically when the `boolean` {@link AttributeMode} is selected.
+ * @public
+ */
+const booleanConverter = {
+    toView(value) {
+        return value ? "true" : "false";
+    },
+    fromView(value) {
+        if (value === null ||
+            value === void 0 ||
+            value === "false" ||
+            value === false ||
+            value === 0) {
+            return false;
+        }
+        return true;
+    },
+};
+/**
+ * A {@link ValueConverter} that converts to and from `number` values.
+ * @remarks
+ * This converter allows for nullable numbers, returning `null` if the
+ * input was `null`, `undefined`, or `NaN`.
+ * @public
+ */
+const nullableNumberConverter = {
+    toView(value) {
+        if (value === null || value === undefined) {
+            return null;
+        }
+        const number = value * 1;
+        return isNaN(number) ? null : number.toString();
+    },
+    fromView(value) {
+        if (value === null || value === undefined) {
+            return null;
+        }
+        const number = value * 1;
+        return isNaN(number) ? null : number;
+    },
+};
+/**
+ * An implementation of {@link Accessor} that supports reactivity,
+ * change callbacks, attribute reflection, and type conversion for
+ * custom elements.
+ * @public
+ */
+class AttributeDefinition {
+    /**
+     * Creates an instance of AttributeDefinition.
+     * @param Owner - The class constructor that owns this attribute.
+     * @param name - The name of the property associated with the attribute.
+     * @param attribute - The name of the attribute in HTML.
+     * @param mode - The {@link AttributeMode} that describes the behavior of this attribute.
+     * @param converter - A {@link ValueConverter} that integrates with the property getter/setter
+     * to convert values to and from a DOM string.
+     */
+    constructor(Owner, name, attribute = name.toLowerCase(), mode = "reflect", converter) {
+        this.guards = new Set();
+        this.Owner = Owner;
+        this.name = name;
+        this.attribute = attribute;
+        this.mode = mode;
+        this.converter = converter;
+        this.fieldName = `_${name}`;
+        this.callbackName = `${name}Changed`;
+        this.hasCallback = this.callbackName in Owner.prototype;
+        if (mode === "boolean" && converter === void 0) {
+            this.converter = booleanConverter;
+        }
+    }
+    /**
+     * 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.
+     */
+    setValue(source, newValue) {
+        const oldValue = source[this.fieldName];
+        const converter = this.converter;
+        if (converter !== void 0) {
+            newValue = converter.fromView(newValue);
+        }
+        if (oldValue !== newValue) {
+            source[this.fieldName] = newValue;
+            this.tryReflectToAttribute(source);
+            if (this.hasCallback) {
+                source[this.callbackName](oldValue, newValue);
+            }
+            source.$fastController.notify(this.name);
+        }
+    }
+    /**
+     * Gets the value of the attribute/property on the source element.
+     * @param source - The source element to access.
+     */
+    getValue(source) {
+        Observable.track(source, this.name);
+        return source[this.fieldName];
+    }
+    /** @internal */
+    onAttributeChangedCallback(element, value) {
+        if (this.guards.has(element)) {
+            return;
+        }
+        this.guards.add(element);
+        this.setValue(element, value);
+        this.guards.delete(element);
+    }
+    tryReflectToAttribute(element) {
+        const mode = this.mode;
+        const guards = this.guards;
+        if (guards.has(element) || mode === "fromView") {
+            return;
+        }
+        DOM.queueUpdate(() => {
+            guards.add(element);
+            const latestValue = element[this.fieldName];
+            switch (mode) {
+                case "reflect":
+                    const converter = this.converter;
+                    DOM.setAttribute(element, this.attribute, converter !== void 0 ? converter.toView(latestValue) : latestValue);
+                    break;
+                case "boolean":
+                    DOM.setBooleanAttribute(element, this.attribute, latestValue);
+                    break;
+            }
+            guards.delete(element);
+        });
+    }
+    /**
+     * Collects all attribute definitions associated with the owner.
+     * @param Owner - The class constructor to collect attribute for.
+     * @param attributeLists - Any existing attributes to collect and merge with those associated with the owner.
+     * @internal
+     */
+    static collect(Owner, ...attributeLists) {
+        const attributes = [];
+        attributeLists.push(Owner.attributes);
+        for (let i = 0, ii = attributeLists.length; i < ii; ++i) {
+            const list = attributeLists[i];
+            if (list === void 0) {
+                continue;
+            }
+            for (let j = 0, jj = list.length; j < jj; ++j) {
+                const config = list[j];
+                if (typeof config === "string") {
+                    attributes.push(new AttributeDefinition(Owner, config));
+                }
+                else {
+                    attributes.push(new AttributeDefinition(Owner, config.property, config.attribute, config.mode, config.converter));
+                }
+            }
+        }
+        return attributes;
+    }
+}
+function attr(configOrTarget, prop) {
+    let config;
+    function decorator($target, $prop) {
+        if (arguments.length > 1) {
+            // Non invocation:
+            // - @attr
+            // Invocation with or w/o opts:
+            // - @attr()
+            // - @attr({...opts})
+            config.property = $prop;
+        }
+        const attributes = $target.constructor.attributes ||
+            ($target.constructor.attributes = []);
+        attributes.push(config);
+    }
+    if (arguments.length > 1) {
+        // Non invocation:
+        // - @attr
+        config = {};
+        decorator(configOrTarget, prop);
+        return;
+    }
+    // Invocation with or w/o opts:
+    // - @attr()
+    // - @attr({...opts})
+    config = configOrTarget === void 0 ? {} : configOrTarget;
+    return decorator;
+}
+
+const defaultShadowOptions = { mode: "open" };
+const defaultElementOptions = {};
+const fastRegistry = FAST.getById(4 /* elementRegistry */, () => {
+    const typeToDefinition = new Map();
+    return Object.freeze({
+        register(definition) {
+            if (typeToDefinition.has(definition.type)) {
+                return false;
+            }
+            typeToDefinition.set(definition.type, definition);
+            return true;
+        },
+        getByType(key) {
+            return typeToDefinition.get(key);
+        },
+    });
+});
+/**
+ * Defines metadata for a FASTElement.
+ * @public
+ */
+class FASTElementDefinition {
+    /**
+     * 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(type, nameOrConfig = type.definition) {
+        if (typeof nameOrConfig === "string") {
+            nameOrConfig = { name: nameOrConfig };
+        }
+        this.type = type;
+        this.name = nameOrConfig.name;
+        this.template = nameOrConfig.template;
+        const attributes = AttributeDefinition.collect(type, nameOrConfig.attributes);
+        const observedAttributes = new Array(attributes.length);
+        const propertyLookup = {};
+        const attributeLookup = {};
+        for (let i = 0, ii = attributes.length; i < ii; ++i) {
+            const current = attributes[i];
+            observedAttributes[i] = current.attribute;
+            propertyLookup[current.name] = current;
+            attributeLookup[current.attribute] = current;
+        }
+        this.attributes = attributes;
+        this.observedAttributes = observedAttributes;
+        this.propertyLookup = propertyLookup;
+        this.attributeLookup = attributeLookup;
+        this.shadowOptions =
+            nameOrConfig.shadowOptions === void 0
+                ? defaultShadowOptions
+                : nameOrConfig.shadowOptions === null
+                    ? void 0
+                    : Object.assign(Object.assign({}, defaultShadowOptions), nameOrConfig.shadowOptions);
+        this.elementOptions =
+            nameOrConfig.elementOptions === void 0
+                ? defaultElementOptions
+                : Object.assign(Object.assign({}, defaultElementOptions), nameOrConfig.elementOptions);
+        this.styles =
+            nameOrConfig.styles === void 0
+                ? void 0
+                : Array.isArray(nameOrConfig.styles)
+                    ? ElementStyles.create(nameOrConfig.styles)
+                    : nameOrConfig.styles instanceof ElementStyles
+                        ? nameOrConfig.styles
+                        : ElementStyles.create([nameOrConfig.styles]);
+    }
+    /**
+     * Indicates if this element has been defined in at least one registry.
+     */
+    get isDefined() {
+        return !!fastRegistry.getByType(this.type);
+    }
+    /**
+     * Defines a custom element based on this definition.
+     * @param registry - The element registry to define the element in.
+     */
+    define(registry = customElements) {
+        const type = this.type;
+        if (fastRegistry.register(this)) {
+            const attributes = this.attributes;
+            const proto = type.prototype;
+            for (let i = 0, ii = attributes.length; i < ii; ++i) {
+                Observable.defineProperty(proto, attributes[i]);
+            }
+            Reflect.defineProperty(type, "observedAttributes", {
+                value: this.observedAttributes,
+                enumerable: true,
+            });
+        }
+        if (!registry.get(this.name)) {
+            registry.define(this.name, type, this.elementOptions);
+        }
+        return this;
+    }
+}
+/**
+ * Gets the element definition associated with the specified type.
+ * @param type - The custom element type to retrieve the definition for.
+ */
+FASTElementDefinition.forType = fastRegistry.getByType;
+
+const shadowRoots = new WeakMap();
+const defaultEventOptions = {
+    bubbles: true,
+    composed: true,
+    cancelable: true,
+};
+function getShadowRoot(element) {
+    return element.shadowRoot || shadowRoots.get(element) || null;
+}
+/**
+ * Controls the lifecycle and rendering of a `FASTElement`.
+ * @public
+ */
+class Controller extends PropertyChangeNotifier {
+    /**
+     * Creates a Controller to control the specified element.
+     * @param element - The element to be controlled by this controller.
+     * @param definition - The element definition metadata that instructs this
+     * controller in how to handle rendering and other platform integrations.
+     * @internal
+     */
+    constructor(element, definition) {
+        super(element);
+        this.boundObservables = null;
+        this.behaviors = null;
+        this.needsInitialization = true;
+        this._template = null;
+        this._styles = null;
+        this._isConnected = false;
+        /**
+         * This allows Observable.getNotifier(...) to return the Controller
+         * when the notifier for the Controller itself is being requested. The
+         * result is that the Observable system does not need to create a separate
+         * instance of Notifier for observables on the Controller. The component and
+         * the controller will now share the same notifier, removing one-object construct
+         * per web component instance.
+         */
+        this.$fastController = this;
+        /**
+         * The view associated with the custom element.
+         * @remarks
+         * If `null` then the element is managing its own rendering.
+         */
+        this.view = null;
+        this.element = element;
+        this.definition = definition;
+        const shadowOptions = definition.shadowOptions;
+        if (shadowOptions !== void 0) {
+            const shadowRoot = element.attachShadow(shadowOptions);
+            if (shadowOptions.mode === "closed") {
+                shadowRoots.set(element, shadowRoot);
+            }
+        }
+        // Capture any observable values that were set by the binding engine before
+        // the browser upgraded the element. Then delete the property since it will
+        // shadow the getter/setter that is required to make the observable operate.
+        // Later, in the connect callback, we'll re-apply the values.
+        const accessors = Observable.getAccessors(element);
+        if (accessors.length > 0) {
+            const boundObservables = (this.boundObservables = Object.create(null));
+            for (let i = 0, ii = accessors.length; i < ii; ++i) {
+                const propertyName = accessors[i].name;
+                const value = element[propertyName];
+                if (value !== void 0) {
+                    delete element[propertyName];
+                    boundObservables[propertyName] = value;
+                }
+            }
+        }
+    }
+    /**
+     * Indicates whether or not the custom element has been
+     * connected to the document.
+     */
+    get isConnected() {
+        Observable.track(this, "isConnected");
+        return this._isConnected;
+    }
+    setIsConnected(value) {
+        this._isConnected = value;
+        Observable.notify(this, "isConnected");
+    }
+    /**
+     * Gets/sets the template used to render the component.
+     * @remarks
+     * This value can only be accurately read after connect but can be set at any time.
+     */
+    get template() {
+        return this._template;
+    }
+    set template(value) {
+        if (this._template === value) {
+            return;
+        }
+        this._template = value;
+        if (!this.needsInitialization) {
+            this.renderTemplate(value);
+        }
+    }
+    /**
+     * 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.
+     */
+    get styles() {
+        return this._styles;
+    }
+    set styles(value) {
+        if (this._styles === value) {
+            return;
+        }
+        if (this._styles !== null) {
+            this.removeStyles(this._styles);
+        }
+        this._styles = value;
+        if (!this.needsInitialization && value !== null) {
+            this.addStyles(value);
+        }
+    }
+    /**
+     * Adds styles to this element. Providing an HTMLStyleElement will attach the element instance to the shadowRoot.
+     * @param styles - The styles to add.
+     */
+    addStyles(styles) {
+        const target = getShadowRoot(this.element) ||
+            this.element.getRootNode();
+        if (styles instanceof HTMLStyleElement) {
+            target.append(styles);
+        }
+        else if (!styles.isAttachedTo(target)) {
+            const sourceBehaviors = styles.behaviors;
+            styles.addStylesTo(target);
+            if (sourceBehaviors !== null) {
+                this.addBehaviors(sourceBehaviors);
+            }
+        }
+    }
+    /**
+     * Removes styles from this element. Providing an HTMLStyleElement will detach the element instance from the shadowRoot.
+     * @param styles - the styles to remove.
+     */
+    removeStyles(styles) {
+        const target = getShadowRoot(this.element) ||
+            this.element.getRootNode();
+        if (styles instanceof HTMLStyleElement) {
+            target.removeChild(styles);
+        }
+        else if (styles.isAttachedTo(target)) {
+            const sourceBehaviors = styles.behaviors;
+            styles.removeStylesFrom(target);
+            if (sourceBehaviors !== null) {
+                this.removeBehaviors(sourceBehaviors);
+            }
+        }
+    }
+    /**
+     * Adds behaviors to this element.
+     * @param behaviors - The behaviors to add.
+     */
+    addBehaviors(behaviors) {
+        const targetBehaviors = this.behaviors || (this.behaviors = new Map());
+        const length = behaviors.length;
+        const behaviorsToBind = [];
+        for (let i = 0; i < length; ++i) {
+            const behavior = behaviors[i];
+            if (targetBehaviors.has(behavior)) {
+                targetBehaviors.set(behavior, targetBehaviors.get(behavior) + 1);
+            }
+            else {
+                targetBehaviors.set(behavior, 1);
+                behaviorsToBind.push(behavior);
+            }
+        }
+        if (this._isConnected) {
+            const element = this.element;
+            for (let i = 0; i < behaviorsToBind.length; ++i) {
+                behaviorsToBind[i].bind(element, defaultExecutionContext);
+            }
+        }
+    }
+    /**
+     * Removes behaviors from this element.
+     * @param behaviors - The behaviors to remove.
+     * @param force - Forces unbinding of behaviors.
+     */
+    removeBehaviors(behaviors, force = false) {
+        const targetBehaviors = this.behaviors;
+        if (targetBehaviors === null) {
+            return;
+        }
+        const length = behaviors.length;
+        const behaviorsToUnbind = [];
+        for (let i = 0; i < length; ++i) {
+            const behavior = behaviors[i];
+            if (targetBehaviors.has(behavior)) {
+                const count = targetBehaviors.get(behavior) - 1;
+                count === 0 || force
+                    ? targetBehaviors.delete(behavior) && behaviorsToUnbind.push(behavior)
+                    : targetBehaviors.set(behavior, count);
+            }
+        }
+        if (this._isConnected) {
+            const element = this.element;
+            for (let i = 0; i < behaviorsToUnbind.length; ++i) {
+                behaviorsToUnbind[i].unbind(element);
+            }
+        }
+    }
+    /**
+     * Runs connected lifecycle behavior on the associated element.
+     */
+    onConnectedCallback() {
+        if (this._isConnected) {
+            return;
+        }
+        const element = this.element;
+        if (this.needsInitialization) {
+            this.finishInitialization();
+        }
+        else if (this.view !== null) {
+            this.view.bind(element, defaultExecutionContext);
+        }
+        const behaviors = this.behaviors;
+        if (behaviors !== null) {
+            for (const [behavior] of behaviors) {
+                behavior.bind(element, defaultExecutionContext);
+            }
+        }
+        this.setIsConnected(true);
+    }
+    /**
+     * Runs disconnected lifecycle behavior on the associated element.
+     */
+    onDisconnectedCallback() {
+        if (!this._isConnected) {
+            return;
+        }
+        this.setIsConnected(false);
+        const view = this.view;
+        if (view !== null) {
+            view.unbind();
+        }
+        const behaviors = this.behaviors;
+        if (behaviors !== null) {
+            const element = this.element;
+            for (const [behavior] of behaviors) {
+                behavior.unbind(element);
+            }
+        }
+    }
+    /**
+     * Runs the attribute changed callback for the associated element.
+     * @param name - The name of the attribute that changed.
+     * @param oldValue - The previous value of the attribute.
+     * @param newValue - The new value of the attribute.
+     */
+    onAttributeChangedCallback(name, oldValue, newValue) {
+        const attrDef = this.definition.attributeLookup[name];
+        if (attrDef !== void 0) {
+            attrDef.onAttributeChangedCallback(this.element, newValue);
+        }
+    }
+    /**
+     * Emits a custom HTML event.
+     * @param type - The type name of the event.
+     * @param detail - The event detail object to send with the event.
+     * @param options - The event options. By default bubbles and composed.
+     * @remarks
+     * Only emits events if connected.
+     */
+    emit(type, detail, options) {
+        if (this._isConnected) {
+            return this.element.dispatchEvent(new CustomEvent(type, Object.assign(Object.assign({ detail }, defaultEventOptions), options)));
+        }
+        return false;
+    }
+    finishInitialization() {
+        const element = this.element;
+        const boundObservables = this.boundObservables;
+        // If we have any observables that were bound, re-apply their values.
+        if (boundObservables !== null) {
+            const propertyNames = Object.keys(boundObservables);
+            for (let i = 0, ii = propertyNames.length; i < ii; ++i) {
+                const propertyName = propertyNames[i];
+                element[propertyName] = boundObservables[propertyName];
+            }
+            this.boundObservables = null;
+        }
+        const definition = this.definition;
+        // 1. Template overrides take top precedence.
+        if (this._template === null) {
+            if (this.element.resolveTemplate) {
+                // 2. Allow for element instance overrides next.
+                this._template = this.element.resolveTemplate();
+            }
+            else if (definition.template) {
+                // 3. Default to the static definition.
+                this._template = definition.template || null;
+            }
+        }
+        // If we have a template after the above process, render it.
+        // If there's no template, then the element author has opted into
+        // custom rendering and they will managed the shadow root's content themselves.
+        if (this._template !== null) {
+            this.renderTemplate(this._template);
+        }
+        // 1. Styles overrides take top precedence.
+        if (this._styles === null) {
+            if (this.element.resolveStyles) {
+                // 2. Allow for element instance overrides next.
+                this._styles = this.element.resolveStyles();
+            }
+            else if (definition.styles) {
+                // 3. Default to the static definition.
+                this._styles = definition.styles || null;
+            }
+        }
+        // If we have styles after the above process, add them.
+        if (this._styles !== null) {
+            this.addStyles(this._styles);
+        }
+        this.needsInitialization = false;
+    }
+    renderTemplate(template) {
+        const element = this.element;
+        // When getting the host to render to, we start by looking
+        // up the shadow root. If there isn't one, then that means
+        // we're doing a Light DOM render to the element's direct children.
+        const host = getShadowRoot(element) || element;
+        if (this.view !== null) {
+            // If there's already a view, we need to unbind and remove through dispose.
+            this.view.dispose();
+            this.view = null;
+        }
+        else if (!this.needsInitialization) {
+            // If there was previous custom rendering, we need to clear out the host.
+            DOM.removeChildNodes(host);
+        }
+        if (template) {
+            // If a new template was provided, render it.
+            this.view = template.render(element, host, element);
+        }
+    }
+    /**
+     * Locates or creates a controller for the specified element.
+     * @param element - The element to return the controller for.
+     * @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(element) {
+        const controller = element.$fastController;
+        if (controller !== void 0) {
+            return controller;
+        }
+        const definition = FASTElementDefinition.forType(element.constructor);
+        if (definition === void 0) {
+            throw new Error("Missing FASTElement definition.");
+        }
+        return (element.$fastController = new Controller(element, definition));
+    }
+}
+
+/* eslint-disable-next-line @typescript-eslint/explicit-function-return-type */
+function createFASTElement(BaseType) {
+    return class extends BaseType {
+        constructor() {
+            /* eslint-disable-next-line */
+            super();
+            Controller.forCustomElement(this);
+        }
+        $emit(type, detail, options) {
+            return this.$fastController.emit(type, detail, options);
+        }
+        connectedCallback() {
+            this.$fastController.onConnectedCallback();
+        }
+        disconnectedCallback() {
+            this.$fastController.onDisconnectedCallback();
+        }
+        attributeChangedCallback(name, oldValue, newValue) {
+            this.$fastController.onAttributeChangedCallback(name, oldValue, newValue);
+        }
+    };
+}
+/**
+ * A minimal base class for FASTElements that also provides
+ * static helpers for working with FASTElements.
+ * @public
+ */
+const FASTElement = Object.assign(createFASTElement(HTMLElement), {
+    /**
+     * Creates a new FASTElement base class inherited from the
+     * provided base type.
+     * @param BaseType - The base element type to inherit from.
+     */
+    from(BaseType) {
+        return createFASTElement(BaseType);
+    },
+    /**
+     * 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(type, nameOrDef) {
+        return new FASTElementDefinition(type, nameOrDef).define().type;
+    },
+});
+
+/**
+ * Directive for use in {@link css}.
+ *
+ * @public
+ */
+class CSSDirective {
+    /**
+     * Creates a CSS fragment to interpolate into the CSS document.
+     * @returns - the string to interpolate into CSS
+     */
+    createCSS() {
+        return "";
+    }
+    /**
+     * Creates a behavior to bind to the host element.
+     * @returns - the behavior to bind to the host element, or undefined.
+     */
+    createBehavior() {
+        return undefined;
+    }
+}
+
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+
+function __decorate(decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+}
+
+function __metadata(metadataKey, metadataValue) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(metadataKey, metadataValue);
+}
+
+function __classPrivateFieldGet(receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+}
+
+function __classPrivateFieldSet(receiver, state, value, kind, f) {
+    if (kind === "m") throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+}
+
+/**
+ * Big thanks to https://github.com/fkleuver and the https://github.com/aurelia/aurelia project
+ * for the bulk of this code and many of the associated tests.
+ */
+// Tiny polyfill for TypeScript's Reflect metadata API.
+const metadataByTarget = new Map();
+if (!("metadata" in Reflect)) {
+    Reflect.metadata = function (key, value) {
+        return function (target) {
+            Reflect.defineMetadata(key, value, target);
+        };
+    };
+    Reflect.defineMetadata = function (key, value, target) {
+        let metadata = metadataByTarget.get(target);
+        if (metadata === void 0) {
+            metadataByTarget.set(target, (metadata = new Map()));
+        }
+        metadata.set(key, value);
+    };
+    Reflect.getOwnMetadata = function (key, target) {
+        const metadata = metadataByTarget.get(target);
+        if (metadata !== void 0) {
+            return metadata.get(key);
+        }
+        return void 0;
+    };
+}
+/**
+ * A utility class used that constructs and registers resolvers for a dependency
+ * injection container. Supports a standard set of object lifetimes.
+ * @public
+ */
+class ResolverBuilder {
+    /**
+     *
+     * @param container - The container to create resolvers for.
+     * @param key - The key to register resolvers under.
+     */
+    constructor(container, key) {
+        this.container = container;
+        this.key = key;
+    }
+    /**
+     * Creates a resolver for an existing object instance.
+     * @param value - The instance to resolve.
+     * @returns The resolver.
+     */
+    instance(value) {
+        return this.registerResolver(0 /* instance */, value);
+    }
+    /**
+     * Creates a resolver that enforces a singleton lifetime.
+     * @param value - The type to create and cache the singleton for.
+     * @returns The resolver.
+     */
+    singleton(value) {
+        return this.registerResolver(1 /* singleton */, value);
+    }
+    /**
+     * Creates a resolver that creates a new instance for every dependency request.
+     * @param value - The type to create instances of.
+     * @returns - The resolver.
+     */
+    transient(value) {
+        return this.registerResolver(2 /* transient */, value);
+    }
+    /**
+     * Creates a resolver that invokes a callback function for every dependency resolution
+     * request, allowing custom logic to return the dependency.
+     * @param value - The callback to call during resolution.
+     * @returns The resolver.
+     */
+    callback(value) {
+        return this.registerResolver(3 /* callback */, value);
+    }
+    /**
+     * Creates a resolver that invokes a callback function the first time that a dependency
+     * resolution is requested. The returned value is then cached and provided for all
+     * subsequent requests.
+     * @param value - The callback to call during the first resolution.
+     * @returns The resolver.
+     */
+    cachedCallback(value) {
+        return this.registerResolver(3 /* callback */, cacheCallbackResult(value));
+    }
+    /**
+     * Aliases the current key to a different key.
+     * @param destinationKey - The key to point the alias to.
+     * @returns The resolver.
+     */
+    aliasTo(destinationKey) {
+        return this.registerResolver(5 /* alias */, destinationKey);
+    }
+    registerResolver(strategy, state) {
+        const { container, key } = this;
+        /* eslint-disable-next-line @typescript-eslint/no-non-null-assertion */
+        this.container = this.key = (void 0);
+        return container.registerResolver(key, new ResolverImpl(key, strategy, state));
+    }
+}
+function cloneArrayWithPossibleProps(source) {
+    const clone = source.slice();
+    const keys = Object.keys(source);
+    const len = keys.length;
+    let key;
+    for (let i = 0; i < len; ++i) {
+        key = keys[i];
+        if (!isArrayIndex(key)) {
+            clone[key] = source[key];
+        }
+    }
+    return clone;
+}
+/**
+ * A set of default resolvers useful in configuring a container.
+ * @public
+ */
+const DefaultResolver = Object.freeze({
+    /**
+     * Disables auto-registration and throws for all un-registered dependencies.
+     * @param key - The key to create the resolver for.
+     */
+    none(key) {
+        throw Error(`${key.toString()} not registered, did you forget to add @singleton()?`);
+    },
+    /**
+     * Provides default singleton resolution behavior during auto-registration.
+     * @param key - The key to create the resolver for.
+     * @returns The resolver.
+     */
+    singleton(key) {
+        return new ResolverImpl(key, 1 /* singleton */, key);
+    },
+    /**
+     * Provides default transient resolution behavior during auto-registration.
+     * @param key - The key to create the resolver for.
+     * @returns The resolver.
+     */
+    transient(key) {
+        return new ResolverImpl(key, 2 /* transient */, key);
+    },
+});
+/**
+ * Configuration for a dependency injection container.
+ * @public
+ */
+const ContainerConfiguration = Object.freeze({
+    /**
+     * The default configuration used when creating a DOM-disconnected container.
+     * @remarks
+     * The default creates a root container, with no parent container. It does not handle
+     * owner requests and it uses singleton resolution behavior for auto-registration.
+     */
+    default: Object.freeze({
+        parentLocator: () => null,
+        responsibleForOwnerRequests: false,
+        defaultResolver: DefaultResolver.singleton,
+    }),
+});
+const dependencyLookup = new Map();
+function getParamTypes(key) {
+    return (Type) => {
+        return Reflect.getOwnMetadata(key, Type);
+    };
+}
+let rootDOMContainer = null;
+/**
+ * The gateway to dependency injection APIs.
+ * @public
+ */
+const DI = Object.freeze({
+    /**
+     * Creates a new dependency injection container.
+     * @param config - The configuration for the container.
+     * @returns A newly created dependency injection container.
+     */
+    createContainer(config) {
+        return new ContainerImpl(null, Object.assign({}, ContainerConfiguration.default, config));
+    },
+    /**
+     * Finds the dependency injection container responsible for providing dependencies
+     * to the specified node.
+     * @param node - The node to find the responsible container for.
+     * @returns The container responsible for providing dependencies to the node.
+     * @remarks
+     * This will be the same as the parent container if the specified node
+     * does not itself host a container configured with responsibleForOwnerRequests.
+     */
+    findResponsibleContainer(node) {
+        const owned = node.$$container$$;
+        if (owned && owned.responsibleForOwnerRequests) {
+            return owned;
+        }
+        return DI.findParentContainer(node);
+    },
+    /**
+     * Find the dependency injection container up the DOM tree from this node.
+     * @param node - The node to find the parent container for.
+     * @returns The parent container of this node.
+     * @remarks
+     * This will be the same as the responsible container if the specified node
+     * does not itself host a container configured with responsibleForOwnerRequests.
+     */
+    findParentContainer(node) {
+        const event = new CustomEvent(DILocateParentEventType, {
+            bubbles: true,
+            composed: true,
+            cancelable: true,
+            detail: { container: void 0 },
+        });
+        node.dispatchEvent(event);
+        return event.detail.container || DI.getOrCreateDOMContainer();
+    },
+    /**
+     * Returns a dependency injection container if one is explicitly owned by the specified
+     * node. If one is not owned, then a new container is created and assigned to the node.
+     * @param node - The node to find or create the container for.
+     * @param config - The configuration for the container if one needs to be created.
+     * @returns The located or created container.
+     * @remarks
+     * This API does not search for a responsible or parent container. It looks only for a container
+     * directly defined on the specified node and creates one at that location if one does not
+     * already exist.
+     */
+    getOrCreateDOMContainer(node, config) {
+        if (!node) {
+            return (rootDOMContainer ||
+                (rootDOMContainer = new ContainerImpl(null, Object.assign({}, ContainerConfiguration.default, config, {
+                    parentLocator: () => null,
+                }))));
+        }
+        return (node.$$container$$ ||
+            new ContainerImpl(node, Object.assign({}, ContainerConfiguration.default, config, {
+                parentLocator: DI.findParentContainer,
+            })));
+    },
+    /**
+     * Gets the "design:paramtypes" metadata for the specified type.
+     * @param Type - The type to get the metadata for.
+     * @returns The metadata array or undefined if no metadata is found.
+     */
+    getDesignParamtypes: getParamTypes("design:paramtypes"),
+    /**
+     * Gets the "di:paramtypes" metadata for the specified type.
+     * @param Type - The type to get the metadata for.
+     * @returns The metadata array or undefined if no metadata is found.
+     */
+    getAnnotationParamtypes: getParamTypes("di:paramtypes"),
+    /**
+     *
+     * @param Type - Gets the "di:paramtypes" metadata for the specified type. If none is found,
+     * an empty metadata array is created and added.
+     * @returns The metadata array.
+     */
+    getOrCreateAnnotationParamTypes(Type) {
+        let annotationParamtypes = this.getAnnotationParamtypes(Type);
+        if (annotationParamtypes === void 0) {
+            Reflect.defineMetadata("di:paramtypes", (annotationParamtypes = []), Type);
+        }
+        return annotationParamtypes;
+    },
+    /**
+     * Gets the dependency keys representing what is needed to instantiate the specified type.
+     * @param Type - The type to get the dependencies for.
+     * @returns An array of dependency keys.
+     */
+    getDependencies(Type) {
+        // Note: Every detail of this getDependencies method is pretty deliberate at the moment, and probably not yet 100% tested from every possible angle,
+        // so be careful with making changes here as it can have a huge impact on complex end user apps.
+        // Preferably, only make changes to the dependency resolution process via a RFC.
+        let dependencies = dependencyLookup.get(Type);
+        if (dependencies === void 0) {
+            // Type.length is the number of constructor parameters. If this is 0, it could mean the class has an empty constructor
+            // but it could also mean the class has no constructor at all (in which case it inherits the constructor from the prototype).
+            // Non-zero constructor length + no paramtypes means emitDecoratorMetadata is off, or the class has no decorator.
+            // We're not doing anything with the above right now, but it's good to keep in mind for any future issues.
+            const inject = Type.inject;
+            if (inject === void 0) {
+                // design:paramtypes is set by tsc when emitDecoratorMetadata is enabled.
+                const designParamtypes = DI.getDesignParamtypes(Type);
+                // di:paramtypes is set by the parameter decorator from DI.createInterface or by @inject
+                const annotationParamtypes = DI.getAnnotationParamtypes(Type);
+                if (designParamtypes === void 0) {
+                    if (annotationParamtypes === void 0) {
+                        // Only go up the prototype if neither static inject nor any of the paramtypes is defined, as
+                        // there is no sound way to merge a type's deps with its prototype's deps
+                        const Proto = Object.getPrototypeOf(Type);
+                        if (typeof Proto === "function" && Proto !== Function.prototype) {
+                            dependencies = cloneArrayWithPossibleProps(DI.getDependencies(Proto));
+                        }
+                        else {
+                            dependencies = [];
+                        }
+                    }
+                    else {
+                        // No design:paramtypes so just use the di:paramtypes
+                        dependencies = cloneArrayWithPossibleProps(annotationParamtypes);
+                    }
+                }
+                else if (annotationParamtypes === void 0) {
+                    // No di:paramtypes so just use the design:paramtypes
+                    dependencies = cloneArrayWithPossibleProps(designParamtypes);
+                }
+                else {
+                    // We've got both, so merge them (in case of conflict on same index, di:paramtypes take precedence)
+                    dependencies = cloneArrayWithPossibleProps(designParamtypes);
+                    let len = annotationParamtypes.length;
+                    let auAnnotationParamtype;
+                    for (let i = 0; i < len; ++i) {
+                        auAnnotationParamtype = annotationParamtypes[i];
+                        if (auAnnotationParamtype !== void 0) {
+                            dependencies[i] = auAnnotationParamtype;
+                        }
+                    }
+                    const keys = Object.keys(annotationParamtypes);
+                    len = keys.length;
+                    let key;
+                    for (let i = 0; i < len; ++i) {
+                        key = keys[i];
+                        if (!isArrayIndex(key)) {
+                            dependencies[key] = annotationParamtypes[key];
+                        }
+                    }
+                }
+            }
+            else {
+                // Ignore paramtypes if we have static inject
+                dependencies = cloneArrayWithPossibleProps(inject);
+            }
+            dependencyLookup.set(Type, dependencies);
+        }
+        return dependencies;
+    },
+    /**
+     * Defines a property on a web component class. The value of this property will
+     * be resolved from the dependency injection container responsible for the element
+     * instance, based on where it is connected in the DOM.
+     * @param target - The target to define the property on.
+     * @param propertyName - The name of the property to define.
+     * @param key - The dependency injection key.
+     * @param respectConnection - Indicates whether or not to update the property value if the
+     * hosting component is disconnected and then re-connected at a different location in the DOM.
+     * @remarks
+     * The respectConnection option is only applicable to elements that descend from FASTElement.
+     */
+    defineProperty(target, propertyName, key, respectConnection = false) {
+        const diPropertyKey = `$di_${propertyName}`;
+        Reflect.defineProperty(target, propertyName, {
+            get: function () {
+                let value = this[diPropertyKey];
+                if (value === void 0) {
+                    const container = this instanceof HTMLElement
+                        ? DI.findResponsibleContainer(this)
+                        : DI.getOrCreateDOMContainer();
+                    value = container.get(key);
+                    this[diPropertyKey] = value;
+                    if (respectConnection && this instanceof FASTElement) {
+                        const notifier = this.$fastController;
+                        const handleChange = () => {
+                            const newContainer = DI.findResponsibleContainer(this);
+                            const newValue = newContainer.get(key);
+                            const oldValue = this[diPropertyKey];
+                            if (newValue !== oldValue) {
+                                this[diPropertyKey] = value;
+                                notifier.notify(propertyName);
+                            }
+                        };
+                        notifier.subscribe({ handleChange }, "isConnected");
+                    }
+                }
+                return value;
+            },
+        });
+    },
+    /**
+     * Creates a dependency injection key.
+     * @param nameConfigOrCallback - A friendly name for the key or a lambda that configures a
+     * default resolution for the dependency.
+     * @param configuror - If a friendly name was provided for the first parameter, then an optional
+     * lambda that configures a default resolution for the dependency can be provided second.
+     * @returns The created key.
+     * @remarks
+     * The created key can be used as a property decorator or constructor parameter decorator,
+     * in addition to its standard use in an inject array or through direct container APIs.
+     */
+    createInterface(nameConfigOrCallback, configuror) {
+        const configure = typeof nameConfigOrCallback === "function"
+            ? nameConfigOrCallback
+            : configuror;
+        const friendlyName = typeof nameConfigOrCallback === "string"
+            ? nameConfigOrCallback
+            : nameConfigOrCallback && "friendlyName" in nameConfigOrCallback
+                ? nameConfigOrCallback.friendlyName || defaultFriendlyName
+                : defaultFriendlyName;
+        const respectConnection = typeof nameConfigOrCallback === "string"
+            ? false
+            : nameConfigOrCallback && "respectConnection" in nameConfigOrCallback
+                ? nameConfigOrCallback.respectConnection || false
+                : false;
+        const Interface = function (target, property, index) {
+            if (target == null || new.target !== undefined) {
+                throw new Error(`No registration for interface: '${Interface.friendlyName}'`);
+            }
+            if (property) {
+                DI.defineProperty(target, property, Interface, respectConnection);
+            }
+            else {
+                const annotationParamtypes = DI.getOrCreateAnnotationParamTypes(target);
+                annotationParamtypes[index] = Interface;
+            }
+        };
+        Interface.$isInterface = true;
+        Interface.friendlyName = friendlyName == null ? "(anonymous)" : friendlyName;
+        if (configure != null) {
+            Interface.register = function (container, key) {
+                return configure(new ResolverBuilder(container, key !== null && key !== void 0 ? key : Interface));
+            };
+        }
+        Interface.toString = function toString() {
+            return `InterfaceSymbol<${Interface.friendlyName}>`;
+        };
+        return Interface;
+    },
+    /**
+     * A decorator that specifies what to inject into its target.
+     * @param dependencies - The dependencies to inject.
+     * @returns The decorator to be applied to the target class.
+     * @remarks
+     * The decorator can be used to decorate a class, listing all of the classes dependencies.
+     * Or it can be used to decorate a constructor paramter, indicating what to inject for that
+     * parameter.
+     * Or it can be used for a web component property, indicating what that property should resolve to.
+     */
+    inject(...dependencies) {
+        return function (target, key, descriptor) {
+            if (typeof descriptor === "number") {
+                // It's a parameter decorator.
+                const annotationParamtypes = DI.getOrCreateAnnotationParamTypes(target);
+                const dep = dependencies[0];
+                if (dep !== void 0) {
+                    annotationParamtypes[descriptor] = dep;
+                }
+            }
+            else if (key) {
+                DI.defineProperty(target, key, dependencies[0]);
+            }
+            else {
+                const annotationParamtypes = descriptor
+                    ? DI.getOrCreateAnnotationParamTypes(descriptor.value)
+                    : DI.getOrCreateAnnotationParamTypes(target);
+                let dep;
+                for (let i = 0; i < dependencies.length; ++i) {
+                    dep = dependencies[i];
+                    if (dep !== void 0) {
+                        annotationParamtypes[i] = dep;
+                    }
+                }
+            }
+        };
+    },
+    /**
+     * Registers the `target` class as a transient dependency; each time the dependency is resolved
+     * a new instance will be created.
+     *
+     * @param target - The class / constructor function to register as transient.
+     * @returns The same class, with a static `register` method that takes a container and returns the appropriate resolver.
+     *
+     * @example
+     * On an existing class
+     * ```ts
+     * class Foo { }
+     * DI.transient(Foo);
+     * ```
+     *
+     * @example
+     * Inline declaration
+     *
+     * ```ts
+     * const Foo = DI.transient(class { });
+     * // Foo is now strongly typed with register
+     * Foo.register(container);
+     * ```
+     *
+     * @public
+     */
+    transient(target) {
+        target.register = function register(container) {
+            const registration = Registration.transient(target, target);
+            return registration.register(container);
+        };
+        target.registerInRequestor = false;
+        return target;
+    },
+    /**
+     * Registers the `target` class as a singleton dependency; the class will only be created once. Each
+     * consecutive time the dependency is resolved, the same instance will be returned.
+     *
+     * @param target - The class / constructor function to register as a singleton.
+     * @returns The same class, with a static `register` method that takes a container and returns the appropriate resolver.
+     * @example
+     * On an existing class
+     * ```ts
+     * class Foo { }
+     * DI.singleton(Foo);
+     * ```
+     *
+     * @example
+     * Inline declaration
+     * ```ts
+     * const Foo = DI.singleton(class { });
+     * // Foo is now strongly typed with register
+     * Foo.register(container);
+     * ```
+     *
+     * @public
+     */
+    singleton(target, options = defaultSingletonOptions) {
+        target.register = function register(container) {
+            const registration = Registration.singleton(target, target);
+            return registration.register(container);
+        };
+        target.registerInRequestor = options.scoped;
+        return target;
+    },
+});
+/**
+ * The interface key that resolves the dependency injection container itself.
+ * @public
+ */
+const Container = DI.createInterface("Container");
+/**
+ * A decorator that specifies what to inject into its target.
+ * @param dependencies - The dependencies to inject.
+ * @returns The decorator to be applied to the target class.
+ * @remarks
+ * The decorator can be used to decorate a class, listing all of the classes dependencies.
+ * Or it can be used to decorate a constructor paramter, indicating what to inject for that
+ * parameter.
+ * Or it can be used for a web component property, indicating what that property should resolve to.
+ *
+ * @public
+ */
+DI.inject;
+const defaultSingletonOptions = { scoped: false };
+/** @internal */
+class ResolverImpl {
+    constructor(key, strategy, state) {
+        this.key = key;
+        this.strategy = strategy;
+        this.state = state;
+        this.resolving = false;
+    }
+    get $isResolver() {
+        return true;
+    }
+    register(container) {
+        return container.registerResolver(this.key, this);
+    }
+    resolve(handler, requestor) {
+        switch (this.strategy) {
+            case 0 /* instance */:
+                return this.state;
+            case 1 /* singleton */: {
+                if (this.resolving) {
+                    throw new Error(`Cyclic dependency found: ${this.state.name}`);
+                }
+                this.resolving = true;
+                this.state = handler
+                    .getFactory(this.state)
+                    .construct(requestor);
+                this.strategy = 0 /* instance */;
+                this.resolving = false;
+                return this.state;
+            }
+            case 2 /* transient */: {
+                // Always create transients from the requesting container
+                const factory = handler.getFactory(this.state);
+                if (factory === null) {
+                    throw new Error(`Resolver for ${String(this.key)} returned a null factory`);
+                }
+                return factory.construct(requestor);
+            }
+            case 3 /* callback */:
+                return this.state(handler, requestor, this);
+            case 4 /* array */:
+                return this.state[0].resolve(handler, requestor);
+            case 5 /* alias */:
+                return requestor.get(this.state);
+            default:
+                throw new Error(`Invalid resolver strategy specified: ${this.strategy}.`);
+        }
+    }
+    getFactory(container) {
+        var _a, _b, _c;
+        switch (this.strategy) {
+            case 1 /* singleton */:
+            case 2 /* transient */:
+                return container.getFactory(this.state);
+            case 5 /* alias */:
+                return (_c = (_b = (_a = container.getResolver(this.state)) === null || _a === void 0 ? void 0 : _a.getFactory) === null || _b === void 0 ? void 0 : _b.call(_a, container)) !== null && _c !== void 0 ? _c : null;
+            default:
+                return null;
+        }
+    }
+}
+function containerGetKey(d) {
+    return this.get(d);
+}
+function transformInstance(inst, transform) {
+    return transform(inst);
+}
+/** @internal */
+class FactoryImpl {
+    constructor(Type, dependencies) {
+        this.Type = Type;
+        this.dependencies = dependencies;
+        this.transformers = null;
+    }
+    construct(container, dynamicDependencies) {
+        let instance;
+        if (dynamicDependencies === void 0) {
+            instance = new this.Type(...this.dependencies.map(containerGetKey, container));
+        }
+        else {
+            instance = new this.Type(...this.dependencies.map(containerGetKey, container), ...dynamicDependencies);
+        }
+        if (this.transformers == null) {
+            return instance;
+        }
+        return this.transformers.reduce(transformInstance, instance);
+    }
+    registerTransformer(transformer) {
+        (this.transformers || (this.transformers = [])).push(transformer);
+    }
+}
+const containerResolver = {
+    $isResolver: true,
+    resolve(handler, requestor) {
+        return requestor;
+    },
+};
+function isRegistry(obj) {
+    return typeof obj.register === "function";
+}
+function isSelfRegistry(obj) {
+    return isRegistry(obj) && typeof obj.registerInRequestor === "boolean";
+}
+function isRegisterInRequester(obj) {
+    return isSelfRegistry(obj) && obj.registerInRequestor;
+}
+function isClass(obj) {
+    return obj.prototype !== void 0;
+}
+const InstrinsicTypeNames = new Set([
+    "Array",
+    "ArrayBuffer",
+    "Boolean",
+    "DataView",
+    "Date",
+    "Error",
+    "EvalError",
+    "Float32Array",
+    "Float64Array",
+    "Function",
+    "Int8Array",
+    "Int16Array",
+    "Int32Array",
+    "Map",
+    "Number",
+    "Object",
+    "Promise",
+    "RangeError",
+    "ReferenceError",
+    "RegExp",
+    "Set",
+    "SharedArrayBuffer",
+    "String",
+    "SyntaxError",
+    "TypeError",
+    "Uint8Array",
+    "Uint8ClampedArray",
+    "Uint16Array",
+    "Uint32Array",
+    "URIError",
+    "WeakMap",
+    "WeakSet",
+]);
+const DILocateParentEventType = "__DI_LOCATE_PARENT__";
+const factories = new Map();
+/**
+ * @internal
+ */
+class ContainerImpl {
+    constructor(owner, config) {
+        this.owner = owner;
+        this.config = config;
+        this._parent = void 0;
+        this.registerDepth = 0;
+        this.context = null;
+        if (owner !== null) {
+            owner.$$container$$ = this;
+        }
+        this.resolvers = new Map();
+        this.resolvers.set(Container, containerResolver);
+        if (owner instanceof Node) {
+            owner.addEventListener(DILocateParentEventType, (e) => {
+                if (e.composedPath()[0] !== this.owner) {
+                    e.detail.container = this;
+                    e.stopImmediatePropagation();
+                }
+            });
+        }
+    }
+    get parent() {
+        if (this._parent === void 0) {
+            this._parent = this.config.parentLocator(this.owner);
+        }
+        return this._parent;
+    }
+    get depth() {
+        return this.parent === null ? 0 : this.parent.depth + 1;
+    }
+    get responsibleForOwnerRequests() {
+        return this.config.responsibleForOwnerRequests;
+    }
+    registerWithContext(context, ...params) {
+        this.context = context;
+        this.register(...params);
+        this.context = null;
+        return this;
+    }
+    register(...params) {
+        if (++this.registerDepth === 100) {
+            throw new Error("Unable to autoregister dependency");
+            // Most likely cause is trying to register a plain object that does not have a
+            // register method and is not a class constructor
+        }
+        let current;
+        let keys;
+        let value;
+        let j;
+        let jj;
+        const context = this.context;
+        for (let i = 0, ii = params.length; i < ii; ++i) {
+            current = params[i];
+            if (!isObject(current)) {
+                continue;
+            }
+            if (isRegistry(current)) {
+                current.register(this, context);
+            }
+            else if (isClass(current)) {
+                Registration.singleton(current, current).register(this);
+            }
+            else {
+                keys = Object.keys(current);
+                j = 0;
+                jj = keys.length;
+                for (; j < jj; ++j) {
+                    value = current[keys[j]];
+                    if (!isObject(value)) {
+                        continue;
+                    }
+                    // note: we could remove this if-branch and call this.register directly
+                    // - the extra check is just a perf tweak to create fewer unnecessary arrays by the spread operator
+                    if (isRegistry(value)) {
+                        value.register(this, context);
+                    }
+                    else {
+                        this.register(value);
+                    }
+                }
+            }
+        }
+        --this.registerDepth;
+        return this;
+    }
+    registerResolver(key, resolver) {
+        validateKey(key);
+        const resolvers = this.resolvers;
+        const result = resolvers.get(key);
+        if (result == null) {
+            resolvers.set(key, resolver);
+        }
+        else if (result instanceof ResolverImpl &&
+            result.strategy === 4 /* array */) {
+            result.state.push(resolver);
+        }
+        else {
+            resolvers.set(key, new ResolverImpl(key, 4 /* array */, [result, resolver]));
+        }
+        return resolver;
+    }
+    registerTransformer(key, transformer) {
+        const resolver = this.getResolver(key);
+        if (resolver == null) {
+            return false;
+        }
+        if (resolver.getFactory) {
+            const factory = resolver.getFactory(this);
+            if (factory == null) {
+                return false;
+            }
+            // This type cast is a bit of a hacky one, necessary due to the duplicity of IResolverLike.
+            // Problem is that that interface's type arg can be of type Key, but the getFactory method only works on
+            // type Constructable. So the return type of that optional method has this additional constraint, which
+            // seems to confuse the type checker.
+            factory.registerTransformer(transformer);
+            return true;
+        }
+        return false;
+    }
+    getResolver(key, autoRegister = true) {
+        validateKey(key);
+        if (key.resolve !== void 0) {
+            return key;
+        }
+        /* eslint-disable-next-line @typescript-eslint/no-this-alias */
+        let current = this;
+        let resolver;
+        while (current != null) {
+            resolver = current.resolvers.get(key);
+            if (resolver == null) {
+                if (current.parent == null) {
+                    const handler = isRegisterInRequester(key)
+                        ? this
+                        : current;
+                    return autoRegister ? this.jitRegister(key, handler) : null;
+                }
+                current = current.parent;
+            }
+            else {
+                return resolver;
+            }
+        }
+        return null;
+    }
+    has(key, searchAncestors = false) {
+        return this.resolvers.has(key)
+            ? true
+            : searchAncestors && this.parent != null
+                ? this.parent.has(key, true)
+                : false;
+    }
+    get(key) {
+        validateKey(key);
+        if (key.$isResolver) {
+            return key.resolve(this, this);
+        }
+        /* eslint-disable-next-line @typescript-eslint/no-this-alias */
+        let current = this;
+        let resolver;
+        while (current != null) {
+            resolver = current.resolvers.get(key);
+            if (resolver == null) {
+                if (current.parent == null) {
+                    const handler = isRegisterInRequester(key)
+                        ? this
+                        : current;
+                    resolver = this.jitRegister(key, handler);
+                    return resolver.resolve(current, this);
+                }
+                current = current.parent;
+            }
+            else {
+                return resolver.resolve(current, this);
+            }
+        }
+        throw new Error(`Unable to resolve key: ${key}`);
+    }
+    getAll(key, searchAncestors = false) {
+        validateKey(key);
+        /* eslint-disable-next-line @typescript-eslint/no-this-alias */
+        const requestor = this;
+        let current = requestor;
+        let resolver;
+        if (searchAncestors) {
+            let resolutions = emptyArray;
+            while (current != null) {
+                resolver = current.resolvers.get(key);
+                if (resolver != null) {
+                    resolutions = resolutions.concat(
+                    /* eslint-disable-next-line @typescript-eslint/no-non-null-assertion */
+                    buildAllResponse(resolver, current, requestor));
+                }
+                current = current.parent;
+            }
+            return resolutions;
+        }
+        else {
+            while (current != null) {
+                resolver = current.resolvers.get(key);
+                if (resolver == null) {
+                    current = current.parent;
+                    if (current == null) {
+                        return emptyArray;
+                    }
+                }
+                else {
+                    return buildAllResponse(resolver, current, requestor);
+                }
+            }
+        }
+        return emptyArray;
+    }
+    getFactory(Type) {
+        let factory = factories.get(Type);
+        if (factory === void 0) {
+            if (isNativeFunction(Type)) {
+                throw new Error(`${Type.name} is a native function and therefore cannot be safely constructed by DI. If this is intentional, please use a callback or cachedCallback resolver.`);
+            }
+            factories.set(Type, (factory = new FactoryImpl(Type, DI.getDependencies(Type))));
+        }
+        return factory;
+    }
+    registerFactory(key, factory) {
+        factories.set(key, factory);
+    }
+    createChild(config) {
+        return new ContainerImpl(null, Object.assign({}, this.config, config, { parentLocator: () => this }));
+    }
+    jitRegister(keyAsValue, handler) {
+        if (typeof keyAsValue !== "function") {
+            throw new Error(`Attempted to jitRegister something that is not a constructor: '${keyAsValue}'. Did you forget to register this dependency?`);
+        }
+        if (InstrinsicTypeNames.has(keyAsValue.name)) {
+            throw new Error(`Attempted to jitRegister an intrinsic type: ${keyAsValue.name}. Did you forget to add @inject(Key)`);
+        }
+        if (isRegistry(keyAsValue)) {
+            const registrationResolver = keyAsValue.register(handler);
+            if (!(registrationResolver instanceof Object) ||
+                registrationResolver.resolve == null) {
+                const newResolver = handler.resolvers.get(keyAsValue);
+                if (newResolver != void 0) {
+                    return newResolver;
+                }
+                throw new Error("A valid resolver was not returned from the static register method");
+            }
+            return registrationResolver;
+        }
+        else if (keyAsValue.$isInterface) {
+            throw new Error(`Attempted to jitRegister an interface: ${keyAsValue.friendlyName}`);
+        }
+        else {
+            const resolver = this.config.defaultResolver(keyAsValue, handler);
+            handler.resolvers.set(keyAsValue, resolver);
+            return resolver;
+        }
+    }
+}
+const cache = new WeakMap();
+function cacheCallbackResult(fun) {
+    return function (handler, requestor, resolver) {
+        if (cache.has(resolver)) {
+            return cache.get(resolver);
+        }
+        const t = fun(handler, requestor, resolver);
+        cache.set(resolver, t);
+        return t;
+    };
+}
+/**
+ * You can use the resulting Registration of any of the factory methods
+ * to register with the container.
+ *
+ * @example
+ * ```
+ * class Foo {}
+ * const container = DI.createContainer();
+ * container.register(Registration.instance(Foo, new Foo()));
+ * container.get(Foo);
+ * ```
+ *
+ * @public
+ */
+const Registration = Object.freeze({
+    /**
+     * Allows you to pass an instance.
+     * Every time you request this {@link Key} you will get this instance back.
+     *
+     * @example
+     * ```
+     * Registration.instance(Foo, new Foo()));
+     * ```
+     *
+     * @param key - The key to register the instance under.
+     * @param value - The instance to return when the key is requested.
+     */
+    instance(key, value) {
+        return new ResolverImpl(key, 0 /* instance */, value);
+    },
+    /**
+     * Creates an instance from the class.
+     * Every time you request this {@link Key} you will get the same one back.
+     *
+     * @example
+     * ```
+     * Registration.singleton(Foo, Foo);
+     * ```
+     *
+     * @param key - The key to register the singleton under.
+     * @param value - The class to instantiate as a singleton when first requested.
+     */
+    singleton(key, value) {
+        return new ResolverImpl(key, 1 /* singleton */, value);
+    },
+    /**
+     * Creates an instance from a class.
+     * Every time you request this {@link Key} you will get a new instance.
+     *
+     * @example
+     * ```
+     * Registration.instance(Foo, Foo);
+     * ```
+     *
+     * @param key - The key to register the instance type under.
+     * @param value - The class to instantiate each time the key is requested.
+     */
+    transient(key, value) {
+        return new ResolverImpl(key, 2 /* transient */, value);
+    },
+    /**
+     * Delegates to a callback function to provide the dependency.
+     * Every time you request this {@link Key} the callback will be invoked to provide
+     * the dependency.
+     *
+     * @example
+     * ```
+     * Registration.callback(Foo, () => new Foo());
+     * Registration.callback(Bar, (c: Container) => new Bar(c.get(Foo)));
+     * ```
+     *
+     * @param key - The key to register the callback for.
+     * @param callback - The function that is expected to return the dependency.
+     */
+    callback(key, callback) {
+        return new ResolverImpl(key, 3 /* callback */, callback);
+    },
+    /**
+     * Delegates to a callback function to provide the dependency and then caches the
+     * dependency for future requests.
+     *
+     * @example
+     * ```
+     * Registration.cachedCallback(Foo, () => new Foo());
+     * Registration.cachedCallback(Bar, (c: Container) => new Bar(c.get(Foo)));
+     * ```
+     *
+     * @param key - The key to register the callback for.
+     * @param callback - The function that is expected to return the dependency.
+     * @remarks
+     * If you pass the same Registration to another container, the same cached value will be used.
+     * Should all references to the resolver returned be removed, the cache will expire.
+     */
+    cachedCallback(key, callback) {
+        return new ResolverImpl(key, 3 /* callback */, cacheCallbackResult(callback));
+    },
+    /**
+     * Creates an alternate {@link Key} to retrieve an instance by.
+     *
+     * @example
+     * ```
+     * Register.singleton(Foo, Foo)
+     * Register.aliasTo(Foo, MyFoos);
+     *
+     * container.getAll(MyFoos) // contains an instance of Foo
+     * ```
+     *
+     * @param originalKey - The original key that has been registered.
+     * @param aliasKey - The alias to the original key.
+     */
+    aliasTo(originalKey, aliasKey) {
+        return new ResolverImpl(aliasKey, 5 /* alias */, originalKey);
+    },
+});
+/** @internal */
+function validateKey(key) {
+    if (key === null || key === void 0) {
+        throw new Error("key/value cannot be null or undefined. Are you trying to inject/register something that doesn't exist with DI?");
+    }
+}
+function buildAllResponse(resolver, handler, requestor) {
+    if (resolver instanceof ResolverImpl &&
+        resolver.strategy === 4 /* array */) {
+        const state = resolver.state;
+        let i = state.length;
+        const results = new Array(i);
+        while (i--) {
+            results[i] = state[i].resolve(handler, requestor);
+        }
+        return results;
+    }
+    return [resolver.resolve(handler, requestor)];
+}
+const defaultFriendlyName = "(anonymous)";
+function isObject(value) {
+    return (typeof value === "object" && value !== null) || typeof value === "function";
+}
+/**
+ * Determine whether the value is a native function.
+ *
+ * @param fn - The function to check.
+ * @returns `true` is the function is a native function, otherwise `false`
+ */
+const isNativeFunction = (function () {
+    const lookup = new WeakMap();
+    let isNative = false;
+    let sourceText = "";
+    let i = 0;
+    return function (fn) {
+        isNative = lookup.get(fn);
+        if (isNative === void 0) {
+            sourceText = fn.toString();
+            i = sourceText.length;
+            // http://www.ecma-international.org/ecma-262/#prod-NativeFunction
+            isNative =
+                // 29 is the length of 'function () { [native code] }' which is the smallest length of a native function string
+                i >= 29 &&
+                    // 100 seems to be a safe upper bound of the max length of a native function. In Chrome and FF it's 56, in Edge it's 61.
+                    i <= 100 &&
+                    // This whole heuristic *could* be tricked by a comment. Do we need to care about that?
+                    sourceText.charCodeAt(i - 1) === 0x7d && // }
+                    // TODO: the spec is a little vague about the precise constraints, so we do need to test this across various browsers to make sure just one whitespace is a safe assumption.
+                    sourceText.charCodeAt(i - 2) <= 0x20 && // whitespace
+                    sourceText.charCodeAt(i - 3) === 0x5d && // ]
+                    sourceText.charCodeAt(i - 4) === 0x65 && // e
+                    sourceText.charCodeAt(i - 5) === 0x64 && // d
+                    sourceText.charCodeAt(i - 6) === 0x6f && // o
+                    sourceText.charCodeAt(i - 7) === 0x63 && // c
+                    sourceText.charCodeAt(i - 8) === 0x20 && //
+                    sourceText.charCodeAt(i - 9) === 0x65 && // e
+                    sourceText.charCodeAt(i - 10) === 0x76 && // v
+                    sourceText.charCodeAt(i - 11) === 0x69 && // i
+                    sourceText.charCodeAt(i - 12) === 0x74 && // t
+                    sourceText.charCodeAt(i - 13) === 0x61 && // a
+                    sourceText.charCodeAt(i - 14) === 0x6e && // n
+                    sourceText.charCodeAt(i - 15) === 0x58; // [
+            lookup.set(fn, isNative);
+        }
+        return isNative;
+    };
+})();
+const isNumericLookup = {};
+function isArrayIndex(value) {
+    switch (typeof value) {
+        case "number":
+            return value >= 0 && (value | 0) === value;
+        case "string": {
+            const result = isNumericLookup[value];
+            if (result !== void 0) {
+                return result;
+            }
+            const length = value.length;
+            if (length === 0) {
+                return (isNumericLookup[value] = false);
+            }
+            let ch = 0;
+            for (let i = 0; i < length; ++i) {
+                ch = value.charCodeAt(i);
+                if ((i === 0 && ch === 0x30 && length > 1) /* must not start with 0 */ ||
+                    ch < 0x30 /* 0 */ ||
+                    ch > 0x39 /* 9 */) {
+                    return (isNumericLookup[value] = false);
+                }
+            }
+            return (isNumericLookup[value] = true);
+        }
+        default:
+            return false;
+    }
+}
+
+function presentationKeyFromTag(tagName) {
+    return `${tagName.toLowerCase()}:presentation`;
+}
+const presentationRegistry = new Map();
+/**
+ * An API gateway to component presentation features.
+ * @public
+ */
+const ComponentPresentation = Object.freeze({
+    /**
+     * Defines a component presentation for an element.
+     * @param tagName - The element name to define the presentation for.
+     * @param presentation - The presentation that will be applied to matching elements.
+     * @param container - The dependency injection container to register the configuration in.
+     * @public
+     */
+    define(tagName, presentation, container) {
+        const key = presentationKeyFromTag(tagName);
+        const existing = presentationRegistry.get(key);
+        if (existing === void 0) {
+            presentationRegistry.set(key, presentation);
+        }
+        else {
+            // false indicates that we have more than one presentation
+            // registered for a tagName and we must resolve through DI
+            presentationRegistry.set(key, false);
+        }
+        container.register(Registration.instance(key, presentation));
+    },
+    /**
+     * Finds a component presentation for the specified element name,
+     * searching the DOM hierarchy starting from the provided element.
+     * @param tagName - The name of the element to locate the presentation for.
+     * @param element - The element to begin the search from.
+     * @returns The component presentation or null if none is found.
+     * @public
+     */
+    forTag(tagName, element) {
+        const key = presentationKeyFromTag(tagName);
+        const existing = presentationRegistry.get(key);
+        if (existing === false) {
+            const container = DI.findResponsibleContainer(element);
+            return container.get(key);
+        }
+        return existing || null;
+    },
+});
+/**
+ * The default implementation of ComponentPresentation, used by FoundationElement.
+ * @public
+ */
+class DefaultComponentPresentation {
+    /**
+     * Creates an instance of DefaultComponentPresentation.
+     * @param template - The template to apply to the element.
+     * @param styles - The styles to apply to the element.
+     * @public
+     */
+    constructor(template, styles) {
+        this.template = template || null;
+        this.styles =
+            styles === void 0
+                ? null
+                : Array.isArray(styles)
+                    ? ElementStyles.create(styles)
+                    : styles instanceof ElementStyles
+                        ? styles
+                        : ElementStyles.create([styles]);
+    }
+    /**
+     * Applies the presentation details to the specified element.
+     * @param element - The element to apply the presentation details to.
+     * @public
+     */
+    applyTo(element) {
+        const controller = element.$fastController;
+        if (controller.template === null) {
+            controller.template = this.template;
+        }
+        if (controller.styles === null) {
+            controller.styles = this.styles;
+        }
+    }
+}
+
+/**
+ * Defines a foundation element class that:
+ * 1. Connects the element to its ComponentPresentation
+ * 2. Allows resolving the element template from the instance or ComponentPresentation
+ * 3. Allows resolving the element styles from the instance or ComponentPresentation
+ *
+ * @public
+ */
+class FoundationElement extends FASTElement {
+    constructor() {
+        super(...arguments);
+        this._presentation = void 0;
+    }
+    /**
+     * A property which resolves the ComponentPresentation instance
+     * for the current component.
+     * @public
+     */
+    get $presentation() {
+        if (this._presentation === void 0) {
+            this._presentation = ComponentPresentation.forTag(this.tagName, this);
+        }
+        return this._presentation;
+    }
+    templateChanged() {
+        if (this.template !== undefined) {
+            this.$fastController.template = this.template;
+        }
+    }
+    stylesChanged() {
+        if (this.styles !== undefined) {
+            this.$fastController.styles = this.styles;
+        }
+    }
+    /**
+     * The connected callback for this FASTElement.
+     * @remarks
+     * This method is invoked by the platform whenever this FoundationElement
+     * becomes connected to the document.
+     * @public
+     */
+    connectedCallback() {
+        if (this.$presentation !== null) {
+            this.$presentation.applyTo(this);
+        }
+        super.connectedCallback();
+    }
+    /**
+     * Defines an element registry function with a set of element definition defaults.
+     * @param elementDefinition - The definition of the element to create the registry
+     * function for.
+     * @public
+     */
+    static compose(elementDefinition) {
+        return (overrideDefinition = {}) => new FoundationElementRegistry(this === FoundationElement
+            ? class extends FoundationElement {
+            }
+            : this, elementDefinition, overrideDefinition);
+    }
+}
+__decorate([
+    observable
+], FoundationElement.prototype, "template", void 0);
+__decorate([
+    observable
+], FoundationElement.prototype, "styles", void 0);
+function resolveOption(option, context, definition) {
+    if (typeof option === "function") {
+        return option(context, definition);
+    }
+    return option;
+}
+/**
+ * Registry capable of defining presentation properties for a DOM Container hierarchy.
+ *
+ * @internal
+ */
+/* eslint-disable @typescript-eslint/no-unused-vars */
+class FoundationElementRegistry {
+    constructor(type, elementDefinition, overrideDefinition) {
+        this.type = type;
+        this.elementDefinition = elementDefinition;
+        this.overrideDefinition = overrideDefinition;
+        this.definition = Object.assign(Object.assign({}, this.elementDefinition), this.overrideDefinition);
+    }
+    register(container, context) {
+        const definition = this.definition;
+        const overrideDefinition = this.overrideDefinition;
+        const prefix = definition.prefix || context.elementPrefix;
+        const name = `${prefix}-${definition.baseName}`;
+        context.tryDefineElement({
+            name,
+            type: this.type,
+            baseClass: this.elementDefinition.baseClass,
+            callback: x => {
+                const presentation = new DefaultComponentPresentation(resolveOption(definition.template, x, definition), resolveOption(definition.styles, x, definition));
+                x.definePresentation(presentation);
+                let shadowOptions = resolveOption(definition.shadowOptions, x, definition);
+                if (x.shadowRootMode) {
+                    // If the design system has overridden the shadow root mode, we need special handling.
+                    if (shadowOptions) {
+                        // If there are shadow options present in the definition, then
+                        // either the component itself has specified an option or the
+                        // registry function has overridden it.
+                        if (!overrideDefinition.shadowOptions) {
+                            // There were shadow options provided by the component and not overridden by
+                            // the registry.
+                            shadowOptions.mode = x.shadowRootMode;
+                        }
+                    }
+                    else if (shadowOptions !== null) {
+                        // If the component author did not provide shadow options,
+                        // and did not null them out (light dom opt-in) then they
+                        // were relying on the FASTElement default. So, if the
+                        // design system provides a mode, we need to create the options
+                        // to override the default.
+                        shadowOptions = { mode: x.shadowRootMode };
+                    }
+                }
+                x.defineElement({
+                    elementOptions: resolveOption(definition.elementOptions, x, definition),
+                    shadowOptions,
+                    attributes: resolveOption(definition.attributes, x, definition),
+                });
+            },
+        });
+    }
+}
+/* eslint-enable @typescript-eslint/no-unused-vars */
+
+/**
+ * Retrieves the "composed parent" element of a node, ignoring DOM tree boundaries.
+ * When the parent of a node is a shadow-root, it will return the host
+ * element of the shadow root. Otherwise it will return the parent node or null if
+ * no parent node exists.
+ * @param element - The element for which to retrieve the composed parent
+ *
+ * @public
+ */
+function composedParent(element) {
+    const parentNode = element.parentElement;
+    if (parentNode) {
+        return parentNode;
+    }
+    else {
+        const rootNode = element.getRootNode();
+        if (rootNode.host instanceof HTMLElement) {
+            // this is shadow-root
+            return rootNode.host;
+        }
+    }
+    return null;
+}
+
+/**
+ * Determines if the reference element contains the test element in a "composed" DOM tree that
+ * ignores shadow DOM boundaries.
+ *
+ * Returns true of the test element is a descendent of the reference, or exist in
+ * a shadow DOM that is a logical descendent of the reference. Otherwise returns false.
+ * @param reference - The element to test for containment against.
+ * @param test - The element being tested for containment.
+ *
+ * @public
+ */
+function composedContains(reference, test) {
+    let current = test;
+    while (current !== null) {
+        if (current === reference) {
+            return true;
+        }
+        current = composedParent(current);
+    }
+    return false;
+}
+
+const defaultElement = document.createElement("div");
+function isFastElement(element) {
+    return element instanceof FASTElement;
+}
+class QueuedStyleSheetTarget {
+    setProperty(name, value) {
+        DOM.queueUpdate(() => this.target.setProperty(name, value));
+    }
+    removeProperty(name) {
+        DOM.queueUpdate(() => this.target.removeProperty(name));
+    }
+}
+/**
+ * Handles setting properties for a FASTElement using Constructable Stylesheets
+ */
+class ConstructableStyleSheetTarget extends QueuedStyleSheetTarget {
+    constructor(source) {
+        super();
+        const sheet = new CSSStyleSheet();
+        this.target = sheet.cssRules[sheet.insertRule(":host{}")].style;
+        source.$fastController.addStyles(ElementStyles.create([sheet]));
+    }
+}
+class DocumentStyleSheetTarget extends QueuedStyleSheetTarget {
+    constructor() {
+        super();
+        const sheet = new CSSStyleSheet();
+        this.target = sheet.cssRules[sheet.insertRule(":root{}")].style;
+        document.adoptedStyleSheets = [
+            ...document.adoptedStyleSheets,
+            sheet,
+        ];
+    }
+}
+class HeadStyleElementStyleSheetTarget extends QueuedStyleSheetTarget {
+    constructor() {
+        super();
+        this.style = document.createElement("style");
+        document.head.appendChild(this.style);
+        const { sheet } = this.style;
+        // Because the HTMLStyleElement has been appended,
+        // there shouldn't exist a case where `sheet` is null,
+        // but if-check it just in case.
+        if (sheet) {
+            // https://github.com/jsdom/jsdom uses https://github.com/NV/CSSOM for it's CSSOM implementation,
+            // which implements the DOM Level 2 spec for CSSStyleSheet where insertRule() requires an index argument.
+            const index = sheet.insertRule(":root{}", sheet.cssRules.length);
+            this.target = sheet.cssRules[index].style;
+        }
+    }
+}
+/**
+ * Handles setting properties for a FASTElement using an HTMLStyleElement
+ */
+class StyleElementStyleSheetTarget {
+    constructor(target) {
+        this.store = new Map();
+        this.target = null;
+        const controller = target.$fastController;
+        this.style = document.createElement("style");
+        controller.addStyles(this.style);
+        Observable.getNotifier(controller).subscribe(this, "isConnected");
+        this.handleChange(controller, "isConnected");
+    }
+    targetChanged() {
+        if (this.target !== null) {
+            for (const [key, value] of this.store.entries()) {
+                this.target.setProperty(key, value);
+            }
+        }
+    }
+    setProperty(name, value) {
+        this.store.set(name, value);
+        DOM.queueUpdate(() => {
+            if (this.target !== null) {
+                this.target.setProperty(name, value);
+            }
+        });
+    }
+    removeProperty(name) {
+        this.store.delete(name);
+        DOM.queueUpdate(() => {
+            if (this.target !== null) {
+                this.target.removeProperty(name);
+            }
+        });
+    }
+    handleChange(source, key) {
+        // HTMLStyleElement.sheet is null if the element isn't connected to the DOM,
+        // so this method reacts to changes in DOM connection for the element hosting
+        // the HTMLStyleElement.
+        //
+        // All rules applied via the CSSOM also get cleared when the element disconnects,
+        // so we need to add a new rule each time and populate it with the stored properties
+        const { sheet } = this.style;
+        if (sheet) {
+            // Safari will throw if we try to use the return result of insertRule()
+            // to index the rule inline, so store as a const prior to indexing.
+            // https://github.com/jsdom/jsdom uses https://github.com/NV/CSSOM for it's CSSOM implementation,
+            // which implements the DOM Level 2 spec for CSSStyleSheet where insertRule() requires an index argument.
+            const index = sheet.insertRule(":host{}", sheet.cssRules.length);
+            this.target = sheet.cssRules[index].style;
+        }
+        else {
+            this.target = null;
+        }
+    }
+}
+__decorate([
+    observable
+], StyleElementStyleSheetTarget.prototype, "target", void 0);
+/**
+ * Handles setting properties for a normal HTMLElement
+ */
+class ElementStyleSheetTarget {
+    constructor(source) {
+        this.target = source.style;
+    }
+    setProperty(name, value) {
+        DOM.queueUpdate(() => this.target.setProperty(name, value));
+    }
+    removeProperty(name) {
+        DOM.queueUpdate(() => this.target.removeProperty(name));
+    }
+}
+/**
+ * Controls emission for default values. This control is capable
+ * of emitting to multiple {@link PropertyTarget | PropertyTargets},
+ * and only emits if it has at least one root.
+ *
+ * @internal
+ */
+class RootStyleSheetTarget {
+    setProperty(name, value) {
+        RootStyleSheetTarget.properties[name] = value;
+        for (const target of RootStyleSheetTarget.roots.values()) {
+            PropertyTargetManager.getOrCreate(RootStyleSheetTarget.normalizeRoot(target)).setProperty(name, value);
+        }
+    }
+    removeProperty(name) {
+        delete RootStyleSheetTarget.properties[name];
+        for (const target of RootStyleSheetTarget.roots.values()) {
+            PropertyTargetManager.getOrCreate(RootStyleSheetTarget.normalizeRoot(target)).removeProperty(name);
+        }
+    }
+    static registerRoot(root) {
+        const { roots } = RootStyleSheetTarget;
+        if (!roots.has(root)) {
+            roots.add(root);
+            const target = PropertyTargetManager.getOrCreate(this.normalizeRoot(root));
+            for (const key in RootStyleSheetTarget.properties) {
+                target.setProperty(key, RootStyleSheetTarget.properties[key]);
+            }
+        }
+    }
+    static unregisterRoot(root) {
+        const { roots } = RootStyleSheetTarget;
+        if (roots.has(root)) {
+            roots.delete(root);
+            const target = PropertyTargetManager.getOrCreate(RootStyleSheetTarget.normalizeRoot(root));
+            for (const key in RootStyleSheetTarget.properties) {
+                target.removeProperty(key);
+            }
+        }
+    }
+    /**
+     * Returns the document when provided the default element,
+     * otherwise is a no-op
+     * @param root - the root to normalize
+     */
+    static normalizeRoot(root) {
+        return root === defaultElement ? document : root;
+    }
+}
+RootStyleSheetTarget.roots = new Set();
+RootStyleSheetTarget.properties = {};
+// Caches PropertyTarget instances
+const propertyTargetCache = new WeakMap();
+// Use Constructable StyleSheets for FAST elements when supported, otherwise use
+// HTMLStyleElement instances
+const propertyTargetCtor = DOM.supportsAdoptedStyleSheets
+    ? ConstructableStyleSheetTarget
+    : StyleElementStyleSheetTarget;
+/**
+ * Manages creation and caching of PropertyTarget instances.
+ *
+ * @internal
+ */
+const PropertyTargetManager = Object.freeze({
+    getOrCreate(source) {
+        if (propertyTargetCache.has(source)) {
+            /* eslint-disable-next-line @typescript-eslint/no-non-null-assertion */
+            return propertyTargetCache.get(source);
+        }
+        let target;
+        if (source === defaultElement) {
+            target = new RootStyleSheetTarget();
+        }
+        else if (source instanceof Document) {
+            target = DOM.supportsAdoptedStyleSheets
+                ? new DocumentStyleSheetTarget()
+                : new HeadStyleElementStyleSheetTarget();
+        }
+        else if (isFastElement(source)) {
+            target = new propertyTargetCtor(source);
+        }
+        else {
+            target = new ElementStyleSheetTarget(source);
+        }
+        propertyTargetCache.set(source, target);
+        return target;
+    },
+});
+
+/**
+ * Implementation of {@link (DesignToken:interface)}
+ */
+class DesignTokenImpl extends CSSDirective {
+    constructor(configuration) {
+        super();
+        this.subscribers = new WeakMap();
+        this._appliedTo = new Set();
+        this.name = configuration.name;
+        if (configuration.cssCustomPropertyName !== null) {
+            this.cssCustomProperty = `--${configuration.cssCustomPropertyName}`;
+            this.cssVar = `var(${this.cssCustomProperty})`;
+        }
+        this.id = DesignTokenImpl.uniqueId();
+        DesignTokenImpl.tokensById.set(this.id, this);
+    }
+    get appliedTo() {
+        return [...this._appliedTo];
+    }
+    static from(nameOrConfig) {
+        return new DesignTokenImpl({
+            name: typeof nameOrConfig === "string" ? nameOrConfig : nameOrConfig.name,
+            cssCustomPropertyName: typeof nameOrConfig === "string"
+                ? nameOrConfig
+                : nameOrConfig.cssCustomPropertyName === void 0
+                    ? nameOrConfig.name
+                    : nameOrConfig.cssCustomPropertyName,
+        });
+    }
+    static isCSSDesignToken(token) {
+        return typeof token.cssCustomProperty === "string";
+    }
+    static isDerivedDesignTokenValue(value) {
+        return typeof value === "function";
+    }
+    /**
+     * Gets a token by ID. Returns undefined if the token was not found.
+     * @param id - The ID of the token
+     * @returns
+     */
+    static getTokenById(id) {
+        return DesignTokenImpl.tokensById.get(id);
+    }
+    getOrCreateSubscriberSet(target = this) {
+        return (this.subscribers.get(target) ||
+            (this.subscribers.set(target, new Set()) && this.subscribers.get(target)));
+    }
+    createCSS() {
+        return this.cssVar || "";
+    }
+    getValueFor(element) {
+        const value = DesignTokenNode.getOrCreate(element).get(this);
+        if (value !== undefined) {
+            return value;
+        }
+        throw new Error(`Value could not be retrieved for token named "${this.name}". Ensure the value is set for ${element} or an ancestor of ${element}.`);
+    }
+    setValueFor(element, value) {
+        this._appliedTo.add(element);
+        if (value instanceof DesignTokenImpl) {
+            value = this.alias(value);
+        }
+        DesignTokenNode.getOrCreate(element).set(this, value);
+        return this;
+    }
+    deleteValueFor(element) {
+        this._appliedTo.delete(element);
+        if (DesignTokenNode.existsFor(element)) {
+            DesignTokenNode.getOrCreate(element).delete(this);
+        }
+        return this;
+    }
+    withDefault(value) {
+        this.setValueFor(defaultElement, value);
+        return this;
+    }
+    subscribe(subscriber, target) {
+        const subscriberSet = this.getOrCreateSubscriberSet(target);
+        if (target && !DesignTokenNode.existsFor(target)) {
+            DesignTokenNode.getOrCreate(target);
+        }
+        if (!subscriberSet.has(subscriber)) {
+            subscriberSet.add(subscriber);
+        }
+    }
+    unsubscribe(subscriber, target) {
+        const list = this.subscribers.get(target || this);
+        if (list && list.has(subscriber)) {
+            list.delete(subscriber);
+        }
+    }
+    /**
+     * Notifies subscribers that the value for an element has changed.
+     * @param element - The element to emit a notification for
+     */
+    notify(element) {
+        const record = Object.freeze({ token: this, target: element });
+        if (this.subscribers.has(this)) {
+            this.subscribers.get(this).forEach(sub => sub.handleChange(record));
+        }
+        if (this.subscribers.has(element)) {
+            this.subscribers.get(element).forEach(sub => sub.handleChange(record));
+        }
+    }
+    /**
+     * Alias the token to the provided token.
+     * @param token - the token to alias to
+     */
+    alias(token) {
+        return ((target) => token.getValueFor(target));
+    }
+}
+DesignTokenImpl.uniqueId = (() => {
+    let id = 0;
+    return () => {
+        id++;
+        return id.toString(16);
+    };
+})();
+/**
+ * Token storage by token ID
+ */
+DesignTokenImpl.tokensById = new Map();
+class CustomPropertyReflector {
+    startReflection(token, target) {
+        token.subscribe(this, target);
+        this.handleChange({ token, target });
+    }
+    stopReflection(token, target) {
+        token.unsubscribe(this, target);
+        this.remove(token, target);
+    }
+    handleChange(record) {
+        const { token, target } = record;
+        this.add(token, target);
+    }
+    add(token, target) {
+        PropertyTargetManager.getOrCreate(target).setProperty(token.cssCustomProperty, this.resolveCSSValue(DesignTokenNode.getOrCreate(target).get(token)));
+    }
+    remove(token, target) {
+        PropertyTargetManager.getOrCreate(target).removeProperty(token.cssCustomProperty);
+    }
+    resolveCSSValue(value) {
+        return value && typeof value.createCSS === "function" ? value.createCSS() : value;
+    }
+}
+/**
+ * A light wrapper around BindingObserver to handle value caching and
+ * token notification
+ */
+class DesignTokenBindingObserver {
+    constructor(source, token, node) {
+        this.source = source;
+        this.token = token;
+        this.node = node;
+        this.dependencies = new Set();
+        this.observer = Observable.binding(source, this, false);
+        // This is a little bit hacky because it's using internal APIs of BindingObserverImpl.
+        // BindingObserverImpl queues updates to batch it's notifications which doesn't work for this
+        // scenario because the DesignToken.getValueFor API is not async. Without this, using DesignToken.getValueFor()
+        // after DesignToken.setValueFor() when setting a dependency of the value being retrieved can return a stale
+        // value. Assigning .handleChange to .call forces immediate invocation of this classes handleChange() method,
+        // allowing resolution of values synchronously.
+        // TODO: https://github.com/microsoft/fast/issues/5110
+        this.observer.handleChange = this.observer.call;
+        this.handleChange();
+    }
+    disconnect() {
+        this.observer.disconnect();
+    }
+    /**
+     * @internal
+     */
+    handleChange() {
+        this.node.store.set(this.token, this.observer.observe(this.node.target, defaultExecutionContext));
+    }
+}
+/**
+ * Stores resolved token/value pairs and notifies on changes
+ */
+class Store {
+    constructor() {
+        this.values = new Map();
+    }
+    set(token, value) {
+        if (this.values.get(token) !== value) {
+            this.values.set(token, value);
+            Observable.getNotifier(this).notify(token.id);
+        }
+    }
+    get(token) {
+        Observable.track(this, token.id);
+        return this.values.get(token);
+    }
+    delete(token) {
+        this.values.delete(token);
+    }
+    all() {
+        return this.values.entries();
+    }
+}
+const nodeCache = new WeakMap();
+const childToParent = new WeakMap();
+/**
+ * A node responsible for setting and getting token values,
+ * emitting values to CSS custom properties, and maintaining
+ * inheritance structures.
+ */
+class DesignTokenNode {
+    constructor(target) {
+        this.target = target;
+        /**
+         * Stores all resolved token values for a node
+         */
+        this.store = new Store();
+        /**
+         * All children assigned to the node
+         */
+        this.children = [];
+        /**
+         * All values explicitly assigned to the node in their raw form
+         */
+        this.assignedValues = new Map();
+        /**
+         * Tokens currently being reflected to CSS custom properties
+         */
+        this.reflecting = new Set();
+        /**
+         * Binding observers for assigned and inherited derived values.
+         */
+        this.bindingObservers = new Map();
+        /**
+         * Emits notifications to token when token values
+         * change the DesignTokenNode
+         */
+        this.tokenValueChangeHandler = {
+            handleChange: (source, arg) => {
+                const token = DesignTokenImpl.getTokenById(arg);
+                if (token) {
+                    // Notify any token subscribers
+                    token.notify(this.target);
+                    if (DesignTokenImpl.isCSSDesignToken(token)) {
+                        const parent = this.parent;
+                        const reflecting = this.isReflecting(token);
+                        if (parent) {
+                            const parentValue = parent.get(token);
+                            const sourceValue = source.get(token);
+                            if (parentValue !== sourceValue && !reflecting) {
+                                this.reflectToCSS(token);
+                            }
+                            else if (parentValue === sourceValue && reflecting) {
+                                this.stopReflectToCSS(token);
+                            }
+                        }
+                        else if (!reflecting) {
+                            this.reflectToCSS(token);
+                        }
+                    }
+                }
+            },
+        };
+        nodeCache.set(target, this);
+        // Map store change notifications to token change notifications
+        Observable.getNotifier(this.store).subscribe(this.tokenValueChangeHandler);
+        if (target instanceof FASTElement) {
+            target.$fastController.addBehaviors([this]);
+        }
+        else if (target.isConnected) {
+            this.bind();
+        }
+    }
+    /**
+     * Returns a DesignTokenNode for an element.
+     * Creates a new instance if one does not already exist for a node,
+     * otherwise returns the cached instance
+     *
+     * @param target - The HTML element to retrieve a DesignTokenNode for
+     */
+    static getOrCreate(target) {
+        return nodeCache.get(target) || new DesignTokenNode(target);
+    }
+    /**
+     * Determines if a DesignTokenNode has been created for a target
+     * @param target - The element to test
+     */
+    static existsFor(target) {
+        return nodeCache.has(target);
+    }
+    /**
+     * Searches for and return the nearest parent DesignTokenNode.
+     * Null is returned if no node is found or the node provided is for a default element.
+     */
+    static findParent(node) {
+        if (!(defaultElement === node.target)) {
+            let parent = composedParent(node.target);
+            while (parent !== null) {
+                if (nodeCache.has(parent)) {
+                    return nodeCache.get(parent);
+                }
+                parent = composedParent(parent);
+            }
+            return DesignTokenNode.getOrCreate(defaultElement);
+        }
+        return null;
+    }
+    /**
+     * Finds the closest node with a value explicitly assigned for a token, otherwise null.
+     * @param token - The token to look for
+     * @param start - The node to start looking for value assignment
+     * @returns
+     */
+    static findClosestAssignedNode(token, start) {
+        let current = start;
+        do {
+            if (current.has(token)) {
+                return current;
+            }
+            current = current.parent
+                ? current.parent
+                : current.target !== defaultElement
+                    ? DesignTokenNode.getOrCreate(defaultElement)
+                    : null;
+        } while (current !== null);
+        return null;
+    }
+    /**
+     * The parent DesignTokenNode, or null.
+     */
+    get parent() {
+        return childToParent.get(this) || null;
+    }
+    /**
+     * Checks if a token has been assigned an explicit value the node.
+     * @param token - the token to check.
+     */
+    has(token) {
+        return this.assignedValues.has(token);
+    }
+    /**
+     * Gets the value of a token for a node
+     * @param token - The token to retrieve the value for
+     * @returns
+     */
+    get(token) {
+        const value = this.store.get(token);
+        if (value !== undefined) {
+            return value;
+        }
+        const raw = this.getRaw(token);
+        if (raw !== undefined) {
+            this.hydrate(token, raw);
+            return this.get(token);
+        }
+    }
+    /**
+     * Retrieves the raw assigned value of a token from the nearest assigned node.
+     * @param token - The token to retrieve a raw value for
+     * @returns
+     */
+    getRaw(token) {
+        var _a;
+        if (this.assignedValues.has(token)) {
+            return this.assignedValues.get(token);
+        }
+        return (_a = DesignTokenNode.findClosestAssignedNode(token, this)) === null || _a === void 0 ? void 0 : _a.getRaw(token);
+    }
+    /**
+     * Sets a token to a value for a node
+     * @param token - The token to set
+     * @param value - The value to set the token to
+     */
+    set(token, value) {
+        if (DesignTokenImpl.isDerivedDesignTokenValue(this.assignedValues.get(token))) {
+            this.tearDownBindingObserver(token);
+        }
+        this.assignedValues.set(token, value);
+        if (DesignTokenImpl.isDerivedDesignTokenValue(value)) {
+            this.setupBindingObserver(token, value);
+        }
+        else {
+            this.store.set(token, value);
+        }
+    }
+    /**
+     * Deletes a token value for the node.
+     * @param token - The token to delete the value for
+     */
+    delete(token) {
+        this.assignedValues.delete(token);
+        this.tearDownBindingObserver(token);
+        const upstream = this.getRaw(token);
+        if (upstream) {
+            this.hydrate(token, upstream);
+        }
+        else {
+            this.store.delete(token);
+        }
+    }
+    /**
+     * Invoked when the DesignTokenNode.target is attached to the document
+     */
+    bind() {
+        const parent = DesignTokenNode.findParent(this);
+        if (parent) {
+            parent.appendChild(this);
+        }
+        for (const key of this.assignedValues.keys()) {
+            key.notify(this.target);
+        }
+    }
+    /**
+     * Invoked when the DesignTokenNode.target is detached from the document
+     */
+    unbind() {
+        if (this.parent) {
+            const parent = childToParent.get(this);
+            parent.removeChild(this);
+        }
+    }
+    /**
+     * Appends a child to a parent DesignTokenNode.
+     * @param child - The child to append to the node
+     */
+    appendChild(child) {
+        if (child.parent) {
+            childToParent.get(child).removeChild(child);
+        }
+        const reParent = this.children.filter(x => child.contains(x));
+        childToParent.set(child, this);
+        this.children.push(child);
+        reParent.forEach(x => child.appendChild(x));
+        Observable.getNotifier(this.store).subscribe(child);
+        // How can we not notify *every* subscriber?
+        for (const [token, value] of this.store.all()) {
+            child.hydrate(token, this.bindingObservers.has(token) ? this.getRaw(token) : value);
+        }
+    }
+    /**
+     * Removes a child from a node.
+     * @param child - The child to remove.
+     */
+    removeChild(child) {
+        const childIndex = this.children.indexOf(child);
+        if (childIndex !== -1) {
+            this.children.splice(childIndex, 1);
+        }
+        Observable.getNotifier(this.store).unsubscribe(child);
+        return child.parent === this ? childToParent.delete(child) : false;
+    }
+    /**
+     * Tests whether a provided node is contained by
+     * the calling node.
+     * @param test - The node to test
+     */
+    contains(test) {
+        return composedContains(this.target, test.target);
+    }
+    /**
+     * Instructs the node to reflect a design token for the provided token.
+     * @param token - The design token to reflect
+     */
+    reflectToCSS(token) {
+        if (!this.isReflecting(token)) {
+            this.reflecting.add(token);
+            DesignTokenNode.cssCustomPropertyReflector.startReflection(token, this.target);
+        }
+    }
+    /**
+     * Stops reflecting a DesignToken to CSS
+     * @param token - The design token to stop reflecting
+     */
+    stopReflectToCSS(token) {
+        if (this.isReflecting(token)) {
+            this.reflecting.delete(token);
+            DesignTokenNode.cssCustomPropertyReflector.stopReflection(token, this.target);
+        }
+    }
+    /**
+     * Determines if a token is being reflected to CSS for a node.
+     * @param token - The token to check for reflection
+     * @returns
+     */
+    isReflecting(token) {
+        return this.reflecting.has(token);
+    }
+    /**
+     * Handle changes to upstream tokens
+     * @param source - The parent DesignTokenNode
+     * @param property - The token ID that changed
+     */
+    handleChange(source, property) {
+        const token = DesignTokenImpl.getTokenById(property);
+        if (!token) {
+            return;
+        }
+        this.hydrate(token, this.getRaw(token));
+    }
+    /**
+     * Hydrates a token with a DesignTokenValue, making retrieval available.
+     * @param token - The token to hydrate
+     * @param value - The value to hydrate
+     */
+    hydrate(token, value) {
+        if (!this.has(token)) {
+            const observer = this.bindingObservers.get(token);
+            if (DesignTokenImpl.isDerivedDesignTokenValue(value)) {
+                if (observer) {
+                    // If the binding source doesn't match, we need
+                    // to update the binding
+                    if (observer.source !== value) {
+                        this.tearDownBindingObserver(token);
+                        this.setupBindingObserver(token, value);
+                    }
+                }
+                else {
+                    this.setupBindingObserver(token, value);
+                }
+            }
+            else {
+                if (observer) {
+                    this.tearDownBindingObserver(token);
+                }
+                this.store.set(token, value);
+            }
+        }
+    }
+    /**
+     * Sets up a binding observer for a derived token value that notifies token
+     * subscribers on change.
+     *
+     * @param token - The token to notify when the binding updates
+     * @param source - The binding source
+     */
+    setupBindingObserver(token, source) {
+        const binding = new DesignTokenBindingObserver(source, token, this);
+        this.bindingObservers.set(token, binding);
+        return binding;
+    }
+    /**
+     * Tear down a binding observer for a token.
+     */
+    tearDownBindingObserver(token) {
+        if (this.bindingObservers.has(token)) {
+            this.bindingObservers.get(token).disconnect();
+            this.bindingObservers.delete(token);
+            return true;
+        }
+        return false;
+    }
+}
+/**
+ * Responsible for reflecting tokens to CSS custom properties
+ */
+DesignTokenNode.cssCustomPropertyReflector = new CustomPropertyReflector();
+__decorate([
+    observable
+], DesignTokenNode.prototype, "children", void 0);
+function create(nameOrConfig) {
+    return DesignTokenImpl.from(nameOrConfig);
+}
+/* eslint-enable @typescript-eslint/no-unused-vars */
+/**
+ * Factory object for creating {@link (DesignToken:interface)} instances.
+ * @public
+ */
+const DesignToken = Object.freeze({
+    create,
+    /**
+     * Informs DesignToken that an HTMLElement for which tokens have
+     * been set has been connected to the document.
+     *
+     * The browser does not provide a reliable mechanism to observe an HTMLElement's connectedness
+     * in all scenarios, so invoking this method manually is necessary when:
+     *
+     * 1. Token values are set for an HTMLElement.
+     * 2. The HTMLElement does not inherit from FASTElement.
+     * 3. The HTMLElement is not connected to the document when token values are set.
+     *
+     * @param element - The element to notify
+     * @returns - true if notification was successful, otherwise false.
+     */
+    notifyConnection(element) {
+        if (!element.isConnected || !DesignTokenNode.existsFor(element)) {
+            return false;
+        }
+        DesignTokenNode.getOrCreate(element).bind();
+        return true;
+    },
+    /**
+     * Informs DesignToken that an HTMLElement for which tokens have
+     * been set has been disconnected to the document.
+     *
+     * The browser does not provide a reliable mechanism to observe an HTMLElement's connectedness
+     * in all scenarios, so invoking this method manually is necessary when:
+     *
+     * 1. Token values are set for an HTMLElement.
+     * 2. The HTMLElement does not inherit from FASTElement.
+     *
+     * @param element - The element to notify
+     * @returns - true if notification was successful, otherwise false.
+     */
+    notifyDisconnection(element) {
+        if (element.isConnected || !DesignTokenNode.existsFor(element)) {
+            return false;
+        }
+        DesignTokenNode.getOrCreate(element).unbind();
+        return true;
+    },
+    /**
+     * Registers and element or document as a DesignToken root.
+     * {@link CSSDesignToken | CSSDesignTokens} with default values assigned via
+     * {@link (DesignToken:interface).withDefault} will emit CSS custom properties to all
+     * registered roots.
+     * @param target - The root to register
+     */
+    registerRoot(target = defaultElement) {
+        RootStyleSheetTarget.registerRoot(target);
+    },
+    /**
+     * Unregister an element or document as a DesignToken root.
+     * @param target - The root to deregister
+     */
+    unregisterRoot(target = defaultElement) {
+        RootStyleSheetTarget.unregisterRoot(target);
+    },
+});
+/* eslint-enable @typescript-eslint/no-non-null-assertion */
+
+/* eslint-disable @typescript-eslint/no-non-null-assertion */
+/**
+ * Indicates what to do with an ambiguous (duplicate) element.
+ * @public
+ */
+const ElementDisambiguation = Object.freeze({
+    /**
+     * Skip defining the element but still call the provided callback passed
+     * to DesignSystemRegistrationContext.tryDefineElement
+     */
+    definitionCallbackOnly: null,
+    /**
+     * Ignore the duplicate element entirely.
+     */
+    ignoreDuplicate: Symbol(),
+});
+const elementTypesByTag = new Map();
+const elementTagsByType = new Map();
+let rootDesignSystem = null;
+const designSystemKey = DI.createInterface(x => x.cachedCallback(handler => {
+    if (rootDesignSystem === null) {
+        rootDesignSystem = new DefaultDesignSystem(null, handler);
+    }
+    return rootDesignSystem;
+}));
+/**
+ * An API gateway to design system features.
+ * @public
+ */
+const DesignSystem = Object.freeze({
+    /**
+     * Returns the HTML element name that the type is defined as.
+     * @param type - The type to lookup.
+     * @public
+     */
+    tagFor(type) {
+        return elementTagsByType.get(type);
+    },
+    /**
+     * Searches the DOM hierarchy for the design system that is responsible
+     * for the provided element.
+     * @param element - The element to locate the design system for.
+     * @returns The located design system.
+     * @public
+     */
+    responsibleFor(element) {
+        const owned = element.$$designSystem$$;
+        if (owned) {
+            return owned;
+        }
+        const container = DI.findResponsibleContainer(element);
+        return container.get(designSystemKey);
+    },
+    /**
+     * Gets the DesignSystem if one is explicitly defined on the provided element;
+     * otherwise creates a design system defined directly on the element.
+     * @param element - The element to get or create a design system for.
+     * @returns The design system.
+     * @public
+     */
+    getOrCreate(node) {
+        if (!node) {
+            if (rootDesignSystem === null) {
+                rootDesignSystem = DI.getOrCreateDOMContainer().get(designSystemKey);
+            }
+            return rootDesignSystem;
+        }
+        const owned = node.$$designSystem$$;
+        if (owned) {
+            return owned;
+        }
+        const container = DI.getOrCreateDOMContainer(node);
+        if (container.has(designSystemKey, false)) {
+            return container.get(designSystemKey);
+        }
+        else {
+            const system = new DefaultDesignSystem(node, container);
+            container.register(Registration.instance(designSystemKey, system));
+            return system;
+        }
+    },
+});
+function extractTryDefineElementParams(params, elementDefinitionType, elementDefinitionCallback) {
+    if (typeof params === "string") {
+        return {
+            name: params,
+            type: elementDefinitionType,
+            callback: elementDefinitionCallback,
+        };
+    }
+    else {
+        return params;
+    }
+}
+class DefaultDesignSystem {
+    constructor(owner, container) {
+        this.owner = owner;
+        this.container = container;
+        this.designTokensInitialized = false;
+        this.prefix = "fast";
+        this.shadowRootMode = undefined;
+        this.disambiguate = () => ElementDisambiguation.definitionCallbackOnly;
+        if (owner !== null) {
+            owner.$$designSystem$$ = this;
+        }
+    }
+    withPrefix(prefix) {
+        this.prefix = prefix;
+        return this;
+    }
+    withShadowRootMode(mode) {
+        this.shadowRootMode = mode;
+        return this;
+    }
+    withElementDisambiguation(callback) {
+        this.disambiguate = callback;
+        return this;
+    }
+    withDesignTokenRoot(root) {
+        this.designTokenRoot = root;
+        return this;
+    }
+    register(...registrations) {
+        const container = this.container;
+        const elementDefinitionEntries = [];
+        const disambiguate = this.disambiguate;
+        const shadowRootMode = this.shadowRootMode;
+        const context = {
+            elementPrefix: this.prefix,
+            tryDefineElement(params, elementDefinitionType, elementDefinitionCallback) {
+                const extractedParams = extractTryDefineElementParams(params, elementDefinitionType, elementDefinitionCallback);
+                const { name, callback, baseClass } = extractedParams;
+                let { type } = extractedParams;
+                let elementName = name;
+                let typeFoundByName = elementTypesByTag.get(elementName);
+                let needsDefine = true;
+                while (typeFoundByName) {
+                    const result = disambiguate(elementName, type, typeFoundByName);
+                    switch (result) {
+                        case ElementDisambiguation.ignoreDuplicate:
+                            return;
+                        case ElementDisambiguation.definitionCallbackOnly:
+                            needsDefine = false;
+                            typeFoundByName = void 0;
+                            break;
+                        default:
+                            elementName = result;
+                            typeFoundByName = elementTypesByTag.get(elementName);
+                            break;
+                    }
+                }
+                if (needsDefine) {
+                    if (elementTagsByType.has(type) || type === FoundationElement) {
+                        type = class extends type {
+                        };
+                    }
+                    elementTypesByTag.set(elementName, type);
+                    elementTagsByType.set(type, elementName);
+                    if (baseClass) {
+                        elementTagsByType.set(baseClass, elementName);
+                    }
+                }
+                elementDefinitionEntries.push(new ElementDefinitionEntry(container, elementName, type, shadowRootMode, callback, needsDefine));
+            },
+        };
+        if (!this.designTokensInitialized) {
+            this.designTokensInitialized = true;
+            if (this.designTokenRoot !== null) {
+                DesignToken.registerRoot(this.designTokenRoot);
+            }
+        }
+        container.registerWithContext(context, ...registrations);
+        for (const entry of elementDefinitionEntries) {
+            entry.callback(entry);
+            if (entry.willDefine && entry.definition !== null) {
+                entry.definition.define();
+            }
+        }
+        return this;
+    }
+}
+class ElementDefinitionEntry {
+    constructor(container, name, type, shadowRootMode, callback, willDefine) {
+        this.container = container;
+        this.name = name;
+        this.type = type;
+        this.shadowRootMode = shadowRootMode;
+        this.callback = callback;
+        this.willDefine = willDefine;
+        this.definition = null;
+    }
+    definePresentation(presentation) {
+        ComponentPresentation.define(this.name, presentation, this.container);
+    }
+    defineElement(definition) {
+        this.definition = new FASTElementDefinition(this.type, Object.assign(Object.assign({}, definition), { name: this.name }));
+    }
+    tagFor(type) {
+        return DesignSystem.tagFor(type);
+    }
+}
+/* eslint-enable @typescript-eslint/no-non-null-assertion */
+
+function provideVividDesignSystem(element) {
+  return DesignSystem.getOrCreate(element).withPrefix('vwc');
+}
+const designSystem = provideVividDesignSystem();
+
+export { AttachedBehaviorHTMLDirective as A, DOM as D, FoundationElement as F, HTMLDirective as H, Observable as O, SubscriberSet as S, __decorate as _, attr as a, __metadata as b, __classPrivateFieldGet as c, designSystem as d, emptyArray as e, HTMLView as f, __classPrivateFieldSet as g, html as h, nullableNumberConverter as n, observable as o, provideVividDesignSystem as p };