@vonage/vivid 4.29.0 → 4.30.1

package/custom-elements.json

@@ -316,6 +316,22 @@
           "description": "",
           "name": "AccordionItem",
           "cssProperties": [
+            {
+              "name": "--vvd-accordion-item-accent-primary",
+              "default": "var(--vvd-color-canvas-text)"
+            },
+            {
+              "name": "--vvd-accordion-item-accent-primary-text",
+              "default": "var(--vvd-color-canvas)"
+            },
+            {
+              "name": "--vvd-accordion-item-accent-primary-increment",
+              "default": "var(--vvd-color-neutral-800)"
+            },
+            {
+              "name": "--vvd-accordion-item-accent-fierce",
+              "default": "var(--vvd-color-neutral-700)"
+            },
             {
               "name": "--vvd-accordion-item-accent-faint",
               "default": "var(--vvd-color-neutral-50)"
@@ -358,6 +374,15 @@
               "description": "Configures the https://www.w3.org/TR/wai-aria-1.1/#aria-level | level of the\nheading element.",
               "privacy": "public"
             },
+            {
+              "kind": "field",
+              "name": "appearance",
+              "type": {
+                "text": "AccordionItemAppearance | undefined"
+              },
+              "description": "The appearance the button should have.",
+              "privacy": "public"
+            },
             {
               "kind": "field",
               "name": "expanded",
@@ -493,6 +518,14 @@
               "description": "Configures the https://www.w3.org/TR/wai-aria-1.1/#aria-level | level of the\nheading element.",
               "fieldName": "headinglevel"
             },
+            {
+              "name": "appearance",
+              "type": {
+                "text": "AccordionItemAppearance | undefined"
+              },
+              "description": "The appearance the button should have.",
+              "fieldName": "appearance"
+            },
             {
               "name": "expanded",
               "type": {
@@ -4964,6 +4997,35 @@
           "vividComponent": {
             "public": true,
             "name": "button"
+          },
+          "vividTesting": {
+            "selectors": [
+              {
+                "name": "byLabel",
+                "args": [
+                  "byLabel"
+                ]
+              }
+            ],
+            "actions": [
+              {
+                "name": "click",
+                "args": [
+                  "click",
+                  "control"
+                ]
+              }
+            ],
+            "queries": [],
+            "refs": [
+              {
+                "name": "control",
+                "args": [
+                  "shadow",
+                  ".control"
+                ]
+              }
+            ]
           }
         }
       ],
@@ -6166,6 +6228,19 @@
           "vividComponent": {
             "public": true,
             "name": "card"
+          },
+          "vividTesting": {
+            "selectors": [],
+            "actions": [],
+            "queries": [
+              {
+                "name": "headline",
+                "args": [
+                  "headline"
+                ]
+              }
+            ],
+            "refs": []
           }
         }
       ],
@@ -6932,6 +7007,42 @@
                 "valueMapping": "event.currentTarget.checked"
               }
             ]
+          },
+          "vividTesting": {
+            "selectors": [
+              {
+                "name": "byTestId",
+                "args": [
+                  "byTestId"
+                ]
+              }
+            ],
+            "actions": [
+              {
+                "name": "check",
+                "args": [
+                  "check",
+                  "control"
+                ]
+              }
+            ],
+            "queries": [
+              {
+                "name": "checked",
+                "args": [
+                  "checked"
+                ]
+              }
+            ],
+            "refs": [
+              {
+                "name": "control",
+                "args": [
+                  "shadow",
+                  ".control"
+                ]
+              }
+            ]
           }
         }
       ],
@@ -12684,6 +12795,48 @@
                 "valueMapping": "event.currentTarget.open"
               }
             ]
+          },
+          "vividTesting": {
+            "selectors": [
+              {
+                "name": "byHeadline",
+                "args": [
+                  "byHeadline"
+                ]
+              }
+            ],
+            "actions": [
+              {
+                "name": "clickDismissButton",
+                "args": [
+                  "click",
+                  "dismissButton"
+                ]
+              }
+            ],
+            "queries": [
+              {
+                "name": "open",
+                "args": [
+                  "dialogOpen"
+                ]
+              },
+              {
+                "name": "headline",
+                "args": [
+                  "headline"
+                ]
+              }
+            ],
+            "refs": [
+              {
+                "name": "dismissButton",
+                "args": [
+                  "shadow",
+                  ".dismiss-button"
+                ]
+              }
+            ]
           }
         }
       ],
@@ -24482,6 +24635,26 @@
                 "valueMapping": "event.currentTarget.values"
               }
             ]
