@microsoft/fast-element 2.0.0-beta.21 → 2.0.0-beta.22

package/dist/dts/templating/render.d.ts

@@ -1,10 +1,11 @@
 import type { FASTElement } from "../components/fast-element.js";
 import type { DOMPolicy } from "../dom.js";
 import { Constructable } from "../interfaces.js";
+import { Binding, BindingDirective } from "../binding/binding.js";
 import type { Subscriber } from "../observation/notifier.js";
 import type { ExecutionContext, Expression, ExpressionObserver } from "../observation/observable.js";
-import { ContentTemplate, ContentView } from "./binding.js";
-import { AddViewBehaviorFactory, Binding, HTMLDirective, ViewBehavior, ViewBehaviorFactory, ViewController } from "./html-directive.js";
+import type { ContentTemplate, ContentView } from "./html-binding-directive.js";
+import { AddViewBehaviorFactory, HTMLDirective, ViewBehavior, ViewBehaviorFactory, ViewController } from "./html-directive.js";
 import { CaptureType, SyntheticViewTemplate, TemplateValue, ViewTemplate } from "./template.js";
 /**
  * A Behavior that enables advanced rendering.
@@ -42,13 +43,13 @@ export declare class RenderBehavior<TSource = any> implements ViewBehavior, Subs
  * A Directive that enables use of the RenderBehavior.
  * @public
  */
-export declare class RenderDirective<TSource = any> implements HTMLDirective, ViewBehaviorFactory {
+export declare class RenderDirective<TSource = any> implements HTMLDirective, ViewBehaviorFactory, BindingDirective {
     readonly dataBinding: Binding<TSource>;
     readonly templateBinding: Binding<TSource, ContentTemplate>;
     readonly templateBindingDependsOnData: boolean;
     /**
      * The structural id of the DOM node to which the created behavior will apply.
-     */
+     */ BindingDirective: any;
     targetNodeId: string;
     /**
      * Creates an instance of RenderDirective.
@@ -143,6 +144,19 @@ export declare type BaseElementRenderOptions<TSource = any, TParent = any> = Com
      */
     policy?: DOMPolicy;
 };
+/**
+ * Render options for directly creating an element with {@link RenderInstruction.createElementTemplate}
+ * @public
+ */
+export declare type ElementCreateOptions<TSource = any, TParent = any> = Omit<BaseElementRenderOptions, "type" | "name"> & {
+    /**
+     * Directives to use when creating the element template. These directives are applied directly to the specified tag.
+     *
+     * @remarks
+     * Directives supported by this API are: `ref`, `children`, `slotted`, or any custom `HTMLDirective` that can be used on a HTML tag.
+     */
+    directives?: TemplateValue<TSource, TParent>[];
+};
 /**
  * Render options used to specify an element.
  * @public
@@ -163,7 +177,7 @@ export declare type TagNameRenderOptions<TSource = any, TParent = any> = BaseEle
      */
     tagName: string;
 };
-declare function createElementTemplate<TSource = any, TParent = any>(tagName: string, attributes?: Record<string, string | TemplateValue<TSource, TParent>>, content?: string | ContentTemplate, policy?: DOMPolicy): ViewTemplate<TSource, TParent>;
+declare function createElementTemplate<TSource = any, TParent = any>(tagName: string, options?: ElementCreateOptions): ViewTemplate<TSource, TParent>;
 declare function create(options: TagNameRenderOptions): RenderInstruction;
 declare function create(options: ElementConstructorRenderOptions): RenderInstruction;
 declare function create(options: TemplateRenderOptions): RenderInstruction;

package/dist/dts/templating/repeat.d.ts

@@ -1,7 +1,8 @@
 import type { Subscriber } from "../observation/notifier.js";
 import { Expression, ExpressionObserver } from "../observation/observable.js";
 import { Splice } from "../observation/arrays.js";
-import { AddViewBehaviorFactory, Binding, HTMLDirective, ViewBehavior, ViewBehaviorFactory, ViewController } from "./html-directive.js";
+import type { Binding, BindingDirective } from "../binding/binding.js";
+import { AddViewBehaviorFactory, HTMLDirective, ViewBehavior, ViewBehaviorFactory, ViewController } from "./html-directive.js";
 import type { CaptureType, SyntheticViewTemplate, ViewTemplate } from "./template.js";
 import { SyntheticView } from "./view.js";
 /**
@@ -68,7 +69,7 @@ export declare class RepeatBehavior<TSource = any> implements ViewBehavior, Subs
  * A directive that configures list rendering.
  * @public
  */
