@vonage/vivid 4.28.0 → 4.30.0

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": {
@@ -1371,14 +1404,14 @@
               "description": "Indicates the audio-player's src.",
               "privacy": "public"
             },
-            {
-              "kind": "field",
-              "name": "playbackRate"
-            },
             {
               "kind": "method",
               "name": "srcChanged"
             },
+            {
+              "kind": "field",
+              "name": "playbackRate"
+            },
             {
               "kind": "field",
               "name": "disabled",
@@ -1425,6 +1458,27 @@
                 "text": "boolean"
               }
             },
+            {
+              "kind": "field",
+              "name": "#audioBuffer",
+              "privacy": "private",
+              "type": {
+                "text": "AudioBuffer | undefined"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "#fetchAbortController",
+              "privacy": "private",
+              "type": {
+                "text": "AbortController | undefined"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "#fetchAndCacheAudioBuffer",
+              "async": true
+            },
             {
               "kind": "field",
               "name": "duration"
@@ -1448,6 +1502,25 @@
               "privacy": "private",
               "default": "new Audio()"
             },
+            {
+              "kind": "field",
+              "name": "#isProgrammaticSliderUpdate",
+              "privacy": "private",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "durationFallback",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Enables fallback logic to fetch and decode audio buffer for duration when metadata is missing.",
+              "privacy": "public"
+            },
             {
               "kind": "method",
               "name": "play"
@@ -1471,15 +1544,6 @@
               "name": "#pausedChanged",
               "privacy": "private"
             },
-            {
-              "kind": "field",
-              "name": "#currentTimeChanged",
-              "privacy": "private",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false"
-            },
             {
               "kind": "field",
               "name": "#updateProgress",
@@ -1626,6 +1690,15 @@
               "default": "null",
               "description": "Sets the available playback rates. When an empty string, no choices will be available",
               "fieldName": "playbackRates"
+            },
+            {
+              "name": "duration-fallback",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Enables fallback logic to fetch and decode audio buffer for duration when metadata is missing.",
+              "fieldName": "durationFallback"
             }
           ],
           "mixins": [
@@ -4924,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"
+                ]
+              }
+            ]
           }
         }
       ],
@@ -6126,6 +6228,19 @@
           "vividComponent": {
             "public": true,
             "name": "card"
+          },
+          "vividTesting": {
+            "selectors": [],
+            "actions": [],
+            "queries": [
+              {
+                "name": "headline",
+                "args": [
+                  "headline"
+                ]
+              }
+            ],
+            "refs": []
           }
         }
       ],
@@ -6892,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"
+                ]
+              }
+            ]
           }
         }
       ],
@@ -8871,6 +9022,15 @@
               "description": "The index of the column that will receive focus the next time the\ngrid is focused. This value changes as focus moves to different rows\nwithin the grid.  Changing this value when focus is already within\nthe grid moves focus to the specified column.",
               "privacy": "public"
             },
+            {
+              "kind": "field",
+              "name": "fixedColumns",
+              "type": {
+                "text": "number | undefined"
+              },
+              "description": "Number of columns to be fixed when scrolling horizontally",
+              "privacy": "public"
+            },
             {
               "kind": "field",
               "name": "rowElementTag",
@@ -8924,6 +9084,14 @@
               "privacy": "private",
               "default": "false"
             },
+            {
+              "kind": "field",
+              "name": "resizeObserver",
+              "type": {
+                "text": "ResizeObserver | undefined"
+              },
+              "privacy": "private"
+            },
             {
               "kind": "field",
               "name": "observer",
@@ -9153,6 +9321,14 @@
               "description": "String that gets applied to the css gridTemplateColumns attribute of child rows",
               "fieldName": "gridTemplateColumns"
             },
+            {
+              "name": "fixed-columns",
+              "type": {
+                "text": "number | undefined"
+              },
+              "description": "Number of columns to be fixed when scrolling horizontally",
+              "fieldName": "fixedColumns"
+            },
             {
               "name": "selection-mode",
               "type": {
@@ -12619,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"
+                ]
+              }
+            ]
           }
         }
       ],