+          },
+          "vividTesting": {
+            "selectors": [],
+            "actions": [
+              {
+                "name": "toggleOptionsByValue",
+                "args": [
+                  "toggleOptionsByValue"
+                ]
+              }
+            ],
+            "queries": [
+              {
+                "name": "values",
+                "args": [
+                  "values"
+                ]
+              }
+            ],
+            "refs": []
           }
         }
       ],
@@ -25415,6 +25588,19 @@
                 "valueMapping": "event.currentTarget.value"
               }
             ]
+          },
+          "vividTesting": {
+            "selectors": [],
+            "actions": [
+              {
+                "name": "selectOptionByText",
+                "args": [
+                  "selectOptionByText"
+                ]
+              }
+            ],
+            "queries": [],
+            "refs": []
           }
         }
       ],
@@ -25569,6 +25755,16 @@
               "description": "The type of control the box should have: checkbox or radio.",
               "privacy": "public"
             },
+            {
+              "kind": "field",
+              "name": "controlPlacement",
+              "type": {
+                "text": "SelectableBoxControlPlacement"
+              },
+              "default": "'end-stacked'",
+              "description": "Defines where the control (checkbox or radio) should be located.",
+              "privacy": "public"
+            },
             {
               "kind": "field",
               "name": "tight",
@@ -25671,6 +25867,15 @@
               "description": "The type of control the box should have: checkbox or radio.",
               "fieldName": "controlType"
             },
+            {
+              "name": "control-placement",
+              "type": {
+                "text": "SelectableBoxControlPlacement"
+              },
+              "default": "'end-stacked'",
+              "description": "Defines where the control (checkbox or radio) should be located.",
+              "fieldName": "controlPlacement"
+            },
             {
               "name": "tight",
               "type": {
@@ -26814,6 +27019,10 @@
               "name": "--vvd-split-button-cta-faint",
               "default": "var(--vvd-color-cta-50)"
             },
+            {
+              "name": "--vvd-split-button-cta-fierce-primary",
+              "default": "var(--vvd-color-cta-700)"
+            },
             {
               "name": "--vvd-split-button-success-primary",
               "default": "var(--vvd-color-success-500)"
@@ -26846,6 +27055,10 @@
               "name": "--vvd-split-button-success-faint",
               "default": "var(--vvd-color-success-50)"
             },
+            {
+              "name": "--vvd-split-button-success-fierce-primary",
+              "default": "var(--vvd-color-success-700)"
+            },
             {
               "name": "--vvd-split-button-alert-primary",
               "default": "var(--vvd-color-alert-500)"
@@ -26878,6 +27091,10 @@
               "name": "--vvd-split-button-alert-faint",
               "default": "var(--vvd-color-alert-50)"
             },
+            {
+              "name": "--vvd-split-button-alert-fierce-primary",
+              "default": "var(--vvd-color-alert-700)"
+            },
             {
               "name": "--vvd-split-button-announcement-primary",
               "default": "var(--vvd-color-announcement-500)"
@@ -26910,6 +27127,10 @@
               "name": "--vvd-split-button-announcement-faint",
               "default": "var(--vvd-color-announcement-50)"
             },
+            {
+              "name": "--vvd-split-button-announcement-fierce-primary",
+              "default": "var(--vvd-color-announcement-700)"
+            },
             {
               "name": "--vvd-split-button-accent-primary",
               "default": "var(--vvd-color-canvas-text)"
@@ -26941,6 +27162,10 @@
             {
               "name": "--vvd-split-button-accent-faint",
               "default": "var(--vvd-color-neutral-50)"
+            },
+            {
+              "name": "--vvd-split-button-accent-fierce-primary",
+              "default": "var(--vvd-color-canvas-text)"
             }
           ],
           "slots": [
@@ -28903,13 +29128,21 @@
           "name": "Tag",
           "cssProperties": [
             {
-              "name": "--vvd-tag-cta-contrast",
-              "default": "var(--vvd-color-cta-800)"
+              "name": "--vvd-tag-cta-primary",
+              "default": "var(--vvd-color-cta-500)"
+            },
+            {
+              "name": "--vvd-tag-cta-primary-text",
+              "default": "var(--vvd-color-canvas)"
             },
             {
               "name": "--vvd-tag-cta-soft",
               "default": "var(--vvd-color-cta-100)"
             },
+            {
+              "name": "--vvd-tag-cta-contrast",
+              "default": "var(--vvd-color-cta-800)"
+            },
             {
               "name": "--vvd-tag-cta-pale",
               "default": "var(--vvd-color-cta-300)"
@@ -28918,6 +29151,10 @@
               "name": "--vvd-tag-cta-fierce",
               "default": "var(--vvd-color-cta-700)"
             },
+            {
+              "name": "--vvd-tag-cta-firm",
+              "default": "var(--vvd-color-cta-600)"
+            },
             {
               "name": "--vvd-tag-cta-firm-all",
               "default": "var(--vvd-color-cta-600)"
@@ -28931,13 +29168,21 @@
               "default": "var(--vvd-color-cta-200)"
             },
             {
-              "name": "--vvd-tag-accent-contrast",
-              "default": "var(--vvd-color-neutral-800)"
+              "name": "--vvd-tag-accent-primary",
+              "default": "var(--vvd-color-canvas-text)"
+            },
+            {
+              "name": "--vvd-tag-accent-primary-text",
+              "default": "var(--vvd-color-canvas)"
             },
             {
               "name": "--vvd-tag-accent-soft",
               "default": "var(--vvd-color-neutral-100)"
             },
+            {
+              "name": "--vvd-tag-accent-contrast",
+              "default": "var(--vvd-color-neutral-800)"
+            },
             {
               "name": "--vvd-tag-accent-pale",
               "default": "var(--vvd-color-neutral-300)"
@@ -28946,6 +29191,10 @@
               "name": "--vvd-tag-accent-fierce",
               "default": "var(--vvd-color-neutral-700)"
             },
+            {
+              "name": "--vvd-tag-accent-firm",
+              "default": "var(--vvd-color-canvas-text)"
+            },
             {
               "name": "--vvd-tag-accent-firm-all",
               "default": "var(--vvd-color-neutral-600)"
@@ -30291,6 +30540,28 @@
                 "valueMapping": "event.currentTarget.value"
               }
             ]
+          },
+          "vividTesting": {
+            "selectors": [],
+            "actions": [
+              {
+                "name": "fill",
+                "args": [
+                  "fill",
+                  "control"
+                ]
+              }
+            ],
+            "queries": [],
+            "refs": [
+              {
+                "name": "control",
+                "args": [
+                  "shadow",
+                  ".control"
+                ]
+              }
+            ]
           }
         }
       ],