-export declare class RepeatDirective<TSource = any> implements HTMLDirective, ViewBehaviorFactory {
+export declare class RepeatDirective<TSource = any> implements HTMLDirective, ViewBehaviorFactory, BindingDirective {
     readonly dataBinding: Binding<TSource>;
     readonly templateBinding: Binding<TSource, SyntheticViewTemplate>;
     readonly options: RepeatOptions;

package/dist/dts/templating/template.d.ts

@@ -1,6 +1,7 @@
 import type { DOMPolicy } from "../dom.js";
+import { Binding } from "../binding/binding.js";
 import type { Expression } from "../observation/observable.js";
-import { AddViewBehaviorFactory, Binding, HTMLDirective, ViewBehaviorFactory } from "./html-directive.js";
+import { AddViewBehaviorFactory, HTMLDirective, ViewBehaviorFactory } from "./html-directive.js";
 import type { ElementView, HTMLView, SyntheticView } from "./view.js";
 /**
  * A template capable of creating views specifically for rendering custom elements.
@@ -129,11 +130,6 @@ export declare class ViewTemplate<TSource = any, TParent = any> implements Eleme
      * host that the template is being attached to.
      */
     render(source: TSource, host: Node, hostBindingTarget?: Element): HTMLView<TSource, TParent>;
-    /**
-     * Opts out of JSON stringification.
-     * @internal
-     */
-    toJSON: () => undefined;
     /**
      * Creates a template based on a set of static strings and dynamic values.
      * @param strings - The static strings to create the template with.

package/dist/dts/templating/view.d.ts

@@ -1,4 +1,4 @@
-import { Disposable } from "../interfaces.js";
+import type { Disposable } from "../interfaces.js";
 import { ExecutionContext, SourceLifetime } from "../observation/observable.js";
 import type { CompiledViewBehaviorFactory, ViewBehaviorTargets, ViewController } from "./html-directive.js";
 /**
@@ -14,6 +14,10 @@ export interface View<TSource = any, TParent = any> extends Disposable {
      * The data that the view is bound to.
      */
     readonly source: TSource | null;
+    /**
+     * Indicates whether the controller is bound.
+     */
+    readonly isBound: boolean;
     /**
      * Binds a view's behaviors to its binding source.
      * @param source - The binding source for the view's binding behaviors.
@@ -29,6 +33,17 @@ export interface View<TSource = any, TParent = any> extends Disposable {
  * @public
  */
 export interface ElementView<TSource = any, TParent = any> extends View<TSource, TParent> {
+    /**
+     * Indicates how the source's lifetime relates to the controller's lifetime.
+     */
+    readonly sourceLifetime?: SourceLifetime;
+    /**
+     * Registers an unbind handler with the controller.
+     * @param behavior - An object to call when the controller unbinds.
+     */
+    onUnbind(behavior: {
+        unbind(controller: ViewController<TSource, TParent>): any;
+    }): void;
     /**
      * Appends the view's DOM nodes to the referenced node.
      * @param node - The parent node to append the view's DOM nodes to.
@@ -185,11 +200,6 @@ export declare class HTMLView<TSource = any, TParent = any> implements ElementVi
      * Unbinds a view's behaviors from its binding source.
      */
     unbind(): void;
-    /**
-     * Opts out of JSON stringification.
-     * @internal
-     */
-    toJSON: () => undefined;
     private evaluateUnbindables;
     /**
      * Efficiently disposes of a contiguous range of synthetic view instances.

package/dist/dts/testing/fakes.d.ts

@@ -1,4 +1,5 @@
-import { ExecutionContext, ViewBehavior, ViewBehaviorTargets } from "../index.js";
+import { ExecutionContext } from "../observation/observable.js";
+import type { ViewBehavior, ViewBehaviorTargets } from "../templating/html-directive.js";
 export declare const Fake: Readonly<{
     executionContext<TParent = any>(parent?: TParent | undefined, parentContext?: ExecutionContext<TParent> | undefined): ExecutionContext<TParent>;
     viewController<TSource = any, TParent_1 = any>(targets?: ViewBehaviorTargets, ...behaviors: ViewBehavior<TSource, TParent_1>[]): {

package/dist/esm/binding/binding.js

@@ -0,0 +1,18 @@
+/**
+ * Captures a binding expression along with related information and capabilities.
+ *
+ * @public
+ */
+export class Binding {
+    /**
+     * Creates a binding.
+     * @param evaluate - Evaluates the binding.
+     * @param policy - The security policy to associate with this binding.
+     * @param isVolatile - Indicates whether the binding is volatile.
+     */
+    constructor(evaluate, policy, isVolatile = false) {
+        this.evaluate = evaluate;
+        this.policy = policy;
+        this.isVolatile = isVolatile;
+    }
+}

package/dist/esm/binding/normalize.js

@@ -0,0 +1,17 @@
+import { isFunction } from "../interfaces.js";
+import { Binding } from "./binding.js";
+import { oneWay } from "./one-way.js";
+import { oneTime } from "./one-time.js";
+/**
+ * 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
+ */
+export function normalizeBinding(value) {
+    return isFunction(value)
+        ? oneWay(value)
+        : value instanceof Binding
+            ? value
+            : oneTime(() => value);
+}

package/dist/esm/binding/one-time.js

@@ -0,0 +1,21 @@
+import { makeSerializationNoop } from "../platform.js";
+import { Binding } from "./binding.js";
+class OneTimeBinding extends Binding {
+    createObserver() {
+        return this;
+    }
+    bind(controller) {
+        return this.evaluate(controller.source, controller.context);
+    }
+}
+makeSerializationNoop(OneTimeBinding);
+/**
+ * Creates a one time binding
+ * @param expression - The binding to refresh when signaled.
+ * @param policy - The security policy to associate with th binding.
+ * @returns A binding configuration.
+ * @public
+ */
+export function oneTime(expression, policy) {
+    return new OneTimeBinding(expression, policy);
+}

package/dist/esm/binding/one-way.js

@@ -0,0 +1,30 @@
+import { Observable } from "../observation/observable.js";
+import { Binding } from "./binding.js";
+class OneWayBinding extends Binding {
+    createObserver(subscriber) {
+        return Observable.binding(this.evaluate, subscriber, this.isVolatile);
+    }
+}
+/**
+ * Creates an standard binding.
+ * @param expression - The binding to refresh when changed.
+ * @param policy - The security policy to associate with th binding.
+ * @param isVolatile - Indicates whether the binding is volatile or not.
+ * @returns A binding configuration.
+ * @public
+ */
+export function oneWay(expression, policy, isVolatile = Observable.isVolatileBinding(expression)) {
+    return new OneWayBinding(expression, policy, isVolatile);
+}
+/**
+ * Creates an event listener binding.
+ * @param expression - The binding to invoke when the event is raised.
+ * @param options - Event listener options.
+ * @returns A binding configuration.
+ * @public
+ */
+export function listener(expression, options) {
+    const config = new OneWayBinding(expression);
+    config.options = options;
+    return config;
+}

package/dist/esm/{templating/binding-signal.js → binding/signal.js}

@@ -1,5 +1,6 @@
-import { isString, noop } from "../interfaces.js";
-import { Binding } from "./html-directive.js";
+import { isString } from "../interfaces.js";
+import { makeSerializationNoop } from "../platform.js";
+import { Binding } from "./binding.js";
 const subscribers = Object.create(null);
 export const Signal = Object.freeze({
     subscribe(signal, subscriber) {
@@ -41,11 +42,6 @@ class SignalObserver {
         this.dataBinding = dataBinding;
         this.subscriber = subscriber;
         this.isNotBound = true;
-        /**
-         * Opts out of JSON stringification.
-         * @internal
-         */
-        this.toJSON = noop;
     }
     bind(controller) {
         if (this.isNotBound) {
@@ -69,8 +65,9 @@ class SignalObserver {
             : options(controller.source, controller.context);
     }
 }
+makeSerializationNoop(SignalObserver);
 class SignalBinding extends Binding {
-    createObserver(directive, subscriber) {
+    createObserver(subscriber) {
         return new SignalObserver(this, subscriber);
     }
 }

package/dist/esm/{templating/binding-two-way.js → binding/two-way.js}

@@ -1,7 +1,7 @@
-import { isString, noop } from "../interfaces.js";
+import { isString } from "../interfaces.js";
 import { Observable, } from "../observation/observable.js";
-import { FAST } from "../platform.js";
-import { Binding } from "./html-directive.js";
+import { FAST, makeSerializationNoop } from "../platform.js";
+import { Binding } from "./binding.js";
 const defaultOptions = {
     fromView: v => v,
 };
@@ -25,11 +25,6 @@ class TwoWayObserver {
         this.subscriber = subscriber;
         this.dataBinding = dataBinding;
         this.isNotBound = true;
-        /**
-         * Opts out of JSON stringification.
-         * @internal
-         */
-        this.toJSON = noop;
         this.notifier = Observable.binding(dataBinding.evaluate, this, dataBinding.isVolatile);
     }
     bind(controller) {
@@ -53,7 +48,7 @@ class TwoWayObserver {
         this.subscriber.handleChange(this.dataBinding.evaluate, this);
     }
     handleEvent(event) {
-        const directive = this.directive;
+        const bindingSource = this.directive;
         const target = event.currentTarget;
         const notifier = this.notifier;
         const last = notifier.last; // using internal API!!!
@@ -62,26 +57,27 @@ class TwoWayObserver {
             return;
         }
         let value;
-        switch (directive.aspectType) {
+        switch (bindingSource.aspectType) {
             case 1:
-                value = target.getAttribute(directive.targetAspect);
+                value = target.getAttribute(bindingSource.targetAspect);
                 break;
             case 2:
-                value = target.hasAttribute(directive.targetAspect);
+                value = target.hasAttribute(bindingSource.targetAspect);
                 break;
             case 4:
                 value = target.innerText;
                 break;
             default:
-                value = target[directive.targetAspect];
+                value = target[bindingSource.targetAspect];
                 break;
         }
         last.propertySource[last.propertyName] = this.dataBinding.options.fromView(value);
     }
 }
+makeSerializationNoop(TwoWayObserver);
 class TwoWayBinding extends Binding {
-    createObserver(directive, subscriber) {
-        return new TwoWayObserver(directive, subscriber, this);
+    createObserver(subscriber, bindingSource) {
+        return new TwoWayObserver(bindingSource, subscriber, this);
     }
 }
 /**

package/dist/esm/components/element-controller.js

@@ -1,7 +1,7 @@
-import { noop } from "../interfaces.js";
+import "../interfaces.js";
 import { PropertyChangeNotifier } from "../observation/notifier.js";
-import { Observable, SourceLifetime } from "../observation/observable.js";
-import { FAST } from "../platform.js";
+import { ExecutionContext, Observable, SourceLifetime, } from "../observation/observable.js";
+import { FAST, makeSerializationNoop } from "../platform.js";
 import { ElementStyles } from "../styles/element-styles.js";
 import { FASTElementDefinition } from "./fast-definitions.js";
 const defaultEventOptions = {
@@ -58,11 +58,6 @@ export class ElementController extends PropertyChangeNotifier {
          * If `null` then the element is managing its own rendering.
          */
         this.view = null;
-        /**
-         * Opts out of JSON stringification.
-         * @internal
-         */
-        this.toJSON = noop;
         this.source = element;
         this.definition = definition;
         const shadowOptions = definition.shadowOptions;
@@ -103,6 +98,27 @@ export class ElementController extends PropertyChangeNotifier {
         Observable.track(this, isConnectedPropertyName);
         return this.stage === 1 /* Stages.connected */;
     }
+    /**
+     * The context the expression is evaluated against.
+     */
+    get context() {
+        var _a, _b;
+        return (_b = (_a = this.view) === null || _a === void 0 ? void 0 : _a.context) !== null && _b !== void 0 ? _b : ExecutionContext.default;
+    }
+    /**
+     * Indicates whether the controller is bound.
+     */
+    get isBound() {
+        var _a, _b;
+        return (_b = (_a = this.view) === null || _a === void 0 ? void 0 : _a.isBound) !== null && _b !== void 0 ? _b : false;
+    }
+    /**
+     * Indicates how the source's lifetime relates to the controller's lifetime.
+     */
+    get sourceLifetime() {
+        var _a;
+        return (_a = this.view) === null || _a === void 0 ? void 0 : _a.sourceLifetime;
+    }
     /**
      * Gets/sets the template used to render the component.
      * @remarks
@@ -165,6 +181,14 @@ export class ElementController extends PropertyChangeNotifier {
             this.addStyles(value);
         }
     }
+    /**
+     * Registers an unbind handler with the controller.
+     * @param behavior - An object to call when the controller unbinds.
+     */
+    onUnbind(behavior) {
+        var _a;
+        (_a = this.view) === null || _a === void 0 ? void 0 : _a.onUnbind(behavior);
+    }
     /**
      * Adds the behavior to the component.
      * @param behavior - The behavior to add.
@@ -397,6 +421,7 @@ export class ElementController extends PropertyChangeNotifier {
         elementControllerStrategy = strategy;
     }
 }
+makeSerializationNoop(ElementController);
 // Set default strategy for ElementController
 ElementController.setStrategy(ElementController);
 /**

package/dist/esm/context.js

@@ -1,6 +1,7 @@
 import "./interfaces.js";
 import { Metadata } from "./metadata.js";
 import { FAST } from "./platform.js";
+const contextsByName = new Map();
 const contextEventType = "context-request";
 let requestStrategy;
 /**
@@ -12,6 +13,20 @@ export const Context = Object.freeze({
      * The event type used for W3C Context Protocol requests.
      */
     eventType: contextEventType,
+    /**
+     * Returns a FASTContext object from the global context registry matching the given name if found.
+     * Otherwise, returns a new FASTContext with this name.
+     * @param name - The name of the FASTContext to get or create.
+     * @returns A FASTContext object.
+     */
+    for(name) {
+        let c = contextsByName.get(name);
+        if (c === void 0) {
+            c = Context.create(name);
+            contextsByName.set(name, c);
+        }
+        return c;
+    },
     /**
      * Creates a W3C Community Protocol-based Context object to use in requesting/providing
      * context through the DOM.
@@ -94,8 +109,14 @@ export const Context = Object.freeze({
     dispatch(target, context, callback, multiple = false) {
         target.dispatchEvent(new ContextEvent(context, callback, multiple));
     },
+    /**
+     * Enables an event target to provide a context value.
+     * @param target The target to provide the context value for.
+     * @param context The context to provide the value for.
+     * @param value The value to provide for the context.
+     */
     provide(target, context, value) {
-        this.handle(target, (event) => {
+        Context.handle(target, (event) => {
             event.stopImmediatePropagation();
             event.callback(value);
         }, context);

package/dist/esm/index.js

@@ -1,21 +1,27 @@
-export * from "./platform.js";
+export { FAST, emptyArray } from "./platform.js";
+// DOM
 export * from "./dom.js";
 // Observation
 export * from "./observation/observable.js";
 export * from "./observation/notifier.js";
 export * from "./observation/arrays.js";
 export * from "./observation/update-queue.js";
+// Binding
+export * from "./binding/binding.js";
+export * from "./binding/one-way.js";
+export * from "./binding/one-time.js";
 // Styles
 export * from "./styles/element-styles.js";
 export * from "./styles/css.js";
 export * from "./styles/css-directive.js";
 export * from "./styles/host.js";
 export * from "./styles/style-strategy.js";
+export * from "./styles/css-binding-directive.js";
 // Templating
 export * from "./templating/template.js";
 export * from "./templating/compiler.js";
 export { Markup, Parser } from "./templating/markup.js";
-export * from "./templating/binding.js";
+export * from "./templating/html-binding-directive.js";
 export * from "./templating/html-directive.js";
 export * from "./templating/ref.js";
 export * from "./templating/when.js";

package/dist/esm/interfaces.js

@@ -45,16 +45,16 @@ switch (kernelMode) {
 export { KernelServiceId };
 /**
  * Determines whether or not an object is a function.
- * @internal
+ * @public
  */
 export const isFunction = (object) => typeof object === "function";
 /**
  * Determines whether or not an object is a string.
- * @internal
+ * @public
  */
 export const isString = (object) => typeof object === "string";
 /**
  * A function which does nothing.
- * @internal
+ * @public
  */
 export const noop = () => void 0;

package/dist/esm/metadata.js

@@ -23,8 +23,10 @@ if (!("metadata" in Reflect)) {
     };
 }
 const annotationParamTypesKey = "annotation:paramtypes";
+const designParamTypesKey = "design:paramtypes";
 /**
  * Provides basic metadata capabilities used by Context and Dependency Injection.
+ * @public
  */
 export const Metadata = Object.freeze({
     /**
@@ -34,7 +36,7 @@ export const Metadata = Object.freeze({
      */
     getDesignParamTypes: (Type) => {
         var _a;
-        return ((_a = Reflect.getOwnMetadata("design:paramtypes", Type)) !== null && _a !== void 0 ? _a : emptyArray);
+        return ((_a = Reflect.getOwnMetadata(designParamTypesKey, Type)) !== null && _a !== void 0 ? _a : emptyArray);
     },
     /**
      * Gets the "annotation:paramtypes" metadata for the specified type.

package/dist/esm/observation/observable.js

@@ -1,5 +1,5 @@
-import { isFunction, isString, KernelServiceId, noop, } from "../interfaces.js";
-import { createMetadataLocator, FAST } from "../platform.js";
+import { isFunction, isString, KernelServiceId, } from "../interfaces.js";
+import { createMetadataLocator, FAST, makeSerializationNoop } from "../platform.js";
 import { Updates } from "./update-queue.js";
 import { PropertyChangeNotifier, SubscriberSet } from "./notifier.js";
 /**
@@ -79,10 +79,6 @@ export const Observable = FAST.getById(KernelServiceId.observable, () => {
             this.propertyName = void 0;
             this.notifier = void 0;
             this.next = void 0;
-            /**
-             * Opts out of JSON stringification.
-             */
-            this.toJSON = noop;
         }
         setMode(isAsync) {
             this.isAsync = this.needsQueue = isAsync;
@@ -184,6 +180,7 @@ export const Observable = FAST.getById(KernelServiceId.observable, () => {
             }
         }
     }
+    makeSerializationNoop(ExpressionNotifierImplementation);
     return Object.freeze({
         /**
          * @internal

package/dist/esm/platform.js

@@ -1,3 +1,4 @@
+import { noop } from "./interfaces.js";
 import "./polyfills.js";
 // ensure FAST global - duplicated debug.ts
 const propConfig = {
@@ -86,3 +87,11 @@ export function createMetadataLocator() {
         return metadata;
     };
 }
+/**
+ * Makes a type noop for JSON serialization.
+ * @param type - The type to make noop for JSON serialization.
+ * @internal
+ */
+export function makeSerializationNoop(type) {
+    type.prototype.toJSON = noop;
+}

package/dist/esm/styles/css-binding-directive.js

@@ -0,0 +1,76 @@
+import { CSSDirective } from "./css-directive.js";
+function handleChange(directive, controller, observer) {
+    controller.source.style.setProperty(directive.targetAspect, observer.bind(controller));
+}
+/**
+ * Enables bindings in CSS.
+ *
+ * @public
+ */
+export class CSSBindingDirective {
+    /**
+     * Creates an instance of CSSBindingDirective.
+     * @param dataBinding - The binding to use in CSS.
+     * @param targetAspect - The CSS property to target.
+     */
+    constructor(dataBinding, targetAspect) {
+        this.dataBinding = dataBinding;
+        this.targetAspect = targetAspect;
+    }
+    /**
+     * Creates a CSS fragment to interpolate into the CSS document.
+     * @returns - the string to interpolate into CSS
+     */
+    createCSS(add) {
+        add(this);
+        return `var(${this.targetAspect})`;
+    }
+    /**
+     * Executed when this behavior is attached to a controller.
+     * @param controller - Controls the behavior lifecycle.
+     */
+    addedCallback(controller) {
+        var _a;
+        const element = controller.source;
+        if (!element.$cssBindings) {
+            element.$cssBindings = new Map();
+            const setAttribute = element.setAttribute;
+            element.setAttribute = (attr, value) => {
+                setAttribute.call(element, attr, value);
+                if (attr === "style") {
+                    element.$cssBindings.forEach((v, k) => handleChange(k, v.controller, v.observer));
+                }
+            };
+        }
+        const observer = (_a = controller[this.targetAspect]) !== null && _a !== void 0 ? _a : (controller[this.targetAspect] = this.dataBinding.createObserver(this, this));
+        observer.controller = controller;
+        controller.source.$cssBindings.set(this, { controller, observer });
+    }
+    /**
+     * Executed when this behavior's host is connected.
+     * @param controller - Controls the behavior lifecycle.
+     */
+    connectedCallback(controller) {
+        handleChange(this, controller, controller[this.targetAspect]);
+    }
+    /**
+     * Executed when this behavior is detached from a controller.
+     * @param controller - Controls the behavior lifecycle.
+     */
+    removedCallback(controller) {
+        if (controller.source.$cssBindings) {
+            controller.source.$cssBindings.delete(this);
+        }
+    }
+    /**
+     * Called when a subject this instance has subscribed to changes.
+     * @param subject - The subject of the change.
+     * @param args - The event args detailing the change that occurred.
+     *
+     * @internal
+     */
+    handleChange(_, observer) {
+        handleChange(this, observer.controller, observer);
+    }
+}
+CSSDirective.define(CSSBindingDirective);