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

package/dist/fast-element.js

@@ -112,7 +112,7 @@ if (FAST.error === void 0) {
     Object.assign(FAST, {
         warn() { },
         error(code) {
-            return new Error(`Code ${code}`);
+            return new Error(`Error ${code}`);
         },
         addMessages() { },
     });
@@ -143,10 +143,34 @@ function createTypeRegistry() {
             return typeToDefinition.get(key);
         },
         getForInstance(object) {
+            if (object === null || object === void 0) {
+                return void 0;
+            }
             return typeToDefinition.get(object.constructor);
         },
     });
 }
+/**
+ * Creates a function capable of locating metadata associated with a type.
+ * @returns A metadata locator function.
+ * @internal
+ */
+function createMetadataLocator() {
+    const metadataLookup = new WeakMap();
+    return function (target) {
+        let metadata = metadataLookup.get(target);
+        if (metadata === void 0) {
+            let currentTarget = Reflect.getPrototypeOf(target);
+            while (metadata === void 0 && currentTarget !== null) {
+                metadata = metadataLookup.get(currentTarget);
+                currentTarget = Reflect.getPrototypeOf(currentTarget);
+            }
+            metadata = metadata === void 0 ? [] : metadata.slice(0);
+            metadataLookup.set(target, metadata);
+        }
+        return metadata;
+    };
+}
 
 /**
  * @internal
@@ -388,6 +412,21 @@ class PropertyChangeNotifier {
     }
 }
 
+/**
+ * Describes how the source's lifetime relates to its controller's lifetime.
+ * @public
+ */
+const SourceLifetime = Object.freeze({
+    /**
+     * The source to controller lifetime relationship is unknown.
+     */
+    unknown: void 0,
+    /**
+     * The source and controller lifetimes are coupled to one another.
+     * They can/will be GC'd together.
+     */
+    coupled: 1,
+});
 /**
  * Common Observable APIs.
  * @public
@@ -396,7 +435,6 @@ const Observable = FAST.getById(2 /* KernelServiceId.observable */, () => {
     const queueUpdate = Updates.enqueue;
     const volatileRegex = /(:|&&|\|\||if)/;
     const notifierLookup = new WeakMap();
-    const accessorLookup = new WeakMap();
     let watcher = void 0;
     let createArrayObserver = (array) => {
         throw FAST.error(1101 /* Message.needsArrayObservation */);
@@ -411,19 +449,7 @@ const Observable = FAST.getById(2 /* KernelServiceId.observable */, () => {
         }
         return found;
     }
-    function getAccessors(target) {
-        let accessors = accessorLookup.get(target);
-        if (accessors === void 0) {
-            let currentTarget = Reflect.getPrototypeOf(target);
-            while (accessors === void 0 && currentTarget !== null) {
-                accessors = accessorLookup.get(currentTarget);
-                currentTarget = Reflect.getPrototypeOf(currentTarget);
-            }
-            accessors = accessors === void 0 ? [] : accessors.slice(0);
-            accessorLookup.set(target, accessors);
-        }
-        return accessors;
-    }
+    const getAccessors = createMetadataLocator();
     class DefaultObservableAccessor {
         constructor(name) {
             this.name = name;
@@ -449,10 +475,10 @@ const Observable = FAST.getById(2 /* KernelServiceId.observable */, () => {
             }
         }
     }
-    class BindingObserverImplementation extends SubscriberSet {
-        constructor(binding, initialSubscriber, isVolatileBinding = false) {
-            super(binding, initialSubscriber);
-            this.binding = binding;
+    class ExpressionNotifierImplementation extends SubscriberSet {
+        constructor(expression, initialSubscriber, isVolatileBinding = false) {
+            super(expression, initialSubscriber);
+            this.expression = expression;
             this.isVolatileBinding = isVolatileBinding;
             this.needsRefresh = true;
             this.needsQueue = true;
@@ -467,6 +493,22 @@ const Observable = FAST.getById(2 /* KernelServiceId.observable */, () => {
         setMode(isAsync) {
             this.isAsync = this.needsQueue = isAsync;
         }
+        bind(controller) {
+            this.controller = controller;
+            const value = this.observe(controller.source, controller.context);
+            if (!controller.isBound && this.requiresUnbind(controller)) {
+                controller.onUnbind(this);
+            }
+            return value;
+        }
+        requiresUnbind(controller) {
+            return (controller.sourceLifetime !== SourceLifetime.coupled ||
+                this.first !== this.last ||
+                this.first.propertySource !== controller.source);
+        }
+        unbind(controller) {
+            this.dispose();
+        }
         observe(source, context) {
             if (this.needsRefresh && this.last !== null) {
                 this.dispose();
@@ -474,10 +516,19 @@ const Observable = FAST.getById(2 /* KernelServiceId.observable */, () => {
             const previousWatcher = watcher;
             watcher = this.needsRefresh ? this : void 0;
             this.needsRefresh = this.isVolatileBinding;
-            const result = this.binding(source, context !== null && context !== void 0 ? context : ExecutionContext.default);
-            watcher = previousWatcher;
+            let result;
+            try {
+                result = this.expression(source, context);
+            }
+            finally {
+                watcher = previousWatcher;
+            }
             return result;
         }
+        // backwards compat with v1 kernel
+        disconnect() {
+            this.dispose();
+        }
         dispose() {
             if (this.last !== null) {
                 let current = this.first;
@@ -604,22 +655,22 @@ const Observable = FAST.getById(2 /* KernelServiceId.observable */, () => {
          */
         getAccessors,
         /**
-         * Creates a {@link BindingObserver} that can watch the
-         * provided {@link Binding} for changes.
-         * @param binding - The binding to observe.
+         * Creates a {@link ExpressionNotifier} that can watch the
+         * provided {@link Expression} for changes.
+         * @param expression - The binding to observe.
          * @param initialSubscriber - An initial subscriber to changes in the binding value.
          * @param isVolatileBinding - Indicates whether the binding's dependency list must be re-evaluated on every value evaluation.
          */
-        binding(binding, initialSubscriber, isVolatileBinding = this.isVolatileBinding(binding)) {
-            return new BindingObserverImplementation(binding, initialSubscriber, isVolatileBinding);
+        binding(expression, initialSubscriber, isVolatileBinding = this.isVolatileBinding(expression)) {
+            return new ExpressionNotifierImplementation(expression, initialSubscriber, isVolatileBinding);
         },
         /**
          * Determines whether a binding expression is volatile and needs to have its dependency list re-evaluated
          * on every evaluation of the value.
-         * @param binding - The binding to inspect.
+         * @param expression - The binding to inspect.
          */
-        isVolatileBinding(binding) {
-            return volatileRegex.test(binding.toString());
+        isVolatileBinding(expression) {
+            return volatileRegex.test(expression.toString());
         },
     });
 });
@@ -658,73 +709,40 @@ const contextEvent = FAST.getById(3 /* KernelServiceId.contextEvent */, () => {
         },
     };
 });
-class DefaultExecutionContext {
-    constructor(parentSource = null, parentContext = null) {
-        this.index = 0;
-        this.length = 0;
-        this.parent = parentSource;
-        this.parentContext = parentContext;
-    }
-    get event() {
-        return contextEvent.get();
-    }
-    get isEven() {
-        return this.index % 2 === 0;
-    }
-    get isOdd() {
-        return this.index % 2 !== 0;
-    }
-    get isFirst() {
-        return this.index === 0;
-    }
-    get isInMiddle() {
-        return !this.isFirst && !this.isLast;
-    }
-    get isLast() {
-        return this.index === this.length - 1;
-    }
-    eventDetail() {
-        return this.event.detail;
-    }
-    eventTarget() {
-        return this.event.target;
-    }
-    updatePosition(index, length) {
-        this.index = index;
-        this.length = length;
-    }
-    createChildContext(parentSource) {
-        return new DefaultExecutionContext(parentSource, this);
-    }
-    createItemContext(index, length) {
-        const childContext = Object.create(this);
-        childContext.index = index;
-        childContext.length = length;
-        return childContext;
-    }
-}
-Observable.defineProperty(DefaultExecutionContext.prototype, "index");
-Observable.defineProperty(DefaultExecutionContext.prototype, "length");
 /**
- * The common execution context APIs.
+ * Provides additional contextual information available to behaviors and expressions.
  * @public
  */
 const ExecutionContext = Object.freeze({
-    default: new DefaultExecutionContext(),
     /**
-     * Sets the event for the current execution context.
-     * @param event - The event to set.
-     * @internal
+     * A default execution context.
      */
-    setEvent(event) {
-        contextEvent.set(event);
+    default: {
+        index: 0,
+        length: 0,
+        get event() {
+            return ExecutionContext.getEvent();
+        },
+        eventDetail() {
+            return this.event.detail;
+        },
+        eventTarget() {
+            return this.event.target;
+        },
     },
     /**
-     * Creates a new root execution context.
-     * @returns A new execution context.
+     * Gets the current event.
+     * @returns An event object.
      */
-    create() {
-        return new DefaultExecutionContext();
+    getEvent() {
+        return contextEvent.get();
+    },
+    /**
+     * Sets the current event.
+     * @param event - An event object.
+     */
+    setEvent(event) {
+        contextEvent.set(event);
     },
 });
 
@@ -793,10 +811,311 @@ const SpliceStrategySupport = Object.freeze({
 const reset = new Splice(0, emptyArray, 0);
 reset.reset = true;
 const resetSplices = [reset];
+// Note: This function is *based* on the computation of the Levenshtein
+// "edit" distance. The one change is that "updates" are treated as two
+// edits - not one. With Array splices, an update is really a delete
+// followed by an add. By retaining this, we optimize for "keeping" the
+// maximum array items in the original array. For example:
+//
+//   'xxxx123' to '123yyyy'
+//
+// With 1-edit updates, the shortest path would be just to update all seven
+// characters. With 2-edit updates, we delete 4, leave 3, and add 4. This
+// leaves the substring '123' intact.
+function calcEditDistances(current, currentStart, currentEnd, old, oldStart, oldEnd) {
+    // "Deletion" columns
+    const rowCount = oldEnd - oldStart + 1;
+    const columnCount = currentEnd - currentStart + 1;
+    const distances = new Array(rowCount);
+    let north;
+    let west;
+    // "Addition" rows. Initialize null column.
+    for (let i = 0; i < rowCount; ++i) {
+        distances[i] = new Array(columnCount);
+        distances[i][0] = i;
+    }
+    // Initialize null row
+    for (let j = 0; j < columnCount; ++j) {
+        distances[0][j] = j;
+    }
+    for (let i = 1; i < rowCount; ++i) {
+        for (let j = 1; j < columnCount; ++j) {
+            if (current[currentStart + j - 1] === old[oldStart + i - 1]) {
+                distances[i][j] = distances[i - 1][j - 1];
+            }
+            else {
+                north = distances[i - 1][j] + 1;
+                west = distances[i][j - 1] + 1;
+                distances[i][j] = north < west ? north : west;
+            }
+        }
+    }
+    return distances;
+}
+// This starts at the final weight, and walks "backward" by finding
+// the minimum previous weight recursively until the origin of the weight
+// matrix.
+function spliceOperationsFromEditDistances(distances) {
+    let i = distances.length - 1;
+    let j = distances[0].length - 1;
+    let current = distances[i][j];
+    const edits = [];
+    while (i > 0 || j > 0) {
+        if (i === 0) {
+            edits.push(2 /* Edit.add */);
+            j--;
+            continue;
+        }
+        if (j === 0) {
+            edits.push(3 /* Edit.delete */);
+            i--;
+            continue;
+        }
+        const northWest = distances[i - 1][j - 1];
+        const west = distances[i - 1][j];
+        const north = distances[i][j - 1];
+        let min;
+        if (west < north) {
+            min = west < northWest ? west : northWest;
+        }
+        else {
+            min = north < northWest ? north : northWest;
+        }
+        if (min === northWest) {
+            if (northWest === current) {
+                edits.push(0 /* Edit.leave */);
+            }
+            else {
+                edits.push(1 /* Edit.update */);
+                current = northWest;
+            }
+            i--;
+            j--;
+        }
+        else if (min === west) {
+            edits.push(3 /* Edit.delete */);
+            i--;
+            current = west;
+        }
+        else {
+            edits.push(2 /* Edit.add */);
+            j--;
+            current = north;
+        }
+    }
+    return edits.reverse();
+}
+function sharedPrefix(current, old, searchLength) {
+    for (let i = 0; i < searchLength; ++i) {
+        if (current[i] !== old[i]) {
+            return i;
+        }
+    }
+    return searchLength;
+}
+function sharedSuffix(current, old, searchLength) {
+    let index1 = current.length;
+    let index2 = old.length;
+    let count = 0;
+    while (count < searchLength && current[--index1] === old[--index2]) {
+        count++;
+    }
+    return count;
+}
+function intersect(start1, end1, start2, end2) {
+    // Disjoint
+    if (end1 < start2 || end2 < start1) {
+        return -1;
+    }
+    // Adjacent
+    if (end1 === start2 || end2 === start1) {
+        return 0;
+    }
+    // Non-zero intersect, span1 first
+    if (start1 < start2) {
+        if (end1 < end2) {
+            return end1 - start2; // Overlap
+        }
+        return end2 - start2; // Contained
+    }
+    // Non-zero intersect, span2 first
+    if (end2 < end1) {
+        return end2 - start1; // Overlap
+    }
+    return end1 - start1; // Contained
+}
+/**
+ * @remarks
+ * Lacking individual splice mutation information, the minimal set of
+ * splices can be synthesized given the previous state and final state of an
+ * array. The basic approach is to calculate the edit distance matrix and
+ * choose the shortest path through it.
+ *
+ * Complexity: O(l * p)
+ *   l: The length of the current array
+ *   p: The length of the old array
+ */
+function calc(current, currentStart, currentEnd, old, oldStart, oldEnd) {
+    let prefixCount = 0;
+    let suffixCount = 0;
+    const minLength = Math.min(currentEnd - currentStart, oldEnd - oldStart);
+    if (currentStart === 0 && oldStart === 0) {
+        prefixCount = sharedPrefix(current, old, minLength);
+    }
+    if (currentEnd === current.length && oldEnd === old.length) {
+        suffixCount = sharedSuffix(current, old, minLength - prefixCount);
+    }
+    currentStart += prefixCount;
+    oldStart += prefixCount;
+    currentEnd -= suffixCount;
+    oldEnd -= suffixCount;
+    if (currentEnd - currentStart === 0 && oldEnd - oldStart === 0) {
+        return emptyArray;
+    }
+    if (currentStart === currentEnd) {
+        const splice = new Splice(currentStart, [], 0);
+        while (oldStart < oldEnd) {
+            splice.removed.push(old[oldStart++]);
+        }
+        return [splice];
+    }
+    else if (oldStart === oldEnd) {
+        return [new Splice(currentStart, [], currentEnd - currentStart)];
+    }
+    const ops = spliceOperationsFromEditDistances(calcEditDistances(current, currentStart, currentEnd, old, oldStart, oldEnd));
+    const splices = [];
+    let splice = void 0;
+    let index = currentStart;
+    let oldIndex = oldStart;
+    for (let i = 0; i < ops.length; ++i) {
+        switch (ops[i]) {
+            case 0 /* Edit.leave */:
+                if (splice !== void 0) {
+                    splices.push(splice);
+                    splice = void 0;
+                }
+                index++;
+                oldIndex++;
+                break;
+            case 1 /* Edit.update */:
+                if (splice === void 0) {
+                    splice = new Splice(index, [], 0);
+                }
+                splice.addedCount++;
+                index++;
+                splice.removed.push(old[oldIndex]);
+                oldIndex++;
+                break;
+            case 2 /* Edit.add */:
+                if (splice === void 0) {
+                    splice = new Splice(index, [], 0);
+                }
+                splice.addedCount++;
+                index++;
+                break;
+            case 3 /* Edit.delete */:
+                if (splice === void 0) {
+                    splice = new Splice(index, [], 0);
+                }
+                splice.removed.push(old[oldIndex]);
+                oldIndex++;
+                break;
+            // no default
+        }
+    }
+    if (splice !== void 0) {
+        splices.push(splice);
+    }
+    return splices;
+}
+function merge(splice, splices) {
+    let inserted = false;
+    let insertionOffset = 0;
+    for (let i = 0; i < splices.length; i++) {
+        const current = splices[i];
+        current.index += insertionOffset;
+        if (inserted) {
+            continue;
+        }
+        const intersectCount = intersect(splice.index, splice.index + splice.removed.length, current.index, current.index + current.addedCount);
+        if (intersectCount >= 0) {
+            // Merge the two splices
+            splices.splice(i, 1);
+            i--;
+            insertionOffset -= current.addedCount - current.removed.length;
+            splice.addedCount += current.addedCount - intersectCount;
+            const deleteCount = splice.removed.length + current.removed.length - intersectCount;
+            if (!splice.addedCount && !deleteCount) {
+                // merged splice is a noop. discard.
+                inserted = true;
+            }
+            else {
+                let currentRemoved = current.removed;
+                if (splice.index < current.index) {
+                    // some prefix of splice.removed is prepended to current.removed.
+                    const prepend = splice.removed.slice(0, current.index - splice.index);
+                    prepend.push(...currentRemoved);
+                    currentRemoved = prepend;
+                }
+                if (splice.index + splice.removed.length >
+                    current.index + current.addedCount) {
+                    // some suffix of splice.removed is appended to current.removed.
+                    const append = splice.removed.slice(current.index + current.addedCount - splice.index);
+                    currentRemoved.push(...append);
+                }
+                splice.removed = currentRemoved;
+                if (current.index < splice.index) {
+                    splice.index = current.index;
+                }
+            }
+        }
+        else if (splice.index < current.index) {
+            // Insert splice here.
+            inserted = true;
+            splices.splice(i, 0, splice);
+            i++;
+            const offset = splice.addedCount - splice.removed.length;
+            current.index += offset;
+            insertionOffset += offset;
+        }
+    }
+    if (!inserted) {
+        splices.push(splice);
+    }
+}
+function project(array, changes) {
+    let splices = [];
+    const initialSplices = [];
+    for (let i = 0, ii = changes.length; i < ii; i++) {
+        merge(changes[i], initialSplices);
+    }
+    for (let i = 0, ii = initialSplices.length; i < ii; ++i) {
+        const splice = initialSplices[i];
+        if (splice.addedCount === 1 && splice.removed.length === 1) {
+            if (splice.removed[0] !== array[splice.index]) {
+                splices.push(splice);
+            }
+            continue;
+        }
+        splices = splices.concat(calc(array, splice.index, splice.index + splice.addedCount, splice.removed, 0, splice.removed.length));
+    }
+    return splices;
+}
+/**
+ * A SpliceStrategy that attempts to merge all splices into the minimal set of
+ * splices needed to represent the change from the old array to the new array.
+ * @public
+ */
 let defaultSpliceStrategy = Object.freeze({
-    support: SpliceStrategySupport.splice,
+    support: SpliceStrategySupport.optimized,
     normalize(previous, current, changes) {
-        return previous === void 0 ? changes !== null && changes !== void 0 ? changes : emptyArray : resetSplices;
+        if (previous === void 0) {
+            if (changes === void 0) {
+                return emptyArray;
+            }
+            return changes.length > 1 ? project(current, changes) : changes;
+        }
+        return resetSplices;
     },
     pop(array, observer, pop, args) {
         const notEmpty = array.length > 0;
@@ -981,7 +1300,7 @@ const ArrayObserver = Object.freeze({
  * @returns The length of the array.
  * @public
  */
-function length(array) {
+function lengthOf(array) {
     if (!array) {
         return 0;
     }
@@ -1065,6 +1384,20 @@ class ElementStyles {
     static setDefaultStrategy(Strategy) {
         DefaultStyleStrategy = Strategy;
     }
+    /**
+     * Normalizes a set of composable style options.
+     * @param styles - The style options to normalize.
+     * @returns A singular ElementStyles instance or undefined.
+     */
+    static normalize(styles) {
+        return styles === void 0
+            ? void 0
+            : Array.isArray(styles)
+                ? new ElementStyles(styles)
+                : styles instanceof ElementStyles
+                    ? styles
+                    : new ElementStyles([styles]);
+    }
 }
 /**
  * Indicates whether the DOM supports the adoptedStyleSheets feature.
@@ -1209,11 +1542,11 @@ class CSSPartial {
         }
         return this.css;
     }
-    bind(el) {
-        el.$fastController.addStyles(this.styles);
+    addedCallback(controller) {
+        controller.addStyles(this.styles);
     }
-    unbind(el) {
-        el.$fastController.removeStyles(this.styles);
+    removedCallback(controller) {
+        controller.removeStyles(this.styles);
     }
 }
 CSSDirective.define(CSSPartial);
@@ -1352,6 +1685,67 @@ const Parser = Object.freeze({
     },
 });
 
+/**
+ * Bridges between ViewBehaviors and HostBehaviors, enabling a host to
+ * control ViewBehaviors.
+ * @public
+ */
+const ViewBehaviorOrchestrator = Object.freeze({
+    /**
+     * Creates a ViewBehaviorOrchestrator.
+     * @param source - The source to to associate behaviors with.
+     * @returns A ViewBehaviorOrchestrator.
+     */
+    create(source) {
+        const behaviors = [];
+        const targets = {};
+        let unbindables = null;
+        let isConnected = false;
+        return {
+            source,
+            context: ExecutionContext.default,
+            targets,
+            get isBound() {
+                return isConnected;
+            },
+            addBehaviorFactory(factory, target) {
+                const nodeId = factory.nodeId || (factory.nodeId = nextId());
+                factory.id || (factory.id = nextId());
+                this.addTarget(nodeId, target);
+                this.addBehavior(factory.createBehavior());
+            },
+            addTarget(nodeId, target) {
+                targets[nodeId] = target;
+            },
+            addBehavior(behavior) {
+                behaviors.push(behavior);
+                if (isConnected) {
+                    behavior.bind(this);
+                }
+            },
+            onUnbind(unbindable) {
+                if (unbindables === null) {
+                    unbindables = [];
+                }
+                unbindables.push(unbindable);
+            },
+            connectedCallback(controller) {
+                if (!isConnected) {
+                    isConnected = true;
+                    behaviors.forEach(x => x.bind(this));
+                }
+            },
+            disconnectedCallback(controller) {
+                if (isConnected) {
+                    isConnected = false;
+                    if (unbindables !== null) {
+                        unbindables.forEach(x => x.unbind(this));
+                    }
+                }
+            },
+        };
+    },
+});
 const registry = createTypeRegistry();
 /**
  * Instructs the template engine to apply behavior to a node.
@@ -1391,6 +1785,22 @@ function htmlDirective(options) {
         HTMLDirective.define(type, options);
     };
 }
+/**
+ * Captures a binding expression along with related information and capabilities.
+ *
+ * @public
+ */
+class Binding {
+    /**
+     * Creates a binding.
+     * @param evaluate - Evaluates the binding.
+     * @param isVolatile - Indicates whether the binding is volatile.
+     */
+    constructor(evaluate, isVolatile = false) {
+        this.evaluate = evaluate;
+        this.isVolatile = isVolatile;
+    }
+}
 /**
  * The type of HTML aspect to target.
  * @public
@@ -1428,26 +1838,22 @@ const Aspect = Object.freeze({
      *
      * @param directive - The directive to assign the aspect to.
      * @param value - The value to base the aspect determination on.
+     * @remarks
+     * If a falsy value is provided, then the content aspect will be assigned.
      */
     assign(directive, value) {
-        directive.sourceAspect = value;
         if (!value) {
+            directive.aspectType = Aspect.content;
             return;
         }
+        directive.sourceAspect = value;
         switch (value[0]) {
             case ":":
                 directive.targetAspect = value.substring(1);
-                switch (directive.targetAspect) {
-                    case "innerHTML":
-                        directive.aspectType = Aspect.property;
-                        break;
-                    case "classList":
-                        directive.aspectType = Aspect.tokenList;
-                        break;
-                    default:
-                        directive.aspectType = Aspect.property;
-                        break;
-                }
+                directive.aspectType =
+                    directive.targetAspect === "classList"
+                        ? Aspect.tokenList
+                        : Aspect.property;
                 break;
             case "?":
                 directive.targetAspect = value.substring(1);
@@ -1458,14 +1864,8 @@ const Aspect = Object.freeze({
                 directive.aspectType = Aspect.event;
                 break;
             default:
-                if (value === "class") {
-                    directive.targetAspect = "className";
-                    directive.aspectType = Aspect.property;
-                }
-                else {
-                    directive.targetAspect = value;
-                    directive.aspectType = Aspect.attribute;
-                }
+                directive.targetAspect = value;
+                directive.aspectType = Aspect.attribute;
                 break;
         }
     },
@@ -1481,13 +1881,10 @@ class StatelessAttachedAttributeDirective {
      */
     constructor(options) {
         this.options = options;
-    }
-    /**
-     * Creates a behavior.
-     * @param targets - The targets available for behaviors to be attached to.
-     */
-    createBehavior(targets) {
-        return this;
+        /**
+         * The unique id of the factory.
+         */
+        this.id = nextId();
     }
     /**
      * Creates a placeholder string based on the directive's index within the template.
@@ -1498,6 +1895,13 @@ class StatelessAttachedAttributeDirective {
     createHTML(add) {
         return Markup.attribute(add(this));
     }
+    /**
+     * Creates a behavior.
+     * @param targets - The targets available for behaviors to be attached to.
+     */
+    createBehavior() {
+        return this;
+    }
 }
 
 const createInnerHTMLBinding = globalThis.TrustedHTML
@@ -1509,107 +1913,26 @@ const createInnerHTMLBinding = globalThis.TrustedHTML
         throw FAST.error(1202 /* Message.bindingInnerHTMLRequiresTrustedTypes */);
     }
     : (binding) => binding;
-/**
- * Describes how aspects of an HTML element will be affected by bindings.
- * @public
- */
-const BindingMode = Object.freeze({
-    /**
-     * Creates a binding mode based on the supplied behavior types.
-     * @param UpdateType - The base behavior type used to update aspects.
-     * @param EventType - The base behavior type used to respond to events.
-     * @returns A new binding mode.
-     */
-    define(UpdateType, EventType = EventBinding) {
-        return Object.freeze({
-            [1]: d => new UpdateType(d, DOM.setAttribute),
-            [2]: d => new UpdateType(d, DOM.setBooleanAttribute),
-            [3]: d => new UpdateType(d, (t, a, v) => (t[a] = v)),
-            [4]: d => new (createContentBinding(UpdateType))(d, updateContentTarget),
-            [5]: d => new UpdateType(d, updateTokenListTarget),
-            [6]: d => new EventType(d),
-        });
-    },
-});
-/**
- * Describes the configuration for a binding expression.
- * @public
- */
-const BindingConfig = Object.freeze({
-    /**
-     * Creates a binding configuration based on the provided mode and options.
-     * @param mode - The mode to use for the configuration.
-     * @param defaultOptions - The default options to use for the configuration.
-     * @returns A new binding configuration.
-     */
-    define(mode, defaultOptions) {
-        const config = (options) => {
-            return {
-                mode: config.mode,
-                options: Object.assign({}, defaultOptions, options),
-            };
-        };
-        config.options = defaultOptions;
-        config.mode = mode;
-        return config;
-    },
-});
-/**
- * A base binding behavior for DOM updates.
- * @public
- */
-class UpdateBinding {
-    /**
-     * Creates an instance of UpdateBinding.
-     * @param directive - The directive that has the configuration for this behavior.
-     * @param updateTarget - The function used to update the target with the latest value.
-     */
-    constructor(directive, updateTarget) {
-        this.directive = directive;
-        this.updateTarget = updateTarget;
+class OnChangeBinding extends Binding {
+    createObserver(_, subscriber) {
+        return Observable.binding(this.evaluate, subscriber, this.isVolatile);
     }
-    /**
-     * Bind this behavior to the source.
-     * @param source - The source to bind to.
-     * @param context - The execution context that the binding is operating within.
-     * @param targets - The targets that behaviors in a view can attach to.
-     */
-    bind(source, context, targets) { }
-    /**
-     * Unbinds this behavior from the source.
-     * @param source - The source to unbind from.
-     * @param context - The execution context that the binding is operating within.
-     * @param targets - The targets that behaviors in a view can attach to.
-     */
-    unbind(source, context, targets) { }
-    /**
-     * Creates a behavior.
-     * @param targets - The targets available for behaviors to be attached to.
-     */
-    createBehavior(targets) {
+}
+class OneTimeBinding extends Binding {
+    createObserver() {
         return this;
     }
+    bind(controller) {
+        return this.evaluate(controller.source, controller.context);
+    }
 }
-function createContentBinding(Type) {
-    return class extends Type {
-        unbind(source, context, targets) {
-            super.unbind(source, context, targets);
-            const target = targets[this.directive.nodeId];
-            const view = target.$fastView;
-            if (view !== void 0 && view.isComposed) {
-                view.unbind();
-                view.needsBindOnly = true;
-            }
-        }
-    };
-}
-function updateContentTarget(target, aspect, value, source, context) {
+function updateContent(target, aspect, value, controller) {
     // If there's no actual value, then this equates to the
     // empty string for the purposes of content bindings.
     if (value === null || value === undefined) {
         value = "";
     }
-    // If the value has a "create" method, then it's a template-like.
+    // If the value has a "create" method, then it's a ContentTemplate.
     if (value.create) {
         target.textContent = "";
         let view = target.$fastView;
@@ -1635,14 +1958,14 @@ function updateContentTarget(target, aspect, value, source, context) {
         // and that there's actually no need to compose it.
         if (!view.isComposed) {
             view.isComposed = true;
-            view.bind(source, context);
+            view.bind(controller.source, controller.context);
             view.insertBefore(target);
             target.$fastView = view;
             target.$fastTemplate = value;
         }
         else if (view.needsBindOnly) {
             view.needsBindOnly = false;
-            view.bind(source, context);
+            view.bind(controller.source, controller.context);
         }
     }
     else {
@@ -1662,10 +1985,9 @@ function updateContentTarget(target, aspect, value, source, context) {
         target.textContent = value;
     }
 }
-function updateTokenListTarget(target, aspect, value) {
+function updateTokenList(target, aspect, value) {
     var _a;
-    const directive = this.directive;
-    const lookup = `${directive.id}-t`;
+    const lookup = `${this.id}-t`;
     const state = (_a = target[lookup]) !== null && _a !== void 0 ? _a : (target[lookup] = { c: 0, v: Object.create(null) });
     const versions = state.v;
     let currentVersion = state.c;
@@ -1695,311 +2017,8 @@ function updateTokenListTarget(target, aspect, value) {
         }
     }
 }
-/**
- * A binding behavior for one-time bindings.
- * @public
- */
-class OneTimeBinding extends UpdateBinding {
-    /**
-     * Bind this behavior to the source.
-     * @param source - The source to bind to.
-     * @param context - The execution context that the binding is operating within.
-     * @param targets - The targets that behaviors in a view can attach to.
-     */
-    bind(source, context, targets) {
-        const directive = this.directive;
-        this.updateTarget(targets[directive.nodeId], directive.targetAspect, directive.binding(source, context), source, context);
-    }
-}
-const signals = Object.create(null);
-/**
- * A binding behavior for signal bindings.
- * @public
- */
-class SignalBinding extends UpdateBinding {
-    constructor() {
-        super(...arguments);
-        this.handlerProperty = `${this.directive.id}-h`;
-    }
-    /**
-     * Bind this behavior to the source.
-     * @param source - The source to bind to.
-     * @param context - The execution context that the binding is operating within.
-     * @param targets - The targets that behaviors in a view can attach to.
-     */
-    bind(source, context, targets) {
-        const directive = this.directive;
-        const target = targets[directive.nodeId];
-        const signal = this.getSignal(source, context);
-        const handler = (target[this.handlerProperty] = () => {
-            this.updateTarget(target, directive.targetAspect, directive.binding(source, context), source, context);
-        });
-        handler();
-        const found = signals[signal];
-        if (found) {
-            Array.isArray(found)
-                ? found.push(handler)
-                : (signals[signal] = [found, handler]);
-        }
-        else {
-            signals[signal] = handler;
-        }
-    }
-    /**
-     * Unbinds this behavior from the source.
-     * @param source - The source to unbind from.
-     * @param context - The execution context that the binding is operating within.
-     * @param targets - The targets that behaviors in a view can attach to.
-     */
-    unbind(source, context, targets) {
-        const signal = this.getSignal(source, context);
-        const found = signals[signal];
-        if (found && Array.isArray(found)) {
-            const directive = this.directive;
-            const target = targets[directive.nodeId];
-            const handler = target[this.handlerProperty];
-            const index = found.indexOf(handler);
-            if (index !== -1) {
-                found.splice(index, 1);
-            }
-        }
-        else {
-            signals[signal] = void 0;
-        }
-    }
-    getSignal(source, context) {
-        const options = this.directive.options;
-        return isString(options) ? options : options(source, context);
-    }
-    /**
-     * Sends the specified signal to signaled bindings.
-     * @param signal - The signal to send.
-     * @public
-     */
-    static send(signal) {
-        const found = signals[signal];
-        if (found) {
-            Array.isArray(found) ? found.forEach(x => x()) : found();
-        }
-    }
-}
-/**
- * A binding behavior for bindings that change.
- * @public
- */
-class ChangeBinding extends UpdateBinding {
-    /**
-     * Creates an instance of ChangeBinding.
-     * @param directive - The directive that has the configuration for this behavior.
-     * @param updateTarget - The function used to update the target with the latest value.
-     */
-    constructor(directive, updateTarget) {
-        super(directive, updateTarget);
-        this.isBindingVolatile = Observable.isVolatileBinding(directive.binding);
-        this.observerProperty = `${directive.id}-o`;
-    }
-    /**
-     * Returns the binding observer used to update the node.
-     * @param target - The target node.
-     * @returns A BindingObserver.
-     */
-    getObserver(target) {
-        var _a;
-        return ((_a = target[this.observerProperty]) !== null && _a !== void 0 ? _a : (target[this.observerProperty] = Observable.binding(this.directive.binding, this, this.isBindingVolatile)));
-    }
-    /**
-     * Bind this behavior to the source.
-     * @param source - The source to bind to.
-     * @param context - The execution context that the binding is operating within.
-     * @param targets - The targets that behaviors in a view can attach to.
-     */
-    bind(source, context, targets) {
-        const directive = this.directive;
-        const target = targets[directive.nodeId];
-        const observer = this.getObserver(target);
-        observer.target = target;
-        observer.source = source;
-        observer.context = context;
-        this.updateTarget(target, directive.targetAspect, observer.observe(source, context), source, context);
-    }
-    /**
-     * Unbinds this behavior from the source.
-     * @param source - The source to unbind from.
-     * @param context - The execution context that the binding is operating within.
-     * @param targets - The targets that behaviors in a view can attach to.
-     */
-    unbind(source, context, targets) {
-        const target = targets[this.directive.nodeId];
-        const observer = this.getObserver(target);
-        observer.dispose();
-        observer.target = null;
-        observer.source = null;
-        observer.context = null;
-    }
-    /** @internal */
-    handleChange(binding, observer) {
-        const target = observer.target;
-        const source = observer.source;
-        const context = observer.context;
-        this.updateTarget(target, this.directive.targetAspect, observer.observe(source, context), source, context);
-    }
-}
-/**
- * A binding behavior for handling events.
- * @public
- */
-class EventBinding {
-    /**
-     * Creates an instance of EventBinding.
-     * @param directive - The directive that has the configuration for this behavior.
-     */
-    constructor(directive) {
-        this.directive = directive;
-        this.sourceProperty = `${directive.id}-s`;
-        this.contextProperty = `${directive.id}-c`;
-    }
-    /**
-     * Bind this behavior to the source.
-     * @param source - The source to bind to.
-     * @param context - The execution context that the binding is operating within.
-     * @param targets - The targets that behaviors in a view can attach to.
-     */
-    bind(source, context, targets) {
-        const directive = this.directive;
-        const target = targets[directive.nodeId];
-        target[this.sourceProperty] = source;
-        target[this.contextProperty] = context;
-        target.addEventListener(directive.targetAspect, this, directive.options);
-    }
-    /**
-     * Unbinds this behavior from the source.
-     * @param source - The source to unbind from.
-     * @param context - The execution context that the binding is operating within.
-     * @param targets - The targets that behaviors in a view can attach to.
-     */
-    unbind(source, context, targets) {
-        const directive = this.directive;
-        const target = targets[directive.nodeId];
-        target[this.sourceProperty] = target[this.contextProperty] = null;
-        target.removeEventListener(directive.targetAspect, this, directive.options);
-    }
-    /**
-     * Creates a behavior.
-     * @param targets - The targets available for behaviors to be attached to.
-     */
-    createBehavior(targets) {
-        return this;
-    }
-    /**
-     * @internal
-     */
-    handleEvent(event) {
-        const target = event.currentTarget;
-        ExecutionContext.setEvent(event);
-        const result = this.directive.binding(target[this.sourceProperty], target[this.contextProperty]);
-        ExecutionContext.setEvent(null);
-        if (result !== true) {
-            event.preventDefault();
-        }
-    }
-}
-let twoWaySettings = {
-    determineChangeEvent() {
-        return "change";
-    },
-};
-/**
- * A binding behavior for bindings that update in two directions.
- * @public
- */
-class TwoWayBinding extends ChangeBinding {
-    /**
-     * Bind this behavior to the source.
-     * @param source - The source to bind to.
-     * @param context - The execution context that the binding is operating within.
-     * @param targets - The targets that behaviors in a view can attach to.
-     */
-    bind(source, context, targets) {
-        var _a;
-        super.bind(source, context, targets);
-        const directive = this.directive;
-        const target = targets[directive.nodeId];
-        if (!this.changeEvent) {
-            this.changeEvent =
-                (_a = directive.options.changeEvent) !== null && _a !== void 0 ? _a : twoWaySettings.determineChangeEvent(directive, target);
-        }
-        target.addEventListener(this.changeEvent, this);
-    }
-    /**
-     * Unbinds this behavior from the source.
-     * @param source - The source to unbind from.
-     * @param context - The execution context that the binding is operating within.
-     * @param targets - The targets that behaviors in a view can attach to.
-     */
-    unbind(source, context, targets) {
-        super.unbind(source, context, targets);
-        targets[this.directive.nodeId].removeEventListener(this.changeEvent, this);
-    }
-    /** @internal */
-    handleEvent(event) {
-        const directive = this.directive;
-        const target = event.currentTarget;
-        let value;
-        switch (directive.aspectType) {
-            case 1:
-                value = target.getAttribute(directive.targetAspect);
-                break;
-            case 2:
-                value = target.hasAttribute(directive.targetAspect);
-                break;
-            case 4:
-                value = target.innerText;
-                break;
-            default:
-                value = target[directive.targetAspect];
-                break;
-        }
-        const observer = this.getObserver(target);
-        const last = observer.last; // using internal API!!!
-        last.propertySource[last.propertyName] = directive.options.fromView(value);
-    }
-    /**
-     * Configures two-way binding.
-     * @param settings - The settings to use for the two-way binding system.
-     */
-    static configure(settings) {
-        twoWaySettings = settings;
-    }
-}
-/**
- * The default onChange binding configuration.
- * @public
- */
-const onChange = BindingConfig.define(BindingMode.define(ChangeBinding), {});
-/**
- * The default twoWay binding configuration.
- * @public
- */
-const twoWay = BindingConfig.define(BindingMode.define(TwoWayBinding), {
-    fromView: v => v,
-});
-/**
- * The default onTime binding configuration.
- * @public
- */
-const oneTime = BindingConfig.define(BindingMode.define(OneTimeBinding), {
-    once: true,
-});
-const signalMode = BindingMode.define(SignalBinding);
-/**
- * Creates a signal binding configuration with the supplied options.
- * @param options - The signal name or a binding to use to retrieve the signal name.
- * @returns A binding configuration.
- * @public
- */
-const signal = (options) => {
-    return { mode: signalMode, options };
-};
+const setProperty = (t, a, v) => (t[a] = v);
+const eventTarget = () => void 0;
 /**
  * A directive that applies bindings.
  * @public
@@ -2007,19 +2026,22 @@ const signal = (options) => {
 class HTMLBindingDirective {
     /**
      * Creates an instance of HTMLBindingDirective.
-     * @param binding - The binding to apply.
-     * @param mode - The binding mode to use when applying the binding.
-     * @param options - The options to configure the binding with.
+     * @param dataBinding - The binding configuration to apply.
      */
-    constructor(binding, mode, options) {
-        this.binding = binding;
-        this.mode = mode;
-        this.options = options;
-        this.factory = null;
+    constructor(dataBinding) {
+        this.dataBinding = dataBinding;
+        this.updateTarget = null;
+        /**
+         * The unique id of the factory.
+         */
+        this.id = nextId();
         /**
          * The type of aspect to target.
          */
         this.aspectType = Aspect.content;
+        /** @internal */
+        this.bind = this.bindDefault;
+        this.data = `${this.id}-d`;
     }
     /**
      * Creates HTML to be used within a template.
@@ -2030,31 +2052,133 @@ class HTMLBindingDirective {
     }
     /**
      * Creates a behavior.
-     * @param targets - The targets available for behaviors to be attached to.
      */
-    createBehavior(targets) {
-        if (this.factory == null) {
+    createBehavior() {
+        if (this.updateTarget === null) {
             if (this.targetAspect === "innerHTML") {
-                this.binding = createInnerHTMLBinding(this.binding);
+                this.dataBinding.evaluate = createInnerHTMLBinding(this.dataBinding.evaluate);
             }
-            this.factory = this.mode[this.aspectType](this);
+            switch (this.aspectType) {
+                case 1:
+                    this.updateTarget = DOM.setAttribute;
+                    break;
+                case 2:
+                    this.updateTarget = DOM.setBooleanAttribute;
+                    break;
+                case 3:
+                    this.updateTarget = setProperty;
+                    break;
+                case 4:
+                    this.bind = this.bindContent;
+                    this.updateTarget = updateContent;
+                    break;
+                case 5:
+                    this.updateTarget = updateTokenList;
+                    break;
+                case 6:
+                    this.bind = this.bindEvent;
+                    this.updateTarget = eventTarget;
+                    break;
+                default:
+                    throw FAST.error(1205 /* Message.unsupportedBindingBehavior */);
+            }
+        }
+        return this;
+    }
+    /** @internal */
+    bindDefault(controller) {
+        var _a;
+        const target = controller.targets[this.nodeId];
+        const observer = (_a = target[this.data]) !== null && _a !== void 0 ? _a : (target[this.data] = this.dataBinding.createObserver(this, this));
+        observer.target = target;
+        observer.controller = controller;
+        this.updateTarget(target, this.targetAspect, observer.bind(controller), controller);
+        if (this.updateTarget === updateContent) {
+            controller.onUnbind(this);
+        }
+    }
+    /** @internal */
+    bindContent(controller) {
+        this.bindDefault(controller);
+        controller.onUnbind(this);
+    }
+    /** @internal */
+    bindEvent(controller) {
+        const target = controller.targets[this.nodeId];
+        target[this.data] = controller;
+        target.addEventListener(this.targetAspect, this, this.dataBinding.options);
+    }
+    /** @internal */
+    unbind(controller) {
+        const target = controller.targets[this.nodeId];
+        const view = target.$fastView;
+        if (view !== void 0 && view.isComposed) {
+            view.unbind();
+            view.needsBindOnly = true;
+        }
+    }
+    /** @internal */
+    handleEvent(event) {
+        const target = event.currentTarget;
+        ExecutionContext.setEvent(event);
+        const controller = target[this.data];
+        const result = this.dataBinding.evaluate(controller.source, controller.context);
+        ExecutionContext.setEvent(null);
+        if (result !== true) {
+            event.preventDefault();
         }
-        return this.factory.createBehavior(targets);
+    }
+    /** @internal */
+    handleChange(binding, observer) {
+        const target = observer.target;
+        const controller = observer.controller;
+        this.updateTarget(target, this.targetAspect, observer.bind(controller), controller);
     }
 }
 HTMLDirective.define(HTMLBindingDirective, { aspected: true });
 /**
- * Creates a binding directive with the specified configuration.
- * @param binding - The binding expression.
- * @param config - The binding configuration.
- * @returns A binding directive.
+ * Creates an standard binding.
+ * @param binding - The binding to refresh when changed.
+ * @param isVolatile - Indicates whether the binding is volatile or not.
+ * @returns A binding configuration.
+ * @public
+ */
+function bind(binding, isVolatile = Observable.isVolatileBinding(binding)) {
+    return new OnChangeBinding(binding, isVolatile);
+}
+/**
+ * Creates a one time binding
+ * @param binding - The binding to refresh when signaled.
+ * @returns A binding configuration.
  * @public
  */
-function bind(binding, config = onChange) {
-    if (!("mode" in config)) {
-        config = onChange(config);
-    }
-    return new HTMLBindingDirective(binding, config.mode, config.options);
+function oneTime(binding) {
+    return new OneTimeBinding(binding);
+}
+/**
+ * Creates an event listener binding.
+ * @param binding - The binding to invoke when the event is raised.
+ * @param options - Event listener options.
+ * @returns A binding configuration.
+ * @public
+ */
+function listener(binding, options) {
+    const config = new OnChangeBinding(binding, false);
+    config.options = options;
+    return config;
+}
+/**
+ * Normalizes the input value into a binding.
+ * @param value - The value to create the default binding for.
+ * @returns A binding configuration for the provided value.
+ * @public
+ */
+function normalizeBinding(value) {
+    return isFunction(value)
+        ? bind(value)
+        : value instanceof Binding
+            ? value
+            : oneTime(() => value);
 }
 
 function removeNodeSequence(firstNode, lastNode) {
@@ -2083,17 +2207,87 @@ class HTMLView {
         this.factories = factories;
         this.targets = targets;
         this.behaviors = null;
+        this.unbindables = [];
         /**
          * The data that the view is bound to.
          */
         this.source = null;
+        /**
+         * Indicates whether the controller is bound.
+         */
+        this.isBound = false;
+        /**
+         * Indicates how the source's lifetime relates to the controller's lifetime.
+         */
+        this.sourceLifetime = SourceLifetime.unknown;
         /**
          * The execution context the view is running within.
          */
-        this.context = null;
+        this.context = this;
+        /**
+         * The index of the current item within a repeat context.
+         */
+        this.index = 0;
+        /**
+         * The length of the current collection within a repeat context.
+         */
+        this.length = 0;
         this.firstChild = fragment.firstChild;
         this.lastChild = fragment.lastChild;
     }
+    /**
+     * The current event within an event handler.
+     */
+    get event() {
+        return ExecutionContext.getEvent();
+    }
+    /**
+     * Indicates whether the current item within a repeat context
+     * has an even index.
+     */
+    get isEven() {
+        return this.index % 2 === 0;
+    }
+    /**
+     * Indicates whether the current item within a repeat context
+     * has an odd index.
+     */
+    get isOdd() {
+        return this.index % 2 !== 0;
+    }
+    /**
+     * Indicates whether the current item within a repeat context
+     * is the first item in the collection.
+     */
+    get isFirst() {
+        return this.index === 0;
+    }
+    /**
+     * Indicates whether the current item within a repeat context
+     * is somewhere in the middle of the collection.
+     */
+    get isInMiddle() {
+        return !this.isFirst && !this.isLast;
+    }
+    /**
+     * Indicates whether the current item within a repeat context
+     * is the last item in the collection.
+     */
+    get isLast() {
+        return this.index === this.length - 1;
+    }
+    /**
+     * Returns the typed event detail of a custom event.
+     */
+    eventDetail() {
+        return this.event.detail;
+    }
+    /**
+     * Returns the typed event target of the event.
+     */
+    eventTarget() {
+        return this.event.target;
+    }
     /**
      * Appends the view's DOM nodes to the referenced node.
      * @param node - The parent node to append the view's DOM nodes to.
@@ -2110,8 +2304,10 @@ class HTMLView {
             node.parentNode.insertBefore(this.fragment, node);
         }
         else {
-            const parentNode = node.parentNode;
             const end = this.lastChild;
+            if (node.previousSibling === end)
+                return;
+            const parentNode = node.parentNode;
             let current = this.firstChild;
             let next;
             while (current !== end) {
@@ -2146,58 +2342,61 @@ class HTMLView {
         removeNodeSequence(this.firstChild, this.lastChild);
         this.unbind();
     }
+    onUnbind(behavior) {
+        this.unbindables.push(behavior);
+    }
     /**
      * Binds a view's behaviors to its binding source.
      * @param source - The binding source for the view's binding behaviors.
      * @param context - The execution context to run the behaviors within.
      */
-    bind(source, context) {
-        let behaviors = this.behaviors;
-        const oldSource = this.source;
-        if (oldSource === source) {
+    bind(source, context = this) {
+        if (this.source === source) {
             return;
         }
-        this.source = source;
-        this.context = context;
-        const targets = this.targets;
-        if (oldSource !== null) {
-            for (let i = 0, ii = behaviors.length; i < ii; ++i) {
-                const current = behaviors[i];
-                current.unbind(oldSource, context, targets);
-                current.bind(source, context, targets);
-            }
-        }
-        else if (behaviors === null) {
+        let behaviors = this.behaviors;
+        if (behaviors === null) {
+            this.source = source;
+            this.context = context;
             this.behaviors = behaviors = new Array(this.factories.length);
             const factories = this.factories;
             for (let i = 0, ii = factories.length; i < ii; ++i) {
-                const behavior = factories[i].createBehavior(targets);
-                behavior.bind(source, context, targets);
+                const behavior = factories[i].createBehavior();
+                behavior.bind(this);
                 behaviors[i] = behavior;
             }
         }
         else {
+            if (this.source !== null) {
+                this.evaluateUnbindables();
+            }
+            this.isBound = false;
+            this.source = source;
+            this.context = context;
             for (let i = 0, ii = behaviors.length; i < ii; ++i) {
-                behaviors[i].bind(source, context, targets);
+                behaviors[i].bind(this);
             }
         }
+        this.isBound = true;
     }
     /**
      * Unbinds a view's behaviors from its binding source.
      */
     unbind() {
-        const oldSource = this.source;
-        if (oldSource === null) {
+        if (!this.isBound || this.source === null) {
             return;
         }
-        const targets = this.targets;
-        const context = this.context;
-        const behaviors = this.behaviors;
-        for (let i = 0, ii = behaviors.length; i < ii; ++i) {
-            behaviors[i].unbind(oldSource, context, targets);
-        }
+        this.evaluateUnbindables();
         this.source = null;
-        this.context = null;
+        this.context = this;
+        this.isBound = false;
+    }
+    evaluateUnbindables() {
+        const unbindables = this.unbindables;
+        for (let i = 0, ii = unbindables.length; i < ii; ++i) {
+            unbindables[i].unbind(this);
+        }
+        unbindables.length = 0;
     }
     /**
      * Efficiently disposes of a contiguous range of synthetic view instances.
@@ -2213,6 +2412,8 @@ class HTMLView {
         }
     }
 }
+Observable.defineProperty(HTMLView.prototype, "index");
+Observable.defineProperty(HTMLView.prototype, "length");
 
 const targetIdFrom = (parentId, nodeIndex) => `${parentId}.${nodeIndex}`;
 const descriptorCache = {};
@@ -2221,6 +2422,22 @@ const next = {
     index: 0,
     node: null,
 };
+function tryWarn(name) {
+    if (!name.startsWith("fast-")) {
+        FAST.warn(1204 /* Message.hostBindingWithoutHost */, { name });
+    }
+}
+const warningHost = new Proxy(document.createElement("div"), {
+    get(target, property) {
+        tryWarn(property);
+        const value = Reflect.get(target, property);
+        return isFunction(value) ? value.bind(target) : value;
+    },
+    set(target, property, value) {
+        tryWarn(property);
+        return Reflect.set(target, property, value);
+    },
+});
 class CompilationContext {
     constructor(fragment, directives) {
         this.fragment = fragment;
@@ -2271,7 +2488,7 @@ class CompilationContext {
         const fragment = this.fragment.cloneNode(true);
         const targets = Object.create(this.proto);
         targets.r = fragment;
-        targets.h = hostBindingTarget !== null && hostBindingTarget !== void 0 ? hostBindingTarget : fragment;
+        targets.h = hostBindingTarget !== null && hostBindingTarget !== void 0 ? hostBindingTarget : warningHost;
         for (const id of this.nodeIds) {
             targets[id]; // trigger locator
         }
@@ -2288,7 +2505,7 @@ function compileAttributes(context, parentId, node, nodeId, nodeIndex, includeBa
         let result = null;
         if (parseResult === null) {
             if (includeBasicValues) {
-                result = bind(() => attrValue, oneTime);
+                result = new HTMLBindingDirective(oneTime(() => attrValue));
                 Aspect.assign(result, attr.name);
             }
         }
@@ -2325,6 +2542,7 @@ function compileContent(context, node, parentId, nodeId, nodeIndex) {
         }
         else {
             currentNode.textContent = " ";
+            Aspect.assign(currentPart);
             context.addFactory(currentPart, parentId, nodeId, nodeIndex);
         }
         lastNode = currentNode;
@@ -2457,22 +2675,28 @@ const Compiler = {
             return parts[0];
         }
         let sourceAspect;
+        let binding;
+        let isVolatile = false;
         const partCount = parts.length;
         const finalParts = parts.map((x) => {
             if (isString(x)) {
                 return () => x;
             }
             sourceAspect = x.sourceAspect || sourceAspect;
-            return x.binding;
+            binding = x.dataBinding || binding;
+            isVolatile = isVolatile || x.dataBinding.isVolatile;
+            return x.dataBinding.evaluate;
         });
-        const binding = (scope, context) => {
+        const expression = (scope, context) => {
             let output = "";
             for (let i = 0; i < partCount; ++i) {
                 output += finalParts[i](scope, context);
             }
             return output;
         };
-        const directive = bind(binding);
+        binding.evaluate = expression;
+        binding.isVolatile = isVolatile;
+        const directive = new HTMLBindingDirective(binding);
         Aspect.assign(directive, sourceAspect);
         return directive;
     },
@@ -2510,9 +2734,9 @@ class ViewTemplate {
      * @param hostBindingTarget - An HTML element to target the host bindings at if different from the
      * host that the template is being attached to.
      */
-    render(source, host, hostBindingTarget, context) {
-        const view = this.create(hostBindingTarget !== null && hostBindingTarget !== void 0 ? hostBindingTarget : host);
-        view.bind(source, context !== null && context !== void 0 ? context : ExecutionContext.default);
+    render(source, host, hostBindingTarget) {
+        const view = this.create(hostBindingTarget);
+        view.bind(source);
         view.appendTo(host);
         return view;
     }
@@ -2552,12 +2776,12 @@ function html(strings, ...values) {
         let definition;
         html += currentString;
         if (isFunction(currentValue)) {
-            html += createAspectedHTML(bind(currentValue), currentString, add);
+            html += createAspectedHTML(new HTMLBindingDirective(bind(currentValue)), currentString, add);
         }
         else if (isString(currentValue)) {
             const match = lastAttributeNameRegex.exec(currentString);
             if (match !== null) {
-                const directive = bind(() => currentValue, oneTime);
+                const directive = new HTMLBindingDirective(oneTime(() => currentValue));
                 Aspect.assign(directive, match[2]);
                 html += directive.createHTML(add);
             }
@@ -2565,8 +2789,11 @@ function html(strings, ...values) {
                 html += currentValue;
             }
         }
+        else if (currentValue instanceof Binding) {
+            html += createAspectedHTML(new HTMLBindingDirective(currentValue), currentString, add);
+        }
         else if ((definition = HTMLDirective.getForInstance(currentValue)) === void 0) {
-            html += createAspectedHTML(bind(() => currentValue, oneTime), currentString, add);
+            html += createAspectedHTML(new HTMLBindingDirective(oneTime(() => currentValue)), currentString, add);
         }
         else {
             if (definition.aspected) {
@@ -2579,26 +2806,6 @@ function html(strings, ...values) {
     }
     return new ViewTemplate(html + strings[strings.length - 1], factories);
 }
-/**
- * Transforms a template literal string into a ChildViewTemplate.
- * @param strings - The string fragments that are interpolated with the values.
- * @param values - The values that are interpolated with the string fragments.
- * @remarks
- * The html helper supports interpolation of strings, numbers, binding expressions,
- * other template instances, and Directive instances.
- * @public
- */
-const child = html;
-/**
- * Transforms a template literal string into an ItemViewTemplate.
- * @param strings - The string fragments that are interpolated with the values.
- * @param values - The values that are interpolated with the string fragments.
- * @remarks
- * The html helper supports interpolation of strings, numbers, binding expressions,
- * other template instances, and Directive instances.
- * @public
- */
-const item = html;
 
 /**
  * The runtime behavior for template references.
@@ -2606,20 +2813,12 @@ const item = html;
  */
 class RefDirective extends StatelessAttachedAttributeDirective {
     /**
-     * Bind this behavior to the source.
-     * @param source - The source to bind to.
-     * @param context - The execution context that the binding is operating within.
-     * @param targets - The targets that behaviors in a view can attach to.
+     * Bind this behavior.
+     * @param controller - The view controller that manages the lifecycle of this behavior.
      */
-    bind(source, context, targets) {
-        source[this.options] = targets[this.nodeId];
+    bind(controller) {
+        controller.source[this.options] = controller.targets[this.nodeId];
     }
-    /**
-     * Unbinds this behavior from the source.
-     * @param source - The source to unbind from.
-     */
-    /* eslint-disable-next-line @typescript-eslint/no-empty-function */
-    unbind() { }
 }
 HTMLDirective.define(RefDirective);
 /**
@@ -2631,27 +2830,34 @@ const ref = (propertyName) => new RefDirective(propertyName);
 
 /**
  * A directive that enables basic conditional rendering in a template.
- * @param binding - The condition to test for rendering.
+ * @param condition - The condition to test for rendering.
  * @param templateOrTemplateBinding - The template or a binding that gets
  * the template to render when the condition is true.
  * @public
  */
-function when(binding, templateOrTemplateBinding) {
-    const getTemplate = isFunction(templateOrTemplateBinding)
+function when(condition, templateOrTemplateBinding) {
+    const dataBinding = isFunction(condition) ? condition : () => condition;
+    const templateBinding = isFunction(templateOrTemplateBinding)
         ? templateOrTemplateBinding
         : () => templateOrTemplateBinding;
-    return (source, context) => binding(source, context) ? getTemplate(source, context) : null;
+    return (source, context) => dataBinding(source, context) ? templateBinding(source, context) : null;
 }
 
 const defaultRepeatOptions = Object.freeze({
     positioning: false,
     recycle: true,
 });
-function bindWithoutPositioning(view, items, index, context) {
-    view.bind(items[index], context);
+function bindWithoutPositioning(view, items, index, controller) {
+    view.context.parent = controller.source;
+    view.context.parentContext = controller.context;
+    view.bind(items[index]);
 }
-function bindWithPositioning(view, items, index, context) {
-    view.bind(items[index], context.createItemContext(index, items.length));
+function bindWithPositioning(view, items, index, controller) {
+    view.context.parent = controller.source;
+    view.context.parentContext = controller.context;
+    view.context.length = items.length;
+    view.context.index = index;
+    view.bind(items[index]);
 }
 /**
  * A behavior that renders a template for each item in an array.
@@ -2661,57 +2867,45 @@ class RepeatBehavior {
     /**
      * Creates an instance of RepeatBehavior.
      * @param location - The location in the DOM to render the repeat.
-     * @param itemsBinding - The array to render.
+     * @param dataBinding - The array to render.
      * @param isItemsBindingVolatile - Indicates whether the items binding has volatile dependencies.
      * @param templateBinding - The template to render for each item.
      * @param isTemplateBindingVolatile - Indicates whether the template binding has volatile dependencies.
      * @param options - Options used to turn on special repeat features.
      */
-    constructor(location, itemsBinding, isItemsBindingVolatile, templateBinding, isTemplateBindingVolatile, options) {
-        this.location = location;
-        this.itemsBinding = itemsBinding;
-        this.templateBinding = templateBinding;
-        this.options = options;
-        this.source = null;
+    constructor(directive) {
+        this.directive = directive;
         this.views = [];
         this.items = null;
         this.itemsObserver = null;
-        this.context = void 0;
-        this.childContext = void 0;
         this.bindView = bindWithoutPositioning;
-        this.itemsBindingObserver = Observable.binding(itemsBinding, this, isItemsBindingVolatile);
-        this.templateBindingObserver = Observable.binding(templateBinding, this, isTemplateBindingVolatile);
-        if (options.positioning) {
+        this.itemsBindingObserver = directive.dataBinding.createObserver(directive, this);
+        this.templateBindingObserver = directive.templateBinding.createObserver(directive, this);
+        if (directive.options.positioning) {
             this.bindView = bindWithPositioning;
         }
     }
     /**
-     * Bind this behavior to the source.
-     * @param source - The source to bind to.
-     * @param context - The execution context that the binding is operating within.
+     * Bind this behavior.
+     * @param controller - The view controller that manages the lifecycle of this behavior.
      */
-    bind(source, context) {
-        this.source = source;
-        this.context = context;
-        this.childContext = context.createChildContext(source);
-        this.items = this.itemsBindingObserver.observe(source, this.context);
-        this.template = this.templateBindingObserver.observe(source, this.context);
+    bind(controller) {
+        this.location = controller.targets[this.directive.nodeId];
+        this.controller = controller;
+        this.items = this.itemsBindingObserver.bind(controller);
+        this.template = this.templateBindingObserver.bind(controller);
         this.observeItems(true);
         this.refreshAllViews();
+        controller.onUnbind(this);
     }
     /**
-     * Unbinds this behavior from the source.
-     * @param source - The source to unbind from.
+     * Unbinds this behavior.
      */
     unbind() {
-        this.source = null;
-        this.items = null;
         if (this.itemsObserver !== null) {
             this.itemsObserver.unsubscribe(this);
         }
         this.unbindAllViews();
-        this.itemsBindingObserver.dispose();
-        this.templateBindingObserver.dispose();
     }
     /**
      * Handles changes in the array, its items, and the repeat template.
@@ -2719,15 +2913,18 @@ class RepeatBehavior {
      * @param args - The details about what was changed.
      */
     handleChange(source, args) {
-        if (source === this.itemsBinding) {
-            this.items = this.itemsBindingObserver.observe(this.source, this.context);
+        if (args === this.itemsBindingObserver) {
+            this.items = this.itemsBindingObserver.bind(this.controller);
             this.observeItems();
             this.refreshAllViews();
         }
-        else if (source === this.templateBinding) {
-            this.template = this.templateBindingObserver.observe(this.source, this.context);
+        else if (args === this.templateBindingObserver) {
+            this.template = this.templateBindingObserver.bind(this.controller);
             this.refreshAllViews(true);
         }
+        else if (!args[0]) {
+            return;
+        }
         else if (args[0].reset) {
             this.refreshAllViews();
         }
@@ -2752,39 +2949,57 @@ class RepeatBehavior {
     }
     updateViews(splices) {
         const views = this.views;
-        const childContext = this.childContext;
-        const totalRemoved = [];
         const bindView = this.bindView;
-        let removeDelta = 0;
-        for (let i = 0, ii = splices.length; i < ii; ++i) {
-            const splice = splices[i];
-            const removed = splice.removed;
-            totalRemoved.push(...views.splice(splice.index + removeDelta, removed.length));
-            removeDelta -= splice.addedCount;
-        }
         const items = this.items;
         const template = this.template;
+        const controller = this.controller;
+        const recycle = this.directive.options.recycle;
+        const leftoverViews = [];
+        let leftoverIndex = 0;
+        let availableViews = 0;
         for (let i = 0, ii = splices.length; i < ii; ++i) {
             const splice = splices[i];
+            const removed = splice.removed;
+            let removeIndex = 0;
             let addIndex = splice.index;
             const end = addIndex + splice.addedCount;
+            const removedViews = views.splice(splice.index, removed.length);
+            const totalAvailableViews = (availableViews =
+                leftoverViews.length + removedViews.length);
             for (; addIndex < end; ++addIndex) {
                 const neighbor = views[addIndex];
                 const location = neighbor ? neighbor.firstChild : this.location;
-                const view = this.options.recycle && totalRemoved.length > 0
-                    ? totalRemoved.shift()
-                    : template.create();
+                let view;
+                if (recycle && availableViews > 0) {
+                    if (removeIndex <= totalAvailableViews && removedViews.length > 0) {
+                        view = removedViews[removeIndex];
+                        removeIndex++;
+                    }
+                    else {
+                        view = leftoverViews[leftoverIndex];
+                        leftoverIndex++;
+                    }
+                    availableViews--;
+                }
+                else {
+                    view = template.create();
+                }
                 views.splice(addIndex, 0, view);
-                bindView(view, items, addIndex, childContext);
+                bindView(view, items, addIndex, controller);
                 view.insertBefore(location);
             }
+            if (removedViews[removeIndex]) {
+                leftoverViews.push(...removedViews.slice(removeIndex));
+            }
         }
-        for (let i = 0, ii = totalRemoved.length; i < ii; ++i) {
-            totalRemoved[i].dispose();
+        for (let i = leftoverIndex, ii = leftoverViews.length; i < ii; ++i) {
+            leftoverViews[i].dispose();
         }
-        if (this.options.positioning) {
+        if (this.directive.options.positioning) {
             for (let i = 0, ii = views.length; i < ii; ++i) {
-                views[i].context.updatePosition(i, ii);
+                const context = views[i].context;
+                context.length = i;
+                context.index = ii;
             }
         }
     }
@@ -2793,11 +3008,11 @@ class RepeatBehavior {
         const template = this.template;
         const location = this.location;
         const bindView = this.bindView;
-        const childContext = this.childContext;
+        const controller = this.controller;
         let itemsLength = items.length;
         let views = this.views;
         let viewsLength = views.length;
-        if (itemsLength === 0 || templateChanged) {
+        if (itemsLength === 0 || templateChanged || !this.directive.options.recycle) {
             // all views need to be removed
             HTMLView.disposeContiguousBatch(views);
             viewsLength = 0;
@@ -2807,7 +3022,7 @@ class RepeatBehavior {
             this.views = views = new Array(itemsLength);
             for (let i = 0; i < itemsLength; ++i) {
                 const view = template.create();
-                bindView(view, items, i, childContext);
+                bindView(view, items, i, controller);
                 views[i] = view;
                 view.insertBefore(location);
             }
@@ -2818,11 +3033,11 @@ class RepeatBehavior {
             for (; i < itemsLength; ++i) {
                 if (i < viewsLength) {
                     const view = views[i];
-                    bindView(view, items, i, childContext);
+                    bindView(view, items, i, controller);
                 }
                 else {
                     const view = template.create();
-                    bindView(view, items, i, childContext);
+                    bindView(view, items, i, controller);
                     views.push(view);
                     view.insertBefore(location);
                 }
@@ -2847,17 +3062,19 @@ class RepeatBehavior {
 class RepeatDirective {
     /**
      * Creates an instance of RepeatDirective.
-     * @param itemsBinding - The binding that provides the array to render.
+     * @param dataBinding - The binding that provides the array to render.
      * @param templateBinding - The template binding used to obtain a template to render for each item in the array.
      * @param options - Options used to turn on special repeat features.
      */
-    constructor(itemsBinding, templateBinding, options) {
-        this.itemsBinding = itemsBinding;
+    constructor(dataBinding, templateBinding, options) {
+        this.dataBinding = dataBinding;
         this.templateBinding = templateBinding;
         this.options = options;
+        /**
+         * The unique id of the factory.
+         */
+        this.id = nextId();
         ArrayObserver.enable();
-        this.isItemsBindingVolatile = Observable.isVolatileBinding(itemsBinding);
-        this.isTemplateBindingVolatile = Observable.isVolatileBinding(templateBinding);
     }
     /**
      * Creates a placeholder string based on the directive's index within the template.
@@ -2870,16 +3087,23 @@ class RepeatDirective {
      * Creates a behavior for the provided target node.
      * @param target - The node instance to create the behavior for.
      */
-    createBehavior(targets) {
-        return new RepeatBehavior(targets[this.nodeId], this.itemsBinding, this.isItemsBindingVolatile, this.templateBinding, this.isTemplateBindingVolatile, this.options);
+    createBehavior() {
+        return new RepeatBehavior(this);
     }
 }
 HTMLDirective.define(RepeatDirective);
-function repeat(itemsBinding, templateOrTemplateBinding, options = defaultRepeatOptions) {
-    const templateBinding = isFunction(templateOrTemplateBinding)
-        ? templateOrTemplateBinding
-        : () => templateOrTemplateBinding;
-    return new RepeatDirective(itemsBinding, templateBinding, options);
+/**
+ * A directive that enables list rendering.
+ * @param items - The array to render.
+ * @param template - The template or a template binding used obtain a template
+ * to render for each item in the array.
+ * @param options - Options used to turn on special repeat features.
+ * @public
+ */
+function repeat(items, template, options = defaultRepeatOptions) {
+    const dataBinding = normalizeBinding(items);
+    const templateBinding = normalizeBinding(template);
+    return new RepeatDirective(dataBinding, templateBinding, Object.assign(Object.assign({}, defaultRepeatOptions), options));
 }
 
 const selectElements = (value) => value.nodeType === 1;
@@ -2908,11 +3132,12 @@ class NodeObservationDirective extends StatelessAttachedAttributeDirective {
      * @param context - The execution context that the binding is operating within.
      * @param targets - The targets that behaviors in a view can attach to.
      */
-    bind(source, context, targets) {
-        const target = targets[this.nodeId];
-        target[this.sourceProperty] = source;
-        this.updateTarget(source, this.computeNodes(target));
+    bind(controller) {
+        const target = controller.targets[this.nodeId];
+        target[this.sourceProperty] = controller.source;
+        this.updateTarget(controller.source, this.computeNodes(target));
         this.observe(target);
+        controller.onUnbind(this);
     }
     /**
      * Unbinds this behavior from the source.
@@ -2920,9 +3145,9 @@ class NodeObservationDirective extends StatelessAttachedAttributeDirective {
      * @param context - The execution context that the binding is operating within.
      * @param targets - The targets that behaviors in a view can attach to.
      */
-    unbind(source, context, targets) {
-        const target = targets[this.nodeId];
-        this.updateTarget(source, emptyArray);
+    unbind(controller) {
+        const target = controller.targets[this.nodeId];
+        this.updateTarget(controller.source, emptyArray);
         this.disconnect(target);
         target[this.sourceProperty] = null;
     }
@@ -3071,6 +3296,16 @@ function children(propertyOrOptions) {
 
 const booleanMode = "boolean";
 const reflectMode = "reflect";
+/**
+ * Metadata used to configure a custom attribute's behavior.
+ * @public
+ */
+const AttributeConfiguration = Object.freeze({
+    /**
+     * Locates all attribute configurations associated with a type.
+     */
+    locate: createMetadataLocator(),
+});
 /**
  * A {@link ValueConverter} that converts to and from `boolean` values.
  * @remarks
@@ -3208,7 +3443,7 @@ class AttributeDefinition {
      */
     static collect(Owner, ...attributeLists) {
         const attributes = [];
-        attributeLists.push(Owner.attributes);
+        attributeLists.push(AttributeConfiguration.locate(Owner));
         for (let i = 0, ii = attributeLists.length; i < ii; ++i) {
             const list = attributeLists[i];
             if (list === void 0) {
@@ -3238,9 +3473,7 @@ function attr(configOrTarget, prop) {
             // - @attr({...opts})
             config.property = $prop;
         }
-        const attributes = $target.constructor.attributes ||
-            ($target.constructor.attributes = []);
-        attributes.push(config);
+        AttributeConfiguration.locate($target.constructor).push(config);
     }
     if (arguments.length > 1) {
         // Non invocation:
@@ -3258,25 +3491,24 @@ function attr(configOrTarget, prop) {
 
 const defaultShadowOptions = { mode: "open" };
 const defaultElementOptions = {};
+const fastElementBaseTypes = new Set();
 const fastElementRegistry = FAST.getById(4 /* KernelServiceId.elementRegistry */, () => createTypeRegistry());
 /**
  * Defines metadata for a FASTElement.
  * @public
  */
 class FASTElementDefinition {
-    /**
-     * 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) {
+        var _a;
+        this.platformDefined = false;
         if (isString(nameOrConfig)) {
             nameOrConfig = { name: nameOrConfig };
         }
         this.type = type;
         this.name = nameOrConfig.name;
         this.template = nameOrConfig.template;
+        this.registry = (_a = nameOrConfig.registry) !== null && _a !== void 0 ? _a : customElements;
+        const proto = type.prototype;
         const attributes = AttributeDefinition.collect(type, nameOrConfig.attributes);
         const observedAttributes = new Array(attributes.length);
         const propertyLookup = {};
@@ -3286,9 +3518,13 @@ class FASTElementDefinition {
             observedAttributes[i] = current.attribute;
             propertyLookup[current.name] = current;
             attributeLookup[current.attribute] = current;
+            Observable.defineProperty(proto, current);
         }
+        Reflect.defineProperty(type, "observedAttributes", {
+            value: observedAttributes,
+            enumerable: true,
+        });
         this.attributes = attributes;
-        this.observedAttributes = observedAttributes;
         this.propertyLookup = propertyLookup;
         this.attributeLookup = attributeLookup;
         this.shadowOptions =
@@ -3301,43 +3537,50 @@ class FASTElementDefinition {
             nameOrConfig.elementOptions === void 0
                 ? defaultElementOptions
                 : Object.assign(Object.assign({}, defaultElementOptions), nameOrConfig.elementOptions);
-        this.styles =
-            nameOrConfig.styles === void 0
-                ? void 0
-                : Array.isArray(nameOrConfig.styles)
-                    ? new ElementStyles(nameOrConfig.styles)
-                    : nameOrConfig.styles instanceof ElementStyles
-                        ? nameOrConfig.styles
-                        : new ElementStyles([nameOrConfig.styles]);
+        this.styles = ElementStyles.normalize(nameOrConfig.styles);
+        fastElementRegistry.register(this);
     }
     /**
      * Indicates if this element has been defined in at least one registry.
      */
     get isDefined() {
-        return !!fastElementRegistry.getByType(this.type);
+        return this.platformDefined;
     }
     /**
      * Defines a custom element based on this definition.
      * @param registry - The element registry to define the element in.
+     * @remarks
+     * This operation is idempotent per registry.
      */
-    define(registry = customElements) {
+    define(registry = this.registry) {
         const type = this.type;
-        if (fastElementRegistry.register(this)) {
-            const attributes = this.attributes;
-            const proto = type.prototype;
-            for (let i = 0, ii = attributes.length; i < ii; ++i) {
-                Observable.defineProperty(proto, attributes[i]);
-            }
-            Reflect.defineProperty(type, "observedAttributes", {
-                value: this.observedAttributes,
-                enumerable: true,
-            });
-        }
         if (!registry.get(this.name)) {
+            this.platformDefined = true;
             registry.define(this.name, type, this.elementOptions);
         }
         return this;
     }
+    /**
+     * Creates an instance of FASTElementDefinition.
+     * @param type - The type this definition is being created for.
+     * @param nameOrDef - The name of the element to define or a config object
+     * that describes the element to define.
+     */
+    static compose(type, nameOrDef) {
+        if (fastElementBaseTypes.has(type) || fastElementRegistry.getByType(type)) {
+            return new FASTElementDefinition(class extends type {
+            }, nameOrDef);
+        }
+        return new FASTElementDefinition(type, nameOrDef);
+    }
+    /**
+     * Registers a FASTElement base type.
+     * @param type - The type to register as a base type.
+     * @internal
+     */
+    static registerBaseType(type) {
+        fastElementBaseTypes.add(type);
+    }
 }
 /**
  * Gets the element definition associated with the specified type.
@@ -3350,22 +3593,22 @@ FASTElementDefinition.getByType = fastElementRegistry.getByType;
  */
 FASTElementDefinition.getForInstance = fastElementRegistry.getForInstance;
 
-const shadowRoots = new WeakMap();
 const defaultEventOptions = {
     bubbles: true,
     composed: true,
     cancelable: true,
 };
+const isConnectedPropertyName = "isConnected";
+const shadowRoots = new WeakMap();
 function getShadowRoot(element) {
     var _a, _b;
     return (_b = (_a = element.shadowRoot) !== null && _a !== void 0 ? _a : shadowRoots.get(element)) !== null && _b !== void 0 ? _b : null;
 }
-const isConnectedPropertyName = "isConnected";
 /**
  * Controls the lifecycle and rendering of a `FASTElement`.
  * @public
  */
-class Controller extends PropertyChangeNotifier {
+class ElementController extends PropertyChangeNotifier {
     /**
      * Creates a Controller to control the specified element.
      * @param element - The element to be controlled by this controller.
@@ -3376,12 +3619,12 @@ class Controller extends PropertyChangeNotifier {
     constructor(element, definition) {
         super(element);
         this.boundObservables = null;
-        this.behaviors = null;
         this.needsInitialization = true;
         this.hasExistingShadowRoot = false;
         this._template = null;
-        this._styles = null;
         this._isConnected = false;
+        this.behaviors = null;
+        this._mainStyles = null;
         /**
          * This allows Observable.getNotifier(...) to return the Controller
          * when the notifier for the Controller itself is being requested. The
@@ -3397,7 +3640,7 @@ class Controller extends PropertyChangeNotifier {
          * If `null` then the element is managing its own rendering.
          */
         this.view = null;
-        this.element = element;
+        this.source = element;
         this.definition = definition;
         const shadowOptions = definition.shadowOptions;
         if (shadowOptions !== void 0) {
@@ -3451,9 +3694,9 @@ class Controller extends PropertyChangeNotifier {
         // 1. Template overrides take top precedence.
         if (this._template === null) {
             const definition = this.definition;
-            if (this.element.resolveTemplate) {
+            if (this.source.resolveTemplate) {
                 // 2. Allow for element instance overrides next.
-                this._template = this.element.resolveTemplate();
+                this._template = this.source.resolveTemplate();
             }
             else if (definition.template) {
                 // 3. Default to the static definition.
@@ -3472,48 +3715,92 @@ class Controller extends PropertyChangeNotifier {
         }
     }
     /**
-     * Gets/sets the primary styles used for the component.
-     * @remarks
-     * This value can only be accurately read after connect but can be set at any time.
+     * The main set of styles used for the component, independent
+     * of any dynamically added styles.
      */
-    get styles() {
+    get mainStyles() {
         var _a;
         // 1. Styles overrides take top precedence.
-        if (this._styles === null) {
+        if (this._mainStyles === null) {
             const definition = this.definition;
-            if (this.element.resolveStyles) {
+            if (this.source.resolveStyles) {
                 // 2. Allow for element instance overrides next.
-                this._styles = this.element.resolveStyles();
+                this._mainStyles = this.source.resolveStyles();
             }
             else if (definition.styles) {
                 // 3. Default to the static definition.
-                this._styles = (_a = definition.styles) !== null && _a !== void 0 ? _a : null;
+                this._mainStyles = (_a = definition.styles) !== null && _a !== void 0 ? _a : null;
             }
         }
-        return this._styles;
+        return this._mainStyles;
     }
-    set styles(value) {
-        if (this._styles === value) {
+    set mainStyles(value) {
+        if (this._mainStyles === value) {
             return;
         }
-        if (this._styles !== null) {
-            this.removeStyles(this._styles);
+        if (this._mainStyles !== null) {
+            this.removeStyles(this._mainStyles);
         }
-        this._styles = value;
+        this._mainStyles = value;
         if (!this.needsInitialization) {
             this.addStyles(value);
         }
     }
+    /**
+     * Adds the behavior to the component.
+     * @param behavior - The behavior to add.
+     */
+    addBehavior(behavior) {
+        var _a, _b;
+        const targetBehaviors = (_a = this.behaviors) !== null && _a !== void 0 ? _a : (this.behaviors = new Map());
+        const count = (_b = targetBehaviors.get(behavior)) !== null && _b !== void 0 ? _b : 0;
+        if (count === 0) {
+            targetBehaviors.set(behavior, 1);
+            behavior.addedCallback && behavior.addedCallback(this);
+            if (behavior.connectedCallback && this.isConnected) {
+                behavior.connectedCallback(this);
+            }
+        }
+        else {
+            targetBehaviors.set(behavior, count + 1);
+        }
+    }
+    /**
+     * Removes the behavior from the component.
+     * @param behavior - The behavior to remove.
+     * @param force - Forces removal even if this behavior was added more than once.
+     */
+    removeBehavior(behavior, force = false) {
+        const targetBehaviors = this.behaviors;
+        if (targetBehaviors === null) {
+            return;
+        }
+        const count = targetBehaviors.get(behavior);
+        if (count === void 0) {
+            return;
+        }
+        if (count === 1 || force) {
+            targetBehaviors.delete(behavior);
+            if (behavior.disconnectedCallback && this.isConnected) {
+                behavior.disconnectedCallback(this);
+            }
+            behavior.removedCallback && behavior.removedCallback(this);
+        }
+        else {
+            targetBehaviors.set(behavior, count - 1);
+        }
+    }
     /**
      * Adds styles to this element. Providing an HTMLStyleElement will attach the element instance to the shadowRoot.
      * @param styles - The styles to add.
      */
     addStyles(styles) {
+        var _a;
         if (!styles) {
             return;
         }
-        const target = getShadowRoot(this.element) ||
-            this.element.getRootNode();
+        const source = this.source;
+        const target = (_a = getShadowRoot(source)) !== null && _a !== void 0 ? _a : source.getRootNode();
         if (styles instanceof HTMLElement) {
             target.append(styles);
         }
@@ -3521,7 +3808,9 @@ class Controller extends PropertyChangeNotifier {
             const sourceBehaviors = styles.behaviors;
             styles.addStylesTo(target);
             if (sourceBehaviors !== null) {
-                this.addBehaviors(sourceBehaviors);
+                for (let i = 0, ii = sourceBehaviors.length; i < ii; ++i) {
+                    this.addBehavior(sourceBehaviors[i]);
+                }
             }
         }
     }
@@ -3530,11 +3819,12 @@ class Controller extends PropertyChangeNotifier {
      * @param styles - the styles to remove.
      */
     removeStyles(styles) {
+        var _a;
         if (!styles) {
             return;
         }
-        const target = getShadowRoot(this.element) ||
-            this.element.getRootNode();
+        const source = this.source;
+        const target = (_a = getShadowRoot(source)) !== null && _a !== void 0 ? _a : source.getRootNode();
         if (styles instanceof HTMLElement) {
             target.removeChild(styles);
         }
@@ -3542,85 +3832,29 @@ class Controller extends PropertyChangeNotifier {
             const sourceBehaviors = styles.behaviors;
             styles.removeStylesFrom(target);
             if (sourceBehaviors !== null) {
-                this.removeBehaviors(sourceBehaviors);
-            }
-        }
-    }
-    /**
-     * Adds behaviors to this element.
-     * @param behaviors - The behaviors to add.
-     */
-    addBehaviors(behaviors) {
-        var _a;
-        const targetBehaviors = (_a = this.behaviors) !== null && _a !== void 0 ? _a : (this.behaviors = new Map());
-        const length = behaviors.length;
-        const behaviorsToBind = [];
-        for (let i = 0; i < length; ++i) {
-            const behavior = behaviors[i];
-            if (targetBehaviors.has(behavior)) {
-                targetBehaviors.set(behavior, targetBehaviors.get(behavior) + 1);
-            }
-            else {
-                targetBehaviors.set(behavior, 1);
-                behaviorsToBind.push(behavior);
-            }
-        }
-        if (this._isConnected) {
-            const element = this.element;
-            const context = ExecutionContext.default;
-            for (let i = 0; i < behaviorsToBind.length; ++i) {
-                behaviorsToBind[i].bind(element, context);
-            }
-        }
-    }
-    /**
-     * Removes behaviors from this element.
-     * @param behaviors - The behaviors to remove.
-     * @param force - Forces unbinding of behaviors.
-     */
-    removeBehaviors(behaviors, force = false) {
-        const targetBehaviors = this.behaviors;
-        if (targetBehaviors === null) {
-            return;
-        }
-        const length = behaviors.length;
-        const behaviorsToUnbind = [];
-        for (let i = 0; i < length; ++i) {
-            const behavior = behaviors[i];
-            if (targetBehaviors.has(behavior)) {
-                const count = targetBehaviors.get(behavior) - 1;
-                count === 0 || force
-                    ? targetBehaviors.delete(behavior) && behaviorsToUnbind.push(behavior)
-                    : targetBehaviors.set(behavior, count);
-            }
-        }
-        if (this._isConnected) {
-            const element = this.element;
-            const context = ExecutionContext.default;
-            for (let i = 0; i < behaviorsToUnbind.length; ++i) {
-                behaviorsToUnbind[i].unbind(element, context);
+                for (let i = 0, ii = sourceBehaviors.length; i < ii; ++i) {
+                    this.addBehavior(sourceBehaviors[i]);
+                }
             }
         }
     }
     /**
      * Runs connected lifecycle behavior on the associated element.
      */
-    onConnectedCallback() {
+    connect() {
         if (this._isConnected) {
             return;
         }
-        const element = this.element;
-        const context = ExecutionContext.default;
         if (this.needsInitialization) {
             this.finishInitialization();
         }
         else if (this.view !== null) {
-            this.view.bind(element, context);
+            this.view.bind(this.source);
         }
         const behaviors = this.behaviors;
         if (behaviors !== null) {
-            for (const behavior of behaviors.keys()) {
-                behavior.bind(element, context);
+            for (const key of behaviors.keys()) {
+                key.connectedCallback && key.connectedCallback(this);
             }
         }
         this.setIsConnected(true);
@@ -3628,21 +3862,18 @@ class Controller extends PropertyChangeNotifier {
     /**
      * Runs disconnected lifecycle behavior on the associated element.
      */
-    onDisconnectedCallback() {
+    disconnect() {
         if (!this._isConnected) {
             return;
         }
         this.setIsConnected(false);
-        const view = this.view;
-        if (view !== null) {
-            view.unbind();
+        if (this.view !== null) {
+            this.view.unbind();
         }
         const behaviors = this.behaviors;
         if (behaviors !== null) {
-            const element = this.element;
-            const context = ExecutionContext.default;
-            for (const behavior of behaviors.keys()) {
-                behavior.unbind(element, context);
+            for (const key of behaviors.keys()) {
+                key.disconnectedCallback && key.disconnectedCallback(this);
             }
         }
     }
@@ -3655,7 +3886,7 @@ class Controller extends PropertyChangeNotifier {
     onAttributeChangedCallback(name, oldValue, newValue) {
         const attrDef = this.definition.attributeLookup[name];
         if (attrDef !== void 0) {
-            attrDef.onAttributeChangedCallback(this.element, newValue);
+            attrDef.onAttributeChangedCallback(this.source, newValue);
         }
     }
     /**
@@ -3668,12 +3899,12 @@ class Controller extends PropertyChangeNotifier {
      */
     emit(type, detail, options) {
         if (this._isConnected) {
-            return this.element.dispatchEvent(new CustomEvent(type, Object.assign(Object.assign({ detail }, defaultEventOptions), options)));
+            return this.source.dispatchEvent(new CustomEvent(type, Object.assign(Object.assign({ detail }, defaultEventOptions), options)));
         }
         return false;
     }
     finishInitialization() {
-        const element = this.element;
+        const element = this.source;
         const boundObservables = this.boundObservables;
         // If we have any observables that were bound, re-apply their values.
         if (boundObservables !== null) {
@@ -3685,15 +3916,15 @@ class Controller extends PropertyChangeNotifier {
             this.boundObservables = null;
         }
         this.renderTemplate(this.template);
-        this.addStyles(this.styles);
+        this.addStyles(this.mainStyles);
         this.needsInitialization = false;
     }
     renderTemplate(template) {
         var _a;
-        const element = this.element;
         // When getting the host to render to, we start by looking
         // up the shadow root. If there isn't one, then that means
         // we're doing a Light DOM render to the element's direct children.
+        const element = this.source;
         const host = (_a = getShadowRoot(element)) !== null && _a !== void 0 ? _a : element;
         if (this.view !== null) {
             // If there's already a view, we need to unbind and remove through dispose.
@@ -3710,6 +3941,8 @@ class Controller extends PropertyChangeNotifier {
         if (template) {
             // If a new template was provided, render it.
             this.view = template.render(element, host, element);
+            this.view.sourceLifetime =
+                SourceLifetime.coupled;
         }
     }
     /**
@@ -3729,31 +3962,48 @@ class Controller extends PropertyChangeNotifier {
         if (definition === void 0) {
             throw FAST.error(1401 /* Message.missingElementDefinition */);
         }
-        return (element.$fastController = new Controller(element, definition));
+        return (element.$fastController = new ElementController(element, definition));
     }
 }
 
 /* eslint-disable-next-line @typescript-eslint/explicit-function-return-type */
 function createFASTElement(BaseType) {
-    return class extends BaseType {
+    const type = class extends BaseType {
         constructor() {
             /* eslint-disable-next-line */
             super();
-            Controller.forCustomElement(this);
+            ElementController.forCustomElement(this);
         }
         $emit(type, detail, options) {
             return this.$fastController.emit(type, detail, options);
         }
         connectedCallback() {
-            this.$fastController.onConnectedCallback();
+            this.$fastController.connect();
         }
         disconnectedCallback() {
-            this.$fastController.onDisconnectedCallback();
+            this.$fastController.disconnect();
         }
         attributeChangedCallback(name, oldValue, newValue) {
             this.$fastController.onAttributeChangedCallback(name, oldValue, newValue);
         }
     };
+    FASTElementDefinition.registerBaseType(type);
+    return type;
+}
+function compose(type, nameOrDef) {
+    if (isFunction(type)) {
+        return FASTElementDefinition.compose(type, nameOrDef);
+    }
+    return FASTElementDefinition.compose(this, type);
+}
+function define(type, nameOrDef) {
+    if (isFunction(type)) {
+        return FASTElementDefinition.compose(type, nameOrDef).define().type;
+    }
+    return FASTElementDefinition.compose(this, type).define().type;
+}
+function from(BaseType) {
+    return createFASTElement(BaseType);
 }
 /**
  * A minimal base class for FASTElements that also provides
@@ -3766,18 +4016,19 @@ const FASTElement = Object.assign(createFASTElement(HTMLElement), {
      * provided base type.
      * @param BaseType - The base element type to inherit from.
      */
-    from(BaseType) {
-        return createFASTElement(BaseType);
-    },
+    from,
     /**
      * Defines a platform custom element based on the provided type and definition.
      * @param type - The custom element type to define.
      * @param nameOrDef - The name of the element to define or a definition object
      * that describes the element to define.
      */
-    define(type, nameOrDef) {
-        return new FASTElementDefinition(type, nameOrDef).define().type;
-    },
+    define,
+    /**
+     * Defines metadata for a FASTElement which can be used to later define the element.
+     * @public
+     */
+    compose,
 });
 /**
  * Decorator: Defines a platform custom element based on `FASTElement`.
@@ -3788,8 +4039,8 @@ const FASTElement = Object.assign(createFASTElement(HTMLElement), {
 function customElement(nameOrDef) {
     /* eslint-disable-next-line @typescript-eslint/explicit-function-return-type */
     return function (type) {
-        new FASTElementDefinition(type, nameOrDef).define();
+        define(type, nameOrDef);
     };
 }
 
-export { AdoptedStyleSheetsStrategy, ArrayObserver, Aspect, AttributeDefinition, BindingConfig, BindingMode, CSSDirective, ChangeBinding, ChildrenDirective, Compiler, Controller, DOM, ElementStyles, EventBinding, ExecutionContext, FAST, FASTElement, FASTElementDefinition, HTMLBindingDirective, HTMLDirective, HTMLView, Markup, NodeObservationDirective, Observable, OneTimeBinding, Parser, PropertyChangeNotifier, RefDirective, RepeatBehavior, RepeatDirective, SignalBinding, SlottedDirective, Splice, SpliceStrategy, SpliceStrategySupport, StatelessAttachedAttributeDirective, SubscriberSet, TwoWayBinding, UpdateBinding, Updates, ViewTemplate, attr, bind, booleanConverter, child, children, createTypeRegistry, css, cssDirective, cssPartial, customElement, elements, emptyArray, html, htmlDirective, item, length, nullableNumberConverter, observable, onChange, oneTime, ref, repeat, signal, slotted, twoWay, volatile, when };
+export { AdoptedStyleSheetsStrategy, ArrayObserver, Aspect, AttributeConfiguration, AttributeDefinition, Binding, CSSDirective, ChildrenDirective, Compiler, DOM, ElementController, ElementStyles, ExecutionContext, FAST, FASTElement, FASTElementDefinition, HTMLBindingDirective, HTMLDirective, HTMLView, Markup, NodeObservationDirective, Observable, Parser, PropertyChangeNotifier, RefDirective, RepeatBehavior, RepeatDirective, SlottedDirective, SourceLifetime, Splice, SpliceStrategy, SpliceStrategySupport, StatelessAttachedAttributeDirective, SubscriberSet, Updates, ViewBehaviorOrchestrator, ViewTemplate, attr, bind, booleanConverter, children, createMetadataLocator, createTypeRegistry, css, cssDirective, cssPartial, customElement, elements, emptyArray, html, htmlDirective, lengthOf, listener, normalizeBinding, nullableNumberConverter, observable, oneTime, ref, repeat, slotted, volatile, when };