@vonage/vivid 5.2.0 → 5.4.0

package/data-grid/definition.js

@@ -1,7 +1,8 @@
 import { VwcIconElement as Icon, iconDefinition } from '../icon/definition.js';
 import { V as VividElement, d as defineVividComponent, c as createRegisterFunction } from '../unbundled/vivid-element.js';
 import { VwcVisuallyHiddenElement as VisuallyHidden, visuallyHiddenDefinition } from '../visually-hidden/definition.js';
-import { html, attr, observable, RepeatDirective, DOM, Observable, nullableNumberConverter, children, slotted, elements, when } from '@microsoft/fast-element';
+import { html, attr, observable, RepeatDirective, normalizeBinding, Updates as Updates$1, Observable, nullableNumberConverter, children, slotted, elements, when } from '@microsoft/fast-element';
+import { c as commonjsGlobal } from '../unbundled/_commonjsHelpers.js';
 import { eventFocusIn, eventFocusOut, eventKeyDown, keyEscape, keyFunction2, keyEnter, keyEnd, keyHome, eventFocus, keyPageDown, keyPageUp, keyArrowDown, keyArrowUp, classNames, keySpace } from '@microsoft/fast-web-utilities';
 import { k as keyArrowRight, a as keyArrowLeft } from '../unbundled/key-codes.js';
 import { H as HostSemantics, a as applyHostSemantics } from '../unbundled/host-semantics.js';
@@ -13,6 +14,837 @@ const dataGridRowStyles = ".base.connotation-cta{--_connotation-color-primary: v
 
 const dataGridCellStyles = ":host{block-size:100%;min-inline-size:80px}:host(:focus-visible){outline:none}:host([data-fixed]){position:sticky;z-index:5;background:var(--data-grid-cell-background, var(--vvd-color-surface-2dp))}:host([data-fixed]):before{position:absolute;z-index:1;top:0;right:0;width:1px;block-size:100%;box-shadow:4px 0 4px #0000001a,2px 0 2px #0000000d,1px 0 1px #0000000d;content:\"\";pointer-events:none}.base.connotation-cta{--_connotation-color-primary: var(--vvd-data-grid-cell-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-data-grid-cell-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-data-grid-cell-cta-primary-increment, var(--vvd-color-cta-600));--_connotation-color-firm: var(--vvd-data-grid-cell-cta-firm, var(--vvd-color-cta-600));--_connotation-color-soft: var(--vvd-data-grid-cell-cta-soft, var(--vvd-color-cta-100));--_connotation-color-faint: var(--vvd-data-grid-cell-cta-faint, var(--vvd-color-cta-50));--_connotation-color-pale: var(--vvd-data-grid-cell-cta-pale, var(--vvd-color-cta-300));--_connotation-color-dim: var(--vvd-data-grid-cell-cta-dim, var(--vvd-color-cta-200))}.base:not(.connotation-cta){--_connotation-color-primary: var(--vvd-data-grid-cell-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-data-grid-cell-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-data-grid-cell-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-firm: var(--vvd-data-grid-cell-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-soft: var(--vvd-data-grid-cell-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-faint: var(--vvd-data-grid-cell-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-pale: var(--vvd-data-grid-cell-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-dim: var(--vvd-data-grid-cell-accent-dim, var(--vvd-color-neutral-200))}.base{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}@media (hover: hover){.base:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}}.base.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.base.selected:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}@media (hover: hover){.base.selected:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}}.base.selected.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}.base{display:flex;box-sizing:border-box;align-items:center;border-bottom:1px solid var(--vvd-color-neutral-300);block-size:var(--data-grid-cell-block-size, var(--_data-grid-cell-default-block-size));color:var(--_appearance-color-text);font:var(--vvd-typography-base);min-block-size:calc(1px*(48 + 4*clamp(-1,var(--vvd-size-density, 0),2)));padding-block:13px 14px;padding-inline:12px}:host(:focus-visible) .base{--focus-stroke-gap-color: transparent;box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px))}:host([cell-type=columnheader]) .base{border-color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base-bold);--_data-grid-cell-default-block-size: calc(1px*(48 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_data-grid-cell-default-white-space: nowrap}:host(:not([cell-type=columnheader])) .base{--_data-grid-cell-default-block-size: 100%;--_data-grid-cell-default-white-space: normal}:host(:is([selected]):not([cell-type=columnheader])) .base{background-color:var(--_appearance-color-fill)}slot{display:block;overflow:hidden;text-overflow:ellipsis;white-space:var(--data-grid-cell-white-space, var(--_data-grid-cell-default-white-space))}:host(:not([cell-type=columnheader][aria-sort])) slot{inline-size:100%}.header-icon{margin-inline-start:16px}";
 