@@ -12656,6 +12874,14 @@
         }
       ],
       "exports": [
+        {
+          "kind": "js",
+          "name": "DividerAppearance",
+          "declaration": {
+            "name": "DividerAppearance",
+            "module": "./divider"
+          }
+        },
         {
           "kind": "js",
           "name": "registerDivider",
@@ -12691,6 +12917,16 @@
           "kind": "class",
           "description": "",
           "name": "Divider",
+          "cssProperties": [
+            {
+              "name": "--vvd-divider-accent-soft",
+              "default": "var(--vvd-color-neutral-100)"
+            },
+            {
+              "name": "--vvd-divider-accent-dim",
+              "default": "var(--vvd-color-neutral-200)"
+            }
+          ],
           "members": [
             {
               "kind": "field",
@@ -12710,16 +12946,25 @@
               "description": "The orientation of the divider.",
               "privacy": "public"
             },
+            {
+              "kind": "field",
+              "name": "appearance",
+              "type": {
+                "text": "DividerAppearance | undefined"
+              },
+              "description": "The appearance of the divider.",
+              "privacy": "public"
+            },
             {
               "kind": "field",
               "name": "_vividAriaBehaviour",
-              "default": "'delegate'",
+              "default": "'host'",
               "type": {
-                "text": "'delegate'"
+                "text": "'host'"
               },
               "inheritedFrom": {
-                "name": "DelegatesAria",
-                "module": "src/shared/aria/delegates-aria.ts"
+                "name": "HostSemantics",
+                "module": "src/shared/aria/host-semantics.ts"
               }
             },
             {
@@ -12766,12 +13011,20 @@
               },
               "description": "The orientation of the divider.",
               "fieldName": "orientation"
+            },
+            {
+              "name": "appearance",
+              "type": {
+                "text": "DividerAppearance | undefined"
+              },
+              "description": "The appearance of the divider.",
+              "fieldName": "appearance"
             }
           ],
           "mixins": [
             {
-              "name": "DelegatesAria",
-              "module": "/src/shared/aria/delegates-aria"
+              "name": "HostSemantics",
+              "module": "/src/shared/aria/host-semantics"
             }
           ],
           "superclass": {
@@ -19128,22 +19381,7 @@
             },
             {
               "kind": "field",
-              "name": "selectedAttribute",
-              "type": {
-                "text": "boolean"
-              },
-              "description": "The selected attribute value. This sets the initial selected value.",
-              "privacy": "public"
-            },
-            {
-              "kind": "method",
-              "name": "selectedAttributeChanged",
-              "privacy": "protected",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              }
+              "name": "selectedAttribute"
             },
             {
               "kind": "field",
@@ -19166,30 +19404,18 @@
             },
             {
               "kind": "field",
-              "name": "dirtyValue",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Track whether the value has been changed from the initial value"
-            },
-            {
-              "kind": "field",
-              "name": "initialValue",
+              "name": "value",
               "type": {
                 "text": "string"
               },
-              "privacy": "protected",
-              "description": "The initial value of the option. This value sets the `value` property\nonly when the `value` property has not been explicitly set."
+              "default": "''",
+              "description": "The value of the option.",
+              "privacy": "public"
             },
             {
               "kind": "method",
-              "name": "initialValueChanged",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              }
+              "name": "valueChanged",
+              "privacy": "protected"
             },
             {
               "kind": "field",
@@ -19220,13 +19446,6 @@
               "kind": "field",
               "name": "text"
             },
-            {
-              "kind": "field",
-              "name": "value",
-              "type": {
-                "text": "string"
-              }
-            },
             {
               "kind": "field",
               "name": "form",
@@ -19260,7 +19479,7 @@
             {
               "kind": "field",
               "name": "proxy",
-              "default": "new Option(\n\t\t\tthis.text,\n\t\t\t// @ts-expect-error Propery is used before it is assigned\n\t\t\tthis.initialValue,\n\t\t\tthis.defaultSelected,\n\t\t\tthis.selected\n\t\t)",
+              "default": "new Option(\n\t\t\tthis.text,\n\t\t\tthis.value,\n\t\t\tthis.defaultSelected,\n\t\t\tthis.selected\n\t\t)",
               "description": ""
             },
             {
@@ -19331,6 +19550,15 @@
             }
           ],
           "attributes": [
+            {
+              "name": "selected",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "The defaultSelected state of the option.",
+              "fieldName": "defaultSelected"
+            },
             {
               "name": "disabled",
               "type": {
@@ -19340,20 +19568,21 @@
               "fieldName": "disabled"
             },
             {
-              "name": "selected",
+              "name": "current-selected",
               "type": {
                 "text": "boolean"
               },
-              "description": "The selected attribute value. This sets the initial selected value.",
-              "fieldName": "selectedAttribute"
+              "description": "The checked state of the control.",
+              "fieldName": "selected"
             },
             {
               "name": "value",
               "type": {
                 "text": "string"
               },
-              "description": "The initial value of the option. This value sets the `value` property\nonly when the `value` property has not been explicitly set.",
-              "fieldName": "initialValue"
+              "default": "''",
+              "description": "The value of the option.",
+              "fieldName": "value"
             },
             {
               "name": "label",
@@ -24406,6 +24635,26 @@
                 "valueMapping": "event.currentTarget.values"
               }
             ]
+          },
+          "vividTesting": {
+            "selectors": [],
+            "actions": [
+              {
+                "name": "toggleOptionsByValue",
+                "args": [
+                  "toggleOptionsByValue"
+                ]
+              }
+            ],
+            "queries": [
+              {
+                "name": "values",
+                "args": [
+                  "values"
+                ]
+              }
+            ],
+            "refs": []
           }
         }
       ],
