@microsoft/fast-element 1.10.2 → 2.0.0-beta.1

package/dist/fast-element.debug.js

@@ -0,0 +1,3824 @@
+(function ensureGlobalThis() {
+    if (typeof globalThis !== "undefined") {
+        // We're running in a modern environment.
+        return;
+    }
+    if (typeof global !== "undefined") {
+        // We're running in NodeJS
+        global.globalThis = global;
+    }
+    else if (typeof self !== "undefined") {
+        self.globalThis = self;
+    }
+    else if (typeof window !== "undefined") {
+        // We're running in the browser's main thread.
+        window.globalThis = window;
+    }
+    else {
+        // 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
+        const result = new Function("return this")();
+        result.globalThis = result;
+    }
+})();
+// API-only Polyfill for trustedTypes
+if (!globalThis.trustedTypes) {
+    globalThis.trustedTypes = {
+        createPolicy: (n, r) => r,
+    };
+}
+// ensure FAST global - duplicated in platform.ts
+const propConfig$1 = {
+    configurable: false,
+    enumerable: false,
+    writable: false,
+};
+if (globalThis.FAST === void 0) {
+    Reflect.defineProperty(globalThis, "FAST", Object.assign({ value: Object.create(null) }, propConfig$1));
+}
+const FAST$2 = globalThis.FAST;
+if (FAST$2.getById === void 0) {
+    const storage = Object.create(null);
+    Reflect.defineProperty(FAST$2, "getById", Object.assign({ value(id, initialize) {
+            let found = storage[id];
+            if (found === void 0) {
+                found = initialize ? (storage[id] = initialize()) : null;
+            }
+            return found;
+        } }, propConfig$1));
+}
+// duplicated from DOM
+const supportsAdoptedStyleSheets = Array.isArray(document.adoptedStyleSheets) &&
+    "replace" in CSSStyleSheet.prototype;
+function usableStyleTarget(target) {
+    return target === document ? document.body : target;
+}
+let id$1 = 0;
+const nextStyleId = () => `fast-${++id$1}`;
+class StyleElementStrategy {
+    constructor(styles) {
+        this.styles = styles;
+        this.styleClass = nextStyleId();
+    }
+    addStylesTo(target) {
+        target = usableStyleTarget(target);
+        const styles = this.styles;
+        const styleClass = this.styleClass;
+        for (let i = 0; i < styles.length; i++) {
+            const element = document.createElement("style");
+            element.innerHTML = styles[i];
+            element.className = styleClass;
+            target.append(element);
+        }
+    }
+    removeStylesFrom(target) {
+        const styles = target.querySelectorAll(`.${this.styleClass}`);
+        target = usableStyleTarget(target);
+        for (let i = 0, ii = styles.length; i < ii; ++i) {
+            target.removeChild(styles[i]);
+        }
+    }
+}
+if (!supportsAdoptedStyleSheets) {
+    FAST$2.getById(/* KernelServiceId.styleSheetStrategy */ 5, () => StyleElementStrategy);
+}
+
+if (globalThis.FAST === void 0) {
+    Reflect.defineProperty(globalThis, "FAST", {
+        value: Object.create(null),
+        configurable: false,
+        enumerable: false,
+        writable: false,
+    });
+}
+const FAST$1 = globalThis.FAST;
+const debugMessages = {
+    [1101 /* needsArrayObservation */]: "Must call enableArrayObservation before observing arrays.",
+    [1201 /* onlySetHTMLPolicyOnce */]: "The HTML policy can only be set once.",
+    [1202 /* bindingInnerHTMLRequiresTrustedTypes */]: "To bind innerHTML, you must use a TrustedTypesPolicy.",
+    [1401 /* missingElementDefinition */]: "Missing FASTElement definition.",
+};
+Object.assign(FAST$1, {
+    addMessages(messages) {
+        Object.assign(debugMessages, messages);
+    },
+    warn(code, ...args) {
+        var _a;
+        console.warn((_a = debugMessages[code]) !== null && _a !== void 0 ? _a : "Unknown Warning");
+    },
+    error(code, ...args) {
+        var _a;
+        return new Error((_a = debugMessages[code]) !== null && _a !== void 0 ? _a : "Unknown Error");
+    },
+});
+
+// ensure FAST global - duplicated in polyfills.ts and debug.ts
+const propConfig = {
+    configurable: false,
+    enumerable: false,
+    writable: false,
+};
+if (globalThis.FAST === void 0) {
+    Reflect.defineProperty(globalThis, "FAST", Object.assign({ value: Object.create(null) }, propConfig));
+}
+/**
+ * The FAST global.
+ * @internal
+ */
+const FAST = globalThis.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));
+}
+if (FAST.error === void 0) {
+    Object.assign(FAST, {
+        warn() { },
+        error(code) {
+            return new Error(`Code ${code}`);
+        },
+        addMessages() { },
+    });
+}
+/**
+ * A readonly, empty array.
+ * @remarks
+ * Typically returned by APIs that return arrays when there are
+ * no actual items to return.
+ * @public
+ */
+const emptyArray = Object.freeze([]);
+/**
+ * Do not change. Part of shared kernel contract.
+ * @internal
+ */
+function createTypeRegistry() {
+    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);
+        },
+        getForInstance(object) {
+            return typeToDefinition.get(object.constructor);
+        },
+    });
+}
+
+/**
+ * @internal
+ */
+const isFunction = (object) => typeof object === "function";
+/**
+ * @internal
+ */
+const isString = (object) => typeof object === "string";
+
+/**
+ * The default UpdateQueue.
+ * @public
+ */
+const Updates = FAST.getById(1 /* KernelServiceId.updateQueue */, () => {
+    const tasks = [];
+    const pendingErrors = [];
+    const rAF = globalThis.requestAnimationFrame;
+    let updateAsync = true;
+    function throwFirstError() {
+        if (pendingErrors.length) {
+            throw pendingErrors.shift();
+        }
+    }
+    function tryRunTask(task) {
+        try {
+            task.call();
+        }
+        catch (error) {
+            if (updateAsync) {
+                pendingErrors.push(error);
+                setTimeout(throwFirstError, 0);
+            }
+            else {
+                tasks.length = 0;
+                throw error;
+            }
+        }
+    }
+    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 `enqueue`.
+            // If we call `enqueue` within a task scheduled by `enqueue`, 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) {
+        tasks.push(callable);
+        if (tasks.length < 2) {
+            updateAsync ? rAF(process) : process();
+        }
+    }
+    return Object.freeze({
+        enqueue,
+        next: () => new Promise(enqueue),
+        process,
+        setMode: (isAsync) => (updateAsync = isAsync),
+    });
+});
+
+/**
+ * An implementation of {@link Notifier} that efficiently keeps track of
+ * subscribers interested in a specific change notification on an
+ * observable subject.
+ *
+ * @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 subject.
+     * @param subject - The subject that subscribers will receive notifications from.
+     * @param initialSubscriber - An initial subscriber to changes.
+     */
+    constructor(subject, initialSubscriber) {
+        this.sub1 = void 0;
+        this.sub2 = void 0;
+        this.spillover = void 0;
+        this.subject = subject;
+        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.spillover === void 0
+            ? this.sub1 === subscriber || this.sub2 === subscriber
+            : this.spillover.indexOf(subscriber) !== -1;
+    }
+    /**
+     * Subscribes to notification of changes in an object's state.
+     * @param subscriber - The object that is subscribing for change notification.
+     */
+    subscribe(subscriber) {
+        const spillover = this.spillover;
+        if (spillover === void 0) {
+            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.sub1 = void 0;
+            this.sub2 = void 0;
+        }
+        else {
+            const index = spillover.indexOf(subscriber);
+            if (index === -1) {
+                spillover.push(subscriber);
+            }
+        }
+    }
+    /**
+     * Unsubscribes from notification of changes in an object's state.
+     * @param subscriber - The object that is unsubscribing from change notification.
+     */
+    unsubscribe(subscriber) {
+        const spillover = this.spillover;
+        if (spillover === void 0) {
+            if (this.sub1 === subscriber) {
+                this.sub1 = void 0;
+            }
+            else if (this.sub2 === subscriber) {
+                this.sub2 = void 0;
+            }
+        }
+        else {
+            const index = spillover.indexOf(subscriber);
+            if (index !== -1) {
+                spillover.splice(index, 1);
+            }
+        }
+    }
+    /**
+     * Notifies all subscribers.
+     * @param args - Data passed along to subscribers during notification.
+     */
+    notify(args) {
+        const spillover = this.spillover;
+        const subject = this.subject;
+        if (spillover === void 0) {
+            const sub1 = this.sub1;
+            const sub2 = this.sub2;
+            if (sub1 !== void 0) {
+                sub1.handleChange(subject, args);
+            }
+            if (sub2 !== void 0) {
+                sub2.handleChange(subject, args);
+            }
+        }
+        else {
+            for (let i = 0, ii = spillover.length; i < ii; ++i) {
+                spillover[i].handleChange(subject, 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 subject.
+     * @param subject - The object that subscribers will receive notifications for.
+     */
+    constructor(subject) {
+        this.subscribers = {};
+        this.subjectSubscribers = null;
+        this.subject = subject;
+    }
+    /**
+     * Notifies all subscribers, based on the specified property.
+     * @param propertyName - The property name, passed along to subscribers during notification.
+     */
+    notify(propertyName) {
+        var _a, _b;
+        (_a = this.subscribers[propertyName]) === null || _a === void 0 ? void 0 : _a.notify(propertyName);
+        (_b = this.subjectSubscribers) === null || _b === void 0 ? void 0 : _b.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, _b;
+        let subscribers;
+        if (propertyToWatch) {
+            subscribers =
+                (_a = this.subscribers[propertyToWatch]) !== null && _a !== void 0 ? _a : (this.subscribers[propertyToWatch] = new SubscriberSet(this.subject));
+        }
+        else {
+            subscribers =
+                (_b = this.subjectSubscribers) !== null && _b !== void 0 ? _b : (this.subjectSubscribers = new SubscriberSet(this.subject));
+        }
+        subscribers.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, _b;
+        if (propertyToUnwatch) {
+            (_a = this.subscribers[propertyToUnwatch]) === null || _a === void 0 ? void 0 : _a.unsubscribe(subscriber);
+        }
+        else {
+            (_b = this.subjectSubscribers) === null || _b === void 0 ? void 0 : _b.unsubscribe(subscriber);
+        }
+    }
+}
+
+/**
+ * Common Observable APIs.
+ * @public
+ */
+const Observable = FAST.getById(2 /* KernelServiceId.observable */, () => {
+    const queueUpdate = Updates.enqueue;
+    const volatileRegex = /(:|&&|\|\||if)/;
+    const notifierLookup = new WeakMap();
+    const accessorLookup = new WeakMap();
+    let watcher = void 0;
+    let createArrayObserver = (array) => {
+        throw FAST.error(1101 /* Message.needsArrayObservation */);
+    };
+    function getNotifier(source) {
+        var _a;
+        let found = (_a = source.$fastController) !== null && _a !== void 0 ? _a : notifierLookup.get(source);
+        if (found === void 0) {
+            Array.isArray(source)
+                ? (found = createArrayObserver(source))
+                : 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);
+            }
+            accessors = accessors === void 0 ? [] : 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 (isFunction(callback)) {
+                    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.isAsync = true;
+            this.first = this;
+            this.last = null;
+            this.propertySource = void 0;
+            this.propertyName = void 0;
+            this.notifier = void 0;
+            this.next = void 0;
+        }
+        setMode(isAsync) {
+            this.isAsync = this.needsQueue = isAsync;
+        }
+        observe(source, context) {
+            if (this.needsRefresh && this.last !== null) {
+                this.dispose();
+            }
+            const previousWatcher = watcher;
+            watcher = this.needsRefresh ? this : void 0;
+            this.needsRefresh = this.isVolatileBinding;
+            const result = this.binding(source, context !== null && context !== void 0 ? context : ExecutionContext.default);
+            watcher = previousWatcher;
+            return result;
+        }
+        dispose() {
+            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 = this.isAsync;
+            }
+        }
+        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];
+                    /* eslint-disable-next-line */
+                    watcher = this;
+                    if (propertySource === prevValue) {
+                        this.needsRefresh = true;
+                    }
+                }
+                prev.next = current;
+            }
+            this.last = current;
+        }
+        handleChange() {
+            if (this.needsQueue) {
+                this.needsQueue = false;
+                queueUpdate(this);
+            }
+            else if (!this.isAsync) {
+                this.call();
+            }
+        }
+        call() {
+            if (this.last !== null) {
+                this.needsQueue = this.isAsync;
+                this.notify(this);
+            }
+        }
+        *records() {
+            let next = this.first;
+            while (next !== void 0) {
+                yield next;
+                next = next.next;
+            }
+        }
+    }
+    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) {
+            watcher && watcher.watch(source, propertyName);
+        },
+        /**
+         * Notifies watchers that the currently executing property getter or function is volatile
+         * with respect to its observable dependencies.
+         */
+        trackVolatile() {
+            watcher && (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) {
+            /* eslint-disable-next-line @typescript-eslint/no-use-before-define */
+            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 (isString(nameOrAccessor)) {
+                nameOrAccessor = new DefaultObservableAccessor(nameOrAccessor);
+            }
+            getAccessors(target).push(nameOrAccessor);
+            Reflect.defineProperty(target, nameOrAccessor.name, {
+                enumerable: true,
+                get() {
+                    return nameOrAccessor.getValue(this);
+                },
+                set(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);
+}
+/**
+ * Decorator: Marks a property getter as having volatile observable dependencies.
+ * @param target - The target that the property is defined on.
+ * @param name - The property name.
+ * @param name - The existing descriptor.
+ * @public
+ */
+function volatile(target, name, descriptor) {
+    return Object.assign({}, descriptor, {
+        get() {
+            Observable.trackVolatile();
+            return descriptor.get.apply(this);
+        },
+    });
+}
+const contextEvent = FAST.getById(3 /* KernelServiceId.contextEvent */, () => {
+    let current = null;
+    return {
+        get() {
+            return current;
+        },
+        set(event) {
+            current = event;
+        },
+    };
+});
+class DefaultExecutionContext {
+    constructor(parentSource = null, parentContext = null) {
+        this.index = 0;
+        this.length = 0;
+        this.parent = parentSource;
+        this.parentContext = parentContext;
+    }
+    get event() {
+        return contextEvent.get();
+    }
+    get isEven() {
+        return this.index % 2 === 0;
+    }
+    get isOdd() {
+        return this.index % 2 !== 0;
+    }
+    get isFirst() {
+        return this.index === 0;
+    }
+    get isInMiddle() {
+        return !this.isFirst && !this.isLast;
+    }
+    get isLast() {
+        return this.index === this.length - 1;
+    }
+    eventDetail() {
+        return this.event.detail;
+    }
+    eventTarget() {
+        return this.event.target;
+    }
+    updatePosition(index, length) {
+        this.index = index;
+        this.length = length;
+    }
+    createChildContext(parentSource) {
+        return new DefaultExecutionContext(parentSource, this);
+    }
+    createItemContext(index, length) {
+        const childContext = Object.create(this);
+        childContext.index = index;
+        childContext.length = length;
+        return childContext;
+    }
+}
+Observable.defineProperty(DefaultExecutionContext.prototype, "index");
+Observable.defineProperty(DefaultExecutionContext.prototype, "length");
+/**
+ * The common execution context APIs.
+ * @public
+ */
+const ExecutionContext = Object.freeze({
+    default: new DefaultExecutionContext(),
+    /**
+     * Sets the event for the current execution context.
+     * @param event - The event to set.
+     * @internal
+     */
+    setEvent(event) {
+        contextEvent.set(event);
+    },
+    /**
+     * Creates a new root execution context.
+     * @returns A new execution context.
+     */
+    create() {
+        return new DefaultExecutionContext();
+    },
+});
+
+/**
+ * A splice map is a representation of how a previous array of items
+ * was transformed into a new array of items. Conceptually it is a list of
+ * tuples of
+ *
+ *   (index, removed, addedCount)
+ *
+ * which are kept in ascending index order of. The tuple represents that at
+ * the |index|, |removed| sequence of items were removed, and counting forward
+ * from |index|, |addedCount| items were added.
+ * @public
+ */
+class Splice {
+    /**
+     * Creates a splice.
+     * @param index - The index that the splice occurs at.
+     * @param removed - The items that were removed.
+     * @param addedCount - The  number of items that were added.
+     */
+    constructor(index, removed, addedCount) {
+        this.index = index;
+        this.removed = removed;
+        this.addedCount = addedCount;
+    }
+    /**
+     * Adjusts the splice index based on the provided array.
+     * @param array - The array to adjust to.
+     * @returns The same splice, mutated based on the reference array.
+     */
+    adjustTo(array) {
+        let index = this.index;
+        const arrayLength = array.length;
+        if (index > arrayLength) {
+            index = arrayLength - this.addedCount;
+        }
+        else if (index < 0) {
+            index = arrayLength + this.removed.length + index - this.addedCount;
+        }
+        this.index = index < 0 ? 0 : index;
+        return this;
+    }
+}
+/**
+ * Indicates what level of feature support the splice
+ * strategy provides.
+ * @public
+ */
+const SpliceStrategySupport = Object.freeze({
+    /**
+     * Only supports resets.
+     */
+    reset: 1,
+    /**
+     * Supports tracking splices and resets.
+     */
+    splice: 2,
+    /**
+     * Supports tracking splices and resets, while applying some form
+     * of optimization, such as merging, to the splices.
+     */
+    optimized: 3,
+});
+const reset = new Splice(0, emptyArray, 0);
+reset.reset = true;
+const resetSplices = [reset];
+let defaultSpliceStrategy = Object.freeze({
+    support: SpliceStrategySupport.splice,
+    normalize(previous, current, changes) {
+        return previous === void 0 ? changes !== null && changes !== void 0 ? changes : emptyArray : resetSplices;
+    },
+    pop(array, observer, pop, args) {
+        const notEmpty = array.length > 0;
+        const result = pop.apply(array, args);
+        if (notEmpty) {
+            observer.addSplice(new Splice(array.length, [result], 0));
+        }
+        return result;
+    },
+    push(array, observer, push, args) {
+        const result = push.apply(array, args);
+        observer.addSplice(new Splice(array.length - args.length, [], args.length).adjustTo(array));
+        return result;
+    },
+    reverse(array, observer, reverse, args) {
+        const result = reverse.apply(array, args);
+        observer.reset(array);
+        return result;
+    },
+    shift(array, observer, shift, args) {
+        const notEmpty = array.length > 0;
+        const result = shift.apply(array, args);
+        if (notEmpty) {
+            observer.addSplice(new Splice(0, [result], 0));
+        }
+        return result;
+    },
+    sort(array, observer, sort, args) {
+        const result = sort.apply(array, args);
+        observer.reset(array);
+        return result;
+    },
+    splice(array, observer, splice, args) {
+        const result = splice.apply(array, args);
+        observer.addSplice(new Splice(+args[0], result, args.length > 2 ? args.length - 2 : 0).adjustTo(array));
+        return result;
+    },
+    unshift(array, observer, unshift, args) {
+        const result = unshift.apply(array, args);
+        observer.addSplice(new Splice(0, [], args.length).adjustTo(array));
+        return result;
+    },
+});
+/**
+ * Functionality related to tracking changes in arrays.
+ * @public
+ */
+const SpliceStrategy = Object.freeze({
+    /**
+     * A set of changes that represent a full array reset.
+     */
+    reset: resetSplices,
+    /**
+     * Sets the default strategy to use for array observers.
+     * @param strategy - The splice strategy to use.
+     */
+    setDefaultStrategy(strategy) {
+        defaultSpliceStrategy = strategy;
+    },
+});
+function setNonEnumerable(target, property, value) {
+    Reflect.defineProperty(target, property, {
+        value,
+        enumerable: false,
+    });
+}
+class DefaultArrayObserver extends SubscriberSet {
+    constructor(subject) {
+        super(subject);
+        this.oldCollection = void 0;
+        this.splices = void 0;
+        this.needsQueue = true;
+        this._strategy = null;
+        this._lengthObserver = void 0;
+        this.call = this.flush;
+        setNonEnumerable(subject, "$fastController", this);
+    }
+    get strategy() {
+        return this._strategy;
+    }
+    set strategy(value) {
+        this._strategy = value;
+    }
+    get lengthObserver() {
+        let observer = this._lengthObserver;
+        if (observer === void 0) {
+            const array = this.subject;
+            this._lengthObserver = observer = {
+                length: array.length,
+                handleChange() {
+                    if (this.length !== array.length) {
+                        this.length = array.length;
+                        Observable.notify(observer, "length");
+                    }
+                },
+            };
+            this.subscribe(observer);
+        }
+        return observer;
+    }
+    subscribe(subscriber) {
+        this.flush();
+        super.subscribe(subscriber);
+    }
+    addSplice(splice) {
+        if (this.splices === void 0) {
+            this.splices = [splice];
+        }
+        else {
+            this.splices.push(splice);
+        }
+        this.enqueue();
+    }
+    reset(oldCollection) {
+        this.oldCollection = oldCollection;
+        this.enqueue();
+    }
+    flush() {
+        var _a;
+        const splices = this.splices;
+        const oldCollection = this.oldCollection;
+        if (splices === void 0 && oldCollection === void 0) {
+            return;
+        }
+        this.needsQueue = true;
+        this.splices = void 0;
+        this.oldCollection = void 0;
+        this.notify(((_a = this._strategy) !== null && _a !== void 0 ? _a : defaultSpliceStrategy).normalize(oldCollection, this.subject, splices));
+    }
+    enqueue() {
+        if (this.needsQueue) {
+            this.needsQueue = false;
+            Updates.enqueue(this);
+        }
+    }
+}
+let enabled = false;
+/**
+ * An observer for arrays.
+ * @public
+ */
+const ArrayObserver = Object.freeze({
+    /**
+     * Enables the array observation mechanism.
+     * @remarks
+     * Array observation is enabled automatically when using the
+     * {@link RepeatDirective}, so calling this API manually is
+     * not typically necessary.
+     */
+    enable() {
+        if (enabled) {
+            return;
+        }
+        enabled = true;
+        Observable.setArrayObserverFactory((collection) => new DefaultArrayObserver(collection));
+        const proto = Array.prototype;
+        if (!proto.$fastPatch) {
+            setNonEnumerable(proto, "$fastPatch", 1);
+            [
+                proto.pop,
+                proto.push,
+                proto.reverse,
+                proto.shift,
+                proto.sort,
+                proto.splice,
+                proto.unshift,
+            ].forEach(method => {
+                proto[method.name] = function (...args) {
+                    var _a;
+                    const o = this.$fastController;
+                    return o === void 0
+                        ? method.apply(this, args)
+                        : ((_a = o.strategy) !== null && _a !== void 0 ? _a : defaultSpliceStrategy)[method.name](this, o, method, args);
+                };
+            });
+        }
+    },
+});
+/**
+ * Enables observing the length of an array.
+ * @param array - The array to observe the length of.
+ * @returns The length of the array.
+ * @public
+ */
+function length(array) {
+    if (!array) {
+        return 0;
+    }
+    let arrayObserver = array.$fastController;
+    if (arrayObserver === void 0) {
+        ArrayObserver.enable();
+        arrayObserver = Observable.getNotifier(array);
+    }
+    Observable.track(arrayObserver.lengthObserver, "length");
+    return array.length;
+}
+
+const styleSheetCache = new Map();
+let DefaultStyleStrategy;
+function reduceStyles(styles) {
+    return styles
+        .map((x) => x instanceof ElementStyles ? reduceStyles(x.styles) : [x])
+        .reduce((prev, curr) => prev.concat(curr), []);
+}
+/**
+ * Represents styles that can be applied to a custom element.
+ * @public
+ */
+class ElementStyles {
+    /**
+     * Creates an instance of ElementStyles.
+     * @param styles - The styles that will be associated with elements.
+     */
+    constructor(styles) {
+        this.styles = styles;
+        this.targets = new WeakSet();
+        this._strategy = null;
+        this.behaviors = styles
+            .map((x) => x instanceof ElementStyles ? x.behaviors : null)
+            .reduce((prev, curr) => (curr === null ? prev : prev === null ? curr : prev.concat(curr)), null);
+    }
+    /**
+     * Gets the StyleStrategy associated with these element styles.
+     */
+    get strategy() {
+        if (this._strategy === null) {
+            this.withStrategy(DefaultStyleStrategy);
+        }
+        return this._strategy;
+    }
+    /** @internal */
+    addStylesTo(target) {
+        this.strategy.addStylesTo(target);
+        this.targets.add(target);
+    }
+    /** @internal */
+    removeStylesFrom(target) {
+        this.strategy.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;
+    }
+    /**
+     * Sets the strategy that handles adding/removing these styles for an element.
+     * @param strategy - The strategy to use.
+     */
+    withStrategy(Strategy) {
+        this._strategy = new Strategy(reduceStyles(this.styles));
+        return this;
+    }
+    /**
+     * Sets the default strategy type to use when creating style strategies.
+     * @param Strategy - The strategy type to construct.
+     */
+    static setDefaultStrategy(Strategy) {
+        DefaultStyleStrategy = Strategy;
+    }
+}
+/**
+ * Indicates whether the DOM supports the adoptedStyleSheets feature.
+ */
+ElementStyles.supportsAdoptedStyleSheets = Array.isArray(document.adoptedStyleSheets) &&
+    "replace" in CSSStyleSheet.prototype;
+/**
+ * https://wicg.github.io/construct-stylesheets/
+ * https://developers.google.com/web/updates/2019/02/constructable-stylesheets
+ *
+ * @internal
+ */
+class AdoptedStyleSheetsStrategy {
+    constructor(styles) {
+        this.sheets = 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;
+        });
+    }
+    addStylesTo(target) {
+        target.adoptedStyleSheets = [...target.adoptedStyleSheets, ...this.sheets];
+    }
+    removeStylesFrom(target) {
+        const sheets = this.sheets;
+        target.adoptedStyleSheets = target.adoptedStyleSheets.filter((x) => sheets.indexOf(x) === -1);
+    }
+}
+ElementStyles.setDefaultStrategy(FAST.getById(5 /* KernelServiceId.styleSheetStrategy */, () => AdoptedStyleSheetsStrategy));
+
+const registry$1 = createTypeRegistry();
+/**
+ * Instructs the css engine to provide dynamic styles or
+ * associate behaviors with styles.
+ * @public
+ */
+const CSSDirective = Object.freeze({
+    /**
+     * Gets the directive definition associated with the instance.
+     * @param instance - The directive instance to retrieve the definition for.
+     */
+    getForInstance: registry$1.getForInstance,
+    /**
+     * Gets the directive definition associated with the specified type.
+     * @param type - The directive type to retrieve the definition for.
+     */
+    getByType: registry$1.getByType,
+    /**
+     * Defines a CSSDirective.
+     * @param type - The type to define as a directive.
+     */
+    define(type) {
+        registry$1.register({ type });
+        return type;
+    },
+});
+/**
+ * Decorator: Defines a CSSDirective.
+ * @public
+ */
+function cssDirective() {
+    /* eslint-disable-next-line @typescript-eslint/explicit-function-return-type */
+    return function (type) {
+        CSSDirective.define(type);
+    };
+}
+
+function collectStyles(strings, values) {
+    const styles = [];
+    let cssString = "";
+    const behaviors = [];
+    const add = (behavior) => {
+        behaviors.push(behavior);
+    };
+    for (let i = 0, ii = strings.length - 1; i < ii; ++i) {
+        cssString += strings[i];
+        let value = values[i];
+        if (CSSDirective.getForInstance(value) !== void 0) {
+            value = value.createCSS(add);
+        }
+        if (value instanceof ElementStyles || value instanceof CSSStyleSheet) {
+            if (cssString.trim() !== "") {
+                styles.push(cssString);
+                cssString = "";
+            }
+            styles.push(value);
+        }
+        else {
+            cssString += value;
+        }
+    }
+    cssString += strings[strings.length - 1];
+    if (cssString.trim() !== "") {
+        styles.push(cssString);
+    }
+    return {
+        styles,
+        behaviors,
+    };
+}
+/**
+ * Transforms a template literal string into styles.
+ * @param strings - The string fragments that are interpolated with the values.
+ * @param values - The values that are interpolated with the string fragments.
+ * @remarks
+ * The css helper supports interpolation of strings and ElementStyle instances.
+ * @public
+ */
+const css = ((strings, ...values) => {
+    const { styles, behaviors } = collectStyles(strings, values);
+    const elementStyles = new ElementStyles(styles);
+    return behaviors.length ? elementStyles.withBehaviors(...behaviors) : elementStyles;
+});
+class CSSPartial {
+    constructor(styles, behaviors) {
+        this.behaviors = behaviors;
+        this.css = "";
+        const stylesheets = styles.reduce((accumulated, current) => {
+            if (isString(current)) {
+                this.css += current;
+            }
+            else {
+                accumulated.push(current);
+            }
+            return accumulated;
+        }, []);
+        if (stylesheets.length) {
+            this.styles = new ElementStyles(stylesheets);
+        }
+    }
+    createCSS(add) {
+        this.behaviors.forEach(add);
+        if (this.styles) {
+            add(this);
+        }
+        return this.css;
+    }
+    bind(el) {
+        el.$fastController.addStyles(this.styles);
+    }
+    unbind(el) {
+        el.$fastController.removeStyles(this.styles);
+    }
+}
+CSSDirective.define(CSSPartial);
+css.partial = (strings, ...values) => {
+    const { styles, behaviors } = collectStyles(strings, values);
+    return new CSSPartial(styles, behaviors);
+};
+/**
+ * @deprecated Use css.partial instead.
+ * @public
+ */
+const cssPartial = css.partial;
+
+/**
+ * Common DOM APIs.
+ * @public
+ */
+const DOM = Object.freeze({
+    /**
+     * @deprecated
+     * Use Updates.enqueue().
+     */
+    queueUpdate: Updates.enqueue,
+    /**
+     * @deprecated
+     * Use Updates.next()
+     */
+    nextUpdate: Updates.next,
+    /**
+     * @deprecated
+     * Use Updates.process()
+     */
+    processUpdates: Updates.process,
+    /**
+     * 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) {
+        value === null || value === undefined
+            ? element.removeAttribute(attributeName)
+            : 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);
+    },
+});
+
+const marker = `fast-${Math.random().toString(36).substring(2, 8)}`;
+const interpolationStart = `${marker}{`;
+const interpolationEnd = `}${marker}`;
+const interpolationEndLength = interpolationEnd.length;
+let id = 0;
+/** @internal */
+const nextId = () => `${marker}-${++id}`;
+/**
+ * Common APIs related to markup generation.
+ * @public
+ */
+const Markup = Object.freeze({
+    /**
+     * Creates a placeholder string suitable for marking out a location *within*
+     * an attribute value or HTML content.
+     * @param index - The directive index to create the placeholder for.
+     * @remarks
+     * Used internally by binding directives.
+     */
+    interpolation: (id) => `${interpolationStart}${id}${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`.
+     */
+    attribute: (id) => `${nextId()}="${interpolationStart}${id}${interpolationEnd}"`,
+    /**
+     * Creates a placeholder that manifests itself as a marker within the DOM structure.
+     * @param index - The directive index to create the placeholder for.
+     * @remarks
+     * Used internally by structural directives such as `repeat`.
+     */
+    comment: (id) => `<!--${interpolationStart}${id}${interpolationEnd}-->`,
+});
+/**
+ * Common APIs related to content parsing.
+ * @public
+ */
+const Parser = Object.freeze({
+    /**
+     * Parses text content or HTML attribute content, separating out the static strings
+     * from the directives.
+     * @param value - The content or attribute string to parse.
+     * @param factories - A list of directives to search for in the string.
+     * @returns A heterogeneous array of static strings interspersed with
+     * directives or null if no directives are found in the string.
+     */
+    parse(value, factories) {
+        const parts = value.split(interpolationStart);
+        if (parts.length === 1) {
+            return null;
+        }
+        const result = [];
+        for (let i = 0, ii = parts.length; i < ii; ++i) {
+            const current = parts[i];
+            const index = current.indexOf(interpolationEnd);
+            let literal;
+            if (index === -1) {
+                literal = current;
+            }
+            else {
+                const factoryId = current.substring(0, index);
+                result.push(factories[factoryId]);
+                literal = current.substring(index + interpolationEndLength);
+            }
+            if (literal !== "") {
+                result.push(literal);
+            }
+        }
+        return result;
+    },
+});
+
+const registry = createTypeRegistry();
+/**
+ * Instructs the template engine to apply behavior to a node.
+ * @public
+ */
+const HTMLDirective = Object.freeze({
+    /**
+     * Gets the directive definition associated with the instance.
+     * @param instance - The directive instance to retrieve the definition for.
+     */
+    getForInstance: registry.getForInstance,
+    /**
+     * Gets the directive definition associated with the specified type.
+     * @param type - The directive type to retrieve the definition for.
+     */
+    getByType: registry.getByType,
+    /**
+     * Defines an HTMLDirective based on the options.
+     * @param type - The type to define as a directive.
+     * @param options - Options that specify the directive's application.
+     */
+    define(type, options) {
+        options = options || {};
+        options.type = type;
+        registry.register(options);
+        return type;
+    },
+});
+/**
+ * Decorator: Defines an HTMLDirective.
+ * @param options - Provides options that specify the directive's application.
+ * @public
+ */
+function htmlDirective(options) {
+    /* eslint-disable-next-line @typescript-eslint/explicit-function-return-type */
+    return function (type) {
+        HTMLDirective.define(type, options);
+    };
+}
+/**
+ * The type of HTML aspect to target.
+ * @public
+ */
+const Aspect = Object.freeze({
+    /**
+     * Not aspected.
+     */
+    none: 0,
+    /**
+     * An attribute.
+     */
+    attribute: 1,
+    /**
+     * A boolean attribute.
+     */
+    booleanAttribute: 2,
+    /**
+     * A property.
+     */
+    property: 3,
+    /**
+     * Content
+     */
+    content: 4,
+    /**
+     * A token list.
+     */
+    tokenList: 5,
+    /**
+     * An event.
+     */
+    event: 6,
+    /**
+     *
+     * @param directive - The directive to assign the aspect to.
+     * @param value - The value to base the aspect determination on.
+     */
+    assign(directive, value) {
+        directive.sourceAspect = value;
+        if (!value) {
+            return;
+        }
+        switch (value[0]) {
+            case ":":
+                directive.targetAspect = value.substring(1);
+                switch (directive.targetAspect) {
+                    case "innerHTML":
+                        directive.aspectType = Aspect.property;
+                        break;
+                    case "classList":
+                        directive.aspectType = Aspect.tokenList;
+                        break;
+                    default:
+                        directive.aspectType = Aspect.property;
+                        break;
+                }
+                break;
+            case "?":
+                directive.targetAspect = value.substring(1);
+                directive.aspectType = Aspect.booleanAttribute;
+                break;
+            case "@":
+                directive.targetAspect = value.substring(1);
+                directive.aspectType = Aspect.event;
+                break;
+            default:
+                if (value === "class") {
+                    directive.targetAspect = "className";
+                    directive.aspectType = Aspect.property;
+                }
+                else {
+                    directive.targetAspect = value;
+                    directive.aspectType = Aspect.attribute;
+                }
+                break;
+        }
+    },
+});
+/**
+ * A base class used for attribute directives that don't need internal state.
+ * @public
+ */
+class StatelessAttachedAttributeDirective {
+    /**
+     * Creates an instance of RefDirective.
+     * @param options - The options to use in configuring the directive.
+     */
+    constructor(options) {
+        this.options = options;
+    }
+    /**
+     * Creates a behavior.
+     * @param targets - The targets available for behaviors to be attached to.
+     */
+    createBehavior(targets) {
+        return this;
+    }
+    /**
+     * Creates a placeholder string based on the directive's index within the template.
+     * @param index - The index of the directive within the template.
+     * @remarks
+     * Creates a custom attribute placeholder.
+     */
+    createHTML(add) {
+        return Markup.attribute(add(this));
+    }
+}
+
+const createInnerHTMLBinding = globalThis.TrustedHTML
+    ? (binding) => (s, c) => {
+        const value = binding(s, c);
+        if (value instanceof TrustedHTML) {
+            return value;
+        }
+        throw FAST.error(1202 /* Message.bindingInnerHTMLRequiresTrustedTypes */);
+    }
+    : (binding) => binding;
+/**
+ * Describes how aspects of an HTML element will be affected by bindings.
+ * @public
+ */
+const BindingMode = Object.freeze({
+    /**
+     * Creates a binding mode based on the supplied behavior types.
+     * @param UpdateType - The base behavior type used to update aspects.
+     * @param EventType - The base behavior type used to respond to events.
+     * @returns A new binding mode.
+     */
+    define(UpdateType, EventType = EventBinding) {
+        return Object.freeze({
+            [1]: d => new UpdateType(d, DOM.setAttribute),
+            [2]: d => new UpdateType(d, DOM.setBooleanAttribute),
+            [3]: d => new UpdateType(d, (t, a, v) => (t[a] = v)),
+            [4]: d => new (createContentBinding(UpdateType))(d, updateContentTarget),
+            [5]: d => new UpdateType(d, updateTokenListTarget),
+            [6]: d => new EventType(d),
+        });
+    },
+});
+/**
+ * Describes the configuration for a binding expression.
+ * @public
+ */
+const BindingConfig = Object.freeze({
+    /**
+     * Creates a binding configuration based on the provided mode and options.
+     * @param mode - The mode to use for the configuration.
+     * @param defaultOptions - The default options to use for the configuration.
+     * @returns A new binding configuration.
+     */
+    define(mode, defaultOptions) {
+        const config = (options) => {
+            return {
+                mode: config.mode,
+                options: Object.assign({}, defaultOptions, options),
+            };
+        };
+        config.options = defaultOptions;
+        config.mode = mode;
+        return config;
+    },
+});
+/**
+ * A base binding behavior for DOM updates.
+ * @public
+ */
+class UpdateBinding {
+    /**
+     * Creates an instance of UpdateBinding.
+     * @param directive - The directive that has the configuration for this behavior.
+     * @param updateTarget - The function used to update the target with the latest value.
+     */
+    constructor(directive, updateTarget) {
+        this.directive = directive;
+        this.updateTarget = updateTarget;
+    }
+    /**
+     * Bind this behavior to the source.
+     * @param source - The source to bind to.
+     * @param context - The execution context that the binding is operating within.
+     * @param targets - The targets that behaviors in a view can attach to.
+     */
+    bind(source, context, targets) { }
+    /**
+     * Unbinds this behavior from the source.
+     * @param source - The source to unbind from.
+     * @param context - The execution context that the binding is operating within.
+     * @param targets - The targets that behaviors in a view can attach to.
+     */
+    unbind(source, context, targets) { }
+    /**
+     * Creates a behavior.
+     * @param targets - The targets available for behaviors to be attached to.
+     */
+    createBehavior(targets) {
+        return this;
+    }
+}
+function createContentBinding(Type) {
+    return class extends Type {
+        unbind(source, context, targets) {
+            super.unbind(source, context, targets);
+            const target = targets[this.directive.nodeId];
+            const view = target.$fastView;
+            if (view !== void 0 && view.isComposed) {
+                view.unbind();
+                view.needsBindOnly = true;
+            }
+        }
+    };
+}
+function updateContentTarget(target, aspect, value, source, context) {
+    // 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) {
+        target.textContent = "";
+        let view = 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 (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(source, context);
+            view.insertBefore(target);
+            target.$fastView = view;
+            target.$fastTemplate = value;
+        }
+        else if (view.needsBindOnly) {
+            view.needsBindOnly = false;
+            view.bind(source, context);
+        }
+    }
+    else {
+        const view = 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();
+            }
+        }
+        target.textContent = value;
+    }
+}
+function updateTokenListTarget(target, aspect, value) {
+    var _a;
+    const directive = this.directive;
+    const lookup = `${directive.id}-t`;
+    const state = (_a = target[lookup]) !== null && _a !== void 0 ? _a : (target[lookup] = { c: 0, v: Object.create(null) });
+    const versions = state.v;
+    let currentVersion = state.c;
+    const tokenList = target[aspect];
+    // 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;
+            }
+            versions[currentName] = currentVersion;
+            tokenList.add(currentName);
+        }
+    }
+    state.v = currentVersion + 1;
+    // If this is the first call to add classes, there's no need to remove old ones.
+    if (currentVersion === 0) {
+        return;
+    }
+    // Remove classes from the previous version.
+    currentVersion -= 1;
+    for (const name in versions) {
+        if (versions[name] === currentVersion) {
+            tokenList.remove(name);
+        }
+    }
+}
+/**
+ * A binding behavior for one-time bindings.
+ * @public
+ */
+class OneTimeBinding extends UpdateBinding {
+    /**
+     * Bind this behavior to the source.
+     * @param source - The source to bind to.
+     * @param context - The execution context that the binding is operating within.
+     * @param targets - The targets that behaviors in a view can attach to.
+     */
+    bind(source, context, targets) {
+        const directive = this.directive;
+        this.updateTarget(targets[directive.nodeId], directive.targetAspect, directive.binding(source, context), source, context);
+    }
+}
+const signals = Object.create(null);
+/**
+ * A binding behavior for signal bindings.
+ * @public
+ */
+class SignalBinding extends UpdateBinding {
+    constructor() {
+        super(...arguments);
+        this.handlerProperty = `${this.directive.id}-h`;
+    }
+    /**
+     * Bind this behavior to the source.
+     * @param source - The source to bind to.
+     * @param context - The execution context that the binding is operating within.
+     * @param targets - The targets that behaviors in a view can attach to.
+     */
+    bind(source, context, targets) {
+        const directive = this.directive;
+        const target = targets[directive.nodeId];
+        const signal = this.getSignal(source, context);
+        const handler = (target[this.handlerProperty] = () => {
+            this.updateTarget(target, directive.targetAspect, directive.binding(source, context), source, context);
+        });
+        handler();
+        const found = signals[signal];
+        if (found) {
+            Array.isArray(found)
+                ? found.push(handler)
+                : (signals[signal] = [found, handler]);
+        }
+        else {
+            signals[signal] = handler;
+        }
+    }
+    /**
+     * Unbinds this behavior from the source.
+     * @param source - The source to unbind from.
+     * @param context - The execution context that the binding is operating within.
+     * @param targets - The targets that behaviors in a view can attach to.
+     */
+    unbind(source, context, targets) {
+        const signal = this.getSignal(source, context);
+        const found = signals[signal];
+        if (found && Array.isArray(found)) {
+            const directive = this.directive;
+            const target = targets[directive.nodeId];
+            const handler = target[this.handlerProperty];
+            const index = found.indexOf(handler);
+            if (index !== -1) {
+                found.splice(index, 1);
+            }
+        }
+        else {
+            signals[signal] = void 0;
+        }
+    }
+    getSignal(source, context) {
+        const options = this.directive.options;
+        return isString(options) ? options : options(source, context);
+    }
+    /**
+     * Sends the specified signal to signaled bindings.
+     * @param signal - The signal to send.
+     * @public
+     */
+    static send(signal) {
+        const found = signals[signal];
+        if (found) {
+            Array.isArray(found) ? found.forEach(x => x()) : found();
+        }
+    }
+}
+/**
+ * A binding behavior for bindings that change.
+ * @public
+ */
+class ChangeBinding extends UpdateBinding {
+    /**
+     * Creates an instance of ChangeBinding.
+     * @param directive - The directive that has the configuration for this behavior.
+     * @param updateTarget - The function used to update the target with the latest value.
+     */
+    constructor(directive, updateTarget) {
+        super(directive, updateTarget);
+        this.isBindingVolatile = Observable.isVolatileBinding(directive.binding);
+        this.observerProperty = `${directive.id}-o`;
+    }
+    /**
+     * Returns the binding observer used to update the node.
+     * @param target - The target node.
+     * @returns A BindingObserver.
+     */
+    getObserver(target) {
+        var _a;
+        return ((_a = target[this.observerProperty]) !== null && _a !== void 0 ? _a : (target[this.observerProperty] = Observable.binding(this.directive.binding, this, this.isBindingVolatile)));
+    }
+    /**
+     * Bind this behavior to the source.
+     * @param source - The source to bind to.
+     * @param context - The execution context that the binding is operating within.
+     * @param targets - The targets that behaviors in a view can attach to.
+     */
+    bind(source, context, targets) {
+        const directive = this.directive;
+        const target = targets[directive.nodeId];
+        const observer = this.getObserver(target);
+        observer.target = target;
+        observer.source = source;
+        observer.context = context;
+        this.updateTarget(target, directive.targetAspect, observer.observe(source, context), source, context);
+    }
+    /**
+     * Unbinds this behavior from the source.
+     * @param source - The source to unbind from.
+     * @param context - The execution context that the binding is operating within.
+     * @param targets - The targets that behaviors in a view can attach to.
+     */
+    unbind(source, context, targets) {
+        const target = targets[this.directive.nodeId];
+        const observer = this.getObserver(target);
+        observer.dispose();
+        observer.target = null;
+        observer.source = null;
+        observer.context = null;
+    }
+    /** @internal */
+    handleChange(binding, observer) {
+        const target = observer.target;
+        const source = observer.source;
+        const context = observer.context;
+        this.updateTarget(target, this.directive.targetAspect, observer.observe(source, context), source, context);
+    }
+}
+/**
+ * A binding behavior for handling events.
+ * @public
+ */
+class EventBinding {
+    /**
+     * Creates an instance of EventBinding.
+     * @param directive - The directive that has the configuration for this behavior.
+     */
+    constructor(directive) {
+        this.directive = directive;
+        this.sourceProperty = `${directive.id}-s`;
+        this.contextProperty = `${directive.id}-c`;
+    }
+    /**
+     * Bind this behavior to the source.
+     * @param source - The source to bind to.
+     * @param context - The execution context that the binding is operating within.
+     * @param targets - The targets that behaviors in a view can attach to.
+     */
+    bind(source, context, targets) {
+        const directive = this.directive;
+        const target = targets[directive.nodeId];
+        target[this.sourceProperty] = source;
+        target[this.contextProperty] = context;
+        target.addEventListener(directive.targetAspect, this, directive.options);
+    }
+    /**
+     * Unbinds this behavior from the source.
+     * @param source - The source to unbind from.
+     * @param context - The execution context that the binding is operating within.
+     * @param targets - The targets that behaviors in a view can attach to.
+     */
+    unbind(source, context, targets) {
+        const directive = this.directive;
+        const target = targets[directive.nodeId];
+        target[this.sourceProperty] = target[this.contextProperty] = null;
+        target.removeEventListener(directive.targetAspect, this, directive.options);
+    }
+    /**
+     * Creates a behavior.
+     * @param targets - The targets available for behaviors to be attached to.
+     */
+    createBehavior(targets) {
+        return this;
+    }
+    /**
+     * @internal
+     */
+    handleEvent(event) {
+        const target = event.currentTarget;
+        ExecutionContext.setEvent(event);
+        const result = this.directive.binding(target[this.sourceProperty], target[this.contextProperty]);
+        ExecutionContext.setEvent(null);
+        if (result !== true) {
+            event.preventDefault();
+        }
+    }
+}
+let twoWaySettings = {
+    determineChangeEvent() {
+        return "change";
+    },
+};
+/**
+ * A binding behavior for bindings that update in two directions.
+ * @public
+ */
+class TwoWayBinding extends ChangeBinding {
+    /**
+     * Bind this behavior to the source.
+     * @param source - The source to bind to.
+     * @param context - The execution context that the binding is operating within.
+     * @param targets - The targets that behaviors in a view can attach to.
+     */
+    bind(source, context, targets) {
+        var _a;
+        super.bind(source, context, targets);
+        const directive = this.directive;
+        const target = targets[directive.nodeId];
+        if (!this.changeEvent) {
+            this.changeEvent =
+                (_a = directive.options.changeEvent) !== null && _a !== void 0 ? _a : twoWaySettings.determineChangeEvent(directive, target);
+        }
+        target.addEventListener(this.changeEvent, this);
+    }
+    /**
+     * Unbinds this behavior from the source.
+     * @param source - The source to unbind from.
+     * @param context - The execution context that the binding is operating within.
+     * @param targets - The targets that behaviors in a view can attach to.
+     */
+    unbind(source, context, targets) {
+        super.unbind(source, context, targets);
+        targets[this.directive.nodeId].removeEventListener(this.changeEvent, this);
+    }
+    /** @internal */
+    handleEvent(event) {
+        const directive = this.directive;
+        const target = event.currentTarget;
+        let value;
+        switch (directive.aspectType) {
+            case 1:
+                value = target.getAttribute(directive.targetAspect);
+                break;
+            case 2:
+                value = target.hasAttribute(directive.targetAspect);
+                break;
+            case 4:
+                value = target.innerText;
+                break;
+            default:
+                value = target[directive.targetAspect];
+                break;
+        }
+        const observer = this.getObserver(target);
+        const last = observer.last; // using internal API!!!
+        last.propertySource[last.propertyName] = directive.options.fromView(value);
+    }
+    /**
+     * Configures two-way binding.
+     * @param settings - The settings to use for the two-way binding system.
+     */
+    static configure(settings) {
+        twoWaySettings = settings;
+    }
+}
+/**
+ * The default onChange binding configuration.
+ * @public
+ */
+const onChange = BindingConfig.define(BindingMode.define(ChangeBinding), {});
+/**
+ * The default twoWay binding configuration.
+ * @public
+ */
+const twoWay = BindingConfig.define(BindingMode.define(TwoWayBinding), {
+    fromView: v => v,
+});
+/**
+ * The default onTime binding configuration.
+ * @public
+ */
+const oneTime = BindingConfig.define(BindingMode.define(OneTimeBinding), {
+    once: true,
+});
+const signalMode = BindingMode.define(SignalBinding);
+/**
+ * Creates a signal binding configuration with the supplied options.
+ * @param options - The signal name or a binding to use to retrieve the signal name.
+ * @returns A binding configuration.
+ * @public
+ */
+const signal = (options) => {
+    return { mode: signalMode, options };
+};
+/**
+ * A directive that applies bindings.
+ * @public
+ */
+class HTMLBindingDirective {
+    /**
+     * Creates an instance of HTMLBindingDirective.
+     * @param binding - The binding to apply.
+     * @param mode - The binding mode to use when applying the binding.
+     * @param options - The options to configure the binding with.
+     */
+    constructor(binding, mode, options) {
+        this.binding = binding;
+        this.mode = mode;
+        this.options = options;
+        this.factory = null;
+        /**
+         * The type of aspect to target.
+         */
+        this.aspectType = Aspect.content;
+    }
+    /**
+     * Creates HTML to be used within a template.
+     * @param add - Can be used to add  behavior factories to a template.
+     */
+    createHTML(add) {
+        return Markup.interpolation(add(this));
+    }
+    /**
+     * Creates a behavior.
+     * @param targets - The targets available for behaviors to be attached to.
+     */
+    createBehavior(targets) {
+        if (this.factory == null) {
+            if (this.targetAspect === "innerHTML") {
+                this.binding = createInnerHTMLBinding(this.binding);
+            }
+            this.factory = this.mode[this.aspectType](this);
+        }
+        return this.factory.createBehavior(targets);
+    }
+}
+HTMLDirective.define(HTMLBindingDirective, { aspected: true });
+/**
+ * Creates a binding directive with the specified configuration.
+ * @param binding - The binding expression.
+ * @param config - The binding configuration.
+ * @returns A binding directive.
+ * @public
+ */
+function bind(binding, config = onChange) {
+    if (!("mode" in config)) {
+        config = onChange(config);
+    }
+    return new HTMLBindingDirective(binding, config.mode, config.options);
+}
+
+function removeNodeSequence(firstNode, lastNode) {
+    const parent = firstNode.parentNode;
+    let current = firstNode;
+    let next;
+    while (current !== lastNode) {
+        next = current.nextSibling;
+        parent.removeChild(current);
+        current = next;
+    }
+    parent.removeChild(lastNode);
+}
+/**
+ * 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, factories, targets) {
+        this.fragment = fragment;
+        this.factories = factories;
+        this.targets = targets;
+        this.behaviors = null;
+        /**
+         * 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() {
+        removeNodeSequence(this.firstChild, this.lastChild);
+        this.unbind();
+    }
+    /**
+     * 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) {
+        let behaviors = this.behaviors;
+        const oldSource = this.source;
+        if (oldSource === source) {
+            return;
+        }
+        this.source = source;
+        this.context = context;
+        const targets = this.targets;
+        if (oldSource !== null) {
+            for (let i = 0, ii = behaviors.length; i < ii; ++i) {
+                const current = behaviors[i];
+                current.unbind(oldSource, context, targets);
+                current.bind(source, context, targets);
+            }
+        }
+        else if (behaviors === null) {
+            this.behaviors = behaviors = new Array(this.factories.length);
+            const factories = this.factories;
+            for (let i = 0, ii = factories.length; i < ii; ++i) {
+                const behavior = factories[i].createBehavior(targets);
+                behavior.bind(source, context, targets);
+                behaviors[i] = behavior;
+            }
+        }
+        else {
+            for (let i = 0, ii = behaviors.length; i < ii; ++i) {
+                behaviors[i].bind(source, context, targets);
+            }
+        }
+    }
+    /**
+     * Unbinds a view's behaviors from its binding source.
+     */
+    unbind() {
+        const oldSource = this.source;
+        if (oldSource === null) {
+            return;
+        }
+        const targets = this.targets;
+        const context = this.context;
+        const behaviors = this.behaviors;
+        for (let i = 0, ii = behaviors.length; i < ii; ++i) {
+            behaviors[i].unbind(oldSource, context, targets);
+        }
+        this.source = null;
+        this.context = 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;
+        }
+        removeNodeSequence(views[0].firstChild, views[views.length - 1].lastChild);
+        for (let i = 0, ii = views.length; i < ii; ++i) {
+            views[i].unbind();
+        }
+    }
+}
+
+const targetIdFrom = (parentId, nodeIndex) => `${parentId}.${nodeIndex}`;
+const descriptorCache = {};
+// used to prevent creating lots of objects just to track node and index while compiling
+const next = {
+    index: 0,
+    node: null,
+};
+class CompilationContext {
+    constructor(fragment, directives) {
+        this.fragment = fragment;
+        this.directives = directives;
+        this.proto = null;
+        this.nodeIds = new Set();
+        this.descriptors = {};
+        this.factories = [];
+    }
+    addFactory(factory, parentId, nodeId, targetIndex) {
+        if (!this.nodeIds.has(nodeId)) {
+            this.nodeIds.add(nodeId);
+            this.addTargetDescriptor(parentId, nodeId, targetIndex);
+        }
+        factory.nodeId = nodeId;
+        this.factories.push(factory);
+    }
+    freeze() {
+        this.proto = Object.create(null, this.descriptors);
+        return this;
+    }
+    addTargetDescriptor(parentId, targetId, targetIndex) {
+        const descriptors = this.descriptors;
+        if (targetId === "r" || // root
+            targetId === "h" || // host
+            descriptors[targetId]) {
+            return;
+        }
+        if (!descriptors[parentId]) {
+            const index = parentId.lastIndexOf(".");
+            const grandparentId = parentId.substring(0, index);
+            const childIndex = parseInt(parentId.substring(index + 1));
+            this.addTargetDescriptor(grandparentId, parentId, childIndex);
+        }
+        let descriptor = descriptorCache[targetId];
+        if (!descriptor) {
+            const field = `_${targetId}`;
+            descriptorCache[targetId] = descriptor = {
+                get() {
+                    var _a;
+                    return ((_a = this[field]) !== null && _a !== void 0 ? _a : (this[field] = this[parentId].childNodes[targetIndex]));
+                },
+            };
+        }
+        descriptors[targetId] = descriptor;
+    }
+    createView(hostBindingTarget) {
+        const fragment = this.fragment.cloneNode(true);
+        const targets = Object.create(this.proto);
+        targets.r = fragment;
+        targets.h = hostBindingTarget !== null && hostBindingTarget !== void 0 ? hostBindingTarget : fragment;
+        for (const id of this.nodeIds) {
+            targets[id]; // trigger locator
+        }
+        return new HTMLView(fragment, this.factories, targets);
+    }
+}
+function compileAttributes(context, parentId, node, nodeId, nodeIndex, includeBasicValues = false) {
+    const attributes = node.attributes;
+    const directives = context.directives;
+    for (let i = 0, ii = attributes.length; i < ii; ++i) {
+        const attr = attributes[i];
+        const attrValue = attr.value;
+        const parseResult = Parser.parse(attrValue, directives);
+        let result = null;
+        if (parseResult === null) {
+            if (includeBasicValues) {
+                result = bind(() => attrValue, oneTime);
+                Aspect.assign(result, attr.name);
+            }
+        }
+        else {
+            /* eslint-disable-next-line @typescript-eslint/no-use-before-define */
+            result = Compiler.aggregate(parseResult);
+        }
+        if (result !== null) {
+            node.removeAttributeNode(attr);
+            i--;
+            ii--;
+            context.addFactory(result, parentId, nodeId, nodeIndex);
+        }
+    }
+}
+function compileContent(context, node, parentId, nodeId, nodeIndex) {
+    const parseResult = Parser.parse(node.textContent, context.directives);
+    if (parseResult === null) {
+        next.node = node.nextSibling;
+        next.index = nodeIndex + 1;
+        return next;
+    }
+    let currentNode;
+    let lastNode = (currentNode = node);
+    for (let i = 0, ii = parseResult.length; i < ii; ++i) {
+        const currentPart = parseResult[i];
+        if (i !== 0) {
+            nodeIndex++;
+            nodeId = targetIdFrom(parentId, nodeIndex);
+            currentNode = lastNode.parentNode.insertBefore(document.createTextNode(""), lastNode.nextSibling);
+        }
+        if (isString(currentPart)) {
+            currentNode.textContent = currentPart;
+        }
+        else {
+            currentNode.textContent = " ";
+            context.addFactory(currentPart, parentId, nodeId, nodeIndex);
+        }
+        lastNode = currentNode;
+    }
+    next.index = nodeIndex + 1;
+    next.node = lastNode.nextSibling;
+    return next;
+}
+function compileChildren(context, parent, parentId) {
+    let nodeIndex = 0;
+    let childNode = parent.firstChild;
+    while (childNode) {
+        /* eslint-disable-next-line @typescript-eslint/no-use-before-define */
+        const result = compileNode(context, parentId, childNode, nodeIndex);
+        childNode = result.node;
+        nodeIndex = result.index;
+    }
+}
+function compileNode(context, parentId, node, nodeIndex) {
+    const nodeId = targetIdFrom(parentId, nodeIndex);
+    switch (node.nodeType) {
+        case 1: // element node
+            compileAttributes(context, parentId, node, nodeId, nodeIndex);
+            compileChildren(context, node, nodeId);
+            break;
+        case 3: // text node
+            return compileContent(context, node, parentId, nodeId, nodeIndex);
+        case 8: // comment
+            const parts = Parser.parse(node.data, context.directives);
+            if (parts !== null) {
+                context.addFactory(
+                /* eslint-disable-next-line @typescript-eslint/no-use-before-define */
+                Compiler.aggregate(parts), parentId, nodeId, nodeIndex);
+            }
+            break;
+    }
+    next.index = nodeIndex + 1;
+    next.node = node.nextSibling;
+    return next;
+}
+function isMarker(node, directives) {
+    return (node &&
+        node.nodeType == 8 &&
+        Parser.parse(node.data, directives) !== null);
+}
+const templateTag = "TEMPLATE";
+const policyOptions = { createHTML: html => html };
+let htmlPolicy = globalThis.trustedTypes
+    ? globalThis.trustedTypes.createPolicy("fast-html", policyOptions)
+    : policyOptions;
+const fastHTMLPolicy = htmlPolicy;
+/**
+ * Common APIs related to compilation.
+ * @public
+ */
+const Compiler = {
+    /**
+     * Sets the HTML trusted types policy used by the compiler.
+     * @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 FAST.error(1201 /* Message.onlySetHTMLPolicyOnce */);
+        }
+        htmlPolicy = policy;
+    },
+    /**
+     * Compiles a template and associated directives into a compilation
+     * result which can be used to create views.
+     * @param html - The html string or template element to compile.
+     * @param 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
+     */
+    compile(html, directives) {
+        let template;
+        if (isString(html)) {
+            template = document.createElement(templateTag);
+            template.innerHTML = htmlPolicy.createHTML(html);
+            const fec = template.content.firstElementChild;
+            if (fec !== null && fec.tagName === templateTag) {
+                template = fec;
+            }
+        }
+        else {
+            template = html;
+        }
+        // https://bugs.chromium.org/p/chromium/issues/detail?id=1111864
+        const fragment = document.adoptNode(template.content);
+        const context = new CompilationContext(fragment, directives);
+        compileAttributes(context, "", template, /* host */ "h", 0, true);
+        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.
+        isMarker(fragment.firstChild, directives) ||
+            // 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 && Object.keys(directives).length > 0)) {
+            fragment.insertBefore(document.createComment(""), fragment.firstChild);
+        }
+        compileChildren(context, fragment, /* root */ "r");
+        next.node = null; // prevent leaks
+        return context.freeze();
+    },
+    /**
+     * Sets the default compilation strategy that will be used by the ViewTemplate whenever
+     * it needs to compile a view preprocessed with the html template function.
+     * @param strategy - The compilation strategy to use when compiling templates.
+     */
+    setDefaultStrategy(strategy) {
+        this.compile = strategy;
+    },
+    /**
+     * Aggregates an array of strings and directives into a single directive.
+     * @param parts - A heterogeneous array of static strings interspersed with
+     * directives.
+     * @returns A single inline directive that aggregates the behavior of all the parts.
+     */
+    aggregate(parts) {
+        if (parts.length === 1) {
+            return parts[0];
+        }
+        let sourceAspect;
+        const partCount = parts.length;
+        const finalParts = parts.map((x) => {
+            if (isString(x)) {
+                return () => x;
+            }
+            sourceAspect = x.sourceAspect || sourceAspect;
+            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 = bind(binding);
+        Aspect.assign(directive, sourceAspect);
+        return directive;
+    },
+};
+
+/**
+ * A template capable of creating HTMLView instances or rendering directly to DOM.
+ * @public
+ */
+class ViewTemplate {
+    /**
+     * Creates an instance of ViewTemplate.
+     * @param html - The html representing what this template will instantiate, including placeholders for directives.
+     * @param factories - The directives that will be connected to placeholders in the html.
+     */
+    constructor(html, factories) {
+        this.result = null;
+        this.html = html;
+        this.factories = factories;
+    }
+    /**
+     * Creates an HTMLView instance based on this template definition.
+     * @param hostBindingTarget - The element that host behaviors will be bound to.
+     */
+    create(hostBindingTarget) {
+        if (this.result === null) {
+            this.result = Compiler.compile(this.html, this.factories);
+        }
+        return this.result.createView(hostBindingTarget);
+    }
+    /**
+     * 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, context) {
+        const view = this.create(hostBindingTarget !== null && hostBindingTarget !== void 0 ? hostBindingTarget : host);
+        view.bind(source, context !== null && context !== void 0 ? context : ExecutionContext.default);
+        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"'`<>=]*|"[^"]*|'[^']*))$/;
+function createAspectedHTML(value, prevString, add) {
+    const match = lastAttributeNameRegex.exec(prevString);
+    if (match !== null) {
+        Aspect.assign(value, match[2]);
+    }
+    return value.createHTML(add);
+}
+/**
+ * Transforms a template literal string into a 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) {
+    let html = "";
+    const factories = Object.create(null);
+    const add = (factory) => {
+        var _a;
+        const id = (_a = factory.id) !== null && _a !== void 0 ? _a : (factory.id = nextId());
+        factories[id] = factory;
+        return id;
+    };
+    for (let i = 0, ii = strings.length - 1; i < ii; ++i) {
+        const currentString = strings[i];
+        const currentValue = values[i];
+        let definition;
+        html += currentString;
+        if (isFunction(currentValue)) {
+            html += createAspectedHTML(bind(currentValue), currentString, add);
+        }
+        else if (isString(currentValue)) {
+            const match = lastAttributeNameRegex.exec(currentString);
+            if (match !== null) {
+                const directive = bind(() => currentValue, oneTime);
+                Aspect.assign(directive, match[2]);
+                html += directive.createHTML(add);
+            }
+            else {
+                html += currentValue;
+            }
+        }
+        else if ((definition = HTMLDirective.getForInstance(currentValue)) === void 0) {
+            html += createAspectedHTML(bind(() => currentValue, oneTime), currentString, add);
+        }
+        else {
+            if (definition.aspected) {
+                html += createAspectedHTML(currentValue, currentString, add);
+            }
+            else {
+                html += currentValue.createHTML(add);
+            }
+        }
+    }
+    return new ViewTemplate(html + strings[strings.length - 1], factories);
+}
+/**
+ * Transforms a template literal string into a ChildViewTemplate.
+ * @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
+ */
+const child = html;
+/**
+ * Transforms a template literal string into an ItemViewTemplate.
+ * @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
+ */
+const item = html;
+
+/**
+ * The runtime behavior for template references.
+ * @public
+ */
+class RefDirective extends StatelessAttachedAttributeDirective {
+    /**
+     * Bind this behavior to the source.
+     * @param source - The source to bind to.
+     * @param context - The execution context that the binding is operating within.
+     * @param targets - The targets that behaviors in a view can attach to.
+     */
+    bind(source, context, targets) {
+        source[this.options] = targets[this.nodeId];
+    }
+    /**
+     * Unbinds this behavior from the source.
+     * @param source - The source to unbind from.
+     */
+    /* eslint-disable-next-line @typescript-eslint/no-empty-function */
+    unbind() { }
+}
+HTMLDirective.define(RefDirective);
+/**
+ * A directive that observes the updates a property with a reference to the element.
+ * @param propertyName - The name of the property to assign the reference to.
+ * @public
+ */
+const ref = (propertyName) => new RefDirective(propertyName);
+
+/**
+ * A directive that enables basic conditional rendering in a template.
+ * @param binding - The condition to test for rendering.
+ * @param templateOrTemplateBinding - The template or a binding that gets
+ * the template to render when the condition is true.
+ * @public
+ */
+function when(binding, templateOrTemplateBinding) {
+    const getTemplate = isFunction(templateOrTemplateBinding)
+        ? templateOrTemplateBinding
+        : () => templateOrTemplateBinding;
+    return (source, context) => binding(source, context) ? getTemplate(source, context) : null;
+}
+
+const defaultRepeatOptions = Object.freeze({
+    positioning: false,
+    recycle: true,
+});
+function bindWithoutPositioning(view, items, index, context) {
+    view.bind(items[index], context);
+}
+function bindWithPositioning(view, items, index, context) {
+    view.bind(items[index], context.createItemContext(index, items.length));
+}
+/**
+ * A behavior that renders a template for each item in an array.
+ * @public
+ */
+class RepeatBehavior {
+    /**
+     * Creates an instance of RepeatBehavior.
+     * @param location - The location in the DOM to render the repeat.
+     * @param itemsBinding - The array to render.
+     * @param isItemsBindingVolatile - Indicates whether the items binding has volatile dependencies.
+     * @param templateBinding - The template to render for each item.
+     * @param isTemplateBindingVolatile - Indicates whether the template binding has volatile dependencies.
+     * @param options - Options used to turn on special repeat features.
+     */
+    constructor(location, itemsBinding, isItemsBindingVolatile, templateBinding, isTemplateBindingVolatile, options) {
+        this.location = location;
+        this.itemsBinding = itemsBinding;
+        this.templateBinding = templateBinding;
+        this.options = options;
+        this.source = null;
+        this.views = [];
+        this.items = null;
+        this.itemsObserver = null;
+        this.context = void 0;
+        this.childContext = void 0;
+        this.bindView = bindWithoutPositioning;
+        this.itemsBindingObserver = Observable.binding(itemsBinding, this, isItemsBindingVolatile);
+        this.templateBindingObserver = Observable.binding(templateBinding, this, isTemplateBindingVolatile);
+        if (options.positioning) {
+            this.bindView = bindWithPositioning;
+        }
+    }
+    /**
+     * Bind this behavior to the source.
+     * @param source - The source to bind to.
+     * @param context - The execution context that the binding is operating within.
+     */
+    bind(source, context) {
+        this.source = source;
+        this.context = context;
+        this.childContext = context.createChildContext(source);
+        this.items = this.itemsBindingObserver.observe(source, this.context);
+        this.template = this.templateBindingObserver.observe(source, this.context);
+        this.observeItems(true);
+        this.refreshAllViews();
+    }
+    /**
+     * Unbinds this behavior from the source.
+     * @param source - The source to unbind from.
+     */
+    unbind() {
+        this.source = null;
+        this.items = null;
+        if (this.itemsObserver !== null) {
+            this.itemsObserver.unsubscribe(this);
+        }
+        this.unbindAllViews();
+        this.itemsBindingObserver.dispose();
+        this.templateBindingObserver.dispose();
+    }
+    /**
+     * Handles changes in the array, its items, and the repeat template.
+     * @param source - The source of the change.
+     * @param args - The details about what was changed.
+     */
+    handleChange(source, args) {
+        if (source === this.itemsBinding) {
+            this.items = this.itemsBindingObserver.observe(this.source, this.context);
+            this.observeItems();
+            this.refreshAllViews();
+        }
+        else if (source === this.templateBinding) {
+            this.template = this.templateBindingObserver.observe(this.source, this.context);
+            this.refreshAllViews(true);
+        }
+        else if (args[0].reset) {
+            this.refreshAllViews();
+        }
+        else {
+            this.updateViews(args);
+        }
+    }
+    observeItems(force = false) {
+        if (!this.items) {
+            this.items = emptyArray;
+            return;
+        }
+        const oldObserver = this.itemsObserver;
+        const newObserver = (this.itemsObserver = Observable.getNotifier(this.items));
+        const hasNewObserver = oldObserver !== newObserver;
+        if (hasNewObserver && oldObserver !== null) {
+            oldObserver.unsubscribe(this);
+        }
+        if (hasNewObserver || force) {
+            newObserver.subscribe(this);
+        }
+    }
+    updateViews(splices) {
+        const views = this.views;
+        const childContext = this.childContext;
+        const totalRemoved = [];
+        const bindView = this.bindView;
+        let removeDelta = 0;
+        for (let i = 0, ii = splices.length; i < ii; ++i) {
+            const splice = splices[i];
+            const removed = splice.removed;
+            totalRemoved.push(...views.splice(splice.index + removeDelta, removed.length));
+            removeDelta -= splice.addedCount;
+        }
+        const items = this.items;
+        const template = this.template;
+        for (let i = 0, ii = splices.length; i < ii; ++i) {
+            const splice = splices[i];
+            let addIndex = splice.index;
+            const end = addIndex + splice.addedCount;
+            for (; addIndex < end; ++addIndex) {
+                const neighbor = views[addIndex];
+                const location = neighbor ? neighbor.firstChild : this.location;
+                const view = this.options.recycle && totalRemoved.length > 0
+                    ? totalRemoved.shift()
+                    : template.create();
+                views.splice(addIndex, 0, view);
+                bindView(view, items, addIndex, childContext);
+                view.insertBefore(location);
+            }
+        }
+        for (let i = 0, ii = totalRemoved.length; i < ii; ++i) {
+            totalRemoved[i].dispose();
+        }
+        if (this.options.positioning) {
+            for (let i = 0, ii = views.length; i < ii; ++i) {
+                views[i].context.updatePosition(i, ii);
+            }
+        }
+    }
+    refreshAllViews(templateChanged = false) {
+        const items = this.items;
+        const template = this.template;
+        const location = this.location;
+        const bindView = this.bindView;
+        const childContext = this.childContext;
+        let itemsLength = items.length;
+        let views = this.views;
+        let viewsLength = views.length;
+        if (itemsLength === 0 || templateChanged) {
+            // all views need to be removed
+            HTMLView.disposeContiguousBatch(views);
+            viewsLength = 0;
+        }
+        if (viewsLength === 0) {
+            // all views need to be created
+            this.views = views = new Array(itemsLength);
+            for (let i = 0; i < itemsLength; ++i) {
+                const view = template.create();
+                bindView(view, items, i, childContext);
+                views[i] = view;
+                view.insertBefore(location);
+            }
+        }
+        else {
+            // attempt to reuse existing views with new data
+            let i = 0;
+            for (; i < itemsLength; ++i) {
+                if (i < viewsLength) {
+                    const view = views[i];
+                    bindView(view, items, i, childContext);
+                }
+                else {
+                    const view = template.create();
+                    bindView(view, items, i, childContext);
+                    views.push(view);
+                    view.insertBefore(location);
+                }
+            }
+            const removed = views.splice(i, viewsLength - i);
+            for (i = 0, itemsLength = removed.length; i < itemsLength; ++i) {
+                removed[i].dispose();
+            }
+        }
+    }
+    unbindAllViews() {
+        const views = this.views;
+        for (let i = 0, ii = views.length; i < ii; ++i) {
+            views[i].unbind();
+        }
+    }
+}
+/**
+ * A directive that configures list rendering.
+ * @public
+ */
+class RepeatDirective {
+    /**
+     * Creates an instance of RepeatDirective.
+     * @param itemsBinding - The binding that provides the array to render.
+     * @param templateBinding - The template binding used to obtain a template to render for each item in the array.
+     * @param options - Options used to turn on special repeat features.
+     */
+    constructor(itemsBinding, templateBinding, options) {
+        this.itemsBinding = itemsBinding;
+        this.templateBinding = templateBinding;
+        this.options = options;
+        ArrayObserver.enable();
+        this.isItemsBindingVolatile = Observable.isVolatileBinding(itemsBinding);
+        this.isTemplateBindingVolatile = Observable.isVolatileBinding(templateBinding);
+    }
+    /**
+     * Creates a placeholder string based on the directive's index within the template.
+     * @param index - The index of the directive within the template.
+     */
+    createHTML(add) {
+        return Markup.comment(add(this));
+    }
+    /**
+     * Creates a behavior for the provided target node.
+     * @param target - The node instance to create the behavior for.
+     */
+    createBehavior(targets) {
+        return new RepeatBehavior(targets[this.nodeId], this.itemsBinding, this.isItemsBindingVolatile, this.templateBinding, this.isTemplateBindingVolatile, this.options);
+    }
+}
+HTMLDirective.define(RepeatDirective);
+function repeat(itemsBinding, templateOrTemplateBinding, options = defaultRepeatOptions) {
+    const templateBinding = isFunction(templateOrTemplateBinding)
+        ? templateOrTemplateBinding
+        : () => templateOrTemplateBinding;
+    return new RepeatDirective(itemsBinding, templateBinding, options);
+}
+
+const selectElements = (value) => value.nodeType === 1;
+/**
+ * Creates a function that can be used to filter a Node array, selecting only elements.
+ * @param selector - An optional selector to restrict the filter to.
+ * @public
+ */
+const elements = (selector) => selector
+    ? value => value.nodeType === 1 && value.matches(selector)
+    : selectElements;
+/**
+ * A base class for node observation.
+ * @public
+ * @remarks
+ * Internally used by the SlottedDirective and the ChildrenDirective.
+ */
+class NodeObservationDirective extends StatelessAttachedAttributeDirective {
+    constructor() {
+        super(...arguments);
+        this.sourceProperty = `${this.id}-s`;
+    }
+    /**
+     * Bind this behavior to the source.
+     * @param source - The source to bind to.
+     * @param context - The execution context that the binding is operating within.
+     * @param targets - The targets that behaviors in a view can attach to.
+     */
+    bind(source, context, targets) {
+        const target = targets[this.nodeId];
+        target[this.sourceProperty] = source;
+        this.updateTarget(source, this.computeNodes(target));
+        this.observe(target);
+    }
+    /**
+     * Unbinds this behavior from the source.
+     * @param source - The source to unbind from.
+     * @param context - The execution context that the binding is operating within.
+     * @param targets - The targets that behaviors in a view can attach to.
+     */
+    unbind(source, context, targets) {
+        const target = targets[this.nodeId];
+        this.updateTarget(source, emptyArray);
+        this.disconnect(target);
+        target[this.sourceProperty] = null;
+    }
+    /**
+     * Gets the data source for the target.
+     * @param target - The target to get the source for.
+     * @returns The source.
+     */
+    getSource(target) {
+        return target[this.sourceProperty];
+    }
+    /**
+     * Updates the source property with the computed nodes.
+     * @param source - The source object to assign the nodes property to.
+     * @param value - The nodes to assign to the source object property.
+     */
+    updateTarget(source, value) {
+        source[this.options.property] = value;
+    }
+    /**
+     * Computes the set of nodes that should be assigned to the source property.
+     * @param target - The target to compute the nodes for.
+     * @returns The computed nodes.
+     * @remarks
+     * Applies filters if provided.
+     */
+    computeNodes(target) {
+        let nodes = this.getNodes(target);
+        if ("filter" in this.options) {
+            nodes = nodes.filter(this.options.filter);
+        }
+        return nodes;
+    }
+}
+
+const slotEvent = "slotchange";
+/**
+ * The runtime behavior for slotted node observation.
+ * @public
+ */
+class SlottedDirective extends NodeObservationDirective {
+    /**
+     * Begins observation of the nodes.
+     * @param target - The target to observe.
+     */
+    observe(target) {
+        target.addEventListener(slotEvent, this);
+    }
+    /**
+     * Disconnects observation of the nodes.
+     * @param target - The target to unobserve.
+     */
+    disconnect(target) {
+        target.removeEventListener(slotEvent, this);
+    }
+    /**
+     * Retrieves the raw nodes that should be assigned to the source property.
+     * @param target - The target to get the node to.
+     */
+    getNodes(target) {
+        return target.assignedNodes(this.options);
+    }
+    /** @internal */
+    handleEvent(event) {
+        const target = event.currentTarget;
+        this.updateTarget(this.getSource(target), this.computeNodes(target));
+    }
+}
+HTMLDirective.define(SlottedDirective);
+/**
+ * A directive that observes the `assignedNodes()` of a slot and updates a property
+ * whenever they change.
+ * @param propertyOrOptions - The options used to configure slotted node observation.
+ * @public
+ */
+function slotted(propertyOrOptions) {
+    if (isString(propertyOrOptions)) {
+        propertyOrOptions = { property: propertyOrOptions };
+    }
+    return new SlottedDirective(propertyOrOptions);
+}
+
+/**
+ * The runtime behavior for child node observation.
+ * @public
+ */
+class ChildrenDirective extends NodeObservationDirective {
+    /**
+     * Creates an instance of ChildrenDirective.
+     * @param options - The options to use in configuring the child observation behavior.
+     */
+    constructor(options) {
+        super(options);
+        this.observerProperty = `${this.id}-o`;
+        this.handleEvent = (mutations, observer) => {
+            const target = observer.target;
+            this.updateTarget(this.getSource(target), this.computeNodes(target));
+        };
+        options.childList = true;
+    }
+    /**
+     * Begins observation of the nodes.
+     * @param target - The target to observe.
+     */
+    observe(target) {
+        var _a;
+        const observer = (_a = target[this.observerProperty]) !== null && _a !== void 0 ? _a : (target[this.observerProperty] = new MutationObserver(this.handleEvent));
+        observer.target = target;
+        observer.observe(target, this.options);
+    }
+    /**
+     * Disconnects observation of the nodes.
+     * @param target - The target to unobserve.
+     */
+    disconnect(target) {
+        const observer = target[this.observerProperty];
+        observer.target = null;
+        observer.disconnect();
+    }
+    /**
+     * Retrieves the raw nodes that should be assigned to the source property.
+     * @param target - The target to get the node to.
+     */
+    getNodes(target) {
+        if ("selector" in this.options) {
+            return Array.from(target.querySelectorAll(this.options.selector));
+        }
+        return Array.from(target.childNodes);
+    }
+}
+HTMLDirective.define(ChildrenDirective);
+/**
+ * A directive that observes the `childNodes` of an element and updates a property
+ * whenever they change.
+ * @param propertyOrOptions - The options used to configure child node observation.
+ * @public
+ */
+function children(propertyOrOptions) {
+    if (isString(propertyOrOptions)) {
+        propertyOrOptions = {
+            property: propertyOrOptions,
+        };
+    }
+    return new ChildrenDirective(propertyOrOptions);
+}
+
+const booleanMode = "boolean";
+const reflectMode = "reflect";
+/**
+ * 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) {
+        return value === null ||
+            value === void 0 ||
+            value === "false" ||
+            value === false ||
+            value === 0
+            ? false
+            : true;
+    },
+};
+function toNumber(value) {
+    if (value === null || value === undefined) {
+        return null;
+    }
+    const number = value * 1;
+    return isNaN(number) ? null : number;
+}
+/**
+ * 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) {
+        const output = toNumber(value);
+        return output ? output.toString() : output;
+    },
+    fromView: toNumber,
+};
+/**
+ * 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 = reflectMode, 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 === booleanMode && 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;
+        }
+        Updates.enqueue(() => {
+            guards.add(element);
+            const latestValue = element[this.fieldName];
+            switch (mode) {
+                case reflectMode:
+                    const converter = this.converter;
+                    DOM.setAttribute(element, this.attribute, converter !== void 0 ? converter.toView(latestValue) : latestValue);
+                    break;
+                case booleanMode:
+                    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 (isString(config)) {
+                    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 fastElementRegistry = FAST.getById(4 /* KernelServiceId.elementRegistry */, () => createTypeRegistry());
+/**
+ * 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 (isString(nameOrConfig)) {
+            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)
+                    ? new ElementStyles(nameOrConfig.styles)
+                    : nameOrConfig.styles instanceof ElementStyles
+                        ? nameOrConfig.styles
+                        : new ElementStyles([nameOrConfig.styles]);
+    }
+    /**
+     * Indicates if this element has been defined in at least one registry.
+     */
+    get isDefined() {
+        return !!fastElementRegistry.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 (fastElementRegistry.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.getByType = fastElementRegistry.getByType;
+/**
+ * Gets the element definition associated with the instance.
+ * @param instance - The custom element instance to retrieve the definition for.
+ */
+FASTElementDefinition.getForInstance = fastElementRegistry.getForInstance;
+
+const shadowRoots = new WeakMap();
+const defaultEventOptions = {
+    bubbles: true,
+    composed: true,
+    cancelable: true,
+};
+function getShadowRoot(element) {
+    var _a, _b;
+    return (_b = (_a = element.shadowRoot) !== null && _a !== void 0 ? _a : shadowRoots.get(element)) !== null && _b !== void 0 ? _b : null;
+}
+const isConnectedPropertyName = "isConnected";
+/**
+ * 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.hasExistingShadowRoot = false;
+        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) {
+            let shadowRoot = element.shadowRoot;
+            if (shadowRoot) {
+                this.hasExistingShadowRoot = true;
+            }
+            else {
+                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, isConnectedPropertyName);
+        return this._isConnected;
+    }
+    setIsConnected(value) {
+        this._isConnected = value;
+        Observable.notify(this, isConnectedPropertyName);
+    }
+    /**
+     * 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() {
+        var _a;
+        // 1. Template overrides take top precedence.
+        if (this._template === null) {
+            const definition = this.definition;
+            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 = (_a = definition.template) !== null && _a !== void 0 ? _a : null;
+            }
+        }
+        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() {
+        var _a;
+        // 1. Styles overrides take top precedence.
+        if (this._styles === null) {
+            const definition = this.definition;
+            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 = (_a = definition.styles) !== null && _a !== void 0 ? _a : null;
+            }
+        }
+        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) {
+            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) {
+        if (!styles) {
+            return;
+        }
+        const target = getShadowRoot(this.element) ||
+            this.element.getRootNode();
+        if (styles instanceof HTMLElement) {
+            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) {
+        if (!styles) {
+            return;
+        }
+        const target = getShadowRoot(this.element) ||
+            this.element.getRootNode();
+        if (styles instanceof HTMLElement) {
+            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) {
+        var _a;
+        const targetBehaviors = (_a = this.behaviors) !== null && _a !== void 0 ? _a : (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;
+            const context = ExecutionContext.default;
+            for (let i = 0; i < behaviorsToBind.length; ++i) {
+                behaviorsToBind[i].bind(element, context);
+            }
+        }
+    }
+    /**
+     * 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;
+            const context = ExecutionContext.default;
+            for (let i = 0; i < behaviorsToUnbind.length; ++i) {
+                behaviorsToUnbind[i].unbind(element, context);
+            }
+        }
+    }
+    /**
+     * Runs connected lifecycle behavior on the associated element.
+     */
+    onConnectedCallback() {
+        if (this._isConnected) {
+            return;
+        }
+        const element = this.element;
+        const context = ExecutionContext.default;
+        if (this.needsInitialization) {
+            this.finishInitialization();
+        }
+        else if (this.view !== null) {
+            this.view.bind(element, context);
+        }
+        const behaviors = this.behaviors;
+        if (behaviors !== null) {
+            for (const behavior of behaviors.keys()) {
+                behavior.bind(element, context);
+            }
+        }
+        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;
+            const context = ExecutionContext.default;
+            for (const behavior of behaviors.keys()) {
+                behavior.unbind(element, context);
+            }
+        }
+    }
+    /**
+     * 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;
+        }
+        this.renderTemplate(this.template);
+        this.addStyles(this.styles);
+        this.needsInitialization = false;
+    }
+    renderTemplate(template) {
+        var _a;
+        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 = (_a = getShadowRoot(element)) !== null && _a !== void 0 ? _a : 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 || this.hasExistingShadowRoot) {
+            this.hasExistingShadowRoot = false;
+            // If there was previous custom rendering, we need to clear out the host.
+            for (let child = host.firstChild; child !== null; child = host.firstChild) {
+                host.removeChild(child);
+            }
+        }
+        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.getForInstance(element);
+        if (definition === void 0) {
+            throw FAST.error(1401 /* Message.missingElementDefinition */);
+        }
+        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;
+    },
+});
+/**
+ * Decorator: Defines a platform custom element based on `FASTElement`.
+ * @param nameOrDef - The name of the element to define or a definition object
+ * that describes the element to define.
+ * @public
+ */
+function customElement(nameOrDef) {
+    /* eslint-disable-next-line @typescript-eslint/explicit-function-return-type */
+    return function (type) {
+        new FASTElementDefinition(type, nameOrDef).define();
+    };
+}
+
+export { AdoptedStyleSheetsStrategy, ArrayObserver, Aspect, AttributeDefinition, BindingConfig, BindingMode, CSSDirective, ChangeBinding, ChildrenDirective, Compiler, Controller, DOM, ElementStyles, EventBinding, ExecutionContext, FAST, FASTElement, FASTElementDefinition, HTMLBindingDirective, HTMLDirective, HTMLView, Markup, NodeObservationDirective, Observable, OneTimeBinding, Parser, PropertyChangeNotifier, RefDirective, RepeatBehavior, RepeatDirective, SignalBinding, SlottedDirective, Splice, SpliceStrategy, SpliceStrategySupport, StatelessAttachedAttributeDirective, SubscriberSet, TwoWayBinding, UpdateBinding, Updates, ViewTemplate, attr, bind, booleanConverter, child, children, createTypeRegistry, css, cssDirective, cssPartial, customElement, elements, emptyArray, html, htmlDirective, item, length, nullableNumberConverter, observable, onChange, oneTime, ref, repeat, signal, slotted, twoWay, volatile, when };