@microsoft/fast-element 1.10.5 → 2.0.0-beta.10

package/dist/fast-element.debug.js

@@ -0,0 +1,4107 @@
+(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.",
+    [1203 /* twoWayBindingRequiresObservables */]: "View=>Model update skipped. To use twoWay binding, the target property must be observable.",
+    [1204 /* hostBindingWithoutHost */]: "No host element is present. Cannot bind host with ${name}.",
+    [1205 /* unsupportedBindingBehavior */]: "The requested binding behavior is not supported by the binding engine.",
+    [1401 /* missingElementDefinition */]: "Missing FASTElement definition.",
+    [1501 /* noRegistrationForContext */]: "No registration for Context/Interface '${name}'.",
+    [1502 /* noFactoryForResolver */]: "Dependency injection resolver for '${key}' returned a null factory.",
+    [1503 /* invalidResolverStrategy */]: "Invalid dependency injection resolver strategy specified '${strategy}'.",
+    [1504 /* cannotAutoregisterDependency */]: "Unable to autoregister dependency.",
+    [1505 /* cannotResolveKey */]: "Unable to resolve dependency injection key '${key}'.",
+    [1506 /* cannotConstructNativeFunction */]: "'${name}' is a native function and therefore cannot be safely constructed by DI. If this is intentional, please use a callback or cachedCallback resolver.",
+    [1507 /* cannotJITRegisterNonConstructor */]: "Attempted to jitRegister something that is not a constructor '${value}'. Did you forget to register this dependency?",
+    [1508 /* cannotJITRegisterIntrinsic */]: "Attempted to jitRegister an intrinsic type '${value}'. Did you forget to add @inject(Key)?",
+    [1509 /* cannotJITRegisterInterface */]: "Attempted to jitRegister an interface '${value}'.",
+    [1510 /* invalidResolver */]: "A valid resolver was not returned from the register method.",
+    [1511 /* invalidKey */]: "Key/value cannot be null or undefined. Are you trying to inject/register something that doesn't exist with DI?",
+    [1512 /* noDefaultResolver */]: "'${key}' not registered. Did you forget to add @singleton()?",
+    [1513 /* cyclicDependency */]: "Cyclic dependency found '${name}'.",
+    [1514 /* connectUpdateRequiresController */]: "Injected properties that are updated on changes to DOM connectivity require the target object to be an instance of FASTElement.",
+};
+const allPlaceholders = /(\$\{\w+?})/g;
+const placeholder = /\$\{(\w+?)}/g;
+const noValues = Object.freeze({});
+function formatMessage(message, values) {
+    return message
+        .split(allPlaceholders)
+        .map(v => {
+        var _a;
+        const replaced = v.replace(placeholder, "$1");
+        return String((_a = values[replaced]) !== null && _a !== void 0 ? _a : v);
+    })
+        .join("");
+}
+Object.assign(FAST$1, {
+    addMessages(messages) {
+        Object.assign(debugMessages, messages);
+    },
+    warn(code, values = noValues) {
+        var _a;
+        const message = (_a = debugMessages[code]) !== null && _a !== void 0 ? _a : "Unknown Warning";
+        console.warn(formatMessage(message, values));
+    },
+    error(code, values = noValues) {
+        var _a;
+        const message = (_a = debugMessages[code]) !== null && _a !== void 0 ? _a : "Unknown Error";
+        return new Error(formatMessage(message, values));
+    },
+});
+
+// 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(`Error ${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) {
+            if (object === null || object === void 0) {
+                return void 0;
+            }
+            return typeToDefinition.get(object.constructor);
+        },
+    });
+}
+/**
+ * Creates a function capable of locating metadata associated with a type.
+ * @returns A metadata locator function.
+ * @internal
+ */
+function createMetadataLocator() {
+    const metadataLookup = new WeakMap();
+    return function (target) {
+        let metadata = metadataLookup.get(target);
+        if (metadata === void 0) {
+            let currentTarget = Reflect.getPrototypeOf(target);
+            while (metadata === void 0 && currentTarget !== null) {
+                metadata = metadataLookup.get(currentTarget);
+                currentTarget = Reflect.getPrototypeOf(currentTarget);
+            }
+            metadata = metadata === void 0 ? [] : metadata.slice(0);
+            metadataLookup.set(target, metadata);
+        }
+        return metadata;
+    };
+}
+
+/**
+ * @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);
+        }
+    }
+}
+
+/**
+ * Describes how the source's lifetime relates to its controller's lifetime.
+ * @public
+ */
+const SourceLifetime = Object.freeze({
+    /**
+     * The source to controller lifetime relationship is unknown.
+     */
+    unknown: void 0,
+    /**
+     * The source and controller lifetimes are coupled to one another.
+     * They can/will be GC'd together.
+     */
+    coupled: 1,
+});
+/**
+ * Common Observable APIs.
+ * @public
+ */
+const Observable = FAST.getById(2 /* KernelServiceId.observable */, () => {
+    const queueUpdate = Updates.enqueue;
+    const volatileRegex = /(:|&&|\|\||if)/;
+    const notifierLookup = 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;
+    }
+    const getAccessors = createMetadataLocator();
+    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 ExpressionNotifierImplementation extends SubscriberSet {
+        constructor(expression, initialSubscriber, isVolatileBinding = false) {
+            super(expression, initialSubscriber);
+            this.expression = expression;
+            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;
+        }
+        bind(controller) {
+            this.controller = controller;
+            const value = this.observe(controller.source, controller.context);
+            if (!controller.isBound && this.requiresUnbind(controller)) {
+                controller.onUnbind(this);
+            }
+            return value;
+        }
+        requiresUnbind(controller) {
+            return (controller.sourceLifetime !== SourceLifetime.coupled ||
+                this.first !== this.last ||
+                this.first.propertySource !== controller.source);
+        }
+        unbind(controller) {
+            this.dispose();
+        }
+        observe(source, context) {
+            if (this.needsRefresh && this.last !== null) {
+                this.dispose();
+            }
+            const previousWatcher = watcher;
+            watcher = this.needsRefresh ? this : void 0;
+            this.needsRefresh = this.isVolatileBinding;
+            let result;
+            try {
+                result = this.expression(source, context);
+            }
+            finally {
+                watcher = previousWatcher;
+            }
+            return result;
+        }
+        // backwards compat with v1 kernel
+        disconnect() {
+            this.dispose();
+        }
+        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 ExpressionNotifier} that can watch the
+         * provided {@link Expression} for changes.
+         * @param expression - The binding to observe.
+         * @param initialSubscriber - An initial subscriber to changes in the binding value.
+         * @param isVolatileBinding - Indicates whether the binding's dependency list must be re-evaluated on every value evaluation.
+         */
+        binding(expression, initialSubscriber, isVolatileBinding = this.isVolatileBinding(expression)) {
+            return new ExpressionNotifierImplementation(expression, 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 expression - The binding to inspect.
+         */
+        isVolatileBinding(expression) {
+            return volatileRegex.test(expression.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;
+        },
+    };
+});
+/**
+ * Provides additional contextual information available to behaviors and expressions.
+ * @public
+ */
+const ExecutionContext = Object.freeze({
+    /**
+     * A default execution context.
+     */
+    default: {
+        index: 0,
+        length: 0,
+        get event() {
+            return ExecutionContext.getEvent();
+        },
+        eventDetail() {
+            return this.event.detail;
+        },
+        eventTarget() {
+            return this.event.target;
+        },
+    },
+    /**
+     * Gets the current event.
+     * @returns An event object.
+     */
+    getEvent() {
+        return contextEvent.get();
+    },
+    /**
+     * Sets the current event.
+     * @param event - An event object.
+     */
+    setEvent(event) {
+        contextEvent.set(event);
+    },
+});
+
+/**
+ * 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];
+// Note: This function is *based* on the computation of the Levenshtein
+// "edit" distance. The one change is that "updates" are treated as two
+// edits - not one. With Array splices, an update is really a delete
+// followed by an add. By retaining this, we optimize for "keeping" the
+// maximum array items in the original array. For example:
+//
+//   'xxxx123' to '123yyyy'
+//
+// With 1-edit updates, the shortest path would be just to update all seven
+// characters. With 2-edit updates, we delete 4, leave 3, and add 4. This
+// leaves the substring '123' intact.
+function calcEditDistances(current, currentStart, currentEnd, old, oldStart, oldEnd) {
+    // "Deletion" columns
+    const rowCount = oldEnd - oldStart + 1;
+    const columnCount = currentEnd - currentStart + 1;
+    const distances = new Array(rowCount);
+    let north;
+    let west;
+    // "Addition" rows. Initialize null column.
+    for (let i = 0; i < rowCount; ++i) {
+        distances[i] = new Array(columnCount);
+        distances[i][0] = i;
+    }
+    // Initialize null row
+    for (let j = 0; j < columnCount; ++j) {
+        distances[0][j] = j;
+    }
+    for (let i = 1; i < rowCount; ++i) {
+        for (let j = 1; j < columnCount; ++j) {
+            if (current[currentStart + j - 1] === old[oldStart + i - 1]) {
+                distances[i][j] = distances[i - 1][j - 1];
+            }
+            else {
+                north = distances[i - 1][j] + 1;
+                west = distances[i][j - 1] + 1;
+                distances[i][j] = north < west ? north : west;
+            }
+        }
+    }
+    return distances;
+}
+// This starts at the final weight, and walks "backward" by finding
+// the minimum previous weight recursively until the origin of the weight
+// matrix.
+function spliceOperationsFromEditDistances(distances) {
+    let i = distances.length - 1;
+    let j = distances[0].length - 1;
+    let current = distances[i][j];
+    const edits = [];
+    while (i > 0 || j > 0) {
+        if (i === 0) {
+            edits.push(2 /* Edit.add */);
+            j--;
+            continue;
+        }
+        if (j === 0) {
+            edits.push(3 /* Edit.delete */);
+            i--;
+            continue;
+        }
+        const northWest = distances[i - 1][j - 1];
+        const west = distances[i - 1][j];
+        const north = distances[i][j - 1];
+        let min;
+        if (west < north) {
+            min = west < northWest ? west : northWest;
+        }
+        else {
+            min = north < northWest ? north : northWest;
+        }
+        if (min === northWest) {
+            if (northWest === current) {
+                edits.push(0 /* Edit.leave */);
+            }
+            else {
+                edits.push(1 /* Edit.update */);
+                current = northWest;
+            }
+            i--;
+            j--;
+        }
+        else if (min === west) {
+            edits.push(3 /* Edit.delete */);
+            i--;
+            current = west;
+        }
+        else {
+            edits.push(2 /* Edit.add */);
+            j--;
+            current = north;
+        }
+    }
+    return edits.reverse();
+}
+function sharedPrefix(current, old, searchLength) {
+    for (let i = 0; i < searchLength; ++i) {
+        if (current[i] !== old[i]) {
+            return i;
+        }
+    }
+    return searchLength;
+}
+function sharedSuffix(current, old, searchLength) {
+    let index1 = current.length;
+    let index2 = old.length;
+    let count = 0;
+    while (count < searchLength && current[--index1] === old[--index2]) {
+        count++;
+    }
+    return count;
+}
+function intersect(start1, end1, start2, end2) {
+    // Disjoint
+    if (end1 < start2 || end2 < start1) {
+        return -1;
+    }
+    // Adjacent
+    if (end1 === start2 || end2 === start1) {
+        return 0;
+    }
+    // Non-zero intersect, span1 first
+    if (start1 < start2) {
+        if (end1 < end2) {
+            return end1 - start2; // Overlap
+        }
+        return end2 - start2; // Contained
+    }
+    // Non-zero intersect, span2 first
+    if (end2 < end1) {
+        return end2 - start1; // Overlap
+    }
+    return end1 - start1; // Contained
+}
+/**
+ * @remarks
+ * Lacking individual splice mutation information, the minimal set of
+ * splices can be synthesized given the previous state and final state of an
+ * array. The basic approach is to calculate the edit distance matrix and
+ * choose the shortest path through it.
+ *
+ * Complexity: O(l * p)
+ *   l: The length of the current array
+ *   p: The length of the old array
+ */
+function calc(current, currentStart, currentEnd, old, oldStart, oldEnd) {
+    let prefixCount = 0;
+    let suffixCount = 0;
+    const minLength = Math.min(currentEnd - currentStart, oldEnd - oldStart);
+    if (currentStart === 0 && oldStart === 0) {
+        prefixCount = sharedPrefix(current, old, minLength);
+    }
+    if (currentEnd === current.length && oldEnd === old.length) {
+        suffixCount = sharedSuffix(current, old, minLength - prefixCount);
+    }
+    currentStart += prefixCount;
+    oldStart += prefixCount;
+    currentEnd -= suffixCount;
+    oldEnd -= suffixCount;
+    if (currentEnd - currentStart === 0 && oldEnd - oldStart === 0) {
+        return emptyArray;
+    }
+    if (currentStart === currentEnd) {
+        const splice = new Splice(currentStart, [], 0);
+        while (oldStart < oldEnd) {
+            splice.removed.push(old[oldStart++]);
+        }
+        return [splice];
+    }
+    else if (oldStart === oldEnd) {
+        return [new Splice(currentStart, [], currentEnd - currentStart)];
+    }
+    const ops = spliceOperationsFromEditDistances(calcEditDistances(current, currentStart, currentEnd, old, oldStart, oldEnd));
+    const splices = [];
+    let splice = void 0;
+    let index = currentStart;
+    let oldIndex = oldStart;
+    for (let i = 0; i < ops.length; ++i) {
+        switch (ops[i]) {
+            case 0 /* Edit.leave */:
+                if (splice !== void 0) {
+                    splices.push(splice);
+                    splice = void 0;
+                }
+                index++;
+                oldIndex++;
+                break;
+            case 1 /* Edit.update */:
+                if (splice === void 0) {
+                    splice = new Splice(index, [], 0);
+                }
+                splice.addedCount++;
+                index++;
+                splice.removed.push(old[oldIndex]);
+                oldIndex++;
+                break;
+            case 2 /* Edit.add */:
+                if (splice === void 0) {
+                    splice = new Splice(index, [], 0);
+                }
+                splice.addedCount++;
+                index++;
+                break;
+            case 3 /* Edit.delete */:
+                if (splice === void 0) {
+                    splice = new Splice(index, [], 0);
+                }
+                splice.removed.push(old[oldIndex]);
+                oldIndex++;
+                break;
+            // no default
+        }
+    }
+    if (splice !== void 0) {
+        splices.push(splice);
+    }
+    return splices;
+}
+function merge(splice, splices) {
+    let inserted = false;
+    let insertionOffset = 0;
+    for (let i = 0; i < splices.length; i++) {
+        const current = splices[i];
+        current.index += insertionOffset;
+        if (inserted) {
+            continue;
+        }
+        const intersectCount = intersect(splice.index, splice.index + splice.removed.length, current.index, current.index + current.addedCount);
+        if (intersectCount >= 0) {
+            // Merge the two splices
+            splices.splice(i, 1);
+            i--;
+            insertionOffset -= current.addedCount - current.removed.length;
+            splice.addedCount += current.addedCount - intersectCount;
+            const deleteCount = splice.removed.length + current.removed.length - intersectCount;
+            if (!splice.addedCount && !deleteCount) {
+                // merged splice is a noop. discard.
+                inserted = true;
+            }
+            else {
+                let currentRemoved = current.removed;
+                if (splice.index < current.index) {
+                    // some prefix of splice.removed is prepended to current.removed.
+                    const prepend = splice.removed.slice(0, current.index - splice.index);
+                    prepend.push(...currentRemoved);
+                    currentRemoved = prepend;
+                }
+                if (splice.index + splice.removed.length >
+                    current.index + current.addedCount) {
+                    // some suffix of splice.removed is appended to current.removed.
+                    const append = splice.removed.slice(current.index + current.addedCount - splice.index);
+                    currentRemoved.push(...append);
+                }
+                splice.removed = currentRemoved;
+                if (current.index < splice.index) {
+                    splice.index = current.index;
+                }
+            }
+        }
+        else if (splice.index < current.index) {
+            // Insert splice here.
+            inserted = true;
+            splices.splice(i, 0, splice);
+            i++;
+            const offset = splice.addedCount - splice.removed.length;
+            current.index += offset;
+            insertionOffset += offset;
+        }
+    }
+    if (!inserted) {
+        splices.push(splice);
+    }
+}
+function project(array, changes) {
+    let splices = [];
+    const initialSplices = [];
+    for (let i = 0, ii = changes.length; i < ii; i++) {
+        merge(changes[i], initialSplices);
+    }
+    for (let i = 0, ii = initialSplices.length; i < ii; ++i) {
+        const splice = initialSplices[i];
+        if (splice.addedCount === 1 && splice.removed.length === 1) {
+            if (splice.removed[0] !== array[splice.index]) {
+                splices.push(splice);
+            }
+            continue;
+        }
+        splices = splices.concat(calc(array, splice.index, splice.index + splice.addedCount, splice.removed, 0, splice.removed.length));
+    }
+    return splices;
+}
+/**
+ * A SpliceStrategy that attempts to merge all splices into the minimal set of
+ * splices needed to represent the change from the old array to the new array.
+ * @public
+ */
+let defaultSpliceStrategy = Object.freeze({
+    support: SpliceStrategySupport.optimized,
+    normalize(previous, current, changes) {
+        if (previous === void 0) {
+            if (changes === void 0) {
+                return emptyArray;
+            }
+            return changes.length > 1 ? project(current, changes) : changes;
+        }
+        return 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 lengthOf(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;
+    }
+    /**
+     * Normalizes a set of composable style options.
+     * @param styles - The style options to normalize.
+     * @returns A singular ElementStyles instance or undefined.
+     */
+    static normalize(styles) {
+        return styles === void 0
+            ? void 0
+            : Array.isArray(styles)
+                ? new ElementStyles(styles)
+                : styles instanceof ElementStyles
+                    ? styles
+                    : new ElementStyles([styles]);
+    }
+}
+/**
+ * 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;
+    }
+    addedCallback(controller) {
+        controller.addStyles(this.styles);
+    }
+    removedCallback(controller) {
+        controller.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;
+    },
+});
+
+/**
+ * Bridges between ViewBehaviors and HostBehaviors, enabling a host to
+ * control ViewBehaviors.
+ * @public
+ */
+const ViewBehaviorOrchestrator = Object.freeze({
+    /**
+     * Creates a ViewBehaviorOrchestrator.
+     * @param source - The source to to associate behaviors with.
+     * @returns A ViewBehaviorOrchestrator.
+     */
+    create(source) {
+        const behaviors = [];
+        const targets = {};
+        let unbindables = null;
+        let isConnected = false;
+        return {
+            source,
+            context: ExecutionContext.default,
+            targets,
+            get isBound() {
+                return isConnected;
+            },
+            addBehaviorFactory(factory, target) {
+                const nodeId = factory.nodeId || (factory.nodeId = nextId());
+                factory.id || (factory.id = nextId());
+                this.addTarget(nodeId, target);
+                this.addBehavior(factory.createBehavior());
+            },
+            addTarget(nodeId, target) {
+                targets[nodeId] = target;
+            },
+            addBehavior(behavior) {
+                behaviors.push(behavior);
+                if (isConnected) {
+                    behavior.bind(this);
+                }
+            },
+            onUnbind(unbindable) {
+                if (unbindables === null) {
+                    unbindables = [];
+                }
+                unbindables.push(unbindable);
+            },
+            connectedCallback(controller) {
+                if (!isConnected) {
+                    isConnected = true;
+                    behaviors.forEach(x => x.bind(this));
+                }
+            },
+            disconnectedCallback(controller) {
+                if (isConnected) {
+                    isConnected = false;
+                    if (unbindables !== null) {
+                        unbindables.forEach(x => x.unbind(this));
+                    }
+                }
+            },
+        };
+    },
+});
+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);
+    };
+}
+/**
+ * Captures a binding expression along with related information and capabilities.
+ *
+ * @public
+ */
+class Binding {
+    /**
+     * Creates a binding.
+     * @param evaluate - Evaluates the binding.
+     * @param isVolatile - Indicates whether the binding is volatile.
+     */
+    constructor(evaluate, isVolatile = false) {
+        this.evaluate = evaluate;
+        this.isVolatile = isVolatile;
+    }
+}
+/**
+ * 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.
+     * @remarks
+     * If a falsy value is provided, then the content aspect will be assigned.
+     */
+    assign(directive, value) {
+        if (!value) {
+            directive.aspectType = Aspect.content;
+            return;
+        }
+        directive.sourceAspect = value;
+        switch (value[0]) {
+            case ":":
+                directive.targetAspect = value.substring(1);
+                directive.aspectType =
+                    directive.targetAspect === "classList"
+                        ? Aspect.tokenList
+                        : Aspect.property;
+                break;
+            case "?":
+                directive.targetAspect = value.substring(1);
+                directive.aspectType = Aspect.booleanAttribute;
+                break;
+            case "@":
+                directive.targetAspect = value.substring(1);
+                directive.aspectType = Aspect.event;
+                break;
+            default:
+                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;
+        /**
+         * The unique id of the factory.
+         */
+        this.id = nextId();
+    }
+    /**
+     * 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));
+    }
+    /**
+     * Creates a behavior.
+     * @param targets - The targets available for behaviors to be attached to.
+     */
+    createBehavior() {
+        return 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;
+class OnChangeBinding extends Binding {
+    createObserver(_, subscriber) {
+        return Observable.binding(this.evaluate, subscriber, this.isVolatile);
+    }
+}
+class OneTimeBinding extends Binding {
+    createObserver() {
+        return this;
+    }
+    bind(controller) {
+        return this.evaluate(controller.source, controller.context);
+    }
+}
+function updateContent(target, aspect, value, controller) {
+    // 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 ContentTemplate.
+    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(controller.source, controller.context);
+            view.insertBefore(target);
+            target.$fastView = view;
+            target.$fastTemplate = value;
+        }
+        else if (view.needsBindOnly) {
+            view.needsBindOnly = false;
+            view.bind(controller.source, controller.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 updateTokenList(target, aspect, value) {
+    var _a;
+    const lookup = `${this.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);
+        }
+    }
+}
+const setProperty = (t, a, v) => (t[a] = v);
+const eventTarget = () => void 0;
+/**
+ * A directive that applies bindings.
+ * @public
+ */
+class HTMLBindingDirective {
+    /**
+     * Creates an instance of HTMLBindingDirective.
+     * @param dataBinding - The binding configuration to apply.
+     */
+    constructor(dataBinding) {
+        this.dataBinding = dataBinding;
+        this.updateTarget = null;
+        /**
+         * The unique id of the factory.
+         */
+        this.id = nextId();
+        /**
+         * The type of aspect to target.
+         */
+        this.aspectType = Aspect.content;
+        /** @internal */
+        this.bind = this.bindDefault;
+        this.data = `${this.id}-d`;
+    }
+    /**
+     * 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.
+     */
+    createBehavior() {
+        if (this.updateTarget === null) {
+            if (this.targetAspect === "innerHTML") {
+                this.dataBinding.evaluate = createInnerHTMLBinding(this.dataBinding.evaluate);
+            }
+            switch (this.aspectType) {
+                case 1:
+                    this.updateTarget = DOM.setAttribute;
+                    break;
+                case 2:
+                    this.updateTarget = DOM.setBooleanAttribute;
+                    break;
+                case 3:
+                    this.updateTarget = setProperty;
+                    break;
+                case 4:
+                    this.bind = this.bindContent;
+                    this.updateTarget = updateContent;
+                    break;
+                case 5:
+                    this.updateTarget = updateTokenList;
+                    break;
+                case 6:
+                    this.bind = this.bindEvent;
+                    this.updateTarget = eventTarget;
+                    break;
+                default:
+                    throw FAST.error(1205 /* Message.unsupportedBindingBehavior */);
+            }
+        }
+        return this;
+    }
+    /** @internal */
+    bindDefault(controller) {
+        var _a;
+        const target = controller.targets[this.nodeId];
+        const observer = (_a = target[this.data]) !== null && _a !== void 0 ? _a : (target[this.data] = this.dataBinding.createObserver(this, this));
+        observer.target = target;
+        observer.controller = controller;
+        this.updateTarget(target, this.targetAspect, observer.bind(controller), controller);
+        if (this.updateTarget === updateContent) {
+            controller.onUnbind(this);
+        }
+    }
+    /** @internal */
+    bindContent(controller) {
+        this.bindDefault(controller);
+        controller.onUnbind(this);
+    }
+    /** @internal */
+    bindEvent(controller) {
+        const target = controller.targets[this.nodeId];
+        target[this.data] = controller;
+        target.addEventListener(this.targetAspect, this, this.dataBinding.options);
+    }
+    /** @internal */
+    unbind(controller) {
+        const target = controller.targets[this.nodeId];
+        const view = target.$fastView;
+        if (view !== void 0 && view.isComposed) {
+            view.unbind();
+            view.needsBindOnly = true;
+        }
+    }
+    /** @internal */
+    handleEvent(event) {
+        const target = event.currentTarget;
+        ExecutionContext.setEvent(event);
+        const controller = target[this.data];
+        const result = this.dataBinding.evaluate(controller.source, controller.context);
+        ExecutionContext.setEvent(null);
+        if (result !== true) {
+            event.preventDefault();
+        }
+    }
+    /** @internal */
+    handleChange(binding, observer) {
+        const target = observer.target;
+        const controller = observer.controller;
+        this.updateTarget(target, this.targetAspect, observer.bind(controller), controller);
+    }
+}
+HTMLDirective.define(HTMLBindingDirective, { aspected: true });
+/**
+ * Creates an standard binding.
+ * @param binding - The binding to refresh when changed.
+ * @param isVolatile - Indicates whether the binding is volatile or not.
+ * @returns A binding configuration.
+ * @public
+ */
+function bind(binding, isVolatile = Observable.isVolatileBinding(binding)) {
+    return new OnChangeBinding(binding, isVolatile);
+}
+/**
+ * Creates a one time binding
+ * @param binding - The binding to refresh when signaled.
+ * @returns A binding configuration.
+ * @public
+ */
+function oneTime(binding) {
+    return new OneTimeBinding(binding);
+}
+/**
+ * Creates an event listener binding.
+ * @param binding - The binding to invoke when the event is raised.
+ * @param options - Event listener options.
+ * @returns A binding configuration.
+ * @public
+ */
+function listener(binding, options) {
+    const config = new OnChangeBinding(binding, false);
+    config.options = options;
+    return config;
+}
+/**
+ * Normalizes the input value into a binding.
+ * @param value - The value to create the default binding for.
+ * @returns A binding configuration for the provided value.
+ * @public
+ */
+function normalizeBinding(value) {
+    return isFunction(value)
+        ? bind(value)
+        : value instanceof Binding
+            ? value
+            : oneTime(() => value);
+}
+
+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;
+        this.unbindables = [];
+        /**
+         * The data that the view is bound to.
+         */
+        this.source = null;
+        /**
+         * Indicates whether the controller is bound.
+         */
+        this.isBound = false;
+        /**
+         * Indicates how the source's lifetime relates to the controller's lifetime.
+         */
+        this.sourceLifetime = SourceLifetime.unknown;
+        /**
+         * The execution context the view is running within.
+         */
+        this.context = this;
+        /**
+         * The index of the current item within a repeat context.
+         */
+        this.index = 0;
+        /**
+         * The length of the current collection within a repeat context.
+         */
+        this.length = 0;
+        this.firstChild = fragment.firstChild;
+        this.lastChild = fragment.lastChild;
+    }
+    /**
+     * The current event within an event handler.
+     */
+    get event() {
+        return ExecutionContext.getEvent();
+    }
+    /**
+     * Indicates whether the current item within a repeat context
+     * has an even index.
+     */
+    get isEven() {
+        return this.index % 2 === 0;
+    }
+    /**
+     * Indicates whether the current item within a repeat context
+     * has an odd index.
+     */
+    get isOdd() {
+        return this.index % 2 !== 0;
+    }
+    /**
+     * Indicates whether the current item within a repeat context
+     * is the first item in the collection.
+     */
+    get isFirst() {
+        return this.index === 0;
+    }
+    /**
+     * Indicates whether the current item within a repeat context
+     * is somewhere in the middle of the collection.
+     */
+    get isInMiddle() {
+        return !this.isFirst && !this.isLast;
+    }
+    /**
+     * Indicates whether the current item within a repeat context
+     * is the last item in the collection.
+     */
+    get isLast() {
+        return this.index === this.length - 1;
+    }
+    /**
+     * Returns the typed event detail of a custom event.
+     */
+    eventDetail() {
+        return this.event.detail;
+    }
+    /**
+     * Returns the typed event target of the event.
+     */
+    eventTarget() {
+        return this.event.target;
+    }
+    /**
+     * 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 end = this.lastChild;
+            if (node.previousSibling === end)
+                return;
+            const parentNode = node.parentNode;
+            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();
+    }
+    onUnbind(behavior) {
+        this.unbindables.push(behavior);
+    }
+    /**
+     * 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 = this) {
+        if (this.source === source) {
+            return;
+        }
+        let behaviors = this.behaviors;
+        if (behaviors === null) {
+            this.source = source;
+            this.context = context;
+            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();
+                behavior.bind(this);
+                behaviors[i] = behavior;
+            }
+        }
+        else {
+            if (this.source !== null) {
+                this.evaluateUnbindables();
+            }
+            this.isBound = false;
+            this.source = source;
+            this.context = context;
+            for (let i = 0, ii = behaviors.length; i < ii; ++i) {
+                behaviors[i].bind(this);
+            }
+        }
+        this.isBound = true;
+    }
+    /**
+     * Unbinds a view's behaviors from its binding source.
+     */
+    unbind() {
+        if (!this.isBound || this.source === null) {
+            return;
+        }
+        this.evaluateUnbindables();
+        this.source = null;
+        this.context = this;
+        this.isBound = false;
+    }
+    evaluateUnbindables() {
+        const unbindables = this.unbindables;
+        for (let i = 0, ii = unbindables.length; i < ii; ++i) {
+            unbindables[i].unbind(this);
+        }
+        unbindables.length = 0;
+    }
+    /**
+     * 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();
+        }
+    }
+}
+Observable.defineProperty(HTMLView.prototype, "index");
+Observable.defineProperty(HTMLView.prototype, "length");
+
+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,
+};
+function tryWarn(name) {
+    if (!name.startsWith("fast-")) {
+        FAST.warn(1204 /* Message.hostBindingWithoutHost */, { name });
+    }
+}
+const warningHost = new Proxy(document.createElement("div"), {
+    get(target, property) {
+        tryWarn(property);
+        const value = Reflect.get(target, property);
+        return isFunction(value) ? value.bind(target) : value;
+    },
+    set(target, property, value) {
+        tryWarn(property);
+        return Reflect.set(target, property, value);
+    },
+});
+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 : warningHost;
+        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 = new HTMLBindingDirective(oneTime(() => attrValue));
+                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 = " ";
+            Aspect.assign(currentPart);
+            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;
+        let binding;
+        let isVolatile = false;
+        const partCount = parts.length;
+        const finalParts = parts.map((x) => {
+            if (isString(x)) {
+                return () => x;
+            }
+            sourceAspect = x.sourceAspect || sourceAspect;
+            binding = x.dataBinding || binding;
+            isVolatile = isVolatile || x.dataBinding.isVolatile;
+            return x.dataBinding.evaluate;
+        });
+        const expression = (scope, context) => {
+            let output = "";
+            for (let i = 0; i < partCount; ++i) {
+                output += finalParts[i](scope, context);
+            }
+            return output;
+        };
+        binding.evaluate = expression;
+        binding.isVolatile = isVolatile;
+        const directive = new HTMLBindingDirective(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) {
+        const view = this.create(hostBindingTarget);
+        view.bind(source);
+        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(new HTMLBindingDirective(bind(currentValue)), currentString, add);
+        }
+        else if (isString(currentValue)) {
+            const match = lastAttributeNameRegex.exec(currentString);
+            if (match !== null) {
+                const directive = new HTMLBindingDirective(oneTime(() => currentValue));
+                Aspect.assign(directive, match[2]);
+                html += directive.createHTML(add);
+            }
+            else {
+                html += currentValue;
+            }
+        }
+        else if (currentValue instanceof Binding) {
+            html += createAspectedHTML(new HTMLBindingDirective(currentValue), currentString, add);
+        }
+        else if ((definition = HTMLDirective.getForInstance(currentValue)) === void 0) {
+            html += createAspectedHTML(new HTMLBindingDirective(oneTime(() => currentValue)), 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);
+}
+
+/**
+ * The runtime behavior for template references.
+ * @public
+ */
+class RefDirective extends StatelessAttachedAttributeDirective {
+    /**
+     * Bind this behavior.
+     * @param controller - The view controller that manages the lifecycle of this behavior.
+     */
+    bind(controller) {
+        controller.source[this.options] = controller.targets[this.nodeId];
+    }
+}
+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 condition - 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(condition, templateOrTemplateBinding) {
+    const dataBinding = isFunction(condition) ? condition : () => condition;
+    const templateBinding = isFunction(templateOrTemplateBinding)
+        ? templateOrTemplateBinding
+        : () => templateOrTemplateBinding;
+    return (source, context) => dataBinding(source, context) ? templateBinding(source, context) : null;
+}
+
+const defaultRepeatOptions = Object.freeze({
+    positioning: false,
+    recycle: true,
+});
+function bindWithoutPositioning(view, items, index, controller) {
+    view.context.parent = controller.source;
+    view.context.parentContext = controller.context;
+    view.bind(items[index]);
+}
+function bindWithPositioning(view, items, index, controller) {
+    view.context.parent = controller.source;
+    view.context.parentContext = controller.context;
+    view.context.length = items.length;
+    view.context.index = index;
+    view.bind(items[index]);
+}
+/**
+ * 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 dataBinding - 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(directive) {
+        this.directive = directive;
+        this.views = [];
+        this.items = null;
+        this.itemsObserver = null;
+        this.bindView = bindWithoutPositioning;
+        this.itemsBindingObserver = directive.dataBinding.createObserver(directive, this);
+        this.templateBindingObserver = directive.templateBinding.createObserver(directive, this);
+        if (directive.options.positioning) {
+            this.bindView = bindWithPositioning;
+        }
+    }
+    /**
+     * Bind this behavior.
+     * @param controller - The view controller that manages the lifecycle of this behavior.
+     */
+    bind(controller) {
+        this.location = controller.targets[this.directive.nodeId];
+        this.controller = controller;
+        this.items = this.itemsBindingObserver.bind(controller);
+        this.template = this.templateBindingObserver.bind(controller);
+        this.observeItems(true);
+        this.refreshAllViews();
+        controller.onUnbind(this);
+    }
+    /**
+     * Unbinds this behavior.
+     */
+    unbind() {
+        if (this.itemsObserver !== null) {
+            this.itemsObserver.unsubscribe(this);
+        }
+        this.unbindAllViews();
+    }
+    /**
+     * 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 (args === this.itemsBindingObserver) {
+            this.items = this.itemsBindingObserver.bind(this.controller);
+            this.observeItems();
+            this.refreshAllViews();
+        }
+        else if (args === this.templateBindingObserver) {
+            this.template = this.templateBindingObserver.bind(this.controller);
+            this.refreshAllViews(true);
+        }
+        else if (!args[0]) {
+            return;
+        }
+        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 bindView = this.bindView;
+        const items = this.items;
+        const template = this.template;
+        const controller = this.controller;
+        const recycle = this.directive.options.recycle;
+        const leftoverViews = [];
+        let leftoverIndex = 0;
+        let availableViews = 0;
+        for (let i = 0, ii = splices.length; i < ii; ++i) {
+            const splice = splices[i];
+            const removed = splice.removed;
+            let removeIndex = 0;
+            let addIndex = splice.index;
+            const end = addIndex + splice.addedCount;
+            const removedViews = views.splice(splice.index, removed.length);
+            const totalAvailableViews = (availableViews =
+                leftoverViews.length + removedViews.length);
+            for (; addIndex < end; ++addIndex) {
+                const neighbor = views[addIndex];
+                const location = neighbor ? neighbor.firstChild : this.location;
+                let view;
+                if (recycle && availableViews > 0) {
+                    if (removeIndex <= totalAvailableViews && removedViews.length > 0) {
+                        view = removedViews[removeIndex];
+                        removeIndex++;
+                    }
+                    else {
+                        view = leftoverViews[leftoverIndex];
+                        leftoverIndex++;
+                    }
+                    availableViews--;
+                }
+                else {
+                    view = template.create();
+                }
+                views.splice(addIndex, 0, view);
+                bindView(view, items, addIndex, controller);
+                view.insertBefore(location);
+            }
+            if (removedViews[removeIndex]) {
+                leftoverViews.push(...removedViews.slice(removeIndex));
+            }
+        }
+        for (let i = leftoverIndex, ii = leftoverViews.length; i < ii; ++i) {
+            leftoverViews[i].dispose();
+        }
+        if (this.directive.options.positioning) {
+            for (let i = 0, ii = views.length; i < ii; ++i) {
+                const context = views[i].context;
+                context.length = i;
+                context.index = ii;
+            }
+        }
+    }
+    refreshAllViews(templateChanged = false) {
+        const items = this.items;
+        const template = this.template;
+        const location = this.location;
+        const bindView = this.bindView;
+        const controller = this.controller;
+        let itemsLength = items.length;
+        let views = this.views;
+        let viewsLength = views.length;
+        if (itemsLength === 0 || templateChanged || !this.directive.options.recycle) {
+            // 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, controller);
+                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, controller);
+                }
+                else {
+                    const view = template.create();
+                    bindView(view, items, i, controller);
+                    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 dataBinding - 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(dataBinding, templateBinding, options) {
+        this.dataBinding = dataBinding;
+        this.templateBinding = templateBinding;
+        this.options = options;
+        /**
+         * The unique id of the factory.
+         */
+        this.id = nextId();
+        ArrayObserver.enable();
+    }
+    /**
+     * 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() {
+        return new RepeatBehavior(this);
+    }
+}
+HTMLDirective.define(RepeatDirective);
+/**
+ * A directive that enables list rendering.
+ * @param items - The array to render.
+ * @param template - The template or a template binding used obtain a template
+ * to render for each item in the array.
+ * @param options - Options used to turn on special repeat features.
+ * @public
+ */
+function repeat(items, template, options = defaultRepeatOptions) {
+    const dataBinding = normalizeBinding(items);
+    const templateBinding = normalizeBinding(template);
+    return new RepeatDirective(dataBinding, templateBinding, Object.assign(Object.assign({}, defaultRepeatOptions), 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(controller) {
+        const target = controller.targets[this.nodeId];
+        target[this.sourceProperty] = controller.source;
+        this.updateTarget(controller.source, this.computeNodes(target));
+        this.observe(target);
+        controller.onUnbind(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(controller) {
+        const target = controller.targets[this.nodeId];
+        this.updateTarget(controller.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";
+/**
+ * Metadata used to configure a custom attribute's behavior.
+ * @public
+ */
+const AttributeConfiguration = Object.freeze({
+    /**
+     * Locates all attribute configurations associated with a type.
+     */
+    locate: createMetadataLocator(),
+});
+/**
+ * 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(AttributeConfiguration.locate(Owner));
+        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;
+        }
+        AttributeConfiguration.locate($target.constructor).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 fastElementBaseTypes = new Set();
+const fastElementRegistry = FAST.getById(4 /* KernelServiceId.elementRegistry */, () => createTypeRegistry());
+/**
+ * Defines metadata for a FASTElement.
+ * @public
+ */
+class FASTElementDefinition {
+    constructor(type, nameOrConfig = type.definition) {
+        var _a;
+        this.platformDefined = false;
+        if (isString(nameOrConfig)) {
+            nameOrConfig = { name: nameOrConfig };
+        }
+        this.type = type;
+        this.name = nameOrConfig.name;
+        this.template = nameOrConfig.template;
+        this.registry = (_a = nameOrConfig.registry) !== null && _a !== void 0 ? _a : customElements;
+        const proto = type.prototype;
+        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;
+            Observable.defineProperty(proto, current);
+        }
+        Reflect.defineProperty(type, "observedAttributes", {
+            value: observedAttributes,
+            enumerable: true,
+        });
+        this.attributes = attributes;
+        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 = ElementStyles.normalize(nameOrConfig.styles);
+        fastElementRegistry.register(this);
+    }
+    /**
+     * Indicates if this element has been defined in at least one registry.
+     */
+    get isDefined() {
+        return this.platformDefined;
+    }
+    /**
+     * Defines a custom element based on this definition.
+     * @param registry - The element registry to define the element in.
+     * @remarks
+     * This operation is idempotent per registry.
+     */
+    define(registry = this.registry) {
+        const type = this.type;
+        if (!registry.get(this.name)) {
+            this.platformDefined = true;
+            registry.define(this.name, type, this.elementOptions);
+        }
+        return this;
+    }
+    /**
+     * Creates an instance of FASTElementDefinition.
+     * @param type - The type this definition is being created for.
+     * @param nameOrDef - The name of the element to define or a config object
+     * that describes the element to define.
+     */
+    static compose(type, nameOrDef) {
+        if (fastElementBaseTypes.has(type) || fastElementRegistry.getByType(type)) {
+            return new FASTElementDefinition(class extends type {
+            }, nameOrDef);
+        }
+        return new FASTElementDefinition(type, nameOrDef);
+    }
+    /**
+     * Registers a FASTElement base type.
+     * @param type - The type to register as a base type.
+     * @internal
+     */
+    static registerBaseType(type) {
+        fastElementBaseTypes.add(type);
+    }
+}
+/**
+ * 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 defaultEventOptions = {
+    bubbles: true,
+    composed: true,
+    cancelable: true,
+};
+const isConnectedPropertyName = "isConnected";
+const shadowRoots = new WeakMap();
+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;
+}
+/**
+ * Controls the lifecycle and rendering of a `FASTElement`.
+ * @public
+ */
+class ElementController 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.needsInitialization = true;
+        this.hasExistingShadowRoot = false;
+        this._template = null;
+        this._isConnected = false;
+        this.behaviors = null;
+        this._mainStyles = null;
+        /**
+         * 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.source = 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.source.resolveTemplate) {
+                // 2. Allow for element instance overrides next.
+                this._template = this.source.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);
+        }
+    }
+    /**
+     * The main set of styles used for the component, independent
+     * of any dynamically added styles.
+     */
+    get mainStyles() {
+        var _a;
+        // 1. Styles overrides take top precedence.
+        if (this._mainStyles === null) {
+            const definition = this.definition;
+            if (this.source.resolveStyles) {
+                // 2. Allow for element instance overrides next.
+                this._mainStyles = this.source.resolveStyles();
+            }
+            else if (definition.styles) {
+                // 3. Default to the static definition.
+                this._mainStyles = (_a = definition.styles) !== null && _a !== void 0 ? _a : null;
+            }
+        }
+        return this._mainStyles;
+    }
+    set mainStyles(value) {
+        if (this._mainStyles === value) {
+            return;
+        }
+        if (this._mainStyles !== null) {
+            this.removeStyles(this._mainStyles);
+        }
+        this._mainStyles = value;
+        if (!this.needsInitialization) {
+            this.addStyles(value);
+        }
+    }
+    /**
+     * Adds the behavior to the component.
+     * @param behavior - The behavior to add.
+     */
+    addBehavior(behavior) {
+        var _a, _b;
+        const targetBehaviors = (_a = this.behaviors) !== null && _a !== void 0 ? _a : (this.behaviors = new Map());
+        const count = (_b = targetBehaviors.get(behavior)) !== null && _b !== void 0 ? _b : 0;
+        if (count === 0) {
+            targetBehaviors.set(behavior, 1);
+            behavior.addedCallback && behavior.addedCallback(this);
+            if (behavior.connectedCallback && this.isConnected) {
+                behavior.connectedCallback(this);
+            }
+        }
+        else {
+            targetBehaviors.set(behavior, count + 1);
+        }
+    }
+    /**
+     * Removes the behavior from the component.
+     * @param behavior - The behavior to remove.
+     * @param force - Forces removal even if this behavior was added more than once.
+     */
+    removeBehavior(behavior, force = false) {
+        const targetBehaviors = this.behaviors;
+        if (targetBehaviors === null) {
+            return;
+        }
+        const count = targetBehaviors.get(behavior);
+        if (count === void 0) {
+            return;
+        }
+        if (count === 1 || force) {
+            targetBehaviors.delete(behavior);
+            if (behavior.disconnectedCallback && this.isConnected) {
+                behavior.disconnectedCallback(this);
+            }
+            behavior.removedCallback && behavior.removedCallback(this);
+        }
+        else {
+            targetBehaviors.set(behavior, count - 1);
+        }
+    }
+    /**
+     * Adds styles to this element. Providing an HTMLStyleElement will attach the element instance to the shadowRoot.
+     * @param styles - The styles to add.
+     */
+    addStyles(styles) {
+        var _a;
+        if (!styles) {
+            return;
+        }
+        const source = this.source;
+        const target = (_a = getShadowRoot(source)) !== null && _a !== void 0 ? _a : source.getRootNode();
+        if (styles instanceof HTMLElement) {
+            target.append(styles);
+        }
+        else if (!styles.isAttachedTo(target)) {
+            const sourceBehaviors = styles.behaviors;
+            styles.addStylesTo(target);
+            if (sourceBehaviors !== null) {
+                for (let i = 0, ii = sourceBehaviors.length; i < ii; ++i) {
+                    this.addBehavior(sourceBehaviors[i]);
+                }
+            }
+        }
+    }
+    /**
+     * Removes styles from this element. Providing an HTMLStyleElement will detach the element instance from the shadowRoot.
+     * @param styles - the styles to remove.
+     */
+    removeStyles(styles) {
+        var _a;
+        if (!styles) {
+            return;
+        }
+        const source = this.source;
+        const target = (_a = getShadowRoot(source)) !== null && _a !== void 0 ? _a : source.getRootNode();
+        if (styles instanceof HTMLElement) {
+            target.removeChild(styles);
+        }
+        else if (styles.isAttachedTo(target)) {
+            const sourceBehaviors = styles.behaviors;
+            styles.removeStylesFrom(target);
+            if (sourceBehaviors !== null) {
+                for (let i = 0, ii = sourceBehaviors.length; i < ii; ++i) {
+                    this.addBehavior(sourceBehaviors[i]);
+                }
+            }
+        }
+    }
+    /**
+     * Runs connected lifecycle behavior on the associated element.
+     */
+    connect() {
+        if (this._isConnected) {
+            return;
+        }
+        if (this.needsInitialization) {
+            this.finishInitialization();
+        }
+        else if (this.view !== null) {
+            this.view.bind(this.source);
+        }
+        const behaviors = this.behaviors;
+        if (behaviors !== null) {
+            for (const key of behaviors.keys()) {
+                key.connectedCallback && key.connectedCallback(this);
+            }
+        }
+        this.setIsConnected(true);
+    }
+    /**
+     * Runs disconnected lifecycle behavior on the associated element.
+     */
+    disconnect() {
+        if (!this._isConnected) {
+            return;
+        }
+        this.setIsConnected(false);
+        if (this.view !== null) {
+            this.view.unbind();
+        }
+        const behaviors = this.behaviors;
+        if (behaviors !== null) {
+            for (const key of behaviors.keys()) {
+                key.disconnectedCallback && key.disconnectedCallback(this);
+            }
+        }
+    }
+    /**
+     * 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.source, 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.source.dispatchEvent(new CustomEvent(type, Object.assign(Object.assign({ detail }, defaultEventOptions), options)));
+        }
+        return false;
+    }
+    finishInitialization() {
+        const element = this.source;
+        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.mainStyles);
+        this.needsInitialization = false;
+    }
+    renderTemplate(template) {
+        var _a;
+        // 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 element = this.source;
+        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);
+            this.view.sourceLifetime =
+                SourceLifetime.coupled;
+        }
+    }
+    /**
+     * 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 ElementController(element, definition));
+    }
+}
+
+/* eslint-disable-next-line @typescript-eslint/explicit-function-return-type */
+function createFASTElement(BaseType) {
+    const type = class extends BaseType {
+        constructor() {
+            /* eslint-disable-next-line */
+            super();
+            ElementController.forCustomElement(this);
+        }
+        $emit(type, detail, options) {
+            return this.$fastController.emit(type, detail, options);
+        }
+        connectedCallback() {
+            this.$fastController.connect();
+        }
+        disconnectedCallback() {
+            this.$fastController.disconnect();
+        }
+        attributeChangedCallback(name, oldValue, newValue) {
+            this.$fastController.onAttributeChangedCallback(name, oldValue, newValue);
+        }
+    };
+    FASTElementDefinition.registerBaseType(type);
+    return type;
+}
+function compose(type, nameOrDef) {
+    if (isFunction(type)) {
+        return FASTElementDefinition.compose(type, nameOrDef);
+    }
+    return FASTElementDefinition.compose(this, type);
+}
+function define(type, nameOrDef) {
+    if (isFunction(type)) {
+        return FASTElementDefinition.compose(type, nameOrDef).define().type;
+    }
+    return FASTElementDefinition.compose(this, type).define().type;
+}
+function from(BaseType) {
+    return createFASTElement(BaseType);
+}
+/**
+ * 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,
+    /**
+     * 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,
+    /**
+     * Defines metadata for a FASTElement which can be used to later define the element.
+     * @public
+     */
+    compose,
+});
+/**
+ * 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) {
+        define(type, nameOrDef);
+    };
+}
+
+export { AdoptedStyleSheetsStrategy, ArrayObserver, Aspect, AttributeConfiguration, AttributeDefinition, Binding, CSSDirective, ChildrenDirective, Compiler, DOM, ElementController, ElementStyles, ExecutionContext, FAST, FASTElement, FASTElementDefinition, HTMLBindingDirective, HTMLDirective, HTMLView, Markup, NodeObservationDirective, Observable, Parser, PropertyChangeNotifier, RefDirective, RepeatBehavior, RepeatDirective, SlottedDirective, SourceLifetime, Splice, SpliceStrategy, SpliceStrategySupport, StatelessAttachedAttributeDirective, SubscriberSet, Updates, ViewBehaviorOrchestrator, ViewTemplate, attr, bind, booleanConverter, children, createMetadataLocator, createTypeRegistry, css, cssDirective, cssPartial, customElement, elements, emptyArray, html, htmlDirective, lengthOf, listener, normalizeBinding, nullableNumberConverter, observable, oneTime, ref, repeat, slotted, volatile, when };