@microsoft/fast-element 2.0.0-beta.3 → 2.0.0-beta.4

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() { },
     });
@@ -449,7 +449,7 @@ const Observable = FAST.getById(2 /* KernelServiceId.observable */, () => {
             }
         }
     }
-    class BindingObserverImplementation extends SubscriberSet {
+    class ExpressionNotifierImplementation extends SubscriberSet {
         constructor(binding, initialSubscriber, isVolatileBinding = false) {
             super(binding, initialSubscriber);
             this.binding = binding;
@@ -604,14 +604,14 @@ const Observable = FAST.getById(2 /* KernelServiceId.observable */, () => {
          */
         getAccessors,
         /**
-         * Creates a {@link BindingObserver} that can watch the
-         * provided {@link Binding} for changes.
+         * Creates a {@link ExpressionNotifier} that can watch the
+         * provided {@link Expression} for changes.
          * @param binding - The binding to observe.
          * @param initialSubscriber - An initial subscriber to changes in the binding value.
          * @param isVolatileBinding - Indicates whether the binding's dependency list must be re-evaluated on every value evaluation.
          */
         binding(binding, initialSubscriber, isVolatileBinding = this.isVolatileBinding(binding)) {
-            return new BindingObserverImplementation(binding, initialSubscriber, isVolatileBinding);
+            return new ExpressionNotifierImplementation(binding, initialSubscriber, isVolatileBinding);
         },
         /**
          * Determines whether a binding expression is volatile and needs to have its dependency list re-evaluated
@@ -1117,6 +1117,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.
@@ -1443,6 +1457,13 @@ function htmlDirective(options) {
         HTMLDirective.define(type, options);
     };
 }
+/**
+ * Captures a binding expression along with related information and capabilities.
+ *
+ * @public
+ */
+class Binding {
+}
 /**
  * The type of HTML aspect to target.
  * @public
@@ -1536,6 +1557,10 @@ class StatelessAttachedAttributeDirective {
      */
     constructor(options) {
         this.options = options;
+        /**
+         * The unique id of the factory.
+         */
+        this.id = nextId();
     }
     /**
      * Creates a behavior.
@@ -1564,99 +1589,28 @@ 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 {
+    constructor(evaluate, isVolatile) {
+        super();
+        this.evaluate = evaluate;
+        this.isVolatile = 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) {
-        return this;
+    createObserver(_, subscriber) {
+        return Observable.binding(this.evaluate, subscriber, this.isVolatile);
     }
 }
-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;
-            }
-        }
-    };
+class OneTimeBinding extends Binding {
+    constructor(evaluate) {
+        super();
+        this.evaluate = evaluate;
+    }
+    createObserver() {
+        return this;
+    }
+    observe(source, context) {
+        return this.evaluate(source, context);
+    }
+    dispose() { }
 }
 function updateContentTarget(target, aspect, value, source, context) {
     // If there's no actual value, then this equates to the
@@ -1664,7 +1618,7 @@ function updateContentTarget(target, aspect, value, source, context) {
     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;
@@ -1750,46 +1704,21 @@ 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);
-    }
-}
 /**
  * A binding behavior for bindings that change.
  * @public
  */
-class ChangeBinding extends UpdateBinding {
+class BindingBehavior {
     /**
      * 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.directive = directive;
+        this.updateTarget = updateTarget;
         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.
@@ -1826,12 +1755,49 @@ class ChangeBinding extends UpdateBinding {
         const context = observer.context;
         this.updateTarget(target, this.directive.targetAspect, observer.observe(source, context), source, context);
     }
+    /**
+     * 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] = this.directive.dataBinding.createObserver(this.directive, this)));
+    }
+    /**
+     * Creates a behavior.
+     * @param targets - The targets available for behaviors to be attached to.
+     */
+    createBehavior(targets) {
+        return this;
+    }
+}
+/**
+ * A special binding behavior that can bind node content.
+ * @public
+ */
+class ContentBehavior extends BindingBehavior {
+    /**
+     * 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);
+        const target = targets[this.directive.nodeId];
+        const view = target.$fastView;
+        if (view !== void 0 && view.isComposed) {
+            view.unbind();
+            view.needsBindOnly = true;
+        }
+    }
 }
 /**
  * A binding behavior for handling events.
  * @public
  */
-class EventBinding {
+class EventBehavior {
     /**
      * Creates an instance of EventBinding.
      * @param directive - The directive that has the configuration for this behavior.
@@ -1852,7 +1818,7 @@ class EventBinding {
         const target = targets[directive.nodeId];
         target[this.sourceProperty] = source;
         target[this.contextProperty] = context;
-        target.addEventListener(directive.targetAspect, this, directive.options);
+        target.addEventListener(directive.targetAspect, this, directive.dataBinding.options);
     }
     /**
      * Unbinds this behavior from the source.
@@ -1864,7 +1830,7 @@ class EventBinding {
         const directive = this.directive;
         const target = targets[directive.nodeId];
         target[this.sourceProperty] = target[this.contextProperty] = null;
-        target.removeEventListener(directive.targetAspect, this, directive.options);
+        target.removeEventListener(directive.targetAspect, this, directive.dataBinding.options);
     }
     /**
      * Creates a behavior.
@@ -1879,25 +1845,13 @@ class EventBinding {
     handleEvent(event) {
         const target = event.currentTarget;
         ExecutionContext.setEvent(event);
-        const result = this.directive.binding(target[this.sourceProperty], target[this.contextProperty]);
+        const result = this.directive.dataBinding.evaluate(target[this.sourceProperty], target[this.contextProperty]);
         ExecutionContext.setEvent(null);
         if (result !== true) {
             event.preventDefault();
         }
     }
 }
-/**
- * The default onChange binding configuration.
- * @public
- */
-const onChange = BindingConfig.define(BindingMode.define(ChangeBinding), {});
-/**
- * The default onTime binding configuration.
- * @public
- */
-const oneTime = BindingConfig.define(BindingMode.define(OneTimeBinding), {
-    once: true,
-});
 /**
  * A directive that applies bindings.
  * @public
@@ -1905,15 +1859,15 @@ const oneTime = BindingConfig.define(BindingMode.define(OneTimeBinding), {
 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;
+    constructor(dataBinding) {
+        this.dataBinding = dataBinding;
         this.factory = null;
+        /**
+         * The unique id of the factory.
+         */
+        this.id = nextId();
         /**
          * The type of aspect to target.
          */
@@ -1933,26 +1887,78 @@ class HTMLBindingDirective {
     createBehavior(targets) {
         if (this.factory == null) {
             if (this.targetAspect === "innerHTML") {
-                this.binding = createInnerHTMLBinding(this.binding);
+                this.dataBinding.evaluate = createInnerHTMLBinding(this.dataBinding.evaluate);
+            }
+            switch (this.aspectType) {
+                case 1:
+                    this.factory = new BindingBehavior(this, DOM.setAttribute);
+                    break;
+                case 2:
+                    this.factory = new BindingBehavior(this, DOM.setBooleanAttribute);
+                    break;
+                case 3:
+                    this.factory = new BindingBehavior(this, (t, a, v) => (t[a] = v));
+                    break;
+                case 4:
+                    this.factory = new ContentBehavior(this, updateContentTarget);
+                    break;
+                case 5:
+                    this.factory = new BindingBehavior(this, updateTokenListTarget);
+                    break;
+                case 6:
+                    this.factory = new EventBehavior(this);
+                    break;
+                default:
+                    throw FAST.error(1205 /* Message.unsupportedBindingBehavior */);
             }
-            this.factory = this.mode[this.aspectType](this);
         }
         return this.factory.createBehavior(targets);
     }
 }
 HTMLDirective.define(HTMLBindingDirective, { aspected: true });
 /**
- * Creates a binding directive with the specified configuration.
- * @param binding - The binding expression.
- * @param config - The binding configuration.
- * @returns A binding directive.
+ * 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, config = onChange) {
-    if (!("mode" in config)) {
-        config = onChange(config);
-    }
-    return new HTMLBindingDirective(binding, config.mode, config.options);
+function bind(binding, isVolatile = Observable.isVolatileBinding(binding)) {
+    return new OnChangeBinding(binding, isVolatile);
+}
+/**
+ * Creates a one time binding
+ * @param binding - The binding to refresh when signaled.
+ * @returns A binding configuration.
+ * @public
+ */
+function oneTime(binding) {
+    return new OneTimeBinding(binding);
+}
+/**
+ * Creates an event listener binding.
+ * @param binding - The binding to invoke when the event is raised.
+ * @param options - Event listener options.
+ * @returns A binding configuration.
+ * @public
+ */
+function listener(binding, options) {
+    const config = new OnChangeBinding(binding, false);
+    config.options = options;
+    return config;
+}
+/**
+ * Normalizes the input value into a binding.
+ * @param value - The value to create the default binding for.
+ * @returns A binding configuration for the provided value.
+ * @public
+ */
+function normalizeBinding(value) {
+    return isFunction(value)
+        ? bind(value)
+        : value instanceof Binding
+            ? value
+            : oneTime(() => value);
 }
 
 function removeNodeSequence(firstNode, lastNode) {
@@ -2119,6 +2125,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;
@@ -2169,7 +2191,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
         }
@@ -2186,7 +2208,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);
             }
         }
@@ -2356,22 +2378,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;
     },
@@ -2451,12 +2479,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);
             }
@@ -2464,8 +2492,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) {
@@ -2510,16 +2541,17 @@ 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({
@@ -2540,17 +2572,15 @@ 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) {
+    constructor(directive, location) {
+        this.directive = directive;
         this.location = location;
-        this.itemsBinding = itemsBinding;
-        this.templateBinding = templateBinding;
-        this.options = options;
         this.source = null;
         this.views = [];
         this.items = null;
@@ -2558,9 +2588,9 @@ class RepeatBehavior {
         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;
         }
     }
@@ -2598,12 +2628,12 @@ class RepeatBehavior {
      * @param args - The details about what was changed.
      */
     handleChange(source, args) {
-        if (source === this.itemsBinding) {
+        if (args === this.itemsBindingObserver) {
             this.items = this.itemsBindingObserver.observe(this.source, this.context);
             this.observeItems();
             this.refreshAllViews();
         }
-        else if (source === this.templateBinding) {
+        else if (args === this.templateBindingObserver) {
             this.template = this.templateBindingObserver.observe(this.source, this.context);
             this.refreshAllViews(true);
         }
@@ -2632,36 +2662,51 @@ 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 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);
+            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 <= availableViews && 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);
                 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);
             }
@@ -2676,7 +2721,7 @@ class RepeatBehavior {
         let itemsLength = items.length;
         let views = this.views;
         let viewsLength = views.length;
-        if (itemsLength === 0 || templateChanged || !this.options.recycle) {
+        if (itemsLength === 0 || templateChanged || !this.directive.options.recycle) {
             // all views need to be removed
             HTMLView.disposeContiguousBatch(views);
             viewsLength = 0;
@@ -2726,17 +2771,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.
@@ -2750,23 +2797,22 @@ class RepeatDirective {
      * @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);
+        return new RepeatBehavior(this, targets[this.nodeId]);
     }
 }
 HTMLDirective.define(RepeatDirective);
 /**
  * A directive that enables list rendering.
- * @param itemsBinding - The array to render.
- * @param templateOrTemplateBinding - The template or a template binding used obtain a template
+ * @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(itemsBinding, templateOrTemplateBinding, options = defaultRepeatOptions) {
-    const templateBinding = isFunction(templateOrTemplateBinding)
-        ? templateOrTemplateBinding
-        : () => templateOrTemplateBinding;
-    return new RepeatDirective(itemsBinding, templateBinding, options);
+function repeat(items, template, options = defaultRepeatOptions) {
+    const dataBinding = normalizeBinding(items);
+    const templateBinding = normalizeBinding(template);
+    return new RepeatDirective(dataBinding, templateBinding, options);
 }
 
 const selectElements = (value) => value.nodeType === 1;
@@ -3151,19 +3197,15 @@ const fastElementRegistry = FAST.getById(4 /* KernelServiceId.elementRegistry */
  * @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) {
+        this.platformDefined = false;
         if (isString(nameOrConfig)) {
             nameOrConfig = { name: nameOrConfig };
         }
         this.type = type;
         this.name = nameOrConfig.name;
         this.template = nameOrConfig.template;
+        const proto = type.prototype;
         const attributes = AttributeDefinition.collect(type, nameOrConfig.attributes);
         const observedAttributes = new Array(attributes.length);
         const propertyLookup = {};
@@ -3173,9 +3215,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 =
@@ -3188,20 +3234,14 @@ 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.
@@ -3211,22 +3251,26 @@ class FASTElementDefinition {
      */
     define(registry = customElements) {
         const type = this.type;
-        if (fastElementRegistry.register(this)) {
-            const attributes = this.attributes;
-            const proto = type.prototype;
-            for (let i = 0, ii = attributes.length; i < ii; ++i) {
-                Observable.defineProperty(proto, attributes[i]);
-            }
-            Reflect.defineProperty(type, "observedAttributes", {
-                value: this.observedAttributes,
-                enumerable: true,
-            });
-        }
         if (!registry.get(this.name)) {
+            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) {
+        const found = fastElementRegistry.getByType(type);
+        if (found) {
+            return new FASTElementDefinition(class extends type {
+            }, nameOrDef);
+        }
+        return new FASTElementDefinition(type, nameOrDef);
+    }
 }
 /**
  * Gets the element definition associated with the specified type.
@@ -3644,6 +3688,18 @@ function createFASTElement(BaseType) {
         }
     };
 }
+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;
+}
 /**
  * A minimal base class for FASTElements that also provides
  * static helpers for working with FASTElements.
@@ -3664,17 +3720,12 @@ const FASTElement = Object.assign(createFASTElement(HTMLElement), {
      * @param nameOrDef - The name of the element to define or a definition object
      * that describes the element to define.
      */
-    define(type, nameOrDef) {
-        return this.metadata(type, nameOrDef).define().type;
-    },
+    define,
     /**
      * Defines metadata for a FASTElement which can be used to later define the element.
-     * IMPORTANT: This API will be renamed to "compose" in a future beta.
      * @public
      */
-    metadata(type, nameOrDef) {
-        return new FASTElementDefinition(type, nameOrDef);
-    },
+    compose,
 });
 /**
  * Decorator: Defines a platform custom element based on `FASTElement`.
@@ -3685,8 +3736,8 @@ const FASTElement = Object.assign(createFASTElement(HTMLElement), {
 function customElement(nameOrDef) {
     /* eslint-disable-next-line @typescript-eslint/explicit-function-return-type */
     return function (type) {
-        FASTElement.define(type, nameOrDef);
+        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, SlottedDirective, Splice, SpliceStrategy, SpliceStrategySupport, StatelessAttachedAttributeDirective, SubscriberSet, UpdateBinding, Updates, ViewTemplate, attr, bind, booleanConverter, children, createTypeRegistry, css, cssDirective, cssPartial, customElement, elements, emptyArray, html, htmlDirective, lengthOf, nullableNumberConverter, observable, onChange, oneTime, ref, repeat, slotted, volatile, when };
+export { AdoptedStyleSheetsStrategy, ArrayObserver, Aspect, AttributeDefinition, Binding, BindingBehavior, CSSDirective, ChildrenDirective, Compiler, ContentBehavior, Controller, DOM, ElementStyles, EventBehavior, ExecutionContext, FAST, FASTElement, FASTElementDefinition, HTMLBindingDirective, HTMLDirective, HTMLView, Markup, NodeObservationDirective, Observable, Parser, PropertyChangeNotifier, RefDirective, RepeatBehavior, RepeatDirective, SlottedDirective, Splice, SpliceStrategy, SpliceStrategySupport, StatelessAttachedAttributeDirective, SubscriberSet, Updates, ViewTemplate, attr, bind, booleanConverter, children, createTypeRegistry, css, cssDirective, cssPartial, customElement, elements, emptyArray, html, htmlDirective, lengthOf, listener, normalizeBinding, nullableNumberConverter, observable, oneTime, ref, repeat, slotted, volatile, when };