@vonage/vivid 5.2.0 → 5.4.0

package/shared/picker-field/mixins/time-selection-picker.d.ts

@@ -1,4 +1,4 @@
-import { type BindingObserver } from '@microsoft/fast-element';
+import { type ExpressionNotifier } from '@microsoft/fast-element';
 import type { DateStr } from '../../datetime/dateStr';
 import type { AbstractConstructor, MixinType } from '../../utils/mixins';
 import type { InlineTimePicker } from './inline-time-picker/inline-time-picker';
@@ -21,20 +21,20 @@ export declare const TimeSelectionPicker: <T_5 extends AbstractConstructor<{
     _pickerButtonEl: import("../../..").VwcButtonElement;
     connectedCallback(): void;
     disconnectedCallback(): void;
-    "__#19@#onFocusIn": () => void;
-    "__#19@#onFocusOut": () => void;
+    "__#20@#onFocusIn": () => void;
+    "__#20@#onFocusOut": () => void;
     proxy: HTMLInputElement;
     validate(): void;
     _getCustomValidationError(): string | null;
-    "__#19@#localeChangeHandler": {
+    "__#20@#localeChangeHandler": {
         handleChange: () => void;
     };
-    "__#19@#localeChangeObserver": BindingObserver<any, any, any>;
-    "__#19@#startObservingLocaleChanges"(): void;
-    "__#19@#stopObservingLocaleChanges"(): void;
+    "__#20@#localeChangeObserver": ExpressionNotifier<any, any, any>;
+    "__#20@#startObservingLocaleChanges"(): void;
+    "__#20@#stopObservingLocaleChanges"(): void;
     _popupOpen: boolean;
-    "__#19@#dismissOnClickOutside": (event: MouseEvent) => void;
-    "__#19@#openPopupIfPossible"(): void;
+    "__#20@#dismissOnClickOutside": (event: MouseEvent) => void;
+    "__#20@#openPopupIfPossible"(): void;
     _closePopup(restoreFocusToTextField?: boolean): void;
     _onBaseKeyDown(event: KeyboardEvent): boolean;
     _focusableElsWithinDialog(): NodeListOf<HTMLElement>;
@@ -86,9 +86,9 @@ export declare const TimeSelectionPicker: <T_5 extends AbstractConstructor<{
     _keypressHandler: ((e: KeyboardEvent) => void) & ((e: KeyboardEvent) => void);
     stopPropagation: ((e: Event) => void) & ((e: Event) => void);
     _vividAriaBehaviour: import("../../aria/aria-mixin").VividAriaBehaviour;
-    readonly $fastController: import("@microsoft/fast-element").Controller;
+    readonly $fastController: import("@microsoft/fast-element").ElementController<HTMLElement>;
     $emit(type: string, detail?: any, options?: Omit<CustomEventInit<any>, "detail"> | undefined): boolean | void;
-    attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
     accessKey: string;
     readonly accessKeyLabel: string;
     autocapitalize: string;
@@ -476,10 +476,10 @@ export declare const TimeSelectionPicker: <T_5 extends AbstractConstructor<{
         _getFeedbackTemplate(ctx: import("../../design-system/defineVividComponent").VividElementDefinitionContext): import("@microsoft/fast-element").ViewTemplate<any, any>;
         connectedCallback(): void;
         _vividAriaBehaviour: import("../../aria/aria-mixin").VividAriaBehaviour;
-        readonly $fastController: import("@microsoft/fast-element").Controller;
+        readonly $fastController: import("@microsoft/fast-element").ElementController<HTMLElement>;
         $emit(type: string, detail?: any, options?: Omit<CustomEventInit<any>, "detail"> | undefined): boolean | void;
         disconnectedCallback(): void;
-        attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
+        attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
         accessKey: string;
         readonly accessKeyLabel: string;
         autocapitalize: string;
@@ -868,12 +868,12 @@ export declare const TimeSelectionPicker: <T_5 extends AbstractConstructor<{
     readonly _displaySeconds: boolean;
     readonly _use12hClock: boolean;
     readonly _timePlaceholder: string;
-    "__#22@#clockChangeHandler": {
+    "__#23@#clockChangeHandler": {
         handleChange: () => void;
     };
-    "__#22@#clockChangeObserver": BindingObserver;
-    "__#22@#startObservingClockChanges"(): void;
-    "__#22@#stopObservingClockChanges"(): void;
+    "__#23@#clockChangeObserver": ExpressionNotifier;
+    "__#23@#startObservingClockChanges"(): void;
+    "__#23@#stopObservingClockChanges"(): void;
     connectedCallback(): void;
     disconnectedCallback(): void;
     _onPickerButtonClick(): void;
@@ -895,20 +895,20 @@ export declare const TimeSelectionPicker: <T_5 extends AbstractConstructor<{
     _textFieldEl: import("../../..").VwcTextFieldElement;
     _dialogEl: HTMLElement;
     _pickerButtonEl: import("../../..").VwcButtonElement;
-    "__#19@#onFocusIn": () => void;
-    "__#19@#onFocusOut": () => void;
+    "__#20@#onFocusIn": () => void;
+    "__#20@#onFocusOut": () => void;
     proxy: HTMLInputElement;
     validate(): void;
     _getCustomValidationError(): string | null;
-    "__#19@#localeChangeHandler": {
+    "__#20@#localeChangeHandler": {
         handleChange: () => void;
     };
-    "__#19@#localeChangeObserver": BindingObserver<any, any, any>;
-    "__#19@#startObservingLocaleChanges"(): void;
-    "__#19@#stopObservingLocaleChanges"(): void;
+    "__#20@#localeChangeObserver": ExpressionNotifier<any, any, any>;
+    "__#20@#startObservingLocaleChanges"(): void;
+    "__#20@#stopObservingLocaleChanges"(): void;
     _popupOpen: boolean;
-    "__#19@#dismissOnClickOutside": (event: MouseEvent) => void;
-    "__#19@#openPopupIfPossible"(): void;
+    "__#20@#dismissOnClickOutside": (event: MouseEvent) => void;
+    "__#20@#openPopupIfPossible"(): void;
     _closePopup(restoreFocusToTextField?: boolean): void;
     _onBaseKeyDown(event: KeyboardEvent): boolean;
     _focusableElsWithinDialog(): NodeListOf<HTMLElement>;
@@ -959,9 +959,9 @@ export declare const TimeSelectionPicker: <T_5 extends AbstractConstructor<{
     _keypressHandler: ((e: KeyboardEvent) => void) & ((e: KeyboardEvent) => void);
     stopPropagation: ((e: Event) => void) & ((e: Event) => void);
     _vividAriaBehaviour: import("../../aria/aria-mixin").VividAriaBehaviour;
-    readonly $fastController: import("@microsoft/fast-element").Controller;
+    readonly $fastController: import("@microsoft/fast-element").ElementController<HTMLElement>;
     $emit(type: string, detail?: any, options?: Omit<CustomEventInit<any>, "detail"> | undefined): boolean | void;
-    attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
     accessKey: string;
     readonly accessKeyLabel: string;
     autocapitalize: string;
@@ -1349,10 +1349,10 @@ export declare const TimeSelectionPicker: <T_5 extends AbstractConstructor<{
         _getFeedbackTemplate(ctx: import("../../design-system/defineVividComponent").VividElementDefinitionContext): import("@microsoft/fast-element").ViewTemplate<any, any>;
         connectedCallback(): void;
         _vividAriaBehaviour: import("../../aria/aria-mixin").VividAriaBehaviour;
-        readonly $fastController: import("@microsoft/fast-element").Controller;
+        readonly $fastController: import("@microsoft/fast-element").ElementController<HTMLElement>;
         $emit(type: string, detail?: any, options?: Omit<CustomEventInit<any>, "detail"> | undefined): boolean | void;
         disconnectedCallback(): void;
-        attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
+        attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
         accessKey: string;
         readonly accessKeyLabel: string;
         autocapitalize: string;

package/shared/picker-field/mixins/time-selection-picker.template.d.ts

@@ -12,12 +12,12 @@ export declare const TimeSelectionPickerTemplate: (context: VividElementDefiniti
     readonly _displaySeconds: boolean;
     readonly _use12hClock: boolean;
     readonly _timePlaceholder: string;
-    "__#22@#clockChangeHandler": {
+    "__#23@#clockChangeHandler": {
         handleChange: () => void;
     };
-    "__#22@#clockChangeObserver": import("@microsoft/fast-element").BindingObserver<any, any, any>;
-    "__#22@#startObservingClockChanges"(): void;
-    "__#22@#stopObservingClockChanges"(): void;
+    "__#23@#clockChangeObserver": import("@microsoft/fast-element").ExpressionNotifier<any, any, any>;
+    "__#23@#startObservingClockChanges"(): void;
+    "__#23@#stopObservingClockChanges"(): void;
     connectedCallback(): void;
     disconnectedCallback(): void;
     _onPickerButtonClick(): void;
@@ -39,20 +39,20 @@ export declare const TimeSelectionPickerTemplate: (context: VividElementDefiniti
     _textFieldEl: import("../../..").VwcTextFieldElement;
     _dialogEl: HTMLElement;
     _pickerButtonEl: import("../../..").VwcButtonElement;
-    "__#19@#onFocusIn": () => void;
-    "__#19@#onFocusOut": () => void;
+    "__#20@#onFocusIn": () => void;
+    "__#20@#onFocusOut": () => void;
     proxy: HTMLInputElement;
     validate(): void;
     _getCustomValidationError(): string | null;
-    "__#19@#localeChangeHandler": {
+    "__#20@#localeChangeHandler": {
         handleChange: () => void;
     };
-    "__#19@#localeChangeObserver": import("@microsoft/fast-element").BindingObserver<any, any, any>;
-    "__#19@#startObservingLocaleChanges"(): void;
-    "__#19@#stopObservingLocaleChanges"(): void;
+    "__#20@#localeChangeObserver": import("@microsoft/fast-element").ExpressionNotifier<any, any, any>;
+    "__#20@#startObservingLocaleChanges"(): void;
+    "__#20@#stopObservingLocaleChanges"(): void;
     _popupOpen: boolean;
-    "__#19@#dismissOnClickOutside": (event: MouseEvent) => void;
-    "__#19@#openPopupIfPossible"(): void;
+    "__#20@#dismissOnClickOutside": (event: MouseEvent) => void;
+    "__#20@#openPopupIfPossible"(): void;
     _closePopup(restoreFocusToTextField?: boolean): void;
     _onBaseKeyDown(event: KeyboardEvent): boolean;
     _focusableElsWithinDialog(): NodeListOf<HTMLElement>;
@@ -103,9 +103,9 @@ export declare const TimeSelectionPickerTemplate: (context: VividElementDefiniti
     _keypressHandler: ((e: KeyboardEvent) => void) & ((e: KeyboardEvent) => void);
     stopPropagation: ((e: Event) => void) & ((e: Event) => void);
     _vividAriaBehaviour: import("../../aria/aria-mixin").VividAriaBehaviour;
-    readonly $fastController: import("@microsoft/fast-element").Controller;
+    readonly $fastController: import("@microsoft/fast-element").ElementController<HTMLElement>;
     $emit(type: string, detail?: any, options?: Omit<CustomEventInit<any>, "detail"> | undefined): boolean | void;
-    attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
     accessKey: string;
     readonly accessKeyLabel: string;
     autocapitalize: string;
@@ -493,10 +493,10 @@ export declare const TimeSelectionPickerTemplate: (context: VividElementDefiniti
         _getFeedbackTemplate(ctx: VividElementDefinitionContext): import("@microsoft/fast-element").ViewTemplate<any, any>;
         connectedCallback(): void;
         _vividAriaBehaviour: import("../../aria/aria-mixin").VividAriaBehaviour;
-        readonly $fastController: import("@microsoft/fast-element").Controller;
+        readonly $fastController: import("@microsoft/fast-element").ElementController<HTMLElement>;
         $emit(type: string, detail?: any, options?: Omit<CustomEventInit<any>, "detail"> | undefined): boolean | void;
         disconnectedCallback(): void;
-        attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
+        attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
         accessKey: string;
         readonly accessKeyLabel: string;
         autocapitalize: string;
@@ -892,20 +892,20 @@ export declare const TimeSelectionPickerTemplate: (context: VividElementDefiniti
     _pickerButtonEl: import("../../..").VwcButtonElement;
     connectedCallback(): void;
     disconnectedCallback(): void;
-    "__#19@#onFocusIn": () => void;
-    "__#19@#onFocusOut": () => void;
+    "__#20@#onFocusIn": () => void;
+    "__#20@#onFocusOut": () => void;
     proxy: HTMLInputElement;
     validate(): void;
     _getCustomValidationError(): string | null;
-    "__#19@#localeChangeHandler": {
+    "__#20@#localeChangeHandler": {
         handleChange: () => void;
     };
-    "__#19@#localeChangeObserver": import("@microsoft/fast-element").BindingObserver<any, any, any>;
-    "__#19@#startObservingLocaleChanges"(): void;
-    "__#19@#stopObservingLocaleChanges"(): void;
+    "__#20@#localeChangeObserver": import("@microsoft/fast-element").ExpressionNotifier<any, any, any>;
+    "__#20@#startObservingLocaleChanges"(): void;
+    "__#20@#stopObservingLocaleChanges"(): void;
     _popupOpen: boolean;
-    "__#19@#dismissOnClickOutside": (event: MouseEvent) => void;
-    "__#19@#openPopupIfPossible"(): void;
+    "__#20@#dismissOnClickOutside": (event: MouseEvent) => void;
+    "__#20@#openPopupIfPossible"(): void;
     _closePopup(restoreFocusToTextField?: boolean): void;
     _onBaseKeyDown(event: KeyboardEvent): boolean;
     _focusableElsWithinDialog(): NodeListOf<HTMLElement>;
@@ -957,9 +957,9 @@ export declare const TimeSelectionPickerTemplate: (context: VividElementDefiniti
     _keypressHandler: ((e: KeyboardEvent) => void) & ((e: KeyboardEvent) => void);
     stopPropagation: ((e: Event) => void) & ((e: Event) => void);
     _vividAriaBehaviour: import("../../aria/aria-mixin").VividAriaBehaviour;
-    readonly $fastController: import("@microsoft/fast-element").Controller;
+    readonly $fastController: import("@microsoft/fast-element").ElementController<HTMLElement>;
     $emit(type: string, detail?: any, options?: Omit<CustomEventInit<any>, "detail"> | undefined): boolean | void;
-    attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
     accessKey: string;
     readonly accessKeyLabel: string;
     autocapitalize: string;
@@ -1347,10 +1347,10 @@ export declare const TimeSelectionPickerTemplate: (context: VividElementDefiniti
         _getFeedbackTemplate(ctx: VividElementDefinitionContext): import("@microsoft/fast-element").ViewTemplate<any, any>;
         connectedCallback(): void;
         _vividAriaBehaviour: import("../../aria/aria-mixin").VividAriaBehaviour;
-        readonly $fastController: import("@microsoft/fast-element").Controller;
+        readonly $fastController: import("@microsoft/fast-element").ElementController<HTMLElement>;
         $emit(type: string, detail?: any, options?: Omit<CustomEventInit<any>, "detail"> | undefined): boolean | void;
         disconnectedCallback(): void;
-        attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
+        attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
         accessKey: string;
         readonly accessKeyLabel: string;
         autocapitalize: string;

package/shared/picker-field/picker-field.d.ts

@@ -45,9 +45,9 @@ declare const PickerField_base: {
         _keypressHandler(e: KeyboardEvent): void;
         stopPropagation(e: Event): void;
         _vividAriaBehaviour: import("../aria/aria-mixin").VividAriaBehaviour;
-        readonly $fastController: import("@microsoft/fast-element").Controller;
+        readonly $fastController: import("@microsoft/fast-element").ElementController<HTMLElement>;
         $emit(type: string, detail?: any, options?: Omit<CustomEventInit<any>, "detail"> | undefined): boolean | void;
-        attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
+        attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
         accessKey: string;
         readonly accessKeyLabel: string;
         autocapitalize: string;
@@ -429,10 +429,10 @@ declare const PickerField_base: {
         _getFeedbackTemplate(ctx: import("../design-system/defineVividComponent").VividElementDefinitionContext): import("@microsoft/fast-element").ViewTemplate<any, any>;
         connectedCallback(): void;
         _vividAriaBehaviour: import("../aria/aria-mixin").VividAriaBehaviour;
-        readonly $fastController: import("@microsoft/fast-element").Controller;
+        readonly $fastController: import("@microsoft/fast-element").ElementController<HTMLElement>;
         $emit(type: string, detail?: any, options?: Omit<CustomEventInit<any>, "detail"> | undefined): boolean | void;
         disconnectedCallback(): void;
-        attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
+        attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
         accessKey: string;
         readonly accessKeyLabel: string;
         autocapitalize: string;
@@ -850,9 +850,9 @@ declare const PickerField_base: {
         _keypressHandler(e: KeyboardEvent): void;
         stopPropagation(e: Event): void;
         _vividAriaBehaviour: import("../aria/aria-mixin").VividAriaBehaviour;
-        readonly $fastController: import("@microsoft/fast-element").Controller;
+        readonly $fastController: import("@microsoft/fast-element").ElementController<HTMLElement>;
         $emit(type: string, detail?: any, options?: Omit<CustomEventInit<any>, "detail"> | undefined): boolean | void;
-        attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
+        attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
         accessKey: string;
         readonly accessKeyLabel: string;
         autocapitalize: string;
@@ -1264,9 +1264,9 @@ declare const PickerField_base: {
         _keypressHandler(e: KeyboardEvent): void;
         stopPropagation(e: Event): void;
         _vividAriaBehaviour: import("../aria/aria-mixin").VividAriaBehaviour;
-        readonly $fastController: import("@microsoft/fast-element").Controller;
+        readonly $fastController: import("@microsoft/fast-element").ElementController<HTMLElement>;
         $emit(type: string, detail?: any, options?: Omit<CustomEventInit<any>, "detail"> | undefined): boolean | void;
-        attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
+        attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
         accessKey: string;
         readonly accessKeyLabel: string;
         autocapitalize: string;
@@ -1640,10 +1640,10 @@ declare const PickerField_base: {
         _trappedFocus(event: KeyboardEvent, getFocusableEls: () => NodeListOf<HTMLElement>): boolean;
         connectedCallback(): void;
         _vividAriaBehaviour: import("../aria/aria-mixin").VividAriaBehaviour;
-        readonly $fastController: import("@microsoft/fast-element").Controller;
+        readonly $fastController: import("@microsoft/fast-element").ElementController<HTMLElement>;
         $emit(type: string, detail?: any, options?: Omit<CustomEventInit<any>, "detail"> | undefined): boolean | void;
         disconnectedCallback(): void;
-        attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
+        attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
         accessKey: string;
         readonly accessKeyLabel: string;
         autocapitalize: string;
@@ -2017,10 +2017,10 @@ declare const PickerField_base: {
         readonly locale: import("../localization/Locale").Locale;
         connectedCallback(): void;
         _vividAriaBehaviour: import("../aria/aria-mixin").VividAriaBehaviour;
-        readonly $fastController: import("@microsoft/fast-element").Controller;
+        readonly $fastController: import("@microsoft/fast-element").ElementController<HTMLElement>;
         $emit(type: string, detail?: any, options?: Omit<CustomEventInit<any>, "detail"> | undefined): boolean | void;
         disconnectedCallback(): void;
-        attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
+        attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
         accessKey: string;
         readonly accessKeyLabel: string;
         autocapitalize: string;
@@ -2427,9 +2427,9 @@ declare const PickerField_base: {
         _keypressHandler(e: KeyboardEvent): void;
         stopPropagation(e: Event): void;
         _vividAriaBehaviour: import("../aria/aria-mixin").VividAriaBehaviour;
-        readonly $fastController: import("@microsoft/fast-element").Controller;
+        readonly $fastController: import("@microsoft/fast-element").ElementController<HTMLElement>;
         $emit(type: string, detail?: any, options?: Omit<CustomEventInit<any>, "detail"> | undefined): boolean | void;
-        attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
+        attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
         accessKey: string;
         readonly accessKeyLabel: string;
         autocapitalize: string;

package/shared/templating/attribute-binding-behaviour.d.ts

@@ -1,5 +1,5 @@
-import { type Behavior, type Binding, type ExecutionContext, type Subscriber } from '@microsoft/fast-element';
-export declare class AttributeBindingBehavior implements Behavior, Subscriber {
+import { type Binding, type Subscriber, type ViewBehavior, type ViewController } from '@microsoft/fast-element';
+export declare class AttributeBindingBehavior implements ViewBehavior, Subscriber {
     private target;
     private binding;
     private isBindingVolatile;
@@ -8,8 +8,7 @@ export declare class AttributeBindingBehavior implements Behavior, Subscriber {
     private source;
     private context;
     private bindingObserver?;
-    bind(source: unknown, context: ExecutionContext): void;
-    unbind(): void;
+    bind(controller: ViewController): void;
     handleChange(): void;
     updateTarget(value: unknown): void;
 }

package/shared/templating/render-in-light-dom.d.ts

@@ -1,22 +1,23 @@
-import { type Behavior, type Binding, type CaptureType, ExecutionContext, HTMLDirective, type Subscriber, type SyntheticViewTemplate } from '@microsoft/fast-element';
+import { type AddViewBehaviorFactory, type Binding, type BindingDirective, type CaptureType, type Expression, HTMLDirective, type Subscriber, type ViewBehavior, type ViewBehaviorFactory, type ViewController, type ViewTemplate } from '@microsoft/fast-element';
 import type { VividElement } from '../foundation/vivid-element/vivid-element';
-export declare class RenderInLightDomBehaviour<TSource extends VividElement> implements Behavior, Subscriber {
+export declare class RenderInLightDomBehaviour<TSource extends VividElement> implements ViewBehavior, Subscriber {
     private source;
     private view?;
     private insertionPoint?;
     private templateBindingObserver;
     private context?;
-    constructor(templateBinding: Binding<TSource, SyntheticViewTemplate>, isTemplateBindingVolatile: boolean);
-    bind(source: TSource, context: ExecutionContext): void;
-    unbind(): void;
-    handleChange(): void;
+    private controller?;
+    constructor(directive: RenderInLightDomDirective<TSource>);
+    bind(controller: ViewController): void;
+    handleChange(source: any, args: any): void;
     private instantiateTemplate;
 }
-export declare class RenderInLightDomDirective<TSource extends VividElement> extends HTMLDirective {
-    readonly templateBinding: Binding<TSource, SyntheticViewTemplate>;
-    createPlaceholder: (index: number) => string;
-    private readonly isTemplateBindingVolatile;
-    constructor(templateBinding: Binding<TSource, SyntheticViewTemplate>);
+export declare class RenderInLightDomDirective<TSource extends VividElement> implements HTMLDirective, ViewBehaviorFactory, BindingDirective {
+    readonly templateBinding: Binding<TSource, ViewTemplate>;
+    readonly dataBinding: Binding<TSource, ViewTemplate>;
+    targetNodeId: string;
+    constructor(templateBinding: Binding<TSource, ViewTemplate>);
+    createHTML(add: AddViewBehaviorFactory): string;
     createBehavior(): RenderInLightDomBehaviour<TSource>;
 }
-export declare function renderInLightDOM<TSource extends VividElement>(templateOrTemplateBinding: SyntheticViewTemplate | Binding<TSource, SyntheticViewTemplate>): CaptureType<TSource>;
+export declare function renderInLightDOM<TSource extends VividElement = VividElement, TParent = any>(templateOrTemplateBinding: ViewTemplate<any, TSource> | Expression<TSource, ViewTemplate<any, TSource>, TParent> | Binding<TSource, ViewTemplate<any, TSource>, TParent>): CaptureType<TSource, TParent>;

package/side-drawer/index.cjs

@@ -1,4 +1,4 @@
-"use strict";const r=require("../bundled/vivid-element.cjs"),p=require("../bundled/index.cjs"),d=require("../bundled/class-names.cjs"),v=require("../bundled/when.cjs");var b=Object.defineProperty,l=(e,o,t,i)=>{for(var a=void 0,s=e.length-1,c;s>=0;s--)(c=e[s])&&(a=c(o,t,a)||a);return a&&b(o,t,a),a};class n extends r.VividElement{constructor(){super(...arguments),this.alternate=!1,this.modal=!1,this.open=!1,this.trailing=!1}attributeChangedCallback(o,t,i){switch(super.attributeChangedCallback(o,t,i),o){case"open":this.open?this.#o():this.#e()}}#e(){this.$emit("close",void 0,{bubbles:!1})}#o(){this.$emit("open",void 0,{bubbles:!1})}_onKeydown(o){if(p.handleEscapeKeyAndStopPropogation(o)){this._handleCloseRequest();return}else return!0}_handleCloseRequest(){this.$emit("cancel",void 0,{bubbles:!1,cancelable:!0})&&(this.open=!1)}}l([r.attr({mode:"boolean"})],n.prototype,"alternate");l([r.attr({mode:"boolean"})],n.prototype,"modal");l([r.attr({mode:"boolean"})],n.prototype,"open");l([r.attr({mode:"boolean"})],n.prototype,"trailing");const m=":host{display:block}.side-drawer-app-content{block-size:100%}.control{--scrollbar-track-color: transparent;--scrollbar-thumb-color: color-mix(in srgb, var(--vvd-color-neutral-950), transparent 70%)}.control{scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color);scrollbar-width:thin}.control ::-webkit-scrollbar{width:4px}.control ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}.control ::-webkit-scrollbar-thumb{border:0;border-radius:4px;background-color:var(--scrollbar-fallback-track-color, var(--scrollbar-thumb-color))}.control{position:fixed;z-index:1;background-color:var(--vvd-color-canvas);color:var(--vvd-color-canvas-text);inline-size:280px;inset-block:0;overflow-y:auto}.control[part~=vvd-theme-alternate]{background-color:var(--vvd-color-canvas);color:var(--vvd-color-canvas-text);color-scheme:var(--vvd-color-scheme)}.control.trailing{inset-inline-end:0}.control:not(.open).trailing{transform:translate(100%)}.control:not(.open):not(.trailing){transform:translate(-100%)}.control.open:not(.modal).trailing+.side-drawer-app-content{margin-inline-end:var(--side-drawer-app-content-offset, 280px)}.control.open:not(.modal):not(.trailing)+.side-drawer-app-content{margin-inline-start:var(--side-drawer-app-content-offset, 280px)}@media (prefers-reduced-motion: no-preference){.control{transition:transform .2s cubic-bezier(.4,0,.2,1)}}.scrim{background-color:var(--vvd-color-canvas-text, currentColor);opacity:.5;position:fixed;inset:0}.scrim:not(.open){display:none}",u=({modal:e,open:o,trailing:t})=>d.classNames("control",["modal",e],["open",o],["trailing",t]),h=({open:e})=>d.classNames("scrim",["open",e]),f=r.html`
+"use strict";const r=require("../bundled/vivid-element.cjs"),p=require("../bundled/index.cjs"),v=require("../bundled/when.cjs"),d=require("../bundled/class-names.cjs");var b=Object.defineProperty,l=(e,o,t,i)=>{for(var a=void 0,s=e.length-1,c;s>=0;s--)(c=e[s])&&(a=c(o,t,a)||a);return a&&b(o,t,a),a};class n extends r.VividElement{constructor(){super(...arguments),this.alternate=!1,this.modal=!1,this.open=!1,this.trailing=!1}attributeChangedCallback(o,t,i){switch(super.attributeChangedCallback(o,t,i),o){case"open":this.open?this.#o():this.#e()}}#e(){this.$emit("close",void 0,{bubbles:!1})}#o(){this.$emit("open",void 0,{bubbles:!1})}_onKeydown(o){if(p.handleEscapeKeyAndStopPropogation(o)){this._handleCloseRequest();return}else return!0}_handleCloseRequest(){this.$emit("cancel",void 0,{bubbles:!1,cancelable:!0})&&(this.open=!1)}}l([r.attr({mode:"boolean"})],n.prototype,"alternate");l([r.attr({mode:"boolean"})],n.prototype,"modal");l([r.attr({mode:"boolean"})],n.prototype,"open");l([r.attr({mode:"boolean"})],n.prototype,"trailing");const m=":host{display:block}.side-drawer-app-content{block-size:100%}.control{--scrollbar-track-color: transparent;--scrollbar-thumb-color: color-mix(in srgb, var(--vvd-color-neutral-950), transparent 70%)}.control{scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color);scrollbar-width:thin}.control ::-webkit-scrollbar{width:4px}.control ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}.control ::-webkit-scrollbar-thumb{border:0;border-radius:4px;background-color:var(--scrollbar-fallback-track-color, var(--scrollbar-thumb-color))}.control{position:fixed;z-index:1;background-color:var(--vvd-color-canvas);color:var(--vvd-color-canvas-text);inline-size:280px;inset-block:0;overflow-y:auto}.control[part~=vvd-theme-alternate]{background-color:var(--vvd-color-canvas);color:var(--vvd-color-canvas-text);color-scheme:var(--vvd-color-scheme)}.control.trailing{inset-inline-end:0}.control:not(.open).trailing{transform:translate(100%)}.control:not(.open):not(.trailing){transform:translate(-100%)}.control.open:not(.modal).trailing+.side-drawer-app-content{margin-inline-end:var(--side-drawer-app-content-offset, 280px)}.control.open:not(.modal):not(.trailing)+.side-drawer-app-content{margin-inline-start:var(--side-drawer-app-content-offset, 280px)}@media (prefers-reduced-motion: no-preference){.control{transition:transform .2s cubic-bezier(.4,0,.2,1)}}.scrim{background-color:var(--vvd-color-canvas-text, currentColor);opacity:.5;position:fixed;inset:0}.scrim:not(.open){display:none}",u=({modal:e,open:o,trailing:t})=>d.classNames("control",["modal",e],["open",o],["trailing",t]),h=({open:e})=>d.classNames("scrim",["open",e]),f=r.html`
 	<div
 		class="${u}"
 		?inert="${e=>!e.open}"

package/side-drawer/index.js

@@ -1,7 +1,7 @@
 import { V as v, a as n, h as d, c as b, d as m } from "../bundled/vivid-element.js";
 import { h } from "../bundled/index.js";
-import { c as p } from "../bundled/class-names.js";
 import { w as f } from "../bundled/when.js";
+import { c as p } from "../bundled/class-names.js";
 var u = Object.defineProperty, l = (o, e, r, i) => {
   for (var t = void 0, s = o.length - 1, c; s >= 0; s--)
     (c = o[s]) && (t = c(e, r, t) || t);