@vonage/vivid 5.23.1-preview.0 → 5.24.0

package/selectable-box/index.js

@@ -7,7 +7,7 @@ import { n as l, t as u } from "../bundled/delegates-aria.js";
 import { r as d, t as f } from "../bundled/definition15.js";
 import { r as p, t as m } from "../bundled/definition16.js";
 //#region src/lib/selectable-box/selectable-box.scss?inline
-var h = ":host{display:flex}.base.connotation-cta{--_connotation-color-firm-all:var(--vvd-selectable-box-cta-firm-all,var(--vvd-color-cta-600));--_connotation-color-pale:var(--vvd-selectable-box-cta-pale,var(--vvd-color-cta-300));--_connotation-color-fierce:var(--vvd-selectable-box-cta-fierce,var(--vvd-color-cta-700));--_connotation-color-faint:var(--vvd-selectable-box-cta-faint,var(--vvd-color-cta-50));--_connotation-color-soft:var(--vvd-selectable-box-cta-soft,var(--vvd-color-cta-100))}.base:not(.connotation-cta){--_connotation-color-firm-all:var(--vvd-selectable-box-accent-firm-all,var(--vvd-color-neutral-600));--_connotation-color-pale:var(--vvd-selectable-box-accent-pale,var(--vvd-color-neutral-300));--_connotation-color-fierce:var(--vvd-selectable-box-accent-fierce,var(--vvd-color-neutral-700));--_connotation-color-faint:var(--vvd-selectable-box-accent-faint,var(--vvd-color-neutral-50));--_connotation-color-soft:var(--vvd-selectable-box-accent-soft,var(--vvd-color-neutral-100))}.base{--_appearance-color-text:var(--_connotation-color-firm-all);--_appearance-color-fill:transparent;--_appearance-color-outline:var(--_connotation-color-pale)}@media (hover:hover){.base:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm-all);--_appearance-color-fill:transparent;--_appearance-color-outline:var(--_connotation-color-firm-all)}}.base.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm-all);--_appearance-color-fill:transparent;--_appearance-color-outline:var(--_connotation-color-firm-all)}.base.selected:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_connotation-color-firm-all);--_appearance-color-fill:var(--_connotation-color-soft);--_appearance-color-outline:var(--_connotation-color-pale)}@media (hover:hover){.base.selected:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm-all);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:var(--_connotation-color-firm-all)}}.base.selected.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm-all);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:var(--_connotation-color-firm-all)}.base:disabled,.base.disabled{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:var(--vvd-color-neutral-100)}.base{--control-offset:calc(var(--selectable-box-spacing,16px) + 36px);padding:var(--selectable-box-spacing,16px);border:1px solid var(--_appearance-color-outline);background-color:var(--_appearance-color-fill);text-align:start;border-radius:8px;inline-size:100%;position:relative}.base.control-placement-end-stacked,.base.control-placement-start-stacked{padding-block-start:var(--control-offset)}.base.control-placement-start{padding-inline-start:var(--control-offset)}.base.control-placement-end{padding-inline-end:var(--control-offset)}.base:focus-visible{--focus-stroke-gap-color:transparent;box-shadow:0 0 0 4px color-mix(in srgb, var(--focus-stroke-color,var(--vvd-color-cta-500)), transparent 85%), inset 0 0 0 3px var(--focus-stroke-gap-color,currentColor);outline:1px solid var(--focus-stroke-color,var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset,0px))}.base.tight{min-height:calc(var(--selectable-box-spacing,16px) * 2 + 22px);padding:0;overflow:hidden}.base.selected{background-color:var(--selectable-box-checked-bg,var(--_appearance-color-fill))}.base.clickable{cursor:pointer}.control{position:absolute;inset-block-start:var(--selectable-box-spacing,16px)}.control.start-stacked,.control.start{inset-inline-start:var(--selectable-box-spacing,16px)}.control.end-stacked,.control.end{inset-inline-end:var(--selectable-box-spacing,16px)}", g = class extends u(r) {
+var h = ":host{display:flex}.base.connotation-cta{--_connotation-color-firm-all:var(--vvd-selectable-box-cta-firm-all,var(--vvd-color-cta-600));--_connotation-color-pale:var(--vvd-selectable-box-cta-pale,var(--vvd-color-cta-300));--_connotation-color-fierce:var(--vvd-selectable-box-cta-fierce,var(--vvd-color-cta-700));--_connotation-color-faint:var(--vvd-selectable-box-cta-faint,var(--vvd-color-cta-50));--_connotation-color-soft:var(--vvd-selectable-box-cta-soft,var(--vvd-color-cta-100))}.base:not(.connotation-cta){--_connotation-color-firm-all:var(--vvd-selectable-box-accent-firm-all,var(--vvd-color-neutral-600));--_connotation-color-pale:var(--vvd-selectable-box-accent-pale,var(--vvd-color-neutral-300));--_connotation-color-fierce:var(--vvd-selectable-box-accent-fierce,var(--vvd-color-neutral-700));--_connotation-color-faint:var(--vvd-selectable-box-accent-faint,var(--vvd-color-neutral-50));--_connotation-color-soft:var(--vvd-selectable-box-accent-soft,var(--vvd-color-neutral-100))}.base{--_appearance-color-text:var(--_connotation-color-firm-all);--_appearance-color-fill:transparent;--_appearance-color-outline:var(--_connotation-color-pale)}@media (hover:hover){.base:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm-all);--_appearance-color-fill:transparent;--_appearance-color-outline:var(--_connotation-color-firm-all)}}.base.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm-all);--_appearance-color-fill:transparent;--_appearance-color-outline:var(--_connotation-color-firm-all)}.base.selected:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_connotation-color-firm-all);--_appearance-color-fill:var(--_connotation-color-soft);--_appearance-color-outline:var(--_connotation-color-pale)}@media (hover:hover){.base.selected:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm-all);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:var(--_connotation-color-firm-all)}}.base.selected.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm-all);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:var(--_connotation-color-firm-all)}.base:disabled,.base.disabled{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:var(--vvd-color-neutral-100)}.base{--control-offset:calc(var(--selectable-box-spacing,16px) + 36px);padding:var(--selectable-box-spacing,16px);border:1px solid var(--_appearance-color-outline);background-color:var(--_appearance-color-fill);text-align:start;border-radius:8px;inline-size:100%;position:relative}.base.control-placement-end-stacked,.base.control-placement-start-stacked{padding-block-start:var(--control-offset)}.base.control-placement-start{padding-inline-start:var(--control-offset)}.base.control-placement-end{padding-inline-end:var(--control-offset)}.base:focus-visible{--focus-stroke-gap-color:transparent;box-shadow:0 0 0 4px color-mix(in sRGB, var(--focus-stroke-color,var(--vvd-color-cta-500)), transparent 85%), inset 0 0 0 3px var(--focus-stroke-gap-color,currentColor);outline:1px solid var(--focus-stroke-color,var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset,0px))}.base.tight{min-height:calc(var(--selectable-box-spacing,16px) * 2 + 22px);padding:0;overflow:hidden}.base.selected{background-color:var(--selectable-box-checked-bg,var(--_appearance-color-fill))}.base.clickable{cursor:pointer}.control{position:absolute;inset-block-start:var(--selectable-box-spacing,16px)}.control.start-stacked,.control.start{inset-inline-start:var(--selectable-box-spacing,16px)}.control.end-stacked,.control.end{inset-inline-end:var(--selectable-box-spacing,16px)}", g = class extends u(r) {
 	constructor(...e) {
 		super(...e), this.checked = !1, this.clickableBox = !1, this.controlPlacement = "end-stacked", this.tight = !1, this.disabled = !1;
 	}
@@ -32,16 +32,15 @@ s([t({ mode: "boolean" })], g.prototype, "checked", void 0), s([t({
 })], g.prototype, "controlPlacement", void 0), s([t({ mode: "boolean" })], g.prototype, "tight", void 0), s([t({ mode: "boolean" })], g.prototype, "disabled", void 0);
 //#endregion
 //#region src/lib/selectable-box/selectable-box.template.ts
-var _ = ({ connotation: e, tight: t, checked: n, clickableBox: r, controlPlacement: i, disabled: a }) => c("base", [`connotation-${e}`, !!e], ["tight", t], ["selected", n], ["clickable", r], ["readonly", !r], [`control-placement-${i}`, !!i], ["disabled", a]);
-function v(e) {
+function _(e) {
 	e.clickableBox || e._handleCheckedChange();
 }
-function y(e) {
+function v(e) {
 	let t = e.tagFor(d);
 	return n`${a((e) => e.controlType !== "radio", n`
 		<${t}
 			${l({ ariaLabel: (e) => !e.clickableBox && e.ariaLabel ? e.ariaLabel : null }, { onlySpecified: !0 })}
-			@change="${(e) => v(e)}"
+			@change="${(e) => _(e)}"
 			class="control checkbox ${(e) => e.controlPlacement}"
 			connotation="${(e) => e.connotation === "cta" ? o.CTA : o.Accent}"
 			:checked="${(e) => e.checked}"
@@ -49,12 +48,12 @@ function y(e) {
 			inert="${(e) => e.clickableBox ? !0 : null}"
 		></${t}>`)} `;
 }
-function b(e) {
+function y(e) {
 	let t = e.tagFor(p);
 	return n`${a((e) => e.controlType === "radio", n`
 		<${t}
 			${l({ ariaLabel: (e) => !e.clickableBox && e.ariaLabel ? e.ariaLabel : null }, { onlySpecified: !0 })}
-			@change="${(e) => v(e)}"
+			@change="${(e) => _(e)}"
 			class="control radio ${(e) => e.controlPlacement}"
 			connotation="${(e) => e.connotation === "cta" ? o.CTA : o.Accent}"
 			:checked="${(e) => e.checked}"
@@ -66,7 +65,7 @@ function b(e) {
 //#region src/lib/selectable-box/index.ts
 e(i("selectable-box", g, (e) => n`<template>
 		<div
-			class="${_}"
+			class="${(e) => c("base", [`connotation-${e.connotation}`, !!e.connotation], ["tight", e.tight], ["selected", e.checked], ["clickable", e.clickableBox], ["readonly", !e.clickableBox], [`control-placement-${e.controlPlacement}`, !!e.controlPlacement], ["disabled", e.disabled])}"
 			tabindex="${(e) => e.clickableBox && !e.disabled ? "0" : null}"
 			${l({
 	role: (e) => e.clickableBox ? "button" : null,
@@ -77,7 +76,7 @@ e(i("selectable-box", g, (e) => n`<template>
 			@keydown="${(e, t) => e._handleKeydown(t.event)}"
 			@click="${(e) => e.clickableBox ? e._handleCheckedChange() : null}"
 		>
-			${y(e)} ${b(e)}
+			${v(e)} ${y(e)}
 			<slot></slot>
 		</div>
 	</template>`, [f, m], {

package/shared/aria/delegates-aria.d.ts

@@ -10,6 +10,7 @@ export declare const DelegatesAria: <T extends Constructor<VividElement>>(Base:
     new (...args: any[]): {
         _vividAriaBehaviour: "delegate";
         connectedCallback(): void;
+        focus(...args: any[]): void;
         readonly $fastController: import('@microsoft/fast-element').ElementController;
         $emit(type: string, detail?: any, options?: Omit<CustomEventInit, "detail">): boolean | void;
         disconnectedCallback: (() => void) & (() => void);
@@ -363,7 +364,6 @@ export declare const DelegatesAria: <T extends Constructor<VividElement>>(Base:
         nonce?: string;
         tabIndex: number;
         blur(): void;
-        focus(options?: FocusOptions): void;
         ariaControls: string | null;
         ariaDescribedBy: string | null;
         ariaDetails: string | null;

package/shared/aria/host-semantics.d.ts

@@ -7,6 +7,7 @@ export declare const HostSemantics: <T extends Constructor<VividElement>>(Base:
     new (...args: any[]): {
         _vividAriaBehaviour: "host";
         connectedCallback(): void;
+        focus(...args: any[]): void;
         readonly $fastController: import('@microsoft/fast-element').ElementController;
         $emit(type: string, detail?: any, options?: Omit<CustomEventInit, "detail">): boolean | void;
         disconnectedCallback: (() => void) & (() => void);
@@ -360,7 +361,6 @@ export declare const HostSemantics: <T extends Constructor<VividElement>>(Base:
         nonce?: string;
         tabIndex: number;
         blur(): void;
-        focus(options?: FocusOptions): void;
         ariaControls: string | null;
         ariaDescribedBy: string | null;
         ariaDetails: string | null;

package/shared/color-picker/base-color-picker.d.ts

@@ -22,6 +22,7 @@ export declare const BaseColorPicker: <T extends Constructor<VividElement>>(Base
         _focusSwatchByIndex(index: number): void;
         _renderColorSwatch(iconTag: InlineTemplateDirective, tooltipTag: InlineTemplateDirective): import('@microsoft/fast-element').ViewTemplate<ColorSwatch, any>;
         get locale(): import('../localization/Locale').Locale;
+        focus(...args: any[]): void;
         _vividAriaBehaviour: import('../aria/aria-mixin').VividAriaBehaviour;
         readonly $fastController: import('@microsoft/fast-element').ElementController;
         $emit(type: string, detail?: any, options?: Omit<CustomEventInit, "detail">): boolean | void;
@@ -376,7 +377,6 @@ export declare const BaseColorPicker: <T extends Constructor<VividElement>>(Base
         nonce?: string;
         tabIndex: number;
         blur(): void;
-        focus(options?: FocusOptions): void;
         ariaControls: string | null;
         ariaDescribedBy: string | null;
         ariaDetails: string | null;

package/shared/feedback/feedback-message.d.ts

@@ -4,6 +4,7 @@ declare const FeedbackMessage_base: {
     new (...args: any[]): {
         get locale(): import('../localization/Locale').Locale;
         connectedCallback(): void;
+        focus(...args: any[]): void;
         _vividAriaBehaviour: import('../aria/aria-mixin').VividAriaBehaviour;
         readonly $fastController: import('@microsoft/fast-element').ElementController;
         $emit(type: string, detail?: any, options?: Omit<CustomEventInit, "detail">): boolean | void;
@@ -358,7 +359,6 @@ declare const FeedbackMessage_base: {
         nonce?: string;
         tabIndex: number;
         blur(): void;
-        focus(options?: FocusOptions): void;
         ariaControls: string | null;
         ariaDescribedBy: string | null;
         ariaDetails: string | null;

package/shared/feedback/mixins.d.ts

@@ -14,6 +14,7 @@ export declare const WithFeedback: <T extends Constructor<VividElement>>(Base: T
         _slottedHelperTextFeedbackType(): "none" | "helper";
         _getFeedbackTemplate(ctx: VividElementDefinitionContext): import('@microsoft/fast-element').ViewTemplate<any, any>;
         connectedCallback(): void;
+        focus(...args: any[]): void;
         _vividAriaBehaviour: import('../aria/aria-mixin').VividAriaBehaviour;
         readonly $fastController: import('@microsoft/fast-element').ElementController;
         $emit(type: string, detail?: any, options?: Omit<CustomEventInit, "detail">): boolean | void;
@@ -368,7 +369,6 @@ export declare const WithFeedback: <T extends Constructor<VividElement>>(Base: T
         nonce?: string;
         tabIndex: number;
         blur(): void;
-        focus(options?: FocusOptions): void;
         ariaControls: string | null;
         ariaDescribedBy: string | null;
         ariaDetails: string | null;
@@ -452,6 +452,7 @@ export declare const WithLightDOMFeedback: <T extends Constructor<VividElement>>
         };
         _slottedHelperTextFeedbackType(): "none" | "helper";
         connectedCallback(): void;
+        focus(...args: any[]): void;
         _vividAriaBehaviour: import('../aria/aria-mixin').VividAriaBehaviour;
         readonly $fastController: import('@microsoft/fast-element').ElementController;
         $emit(type: string, detail?: any, options?: Omit<CustomEventInit, "detail">): boolean | void;
@@ -806,7 +807,6 @@ export declare const WithLightDOMFeedback: <T extends Constructor<VividElement>>
         nonce?: string;
         tabIndex: number;
         blur(): void;
-        focus(options?: FocusOptions): void;
         ariaControls: string | null;
         ariaDescribedBy: string | null;
         ariaDetails: string | null;

package/shared/foundation/button/button.d.ts

@@ -3,6 +3,7 @@ declare const VividFoundationButton_base: {
     new (...args: any[]): {
         _vividAriaBehaviour: "delegate";
         connectedCallback(): void;
+        focus(...args: any[]): void;
         readonly $fastController: import('@microsoft/fast-element').ElementController;
         $emit(type: string, detail?: any, options?: Omit<CustomEventInit, "detail">): boolean | void;
         disconnectedCallback: (() => void) & (() => void);
@@ -356,7 +357,6 @@ declare const VividFoundationButton_base: {
         nonce?: string;
         tabIndex: number;
         blur(): void;
-        focus(options?: FocusOptions): void;
         ariaControls: string | null;
         ariaDescribedBy: string | null;
         ariaDetails: string | null;
@@ -461,6 +461,7 @@ declare const VividFoundationButton_base: {
         setFormValue(value: File | string | FormData | null, state?: File | string | FormData | null): void;
         _keypressHandler(e: KeyboardEvent): void;
         stopPropagation(e: Event): void;
+        focus(...args: any[]): void;
         _vividAriaBehaviour: import('../../aria/aria-mixin').VividAriaBehaviour;
         readonly $fastController: import('@microsoft/fast-element').ElementController;
         $emit(type: string, detail?: any, options?: Omit<CustomEventInit, "detail">): boolean | void;
@@ -814,7 +815,6 @@ declare const VividFoundationButton_base: {
         nonce?: string;
         tabIndex: number;
         blur(): void;
-        focus(options?: FocusOptions): void;
         ariaControls: string | null;
         ariaDescribedBy: string | null;
         ariaDetails: string | null;

package/shared/foundation/form-associated/form-associated.d.ts

@@ -40,6 +40,7 @@ export declare const FormAssociated: <T extends Constructor<VividElement>>(Base:
         setFormValue(value: File | string | FormData | null, state?: File | string | FormData | null): void;
         _keypressHandler(e: KeyboardEvent): void;
         stopPropagation(e: Event): void;
+        focus(...args: any[]): void;
         _vividAriaBehaviour: import('../../aria/aria-mixin').VividAriaBehaviour;
         readonly $fastController: import('@microsoft/fast-element').ElementController;
         $emit(type: string, detail?: any, options?: Omit<CustomEventInit, "detail">): boolean | void;
@@ -393,7 +394,6 @@ export declare const FormAssociated: <T extends Constructor<VividElement>>(Base:
         nonce?: string;
         tabIndex: number;
         blur(): void;
-        focus(options?: FocusOptions): void;
         ariaControls: string | null;
         ariaDescribedBy: string | null;
         ariaDetails: string | null;
@@ -511,6 +511,7 @@ export declare const CheckableFormAssociated: <T extends Constructor<VividElemen
         setFormValue(value: File | string | FormData | null, state?: File | string | FormData | null): void;
         _keypressHandler(e: KeyboardEvent): void;
         stopPropagation(e: Event): void;
+        focus(...args: any[]): void;
         _vividAriaBehaviour: import('../../aria/aria-mixin').VividAriaBehaviour;
         readonly $fastController: import('@microsoft/fast-element').ElementController;
         $emit(type: string, detail?: any, options?: Omit<CustomEventInit, "detail">): boolean | void;
@@ -864,7 +865,6 @@ export declare const CheckableFormAssociated: <T extends Constructor<VividElemen
         nonce?: string;
         tabIndex: number;
         blur(): void;
-        focus(options?: FocusOptions): void;
         ariaControls: string | null;
         ariaDescribedBy: string | null;
         ariaDetails: string | null;

package/shared/foundation/listbox/extractOptions.d.ts

@@ -0,0 +1,2 @@
+import { ListboxOption } from '../../../lib/option/option.ts';
+export declare function extractOptions(elements: Element[]): ListboxOption[];

package/shared/foundation/listbox/listbox.d.ts

@@ -13,4 +13,6 @@ export declare class Listbox extends VividElement {
     protected _newDefaultSelectedIndex(prev: ListboxOption[], next: ListboxOption[], _currentSelectedIndex: number): number | null;
     protected _isDefaultSelected(option: ListboxOption): boolean;
     protected setSelectedOptions(): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
 }

package/shared/patterns/affix.d.ts

@@ -7,6 +7,7 @@ export declare const AffixIcon: <T extends Constructor<VividElement>>(Base: T) =
         icon?: string;
         iconSlottedContent?: HTMLElement[];
         connectedCallback(): void;
+        focus(...args: any[]): void;
         _vividAriaBehaviour: import('../aria/aria-mixin').VividAriaBehaviour;
         readonly $fastController: import('@microsoft/fast-element').ElementController;
         $emit(type: string, detail?: any, options?: Omit<CustomEventInit, "detail">): boolean | void;
@@ -361,7 +362,6 @@ export declare const AffixIcon: <T extends Constructor<VividElement>>(Base: T) =
         nonce?: string;
         tabIndex: number;
         blur(): void;
-        focus(options?: FocusOptions): void;
         ariaControls: string | null;
         ariaDescribedBy: string | null;
         ariaDetails: string | null;
@@ -436,6 +436,7 @@ export declare const AffixIconWithTrailing: <T extends Constructor<VividElement>
         icon?: string;
         iconSlottedContent?: HTMLElement[];
         connectedCallback(): void;
+        focus(...args: any[]): void;
         _vividAriaBehaviour: import('../aria/aria-mixin').VividAriaBehaviour;
         readonly $fastController: import('@microsoft/fast-element').ElementController;
         $emit(type: string, detail?: any, options?: Omit<CustomEventInit, "detail">): boolean | void;
@@ -790,7 +791,6 @@ export declare const AffixIconWithTrailing: <T extends Constructor<VividElement>
         nonce?: string;
         tabIndex: number;
         blur(): void;
-        focus(options?: FocusOptions): void;
         ariaControls: string | null;
         ariaDescribedBy: string | null;
         ariaDetails: string | null;

package/shared/patterns/anchored.d.ts

@@ -14,6 +14,7 @@ export declare const Anchored: <T extends Constructor<VividElement>>(Base: T) =>
         "__#private@#cleanupObserverIfNeeded": () => void;
         connectedCallback(): void;
         disconnectedCallback(): void;
+        focus(...args: any[]): void;
         _vividAriaBehaviour: import('../aria/aria-mixin').VividAriaBehaviour;
         readonly $fastController: import('@microsoft/fast-element').ElementController;
         $emit(type: string, detail?: any, options?: Omit<CustomEventInit, "detail">): boolean | void;
@@ -367,7 +368,6 @@ export declare const Anchored: <T extends Constructor<VividElement>>(Base: T) =>
         nonce?: string;
         tabIndex: number;
         blur(): void;
-        focus(options?: FocusOptions): void;
         ariaControls: string | null;
         ariaDescribedBy: string | null;
         ariaDetails: string | null;
@@ -448,6 +448,7 @@ export declare const anchorSlotTemplateFactory: () => import('@microsoft/fast-el
     "__#private@#cleanupObserverIfNeeded": () => void;
     connectedCallback(): void;
     disconnectedCallback(): void;
+    focus(...args: any[]): void;
     _vividAriaBehaviour: import('../aria/aria-mixin').VividAriaBehaviour;
     readonly $fastController: import('@microsoft/fast-element').ElementController;
     $emit(type: string, detail?: any, options?: Omit<CustomEventInit, "detail">): boolean | void;
@@ -801,7 +802,6 @@ export declare const anchorSlotTemplateFactory: () => import('@microsoft/fast-el
     nonce?: string;
     tabIndex: number;
     blur(): void;
-    focus(options?: FocusOptions): void;
     ariaControls: string | null;
     ariaDescribedBy: string | null;
     ariaDetails: string | null;

package/shared/patterns/char-count/char-count.d.ts

@@ -14,6 +14,7 @@ export declare const WithCharCount: <T extends Constructor<VividElement>>(Base:
         _getCharCountTemplate: (context: VividElementDefinitionContext) => import('@microsoft/fast-element').ViewTemplate<any, any>;
         get locale(): import('../../localization/Locale').Locale;
         connectedCallback(): void;
+        focus(...args: any[]): void;
         _vividAriaBehaviour: import('../../aria/aria-mixin').VividAriaBehaviour;
         readonly $fastController: import('@microsoft/fast-element').ElementController;
         $emit(type: string, detail?: any, options?: Omit<CustomEventInit, "detail">): boolean | void;
@@ -368,7 +369,6 @@ export declare const WithCharCount: <T extends Constructor<VividElement>>(Base:
         nonce?: string;
         tabIndex: number;
         blur(): void;
-        focus(options?: FocusOptions): void;
         ariaControls: string | null;
         ariaDescribedBy: string | null;
         ariaDetails: string | null;

package/shared/patterns/form-elements/form-element.d.ts

@@ -43,6 +43,7 @@ export declare const FormElement: <T extends Constructor<FormAssociatedElement>>
         setFormValue(value: File | string | FormData | null, state?: File | string | FormData | null): void;
         _keypressHandler(e: KeyboardEvent): void;
         stopPropagation(e: Event): void;
+        focus(...args: any[]): void;
         _vividAriaBehaviour: import('../../aria/aria-mixin').VividAriaBehaviour;
         readonly $fastController: import('@microsoft/fast-element').ElementController;
         $emit(type: string, detail?: any, options?: Omit<CustomEventInit, "detail">): boolean | void;
@@ -396,7 +397,6 @@ export declare const FormElement: <T extends Constructor<FormAssociatedElement>>
         nonce?: string;
         tabIndex: number;
         blur(): void;
-        focus(options?: FocusOptions): void;
         ariaControls: string | null;
         ariaDescribedBy: string | null;
         ariaDetails: string | null;

package/shared/patterns/form-elements/with-contextual-help.d.ts

@@ -46,6 +46,7 @@ export declare const WithContextualHelp: <T extends Constructor<FormElementEleme
         setFormValue(value: File | string | FormData | null, state?: File | string | FormData | null): void;
         _keypressHandler(e: KeyboardEvent): void;
         stopPropagation(e: Event): void;
+        focus(...args: any[]): void;
         _vividAriaBehaviour: import('../../aria/aria-mixin').VividAriaBehaviour;
         readonly $fastController: import('@microsoft/fast-element').ElementController;
         $emit(type: string, detail?: any, options?: Omit<CustomEventInit, "detail">): boolean | void;
@@ -399,7 +400,6 @@ export declare const WithContextualHelp: <T extends Constructor<FormElementEleme
         nonce?: string;
         tabIndex: number;
         blur(): void;
-        focus(options?: FocusOptions): void;
         ariaControls: string | null;
         ariaDescribedBy: string | null;
         ariaDetails: string | null;

package/shared/patterns/form-elements/with-error-text.d.ts

@@ -49,6 +49,7 @@ export declare const WithErrorText: <T extends Constructor<FormElementElement>>(
         setFormValue(value: File | string | FormData | null, state?: File | string | FormData | null): void;
         _keypressHandler(e: KeyboardEvent): void;
         stopPropagation(e: Event): void;
+        focus(...args: any[]): void;
         _vividAriaBehaviour: import('../../aria/aria-mixin').VividAriaBehaviour;
         readonly $fastController: import('@microsoft/fast-element').ElementController;
         $emit(type: string, detail?: any, options?: Omit<CustomEventInit, "detail">): boolean | void;
@@ -402,7 +403,6 @@ export declare const WithErrorText: <T extends Constructor<FormElementElement>>(
         nonce?: string;
         tabIndex: number;
         blur(): void;
-        focus(options?: FocusOptions): void;
         ariaControls: string | null;
         ariaDescribedBy: string | null;
         ariaDetails: string | null;

package/shared/patterns/form-elements/with-success-text.d.ts

@@ -4,6 +4,7 @@ export declare const WithSuccessText: <T extends Constructor<VividElement>>(Base
     new (...args: any[]): {
         successText?: string;
         connectedCallback(): void;
+        focus(...args: any[]): void;
         _vividAriaBehaviour: import('../../aria/aria-mixin').VividAriaBehaviour;
         readonly $fastController: import('@microsoft/fast-element').ElementController;
         $emit(type: string, detail?: any, options?: Omit<CustomEventInit, "detail">): boolean | void;
@@ -358,7 +359,6 @@ export declare const WithSuccessText: <T extends Constructor<VividElement>>(Base
         nonce?: string;
         tabIndex: number;
         blur(): void;
-        focus(options?: FocusOptions): void;
         ariaControls: string | null;
         ariaDescribedBy: string | null;
         ariaDetails: string | null;

package/shared/patterns/kbd-shortcut.d.ts

@@ -6,6 +6,7 @@ export declare const WithKbdShortcut: <T extends Constructor<VividElement>>(Base
         _kbdAriaShortcutsValue?: string;
         _kbdShortcutSlottedChanged(): void;
         connectedCallback(): void;
+        focus(...args: any[]): void;
         _vividAriaBehaviour: import('../aria/aria-mixin').VividAriaBehaviour;
         readonly $fastController: import('@microsoft/fast-element').ElementController;
         $emit(type: string, detail?: any, options?: Omit<CustomEventInit, "detail">): boolean | void;
@@ -360,7 +361,6 @@ export declare const WithKbdShortcut: <T extends Constructor<VividElement>>(Base
         nonce?: string;
         tabIndex: number;
         blur(): void;
-        focus(options?: FocusOptions): void;
         ariaControls: string | null;
         ariaDescribedBy: string | null;
         ariaDetails: string | null;

package/shared/patterns/linkable.d.ts

@@ -16,6 +16,7 @@ export declare const Linkable: <T extends Constructor<VividElement>>(Base: T) =>
         _renderLinkElement: <T_1 extends any>(content: ViewTemplate<T_1>, cssClass: TemplateValue<T_1>, boundAriaProperties?: BoundAriaProperties<unknown>) => ViewTemplate<T_1, any>;
         _vividAriaBehaviour: "delegate";
         connectedCallback(): void;
+        focus(...args: any[]): void;
         readonly $fastController: import('@microsoft/fast-element').ElementController;
         $emit(type: string, detail?: any, options?: Omit<CustomEventInit, "detail">): boolean | void;
         disconnectedCallback: (() => void) & (() => void);
@@ -369,7 +370,6 @@ export declare const Linkable: <T extends Constructor<VividElement>>(Base: T) =>
         nonce?: string;
         tabIndex: number;
         blur(): void;
-        focus(options?: FocusOptions): void;
         ariaControls: string | null;
         ariaDescribedBy: string | null;
         ariaDetails: string | null;

package/shared/patterns/localized.d.ts

@@ -6,6 +6,7 @@ export declare const Localized: <T extends Constructor<VividElement>>(Base: T) =
     new (...args: any[]): {
         get locale(): Locale;
         connectedCallback(): void;
+        focus(...args: any[]): void;
         _vividAriaBehaviour: import('../aria/aria-mixin').VividAriaBehaviour;
         readonly $fastController: import('@microsoft/fast-element').ElementController;
         $emit(type: string, detail?: any, options?: Omit<CustomEventInit, "detail">): boolean | void;
@@ -360,7 +361,6 @@ export declare const Localized: <T extends Constructor<VividElement>>(Base: T) =
         nonce?: string;
         tabIndex: number;
         blur(): void;
-        focus(options?: FocusOptions): void;
         ariaControls: string | null;
         ariaDescribedBy: string | null;
         ariaDetails: string | null;
@@ -440,6 +440,7 @@ export declare const WithObservableLocale: <T extends Constructor<VividElement>>
         "__#private@#startObservingLocaleChanges"(): void;
         "__#private@#stopObservingLocaleChanges"(): void;
         get locale(): Locale;
+        focus(...args: any[]): void;
         _vividAriaBehaviour: import('../aria/aria-mixin').VividAriaBehaviour;
         readonly $fastController: import('@microsoft/fast-element').ElementController;
         $emit(type: string, detail?: any, options?: Omit<CustomEventInit, "detail">): boolean | void;
@@ -793,7 +794,6 @@ export declare const WithObservableLocale: <T extends Constructor<VividElement>>
         nonce?: string;
         tabIndex: number;
         blur(): void;
-        focus(options?: FocusOptions): void;
         ariaControls: string | null;
         ariaDescribedBy: string | null;
         ariaDetails: string | null;

package/shared/patterns/trapped-focus.d.ts

@@ -5,6 +5,7 @@ export declare const TrappedFocus: <T extends Constructor<VividElement>>(Base: T
     new (...args: any[]): {
         _trappedFocus(event: KeyboardEvent, getFocusableEls: () => NodeListOf<HTMLElement>): boolean;
         connectedCallback(): void;
+        focus(...args: any[]): void;
         _vividAriaBehaviour: import('../aria/aria-mixin').VividAriaBehaviour;
         readonly $fastController: import('@microsoft/fast-element').ElementController;
         $emit(type: string, detail?: any, options?: Omit<CustomEventInit, "detail">): boolean | void;
@@ -359,7 +360,6 @@ export declare const TrappedFocus: <T extends Constructor<VividElement>>(Base: T
         nonce?: string;
         tabIndex: number;
         blur(): void;
-        focus(options?: FocusOptions): void;
         ariaControls: string | null;
         ariaDescribedBy: string | null;
         ariaDetails: string | null;

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

@@ -124,6 +124,7 @@ export declare const CalendarPicker: <T extends AbstractConstructor<PickerField>
     setFormValue: ((value: File | string | FormData | null, state?: File | string | FormData | null) => void) & ((value: File | string | FormData | null, state?: File | string | FormData | null) => void);
     _keypressHandler: ((e: KeyboardEvent) => void) & ((e: KeyboardEvent) => void);
     stopPropagation: ((e: Event) => void) & ((e: Event) => void);
+    focus(...args: any[]): void;
     _vividAriaBehaviour: import('../../aria/aria-mixin').VividAriaBehaviour;
     readonly $fastController: import('@microsoft/fast-element').ElementController;
     $emit(type: string, detail?: any, options?: Omit<CustomEventInit, "detail">): boolean | void;
@@ -477,7 +478,6 @@ export declare const CalendarPicker: <T extends AbstractConstructor<PickerField>
     nonce?: string;
     tabIndex: number;
     blur(): void;
-    focus(options?: FocusOptions): void;
     ariaControls: string | null;
     ariaDescribedBy: string | null;
     ariaDetails: string | null;
@@ -562,6 +562,7 @@ export declare const CalendarPicker: <T extends AbstractConstructor<PickerField>
         _slottedHelperTextFeedbackType(): "none" | "helper";
         _getFeedbackTemplate(ctx: import('../../design-system/defineVividComponent').VividElementDefinitionContext): import('@microsoft/fast-element').ViewTemplate<any, any>;
         connectedCallback(): void;
+        focus(...args: any[]): void;
         _vividAriaBehaviour: import('../../aria/aria-mixin').VividAriaBehaviour;
         readonly $fastController: import('@microsoft/fast-element').ElementController;
         $emit(type: string, detail?: any, options?: Omit<CustomEventInit, "detail">): boolean | void;
@@ -916,7 +917,6 @@ export declare const CalendarPicker: <T extends AbstractConstructor<PickerField>
         nonce?: string;
         tabIndex: number;
         blur(): void;
-        focus(options?: FocusOptions): void;
         ariaControls: string | null;
         ariaDescribedBy: string | null;
         ariaDetails: string | null;

package/shared/picker-field/mixins/calendar-picker.template.d.ts

@@ -122,6 +122,7 @@ export declare const CalendarPickerTemplate: (context: VividElementDefinitionCon
     setFormValue: ((value: File | string | FormData | null, state?: File | string | FormData | null) => void) & ((value: File | string | FormData | null, state?: File | string | FormData | null) => void);
     _keypressHandler: ((e: KeyboardEvent) => void) & ((e: KeyboardEvent) => void);
     stopPropagation: ((e: Event) => void) & ((e: Event) => void);
+    focus(...args: any[]): void;
     _vividAriaBehaviour: import('../../aria/aria-mixin').VividAriaBehaviour;
     readonly $fastController: import('@microsoft/fast-element').ElementController;
     $emit(type: string, detail?: any, options?: Omit<CustomEventInit, "detail">): boolean | void;
@@ -475,7 +476,6 @@ export declare const CalendarPickerTemplate: (context: VividElementDefinitionCon
     nonce?: string;
     tabIndex: number;
     blur(): void;
-    focus(options?: FocusOptions): void;
     ariaControls: string | null;
     ariaDescribedBy: string | null;
     ariaDetails: string | null;
@@ -560,6 +560,7 @@ export declare const CalendarPickerTemplate: (context: VividElementDefinitionCon
         _slottedHelperTextFeedbackType(): "none" | "helper";
         _getFeedbackTemplate(ctx: VividElementDefinitionContext): import('@microsoft/fast-element').ViewTemplate<any, any>;
         connectedCallback(): void;
+        focus(...args: any[]): void;
         _vividAriaBehaviour: import('../../aria/aria-mixin').VividAriaBehaviour;
         readonly $fastController: import('@microsoft/fast-element').ElementController;
         $emit(type: string, detail?: any, options?: Omit<CustomEventInit, "detail">): boolean | void;
@@ -914,7 +915,6 @@ export declare const CalendarPickerTemplate: (context: VividElementDefinitionCon
         nonce?: string;
         tabIndex: number;
         blur(): void;
-        focus(options?: FocusOptions): void;
         ariaControls: string | null;
         ariaDescribedBy: string | null;
         ariaDetails: string | null;

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

@@ -3,6 +3,7 @@ declare const InlineTimePicker_base: {
     new (...args: any[]): {
         get locale(): import('../../../localization/Locale').Locale;
         connectedCallback(): void;
+        focus(...args: any[]): void;
         _vividAriaBehaviour: import('../../../aria/aria-mixin').VividAriaBehaviour;
         readonly $fastController: import('@microsoft/fast-element').ElementController;
         $emit(type: string, detail?: any, options?: Omit<CustomEventInit, "detail">): boolean | void;
@@ -357,7 +358,6 @@ declare const InlineTimePicker_base: {
         nonce?: string;
         tabIndex: number;
         blur(): void;
-        focus(options?: FocusOptions): void;
         ariaControls: string | null;
         ariaDescribedBy: string | null;
         ariaDetails: string | null;

package/shared/picker-field/mixins/min-max-calendar-picker.d.ts

@@ -128,6 +128,7 @@ export declare const MinMaxCalendarPicker: <T extends AbstractConstructor<Calend
     setFormValue: ((value: File | string | FormData | null, state?: File | string | FormData | null) => void) & ((value: File | string | FormData | null, state?: File | string | FormData | null) => void);
     _keypressHandler: ((e: KeyboardEvent) => void) & ((e: KeyboardEvent) => void);
     stopPropagation: ((e: Event) => void) & ((e: Event) => void);
+    focus(...args: any[]): void;
     _vividAriaBehaviour: import('../../aria/aria-mixin').VividAriaBehaviour;
     readonly $fastController: import('@microsoft/fast-element').ElementController;
     $emit(type: string, detail?: any, options?: Omit<CustomEventInit, "detail">): boolean | void;
@@ -481,7 +482,6 @@ export declare const MinMaxCalendarPicker: <T extends AbstractConstructor<Calend
     nonce?: string;
     tabIndex: number;
     blur(): void;
-    focus(options?: FocusOptions): void;
     ariaControls: string | null;
     ariaDescribedBy: string | null;
     ariaDetails: string | null;
@@ -566,6 +566,7 @@ export declare const MinMaxCalendarPicker: <T extends AbstractConstructor<Calend
         _slottedHelperTextFeedbackType(): "none" | "helper";
         _getFeedbackTemplate(ctx: import('../../design-system/defineVividComponent').VividElementDefinitionContext): import('@microsoft/fast-element').ViewTemplate<any, any>;
         connectedCallback(): void;
+        focus(...args: any[]): void;
         _vividAriaBehaviour: import('../../aria/aria-mixin').VividAriaBehaviour;
         readonly $fastController: import('@microsoft/fast-element').ElementController;
         $emit(type: string, detail?: any, options?: Omit<CustomEventInit, "detail">): boolean | void;
@@ -920,7 +921,6 @@ export declare const MinMaxCalendarPicker: <T extends AbstractConstructor<Calend
         nonce?: string;
         tabIndex: number;
         blur(): void;
-        focus(options?: FocusOptions): void;
         ariaControls: string | null;
         ariaDescribedBy: string | null;
         ariaDetails: string | null;

package/shared/picker-field/mixins/single-date-picker.d.ts

@@ -125,6 +125,7 @@ export declare const SingleDatePickerMixin: <T extends AbstractConstructor<Calen
     setFormValue: ((value: File | string | FormData | null, state?: File | string | FormData | null) => void) & ((value: File | string | FormData | null, state?: File | string | FormData | null) => void);
     _keypressHandler: ((e: KeyboardEvent) => void) & ((e: KeyboardEvent) => void);
     stopPropagation: ((e: Event) => void) & ((e: Event) => void);
+    focus(...args: any[]): void;
     _vividAriaBehaviour: import('../../aria/aria-mixin').VividAriaBehaviour;
     readonly $fastController: import('@microsoft/fast-element').ElementController;
     $emit(type: string, detail?: any, options?: Omit<CustomEventInit, "detail">): boolean | void;
@@ -478,7 +479,6 @@ export declare const SingleDatePickerMixin: <T extends AbstractConstructor<Calen
     nonce?: string;
     tabIndex: number;
     blur(): void;
-    focus(options?: FocusOptions): void;
     ariaControls: string | null;
     ariaDescribedBy: string | null;
     ariaDetails: string | null;
@@ -563,6 +563,7 @@ export declare const SingleDatePickerMixin: <T extends AbstractConstructor<Calen
         _slottedHelperTextFeedbackType(): "none" | "helper";
         _getFeedbackTemplate(ctx: import('../../design-system/defineVividComponent').VividElementDefinitionContext): import('@microsoft/fast-element').ViewTemplate<any, any>;
         connectedCallback(): void;
+        focus(...args: any[]): void;
         _vividAriaBehaviour: import('../../aria/aria-mixin').VividAriaBehaviour;
         readonly $fastController: import('@microsoft/fast-element').ElementController;
         $emit(type: string, detail?: any, options?: Omit<CustomEventInit, "detail">): boolean | void;
@@ -917,7 +918,6 @@ export declare const SingleDatePickerMixin: <T extends AbstractConstructor<Calen
         nonce?: string;
         tabIndex: number;
         blur(): void;
-        focus(options?: FocusOptions): void;
         ariaControls: string | null;
         ariaDescribedBy: string | null;
         ariaDetails: string | null;