@vonage/vivid 4.25.0 → 4.27.0

package/shared/feedback/mixins.d.ts

@@ -13,11 +13,11 @@ 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;
         specialHandling: boolean;
         _vividAriaBehaviour: import("../aria/aria-mixin").VividAriaBehaviour;
         readonly $fastController: import("@microsoft/fast-element").Controller;
         $emit(type: string, detail?: any, options?: Omit<CustomEventInit<any>, "detail"> | undefined): boolean | void;
-        connectedCallback(): void;
         disconnectedCallback(): void;
         attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
         accessKey: string;
@@ -363,11 +363,11 @@ export declare const WithLightDOMFeedback: <T extends Constructor<VividElement>>
             message: string;
         };
         _slottedHelperTextFeedbackType(): "none" | "helper";
+        connectedCallback(): void;
         specialHandling: boolean;
         _vividAriaBehaviour: import("../aria/aria-mixin").VividAriaBehaviour;
         readonly $fastController: import("@microsoft/fast-element").Controller;
         $emit(type: string, detail?: any, options?: Omit<CustomEventInit<any>, "detail"> | undefined): boolean | void;
-        connectedCallback(): void;
         disconnectedCallback(): void;
         attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
         accessKey: string;

package/shared/form-associated.cjs

@@ -222,6 +222,10 @@ const FormAssociated = (Base) => {
      * @internal
      */
     setValidity(flags, message, anchor) {
+      if ("valid" in flags && this.disabled) {
+        const { valid, ...cleanFlags } = flags;
+        flags = cleanFlags;
+      }
       if (this.elementInternals) {
         this.elementInternals.setValidity(flags, message, anchor);
       } else if (typeof message === "string") {

package/shared/form-associated.js

@@ -220,6 +220,10 @@ const FormAssociated = (Base) => {
      * @internal
      */
     setValidity(flags, message, anchor) {
+      if ("valid" in flags && this.disabled) {
+        const { valid, ...cleanFlags } = flags;
+        flags = cleanFlags;
+      }
       if (this.elementInternals) {
         this.elementInternals.setValidity(flags, message, anchor);
       } else if (typeof message === "string") {

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

@@ -2,10 +2,10 @@ import { VividElement } from '../vivid-element/vivid-element';
 declare const VividFoundationButton_base: {
     new (...args: any[]): {
         _vividAriaBehaviour: "delegate";
+        connectedCallback(): void;
         specialHandling: boolean;
         readonly $fastController: import("@microsoft/fast-element").Controller;
         $emit(type: string, detail?: any, options?: Omit<CustomEventInit<any>, "detail"> | undefined): boolean | void;
-        connectedCallback(): void;
         disconnectedCallback(): void;
         attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
         accessKey: string;

package/shared/foundation/vivid-element/vivid-element.d.ts

@@ -352,5 +352,7 @@ declare const VividElement_base: {
 };
 export declare class VividElement extends VividElement_base {
     static VIVID_VERSION: string;
+    static componentName: string;
+    connectedCallback(): void;
 }
 export {};

package/shared/key-codes.js

@@ -15,4 +15,4 @@ const keyPageUp = "PageUp";
 const keySpace = " ";
 const keyTab = "Tab";
 
-export { keySpace as a, keyEscape as b, keyTab as c, keyEnd as d, keyArrowUp as e, keyArrowDown as f, keyHome as g, keyArrowRight as h, keyArrowLeft as i, keyPageDown as j, keyEnter as k, keyPageUp as l, keyFunction2 as m };
+export { keySpace as a, keyEscape as b, keyTab as c, keyEnd as d, keyArrowUp as e, keyArrowDown as f, keyHome as g, keyArrowRight as h, keyArrowLeft as i, keyFunction2 as j, keyEnter as k, keyPageDown as l, keyPageUp as m };

package/shared/localization/Locale.d.ts

@@ -19,6 +19,8 @@ import type { ButtonLocale } from '../../lib/button/locale';
 import type { FeedbackMessageLocale } from '../feedback/locale';
 import type { CharCountLocale } from '../patterns/char-count/locale';
 import type { DataGridLocale } from '../../lib/data-grid/locale';
+import type { PaginationLocale } from '../../lib/pagination/locale';
+import type { TagLocale } from '../../lib/tag/locale';
 import type { Connotation } from '../../lib/enums';
 type ConnotationAnnoncementLocale = {
     [key in Connotation as `${key}Icon`]: string;
@@ -50,5 +52,7 @@ export interface Locale {
     connotationAnnoncement: ConnotationAnnoncementLocale;
     charCount: CharCountLocale;
     dataGrid: DataGridLocale;
+    pagination: PaginationLocale;
+    tag: TagLocale;
 }
 export {};

package/shared/mixins.cjs

@@ -227,7 +227,10 @@ const WithFeedback = (Base) => {
 				<${feedbackTag} id="feedback" :type="${(x) => x._internalFeedback().type}">
 					${(x) => x._internalFeedback().message}
 				</${feedbackTag}>
-				<${feedbackTag} id="slotted-helper-text-feedback" :type="${(x) => x._slottedHelperTextFeedbackType()}">
+				<${feedbackTag}
+					id="slotted-helper-text-feedback"
+					:type="${(x) => x._slottedHelperTextFeedbackType()}"
+				>
 					<slot name="helper-text" ${slotted.slotted("_helperTextSlottedContent")}></slot>
 				</${feedbackTag}>
 			`;

package/shared/mixins.js

@@ -225,7 +225,10 @@ const WithFeedback = (Base) => {
 				<${feedbackTag} id="feedback" :type="${(x) => x._internalFeedback().type}">
 					${(x) => x._internalFeedback().message}
 				</${feedbackTag}>
-				<${feedbackTag} id="slotted-helper-text-feedback" :type="${(x) => x._slottedHelperTextFeedbackType()}">
+				<${feedbackTag}
+					id="slotted-helper-text-feedback"
+					:type="${(x) => x._slottedHelperTextFeedbackType()}"
+				>
 					<slot name="helper-text" ${slotted("_helperTextSlottedContent")}></slot>
 				</${feedbackTag}>
 			`;

package/shared/patterns/affix.d.ts

@@ -6,11 +6,11 @@ export declare const AffixIcon: <T extends Constructor<VividElement>>(Base: T) =
     new (...args: any[]): {
         icon?: string | undefined;
         iconSlottedContent?: HTMLElement[] | undefined;
+        connectedCallback(): void;
         specialHandling: boolean;
         _vividAriaBehaviour: import("../aria/aria-mixin").VividAriaBehaviour;
         readonly $fastController: import("@microsoft/fast-element").Controller;
         $emit(type: string, detail?: any, options?: Omit<CustomEventInit<any>, "detail"> | undefined): boolean | void;
-        connectedCallback(): void;
         disconnectedCallback(): void;
         attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
         accessKey: string;
@@ -347,11 +347,11 @@ export declare const AffixIconWithTrailing: <T extends Constructor<VividElement>
         iconTrailing: boolean;
         icon?: string | undefined;
         iconSlottedContent?: HTMLElement[] | undefined;
+        connectedCallback(): void;
         specialHandling: boolean;
         _vividAriaBehaviour: import("../aria/aria-mixin").VividAriaBehaviour;
         readonly $fastController: import("@microsoft/fast-element").Controller;
         $emit(type: string, detail?: any, options?: Omit<CustomEventInit<any>, "detail"> | undefined): boolean | void;
-        connectedCallback(): void;
         disconnectedCallback(): void;
         attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
         accessKey: string;

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

@@ -13,11 +13,11 @@ export declare const WithCharCount: <T extends Constructor<VividElement>>(Base:
         _updateCharCountRemaining: () => void;
         _getCharCountTemplate: (context: VividElementDefinitionContext) => import("@microsoft/fast-element").ViewTemplate<any, any>;
         readonly locale: import("../../localization/Locale").Locale;
+        connectedCallback(): void;
         specialHandling: boolean;
         _vividAriaBehaviour: import("../../aria/aria-mixin").VividAriaBehaviour;
         readonly $fastController: import("@microsoft/fast-element").Controller;
         $emit(type: string, detail?: any, options?: Omit<CustomEventInit<any>, "detail"> | undefined): boolean | void;
-        connectedCallback(): void;
         disconnectedCallback(): void;
         attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
         accessKey: string;

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

@@ -3,11 +3,11 @@ import type { VividElement } from '../../foundation/vivid-element/vivid-element'
 export declare const WithSuccessText: <T extends Constructor<VividElement>>(Base: T) => {
     new (...args: any[]): {
         successText?: string | undefined;
+        connectedCallback(): void;
         specialHandling: boolean;
         _vividAriaBehaviour: import("../../aria/aria-mixin").VividAriaBehaviour;
         readonly $fastController: import("@microsoft/fast-element").Controller;
         $emit(type: string, detail?: any, options?: Omit<CustomEventInit<any>, "detail"> | undefined): boolean | void;
-        connectedCallback(): void;
         disconnectedCallback(): void;
         attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
         accessKey: string;

package/shared/patterns/linkable.d.ts

@@ -57,10 +57,10 @@ export declare const Linkable: <T extends Constructor<VividElement>>(Base: T) =>
             ariaRelevant: (string | number | boolean | null | undefined) | ((x: unknown) => string | number | boolean | null | undefined);
         }> | undefined) => ViewTemplate<T_1, any>;
         _vividAriaBehaviour: "delegate";
+        connectedCallback(): void;
         specialHandling: boolean;
         readonly $fastController: import("@microsoft/fast-element").Controller;
         $emit(type: string, detail?: any, options?: Omit<CustomEventInit<any>, "detail"> | undefined): boolean | void;
-        connectedCallback(): void;
         disconnectedCallback(): void;
         attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
         accessKey: string;

package/shared/patterns/localized.d.ts

@@ -4,11 +4,11 @@ import type { Locale } from '../localization/Locale';
 export declare const Localized: <T extends Constructor<VividElement>>(Base: T) => {
     new (...args: any[]): {
         readonly locale: Locale;
+        connectedCallback(): void;
         specialHandling: boolean;
         _vividAriaBehaviour: import("../aria/aria-mixin").VividAriaBehaviour;
         readonly $fastController: import("@microsoft/fast-element").Controller;
         $emit(type: string, detail?: any, options?: Omit<CustomEventInit<any>, "detail"> | undefined): boolean | void;
-        connectedCallback(): void;
         disconnectedCallback(): void;
         attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
         accessKey: string;

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

@@ -4,11 +4,11 @@ export declare const ignoreEventInFocusTraps: (event: Event) => void;
 export declare const TrappedFocus: <T extends Constructor<VividElement>>(Base: T) => {
     new (...args: any[]): {
         _trappedFocus(event: KeyboardEvent, getFocusableEls: () => NodeListOf<HTMLElement>): boolean;
+        connectedCallback(): void;
         specialHandling: boolean;
         _vividAriaBehaviour: import("../aria/aria-mixin").VividAriaBehaviour;
         readonly $fastController: import("@microsoft/fast-element").Controller;
         $emit(type: string, detail?: any, options?: Omit<CustomEventInit<any>, "detail"> | undefined): boolean | void;
-        connectedCallback(): void;
         disconnectedCallback(): void;
         attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
         accessKey: string;

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

@@ -30,7 +30,7 @@ export declare const CalendarPicker: <T extends AbstractConstructor<PickerField>
     _hideDatesOutsideMonth: boolean;
     _lastFocussedDate: DateStr | null;
     _isDateSelected(_: DateStr): boolean;
-    _isDateAriaSelected(date: DateStr): void;
+    _isDateAriaSelected(date: DateStr): boolean;
     _isDateInSelectedRange(_: DateStr): boolean;
     _isDateRangeStart(_: DateStr): boolean;
     _isDateRangeEnd(_: DateStr): boolean;
@@ -101,11 +101,11 @@ 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;
         specialHandling: boolean;
         _vividAriaBehaviour: import("../../aria/aria-mixin").VividAriaBehaviour;
         readonly $fastController: import("@microsoft/fast-element").Controller;
         $emit(type: string, detail?: any, options?: Omit<CustomEventInit<any>, "detail"> | undefined): boolean | void;
-        connectedCallback(): void;
         disconnectedCallback(): void;
         attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
         accessKey: string;

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

@@ -18,6 +18,11 @@ export interface CalendarPickerLocale {
     prevMonthLabel: string;
     nextMonthLabel: string;
     nextYearLabel: string;
+    todayLabel: string;
+    selectedLabel: string;
+    currentLabel: string;
+    changeMonthLabel: (month: string) => string;
+    showCalendarForMonthLabel: (month: string) => string;
     invalidDateError: string;
     invalidDateRangeError: string;
     startDateAfterMinDateError: (minDate: string) => string;

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

@@ -28,7 +28,7 @@ export declare const CalendarPickerTemplate: (context: VividElementDefinitionCon
     _hideDatesOutsideMonth: boolean;
     _lastFocussedDate: string | null;
     _isDateSelected(_: string): boolean;
-    _isDateAriaSelected(date: string): void;
+    _isDateAriaSelected(date: string): boolean;
     _isDateInSelectedRange(_: string): boolean;
     _isDateRangeStart(_: string): boolean;
     _isDateRangeEnd(_: string): boolean;
@@ -99,11 +99,11 @@ export declare const CalendarPickerTemplate: (context: VividElementDefinitionCon
         };
         _slottedHelperTextFeedbackType(): "none" | "helper";
         _getFeedbackTemplate(ctx: VividElementDefinitionContext): import("@microsoft/fast-element").ViewTemplate<any, any>;
+        connectedCallback(): void;
         specialHandling: boolean;
         _vividAriaBehaviour: import("../../aria/aria-mixin").VividAriaBehaviour;
         readonly $fastController: import("@microsoft/fast-element").Controller;
         $emit(type: string, detail?: any, options?: Omit<CustomEventInit<any>, "detail"> | undefined): boolean | void;
-        connectedCallback(): void;
         disconnectedCallback(): void;
         attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
         accessKey: string;

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

@@ -4,6 +4,7 @@ type BaseSegment = {
     id: number;
     title: string;
     titleClickable: boolean;
+    titleAriaLabel?: string;
     prevYearButton?: boolean;
     prevMonthButton?: boolean;
     nextMonthButton?: boolean;

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

@@ -2,11 +2,11 @@ import { VividElement } from '../../../foundation/vivid-element/vivid-element';
 declare const InlineTimePicker_base: {
     new (...args: any[]): {
         readonly locale: import("../../../localization/Locale").Locale;
+        connectedCallback(): void;
         specialHandling: boolean;
         _vividAriaBehaviour: import("../../../aria/aria-mixin").VividAriaBehaviour;
         readonly $fastController: import("@microsoft/fast-element").Controller;
         $emit(type: string, detail?: any, options?: Omit<CustomEventInit<any>, "detail"> | undefined): boolean | void;
-        connectedCallback(): void;
         disconnectedCallback(): void;
         attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
         accessKey: string;

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

@@ -28,7 +28,7 @@ export declare const MinMaxCalendarPicker: <T_5 extends AbstractConstructor<{
     _hideDatesOutsideMonth: boolean;
     _lastFocussedDate: string | null;
     _isDateSelected(_: string): boolean;
-    _isDateAriaSelected(date: string): void;
+    _isDateAriaSelected(date: string): boolean;
     _isDateInSelectedRange(_: string): boolean;
     _isDateRangeStart(_: string): boolean;
     _isDateRangeEnd(_: string): boolean;
@@ -99,11 +99,11 @@ export declare const MinMaxCalendarPicker: <T_5 extends AbstractConstructor<{
         };
         _slottedHelperTextFeedbackType(): "none" | "helper";
         _getFeedbackTemplate(ctx: import("../../design-system/defineVividComponent").VividElementDefinitionContext): import("@microsoft/fast-element").ViewTemplate<any, any>;
+        connectedCallback(): void;
         specialHandling: boolean;
         _vividAriaBehaviour: import("../../aria/aria-mixin").VividAriaBehaviour;
         readonly $fastController: import("@microsoft/fast-element").Controller;
         $emit(type: string, detail?: any, options?: Omit<CustomEventInit<any>, "detail"> | undefined): boolean | void;
-        connectedCallback(): void;
         disconnectedCallback(): void;
         attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
         accessKey: string;
@@ -839,7 +839,7 @@ export declare const MinMaxCalendarPicker: <T_5 extends AbstractConstructor<{
     _hideDatesOutsideMonth: boolean;
     _lastFocussedDate: string | null;
     _isDateSelected(_: string): boolean;
-    _isDateAriaSelected(date: string): void;
+    _isDateAriaSelected(date: string): boolean;
     _isDateInSelectedRange(_: string): boolean;
     _isDateRangeStart(_: string): boolean;
     _isDateRangeEnd(_: string): boolean;
@@ -910,11 +910,11 @@ export declare const MinMaxCalendarPicker: <T_5 extends AbstractConstructor<{
         };
         _slottedHelperTextFeedbackType(): "none" | "helper";
         _getFeedbackTemplate(ctx: import("../../design-system/defineVividComponent").VividElementDefinitionContext): import("@microsoft/fast-element").ViewTemplate<any, any>;
+        connectedCallback(): void;
         specialHandling: boolean;
         _vividAriaBehaviour: import("../../aria/aria-mixin").VividAriaBehaviour;
         readonly $fastController: import("@microsoft/fast-element").Controller;
         $emit(type: string, detail?: any, options?: Omit<CustomEventInit<any>, "detail"> | undefined): boolean | void;
-        connectedCallback(): void;
         disconnectedCallback(): void;
         attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
         accessKey: string;

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

@@ -27,7 +27,7 @@ export declare const SingleDatePickerMixin: <T_6 extends AbstractConstructor<{
     _hideDatesOutsideMonth: boolean;
     _lastFocussedDate: string | null;
     _isDateSelected(_: string): boolean;
-    _isDateAriaSelected(date: string): void;
+    _isDateAriaSelected(date: string): boolean;
     _isDateInSelectedRange(_: string): boolean;
     _isDateRangeStart(_: string): boolean;
     _isDateRangeEnd(_: string): boolean;
@@ -98,11 +98,11 @@ export declare const SingleDatePickerMixin: <T_6 extends AbstractConstructor<{
         };
         _slottedHelperTextFeedbackType(): "none" | "helper";
         _getFeedbackTemplate(ctx: import("../../design-system/defineVividComponent").VividElementDefinitionContext): import("@microsoft/fast-element").ViewTemplate<any, any>;
+        connectedCallback(): void;
         specialHandling: boolean;
         _vividAriaBehaviour: import("../../aria/aria-mixin").VividAriaBehaviour;
         readonly $fastController: import("@microsoft/fast-element").Controller;
         $emit(type: string, detail?: any, options?: Omit<CustomEventInit<any>, "detail"> | undefined): boolean | void;
-        connectedCallback(): void;
         disconnectedCallback(): void;
         attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
         accessKey: string;
@@ -869,11 +869,11 @@ export declare const SingleDatePickerMixin: <T_6 extends AbstractConstructor<{
         };
         _slottedHelperTextFeedbackType(): "none" | "helper";
         _getFeedbackTemplate(ctx: import("../../design-system/defineVividComponent").VividElementDefinitionContext): import("@microsoft/fast-element").ViewTemplate<any, any>;
+        connectedCallback(): void;
         specialHandling: boolean;
         _vividAriaBehaviour: import("../../aria/aria-mixin").VividAriaBehaviour;
         readonly $fastController: import("@microsoft/fast-element").Controller;
         $emit(type: string, detail?: any, options?: Omit<CustomEventInit<any>, "detail"> | undefined): boolean | void;
-        connectedCallback(): void;
         disconnectedCallback(): void;
         attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
         accessKey: string;
@@ -1678,11 +1678,11 @@ export declare const SingleDatePickerMixin: <T_6 extends AbstractConstructor<{
         };
         _slottedHelperTextFeedbackType(): "none" | "helper";
         _getFeedbackTemplate(ctx: import("../../design-system/defineVividComponent").VividElementDefinitionContext): import("@microsoft/fast-element").ViewTemplate<any, any>;
+        connectedCallback(): void;
         specialHandling: boolean;
         _vividAriaBehaviour: import("../../aria/aria-mixin").VividAriaBehaviour;
         readonly $fastController: import("@microsoft/fast-element").Controller;
         $emit(type: string, detail?: any, options?: Omit<CustomEventInit<any>, "detail"> | undefined): boolean | void;
-        connectedCallback(): void;
         disconnectedCallback(): void;
         attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
         accessKey: string;

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

@@ -62,11 +62,11 @@ export declare const SingleValuePicker: <T extends AbstractConstructor<PickerFie
         };
         _slottedHelperTextFeedbackType(): "none" | "helper";
         _getFeedbackTemplate(ctx: import("../../design-system/defineVividComponent").VividElementDefinitionContext): import("@microsoft/fast-element").ViewTemplate<any, any>;
+        connectedCallback(): void;
         specialHandling: boolean;
         _vividAriaBehaviour: import("../../aria/aria-mixin").VividAriaBehaviour;
         readonly $fastController: import("@microsoft/fast-element").Controller;
         $emit(type: string, detail?: any, options?: Omit<CustomEventInit<any>, "detail"> | undefined): boolean | void;
-        connectedCallback(): void;
         disconnectedCallback(): void;
         attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
         accessKey: string;

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

@@ -64,11 +64,11 @@ export declare const TimeSelectionPicker: <T_5 extends AbstractConstructor<{
         };
         _slottedHelperTextFeedbackType(): "none" | "helper";
         _getFeedbackTemplate(ctx: import("../../design-system/defineVividComponent").VividElementDefinitionContext): import("@microsoft/fast-element").ViewTemplate<any, any>;
+        connectedCallback(): void;
         specialHandling: boolean;
         _vividAriaBehaviour: import("../../aria/aria-mixin").VividAriaBehaviour;
         readonly $fastController: import("@microsoft/fast-element").Controller;
         $emit(type: string, detail?: any, options?: Omit<CustomEventInit<any>, "detail"> | undefined): boolean | void;
-        connectedCallback(): void;
         disconnectedCallback(): void;
         attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
         accessKey: string;
@@ -853,11 +853,11 @@ export declare const TimeSelectionPicker: <T_5 extends AbstractConstructor<{
         };
         _slottedHelperTextFeedbackType(): "none" | "helper";
         _getFeedbackTemplate(ctx: import("../../design-system/defineVividComponent").VividElementDefinitionContext): import("@microsoft/fast-element").ViewTemplate<any, any>;
+        connectedCallback(): void;
         specialHandling: boolean;
         _vividAriaBehaviour: import("../../aria/aria-mixin").VividAriaBehaviour;
         readonly $fastController: import("@microsoft/fast-element").Controller;
         $emit(type: string, detail?: any, options?: Omit<CustomEventInit<any>, "detail"> | undefined): boolean | void;
-        connectedCallback(): void;
         disconnectedCallback(): void;
         attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
         accessKey: string;

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

@@ -81,11 +81,11 @@ export declare const TimeSelectionPickerTemplate: (context: VividElementDefiniti
         };
         _slottedHelperTextFeedbackType(): "none" | "helper";
         _getFeedbackTemplate(ctx: VividElementDefinitionContext): import("@microsoft/fast-element").ViewTemplate<any, any>;
+        connectedCallback(): void;
         specialHandling: boolean;
         _vividAriaBehaviour: import("../../aria/aria-mixin").VividAriaBehaviour;
         readonly $fastController: import("@microsoft/fast-element").Controller;
         $emit(type: string, detail?: any, options?: Omit<CustomEventInit<any>, "detail"> | undefined): boolean | void;
-        connectedCallback(): void;
         disconnectedCallback(): void;
         attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
         accessKey: string;
@@ -851,11 +851,11 @@ export declare const TimeSelectionPickerTemplate: (context: VividElementDefiniti
         };
         _slottedHelperTextFeedbackType(): "none" | "helper";
         _getFeedbackTemplate(ctx: VividElementDefinitionContext): import("@microsoft/fast-element").ViewTemplate<any, any>;
+        connectedCallback(): void;
         specialHandling: boolean;
         _vividAriaBehaviour: import("../../aria/aria-mixin").VividAriaBehaviour;
         readonly $fastController: import("@microsoft/fast-element").Controller;
         $emit(type: string, detail?: any, options?: Omit<CustomEventInit<any>, "detail"> | undefined): boolean | void;
-        connectedCallback(): void;
         disconnectedCallback(): void;
         attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
         accessKey: string;

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

@@ -10,11 +10,11 @@ declare const PickerField_base: {
         };
         _slottedHelperTextFeedbackType(): "none" | "helper";
         _getFeedbackTemplate(ctx: import("../design-system/defineVividComponent").VividElementDefinitionContext): import("@microsoft/fast-element").ViewTemplate<any, any>;
+        connectedCallback(): void;
         specialHandling: boolean;
         _vividAriaBehaviour: import("../aria/aria-mixin").VividAriaBehaviour;
         readonly $fastController: import("@microsoft/fast-element").Controller;
         $emit(type: string, detail?: any, options?: Omit<CustomEventInit<any>, "detail"> | undefined): boolean | void;
-        connectedCallback(): void;
         disconnectedCallback(): void;
         attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
         accessKey: string;
@@ -1101,11 +1101,11 @@ declare const PickerField_base: {
 } & {
     new (...args: any[]): {
         _trappedFocus(event: KeyboardEvent, getFocusableEls: () => NodeListOf<HTMLElement>): boolean;
+        connectedCallback(): void;
         specialHandling: boolean;
         _vividAriaBehaviour: import("../aria/aria-mixin").VividAriaBehaviour;
         readonly $fastController: import("@microsoft/fast-element").Controller;
         $emit(type: string, detail?: any, options?: Omit<CustomEventInit<any>, "detail"> | undefined): boolean | void;
-        connectedCallback(): void;
         disconnectedCallback(): void;
         attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
         accessKey: string;
@@ -1438,11 +1438,11 @@ declare const PickerField_base: {
 } & {
     new (...args: any[]): {
         readonly locale: import("../localization/Locale").Locale;
+        connectedCallback(): void;
         specialHandling: boolean;
         _vividAriaBehaviour: import("../aria/aria-mixin").VividAriaBehaviour;
         readonly $fastController: import("@microsoft/fast-element").Controller;
         $emit(type: string, detail?: any, options?: Omit<CustomEventInit<any>, "detail"> | undefined): boolean | void;
-        connectedCallback(): void;
         disconnectedCallback(): void;
         attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
         accessKey: string;

package/shared/picker-field.template.cjs

@@ -213,7 +213,6 @@ class PickerField extends mixins.WithFeedback(
    * @internal
    */
   _onClearClick() {
-    this._closePopup();
     this.$emit("clear-click");
   }
 }
@@ -234,18 +233,18 @@ const PickerFieldTemplate = (context, popupContentTemplate, { withSeparator, pad
   return vividElement.html`
 		<div class='base' @keydown='${(x, { event }) => x._onBaseKeyDown(event)}'>
 			<${textFieldTag} id='text-field'
-											 ${ref.ref("_textFieldEl")}
-											 class='control'
-											 label='${(x) => x.label}'
-											 helper-text='${(x) => x.helperText}'
-											 error-text='${(x) => x.errorValidationMessage}'
-											 placeholder='${(x) => x._textFieldPlaceholder}'
-											 size='${(x) => x._textFieldSize}'
-											 current-value='${(x) => x._presentationValue}'
-											 ?disabled='${(x) => x.disabled}'
-											 ?readonly='${(x) => x.readOnly}'
-											 @input='${(x, c) => x._onTextFieldInput(c.event)}'
-											 @change='${(x) => x._onTextFieldChange()}'
+				${ref.ref("_textFieldEl")}
+				class='control'
+				label='${(x) => x.label}'
+				helper-text='${(x) => x.helperText}'
+				error-text='${(x) => x.errorValidationMessage}'
+				placeholder='${(x) => x._textFieldPlaceholder}'
+				size='${(x) => x._textFieldSize}'
+				current-value='${(x) => x._presentationValue}'
+				?disabled='${(x) => x.disabled}'
+				?readonly='${(x) => x.readOnly}'
+				@input='${(x, c) => x._onTextFieldInput(c.event)}'
+				@change='${(x) => x._onTextFieldChange()}'
 			>
 				<slot
 					slot='${(x) => x._helperTextSlottedContent?.length ? "helper-text" : void 0}'
@@ -267,6 +266,7 @@ const PickerFieldTemplate = (context, popupContentTemplate, { withSeparator, pad
 			<${popupTag}
 				?open='${(x) => x._popupOpen}'
 				:anchor='${(x) => x._textFieldEl}'
+				offset='${(x) => x._helperTextSlottedContent?.length || x.helperText || x.errorValidationMessage ? 8 : null}'
 				placement='bottom-start'
 				class='popup'>
 				<div class="${() => classNames.classNames("dialog", [

package/shared/picker-field.template.js

@@ -211,7 +211,6 @@ class PickerField extends WithFeedback(
    * @internal
    */
   _onClearClick() {
-    this._closePopup();
     this.$emit("clear-click");
   }
 }
@@ -232,18 +231,18 @@ const PickerFieldTemplate = (context, popupContentTemplate, { withSeparator, pad
   return html`
 		<div class='base' @keydown='${(x, { event }) => x._onBaseKeyDown(event)}'>
 			<${textFieldTag} id='text-field'
-											 ${ref("_textFieldEl")}
-											 class='control'
-											 label='${(x) => x.label}'
-											 helper-text='${(x) => x.helperText}'
-											 error-text='${(x) => x.errorValidationMessage}'
-											 placeholder='${(x) => x._textFieldPlaceholder}'
-											 size='${(x) => x._textFieldSize}'
-											 current-value='${(x) => x._presentationValue}'
-											 ?disabled='${(x) => x.disabled}'
-											 ?readonly='${(x) => x.readOnly}'
-											 @input='${(x, c) => x._onTextFieldInput(c.event)}'
-											 @change='${(x) => x._onTextFieldChange()}'
+				${ref("_textFieldEl")}
+				class='control'
+				label='${(x) => x.label}'
+				helper-text='${(x) => x.helperText}'
+				error-text='${(x) => x.errorValidationMessage}'
+				placeholder='${(x) => x._textFieldPlaceholder}'
+				size='${(x) => x._textFieldSize}'
+				current-value='${(x) => x._presentationValue}'
+				?disabled='${(x) => x.disabled}'
+				?readonly='${(x) => x.readOnly}'
+				@input='${(x, c) => x._onTextFieldInput(c.event)}'
+				@change='${(x) => x._onTextFieldChange()}'
 			>
 				<slot
 					slot='${(x) => x._helperTextSlottedContent?.length ? "helper-text" : void 0}'
@@ -265,6 +264,7 @@ const PickerFieldTemplate = (context, popupContentTemplate, { withSeparator, pad
 			<${popupTag}
 				?open='${(x) => x._popupOpen}'
 				:anchor='${(x) => x._textFieldEl}'
+				offset='${(x) => x._helperTextSlottedContent?.length || x.helperText || x.errorValidationMessage ? 8 : null}'
 				placement='bottom-start'
 				class='popup'>
 				<div class="${() => classNames("dialog", [

package/shared/vivid-element.cjs

@@ -2541,6 +2541,7 @@ const createRegisterFunction = (definition) => (prefix = "vwc") => {
   const registerComponent = (componentDefinition) => {
     const tag = prefixed(componentDefinition.name);
     let type = componentDefinition.type;
+    type.componentName = componentDefinition.name;
     if (registeredTags.has(tag)) {
       return;
     } else if (tagByType.has(type) && tagByType.get(type) !== tag) {
@@ -2733,7 +2734,16 @@ const ReplacedPropHandling = (Base) => {
 
 class VividElement extends AriaMixin(ReplacedPropHandling(FASTElement)) {
   static {
-    this.VIVID_VERSION = "4.25.0";
+    this.VIVID_VERSION = "4.27.0";
+  }
+  /**
+   * Add data-vvd-component attribute with component name globally,
+   * for referring to the elements in CSS, testing or debugging
+   */
+  connectedCallback() {
+    super.connectedCallback();
+    const name = this.constructor.componentName;
+    this.setAttribute("data-vvd-component", name);
   }
 }