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

package/CHANGELOG.json

@@ -1,6 +1,60 @@
 {
   "name": "@microsoft/fast-element",
   "entries": [
+    {
+      "date": "Sat, 11 Mar 2023 00:09:48 GMT",
+      "tag": "@microsoft/fast-element_v2.0.0-beta.22",
+      "version": "2.0.0-beta.22",
+      "comments": {
+        "prerelease": [
+          {
+            "author": "rob@bluespire.com",
+            "package": "@microsoft/fast-element",
+            "commit": "1c81922fbc9a7596330d53251975fb3f47357361",
+            "comment": "feat: add Context.for"
+          },
+          {
+            "author": "rob@bluespire.com",
+            "package": "@microsoft/fast-element",
+            "commit": "70eb15bc13d9f4d849bc5b1fe4d591a23e57c935",
+            "comment": "feat: enable data binding in CSS"
+          },
+          {
+            "author": "32497422+KingOfTac@users.noreply.github.com",
+            "package": "@microsoft/fast-element",
+            "commit": "d0ef0d6b1540ed90730187b45bdaf47aa9dcb183",
+            "comment": "add directives support for createElementTemplate"
+          },
+          {
+            "author": "rob@bluespire.com",
+            "package": "@microsoft/fast-element",
+            "commit": "24ec7cb05e955c5b916f611e96c47da665556604",
+            "comment": "fix: clean up toJSON noop on core fast-element types"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Tue, 14 Feb 2023 04:02:35 GMT",
+      "tag": "@microsoft/fast-element_v2.0.0-beta.21",
+      "version": "2.0.0-beta.21",
+      "comments": {
+        "prerelease": [
+          {
+            "author": "rob@bluespire.com",
+            "package": "@microsoft/fast-element",
+            "commit": "d38d31d2dd7496b5eb1e7c65b57de9a5e05e8546",
+            "comment": "fix: cleanup types, docs, etc. in root source files of fast-element in preparation for release"
+          },
+          {
+            "author": "nicholasrice@users.noreply.github.com",
+            "package": "@microsoft/fast-element",
+            "commit": "09d57ca18700331d054515c3b3f6fae07528cca0",
+            "comment": "Remove un-necessary expression from StyleElementStrategy"
+          }
+        ]
+      }
+    },
     {
       "date": "Wed, 11 Jan 2023 22:07:47 GMT",
       "tag": "@microsoft/fast-element_v2.0.0-beta.20",

package/CHANGELOG.md

@@ -1,9 +1,29 @@
 # Change Log - @microsoft/fast-element
 
-This log was last generated on Wed, 11 Jan 2023 22:07:47 GMT and should not be manually modified.
+This log was last generated on Sat, 11 Mar 2023 00:09:48 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 2.0.0-beta.22
+
+Sat, 11 Mar 2023 00:09:48 GMT
+
+### Changes
+
+- feat: add Context.for (rob@bluespire.com)
+- feat: enable data binding in CSS (rob@bluespire.com)
+- add directives support for createElementTemplate (32497422+KingOfTac@users.noreply.github.com)
+- fix: clean up toJSON noop on core fast-element types (rob@bluespire.com)
+
+## 2.0.0-beta.21
+
+Tue, 14 Feb 2023 04:02:35 GMT
+
+### Changes
+
+- fix: cleanup types, docs, etc. in root source files of fast-element in preparation for release (rob@bluespire.com)
+- Remove un-necessary expression from StyleElementStrategy (nicholasrice@users.noreply.github.com)
+
 ## 2.0.0-beta.20
 
 Wed, 11 Jan 2023 22:07:47 GMT

package/dist/dts/binding/binding.d.ts

@@ -0,0 +1,49 @@
+import type { DOMAspect, DOMPolicy } from "../dom.js";
+import type { Subscriber } from "../observation/notifier.js";
+import type { Expression, ExpressionObserver } from "../observation/observable.js";
+/**
+ * The directive from which a binding originates.
+ *
+ * @public
+ */
+export interface BindingDirective {
+    /**
+     * The binding.
+     */
+    readonly dataBinding: Binding;
+    /**
+     * The evaluated target aspect.
+     */
+    readonly targetAspect?: string;
+    /**
+     * The type of aspect to target.
+     */
+    readonly aspectType?: DOMAspect;
+}
+/**
+ * Captures a binding expression along with related information and capabilities.
+ *
+ * @public
+ */
+export declare abstract class Binding<TSource = any, TReturn = any, TParent = any> {
+    evaluate: Expression<TSource, TReturn, TParent>;
+    policy?: DOMPolicy | undefined;
+    isVolatile: boolean;
+    /**
+     * Options associated with the binding.
+     */
+    options?: any;
+    /**
+     * 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: Expression<TSource, TReturn, TParent>, policy?: DOMPolicy | undefined, isVolatile?: boolean);
+    /**
+     * Creates an observer capable of notifying a subscriber when the output of a binding changes.
+     * @param subscriber - The subscriber to changes in the binding.
+     * @param directive - The Binding directive to create the observer for.
+     */
+    abstract createObserver(subscriber: Subscriber, directive: BindingDirective): ExpressionObserver<TSource, TReturn, TParent>;
+}

package/dist/dts/binding/normalize.d.ts

@@ -0,0 +1,9 @@
+import type { Expression } from "../observation/observable.js";
+import { Binding } from "./binding.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 declare function normalizeBinding<TSource = any, TReturn = any, TParent = any>(value: Expression<TSource, TReturn, TParent> | Binding<TSource, TReturn, TParent> | {}): Binding<TSource, TReturn, TParent>;

package/dist/dts/binding/one-time.d.ts

@@ -0,0 +1,11 @@
+import type { DOMPolicy } from "../dom.js";
+import type { Expression } from "../observation/observable.js";
+import { Binding } from "./binding.js";
+/**
+ * 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 declare function oneTime<T = any>(expression: Expression<T>, policy?: DOMPolicy): Binding<T>;

package/dist/dts/binding/one-way.d.ts

@@ -0,0 +1,20 @@
+import type { DOMPolicy } from "../dom.js";
+import { Expression } from "../observation/observable.js";
+import { Binding } from "./binding.js";
+/**
+ * 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 declare function oneWay<T = any>(expression: Expression<T>, policy?: DOMPolicy, isVolatile?: boolean): Binding<T>;
+/**
+ * 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 declare function listener<T = any>(expression: Expression<T>, options?: AddEventListenerOptions): Binding<T>;

package/dist/dts/{templating/binding-signal.d.ts → binding/signal.d.ts}

@@ -1,7 +1,7 @@
 import type { Expression } from "../observation/observable.js";
 import type { Subscriber } from "../observation/notifier.js";
 import type { DOMPolicy } from "../dom.js";
-import { Binding } from "./html-directive.js";
+import { Binding } from "./binding.js";
 export declare const Signal: Readonly<{
     subscribe(signal: string, subscriber: Subscriber): void;
     unsubscribe(signal: string, subscriber: Subscriber): void;

package/dist/dts/{templating/binding-two-way.d.ts → binding/two-way.d.ts}

@@ -1,7 +1,6 @@
 import type { DOMPolicy } from "../dom.js";
 import { Expression } from "../observation/observable.js";
-import type { HTMLBindingDirective } from "./binding.js";
-import { Binding } from "./html-directive.js";
+import { Binding, BindingDirective } from "./binding.js";
 /**
  * The twoWay binding options.
  * @public
@@ -17,10 +16,10 @@ export declare type TwoWayBindingOptions = {
 export interface TwoWaySettings {
     /**
      * Determines which event to listen to, to detect changes in the view.
-     * @param directive - The directive to determine the change event for.
+     * @param bindingSource - The directive to determine the change event for.
      * @param target - The target element to determine the change event for.
      */
-    determineChangeEvent(directive: HTMLBindingDirective, target: HTMLElement): string;
+    determineChangeEvent(bindingSource: BindingDirective, target: HTMLElement): string;
 }
 export declare const TwoWaySettings: Readonly<{
     /**

package/dist/dts/components/element-controller.d.ts

@@ -1,4 +1,5 @@
 import { PropertyChangeNotifier } from "../observation/notifier.js";
+import { ExecutionContext, ExpressionController, SourceLifetime } from "../observation/observable.js";
 import { ElementStyles } from "../styles/element-styles.js";
 import type { HostBehavior, HostController } from "../styles/host.js";
 import type { StyleStrategy, StyleTarget } from "../styles/style-strategy.js";
@@ -59,6 +60,18 @@ export declare class ElementController<TElement extends HTMLElement = HTMLElemen
      * connected to the document.
      */
     get isConnected(): boolean;
+    /**
+     * The context the expression is evaluated against.
+     */
+    get context(): ExecutionContext;
+    /**
+     * Indicates whether the controller is bound.
+     */
+    get isBound(): boolean;
+    /**
+     * Indicates how the source's lifetime relates to the controller's lifetime.
+     */
+    get sourceLifetime(): SourceLifetime | undefined;
     /**
      * Gets/sets the template used to render the component.
      * @remarks
@@ -80,6 +93,13 @@ export declare class ElementController<TElement extends HTMLElement = HTMLElemen
      * @internal
      */
     constructor(element: TElement, definition: FASTElementDefinition);
+    /**
+     * Registers an unbind handler with the controller.
+     * @param behavior - An object to call when the controller unbinds.
+     */
+    onUnbind(behavior: {
+        unbind(controller: ExpressionController<TElement>): any;
+    }): void;
     /**
      * Adds the behavior to the component.
      * @param behavior - The behavior to add.
@@ -125,11 +145,6 @@ export declare class ElementController<TElement extends HTMLElement = HTMLElemen
      * Only emits events if connected.
      */
     emit(type: string, detail?: any, options?: Omit<CustomEventInit, "detail">): void | boolean;
-    /**
-     * Opts out of JSON stringification.
-     * @internal
-     */
-    toJSON: () => undefined;
     private renderTemplate;
     /**
      * Locates or creates a controller for the specified element.

package/dist/dts/context.d.ts

@@ -11,44 +11,51 @@ export declare type Context<T> = {
  * A constant key that can be used to represent a Context dependency.
  * The key can be used for context or DI but also doubles as a decorator for
  * resolving the associated dependency.
- * @beta
+ * @public
  */
 export declare type ContextDecorator<T = any> = Readonly<Context<T>> & PropertyDecorator & ParameterDecorator;
 /**
  * A Context object defines an optional initial value for a Context, as well as a name identifier for debugging purposes.
  * The FASTContext can also be used as a decorator to declare context dependencies or as a key for DI.
- * @beta
+ * @public
  */
 export declare type FASTContext<T> = ContextDecorator<T> & {
     get(target: EventTarget): T;
     provide(target: EventTarget, value: T): void;
     request(target: EventTarget, callback: ContextCallback<T>, multiple?: boolean): void;
-    handle(target: EventTarget, callback: (event: ContextEvent<FASTContext<T>>) => void): any;
+    handle(target: EventTarget, callback: (event: ContextEvent<FASTContext<T>>) => void): void;
 };
 /**
  * A strategy that controls how all Context.request API calls are handled.
  * @remarks
- * By default this is handled via Context.dispatch, which dispatched a ContextEvent.
- * @beta
+ * By default this is handled via Context.dispatch, which dispatches a ContextEvent.
+ * @public
  */
 export declare type FASTContextRequestStrategy = <T extends UnknownContext>(target: EventTarget, context: T, callback: ContextCallback<ContextType<T>>, multiple: any) => void;
 declare const contextEventType = "context-request";
 /**
  * Enables using the {@link https://github.com/webcomponents-cg/community-protocols/blob/main/proposals/context.md | W3C Community Context protocol.}
- * @beta
+ * @public
  */
 export declare const Context: Readonly<{
     /**
      * The event type used for W3C Context Protocol requests.
      */
     eventType: "context-request";
+    /**
+     * 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<T = unknown>(name: string): FASTContext<T>;
     /**
      * Creates a W3C Community Protocol-based Context object to use in requesting/providing
      * context through the DOM.
      * @param name - The name to use for the connext. Useful in debugging.
      * @param initialValue - An optional initial value to use if a context handler isn't found.
      */
-    create<T = unknown>(name: string, initialValue?: T | undefined): FASTContext<T>;
+    create<T_1 = unknown>(name: string, initialValue?: T_1 | undefined): FASTContext<T_1>;
     /**
      * Sets the strategy used by all FAST-specific context requests made through the
      * Context.request, Context.get, Context.defineProperty, and ContextDecorator APIs.
@@ -65,7 +72,7 @@ export declare const Context: Readonly<{
      * Uses the default request strategy to locate the context. If no context is found
      * then the initial value of the context is returned.
      */
-    get<T_1 extends UnknownContext>(target: EventTarget, context: T_1): ContextType<T_1>;
+    get<T_2 extends UnknownContext>(target: EventTarget, context: T_2): ContextType<T_2>;
     /**
      * Requests the context value for the target node.
      * @param target - The target to request the context for.
@@ -76,7 +83,7 @@ export declare const Context: Readonly<{
      * @remarks
      * Uses the default request strategy to locate the context.
      */
-    request<T_2 extends UnknownContext>(target: EventTarget, context: T_2, callback: ContextCallback<ContextType<T_2>>, multiple?: boolean): void;
+    request<T_3 extends UnknownContext>(target: EventTarget, context: T_3, callback: ContextCallback<ContextType<T_3>>, multiple?: boolean): void;
     /**
      *
      * @param target - The target to dispatch the context event on.
@@ -88,8 +95,14 @@ export declare const Context: Readonly<{
      * This API does NOT use the default request strategy. It always dispatches
      * an event through the DOM.
      */
-    dispatch<T_3 extends UnknownContext>(target: EventTarget, context: T_3, callback: ContextCallback<ContextType<T_3>>, multiple?: boolean): void;
-    provide<T_4 extends UnknownContext>(target: EventTarget, context: T_4, value: ContextType<T_4>): void;
+    dispatch<T_4 extends UnknownContext>(target: EventTarget, context: T_4, callback: ContextCallback<ContextType<T_4>>, multiple?: boolean): void;
+    /**
+     * 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<T_5 extends UnknownContext>(target: EventTarget, context: T_5, value: ContextType<T_5>): void;
     /**
      *
      * @param target - The target on which to handle context requests.
@@ -99,7 +112,7 @@ export declare const Context: Readonly<{
      * If a context is not provided then the callback will be invoked for all context
      * requests that are received on the target.
      */
-    handle<T_5 extends UnknownContext>(target: EventTarget, callback: (event: ContextEvent<T_5>) => void, context?: T_5 | undefined): void;
+    handle<T_6 extends UnknownContext>(target: EventTarget, callback: (event: ContextEvent<T_6>) => void, context?: T_6 | undefined): void;
     /**
      * Defines a getter-only property on the target that will return the context
      * value for the target.
@@ -110,7 +123,7 @@ export declare const Context: Readonly<{
      * Uses the default request strategy to locate the context and will return the
      * initialValue if the context isn't handled.
      */
-    defineProperty<T_6 extends UnknownContext>(target: Constructable<EventTarget> | EventTarget, propertyName: string, context: T_6): void;
+    defineProperty<T_7 extends UnknownContext>(target: Constructable<EventTarget> | EventTarget, propertyName: string, context: T_7): void;
 }>;
 /**
  * An unknown context type.

package/dist/dts/dom-policy.d.ts

@@ -2,10 +2,12 @@ import { DOMAspect, DOMPolicy, DOMSink } from "./dom.js";
 import { TrustedTypesPolicy } from "./interfaces.js";
 /**
  * A specific DOM sink guard for a node aspect.
+ * @public
  */
 export declare type DOMSinkGuards = Record<string, (tagName: string | null, aspect: DOMAspect, aspectName: string, sink: DOMSink) => DOMSink>;
 /**
  * Aspect-specific guards for a DOM Policy.
+ * @public
  */
 export declare type DOMAspectGuards = {
     /**
@@ -35,17 +37,26 @@ export declare type DOMAspectGuards = {
 };
 /**
  * Element-specific guards for a DOM Policy.
+ * @public
  */
 export declare type DOMElementGuards = Record<string, DOMAspectGuards>;
 /**
  * Guard configuration for a DOM Policy.
+ * @public
  */
 export declare type DOMGuards = {
+    /**
+     * Guards for specific elements.
+     */
     elements: DOMElementGuards;
+    /**
+     * General aspect guards independent of the element type.
+     */
     aspects: DOMAspectGuards;
 };
 /**
  * Options for creating a DOM Policy.
+ * @public
  */
 export declare type DOMPolicyOptions = {
     /**
@@ -57,6 +68,10 @@ export declare type DOMPolicyOptions = {
      */
     guards?: Partial<DOMGuards>;
 };
+/**
+ * A helper for creating DOM policies.
+ * @public
+ */
 declare const DOMPolicy: Readonly<{
     /**
      * Creates a new DOM Policy object.

package/dist/dts/index.d.ts

@@ -1,19 +1,23 @@
 export type { Callable, Constructable, Class, Disposable, FASTGlobal, TrustedTypesPolicy, } from "./interfaces.js";
-export * from "./platform.js";
+export { FAST, emptyArray } from "./platform.js";
 export * from "./dom.js";
 export * from "./observation/observable.js";
 export * from "./observation/notifier.js";
 export * from "./observation/arrays.js";
 export * from "./observation/update-queue.js";
+export * from "./binding/binding.js";
+export * from "./binding/one-way.js";
+export * from "./binding/one-time.js";
 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";
 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/dts/interfaces.d.ts

@@ -46,14 +46,14 @@ export declare type TrustedTypesPolicy = {
 };
 /**
  * Reverses all readonly members, making them mutable.
- * @internal
+ * @public
  */
 export declare type Mutable<T> = {
     -readonly [P in keyof T]: T[P];
 };
 /**
  * The FAST global.
- * @internal
+ * @public
  */
 export interface FASTGlobal {
     /**
@@ -114,6 +114,7 @@ export declare const enum Message {
     directCallToHTMLTagNotAllowed = 1206,
     onlySetTemplatePolicyOnce = 1207,
     cannotSetTemplatePolicyAfterCompilation = 1208,
+    blockedByDOMPolicy = 1209,
     missingElementDefinition = 1401,
     noRegistrationForContext = 1501,
     noFactoryForResolver = 1502,
@@ -132,16 +133,16 @@ export declare const enum Message {
 }
 /**
  * Determines whether or not an object is a function.
- * @internal
+ * @public
  */
 export declare const isFunction: (object: any) => object is Function;
 /**
  * Determines whether or not an object is a string.
- * @internal
+ * @public
  */
 export declare const isString: (object: any) => object is string;
 /**
  * A function which does nothing.
- * @internal
+ * @public
  */
 export declare const noop: () => undefined;

package/dist/dts/metadata.d.ts

@@ -1,6 +1,7 @@
 import type { Constructable } from "./interfaces.js";
 /**
  * Provides basic metadata capabilities used by Context and Dependency Injection.
+ * @public
  */
 export declare const Metadata: Readonly<{
     /**
@@ -8,18 +9,18 @@ export declare const Metadata: Readonly<{
      * @param Type - The type to get the metadata for.
      * @returns The metadata array or a frozen empty array if no metadata is found.
      */
-    getDesignParamTypes: (Type: any) => any;
+    getDesignParamTypes: (Type: Constructable) => readonly any[];
     /**
      * Gets the "annotation:paramtypes" metadata for the specified type.
      * @param Type - The type to get the metadata for.
      * @returns The metadata array or a frozen empty array if no metadata is found.
      */
-    getAnnotationParamTypes: (Type: any) => any;
+    getAnnotationParamTypes: (Type: Constructable) => readonly any[];
     /**
-     *
-     * @param Type - Gets the "annotation:paramtypes" metadata for the specified type. If none is found,
+     * Gets the "annotation:paramtypes" metadata for the specified type. If none is found,
      * an empty, mutable metadata array is created and added.
-     * @returns The metadata array.
+     * @param Type - The type to get or create the metadata for.
+     * @returns A mutable metadata array.
      */
     getOrCreateAnnotationParamTypes(Type: Constructable): any[];
 }>;

package/dist/dts/pending-task.d.ts

@@ -1,20 +1,32 @@
-/**
- * This module provides
- */
 /**
  * An implementation of the https://github.com/webcomponents-cg/community-protocols/blob/main/proposals/pending-task.md proposal.
- * @beta
+ * @public
  */
 export interface PendingTask extends Event {
-    complete: Promise<void>;
+    /**
+     * A promise that resolves when the pending task is complete.
+     */
+    readonly complete: Promise<void>;
 }
 /**
  * A concrete implementation of {@link PendingTask}
- * @beta
+ * @public
  */
 export declare class PendingTaskEvent extends Event implements PendingTask {
-    complete: Promise<void>;
+    readonly complete: Promise<void>;
+    /**
+     * The type of the pending task event.
+     */
     static readonly type = "pending-task";
+    /**
+     * Creates an instance of PendingTaskEvent.
+     * @param complete - A promise that resolves when the pending task is complete.
+     */
     constructor(complete: Promise<void>);
+    /**
+     * Determines whether a value is a PendingTaskEvent.
+     * @param value - The value to check.
+     * @returns True if the value is a PendingTaskEvent; false otherwise.
+     */
     static isPendingTask<T extends Event>(value: T | PendingTask): value is PendingTask;
 }

package/dist/dts/platform.d.ts

@@ -1,8 +1,8 @@
-import type { FASTGlobal } from "./interfaces.js";
+import { FASTGlobal } from "./interfaces.js";
 import "./polyfills.js";
 /**
  * The FAST global.
- * @internal
+ * @public
  */
 export declare const FAST: FASTGlobal;
 /**
@@ -40,3 +40,11 @@ export declare function createTypeRegistry<TDefinition extends TypeDefinition>()
  * @internal
  */
 export declare function createMetadataLocator<TMetadata>(): (target: {}) => TMetadata[];
+/**
+ * Makes a type noop for JSON serialization.
+ * @param type - The type to make noop for JSON serialization.
+ * @internal
+ */
+export declare function makeSerializationNoop(type: {
+    readonly prototype: any;
+}): void;

package/dist/dts/styles/css-binding-directive.d.ts

@@ -0,0 +1,60 @@
+import type { Binding, BindingDirective } from "../binding/binding.js";
+import type { Subscriber } from "../observation/notifier.js";
+import type { ExpressionObserver } from "../observation/observable.js";
+import { AddBehavior, CSSDirective } from "./css-directive.js";
+import type { ComposableStyles } from "./element-styles.js";
+import type { HostBehavior, HostController } from "./host.js";
+declare type CSSBindingEntry = {
+    observer: ExpressionObserver;
+    controller: HostController;
+};
+/**
+ * Enables bindings in CSS.
+ *
+ * @public
+ */
+export declare class CSSBindingDirective implements HostBehavior, Subscriber, CSSDirective, BindingDirective {
+    readonly dataBinding: Binding;
+    readonly targetAspect: string;
+    /**
+     * Creates an instance of CSSBindingDirective.
+     * @param dataBinding - The binding to use in CSS.
+     * @param targetAspect - The CSS property to target.
+     */
+    constructor(dataBinding: Binding, targetAspect: string);
+    /**
+     * Creates a CSS fragment to interpolate into the CSS document.
+     * @returns - the string to interpolate into CSS
+     */
+    createCSS(add: AddBehavior): ComposableStyles;
+    /**
+     * Executed when this behavior is attached to a controller.
+     * @param controller - Controls the behavior lifecycle.
+     */
+    addedCallback(controller: HostController<HTMLElement & {
+        $cssBindings: Map<CSSBindingDirective, CSSBindingEntry>;
+    }>): void;
+    /**
+     * Executed when this behavior's host is connected.
+     * @param controller - Controls the behavior lifecycle.
+     */
+    connectedCallback(controller: HostController<HTMLElement & {
+        $cssBindings: Map<CSSBindingDirective, CSSBindingEntry>;
+    }>): void;
+    /**
+     * Executed when this behavior is detached from a controller.
+     * @param controller - Controls the behavior lifecycle.
+     */
+    removedCallback(controller: HostController<HTMLElement & {
+        $cssBindings: Map<CSSBindingDirective, CSSBindingEntry>;
+    }>): void;
+    /**
+     * 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(_: any, observer: ExpressionObserver): void;
+}
+export {};