+let kernelMode;
+const kernelAttr = "fast-kernel";
+try {
+    if (document.currentScript) {
+        kernelMode = document.currentScript.getAttribute(kernelAttr);
+    }
+    else {
+        const scripts = document.getElementsByTagName("script");
+        const currentScript = scripts[scripts.length - 1];
+        kernelMode = currentScript.getAttribute(kernelAttr);
+    }
+}
+catch (e) {
+    kernelMode = "isolate";
+}
+let KernelServiceId;
+switch (kernelMode) {
+    case "share": // share the kernel across major versions
+        KernelServiceId = Object.freeze({
+            updateQueue: 1,
+            observable: 2,
+            contextEvent: 3,
+            elementRegistry: 4,
+        });
+        break;
+    case "share-v2": // only share the kernel with other v2 instances
+        KernelServiceId = Object.freeze({
+            updateQueue: 1.2,
+            observable: 2.2,
+            contextEvent: 3.2,
+            elementRegistry: 4.2,
+        });
+        break;
+    default:
+        // fully isolate the kernel from all other FAST instances
+        const postfix = `-${Math.random().toString(36).substring(2, 8)}`;
+        KernelServiceId = Object.freeze({
+            updateQueue: `1.2${postfix}`,
+            observable: `2.2${postfix}`,
+            contextEvent: `3.2${postfix}`,
+            elementRegistry: `4.2${postfix}`,
+        });
+        break;
+}
+/**
+ * Determines whether or not an object is a function.
+ * @public
+ */
+const isFunction = (object) => typeof object === "function";
+/**
+ * Determines whether or not an object is a string.
+ * @public
+ */
+const isString = (object) => typeof object === "string";
+/**
+ * A function which does nothing.
+ * @public
+ */
+const noop = () => void 0;
+
+/* eslint-disable @typescript-eslint/ban-ts-comment */
+
+(function ensureGlobalThis() {
+    if (typeof globalThis !== "undefined") {
+        // We're running in a modern environment.
+        return;
+    }
+    // @ts-ignore
+    if (typeof commonjsGlobal !== "undefined") {
+        // We're running in NodeJS
+        // @ts-ignore
+        commonjsGlobal.globalThis = commonjsGlobal;
+    }
+    else if (typeof self !== "undefined") {
+        self.globalThis = self;
+    }
+    else if (typeof window !== "undefined") {
+        // We're running in the browser's main thread.
+        window.globalThis = window;
+    }
+    else {
+        // Hopefully we never get here...
+        // Not all environments allow eval and Function. Use only as a last resort:
+        // eslint-disable-next-line no-new-func
+        const result = new Function("return this")();
+        result.globalThis = result;
+    }
+})();
+
+// ensure FAST global - duplicated debug.ts
+const propConfig = {
+    configurable: false,
+    enumerable: false,
+    writable: false,
+};
+if (globalThis.FAST === void 0) {
+    Reflect.defineProperty(globalThis, "FAST", Object.assign({ value: Object.create(null) }, propConfig));
+}
+/**
+ * The FAST global.
+ * @public
+ */
+const FAST = globalThis.FAST;
+if (FAST.getById === void 0) {
+    const storage = Object.create(null);
+    Reflect.defineProperty(FAST, "getById", Object.assign({ value(id, initialize) {
+            let found = storage[id];
+            if (found === void 0) {
+                found = initialize ? (storage[id] = initialize()) : null;
+            }
+            return found;
+        } }, propConfig));
+}
+if (FAST.error === void 0) {
+    Object.assign(FAST, {
+        warn() { },
+        error(code) {
+            return new Error(`Error ${code}`);
+        },
+        addMessages() { },
+    });
+}
+/**
+ * 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;
+    };
+}
+/**
+ * Makes a type noop for JSON serialization.
+ * @param type - The type to make noop for JSON serialization.
+ * @internal
+ */
+function makeSerializationNoop(type) {
+    type.prototype.toJSON = noop;
+}
+
+const createHTML = html => html;
+const fastTrustedType = globalThis.trustedTypes
+    ? globalThis.trustedTypes.createPolicy("fast-html", { createHTML })
+    : { createHTML };
+let defaultPolicy = Object.freeze({
+    createHTML(value) {
+        return fastTrustedType.createHTML(value);
+    },
+    protect(tagName, aspect, aspectName, sink) {
+        return sink;
+    },
+});
+const fastPolicy = defaultPolicy;
+/**
+ * Common DOM APIs.
+ * @public
+ */
+const DOM = Object.freeze({
+    /**
+     * Gets the dom policy used by the templating system.
+     */
+    get policy() {
+        return defaultPolicy;
+    },
+    /**
+     * Sets the dom policy used by the templating system.
+     * @param policy - The policy to set.
+     * @remarks
+     * This API can only be called once, for security reasons. It should be
+     * called by the application developer at the start of their program.
+     */
+    setPolicy(value) {
+        if (defaultPolicy !== fastPolicy) {
+            throw FAST.error(1201 /* Message.onlySetDOMPolicyOnce */);
+        }
+        defaultPolicy = value;
+    },
+    /**
+     * Sets an attribute value on an element.
+     * @param element - The element to set the attribute value on.
+     * @param attributeName - The attribute name to set.
+     * @param value - The value of the attribute to set.
+     * @remarks
+     * If the value is `null` or `undefined`, the attribute is removed, otherwise
+     * it is set to the provided value using the standard `setAttribute` API.
+     */
+    setAttribute(element, attributeName, value) {
+        value === null || value === undefined
+            ? element.removeAttribute(attributeName)
+            : element.setAttribute(attributeName, value);
+    },
+    /**
+     * Sets a boolean attribute value.
+     * @param element - The element to set the boolean attribute value on.
+     * @param attributeName - The attribute name to set.
+     * @param value - The value of the attribute to set.
+     * @remarks
+     * If the value is true, the attribute is added; otherwise it is removed.
+     */
+    setBooleanAttribute(element, attributeName, value) {
+        value
+            ? element.setAttribute(attributeName, "")
+            : element.removeAttribute(attributeName);
+    },
+});
+
+/**
+ * The default UpdateQueue.
+ * @public
+ */
+const Updates = FAST.getById(KernelServiceId.updateQueue, () => {
+    const tasks = [];
+    const pendingErrors = [];
+    const rAF = globalThis.requestAnimationFrame;
+    let updateAsync = true;
+    function throwFirstError() {
+        if (pendingErrors.length) {
+            throw pendingErrors.shift();
+        }
+    }
+    function tryRunTask(task) {
+        try {
+            task.call();
+        }
+        catch (error) {
+            if (updateAsync) {
+                pendingErrors.push(error);
+                setTimeout(throwFirstError, 0);
+            }
+            else {
+                tasks.length = 0;
+                throw error;
+            }
+        }
+    }
+    function process() {
+        const capacity = 1024;
+        let index = 0;
+        while (index < tasks.length) {
+            tryRunTask(tasks[index]);
+            index++;
+            // Prevent leaking memory for long chains of recursive calls to `enqueue`.
+            // If we call `enqueue` within a task scheduled by `enqueue`, the queue will
+            // grow, but to avoid an O(n) walk for every task we execute, we don't
+            // shift tasks off the queue after they have been executed.
+            // Instead, we periodically shift 1024 tasks off the queue.
+            if (index > capacity) {
+                // Manually shift all values starting at the index back to the
+                // beginning of the queue.
+                for (let scan = 0, newLength = tasks.length - index; scan < newLength; scan++) {
+                    tasks[scan] = tasks[scan + index];
+                }
+                tasks.length -= index;
+                index = 0;
+            }
+        }
+        tasks.length = 0;
+    }
+    function enqueue(callable) {
+        tasks.push(callable);
+        if (tasks.length < 2) {
+            updateAsync ? rAF(process) : process();
+        }
+    }
+    return Object.freeze({
+        enqueue,
+        next: () => new Promise(enqueue),
+        process,
+        setMode: (isAsync) => (updateAsync = isAsync),
+    });
+});
+
+/**
+ * An implementation of {@link Notifier} that efficiently keeps track of
+ * subscribers interested in a specific change notification on an
+ * observable subject.
+ *
+ * @remarks
+ * This set is optimized for the most common scenario of 1 or 2 subscribers.
+ * With this in mind, it can store a subscriber in an internal field, allowing it to avoid Array#push operations.
+ * If the set ever exceeds two subscribers, it upgrades to an array automatically.
+ * @public
+ */
+class SubscriberSet {
+    /**
+     * Creates an instance of SubscriberSet for the specified subject.
+     * @param subject - The subject that subscribers will receive notifications from.
+     * @param initialSubscriber - An initial subscriber to changes.
+     */
+    constructor(subject, initialSubscriber) {
+        this.sub1 = void 0;
+        this.sub2 = void 0;
+        this.spillover = void 0;
+        this.subject = subject;
+        this.sub1 = initialSubscriber;
+    }
+    /**
+     * Checks whether the provided subscriber has been added to this set.
+     * @param subscriber - The subscriber to test for inclusion in this set.
+     */
+    has(subscriber) {
+        return this.spillover === void 0
+            ? this.sub1 === subscriber || this.sub2 === subscriber
+            : this.spillover.indexOf(subscriber) !== -1;
+    }
+    /**
+     * Subscribes to notification of changes in an object's state.
+     * @param subscriber - The object that is subscribing for change notification.
+     */
+    subscribe(subscriber) {
+        const spillover = this.spillover;
+        if (spillover === void 0) {
+            if (this.has(subscriber)) {
+                return;
+            }
+            if (this.sub1 === void 0) {
+                this.sub1 = subscriber;
+                return;
+            }
+            if (this.sub2 === void 0) {
+                this.sub2 = subscriber;
+                return;
+            }
+            this.spillover = [this.sub1, this.sub2, subscriber];
+            this.sub1 = void 0;
+            this.sub2 = void 0;
+        }
+        else {
+            const index = spillover.indexOf(subscriber);
+            if (index === -1) {
+                spillover.push(subscriber);
+            }
+        }
+    }
+    /**
+     * Unsubscribes from notification of changes in an object's state.
+     * @param subscriber - The object that is unsubscribing from change notification.
+     */
+    unsubscribe(subscriber) {
+        const spillover = this.spillover;
+        if (spillover === void 0) {
+            if (this.sub1 === subscriber) {
+                this.sub1 = void 0;
+            }
+            else if (this.sub2 === subscriber) {
+                this.sub2 = void 0;
+            }
+        }
+        else {
+            const index = spillover.indexOf(subscriber);
+            if (index !== -1) {
+                spillover.splice(index, 1);
+            }
+        }
+    }
+    /**
+     * Notifies all subscribers.
+     * @param args - Data passed along to subscribers during notification.
+     */
+    notify(args) {
+        const spillover = this.spillover;
+        const subject = this.subject;
+        if (spillover === void 0) {
+            const sub1 = this.sub1;
+            const sub2 = this.sub2;
+            if (sub1 !== void 0) {
+                sub1.handleChange(subject, args);
+            }
+            if (sub2 !== void 0) {
+                sub2.handleChange(subject, args);
+            }
+        }
+        else {
+            for (let i = 0, ii = spillover.length; i < ii; ++i) {
+                spillover[i].handleChange(subject, args);
+            }
+        }
+    }
+}
+/**
+ * An implementation of Notifier that allows subscribers to be notified
+ * of individual property changes on an object.
+ * @public
+ */
+class PropertyChangeNotifier {
+    /**
+     * Creates an instance of PropertyChangeNotifier for the specified subject.
+     * @param subject - The object that subscribers will receive notifications for.
+     */
+    constructor(subject) {
+        this.subscribers = {};
+        this.subjectSubscribers = null;
+        this.subject = subject;
+    }
+    /**
+     * Notifies all subscribers, based on the specified property.
+     * @param propertyName - The property name, passed along to subscribers during notification.
+     */
+    notify(propertyName) {
+        var _a, _b;
+        (_a = this.subscribers[propertyName]) === null || _a === void 0 ? void 0 : _a.notify(propertyName);
+        (_b = this.subjectSubscribers) === null || _b === void 0 ? void 0 : _b.notify(propertyName);
+    }
+    /**
+     * Subscribes to notification of changes in an object's state.
+     * @param subscriber - The object that is subscribing for change notification.
+     * @param propertyToWatch - The name of the property that the subscriber is interested in watching for changes.
+     */
+    subscribe(subscriber, propertyToWatch) {
+        var _a, _b;
+        let subscribers;
+        if (propertyToWatch) {
+            subscribers =
+                (_a = this.subscribers[propertyToWatch]) !== null && _a !== void 0 ? _a : (this.subscribers[propertyToWatch] = new SubscriberSet(this.subject));
+        }
+        else {
+            subscribers =
+                (_b = this.subjectSubscribers) !== null && _b !== void 0 ? _b : (this.subjectSubscribers = new SubscriberSet(this.subject));
+        }
+        subscribers.subscribe(subscriber);
+    }
+    /**
+     * Unsubscribes from notification of changes in an object's state.
+     * @param subscriber - The object that is unsubscribing from change notification.
+     * @param propertyToUnwatch - The name of the property that the subscriber is no longer interested in watching.
+     */
+    unsubscribe(subscriber, propertyToUnwatch) {
+        var _a, _b;
+        if (propertyToUnwatch) {
+            (_a = this.subscribers[propertyToUnwatch]) === null || _a === void 0 ? void 0 : _a.unsubscribe(subscriber);
+        }
+        else {
+            (_b = this.subjectSubscribers) === null || _b === void 0 ? void 0 : _b.unsubscribe(subscriber);
+        }
+    }
+}
+
+/**
+ * Describes how the source's lifetime relates to its controller's lifetime.
+ * @public
+ */
+const SourceLifetime = Object.freeze({
+    /**
+     * The source to controller lifetime relationship is unknown.
+     */
+    unknown: void 0,
+    /**
+     * The source and controller lifetimes are coupled to one another.
+     * They can/will be GC'd together.
+     */
+    coupled: 1,
+});
+/**
+ * Common Observable APIs.
+ * @public
+ */
+FAST.getById(KernelServiceId.observable, () => {
+    const queueUpdate = Updates.enqueue;
+    const volatileRegex = /(:|&&|\|\||if|\?\.)/;
+    const notifierLookup = new WeakMap();
+    let watcher = void 0;
+    let createArrayObserver = (array) => {
+        throw FAST.error(1101 /* Message.needsArrayObservation */);
+    };
+    function getNotifier(source) {
+        var _a;
+        let found = (_a = source.$fastController) !== null && _a !== void 0 ? _a : notifierLookup.get(source);
+        if (found === void 0) {
+            Array.isArray(source)
+                ? (found = createArrayObserver(source))
+                : notifierLookup.set(source, (found = new PropertyChangeNotifier(source)));
+        }
+        return found;
+    }
+    const getAccessors = createMetadataLocator();
+    class DefaultObservableAccessor {
+        constructor(name) {
+            this.name = name;
+            this.field = `_${name}`;
+            this.callback = `${name}Changed`;
+        }
+        getValue(source) {
+            if (watcher !== void 0) {
+                watcher.watch(source, this.name);
+            }
+            return source[this.field];
+        }
+        setValue(source, newValue) {
+            const field = this.field;
+            const oldValue = source[field];
+            if (oldValue !== newValue) {
+                source[field] = newValue;
+                const callback = source[this.callback];
+                if (isFunction(callback)) {
+                    callback.call(source, oldValue, newValue);
+                }
+                getNotifier(source).notify(this.name);
+            }
+        }
+    }
+    class ExpressionNotifierImplementation extends SubscriberSet {
+        constructor(expression, initialSubscriber, isVolatileBinding = false) {
+            super(expression, initialSubscriber);
+            this.expression = expression;
+            this.isVolatileBinding = isVolatileBinding;
+            this.needsRefresh = true;
+            this.needsQueue = true;
+            this.isAsync = true;
+            this.first = this;
+            this.last = null;
+            this.propertySource = void 0;
+            this.propertyName = void 0;
+            this.notifier = void 0;
+            this.next = void 0;
+        }
+        setMode(isAsync) {
+            this.isAsync = this.needsQueue = isAsync;
+        }
+        bind(controller) {
+            this.controller = controller;
+            const value = this.observe(controller.source, controller.context);
+            if (!controller.isBound && this.requiresUnbind(controller)) {
+                controller.onUnbind(this);
+            }
+            return value;
+        }
+        requiresUnbind(controller) {
+            return (controller.sourceLifetime !== SourceLifetime.coupled ||
+                this.first !== this.last ||
+                this.first.propertySource !== controller.source);
+        }
+        unbind(controller) {
+            this.dispose();
+        }
+        observe(source, context) {
+            if (this.needsRefresh && this.last !== null) {
+                this.dispose();
+            }
+            const previousWatcher = watcher;
+            watcher = this.needsRefresh ? this : void 0;
+            this.needsRefresh = this.isVolatileBinding;
+            let result;
+            try {
+                result = this.expression(source, context);
+            }
+            finally {
+                watcher = previousWatcher;
+            }
+            return result;
+        }
+        // backwards compat with v1 kernel
+        disconnect() {
+            this.dispose();
+        }
+        dispose() {
+            if (this.last !== null) {
+                let current = this.first;
+                while (current !== void 0) {
+                    current.notifier.unsubscribe(this, current.propertyName);
+                    current = current.next;
+                }
+                this.last = null;
+                this.needsRefresh = this.needsQueue = this.isAsync;
+            }
+        }
+        watch(propertySource, propertyName) {
+            const prev = this.last;
+            const notifier = getNotifier(propertySource);
+            const current = prev === null ? this.first : {};
+            current.propertySource = propertySource;
+            current.propertyName = propertyName;
+            current.notifier = notifier;
+            notifier.subscribe(this, propertyName);
+            if (prev !== null) {
+                if (!this.needsRefresh) {
+                    // Declaring the variable prior to assignment below circumvents
+                    // a bug in Angular's optimization process causing infinite recursion
+                    // of this watch() method. Details https://github.com/microsoft/fast/issues/4969
+                    let prevValue;
+                    watcher = void 0;
+                    /* eslint-disable-next-line */
+                    prevValue = prev.propertySource[prev.propertyName];
+                    /* eslint-disable-next-line */
+                    watcher = this;
+                    if (propertySource === prevValue) {
+                        this.needsRefresh = true;
+                    }
+                }
+                prev.next = current;
+            }
+            this.last = current;
+        }
+        handleChange() {
+            if (this.needsQueue) {
+                this.needsQueue = false;
+                queueUpdate(this);
+            }
+            else if (!this.isAsync) {
+                this.call();
+            }
+        }
+        call() {
+            if (this.last !== null) {
+                this.needsQueue = this.isAsync;
+                this.notify(this);
+            }
+        }
+        *records() {
+            let next = this.first;
+            while (next !== void 0) {
+                yield next;
+                next = next.next;
+            }
+        }
+    }
+    makeSerializationNoop(ExpressionNotifierImplementation);
+    return Object.freeze({
+        /**
+         * @internal
+         * @param factory - The factory used to create array observers.
+         */
+        setArrayObserverFactory(factory) {
+            createArrayObserver = factory;
+        },
+        /**
+         * Gets a notifier for an object or Array.
+         * @param source - The object or Array to get the notifier for.
+         */
+        getNotifier,
+        /**
+         * Records a property change for a source object.
+         * @param source - The object to record the change against.
+         * @param propertyName - The property to track as changed.
+         */
+        track(source, propertyName) {
+            watcher && watcher.watch(source, propertyName);
+        },
+        /**
+         * Notifies watchers that the currently executing property getter or function is volatile
+         * with respect to its observable dependencies.
+         */
+        trackVolatile() {
+            watcher && (watcher.needsRefresh = true);
+        },
+        /**
+         * Notifies subscribers of a source object of changes.
+         * @param source - the object to notify of changes.
+         * @param args - The change args to pass to subscribers.
+         */
+        notify(source, args) {
+            /* eslint-disable-next-line @typescript-eslint/no-use-before-define */
+            getNotifier(source).notify(args);
+        },
+        /**
+         * Defines an observable property on an object or prototype.
+         * @param target - The target object to define the observable on.
+         * @param nameOrAccessor - The name of the property to define as observable;
+         * or a custom accessor that specifies the property name and accessor implementation.
+         */
+        defineProperty(target, nameOrAccessor) {
+            if (isString(nameOrAccessor)) {
+                nameOrAccessor = new DefaultObservableAccessor(nameOrAccessor);
+            }
+            getAccessors(target).push(nameOrAccessor);
+            Reflect.defineProperty(target, nameOrAccessor.name, {
+                enumerable: true,
+                get() {
+                    return nameOrAccessor.getValue(this);
+                },
+                set(newValue) {
+                    nameOrAccessor.setValue(this, newValue);
+                },
+            });
+        },
+        /**
+         * Finds all the observable accessors defined on the target,
+         * including its prototype chain.
+         * @param target - The target object to search for accessor on.
+         */
+        getAccessors,
+        /**
+         * Creates a {@link ExpressionNotifier} that can watch the
+         * provided {@link Expression} for changes.
+         * @param expression - The binding to observe.
+         * @param initialSubscriber - An initial subscriber to changes in the binding value.
+         * @param isVolatileBinding - Indicates whether the binding's dependency list must be re-evaluated on every value evaluation.
+         */
+        binding(expression, initialSubscriber, isVolatileBinding = this.isVolatileBinding(expression)) {
+            return new ExpressionNotifierImplementation(expression, initialSubscriber, isVolatileBinding);
+        },
+        /**
+         * Determines whether a binding expression is volatile and needs to have its dependency list re-evaluated
+         * on every evaluation of the value.
+         * @param expression - The binding to inspect.
+         */
+        isVolatileBinding(expression) {
+            return volatileRegex.test(expression.toString());
+        },
+    });
+});
+const contextEvent = FAST.getById(KernelServiceId.contextEvent, () => {
+    let current = null;
+    return {
+        get() {
+            return current;
+        },
+        set(event) {
+            current = event;
+        },
+    };
+});
+/**
+ * Provides additional contextual information available to behaviors and expressions.
+ * @public
+ */
+const ExecutionContext = Object.freeze({
+    /**
+     * A default execution context.
+     */
+    default: {
+        index: 0,
+        length: 0,
+        get event() {
+            return ExecutionContext.getEvent();
+        },
+        eventDetail() {
+            return this.event.detail;
+        },
+        eventTarget() {
+            return this.event.target;
+        },
+    },
+    /**
+     * Gets the current event.
+     * @returns An event object.
+     */
+    getEvent() {
+        return contextEvent.get();
+    },
+    /**
+     * Sets the current event.
+     * @param event - An event object.
+     */
+    setEvent(event) {
+        contextEvent.set(event);
+    },
+});
+
+const marker = `fast-${Math.random().toString(36).substring(2, 8)}`;
+let id = 0;
+/** @internal */
+const nextId = () => `${marker}-${++id}`;
+
+/**
+ * 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) {
+                var _a, _b, _c, _d;
+                const compiled = factory;
+                compiled.id = (_a = compiled.id) !== null && _a !== void 0 ? _a : nextId();
+                compiled.targetNodeId = (_b = compiled.targetNodeId) !== null && _b !== void 0 ? _b : nextId();
+                compiled.targetTagName = (_c = target.tagName) !== null && _c !== void 0 ? _c : null;
+                compiled.policy = (_d = compiled.policy) !== null && _d !== void 0 ? _d : DOM.policy;
+                this.addTarget(compiled.targetNodeId, target);
+                this.addBehavior(compiled.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 DataGridCellSortStates = {
   none: "none",
   ascending: "ascending",
@@ -365,8 +1197,7 @@ class DataGridRow extends HostSemantics(VividElement) {
     this.rowType = DataGridRowTypes.default;
     this.rowData = null;
     this.columnDefinitions = null;
-    this.cellsRepeatBehavior = null;
-    this.cellsPlaceholder = null;
+    this.behaviorOrchestrator = null;
     /**
      * @internal
      */
