@vonage/vivid 4.25.0 → 4.26.0

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

@@ -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;
@@ -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

@@ -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.26.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);
   }
 }
 

package/shared/vivid-element.js

@@ -2539,6 +2539,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) {
@@ -2731,7 +2732,16 @@ const ReplacedPropHandling = (Base) => {
 
 class VividElement extends AriaMixin(ReplacedPropHandling(FASTElement)) {
   static {
-    this.VIVID_VERSION = "4.25.0";
+    this.VIVID_VERSION = "4.26.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);
   }
 }
 

package/styles/core/all.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 02 Jun 2025 14:00:28 GMT
+ * Generated on Wed, 18 Jun 2025 09:28:14 GMT
  */
 .vvd-root {
   color-scheme: var(--vvd-color-scheme);

package/styles/core/theme.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 02 Jun 2025 14:00:28 GMT
+ * Generated on Wed, 18 Jun 2025 09:28:14 GMT
  */
 .vvd-root {
   color-scheme: var(--vvd-color-scheme);

package/styles/core/typography.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 02 Jun 2025 14:00:28 GMT
+ * Generated on Wed, 18 Jun 2025 09:28:14 GMT
  */
 .vvd-root:root {
   --vvd-size-font-scale-base: 1rem;

package/styles/tokens/theme-dark.css

@@ -1,18 +1,18 @@
 /**
  * Do not edit directly
- * Generated on Mon, 02 Jun 2025 14:00:28 GMT
+ * Generated on Wed, 18 Jun 2025 09:28:14 GMT
  */
 /**
  * Do not edit directly
- * Generated on Mon, 02 Jun 2025 14:00:28 GMT
+ * Generated on Wed, 18 Jun 2025 09:28:14 GMT
  */
 /**
  * Do not edit directly
- * Generated on Mon, 02 Jun 2025 14:00:28 GMT
+ * Generated on Wed, 18 Jun 2025 09:28:14 GMT
  */
 /**
  * Do not edit directly
- * Generated on Mon, 02 Jun 2025 14:00:28 GMT
+ * Generated on Wed, 18 Jun 2025 09:28:14 GMT
  */
 @property --vvd-size-density {
   syntax: "<integer>";

package/styles/tokens/theme-light.css

@@ -1,18 +1,18 @@
 /**
  * Do not edit directly
- * Generated on Mon, 02 Jun 2025 14:00:28 GMT
+ * Generated on Wed, 18 Jun 2025 09:28:14 GMT
  */
 /**
  * Do not edit directly
- * Generated on Mon, 02 Jun 2025 14:00:28 GMT
+ * Generated on Wed, 18 Jun 2025 09:28:14 GMT
  */
 /**
  * Do not edit directly
- * Generated on Mon, 02 Jun 2025 14:00:28 GMT
+ * Generated on Wed, 18 Jun 2025 09:28:14 GMT
  */
 /**
  * Do not edit directly
- * Generated on Mon, 02 Jun 2025 14:00:28 GMT
+ * Generated on Wed, 18 Jun 2025 09:28:14 GMT
  */
 @property --vvd-size-density {
   syntax: "<integer>";

package/styles/tokens/vivid-2-compat.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 02 Jun 2025 14:00:28 GMT
+ * Generated on Wed, 18 Jun 2025 09:28:14 GMT
  */
 .vvd-root, ::part(vvd-root),
 .vvd-theme-alternate, ::part(vvd-theme-alternate) {