@vonage/vivid 5.19.0 → 5.20.0

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

@@ -462,6 +462,13 @@ export declare const TimeSelectionPicker: <T extends AbstractConstructor<SingleV
     tabIndex: number;
     blur(): void;
     focus(options?: FocusOptions): void;
+    ariaControls: string | null;
+    ariaDescribedBy: string | null;
+    ariaDetails: string | null;
+    ariaErrorMessage: string | null;
+    ariaFlowTo: string | null;
+    ariaLabelledBy: string | null;
+    ariaOwns: string | null;
     roleChanged(prev: string | null, next: string | null): void;
     ariaAtomicChanged(prev: string | null, next: string | null): void;
     ariaAutoCompleteChanged(prev: string | null, next: string | null): void;
@@ -504,12 +511,22 @@ export declare const TimeSelectionPicker: <T extends AbstractConstructor<SingleV
     ariaValueNowChanged(prev: string | null, next: string | null): void;
     ariaValueTextChanged(prev: string | null, next: string | null): void;
     ariaRelevantChanged(prev: string | null, next: string | null): void;
+    ariaControlsChanged(prev: string | null, next: string | null): void;
+    ariaDescribedByChanged(prev: string | null, next: string | null): void;
+    ariaDetailsChanged(prev: string | null, next: string | null): void;
+    ariaErrorMessageChanged(prev: string | null, next: string | null): void;
+    ariaFlowToChanged(prev: string | null, next: string | null): void;
+    ariaLabelledByChanged(prev: string | null, next: string | null): void;
+    ariaOwnsChanged(prev: string | null, next: string | null): void;
     "__#private@#handleReplacedProp"(replacedProp: {
         newPropertyName: string;
         deprecatedPropertyName: string;
         fromDeprecated: (v: any) => any;
         toDeprecated?: ((v: any) => any) | undefined;
     }): void;
+    "__#private@#controllers": Set<import('../../framework/reactive-controller').ReactiveController>;
+    _addController(controller: import('../../framework/reactive-controller').ReactiveController): void;
+    _removeController(controller: import('../../framework/reactive-controller').ReactiveController): void;
     helperText?: string;
     _helperTextSlottedContent?: HTMLElement[];
     get _feedbackDescribedBy(): string;
@@ -532,7 +549,7 @@ export declare const TimeSelectionPicker: <T extends AbstractConstructor<SingleV
         _vividAriaBehaviour: import('../../aria/aria-mixin').VividAriaBehaviour;
         readonly $fastController: import('@microsoft/fast-element').ElementController;
         $emit(type: string, detail?: any, options?: Omit<CustomEventInit, "detail">): boolean | void;
-        disconnectedCallback(): void;
+        disconnectedCallback: (() => void) & (() => void);
         attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
         accessKey: string;
         readonly accessKeyLabel: string;
@@ -884,6 +901,13 @@ export declare const TimeSelectionPicker: <T extends AbstractConstructor<SingleV
         tabIndex: number;
         blur(): void;
         focus(options?: FocusOptions): void;
+        ariaControls: string | null;
+        ariaDescribedBy: string | null;
+        ariaDetails: string | null;
+        ariaErrorMessage: string | null;
+        ariaFlowTo: string | null;
+        ariaLabelledBy: string | null;
+        ariaOwns: string | null;
         roleChanged(prev: string | null, next: string | null): void;
         ariaAtomicChanged(prev: string | null, next: string | null): void;
         ariaAutoCompleteChanged(prev: string | null, next: string | null): void;
@@ -926,12 +950,22 @@ export declare const TimeSelectionPicker: <T extends AbstractConstructor<SingleV
         ariaValueNowChanged(prev: string | null, next: string | null): void;
         ariaValueTextChanged(prev: string | null, next: string | null): void;
         ariaRelevantChanged(prev: string | null, next: string | null): void;
+        ariaControlsChanged(prev: string | null, next: string | null): void;
+        ariaDescribedByChanged(prev: string | null, next: string | null): void;
+        ariaDetailsChanged(prev: string | null, next: string | null): void;
+        ariaErrorMessageChanged(prev: string | null, next: string | null): void;
+        ariaFlowToChanged(prev: string | null, next: string | null): void;
+        ariaLabelledByChanged(prev: string | null, next: string | null): void;
+        ariaOwnsChanged(prev: string | null, next: string | null): void;
         "__#private@#handleReplacedProp"(replacedProp: {
             newPropertyName: string;
             deprecatedPropertyName: string;
             fromDeprecated: (v: any) => any;
             toDeprecated?: ((v: any) => any) | undefined;
         }): void;
+        "__#private@#controllers": Set<import('../../framework/reactive-controller').ReactiveController>;
+        _addController(controller: import('../../framework/reactive-controller').ReactiveController): void;
+        _removeController(controller: import('../../framework/reactive-controller').ReactiveController): void;
     }, any>;
     errorText?: string;
     errorTextChanged(_: string, newErrorText: string | undefined): void;

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