@@ -31248,6 +31519,29 @@
                 "valueMapping": "event.currentTarget.value"
               }
             ]
+          },
+          "vividTesting": {
+            "selectors": [],
+            "actions": [
+              {
+                "name": "fill",
+                "args": [
+                  "fill",
+                  "control"
+                ]
+              }
+            ],
+            "queries": [],
+            "refs": [
+              {
+                "name": "control",
+                "args": [
+                  "light",
+                  "input[slot=\"_control\"]",
+                  "HTMLInputElement"
+                ]
+              }
+            ]
           }
         }
       ],
@@ -32663,6 +32957,26 @@
           "vividComponent": {
             "public": true,
             "name": "tooltip"
+          },
+          "vividTesting": {
+            "selectors": [
+              {
+                "name": "byText",
+                "args": [
+                  "byText"
+                ]
+              }
+            ],
+            "actions": [],
+            "queries": [
+              {
+                "name": "open",
+                "args": [
+                  "open"
+                ]
+              }
+            ],
+            "refs": []
           }
         }
       ],
@@ -35229,7 +35543,20 @@
               "default": "false",
               "fieldName": "required"
             }
-          ]
+          ],
+          "vividTesting": {
+            "selectors": [],
+            "actions": [],
+            "queries": [
+              {
+                "name": "value",
+                "args": [
+                  "value"
+                ]
+              }
+            ],
+            "refs": []
+          }
         },
         {
           "kind": "mixin",
@@ -36009,6 +36336,19 @@
             "name": "FASTElement",
             "package": "@microsoft/fast-element"
           },
+          "vividTesting": {
+            "selectors": [],
+            "actions": [
+              {
+                "name": "hover",
+                "args": [
+                  "hover"
+                ]
+              }
+            ],
+            "queries": [],
+            "refs": []
+          },
           "customElement": true
         }
       ],
@@ -36707,7 +37047,27 @@
               "description": "The label for the form element.",
               "fieldName": "label"
             }