@@ -25339,6 +25588,19 @@
                 "valueMapping": "event.currentTarget.value"
               }
             ]
+          },
+          "vividTesting": {
+            "selectors": [],
+            "actions": [
+              {
+                "name": "selectOptionByText",
+                "args": [
+                  "selectOptionByText"
+                ]
+              }
+            ],
+            "queries": [],
+            "refs": []
           }
         }
       ],
@@ -25493,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",
@@ -25595,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": {
@@ -26738,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)"
@@ -26770,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)"
@@ -26802,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)"
@@ -26834,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)"
@@ -26865,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": [
@@ -28827,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)"
@@ -28842,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)"
@@ -28855,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)"
@@ -28870,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)"
@@ -30215,6 +30540,28 @@
                 "valueMapping": "event.currentTarget.value"
               }
             ]
+          },
+          "vividTesting": {
+            "selectors": [],
+            "actions": [
+              {
+                "name": "fill",
+                "args": [
+                  "fill",
+                  "control"
+                ]
+              }
+            ],
+            "queries": [],
+            "refs": [
+              {
+                "name": "control",
+                "args": [
+                  "shadow",
+                  ".control"
+                ]
+              }
+            ]
           }
         }
       ],
@@ -31172,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"
+                ]
+              }
+            ]
           }
         }
       ],
@@ -32444,6 +32814,10 @@
               "name": "#hide",
               "privacy": "private"
             },
+            {
+              "kind": "method",
+              "name": "#updateAnchorExpanded"
+            },
             {
               "kind": "method",
               "name": "#updateListeners"
@@ -32583,6 +32957,26 @@
           "vividComponent": {
             "public": true,
             "name": "tooltip"
+          },
+          "vividTesting": {
+            "selectors": [
+              {
+                "name": "byText",
+                "args": [
+                  "byText"
+                ]
+              }
+            ],
+            "actions": [],
+            "queries": [
+              {
+                "name": "open",
+                "args": [
+                  "open"
+                ]
+              }
+            ],
+            "refs": []
           }
         }
       ],
@@ -33771,13 +34165,30 @@
       "kind": "javascript-module",
       "path": "src/lib/rich-text-editor/facades/prose-mirror-vivid.schema.ts",
       "declarations": [
+        {
+          "kind": "function",
+          "name": "dynamicSchema",
+          "parameters": [
+            {
+              "name": "prefix",
+              "default": "'vwc'"
+            }
+          ]
+        },
         {
           "kind": "variable",
-          "name": "extendedSchema",
-          "default": "new Schema({\n\tnodes: basicSchema.spec.nodes,\n\tmarks: {\n\t\t...basicSchema.spec.marks.toObject(),\n\t\t...customMarks,\n\t},\n})"
+          "name": "extendedSchema"
         }
       ],
       "exports": [
+        {
+          "kind": "js",
+          "name": "dynamicSchema",
+          "declaration": {
+            "name": "dynamicSchema",
+            "module": "src/lib/rich-text-editor/facades/prose-mirror-vivid.schema.ts"
+          }
+        },
         {
           "kind": "js",
           "name": "default",
@@ -33848,6 +34259,15 @@
               "name": "#handleChangeEvent",
               "privacy": "private"
             },
+            {
+              "kind": "field",
+              "name": "#vwcPrefix",
+              "privacy": "private",
+              "type": {
+                "text": "string"
+              },
+              "default": "'vwc'"
+            },
             {
               "kind": "method",
               "name": "init",
@@ -33857,6 +34277,10 @@
                   "type": {
                     "text": "HTMLElement"
                   }
+                },
+                {
+                  "name": "vwcPrefix",
+                  "default": "'vwc'"
                 }
               ]
             },