@@ -418,16 +1249,18 @@ class DataGridRow extends HostSemantics(VividElement) {
    */
   connectedCallback() {
     super.connectedCallback();
-    if (this.cellsRepeatBehavior === null) {
-      this.cellsPlaceholder = document.createComment("");
-      this.appendChild(this.cellsPlaceholder);
+    if (this.behaviorOrchestrator === null) {
       this.updateItemTemplate();
-      this.cellsRepeatBehavior = new RepeatDirective(
-        (x) => x.columnDefinitions,
-        (x) => x.activeCellItemTemplate,
-        { positioning: true }
-      ).createBehavior(this.cellsPlaceholder);
-      this.$fastController.addBehaviors([this.cellsRepeatBehavior]);
+      this.behaviorOrchestrator = ViewBehaviorOrchestrator.create(this);
+      this.$fastController.addBehavior(this.behaviorOrchestrator);
+      this.behaviorOrchestrator.addBehaviorFactory(
+        new RepeatDirective(
+          normalizeBinding((x) => x.columnDefinitions),
+          normalizeBinding((x) => x.activeCellItemTemplate),
+          { positioning: true }
+        ),
+        this.appendChild(document.createComment(""))
+      );
     }
     this.addEventListener("cell-focused", this.handleCellFocus);
     this.addEventListener(eventFocusOut, this.handleFocusout);
@@ -571,8 +1404,7 @@ const _DataGrid = class _DataGrid extends VividElement {
      * @internal
      */
     this.fixedColumnsPositions = [];
-    this.rowsRepeatBehavior = null;
-    this.rowsPlaceholder = null;
+    this.behaviorOrchestrator = null;
     this.generatedHeader = null;
     this.isUpdatingFocus = false;
     this.pendingFocusUpdate = false;
@@ -618,7 +1450,7 @@ const _DataGrid = class _DataGrid extends VividElement {
     this.queueRowIndexUpdate = () => {
       if (!this.rowindexUpdateQueued) {
         this.rowindexUpdateQueued = true;
-        DOM.queueUpdate(this.updateRowIndexes);
+        Updates$1.enqueue(this.updateRowIndexes);
       }
     };
     this.updateRowIndexes = () => {
@@ -866,15 +1698,19 @@ const _DataGrid = class _DataGrid extends VividElement {
     if (this.rowItemTemplate === void 0) {
       this.rowItemTemplate = this.defaultRowItemTemplate;
     }
-    this.rowsPlaceholder = document.createComment("");
-    this.appendChild(this.rowsPlaceholder);
+    if (this.behaviorOrchestrator === null) {
+      this.behaviorOrchestrator = ViewBehaviorOrchestrator.create(this);
+      this.$fastController.addBehavior(this.behaviorOrchestrator);
+      this.behaviorOrchestrator.addBehaviorFactory(
+        new RepeatDirective(
+          normalizeBinding((x) => x.rowsData),
+          normalizeBinding((x) => x.rowItemTemplate),
+          { positioning: true }
+        ),
+        this.appendChild(document.createComment(""))
+      );
+    }
     this.toggleGeneratedHeader();
-    this.rowsRepeatBehavior = new RepeatDirective(
-      (x) => x.rowsData,
-      (x) => x.rowItemTemplate,
-      { positioning: true }
-    ).createBehavior(this.rowsPlaceholder);
-    this.$fastController.addBehaviors([this.rowsRepeatBehavior]);
     this.addEventListener("row-focused", this.handleRowFocus);
     this.addEventListener(eventFocus, this.handleFocus);
     this.addEventListener(eventKeyDown, this.handleKeydown);
@@ -882,7 +1718,7 @@ const _DataGrid = class _DataGrid extends VividElement {
     this.observer = new MutationObserver(this.onChildListChange);
     this.observer.observe(this, { childList: true });
     this.setupResizeObserver();
-    DOM.queueUpdate(this.queueRowIndexUpdate);
+    Updates$1.enqueue(this.queueRowIndexUpdate);
     this.#setTabIndex();
     Observable.getNotifier(this).subscribe(
       this.#changeHandler,
@@ -906,7 +1742,6 @@ const _DataGrid = class _DataGrid extends VividElement {
       this.resizeObserver.disconnect();
       this.resizeObserver = void 0;
     }
-    this.rowsPlaceholder = null;
     this.generatedHeader = null;
     Observable.getNotifier(this).unsubscribe(
       this.#changeHandler,
@@ -1026,7 +1861,7 @@ const _DataGrid = class _DataGrid extends VividElement {
     }
     if (this.pendingFocusUpdate === false) {
       this.pendingFocusUpdate = true;
-      DOM.queueUpdate(() => this.updateFocus());
+      Updates$1.enqueue(() => this.updateFocus());
     }
   }
   updateFocus() {
@@ -1074,7 +1909,7 @@ const _DataGrid = class _DataGrid extends VividElement {
   }
   selectionModeChanged(oldValue) {
     if (oldValue === void 0) {
-      DOM.queueUpdate(this._resetSelection);
+      Updates$1.enqueue(this._resetSelection);
       return;
     }
     this._resetSelection(true);
@@ -1246,7 +2081,7 @@ function handleColumnSort(_, { event }) {
 }
 const DataGridTemplate = (context) => {
   const rowItemTemplate = createRowItemTemplate(context);
-  const rowTag = context.tagFor(DataGridRow);
+  const rowTag = context.tagFor(DataGridRow, true);
   return html`
 		<template
 			aria-multiselectable="${getMultiSelectAriaState}"