@@ -458,6 +458,13 @@ export declare const TimeSelectionPickerTemplate: (context: VividElementDefiniti
     tabIndex: number;
     blur(): void;
     focus(options?: FocusOptions): void;
+    ariaControls: string | null;
+    ariaDescribedBy: string | null;
+    ariaDetails: string | null;
+    ariaErrorMessage: string | null;
+    ariaFlowTo: string | null;
+    ariaLabelledBy: string | null;
+    ariaOwns: string | null;
     roleChanged(prev: string | null, next: string | null): void;
     ariaAtomicChanged(prev: string | null, next: string | null): void;
     ariaAutoCompleteChanged(prev: string | null, next: string | null): void;
@@ -500,12 +507,22 @@ export declare const TimeSelectionPickerTemplate: (context: VividElementDefiniti
     ariaValueNowChanged(prev: string | null, next: string | null): void;
     ariaValueTextChanged(prev: string | null, next: string | null): void;
     ariaRelevantChanged(prev: string | null, next: string | null): void;
+    ariaControlsChanged(prev: string | null, next: string | null): void;
+    ariaDescribedByChanged(prev: string | null, next: string | null): void;
+    ariaDetailsChanged(prev: string | null, next: string | null): void;
+    ariaErrorMessageChanged(prev: string | null, next: string | null): void;
+    ariaFlowToChanged(prev: string | null, next: string | null): void;
+    ariaLabelledByChanged(prev: string | null, next: string | null): void;
+    ariaOwnsChanged(prev: string | null, next: string | null): void;
     "__#private@#handleReplacedProp"(replacedProp: {
         newPropertyName: string;
         deprecatedPropertyName: string;
         fromDeprecated: (v: any) => any;
         toDeprecated?: ((v: any) => any) | undefined;
     }): void;
+    "__#private@#controllers": Set<import('../../framework/reactive-controller').ReactiveController>;
+    _addController(controller: import('../../framework/reactive-controller').ReactiveController): void;
+    _removeController(controller: import('../../framework/reactive-controller').ReactiveController): void;
     helperText?: string;
     _helperTextSlottedContent?: HTMLElement[];
     get _feedbackDescribedBy(): string;
@@ -528,7 +545,7 @@ export declare const TimeSelectionPickerTemplate: (context: VividElementDefiniti
         _vividAriaBehaviour: import('../../aria/aria-mixin').VividAriaBehaviour;
         readonly $fastController: import('@microsoft/fast-element').ElementController;
         $emit(type: string, detail?: any, options?: Omit<CustomEventInit, "detail">): boolean | void;
-        disconnectedCallback(): void;
+        disconnectedCallback: (() => void) & (() => void);
         attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
         accessKey: string;
         readonly accessKeyLabel: string;
@@ -880,6 +897,13 @@ export declare const TimeSelectionPickerTemplate: (context: VividElementDefiniti
         tabIndex: number;
         blur(): void;
         focus(options?: FocusOptions): void;
+        ariaControls: string | null;
+        ariaDescribedBy: string | null;
+        ariaDetails: string | null;
+        ariaErrorMessage: string | null;
+        ariaFlowTo: string | null;
+        ariaLabelledBy: string | null;
+        ariaOwns: string | null;
         roleChanged(prev: string | null, next: string | null): void;
         ariaAtomicChanged(prev: string | null, next: string | null): void;
         ariaAutoCompleteChanged(prev: string | null, next: string | null): void;
@@ -922,12 +946,22 @@ export declare const TimeSelectionPickerTemplate: (context: VividElementDefiniti
         ariaValueNowChanged(prev: string | null, next: string | null): void;
         ariaValueTextChanged(prev: string | null, next: string | null): void;
         ariaRelevantChanged(prev: string | null, next: string | null): void;
+        ariaControlsChanged(prev: string | null, next: string | null): void;
+        ariaDescribedByChanged(prev: string | null, next: string | null): void;
+        ariaDetailsChanged(prev: string | null, next: string | null): void;
+        ariaErrorMessageChanged(prev: string | null, next: string | null): void;
+        ariaFlowToChanged(prev: string | null, next: string | null): void;
+        ariaLabelledByChanged(prev: string | null, next: string | null): void;
+        ariaOwnsChanged(prev: string | null, next: string | null): void;
         "__#private@#handleReplacedProp"(replacedProp: {
             newPropertyName: string;
             deprecatedPropertyName: string;
             fromDeprecated: (v: any) => any;
             toDeprecated?: ((v: any) => any) | undefined;
         }): void;
+        "__#private@#controllers": Set<import('../../framework/reactive-controller').ReactiveController>;
+        _addController(controller: import('../../framework/reactive-controller').ReactiveController): void;
+        _removeController(controller: import('../../framework/reactive-controller').ReactiveController): void;
     }, any>;
     errorText?: string;
     errorTextChanged(_: string, newErrorText: string | undefined): void;
@@ -1376,6 +1410,13 @@ export declare const TimeSelectionPickerTemplate: (context: VividElementDefiniti
     tabIndex: number;
     blur(): void;
     focus(options?: FocusOptions): void;
+    ariaControls: string | null;
+    ariaDescribedBy: string | null;
+    ariaDetails: string | null;
+    ariaErrorMessage: string | null;
+    ariaFlowTo: string | null;
+    ariaLabelledBy: string | null;
+    ariaOwns: string | null;
     roleChanged(prev: string | null, next: string | null): void;
     ariaAtomicChanged(prev: string | null, next: string | null): void;
     ariaAutoCompleteChanged(prev: string | null, next: string | null): void;
@@ -1418,12 +1459,22 @@ export declare const TimeSelectionPickerTemplate: (context: VividElementDefiniti
     ariaValueNowChanged(prev: string | null, next: string | null): void;
     ariaValueTextChanged(prev: string | null, next: string | null): void;
     ariaRelevantChanged(prev: string | null, next: string | null): void;
+    ariaControlsChanged(prev: string | null, next: string | null): void;
+    ariaDescribedByChanged(prev: string | null, next: string | null): void;
+    ariaDetailsChanged(prev: string | null, next: string | null): void;
+    ariaErrorMessageChanged(prev: string | null, next: string | null): void;
+    ariaFlowToChanged(prev: string | null, next: string | null): void;
+    ariaLabelledByChanged(prev: string | null, next: string | null): void;
+    ariaOwnsChanged(prev: string | null, next: string | null): void;
     "__#private@#handleReplacedProp"(replacedProp: {
         newPropertyName: string;
         deprecatedPropertyName: string;
         fromDeprecated: (v: any) => any;
         toDeprecated?: ((v: any) => any) | undefined;
     }): void;
+    "__#private@#controllers": Set<import('../../framework/reactive-controller').ReactiveController>;
+    _addController(controller: import('../../framework/reactive-controller').ReactiveController): void;
+    _removeController(controller: import('../../framework/reactive-controller').ReactiveController): void;
     helperText?: string;
     _helperTextSlottedContent?: HTMLElement[];
     get _feedbackDescribedBy(): string;
@@ -1446,7 +1497,7 @@ export declare const TimeSelectionPickerTemplate: (context: VividElementDefiniti
         _vividAriaBehaviour: import('../../aria/aria-mixin').VividAriaBehaviour;
         readonly $fastController: import('@microsoft/fast-element').ElementController;
         $emit(type: string, detail?: any, options?: Omit<CustomEventInit, "detail">): boolean | void;
-        disconnectedCallback(): void;
+        disconnectedCallback: (() => void) & (() => void);
         attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
         accessKey: string;
         readonly accessKeyLabel: string;
@@ -1798,6 +1849,13 @@ export declare const TimeSelectionPickerTemplate: (context: VividElementDefiniti
         tabIndex: number;
         blur(): void;
         focus(options?: FocusOptions): void;
+        ariaControls: string | null;
+        ariaDescribedBy: string | null;
+        ariaDetails: string | null;
+        ariaErrorMessage: string | null;
+        ariaFlowTo: string | null;
+        ariaLabelledBy: string | null;
+        ariaOwns: string | null;
         roleChanged(prev: string | null, next: string | null): void;
         ariaAtomicChanged(prev: string | null, next: string | null): void;
         ariaAutoCompleteChanged(prev: string | null, next: string | null): void;
@@ -1840,12 +1898,22 @@ export declare const TimeSelectionPickerTemplate: (context: VividElementDefiniti
         ariaValueNowChanged(prev: string | null, next: string | null): void;
         ariaValueTextChanged(prev: string | null, next: string | null): void;
         ariaRelevantChanged(prev: string | null, next: string | null): void;
+        ariaControlsChanged(prev: string | null, next: string | null): void;
+        ariaDescribedByChanged(prev: string | null, next: string | null): void;
+        ariaDetailsChanged(prev: string | null, next: string | null): void;
+        ariaErrorMessageChanged(prev: string | null, next: string | null): void;
+        ariaFlowToChanged(prev: string | null, next: string | null): void;
+        ariaLabelledByChanged(prev: string | null, next: string | null): void;
+        ariaOwnsChanged(prev: string | null, next: string | null): void;
         "__#private@#handleReplacedProp"(replacedProp: {
             newPropertyName: string;
             deprecatedPropertyName: string;
             fromDeprecated: (v: any) => any;
             toDeprecated?: ((v: any) => any) | undefined;
         }): void;
+        "__#private@#controllers": Set<import('../../framework/reactive-controller').ReactiveController>;
+        _addController(controller: import('../../framework/reactive-controller').ReactiveController): void;
+        _removeController(controller: import('../../framework/reactive-controller').ReactiveController): void;
     }, any>;
     errorText?: string;
     errorTextChanged(_: string, newErrorText: string | undefined): void;

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

@@ -11,7 +11,7 @@ declare const PickerField_base: {
         hasBeenTouched: boolean;
         connectedCallback: (() => void) & (() => void) & (() => void);
         "__#private@#handleInvalidEvent": () => void;
-        disconnectedCallback: (() => void) & (() => void) & (() => void);
+        disconnectedCallback: (() => void) & (() => void) & (() => void) & (() => void);
         formResetCallback: (() => void) & (() => void);
         validate: (() => void) & ((anchor?: HTMLElement) => void);
         proxy: import('../foundation/form-associated/form-associated').ProxyElement;
@@ -400,6 +400,13 @@ declare const PickerField_base: {
         tabIndex: number;
         blur(): void;
         focus(options?: FocusOptions): void;
+        ariaControls: string | null;
+        ariaDescribedBy: string | null;
+        ariaDetails: string | null;
+        ariaErrorMessage: string | null;
+        ariaFlowTo: string | null;
+        ariaLabelledBy: string | null;
+        ariaOwns: string | null;
         roleChanged(prev: string | null, next: string | null): void;
         ariaAtomicChanged(prev: string | null, next: string | null): void;
         ariaAutoCompleteChanged(prev: string | null, next: string | null): void;
@@ -442,12 +449,22 @@ declare const PickerField_base: {
         ariaValueNowChanged(prev: string | null, next: string | null): void;
         ariaValueTextChanged(prev: string | null, next: string | null): void;
         ariaRelevantChanged(prev: string | null, next: string | null): void;
+        ariaControlsChanged(prev: string | null, next: string | null): void;
+        ariaDescribedByChanged(prev: string | null, next: string | null): void;
+        ariaDetailsChanged(prev: string | null, next: string | null): void;
+        ariaErrorMessageChanged(prev: string | null, next: string | null): void;
+        ariaFlowToChanged(prev: string | null, next: string | null): void;
+        ariaLabelledByChanged(prev: string | null, next: string | null): void;
+        ariaOwnsChanged(prev: string | null, next: string | null): void;
         "__#private@#handleReplacedProp"(replacedProp: {
             newPropertyName: string;
             deprecatedPropertyName: string;
             fromDeprecated: (v: any) => any;
             toDeprecated?: ((v: any) => any) | undefined;
         }): void;
+        "__#private@#controllers": Set<import('../framework/reactive-controller').ReactiveController>;
+        _addController(controller: import('../framework/reactive-controller').ReactiveController): void;
+        _removeController(controller: import('../framework/reactive-controller').ReactiveController): void;
     };
 } & {
     new (...args: any[]): {
@@ -464,7 +481,7 @@ declare const PickerField_base: {
         _vividAriaBehaviour: import('../aria/aria-mixin').VividAriaBehaviour;
         readonly $fastController: import('@microsoft/fast-element').ElementController;
         $emit(type: string, detail?: any, options?: Omit<CustomEventInit, "detail">): boolean | void;
-        disconnectedCallback(): void;
+        disconnectedCallback: (() => void) & (() => void);
         attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
         accessKey: string;
         readonly accessKeyLabel: string;
@@ -816,6 +833,13 @@ declare const PickerField_base: {
         tabIndex: number;
         blur(): void;
         focus(options?: FocusOptions): void;
+        ariaControls: string | null;
+        ariaDescribedBy: string | null;
+        ariaDetails: string | null;
+        ariaErrorMessage: string | null;
+        ariaFlowTo: string | null;
+        ariaLabelledBy: string | null;
+        ariaOwns: string | null;
         roleChanged(prev: string | null, next: string | null): void;
         ariaAtomicChanged(prev: string | null, next: string | null): void;
         ariaAutoCompleteChanged(prev: string | null, next: string | null): void;
@@ -858,12 +882,22 @@ declare const PickerField_base: {
         ariaValueNowChanged(prev: string | null, next: string | null): void;
         ariaValueTextChanged(prev: string | null, next: string | null): void;
         ariaRelevantChanged(prev: string | null, next: string | null): void;
+        ariaControlsChanged(prev: string | null, next: string | null): void;
+        ariaDescribedByChanged(prev: string | null, next: string | null): void;
+        ariaDetailsChanged(prev: string | null, next: string | null): void;
+        ariaErrorMessageChanged(prev: string | null, next: string | null): void;
+        ariaFlowToChanged(prev: string | null, next: string | null): void;
+        ariaLabelledByChanged(prev: string | null, next: string | null): void;
+        ariaOwnsChanged(prev: string | null, next: string | null): void;
         "__#private@#handleReplacedProp"(replacedProp: {
             newPropertyName: string;
             deprecatedPropertyName: string;
             fromDeprecated: (v: any) => any;
             toDeprecated?: ((v: any) => any) | undefined;
         }): void;
+        "__#private@#controllers": Set<import('../framework/reactive-controller').ReactiveController>;
+        _addController(controller: import('../framework/reactive-controller').ReactiveController): void;
+        _removeController(controller: import('../framework/reactive-controller').ReactiveController): void;
     };
 } & {
     new (...args: any[]): {
@@ -879,7 +913,7 @@ declare const PickerField_base: {
         hasBeenTouched: boolean;
         connectedCallback: (() => void) & (() => void) & (() => void);
         "__#private@#handleInvalidEvent": () => void;
-        disconnectedCallback: (() => void) & (() => void) & (() => void);
+        disconnectedCallback: (() => void) & (() => void) & (() => void) & (() => void);
         formResetCallback: (() => void) & (() => void);
         validate: (() => void) & ((anchor?: HTMLElement) => void);
         proxy: import('../foundation/form-associated/form-associated').ProxyElement;
@@ -1268,6 +1302,13 @@ declare const PickerField_base: {
         tabIndex: number;
         blur(): void;
         focus(options?: FocusOptions): void;
+        ariaControls: string | null;
+        ariaDescribedBy: string | null;
+        ariaDetails: string | null;
+        ariaErrorMessage: string | null;
+        ariaFlowTo: string | null;
+        ariaLabelledBy: string | null;
+        ariaOwns: string | null;
         roleChanged(prev: string | null, next: string | null): void;
         ariaAtomicChanged(prev: string | null, next: string | null): void;
         ariaAutoCompleteChanged(prev: string | null, next: string | null): void;
@@ -1310,12 +1351,22 @@ declare const PickerField_base: {
         ariaValueNowChanged(prev: string | null, next: string | null): void;
         ariaValueTextChanged(prev: string | null, next: string | null): void;
         ariaRelevantChanged(prev: string | null, next: string | null): void;
+        ariaControlsChanged(prev: string | null, next: string | null): void;
+        ariaDescribedByChanged(prev: string | null, next: string | null): void;
+        ariaDetailsChanged(prev: string | null, next: string | null): void;
+        ariaErrorMessageChanged(prev: string | null, next: string | null): void;
+        ariaFlowToChanged(prev: string | null, next: string | null): void;
+        ariaLabelledByChanged(prev: string | null, next: string | null): void;
+        ariaOwnsChanged(prev: string | null, next: string | null): void;
         "__#private@#handleReplacedProp"(replacedProp: {
             newPropertyName: string;
             deprecatedPropertyName: string;
             fromDeprecated: (v: any) => any;
             toDeprecated?: ((v: any) => any) | undefined;
         }): void;
+        "__#private@#controllers": Set<import('../framework/reactive-controller').ReactiveController>;
+        _addController(controller: import('../framework/reactive-controller').ReactiveController): void;
+        _removeController(controller: import('../framework/reactive-controller').ReactiveController): void;
     };
 } & {
     new (...args: any[]): {
@@ -1714,6 +1765,13 @@ declare const PickerField_base: {
         tabIndex: number;
         blur(): void;
         focus(options?: FocusOptions): void;
+        ariaControls: string | null;
+        ariaDescribedBy: string | null;
+        ariaDetails: string | null;
+        ariaErrorMessage: string | null;
+        ariaFlowTo: string | null;
+        ariaLabelledBy: string | null;
+        ariaOwns: string | null;
         roleChanged(prev: string | null, next: string | null): void;
         ariaAtomicChanged(prev: string | null, next: string | null): void;
         ariaAutoCompleteChanged(prev: string | null, next: string | null): void;
@@ -1756,12 +1814,22 @@ declare const PickerField_base: {
         ariaValueNowChanged(prev: string | null, next: string | null): void;
         ariaValueTextChanged(prev: string | null, next: string | null): void;
         ariaRelevantChanged(prev: string | null, next: string | null): void;
+        ariaControlsChanged(prev: string | null, next: string | null): void;
+        ariaDescribedByChanged(prev: string | null, next: string | null): void;
+        ariaDetailsChanged(prev: string | null, next: string | null): void;
+        ariaErrorMessageChanged(prev: string | null, next: string | null): void;
+        ariaFlowToChanged(prev: string | null, next: string | null): void;
+        ariaLabelledByChanged(prev: string | null, next: string | null): void;
+        ariaOwnsChanged(prev: string | null, next: string | null): void;
         "__#private@#handleReplacedProp"(replacedProp: {
             newPropertyName: string;
             deprecatedPropertyName: string;
             fromDeprecated: (v: any) => any;
             toDeprecated?: ((v: any) => any) | undefined;
         }): void;
+        "__#private@#controllers": Set<import('../framework/reactive-controller').ReactiveController>;
+        _addController(controller: import('../framework/reactive-controller').ReactiveController): void;
+        _removeController(controller: import('../framework/reactive-controller').ReactiveController): void;
     };
 } & {
     new (...args: any[]): {
@@ -1770,7 +1838,7 @@ declare const PickerField_base: {
         _vividAriaBehaviour: import('../aria/aria-mixin').VividAriaBehaviour;
         readonly $fastController: import('@microsoft/fast-element').ElementController;
         $emit(type: string, detail?: any, options?: Omit<CustomEventInit, "detail">): boolean | void;
-        disconnectedCallback(): void;
+        disconnectedCallback: (() => void) & (() => void);
         attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
         accessKey: string;
         readonly accessKeyLabel: string;
@@ -2122,6 +2190,13 @@ declare const PickerField_base: {
         tabIndex: number;
         blur(): void;
         focus(options?: FocusOptions): void;
+        ariaControls: string | null;
+        ariaDescribedBy: string | null;
+        ariaDetails: string | null;
+        ariaErrorMessage: string | null;
+        ariaFlowTo: string | null;
+        ariaLabelledBy: string | null;
+        ariaOwns: string | null;
         roleChanged(prev: string | null, next: string | null): void;
         ariaAtomicChanged(prev: string | null, next: string | null): void;
         ariaAutoCompleteChanged(prev: string | null, next: string | null): void;
@@ -2164,12 +2239,22 @@ declare const PickerField_base: {
         ariaValueNowChanged(prev: string | null, next: string | null): void;
         ariaValueTextChanged(prev: string | null, next: string | null): void;
         ariaRelevantChanged(prev: string | null, next: string | null): void;
+        ariaControlsChanged(prev: string | null, next: string | null): void;
+        ariaDescribedByChanged(prev: string | null, next: string | null): void;
+        ariaDetailsChanged(prev: string | null, next: string | null): void;
+        ariaErrorMessageChanged(prev: string | null, next: string | null): void;
+        ariaFlowToChanged(prev: string | null, next: string | null): void;
+        ariaLabelledByChanged(prev: string | null, next: string | null): void;
+        ariaOwnsChanged(prev: string | null, next: string | null): void;
         "__#private@#handleReplacedProp"(replacedProp: {
             newPropertyName: string;
             deprecatedPropertyName: string;
             fromDeprecated: (v: any) => any;
             toDeprecated?: ((v: any) => any) | undefined;
         }): void;
+        "__#private@#controllers": Set<import('../framework/reactive-controller').ReactiveController>;
+        _addController(controller: import('../framework/reactive-controller').ReactiveController): void;
+        _removeController(controller: import('../framework/reactive-controller').ReactiveController): void;
     };
 } & {
     new (...args: any[]): {
@@ -2178,7 +2263,7 @@ declare const PickerField_base: {
         _vividAriaBehaviour: import('../aria/aria-mixin').VividAriaBehaviour;
         readonly $fastController: import('@microsoft/fast-element').ElementController;
         $emit(type: string, detail?: any, options?: Omit<CustomEventInit, "detail">): boolean | void;
-        disconnectedCallback(): void;
+        disconnectedCallback: (() => void) & (() => void);
         attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
         accessKey: string;
         readonly accessKeyLabel: string;
@@ -2530,6 +2615,13 @@ declare const PickerField_base: {
         tabIndex: number;
         blur(): void;
         focus(options?: FocusOptions): void;
+        ariaControls: string | null;
+        ariaDescribedBy: string | null;
+        ariaDetails: string | null;
+        ariaErrorMessage: string | null;
+        ariaFlowTo: string | null;
+        ariaLabelledBy: string | null;
+        ariaOwns: string | null;
         roleChanged(prev: string | null, next: string | null): void;
         ariaAtomicChanged(prev: string | null, next: string | null): void;
         ariaAutoCompleteChanged(prev: string | null, next: string | null): void;
@@ -2572,12 +2664,22 @@ declare const PickerField_base: {
         ariaValueNowChanged(prev: string | null, next: string | null): void;
         ariaValueTextChanged(prev: string | null, next: string | null): void;
         ariaRelevantChanged(prev: string | null, next: string | null): void;
+        ariaControlsChanged(prev: string | null, next: string | null): void;
+        ariaDescribedByChanged(prev: string | null, next: string | null): void;
+        ariaDetailsChanged(prev: string | null, next: string | null): void;
+        ariaErrorMessageChanged(prev: string | null, next: string | null): void;
+        ariaFlowToChanged(prev: string | null, next: string | null): void;
+        ariaLabelledByChanged(prev: string | null, next: string | null): void;
+        ariaOwnsChanged(prev: string | null, next: string | null): void;
         "__#private@#handleReplacedProp"(replacedProp: {
             newPropertyName: string;
             deprecatedPropertyName: string;
             fromDeprecated: (v: any) => any;
             toDeprecated?: ((v: any) => any) | undefined;
         }): void;
+        "__#private@#controllers": Set<import('../framework/reactive-controller').ReactiveController>;
+        _addController(controller: import('../framework/reactive-controller').ReactiveController): void;
+        _removeController(controller: import('../framework/reactive-controller').ReactiveController): void;
     };
 } & {
     new (...args: any[]): {
@@ -2971,6 +3073,13 @@ declare const PickerField_base: {
         tabIndex: number;
         blur(): void;
         focus(options?: FocusOptions): void;
+        ariaControls: string | null;
+        ariaDescribedBy: string | null;
+        ariaDetails: string | null;
+        ariaErrorMessage: string | null;
+        ariaFlowTo: string | null;
+        ariaLabelledBy: string | null;
+        ariaOwns: string | null;
         roleChanged(prev: string | null, next: string | null): void;
         ariaAtomicChanged(prev: string | null, next: string | null): void;
         ariaAutoCompleteChanged(prev: string | null, next: string | null): void;
@@ -3013,12 +3122,22 @@ declare const PickerField_base: {
         ariaValueNowChanged(prev: string | null, next: string | null): void;
         ariaValueTextChanged(prev: string | null, next: string | null): void;
         ariaRelevantChanged(prev: string | null, next: string | null): void;
+        ariaControlsChanged(prev: string | null, next: string | null): void;
+        ariaDescribedByChanged(prev: string | null, next: string | null): void;
+        ariaDetailsChanged(prev: string | null, next: string | null): void;
+        ariaErrorMessageChanged(prev: string | null, next: string | null): void;
+        ariaFlowToChanged(prev: string | null, next: string | null): void;
+        ariaLabelledByChanged(prev: string | null, next: string | null): void;
+        ariaOwnsChanged(prev: string | null, next: string | null): void;
         "__#private@#handleReplacedProp"(replacedProp: {
             newPropertyName: string;
             deprecatedPropertyName: string;
             fromDeprecated: (v: any) => any;
             toDeprecated?: ((v: any) => any) | undefined;
         }): void;
+        "__#private@#controllers": Set<import('../framework/reactive-controller').ReactiveController>;
+        _addController(controller: import('../framework/reactive-controller').ReactiveController): void;
+        _removeController(controller: import('../framework/reactive-controller').ReactiveController): void;
     };
     get formAssociated(): boolean;
 } & typeof VividElement;

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

@@ -1,23 +1,10 @@
-import { AddViewBehaviorFactory, Binding, BindingDirective, CaptureType, Expression, HTMLDirective, Subscriber, ViewBehavior, ViewBehaviorFactory, ViewController, ViewTemplate } from '@microsoft/fast-element';
+import { AddViewBehaviorFactory, CaptureType, HTMLDirective, ViewBehavior, ViewBehaviorFactory, ViewController, ViewTemplate } from '@microsoft/fast-element';
 import { VividElement } from '../foundation/vivid-element/vivid-element';
-export declare class RenderInLightDomBehaviour<TSource extends VividElement> implements ViewBehavior, Subscriber {
-    private source;
-    private view?;
-    private insertionPoint?;
-    private templateBindingObserver;
-    private context?;
-    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> implements HTMLDirective, ViewBehaviorFactory, BindingDirective {
-    readonly templateBinding: Binding<TSource, ViewTemplate>;
-    readonly dataBinding: Binding<TSource, ViewTemplate>;
-    targetNodeId: string;
-    constructor(templateBinding: Binding<TSource, ViewTemplate>);
+export declare class RenderInLightDomDirective<TSource extends VividElement> implements HTMLDirective, ViewBehaviorFactory, ViewBehavior {
+    private readonly template;
+    constructor(template: ViewTemplate<TSource>);
     createHTML(add: AddViewBehaviorFactory): string;
-    createBehavior(): RenderInLightDomBehaviour<TSource>;
+    createBehavior(): this;
+    bind(controller: ViewController): void;
 }
-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>;
+export declare function renderInLightDOM<TSource extends VividElement, TParent>(template: ViewTemplate<TSource>): CaptureType<TSource, TParent>;

package/shared/utils/platform.d.ts

@@ -0,0 +1 @@
+export declare function isApplePlatform(): boolean;

package/side-drawer/definition.cjs

@@ -1,5 +1,5 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_definition = require("../unbundled/definition63.cjs");
+const require_definition = require("../unbundled/definition65.cjs");
 exports.VwcSideDrawerElement = require_definition.SideDrawer;
 exports.registerSideDrawer = require_definition.registerSideDrawer;
 exports.sideDrawerDefinition = require_definition.sideDrawerDefinition;

package/side-drawer/definition.js

@@ -1,2 +1,2 @@
-import { n as sideDrawerDefinition, r as SideDrawer, t as registerSideDrawer } from "../unbundled/definition63.js";
+import { n as sideDrawerDefinition, r as SideDrawer, t as registerSideDrawer } from "../unbundled/definition65.js";
 export { SideDrawer as VwcSideDrawerElement, registerSideDrawer, sideDrawerDefinition };

package/side-drawer/index.cjs

@@ -1,4 +1,4 @@
-const e=require(`../bundled/vivid-element.cjs`),t=require(`../bundled/when.cjs`),n=require(`../bundled/decorate.cjs`),r=require(`../bundled/class-names.cjs`),i=require(`../bundled/dialog.cjs`);var a=class extends e.t{constructor(...e){super(...e),this.alternate=!1,this.modal=!1,this.open=!1,this.trailing=!1}attributeChangedCallback(e,t,n){switch(super.attributeChangedCallback(e,t,n),e){case`open`:this.open?this.#t():this.#e()}}#e(){this.$emit(`close`,void 0,{bubbles:!1})}#t(){this.$emit(`open`,void 0,{bubbles:!1})}_onKeydown(e){if(i.t(e)){this._handleCloseRequest();return}else return!0}_handleCloseRequest(){this.$emit(`cancel`,void 0,{bubbles:!1,cancelable:!0})&&(this.open=!1)}};n.t([e.u({mode:`boolean`})],a.prototype,`alternate`,void 0),n.t([e.u({mode:`boolean`})],a.prototype,`modal`,void 0),n.t([e.u({mode:`boolean`})],a.prototype,`open`,void 0),n.t([e.u({mode:`boolean`})],a.prototype,`trailing`,void 0);var o=`: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%);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{background-color:var(--scrollbar-fallback-track-color,var(--scrollbar-thumb-color));border:0;border-radius:4px}.control{z-index:1;background-color:var(--vvd-color-canvas);color:var(--vvd-color-canvas-text);inline-size:280px;position:fixed;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}`,s=e.f`
+const e=require(`../bundled/vivid-element.cjs`),t=require(`../bundled/when.cjs`),n=require(`../bundled/decorate.cjs`),r=require(`../bundled/class-names.cjs`),i=require(`../bundled/dialog.cjs`);var a=class extends e.t{constructor(...e){super(...e),this.alternate=!1,this.modal=!1,this.open=!1,this.trailing=!1}attributeChangedCallback(e,t,n){switch(super.attributeChangedCallback(e,t,n),e){case`open`:this.open?this.#t():this.#e()}}#e(){this.$emit(`close`,void 0,{bubbles:!1})}#t(){this.$emit(`open`,void 0,{bubbles:!1})}_onKeydown(e){if(i.t(e)){this._handleCloseRequest();return}else return!0}_handleCloseRequest(){this.$emit(`cancel`,void 0,{bubbles:!1,cancelable:!0})&&(this.open=!1)}};n.t([e.m({mode:`boolean`})],a.prototype,`alternate`,void 0),n.t([e.m({mode:`boolean`})],a.prototype,`modal`,void 0),n.t([e.m({mode:`boolean`})],a.prototype,`open`,void 0),n.t([e.m({mode:`boolean`})],a.prototype,`trailing`,void 0);var o=`: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%);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{background-color:var(--scrollbar-fallback-track-color,var(--scrollbar-thumb-color));border:0;border-radius:4px}.control{z-index:1;background-color:var(--vvd-color-canvas);color:var(--vvd-color-canvas-text);inline-size:280px;position:fixed;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}`,s=e.p`
 	<div
 		class="${({modal:e,open:t,trailing:n})=>r.t(`control`,[`modal`,e],[`open`,t],[`trailing`,n])}"
 		?inert="${e=>!e.open}"
@@ -12,8 +12,8 @@ const e=require(`../bundled/vivid-element.cjs`),t=require(`../bundled/when.cjs`)
 		<slot name="app-content"></slot>
 	</div>
 
-	${t.t(e=>e.modal,e.f`<div
+	${t.t(e=>e.modal,e.p`<div
 			class="${({open:e})=>r.t(`scrim`,[`open`,e])}"
 			@click="${e=>e._handleCloseRequest()}"
 		></div>`)}
-`,c=e.s(`side-drawer`,a,s,[],{styles:o});e.c(c)();
+`,c=e.u(`side-drawer`,a,s,[],{styles:o});e.d(c)();

package/side-drawer/index.js

@@ -1,4 +1,4 @@
-import { c as e, f as t, s as n, t as r, u as i } from "../bundled/vivid-element.js";
+import { d as e, m as t, p as n, t as r, u as i } from "../bundled/vivid-element.js";
 import { t as a } from "../bundled/when.js";
 import { t as o } from "../bundled/decorate.js";
 import { t as s } from "../bundled/class-names.js";
@@ -34,7 +34,7 @@ var l = class extends r {
 };
 //#endregion
 //#region src/lib/side-drawer/index.ts
-o([i({ mode: "boolean" })], l.prototype, "alternate", void 0), o([i({ mode: "boolean" })], l.prototype, "modal", void 0), o([i({ mode: "boolean" })], l.prototype, "open", void 0), o([i({ mode: "boolean" })], l.prototype, "trailing", void 0), e(n("side-drawer", l, t`
+o([t({ mode: "boolean" })], l.prototype, "alternate", void 0), o([t({ mode: "boolean" })], l.prototype, "modal", void 0), o([t({ mode: "boolean" })], l.prototype, "open", void 0), o([t({ mode: "boolean" })], l.prototype, "trailing", void 0), e(i("side-drawer", l, n`
 	<div
 		class="${({ modal: e, open: t, trailing: n }) => s("control", ["modal", e], ["open", t], ["trailing", n])}"
 		?inert="${(e) => !e.open}"
@@ -48,7 +48,7 @@ o([i({ mode: "boolean" })], l.prototype, "alternate", void 0), o([i({ mode: "boo
 		<slot name="app-content"></slot>
 	</div>
 
-	${a((e) => e.modal, t`<div
+	${a((e) => e.modal, n`<div
 			class="${({ open: e }) => s("scrim", ["open", e])}"
 			@click="${(e) => e._handleCloseRequest()}"
 		></div>`)}