@@ -34008,7 +34432,7 @@
               },
               "parameters": [
                 {
-                  "name": "{\n\t\tfile,\n\t\tposition,\n\t\talt,\n\t}",
+                  "name": "{\n\t\tfile,\n\t\tposition,\n\t\talt,\n\t\terror,\n\t}",
                   "type": {
                     "text": "RichTextEditorInlineImageProps"
                   }
@@ -34046,6 +34470,157 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/lib/rich-text-editor/image-placeholder/definition.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "imagePlaceholderDefinition"
+        },
+        {
+          "kind": "variable",
+          "name": "registerImagePlaceholder",
+          "description": "Registers the menubar element with the design system.",
+          "parameters": [
+            {
+              "description": "the prefix to use for the component name",
+              "name": "prefix"
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "imagePlaceholderDefinition",
+          "declaration": {
+            "name": "imagePlaceholderDefinition",
+            "module": "src/lib/rich-text-editor/image-placeholder/definition.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "registerImagePlaceholder",
+          "declaration": {
+            "name": "registerImagePlaceholder",
+            "module": "src/lib/rich-text-editor/image-placeholder/definition.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/lib/rich-text-editor/image-placeholder/image-placeholder.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "ImagePlaceholder",
+          "members": [
+            {
+              "kind": "field",
+              "name": "fileName",
+              "type": {
+                "text": "string | undefined"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "string | undefined"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "errorMessage",
+              "type": {
+                "text": "string | undefined"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "icon",
+              "type": {
+                "text": "string | undefined"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "VIVID_VERSION",
+              "static": true,
+              "default": "__PACKAGE_VERSION__",
+              "description": "The current version of the Vivid library, which is useful for debugging.\nIt can be accessed from any Vivid element via `<el>.constructor.VIVID_VERSION`.",
+              "type": {
+                "text": "string"
+              },
+              "inheritedFrom": {
+                "name": "VividElement",
+                "module": "src/shared/foundation/vivid-element/vivid-element.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "componentName",
+              "type": {
+                "text": "string"
+              },
+              "static": true,
+              "description": "Core component name, without prefix",
+              "inheritedFrom": {
+                "name": "VividElement",
+                "module": "src/shared/foundation/vivid-element/vivid-element.ts"
+              }
+            }
+          ],
+          "attributes": [
+            {
+              "name": "file-name",
+              "type": {
+                "text": "string | undefined"
+              },
+              "fieldName": "fileName"
+            },
+            {
+              "name": "size",
+              "type": {
+                "text": "string | undefined"
+              },
+              "fieldName": "size"
+            },
+            {
+              "name": "error-message",
+              "type": {
+                "text": "string | undefined"
+              },
+              "fieldName": "errorMessage"
+            },
+            {
+              "name": "icon",
+              "type": {
+                "text": "string | undefined"
+              },
+              "fieldName": "icon"
+            }
+          ],
+          "superclass": {
+            "name": "VividElement",
+            "module": "/src/shared/foundation/vivid-element/vivid-element"
+          }
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "ImagePlaceholder",
+          "declaration": {
+            "name": "ImagePlaceholder",
+            "module": "src/lib/rich-text-editor/image-placeholder/image-placeholder.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/lib/rich-text-editor/menubar/consts.ts",
@@ -34070,9 +34645,9 @@
           "kind": "variable",
           "name": "MENU_BAR_ITEMS",
           "type": {
-            "text": "{\n\t[key: string]: {\n\t\tregisterStateProperty?: (menuBar: MenuBar) => void;\n\t\trender: (context: VividElementDefinitionContext) => ViewTemplate<any, any>;\n\t};\n}"
+            "text": "{\n\t[key: string]: {\n\t\tregisterStateProperty?: (menubar: Menubar) => void;\n\t\trender: (context: VividElementDefinitionContext) => ViewTemplate<any, any>;\n\t};\n}"
           },
-          "default": "{\n\ttextBlock: {\n\t\tregisterStateProperty: function (menuBar: MenuBar) {\n\t\t\tmenuBar.addEventListener('text-styles-changed', textBlockEventHandler);\n\t\t},\n\t\trender: function (context) {\n\t\t\tconst selectTag = context.tagFor(Select);\n\t\t\tconst optionTag = context.tagFor(ListboxOption);\n\t\t\tconst tooltipTag = context.tagFor(Tooltip);\n\n\t\t\treturn html`\n\t\t<${tooltipTag} text=\"${(_, { parent }) =>\n\t\t\t\tparent.locale.richTextEditor.textBlockType}\" placement=\"top\">\n\t\t\t<${selectTag}\n                scale=\"condensed\"\n                shape=\"rounded\"\n                appearance=\"ghost\"\n\t\t\t\tslot=\"anchor\"\n\t\t\t\ttrigger=\"auto\"\n\t\t\t\tid=\"text-block\"\n\t\t\t\taria-label=\"Text Block\"\n\t\t\t\tplacement=\"bottom-end\"\n\t\t\t\tvalue=\"${(_, { parent }) => parent.textBlockType}\"\n\t\t\t\t@change=\"${(_, { parent, event }) =>\n\t\t\t\t\tnotifyMenuBarChange(\n\t\t\t\t\t\tparent,\n\t\t\t\t\t\t'text-block-selected',\n\t\t\t\t\t\t(event.target as HTMLSelectElement).value\n\t\t\t\t\t)}\"\n\t\t\t>\n\t\t\t\t<${optionTag}\n\t\t\t\t\ttext=\"Title\"\n\t\t\t\t\tvalue=\"title\"\n\t\t\t\t\tinternal-part\n\t\t\t\t\tclass=\"title\"\n\t\t\t\t\tconnotation=\"cta\"\n\t\t\t\t></${optionTag}>\n\t\t\t\t<${optionTag}\n\t\t\t\t\ttext=\"Subtitle\"\n\t\t\t\t\tvalue=\"subtitle\"\n\t\t\t\t\tinternal-part\n\t\t\t\t\tclass=\"subtitle\"\n\t\t\t\t\tconnotation=\"cta\"\n\t\t\t\t></${optionTag}>\n\t\t\t\t<${optionTag}\n\t\t\t\t\ttext=\"Body\"\n\t\t\t\t\tvalue=\"body\"\n\t\t\t\t\tinternal-part\n\t\t\t\t\tclass=\"body\"\n\t\t\t\t\tconnotation=\"cta\"\n\t\t\t\t></${optionTag}>\n\t\t\t</${selectTag}>\n\t\t</${tooltipTag}>\n\t\t`;\n\t\t},\n\t},\n\ttextDecoration: {\n\t\tregisterStateProperty: function (menuBar) {\n\t\t\tmenuBar.addEventListener(\n\t\t\t\t'text-styles-changed',\n\t\t\t\ttextDecorationEventHandler\n\t\t\t);\n\t\t},\n\t\trender: function (context) {\n\t\t\tconst buttonTag = context.tagFor(Button);\n\t\t\tconst tooltipTag = context.tagFor(Tooltip);\n\t\t\treturn html`\n\t\t\t\t<span id=\"text-decoration\">\n\t\t\t\t\t${repeat(\n\t\t\t\t\t\t(_) => TEXT_DECORATION_ITEMS,\n\t\t\t\t\t\thtml`\n                        <${tooltipTag} text=\"${(\n\t\t\t\t\t\t\tx,\n\t\t\t\t\t\t\t{ parentContext: { parent } }\n\t\t\t\t\t\t) => parent.locale.richTextEditor[x.value]}\" placement=\"top\">\n                            <${buttonTag}\n                                class=\"selection-button\"\n                                slot=\"anchor\"\n                                aria-label=\"${(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tx,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t{ parentContext: { parent } }\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t) => parent.locale.richTextEditor[x.value]}\"\n                                size=\"super-condensed\"\n                                appearance=\"ghost-light\"\n                                shape=\"rounded\"\n                                icon=\"${(x) => x.icon}\"\n                                @click=\"${(x, c) =>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tnotifyMenuBarChange(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tc.parentContext.parent,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t'text-decoration-selected',\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tx.value\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t)}\"')}\"\n                            ></${buttonTag}>\n                        </${tooltipTag}>\n\t\t\t\t`\n\t\t\t\t\t)}\n\t\t\t\t</span>\n\t\t\t`;\n\t\t},\n\t},\n\ttextSize: {\n\t\tregisterStateProperty: function (menuBar) {\n\t\t\tmenuBar.addEventListener('text-styles-changed', textSizeEventHandler);\n\t\t},\n\t\trender: function (context) {\n\t\t\tconst menuTag = context.tagFor(Menu);\n\t\t\tconst buttonTag = context.tagFor(Button);\n\t\t\tconst tooltipTag = context.tagFor(Tooltip);\n\t\t\tconst menuItemTag = context.tagFor(MenuItem);\n\t\t\treturn html`\n                    <${menuTag}\n\t\t\t\t\t\tauto-dismiss\n                        trigger=\"auto\"\n                        id=\"text-size\"\n                        aria-label=\"Text Size\"\n                        placement=\"bottom-end\"\n                    >\n\t\t\t\t\t\t<${tooltipTag} slot=\"anchor\" text=\"${(_, { parent }) =>\n\t\t\t\tparent.locale.richTextEditor.textSize}\" placement=\"top\">\n                            <${buttonTag}\n                                slot=\"anchor\"\n                                aria-label=\"Open text size menu\"\n                                size=\"super-condensed\"\n                                appearance=\"ghost-light\"\n                                shape=\"pill\"\n                                icon=\"text-size-line\"\n                            ></${buttonTag}>\n\t\t\t\t\t\t</${tooltipTag}>\n\t\t\t\t\t\t${repeat(\n\t\t\t\t\t\t\t(_) => TEXT_SIZES,\n\t\t\t\t\t\t\thtml`\n\t\t\t\t\t\t\t<${menuItemTag}\n\t\t\t\t\t\t\t\tcheck-appearance=\"tick-only\"\n\t\t\t\t\t\t\t\tcontrol-type=\"checkbox\"\n\t\t\t\t\t\t\t\ttext=\"${(x) => x.text}\"\n\t\t\t\t\t\t\t\tvalue=\"${(x) => x.value}\"\n\t\t\t\t\t\t\t\tinternal-part\n\t\t\t\t\t\t\t\tclass=\"menubar-selector-menuitem\"\n\t\t\t\t\t\t\t\tconnotation=\"cta\"\n\t\t\t\t\t\t\t\t@click=\"${(x, c) =>\n\t\t\t\t\t\t\t\t\tnotifyMenuBarChange(\n\t\t\t\t\t\t\t\t\t\tc.parentContext.parent,\n\t\t\t\t\t\t\t\t\t\t'text-size-selected',\n\t\t\t\t\t\t\t\t\t\tx.value\n\t\t\t\t\t\t\t\t\t)}\"\n                        ></${menuItemTag}>\n\t\t\t\t\t\t\t`\n\t\t\t\t\t\t)}\n                    </${menuTag}>\n                `;\n\t\t},\n\t},\n\tdivider: {\n\t\trender: function (context) {\n\t\t\tconst dividerTag = context.tagFor(Divider);\n\t\t\treturn html`\n\t\t\t\t<${dividerTag} class=\"divider\" orientation=\"vertical\"></${dividerTag}>\n\t\t\t`;\n\t\t},\n\t},\n}"
+          "default": "{\n\ttextBlock: {\n\t\tregisterStateProperty: function (menubar: Menubar) {\n\t\t\tmenubar.addEventListener('text-styles-changed', textBlockEventHandler);\n\t\t},\n\t\trender: function (context) {\n\t\t\tconst selectTag = context.tagFor(Select);\n\t\t\tconst optionTag = context.tagFor(ListboxOption);\n\t\t\tconst tooltipTag = context.tagFor(Tooltip);\n\n\t\t\treturn html`\n\t\t<${tooltipTag} text=\"${(_, { parent }) =>\n\t\t\t\tparent.locale.richTextEditor.textBlockType}\" placement=\"top\">\n\t\t\t<${selectTag}\n                scale=\"condensed\"\n                shape=\"rounded\"\n                appearance=\"ghost\"\n\t\t\t\tslot=\"anchor\"\n\t\t\t\ttrigger=\"auto\"\n\t\t\t\tid=\"text-block\"\n\t\t\t\taria-label=\"Text Block\"\n\t\t\t\tplacement=\"bottom-end\"\n\t\t\t\tvalue=\"${(_, { parent }) => parent.textBlockType}\"\n\t\t\t\t@change=\"${(_, { parent, event }) =>\n\t\t\t\t\tnotifyMenubarChange(\n\t\t\t\t\t\tparent,\n\t\t\t\t\t\t'text-block-selected',\n\t\t\t\t\t\t(event.target as HTMLSelectElement).value\n\t\t\t\t\t)}\"\n\t\t\t>\n\t\t\t\t<${optionTag}\n\t\t\t\t\ttext=\"Title\"\n\t\t\t\t\tvalue=\"title\"\n\t\t\t\t\tinternal-part\n\t\t\t\t\tclass=\"title\"\n\t\t\t\t\tconnotation=\"cta\"\n\t\t\t\t></${optionTag}>\n\t\t\t\t<${optionTag}\n\t\t\t\t\ttext=\"Subtitle\"\n\t\t\t\t\tvalue=\"subtitle\"\n\t\t\t\t\tinternal-part\n\t\t\t\t\tclass=\"subtitle\"\n\t\t\t\t\tconnotation=\"cta\"\n\t\t\t\t></${optionTag}>\n\t\t\t\t<${optionTag}\n\t\t\t\t\ttext=\"Body\"\n\t\t\t\t\tvalue=\"body\"\n\t\t\t\t\tinternal-part\n\t\t\t\t\tclass=\"body\"\n\t\t\t\t\tconnotation=\"cta\"\n\t\t\t\t></${optionTag}>\n\t\t\t</${selectTag}>\n\t\t</${tooltipTag}>\n\t\t`;\n\t\t},\n\t},\n\ttextDecoration: {\n\t\tregisterStateProperty: function (menubar) {\n\t\t\tmenubar.addEventListener(\n\t\t\t\t'text-styles-changed',\n\t\t\t\ttextDecorationEventHandler\n\t\t\t);\n\t\t},\n\t\trender: function (context) {\n\t\t\tconst buttonTag = context.tagFor(Button);\n\t\t\tconst tooltipTag = context.tagFor(Tooltip);\n\t\t\treturn html`\n\t\t\t\t<span id=\"text-decoration\">\n\t\t\t\t\t${repeat(\n\t\t\t\t\t\t(_) => TEXT_DECORATION_ITEMS,\n\t\t\t\t\t\thtml`\n                        <${tooltipTag} text=\"${(\n\t\t\t\t\t\t\tx,\n\t\t\t\t\t\t\t{ parentContext: { parent } }\n\t\t\t\t\t\t) => parent.locale.richTextEditor[x.value]}\" placement=\"top\">\n                            <${buttonTag}\n                                class=\"selection-button\"\n                                slot=\"anchor\"\n                                aria-label=\"${(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tx,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t{ parentContext: { parent } }\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t) => parent.locale.richTextEditor[x.value]}\"\n                                size=\"super-condensed\"\n                                appearance=\"ghost-light\"\n                                shape=\"rounded\"\n                                icon=\"${(x) => x.icon}\"\n                                @click=\"${(x, c) =>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tnotifyMenubarChange(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tc.parentContext.parent,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t'text-decoration-selected',\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tx.value\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t)}\"')}\"\n                            ></${buttonTag}>\n                        </${tooltipTag}>\n\t\t\t\t`\n\t\t\t\t\t)}\n\t\t\t\t</span>\n\t\t\t`;\n\t\t},\n\t},\n\ttextSize: {\n\t\tregisterStateProperty: function (menubar) {\n\t\t\tmenubar.addEventListener('text-styles-changed', textSizeEventHandler);\n\t\t},\n\t\trender: function (context) {\n\t\t\tconst menuTag = context.tagFor(Menu);\n\t\t\tconst buttonTag = context.tagFor(Button);\n\t\t\tconst tooltipTag = context.tagFor(Tooltip);\n\t\t\tconst menuItemTag = context.tagFor(MenuItem);\n\t\t\treturn html`\n                    <${menuTag}\n\t\t\t\t\t\tauto-dismiss\n                        trigger=\"auto\"\n                        id=\"text-size\"\n                        aria-label=\"Text Size\"\n                        placement=\"bottom-end\"\n                    >\n\t\t\t\t\t\t<${tooltipTag} slot=\"anchor\" text=\"${(_, { parent }) =>\n\t\t\t\tparent.locale.richTextEditor.textSize}\" placement=\"top\">\n                            <${buttonTag}\n                                slot=\"anchor\"\n                                aria-label=\"Open text size menu\"\n                                size=\"super-condensed\"\n                                appearance=\"ghost-light\"\n                                shape=\"pill\"\n                                icon=\"text-size-line\"\n                            ></${buttonTag}>\n\t\t\t\t\t\t</${tooltipTag}>\n\t\t\t\t\t\t${repeat(\n\t\t\t\t\t\t\t(_) => TEXT_SIZES,\n\t\t\t\t\t\t\thtml`\n\t\t\t\t\t\t\t<${menuItemTag}\n\t\t\t\t\t\t\t\tcheck-appearance=\"tick-only\"\n\t\t\t\t\t\t\t\tcontrol-type=\"checkbox\"\n\t\t\t\t\t\t\t\ttext=\"${(x) => x.text}\"\n\t\t\t\t\t\t\t\tvalue=\"${(x) => x.value}\"\n\t\t\t\t\t\t\t\tinternal-part\n\t\t\t\t\t\t\t\tclass=\"menubar-selector-menuitem\"\n\t\t\t\t\t\t\t\tconnotation=\"cta\"\n\t\t\t\t\t\t\t\t@click=\"${(x, c) =>\n\t\t\t\t\t\t\t\t\tnotifyMenubarChange(\n\t\t\t\t\t\t\t\t\t\tc.parentContext.parent,\n\t\t\t\t\t\t\t\t\t\t'text-size-selected',\n\t\t\t\t\t\t\t\t\t\tx.value\n\t\t\t\t\t\t\t\t\t)}\"\n                        ></${menuItemTag}>\n\t\t\t\t\t\t\t`\n\t\t\t\t\t\t)}\n                    </${menuTag}>\n                `;\n\t\t},\n\t},\n\tdivider: {\n\t\trender: function (context) {\n\t\t\tconst dividerTag = context.tagFor(Divider);\n\t\t\treturn html`\n\t\t\t\t<${dividerTag} class=\"divider\" orientation=\"vertical\"></${dividerTag}>\n\t\t\t`;\n\t\t},\n\t},\n}"
         }
       ],
       "exports": [
@@ -34108,11 +34683,11 @@
       "declarations": [
         {
           "kind": "variable",
-          "name": "menuBarDefinition"
+          "name": "menubarDefinition"
         },
         {
           "kind": "variable",
-          "name": "registerMenuBar",
+          "name": "registerMenubar",
           "description": "Registers the menubar element with the design system.",
           "parameters": [
             {
@@ -34125,17 +34700,17 @@
       "exports": [
         {
           "kind": "js",
-          "name": "menuBarDefinition",
+          "name": "menubarDefinition",
           "declaration": {
-            "name": "menuBarDefinition",
+            "name": "menubarDefinition",
             "module": "src/lib/rich-text-editor/menubar/definition.ts"
           }
         },
         {
           "kind": "js",
-          "name": "registerMenuBar",
+          "name": "registerMenubar",
           "declaration": {
-            "name": "registerMenuBar",
+            "name": "registerMenubar",
             "module": "src/lib/rich-text-editor/menubar/definition.ts"
           }
         }
@@ -34148,7 +34723,7 @@
         {
           "kind": "class",
           "description": "",
-          "name": "MenuBar",
+          "name": "Menubar",
           "members": [
             {
               "kind": "field",
@@ -34224,9 +34799,9 @@
       "exports": [
         {
           "kind": "js",
-          "name": "MenuBar",
+          "name": "Menubar",
           "declaration": {
-            "name": "MenuBar",
+            "name": "Menubar",
             "module": "src/lib/rich-text-editor/menubar/menubar.ts"
           }
         }
@@ -34968,7 +35543,20 @@
               "default": "false",
               "fieldName": "required"
             }
-          ]
+          ],
+          "vividTesting": {
+            "selectors": [],
+            "actions": [],
+            "queries": [
+              {
+                "name": "value",
+                "args": [
+                  "value"
+                ]
+              }
+            ],
+            "refs": []
+          }
         },
         {
           "kind": "mixin",
@@ -35748,6 +36336,19 @@
             "name": "FASTElement",
             "package": "@microsoft/fast-element"
           },
+          "vividTesting": {
+            "selectors": [],
+            "actions": [
+              {
+                "name": "hover",
+                "args": [
+                  "hover"
+                ]
+              }
+            ],
+            "queries": [],
+            "refs": []
+          },
           "customElement": true
         }
       ],
@@ -36446,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": [