@vonage/vivid 3.0.0-next.2 → 3.0.0-next.5

package/shared/index2.js

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