-          ]
+          ],
+          "vividTesting": {
+            "selectors": [
+              {
+                "name": "byLabel",
+                "args": [
+                  "byLabel"
+                ]
+              }
+            ],
+            "actions": [],
+            "queries": [
+              {
+                "name": "visibleError",
+                "args": [
+                  "visibleError"
+                ]
+              }
+            ],
+            "refs": []
+          }
         }
       ],
       "exports": [

package/lib/accordion-item/accordion-item.d.ts

@@ -1,7 +1,8 @@
-import type { Size } from '../enums.js';
+import type { Appearance, Size } from '../enums';
 import { VividElement } from '../../shared/foundation/vivid-element/vivid-element';
 import type { ExtractFromEnum } from '../../shared/utils/enums';
 export type AccordionItemSize = ExtractFromEnum<Size, Size.Condensed | Size.Normal>;
+export type AccordionItemAppearance = ExtractFromEnum<Appearance, Appearance.Ghost | Appearance.Filled | Appearance.GhostLight>;
 declare const AccordionItem_base: {
     new (...args: any[]): {
         iconTrailing: boolean;
@@ -344,6 +345,7 @@ declare const AccordionItem_base: {
 } & typeof VividElement;
 export declare class AccordionItem extends AccordionItem_base {
     headinglevel: 1 | 2 | 3 | 4 | 5 | 6;
+    appearance?: AccordionItemAppearance;
     expanded: boolean;
     id: string;
     heading?: string;

package/lib/badge/badge.d.ts

@@ -1,7 +1,7 @@
 import type { Appearance, Connotation, Shape, Size } from '../enums.js';
 import { VividElement } from '../../shared/foundation/vivid-element/vivid-element';
 import type { ExtractFromEnum } from '../../shared/utils/enums';
-export type BadgeConnotation = ExtractFromEnum<Connotation, Connotation.Accent | Connotation.CTA | Connotation.Success | Connotation.Alert | Connotation.Warning | Connotation.Information>;
+export type BadgeConnotation = ExtractFromEnum<Connotation, Connotation.Accent | Connotation.CTA | Connotation.Success | Connotation.Alert | Connotation.Warning | Connotation.Information | Connotation.Announcement>;
 export type BadgeAppearance = ExtractFromEnum<Appearance, Appearance.Filled | Appearance.Duotone | Appearance.Subtle | Appearance.SubtleLight>;
 export type BadgeShape = ExtractFromEnum<Shape, Shape.Rounded | Shape.Pill>;
 export type BadgeSize = ExtractFromEnum<Size, Size.Normal | Size.Expanded>;

package/lib/date-picker/date-picker.d.ts

@@ -812,7 +812,7 @@ declare const DatePicker_base: (abstract new (...args: any[]) => {
     _toPresentationValue(value: string): string;
     _parsePresentationValue(presentationValue: string): string;
     _isInternalValueUpdate: boolean;
-    _updateValueDueToUserInteraction(newValue: string): void;
+    _updateValueDueToUserInteraction(newValue: string, isIntermediateUpdate: boolean): void;
     _isPresentationValueInvalid(): boolean;
 }) & (abstract new (...args: any[]) => {
     _isValidValue(value: string): boolean;
@@ -821,7 +821,7 @@ declare const DatePicker_base: (abstract new (...args: any[]) => {
     _isInternalValueUpdate: boolean;
     valueChanged(previous: string, next: string): void;
     _updatePresentationValue(): void;
-    _updateValueDueToUserInteraction(newValue: string): void;
+    _updateValueDueToUserInteraction(newValue: string, isIntermediateUpdate: boolean): void;
     _onTextFieldChange(): void;
     _onTextFieldInput(event: Event): void;
     _isPresentationValueInvalid(): boolean;

package/lib/date-time-picker/date-time-picker.d.ts

@@ -28,7 +28,7 @@ declare const DateTimePicker_base: (abstract new (...args: any[]) => {
     _isInternalValueUpdate: boolean;
     valueChanged: ((previous: string, next: string) => void) & ((_previous: string, _next: string) => void) & ((_previous: string, _next: string) => void);
     _updatePresentationValue: (() => void) & (() => void);
-    _updateValueDueToUserInteraction(newValue: string): void;
+    _updateValueDueToUserInteraction(newValue: string, isIntermediateUpdate: boolean): void;
     _onTextFieldChange: (() => void) & (() => void);
     _onTextFieldInput: ((event: Event) => void) & ((event: Event) => void);
     _isPresentationValueInvalid(): boolean;
@@ -1602,7 +1602,7 @@ declare const DateTimePicker_base: (abstract new (...args: any[]) => {
     _toPresentationValue(value: string): string;
     _parsePresentationValue(presentationValue: string): string;
     _isInternalValueUpdate: boolean;
-    _updateValueDueToUserInteraction(newValue: string): void;
+    _updateValueDueToUserInteraction(newValue: string, isIntermediateUpdate: boolean): void;
     _isPresentationValueInvalid(): boolean;
 }) & (abstract new (...args: any[]) => {
     _isValidValue(value: string): boolean;
@@ -1611,7 +1611,7 @@ declare const DateTimePicker_base: (abstract new (...args: any[]) => {
     _isInternalValueUpdate: boolean;
     valueChanged(previous: string, next: string): void;
     _updatePresentationValue(): void;
-    _updateValueDueToUserInteraction(newValue: string): void;
+    _updateValueDueToUserInteraction(newValue: string, isIntermediateUpdate: boolean): void;
     _onTextFieldChange(): void;
     _onTextFieldInput(event: Event): void;
     _isPresentationValueInvalid(): boolean;

package/lib/selectable-box/selectable-box.d.ts

@@ -2,6 +2,7 @@ import type { Connotation } from '../enums.js';
 import { VividElement } from '../../shared/foundation/vivid-element/vivid-element';
 export type SelectableBoxConnotation = Connotation.Accent | Connotation.CTA;
 export type SelectableBoxControlType = 'checkbox' | 'radio';
+export type SelectableBoxControlPlacement = 'start' | 'start-stacked' | 'end' | 'end-stacked';
 declare const SelectableBox_base: {
     new (...args: any[]): {
         _vividAriaBehaviour: "delegate";
@@ -345,6 +346,7 @@ export declare class SelectableBox extends SelectableBox_base {
     clickableBox: boolean;
     connotation?: SelectableBoxConnotation;
     controlType?: SelectableBoxControlType;
+    controlPlacement: SelectableBoxControlPlacement;
     tight: boolean;
 }
 export {};

package/lib/split-button/split-button.d.ts

@@ -2,7 +2,7 @@ import type { Appearance, Connotation, Shape, Size } from '../enums.js';
 import { VividElement } from '../../shared/foundation/vivid-element/vivid-element';
 import type { ExtractFromEnum } from '../../shared/utils/enums';
 export type SplitButtonConnotation = ExtractFromEnum<Connotation, Connotation.Accent | Connotation.Announcement | Connotation.CTA | Connotation.Success | Connotation.Alert>;
-export type SplitButtonAppearance = ExtractFromEnum<Appearance, Appearance.Filled | Appearance.Outlined | Appearance.Ghost>;
+export type SplitButtonAppearance = ExtractFromEnum<Appearance, Appearance.Filled | Appearance.Outlined | Appearance.Ghost | Appearance.OutlinedLight>;
 export type SplitButtonShape = ExtractFromEnum<Shape, Shape.Rounded | Shape.Pill>;
 export type SplitButtonSize = ExtractFromEnum<Size, Size.SuperCondensed | Size.Condensed | Size.Normal | Size.Expanded>;
 declare const SplitButton_base: {

package/lib/tag/tag.d.ts

@@ -2,7 +2,7 @@ import type { Appearance, Connotation, Shape } from '../enums.js';
 import { VividElement } from '../../shared/foundation/vivid-element/vivid-element';
 import type { ExtractFromEnum } from '../../shared/utils/enums';
 export type TagConnotation = ExtractFromEnum<Connotation, Connotation.Accent | Connotation.CTA>;
-export type TagAppearance = ExtractFromEnum<Appearance, Appearance.Subtle | Appearance.Duotone>;
+export type TagAppearance = ExtractFromEnum<Appearance, Appearance.Subtle | Appearance.Duotone | Appearance.SubtleLight>;
 export type TagShape = ExtractFromEnum<Shape, Shape.Rounded | Shape.Pill>;
 declare const Tag_base: {
     new (...args: any[]): {

package/lib/time-picker/time-picker.d.ts

@@ -30,7 +30,7 @@ declare const TimePicker_base: (abstract new (...args: any[]) => {
     _isInternalValueUpdate: boolean;
     valueChanged: ((previous: string, next: string) => void) & ((_previous: string, _next: string) => void) & ((_previous: string, _next: string) => void);
     _updatePresentationValue: (() => void) & (() => void);
-    _updateValueDueToUserInteraction(newValue: string): void;
+    _updateValueDueToUserInteraction(newValue: string, isIntermediateUpdate: boolean): void;
     _onTextFieldChange: (() => void) & (() => void);
     _onTextFieldInput: ((event: Event) => void) & ((event: Event) => void);
     _isPresentationValueInvalid(): boolean;
@@ -798,7 +798,7 @@ declare const TimePicker_base: (abstract new (...args: any[]) => {
     _isInternalValueUpdate: boolean;
     valueChanged(previous: string, next: string): void;
     _updatePresentationValue(): void;
-    _updateValueDueToUserInteraction(newValue: string): void;
+    _updateValueDueToUserInteraction(newValue: string, isIntermediateUpdate: boolean): void;
     _onTextFieldChange(): void;
     _onTextFieldInput(event: Event): void;
     _isPresentationValueInvalid(): boolean;