@vonage/vivid 3.51.0 → 3.53.0

package/custom-elements.json

@@ -8,7 +8,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "Base class for accordion",
+          "description": "",
           "name": "Accordion",
           "slots": [
             {
@@ -39,6 +39,10 @@
           "superclass": {
             "name": "FastAccordion",
             "package": "@microsoft/fast-foundation"
+          },
+          "vividComponent": {
+            "public": true,
+            "name": "accordion"
           }
         }
       ],
@@ -195,6 +199,10 @@
           "superclass": {
             "name": "FASTAccordionItem",
             "package": "@microsoft/fast-foundation"
+          },
+          "vividComponent": {
+            "public": true,
+            "name": "accordion-item"
           }
         }
       ],
@@ -242,7 +250,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "Base class for action-group",
+          "description": "",
           "name": "ActionGroup",
           "cssProperties": [
             {
@@ -355,6 +363,10 @@
           "superclass": {
             "name": "FoundationElement",
             "package": "@microsoft/fast-foundation"
+          },
+          "vividComponent": {
+            "public": true,
+            "name": "action-group"
           }
         }
       ],
@@ -418,7 +430,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "Base class for alert",
+          "description": "",
           "name": "Alert",
           "cssProperties": [
             {
@@ -481,7 +493,7 @@
               "kind": "field",
               "name": "dismissButtonAriaLabel",
               "type": {
-                "text": "string | null"
+                "text": "| string\n\t\t| null"
               },
               "default": "null"
             },
@@ -635,7 +647,7 @@
             {
               "name": "dismiss-button-aria-label",
               "type": {
-                "text": "string | null"
+                "text": "| string\n\t\t| null"
               },
               "default": "null",
               "fieldName": "dismissButtonAriaLabel"
@@ -716,6 +728,10 @@
           "superclass": {
             "name": "FoundationElement",
             "package": "@microsoft/fast-foundation"
+          },
+          "vividComponent": {
+            "public": true,
+            "name": "alert"
           }
         }
       ],
@@ -777,7 +793,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "Base class for appearance-ui",
+          "description": "",
           "name": "AppearanceUi",
           "cssProperties": [
             {
@@ -1281,6 +1297,9 @@
           "superclass": {
             "name": "FoundationElement",
             "package": "@microsoft/fast-foundation"
+          },
+          "vividComponent": {
+            "name": "appearance-ui"
           }
         }
       ],
@@ -1340,14 +1359,14 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "Base class for audio-player",
+          "description": "",
           "name": "AudioPlayer",
           "members": [
             {
               "kind": "field",
               "name": "playButtonAriaLabel",
               "type": {
-                "text": "string | null"
+                "text": "| string\n\t\t| null"
               },
               "default": "null"
             },
@@ -1355,7 +1374,7 @@
               "kind": "field",
               "name": "pauseButtonAriaLabel",
               "type": {
-                "text": "string | null"
+                "text": "| string\n\t\t| null"
               },
               "default": "null"
             },
@@ -1410,7 +1429,7 @@
             {
               "name": "play-button-aria-label",
               "type": {
-                "text": "string | null"
+                "text": "| string\n\t\t| null"
               },
               "default": "null",
               "fieldName": "playButtonAriaLabel"
@@ -1418,7 +1437,7 @@
             {
               "name": "pause-button-aria-label",
               "type": {
-                "text": "string | null"
+                "text": "| string\n\t\t| null"
               },
               "default": "null",
               "fieldName": "pauseButtonAriaLabel"
@@ -1466,6 +1485,10 @@
           "superclass": {
             "name": "FoundationElement",
             "package": "@microsoft/fast-foundation"
+          },
+          "vividComponent": {
+            "public": true,
+            "name": "audio-player"
           }
         }
       ],
@@ -1722,6 +1745,10 @@
           "superclass": {
             "name": "FoundationElement",
             "package": "@microsoft/fast-foundation"
+          },
+          "vividComponent": {
+            "public": true,
+            "name": "avatar"
           }
         }
       ],
@@ -1801,7 +1828,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "Base class for badge",
+          "description": "",
           "name": "Badge",
           "cssProperties": [
             {
@@ -2078,6 +2105,10 @@
           "superclass": {
             "name": "FoundationElement",
             "package": "@microsoft/fast-foundation"
+          },
+          "vividComponent": {
+            "public": true,
+            "name": "badge"
           }
         }
       ],
@@ -2162,7 +2193,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "Base class for banner",
+          "description": "",
           "name": "Banner",
           "cssProperties": [
             {
@@ -2221,7 +2252,7 @@
               "kind": "field",
               "name": "dismissButtonAriaLabel",
               "type": {
-                "text": "string | null"
+                "text": "| string\n\t\t| null"
               },
               "default": "null"
             },
@@ -2305,7 +2336,7 @@
             {
               "name": "dismiss-aria-label",
               "type": {
-                "text": "string | null"
+                "text": "| string\n\t\t| null"
               },
               "default": "null",
               "fieldName": "dismissButtonAriaLabel"
@@ -2364,6 +2395,10 @@
           "superclass": {
             "name": "FoundationElement",
             "package": "@microsoft/fast-foundation"
+          },
+          "vividComponent": {
+            "public": true,
+            "name": "banner"
           }
         }
       ],
@@ -2425,7 +2460,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "Base class for breadcrumb",
+          "description": "",
           "name": "Breadcrumb",
           "slots": [
             {
@@ -2436,6 +2471,10 @@
           "superclass": {
             "name": "FoundationElement",
             "package": "@microsoft/fast-foundation"
+          },
+          "vividComponent": {
+            "public": true,
+            "name": "breadcrumb"
           }
         }
       ],
@@ -2483,7 +2522,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "Base class for breadcrumb-item",
+          "description": "",
           "name": "BreadcrumbItem",
           "members": [
             {
@@ -2506,6 +2545,10 @@
           "superclass": {
             "name": "FastBreadcrumbItem",
             "package": "@microsoft/fast-foundation"
+          },
+          "vividComponent": {
+            "public": true,
+            "name": "breadcrumb-item"
           }
         }
       ],
@@ -2553,7 +2596,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "Base class for button",
+          "description": "",
           "name": "Button",
           "cssProperties": [
             {
@@ -2756,6 +2799,16 @@
               "description": "Displays the button in pending state.",
               "privacy": "public"
             },
+            {
+              "kind": "field",
+              "name": "active",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Displays the button in active state.",
+              "privacy": "public"
+            },
             {
               "kind": "field",
               "name": "label",
@@ -2887,6 +2940,15 @@
               "description": "Displays the button in pending state.",
               "fieldName": "pending"
             },
+            {
+              "name": "active",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Displays the button in active state.",
+              "fieldName": "active"
+            },
             {
               "name": "label",
               "type": {
@@ -2955,6 +3017,10 @@
           "superclass": {
             "name": "FoundationButton",
             "package": "@microsoft/fast-foundation"
+          },
+          "vividComponent": {
+            "public": true,
+            "name": "button"
           }
         }
       ],
@@ -3034,7 +3100,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "Base class for calendar",
+          "description": "",
           "name": "Calendar",
           "slots": [
             {
@@ -3223,6 +3289,10 @@
           "superclass": {
             "name": "FoundationElement",
             "package": "@microsoft/fast-foundation"
+          },
+          "vividComponent": {
+            "public": true,
+            "name": "calendar"
           }
         }
       ],
@@ -3270,7 +3340,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "Base class for calendar-event",
+          "description": "",
           "name": "CalendarEvent",
           "cssProperties": [
             {
@@ -3510,6 +3580,10 @@
           "superclass": {
             "name": "FoundationElement",
             "package": "@microsoft/fast-foundation"
+          },
+          "vividComponent": {
+            "public": true,
+            "name": "calendar-event"
           }
         }
       ],
@@ -3573,7 +3647,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "Base class for card",
+          "description": "",
           "name": "Card",
           "slots": [
             {
@@ -3720,6 +3794,10 @@
           "superclass": {
             "name": "FoundationElement",
             "package": "@microsoft/fast-foundation"
+          },
+          "vividComponent": {
+            "public": true,
+            "name": "card"
           }
         }
       ],
@@ -3783,7 +3861,7 @@
         },
         {
           "kind": "class",
-          "description": "Base class for checkbox",
+          "description": "",
           "name": "Checkbox",
           "cssProperties": [
             {
@@ -3835,6 +3913,12 @@
               "default": "var(--vvd-color-canvas-text)"
             }
           ],
+          "slots": [
+            {
+              "description": "Describes how to use the checkbox. Alternative to the `helper-text` attribute.",
+              "name": "helper-text"
+            }
+          ],
           "members": [
             {
               "kind": "field",
@@ -3897,6 +3981,18 @@
           "superclass": {
             "name": "FoundationCheckbox",
             "package": "@microsoft/fast-foundation"
+          },
+          "vividComponent": {
+            "public": true,
+            "name": "checkbox",
+            "vueModels": [
+              {
+                "name": "modelValue",
+                "attributeName": "current-checked",
+                "eventName": "change",
+                "valueMapping": "(event.target as HTMLInputElement).checked"
+              }
+            ]
           }
         }
       ],
@@ -3952,7 +4048,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "Base class for combobox",
+          "description": "",
           "name": "Combobox",
           "cssProperties": [
             {
@@ -4011,6 +4107,18 @@
           "superclass": {
             "name": "FoundationCombobox",
             "package": "@microsoft/fast-foundation"
+          },
+          "vividComponent": {
+            "public": true,
+            "name": "combobox",
+            "vueModels": [
+              {
+                "name": "modelValue",
+                "attributeName": "current-value",
+                "eventName": "change",
+                "valueMapping": "(event.target as HTMLInputElement).value"
+              }
+            ]
           }
         }
       ],
@@ -4035,7 +4143,7 @@
           "type": {
             "text": "array"
           },
-          "default": "[combobox, ...iconRegistries, ...popupRegistries, ...focusRegistries, ...listboxOptionRegistries]"
+          "default": "[\n\tcombobox,\n\t...iconRegistries,\n\t...popupRegistries,\n\t...listboxOptionRegistries,\n]"
         },
         {
           "kind": "variable",
@@ -4082,7 +4190,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "Base class for data-grid",
+          "description": "",
           "name": "DataGridCell",
           "cssProperties": [
             {
@@ -4097,6 +4205,14 @@
               "name": "--vvd-data-grid-cell-cta-primary-increment",
               "default": "var(--vvd-color-cta-600)"
             },
+            {
+              "name": "--vvd-data-grid-cell-cta-firm",
+              "default": "var(--vvd-color-cta-600)"
+            },
+            {
+              "name": "--vvd-data-grid-cell-cta-soft",
+              "default": "var(--vvd-color-cta-100)"
+            },
             {
               "name": "--vvd-data-grid-cell-cta-faint",
               "default": "var(--vvd-color-cta-50)"
@@ -4121,6 +4237,14 @@
               "name": "--vvd-data-grid-cell-accent-primary-increment",
               "default": "var(--vvd-color-neutral-800)"
             },
+            {
+              "name": "--vvd-data-grid-cell-accent-firm",
+              "default": "var(--vvd-color-canvas-text)"
+            },
+            {
+              "name": "--vvd-data-grid-cell-accent-soft",
+              "default": "var(--vvd-color-neutral-100)"
+            },
             {
               "name": "--vvd-data-grid-cell-accent-faint",
               "default": "var(--vvd-color-neutral-50)"
@@ -4245,6 +4369,10 @@
           "superclass": {
             "name": "FoundationDataGridCell",
             "package": "@microsoft/fast-foundation"
+          },
+          "vividComponent": {
+            "public": true,
+            "name": "data-grid-cell"
           }
         }
       ],
@@ -4265,7 +4393,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "Base class for data-grid",
+          "description": "",
           "name": "DataGridRow",
           "cssProperties": [
             {
@@ -4280,10 +4408,18 @@
               "name": "--vvd-data-grid-row-cta-primary-increment",
               "default": "var(--vvd-color-cta-600)"
             },
+            {
+              "name": "--vvd-data-grid-row-cta-firm",
+              "default": "var(--vvd-color-cta-600)"
+            },
             {
               "name": "--vvd-data-grid-row-cta-faint",
               "default": "var(--vvd-color-cta-50)"
             },
+            {
+              "name": "--vvd-data-grid-row-cta-soft",
+              "default": "var(--vvd-color-cta-100)"
+            },
             {
               "name": "--vvd-data-grid-row-cta-pale",
               "default": "var(--vvd-color-cta-300)"
@@ -4304,10 +4440,18 @@
               "name": "--vvd-data-grid-row-accent-primary-increment",
               "default": "var(--vvd-color-neutral-800)"
             },
+            {
+              "name": "--vvd-data-grid-row-accent-firm",
+              "default": "var(--vvd-color-canvas-text)"
+            },
             {
               "name": "--vvd-data-grid-row-accent-faint",
               "default": "var(--vvd-color-neutral-50)"
             },
+            {
+              "name": "--vvd-data-grid-row-accent-soft",
+              "default": "var(--vvd-color-neutral-100)"
+            },
             {
               "name": "--vvd-data-grid-row-accent-pale",
               "default": "var(--vvd-color-neutral-300)"
@@ -4355,6 +4499,10 @@
           "superclass": {
             "name": "FoundationDataGridRow",
             "package": "@microsoft/fast-foundation"
+          },
+          "vividComponent": {
+            "public": true,
+            "name": "data-grid-row"
           }
         }
       ],
@@ -4377,9 +4525,9 @@
           "kind": "variable",
           "name": "DataGridCellSortStates",
           "type": {
-            "text": "{\n\tnone: 'none',\n\tascending: 'ascending',\n\tdescending: 'descending',\n\tother: 'other'\n}"
+            "text": "{\n\tnone: 'none',\n\tascending: 'ascending',\n\tdescending: 'descending',\n\tother: 'other',\n}"
           },
-          "default": "{\n\tnone: 'none',\n\tascending: 'ascending',\n\tdescending: 'descending',\n\tother: 'other'\n}",
+          "default": "{\n\tnone: 'none',\n\tascending: 'ascending',\n\tdescending: 'descending',\n\tother: 'other',\n}",
           "description": "Enumerates the data grid auto generated header options\ndefault option generates a non-sticky header row",
           "privacy": "public"
         },
@@ -4499,7 +4647,7 @@
         },
         {
           "kind": "class",
-          "description": "Base class for data-grid",
+          "description": "",
           "name": "DataGrid",
           "slots": [
             {
@@ -4574,7 +4722,7 @@
               "type": {
                 "text": "object"
               },
-              "default": "{\n\t\thandleChange(dataGrid: DataGrid, propertyName: string) {\n\t\t\tif (propertyName === 'columnDefinitions') {\n\t\t\t\tif (dataGrid.$fastController.isConnected) {\n\t\t\t\t\t(dataGrid as any).toggleGeneratedHeader();\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}"
+              "default": "{\n\t\thandleChange(dataGrid: DataGrid, propertyName: string) {\n\t\t\tif (propertyName === 'columnDefinitions') {\n\t\t\t\tif (dataGrid.$fastController.isConnected) {\n\t\t\t\t\t(dataGrid as any).toggleGeneratedHeader();\n\t\t\t\t}\n\t\t\t}\n\t\t},\n\t}"
             },
             {
               "kind": "field",
@@ -4628,6 +4776,10 @@
           "superclass": {
             "name": "FoundationDataGrid",
             "package": "@microsoft/fast-foundation"
+          },
+          "vividComponent": {
+            "public": true,
+            "name": "data-grid"
           }
         }
       ],
@@ -4672,7 +4824,7 @@
           "type": {
             "text": "array"
           },
-          "default": "[dataGridCell, dataGridRow, dataGrid, ...iconRegistries]"
+          "default": "[\n\tdataGridCell,\n\tdataGridRow,\n\tdataGrid,\n\t...iconRegistries,\n]"
         },
         {
           "kind": "variable",
@@ -4737,6 +4889,12 @@
           "kind": "class",
           "description": "Single date picker component.",
           "name": "DatePicker",
+          "slots": [
+            {
+              "description": "Describes how to use the date-picker. Alternative to the `helper-text` attribute.",
+              "name": "helper-text"
+            }
+          ],
           "members": [
             {
               "kind": "method",
@@ -4966,6 +5124,18 @@
             "name": "DatePickerBase",
             "module": "/libs/components/src/shared/date-picker/date-picker-base"
           },
+          "vividComponent": {
+            "public": true,
+            "name": "date-picker",
+            "vueModels": [
+              {
+                "name": "modelValue",
+                "attributeName": "value",
+                "eventName": "input",
+                "valueMapping": "(event.target as HTMLInputElement).value"
+              }
+            ]
+          },
           "attributes": [
             {
               "type": {
@@ -5085,8 +5255,14 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "Base class for date-range-picker",
+          "description": "",
           "name": "DateRangePicker",
+          "slots": [
+            {
+              "description": "Describes how to use the date-range-picker. Alternative to the `helper-text` attribute.",
+              "name": "helper-text"
+            }
+          ],
           "members": [
             {
               "kind": "field",
@@ -5492,6 +5668,24 @@
           "superclass": {
             "name": "DatePickerBase",
             "module": "/libs/components/src/shared/date-picker/date-picker-base"
+          },
+          "vividComponent": {
+            "public": true,
+            "name": "date-range-picker",
+            "vueModels": [
+              {
+                "name": "start",
+                "attributeName": "current-start",
+                "eventName": "input:start",
+                "valueMapping": "(event.target as any).start"
+              },
+              {
+                "name": "end",
+                "attributeName": "current-end",
+                "eventName": "input:end",
+                "valueMapping": "(event.target as any).end"
+              }
+            ]
           }
         }
       ],
@@ -5547,12 +5741,16 @@
     },
     {
       "kind": "javascript-module",
-      "path": "libs/components/src/lib/dialog/definition.ts",
+      "path": "libs/components/src/lib/dial-pad/definition.ts",
       "declarations": [
         {
           "kind": "variable",
-          "name": "registerDialog",
-          "description": "Registers the dialog elements with the design system.",
+          "name": "dialPadDefinition"
+        },
+        {
+          "kind": "variable",
+          "name": "registerDialPad",
+          "description": "Registers the dial-pad element with the design system.",
           "parameters": [
             {
               "description": "the prefix to use for the component name",
@@ -5564,146 +5762,436 @@
       "exports": [
         {
           "kind": "js",
-          "name": "IconPlacement",
+          "name": "dialPadDefinition",
           "declaration": {
-            "name": "IconPlacement",
-            "module": "./dialog"
+            "name": "dialPadDefinition",
+            "module": "libs/components/src/lib/dial-pad/definition.ts"
           }
         },
         {
           "kind": "js",
-          "name": "registerDialog",
+          "name": "registerDialPad",
           "declaration": {
-            "name": "registerDialog",
-            "module": "libs/components/src/lib/dialog/definition.ts"
+            "name": "registerDialPad",
+            "module": "libs/components/src/lib/dial-pad/definition.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "libs/components/src/lib/dialog/dialog.ts",
+      "path": "libs/components/src/lib/dial-pad/dial-pad.ts",
       "declarations": [
-        {
-          "kind": "variable",
-          "name": "isDialogSupported"
-        },
         {
           "kind": "class",
-          "description": "Base class for dialog",
-          "name": "Dialog",
-          "slots": [
+          "description": "Base class for dial-pad",
+          "name": "DialPad",
+          "cssProperties": [
             {
-              "description": "Use the graphic slot in order to replace the icon.",
-              "name": "graphic"
+              "name": "--vvd-dial-pad-accent-contrast",
+              "default": "var(--vvd-color-neutral-800)"
             },
             {
-              "description": "Use the body slot in order to add custom HTML to the dialog.",
-              "name": "body"
+              "name": "--vvd-dial-pad-accent-soft",
+              "default": "var(--vvd-color-neutral-100)"
             },
             {
-              "description": "Use the footer slot in order to add action buttons to the bottom of the dialog.",
-              "name": "footer"
+              "name": "--vvd-dial-pad-accent-pale",
+              "default": "var(--vvd-color-neutral-300)"
             },
             {
-              "description": "Assign nodes to the main slot to fully override a dialog’s predefined flow and style with your own.",
-              "name": "main"
+              "name": "--vvd-dial-pad-accent-fierce",
+              "default": "var(--vvd-color-neutral-700)"
             },
             {
-              "description": "Use the action-items slot in order to add action buttons to the bottom of the dialog.",
-              "name": "action-items"
+              "name": "--vvd-dial-pad-accent-firm-all",
+              "default": "var(--vvd-color-neutral-600)"
+            },
+            {
+              "name": "--vvd-dial-pad-accent-faint",
+              "default": "var(--vvd-color-neutral-50)"
+            },
+            {
+              "name": "--vvd-dial-pad-accent-dim",
+              "default": "var(--vvd-color-neutral-200)"
             }
           ],
           "members": [
             {
               "kind": "field",
-              "name": "open",
+              "name": "helperText",
               "type": {
-                "text": "boolean"
+                "text": "string | null"
               },
-              "default": "false",
-              "description": "Indicates dialog's state",
+              "default": "null",
+              "description": "Indicates the helper-text's text.",
               "privacy": "public"
             },
             {
               "kind": "field",
-              "name": "icon",
+              "name": "placeholder",
               "type": {
-                "text": "string | undefined"
-              }
+                "text": "string | null"
+              },
+              "default": "null",
+              "description": "Indicates the placeholder's text.",
+              "privacy": "public"
             },
             {
               "kind": "field",
-              "name": "iconPlacement",
+              "name": "value",
               "type": {
-                "text": "IconPlacement | undefined"
-              }
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Indicates the value's text.",
+              "privacy": "public"
+            },
+            {
+              "kind": "method",
+              "name": "valueChanged",
+              "parameters": [
+                {
+                  "name": "_oldValue",
+                  "type": {
+                    "text": "string"
+                  }
+                },
+                {
+                  "name": "newValue",
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ]
             },
             {
               "kind": "field",
-              "name": "subtitle",
+              "name": "pattern",
               "type": {
-                "text": "string | undefined"
-              }
+                "text": "string"
+              },
+              "default": "'^[0-9#*]*$'",
+              "description": "Indicates the dial pad's pattern.",
+              "privacy": "public"
             },
             {
               "kind": "field",
-              "name": "headline",
+              "name": "disabled",
               "type": {
-                "text": "string | undefined"
-              }
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Indicates the disabled state of the dial-pad.",
+              "privacy": "public"
             },
             {
               "kind": "field",
-              "name": "fullWidthBody",
+              "name": "callActive",
               "type": {
                 "text": "boolean"
               },
-              "default": "false"
+              "default": "false",
+              "description": "Indicates the active state of the dial-pad.",
+              "privacy": "public"
             },
             {
               "kind": "field",
-              "name": "ariaLabel",
+              "name": "noCall",
               "type": {
-                "text": "string | null"
+                "text": "boolean"
               },
-              "default": "null"
+              "default": "false",
+              "description": "Indicates the no-call state of the dial-pad.",
+              "privacy": "public"
+            }
+          ],
+          "events": [
+            {
+              "description": "Emitted when the text field value changes",
+              "name": "change"
             },
             {
-              "kind": "field",
-              "name": "dismissButtonAriaLabel",
+              "description": "Emitted when the text field value changes",
+              "name": "input"
+            },
+            {
+              "description": "Emitted when the text field loses focus",
+              "name": "blur"
+            },
+            {
+              "description": "Emitted when the text field receives focus",
+              "name": "focus"
+            },
+            {
+              "description": "Emitted when a digit button is clicked",
+              "name": "keypad-click"
+            },
+            {
+              "description": "Emitted when the call button is clicked",
+              "name": "dial"
+            },
+            {
+              "description": "Emitted when the end call button is clicked",
+              "name": "end-call"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "helper-text",
               "type": {
                 "text": "string | null"
               },
-              "default": "null"
+              "default": "null",
+              "description": "Indicates the helper-text's text.",
+              "fieldName": "helperText"
             },
             {
-              "kind": "field",
-              "name": "noLightDismiss",
+              "name": "placeholder",
               "type": {
-                "text": "boolean"
+                "text": "string | null"
               },
-              "default": "false"
+              "default": "null",
+              "description": "Indicates the placeholder's text.",
+              "fieldName": "placeholder"
             },
             {
-              "kind": "field",
-              "name": "#modal",
-              "privacy": "private",
               "type": {
-                "text": "boolean"
+                "text": "string"
               },
-              "default": "false"
+              "default": "''",
+              "description": "Indicates the value's text.",
+              "fieldName": "value"
             },
             {
-              "kind": "field",
-              "name": "returnValue",
               "type": {
                 "text": "string"
-              }
+              },
+              "default": "'^[0-9#*]*$'",
+              "description": "Indicates the dial pad's pattern.",
+              "fieldName": "pattern"
             },
             {
-              "kind": "field",
-              "name": "#dialogElement",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Indicates the disabled state of the dial-pad.",
+              "fieldName": "disabled"
+            },
+            {
+              "name": "call-active",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Indicates the active state of the dial-pad.",
+              "fieldName": "callActive"
+            },
+            {
+              "name": "no-call",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Indicates the no-call state of the dial-pad.",
+              "fieldName": "noCall"
+            }
+          ],
+          "superclass": {
+            "name": "FoundationElement",
+            "package": "@microsoft/fast-foundation"
+          },
+          "vividComponent": {
+            "public": true,
+            "name": "dial-pad",
+            "vueModels": [
+              {
+                "name": "modelValue",
+                "attributeName": "value",
+                "eventName": "input",
+                "valueMapping": "(event.target as any).value"
+              }
+            ]
+          }
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "DialPad",
+          "declaration": {
+            "name": "DialPad",
+            "module": "libs/components/src/lib/dial-pad/dial-pad.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "libs/components/src/lib/dial-pad/locale.ts",
+      "declarations": [],
+      "exports": []
+    },
+    {
+      "kind": "javascript-module",
+      "path": "libs/components/src/lib/dialog/definition.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "registerDialog",
+          "description": "Registers the dialog elements with the design system.",
+          "parameters": [
+            {
+              "description": "the prefix to use for the component name",
+              "name": "prefix"
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "IconPlacement",
+          "declaration": {
+            "name": "IconPlacement",
+            "module": "./dialog"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "registerDialog",
+          "declaration": {
+            "name": "registerDialog",
+            "module": "libs/components/src/lib/dialog/definition.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "libs/components/src/lib/dialog/dialog.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "isDialogSupported"
+        },
+        {
+          "kind": "class",
+          "description": "",
+          "name": "Dialog",
+          "slots": [
+            {
+              "description": "Use the graphic slot in order to replace the icon.",
+              "name": "graphic"
+            },
+            {
+              "description": "Use the body slot in order to add custom HTML to the dialog.",
+              "name": "body"
+            },
+            {
+              "description": "Use the footer slot in order to add action buttons to the bottom of the dialog.",
+              "name": "footer"
+            },
+            {
+              "description": "Assign nodes to the main slot to fully override a dialog’s predefined flow and style with your own.",
+              "name": "main"
+            },
+            {
+              "description": "Use the action-items slot in order to add action buttons to the bottom of the dialog.",
+              "name": "action-items"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "open",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Indicates dialog's state",
+              "privacy": "public"
+            },
+            {
+              "kind": "field",
+              "name": "icon",
+              "type": {
+                "text": "string | undefined"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "iconPlacement",
+              "type": {
+                "text": "IconPlacement | undefined"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "subtitle",
+              "type": {
+                "text": "string | undefined"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "headline",
+              "type": {
+                "text": "string | undefined"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "fullWidthBody",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "ariaLabel",
+              "type": {
+                "text": "string | null"
+              },
+              "default": "null"
+            },
+            {
+              "kind": "field",
+              "name": "dismissButtonAriaLabel",
+              "type": {
+                "text": "| string\n\t\t| null"
+              },
+              "default": "null"
+            },
+            {
+              "kind": "field",
+              "name": "noLightDismiss",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "#modal",
+              "privacy": "private",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "returnValue",
+              "type": {
+                "text": "string"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "#dialogElement",
               "privacy": "private",
               "type": {
                 "text": "HTMLDialogElement | undefined"
@@ -5812,7 +6300,7 @@
             {
               "name": "dismiss-button-aria-label",
               "type": {
-                "text": "string | null"
+                "text": "| string\n\t\t| null"
               },
               "default": "null",
               "fieldName": "dismissButtonAriaLabel"
@@ -5829,6 +6317,10 @@
           "superclass": {
             "name": "FoundationElement",
             "package": "@microsoft/fast-foundation"
+          },
+          "vividComponent": {
+            "public": true,
+            "name": "dialog"
           }
         }
       ],
@@ -5890,11 +6382,15 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "Base class for divider",
+          "description": "",
           "name": "Divider",
           "superclass": {
             "name": "FoundationDivider",
             "package": "@microsoft/fast-foundation"
+          },
+          "vividComponent": {
+            "public": true,
+            "name": "divider"
           }
         }
       ],
@@ -5942,7 +6438,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "Base class for elevation",
+          "description": "",
           "name": "Elevation",
           "slots": [
             {
@@ -5991,6 +6487,9 @@
           "superclass": {
             "name": "FoundationElement",
             "package": "@microsoft/fast-foundation"
+          },
+          "vividComponent": {
+            "name": "elevation"
           }
         }
       ],
@@ -6107,6 +6606,10 @@
           "superclass": {
             "name": "FoundationElement",
             "package": "@microsoft/fast-foundation"
+          },
+          "vividComponent": {
+            "public": true,
+            "name": "empty-state"
           }
         }
       ],
@@ -6183,7 +6686,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "Base class for fab",
+          "description": "",
           "name": "Fab",
           "cssProperties": [
             {
@@ -6299,6 +6802,10 @@
           "superclass": {
             "name": "FoundationButton",
             "package": "@microsoft/fast-foundation"
+          },
+          "vividComponent": {
+            "public": true,
+            "name": "fab"
           }
         }
       ],
@@ -6398,8 +6905,14 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "File-picker component",
+          "description": "",
           "name": "FilePicker",
+          "slots": [
+            {
+              "description": "Describes how to use the file-picker. Alternative to the `helper-text` attribute.",
+              "name": "helper-text"
+            }
+          ],
           "members": [
             {
               "kind": "field",
@@ -6674,6 +7187,10 @@
           "superclass": {
             "name": "FormAssociatedFilePicker",
             "module": "/libs/components/src/lib/file-picker/file-picker.form-associated"
+          },
+          "vividComponent": {
+            "public": true,
+            "name": "file-picker"
           }
         }
       ],
@@ -6696,17 +7213,17 @@
     },
     {
       "kind": "javascript-module",
-      "path": "libs/components/src/lib/focus/definition.ts",
+      "path": "libs/components/src/lib/header/definition.ts",
       "declarations": [
         {
           "kind": "variable",
-          "name": "focusDefinition",
-          "description": "Represents a focus custom element.\nfocus is a label that holds small amounts of information.\nA focus can be used to display unread notifications, or to label a block of text.\nFocuss don’t work for navigation because they can't include a hyperlink."
+          "name": "headerDefinition",
+          "description": "The header element."
         },
         {
           "kind": "variable",
-          "name": "registerFocus",
-          "description": "Registers the focus component",
+          "name": "registerHeader",
+          "description": "Registers the header elements with the design system.",
           "parameters": [
             {
               "description": "the prefix to use for the component name",
@@ -6718,96 +7235,31 @@
       "exports": [
         {
           "kind": "js",
-          "name": "focusDefinition",
+          "name": "headerDefinition",
           "declaration": {
-            "name": "focusDefinition",
-            "module": "libs/components/src/lib/focus/definition.ts"
+            "name": "headerDefinition",
+            "module": "libs/components/src/lib/header/definition.ts"
           }
         },
         {
           "kind": "js",
-          "name": "registerFocus",
+          "name": "registerHeader",
           "declaration": {
-            "name": "registerFocus",
-            "module": "libs/components/src/lib/focus/definition.ts"
+            "name": "registerHeader",
+            "module": "libs/components/src/lib/header/definition.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "libs/components/src/lib/focus/focus.ts",
+      "path": "libs/components/src/lib/header/header.ts",
       "declarations": [
         {
           "kind": "class",
-          "description": "Base class for focus",
-          "name": "Focus",
-          "superclass": {
-            "name": "FoundationElement",
-            "package": "@microsoft/fast-foundation"
-          }
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "Focus",
-          "declaration": {
-            "name": "Focus",
-            "module": "libs/components/src/lib/focus/focus.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "libs/components/src/lib/header/definition.ts",
-      "declarations": [
-        {
-          "kind": "variable",
-          "name": "headerDefinition",
-          "description": "The header element."
-        },
-        {
-          "kind": "variable",
-          "name": "registerHeader",
-          "description": "Registers the header elements with the design system.",
-          "parameters": [
-            {
-              "description": "the prefix to use for the component name",
-              "name": "prefix"
-            }
-          ]
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "headerDefinition",
-          "declaration": {
-            "name": "headerDefinition",
-            "module": "libs/components/src/lib/header/definition.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "registerHeader",
-          "declaration": {
-            "name": "registerHeader",
-            "module": "libs/components/src/lib/header/definition.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "libs/components/src/lib/header/header.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "Base class for header",
-          "name": "Header",
-          "slots": [
+          "description": "",
+          "name": "Header",
+          "slots": [
             {
               "description": "Default slot.",
               "name": ""
@@ -6865,6 +7317,10 @@
           "superclass": {
             "name": "FoundationElement",
             "package": "@microsoft/fast-foundation"
+          },
+          "vividComponent": {
+            "public": true,
+            "name": "header"
           }
         }
       ],
@@ -7060,6 +7516,10 @@
           "superclass": {
             "name": "FoundationElement",
             "package": "@microsoft/fast-foundation"
+          },
+          "vividComponent": {
+            "public": true,
+            "name": "icon"
           }
         }
       ],
@@ -7160,7 +7620,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "Base class for layout\n\n[--layout-grid-template-columns=repeat([the `auto-sizing` mapped value],\nminmax([the `column-basis` mapped value], 1fr))] - Controls the `grid-template-columns` of the layout.",
+          "description": "[--layout-grid-template-columns=repeat([the `auto-sizing` mapped value],\nminmax([the `column-basis` mapped value], 1fr))] - Controls the `grid-template-columns` of the layout.",
           "name": "Layout",
           "slots": [
             {
@@ -7260,6 +7720,10 @@
           "superclass": {
             "name": "FoundationElement",
             "package": "@microsoft/fast-foundation"
+          },
+          "vividComponent": {
+            "public": true,
+            "name": "layout"
           }
         }
       ],
@@ -7328,7 +7792,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "Base class for listbox",
+          "description": "",
           "name": "Listbox",
           "cssProperties": [
             {
@@ -7444,6 +7908,9 @@
           "superclass": {
             "name": "FoundationListboxElement",
             "package": "@microsoft/fast-foundation"
+          },
+          "vividComponent": {
+            "name": "listbox"
           }
         }
       ],
@@ -7512,7 +7979,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "Base class for menu",
+          "description": "",
           "name": "Menu",
           "slots": [
             {
@@ -7650,12 +8117,23 @@
             },
             {
               "kind": "field",
-              "name": "#updateClickOutsideListener",
+              "name": "#updateClickOutsideListeners",
               "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "#closeOnClickOutside",
+              "name": "#wasOpenBeforeClick",
+              "privacy": "private",
+              "default": "new WeakMap<Event, boolean>()"
+            },
+            {
+              "kind": "field",
+              "name": "#onClickOutsideCapture",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "#onClickOutside",
               "privacy": "private"
             },
             {
@@ -7718,6 +8196,10 @@
           "superclass": {
             "name": "FastMenu",
             "package": "@microsoft/fast-foundation"
+          },
+          "vividComponent": {
+            "public": true,
+            "name": "menu"
           }
         }
       ],
@@ -7794,9 +8276,41 @@
         },
         {
           "kind": "class",
-          "description": "Base class for menu-item",
+          "description": "",
           "name": "MenuItem",
           "cssProperties": [
+            {
+              "name": "--vvd-menu-item-cta-primary",
+              "default": "var(--vvd-color-cta-500)"
+            },
+            {
+              "name": "--vvd-menu-item-cta-primary-text",
+              "default": "var(--vvd-color-canvas)"
+            },
+            {
+              "name": "--vvd-menu-item-cta-primary-increment",
+              "default": "var(--vvd-color-cta-600)"
+            },
+            {
+              "name": "--vvd-menu-item-cta-firm",
+              "default": "var(--vvd-color-cta-600)"
+            },
+            {
+              "name": "--vvd-menu-item-cta-faint",
+              "default": "var(--vvd-color-cta-50)"
+            },
+            {
+              "name": "--vvd-menu-item-cta-soft",
+              "default": "var(--vvd-color-cta-100)"
+            },
+            {
+              "name": "--vvd-menu-item-cta-pale",
+              "default": "var(--vvd-color-cta-300)"
+            },
+            {
+              "name": "--vvd-menu-item-cta-dim",
+              "default": "var(--vvd-color-cta-200)"
+            },
             {
               "name": "--vvd-menu-item-accent-primary",
               "default": "var(--vvd-color-canvas-text)"
@@ -7809,6 +8323,10 @@
               "name": "--vvd-menu-item-accent-primary-increment",
               "default": "var(--vvd-color-neutral-800)"
             },
+            {
+              "name": "--vvd-menu-item-accent-firm",
+              "default": "var(--vvd-color-canvas-text)"
+            },
             {
               "name": "--vvd-menu-item-accent-faint",
               "default": "var(--vvd-color-neutral-50)"
@@ -7859,6 +8377,15 @@
               "description": "Indicates the menu item's secondary text.",
               "privacy": "public"
             },
+            {
+              "kind": "field",
+              "name": "connotation",
+              "type": {
+                "text": "MenuItemConnotation | undefined"
+              },
+              "description": "The connotation the fab should have.",
+              "privacy": "public"
+            },
             {
               "kind": "field",
               "name": "checkTrailing",
@@ -7928,6 +8455,14 @@
               "description": "Indicates the menu item's secondary text.",
               "fieldName": "textSecondary"
             },
+            {
+              "name": "connotation",
+              "type": {
+                "text": "MenuItemConnotation | undefined"
+              },
+              "description": "The connotation the fab should have.",
+              "fieldName": "connotation"
+            },
             {
               "name": "check-trailing",
               "type": {
@@ -7949,6 +8484,18 @@
           "superclass": {
             "name": "FastMenuItem",
             "package": "@microsoft/fast-foundation"
+          },
+          "vividComponent": {
+            "public": true,
+            "name": "menu-item",
+            "vueModels": [
+              {
+                "name": "modelValue",
+                "attributeName": "checked",
+                "eventName": "change",
+                "valueMapping": "(event.target as HTMLInputElement).checked"
+              }
+            ]
           }
         }
       ],
@@ -8017,7 +8564,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "A Nav Item Custom HTML Element.\nBased largely on the https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a | <a> element .",
+          "description": "",
           "name": "Nav",
           "slots": [
             {
@@ -8028,6 +8575,10 @@
           "superclass": {
             "name": "FoundationElement",
             "package": "@microsoft/fast-foundation"
+          },
+          "vividComponent": {
+            "public": true,
+            "name": "nav"
           }
         }
       ],
@@ -8088,7 +8639,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "A Nav Item Custom HTML Element.\nBased largely on the https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a | <a> element .",
+          "description": "",
           "name": "NavDisclosure",
           "cssProperties": [
             {
@@ -8201,6 +8752,10 @@
           "superclass": {
             "name": "FoundationElement",
             "package": "@microsoft/fast-foundation"
+          },
+          "vividComponent": {
+            "public": true,
+            "name": "nav-disclosure"
           }
         }
       ],
@@ -8312,12 +8867,42 @@
                 "name": "TextAnchor",
                 "module": "libs/components/src/lib/text-anchor/text-anchor.ts"
               }
+            },
+            {
+              "kind": "field",
+              "name": "connotation",
+              "type": {
+                "text": "TextAnchorConnotation | undefined"
+              },
+              "description": "The connotation Text-Anchor should have.",
+              "privacy": "public",
+              "inheritedFrom": {
+                "name": "TextAnchor",
+                "module": "libs/components/src/lib/text-anchor/text-anchor.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "appearance",
+              "type": {
+                "text": "TextAnchorAppearance | undefined"
+              },
+              "description": "The appearance Text-Anchor should have.",
+              "privacy": "public",
+              "inheritedFrom": {
+                "name": "TextAnchor",
+                "module": "libs/components/src/lib/text-anchor/text-anchor.ts"
+              }
             }
           ],
           "superclass": {
             "name": "TextAnchor",
             "module": "/libs/components/src/lib/text-anchor/text-anchor"
           },
+          "vividComponent": {
+            "public": true,
+            "name": "nav-item"
+          },
           "attributes": [
             {
               "name": "text",
@@ -8330,6 +8915,30 @@
                 "name": "TextAnchor",
                 "module": "libs/components/src/lib/text-anchor/text-anchor.ts"
               }
+            },
+            {
+              "name": "connotation",
+              "type": {
+                "text": "TextAnchorConnotation | undefined"
+              },
+              "description": "The connotation Text-Anchor should have.",
+              "fieldName": "connotation",
+              "inheritedFrom": {
+                "name": "TextAnchor",
+                "module": "libs/components/src/lib/text-anchor/text-anchor.ts"
+              }
+            },
+            {
+              "name": "appearance",
+              "type": {
+                "text": "TextAnchorAppearance | undefined"
+              },
+              "description": "The appearance Text-Anchor should have.",
+              "fieldName": "appearance",
+              "inheritedFrom": {
+                "name": "TextAnchor",
+                "module": "libs/components/src/lib/text-anchor/text-anchor.ts"
+              }
             }
           ]
         }
@@ -8399,7 +9008,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "Base class for note",
+          "description": "",
           "name": "Note",
           "cssProperties": [
             {
@@ -8511,6 +9120,10 @@
           "superclass": {
             "name": "FoundationElement",
             "package": "@microsoft/fast-foundation"
+          },
+          "vividComponent": {
+            "public": true,
+            "name": "note"
           }
         }
       ],
@@ -8540,7 +9153,7 @@
           "type": {
             "text": "array"
           },
-          "default": "[numberFieldDefinition(), ...buttonRegistries, ...dividerRegistries]"
+          "default": "[\n\tnumberFieldDefinition(),\n\t...buttonRegistries,\n\t...dividerRegistries,\n]"
         },
         {
           "kind": "variable",
@@ -8609,7 +9222,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "Base class for number-field",
+          "description": "",
           "name": "NumberField",
           "cssProperties": [
             {
@@ -8645,12 +9258,18 @@
               "default": "var(--vvd-color-neutral-100)"
             }
           ],
+          "slots": [
+            {
+              "description": "Describes how to use the number-field. Alternative to the `helper-text` attribute.",
+              "name": "helper-text"
+            }
+          ],
           "members": [
             {
               "kind": "field",
               "name": "incrementButtonAriaLabel",
               "type": {
-                "text": "string | null"
+                "text": "| string\n\t\t| null"
               },
               "default": "null"
             },
@@ -8658,7 +9277,7 @@
               "kind": "field",
               "name": "decrementButtonAriaLabel",
               "type": {
-                "text": "string | null"
+                "text": "| string\n\t\t| null"
               },
               "default": "null"
             },
@@ -8719,7 +9338,7 @@
             {
               "name": "increment-button-aria-label",
               "type": {
-                "text": "string | null"
+                "text": "| string\n\t\t| null"
               },
               "default": "null",
               "fieldName": "incrementButtonAriaLabel"
@@ -8727,7 +9346,7 @@
             {
               "name": "decrement-button-aria-label",
               "type": {
-                "text": "string | null"
+                "text": "| string\n\t\t| null"
               },
               "default": "null",
               "fieldName": "decrementButtonAriaLabel"
@@ -8757,6 +9376,18 @@
           "superclass": {
             "name": "FastNumberField",
             "package": "@microsoft/fast-foundation"
+          },
+          "vividComponent": {
+            "public": true,
+            "name": "number-field",
+            "vueModels": [
+              {
+                "name": "modelValue",
+                "attributeName": "current-value",
+                "eventName": "input",
+                "valueMapping": "(event.target as HTMLInputElement).value"
+              }
+            ]
           }
         }
       ],
@@ -8817,7 +9448,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "Base class for option",
+          "description": "",
           "name": "ListboxOption",
           "cssProperties": [
             {
@@ -8832,6 +9463,10 @@
               "name": "--vvd-option-accent-primary-increment",
               "default": "var(--vvd-color-neutral-800)"
             },
+            {
+              "name": "--vvd-option-accent-firm",
+              "default": "var(--vvd-color-canvas-text)"
+            },
             {
               "name": "--vvd-option-accent-faint",
               "default": "var(--vvd-color-neutral-50)"
@@ -8903,6 +9538,10 @@
           "superclass": {
             "name": "FoundationListboxOption",
             "package": "@microsoft/fast-foundation"
+          },
+          "vividComponent": {
+            "public": true,
+            "name": "option"
           }
         }
       ],
@@ -8978,7 +9617,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "Base class for pagination",
+          "description": "",
           "name": "Pagination",
           "members": [
             {
@@ -9154,6 +9793,10 @@
           "superclass": {
             "name": "FoundationElement",
             "package": "@microsoft/fast-foundation"
+          },
+          "vividComponent": {
+            "public": true,
+            "name": "pagination"
           }
         }
       ],
@@ -9227,291 +9870,213 @@
     {
       "kind": "javascript-module",
       "path": "libs/components/src/lib/popup/popup.ts",
+      "declarations": [],
+      "exports": []
+    },
+    {
+      "kind": "javascript-module",
+      "path": "libs/components/src/lib/progress/definition.ts",
       "declarations": [
         {
-          "kind": "class",
-          "description": "Base class for popup",
-          "name": "Popup",
-          "slots": [
+          "kind": "variable",
+          "name": "progressDefinition",
+          "description": "The progress element."
+        },
+        {
+          "kind": "variable",
+          "name": "registerProgress",
+          "description": "Registers the progress elements with the design system.",
+          "parameters": [
             {
-              "description": "Default slot.",
-              "name": ""
+              "description": "the prefix to use for the component name",
+              "name": "prefix"
             }
-          ],
-          "members": [
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "ProgressConnotation",
+          "declaration": {
+            "name": "ProgressConnotation",
+            "module": "./progress"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "ProgressShape",
+          "declaration": {
+            "name": "ProgressShape",
+            "module": "./progress"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "progressDefinition",
+          "declaration": {
+            "name": "progressDefinition",
+            "module": "libs/components/src/lib/progress/definition.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "registerProgress",
+          "declaration": {
+            "name": "registerProgress",
+            "module": "libs/components/src/lib/progress/definition.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "libs/components/src/lib/progress/progress.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "Progress",
+          "cssProperties": [
             {
-              "kind": "field",
-              "name": "#middleware",
-              "privacy": "private",
-              "type": {
-                "text": "Array<any>"
-              },
-              "readonly": true
+              "name": "--vvd-progress-cta-primary",
+              "default": "var(--vvd-color-cta-500)"
             },
             {
-              "kind": "field",
-              "name": "#cleanup",
-              "privacy": "private",
-              "type": {
-                "text": "() => void | undefined"
-              }
+              "name": "--vvd-progress-cta-soft",
+              "default": "var(--vvd-color-cta-100)"
             },
             {
-              "kind": "field",
-              "name": "popupEl",
-              "type": {
-                "text": "HTMLElement"
-              }
+              "name": "--vvd-progress-alert-primary",
+              "default": "var(--vvd-color-alert-500)"
             },
             {
-              "kind": "field",
-              "name": "arrowEl",
-              "type": {
-                "text": "HTMLElement"
-              }
+              "name": "--vvd-progress-alert-soft",
+              "default": "var(--vvd-color-alert-100)"
             },
             {
-              "kind": "field",
-              "name": "open",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "indicates whether the popup is open",
-              "privacy": "public"
+              "name": "--vvd-progress-success-primary",
+              "default": "var(--vvd-color-success-500)"
             },
             {
-              "kind": "method",
-              "name": "openChanged",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "_",
-                  "type": {
-                    "text": "boolean"
-                  }
-                },
-                {
-                  "name": "newValue",
-                  "type": {
-                    "text": "boolean"
-                  }
-                }
-              ]
+              "name": "--vvd-progress-success-soft",
+              "default": "var(--vvd-color-success-100)"
             },
             {
-              "kind": "field",
-              "name": "dismissible",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "adds close button to the popup",
-              "privacy": "public"
+              "name": "--vvd-progress-accent-primary",
+              "default": "var(--vvd-color-canvas-text)"
             },
             {
-              "kind": "field",
-              "name": "arrow",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "adds small triangle to indicate the trigger element",
-              "privacy": "public"
-            },
+              "name": "--vvd-progress-accent-soft",
+              "default": "var(--vvd-color-neutral-100)"
+            }
+          ],
+          "members": [
             {
               "kind": "field",
-              "name": "alternate",
+              "name": "ariaLabel",
               "type": {
-                "text": "boolean"
+                "text": "string | null"
               },
-              "default": "false",
-              "description": "set the color-scheme to dark",
-              "privacy": "public"
+              "default": "null"
             },
             {
               "kind": "field",
-              "name": "placement",
+              "name": "shape",
               "type": {
-                "text": "Placement | undefined"
+                "text": "ProgressShape | undefined"
               },
-              "description": "the placement of the popup",
+              "description": "Indicates the progress' shape.",
               "privacy": "public"
             },
             {
               "kind": "field",
-              "name": "strategy",
+              "name": "connotation",
               "type": {
-                "text": "Strategy | undefined"
+                "text": "ProgressConnotation | undefined"
               },
-              "default": "'fixed'",
-              "description": "the strategy of the popup",
+              "description": "Indicates the progress' connotation.",
               "privacy": "public"
             },
             {
               "kind": "field",
-              "name": "anchor",
+              "name": "reverse",
               "type": {
-                "text": "HTMLElement | undefined"
+                "text": "boolean"
               },
-              "description": "The element to anchor the popup to.",
+              "default": "false",
+              "description": "Indicates the progress' reverse status.",
               "privacy": "public"
-            },
-            {
-              "kind": "method",
-              "name": "#updateAutoUpdate"
-            },
-            {
-              "kind": "method",
-              "name": "updatePosition",
-              "description": "Updates popup's position",
-              "privacy": "public",
-              "async": true
-            },
-            {
-              "kind": "method",
-              "name": "#assignPopupPosition",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "data",
-                  "type": {
-                    "text": "any"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "#assignArrowPosition",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "data",
-                  "type": {
-                    "text": "any"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "field",
-              "name": "anchorEl",
-              "type": {
-                "text": "HTMLElement | null"
-              },
-              "readonly": true
-            },
-            {
-              "kind": "method",
-              "name": "show",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              }
-            },
-            {
-              "kind": "method",
-              "name": "hide",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              }
             }
           ],
           "attributes": [
             {
+              "name": "aria-label",
               "type": {
-                "text": "boolean"
+                "text": "string | null"
               },
-              "default": "false",
-              "description": "indicates whether the popup is open",
-              "fieldName": "open"
+              "default": "null",
+              "fieldName": "ariaLabel"
             },
             {
+              "name": "shape",
               "type": {
-                "text": "boolean"
+                "text": "ProgressShape | undefined"
               },
-              "default": "false",
-              "description": "adds close button to the popup",
-              "fieldName": "dismissible"
+              "description": "Indicates the progress' shape.",
+              "fieldName": "shape"
             },
             {
+              "name": "connotation",
               "type": {
-                "text": "boolean"
+                "text": "ProgressConnotation | undefined"
               },
-              "default": "false",
-              "description": "adds small triangle to indicate the trigger element",
-              "fieldName": "arrow"
+              "description": "Indicates the progress' connotation.",
+              "fieldName": "connotation"
             },
             {
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "set the color-scheme to dark",
-              "fieldName": "alternate"
-            },
-            {
-              "type": {
-                "text": "Placement | undefined"
-              },
-              "description": "the placement of the popup",
-              "fieldName": "placement"
-            },
-            {
-              "type": {
-                "text": "Strategy | undefined"
-              },
-              "default": "'fixed'",
-              "description": "the strategy of the popup",
-              "fieldName": "strategy"
+              "description": "Indicates the progress' reverse status.",
+              "fieldName": "reverse"
             }
           ],
           "superclass": {
-            "name": "FoundationElement",
+            "name": "BaseProgress",
             "package": "@microsoft/fast-foundation"
+          },
+          "vividComponent": {
+            "public": true,
+            "name": "progress"
           }
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "Popup",
+          "name": "Progress",
           "declaration": {
-            "name": "Popup",
-            "module": "libs/components/src/lib/popup/popup.ts"
+            "name": "Progress",
+            "module": "libs/components/src/lib/progress/progress.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "libs/components/src/lib/progress/definition.ts",
+      "path": "libs/components/src/lib/progress-ring/definition.ts",
       "declarations": [
         {
           "kind": "variable",
-          "name": "progressDefinition",
-          "description": "The progress element."
+          "name": "progressRingDefinition",
+          "description": "The progress-ring element."
         },
         {
           "kind": "variable",
-          "name": "registerProgress",
-          "description": "Registers the progress elements with the design system.",
+          "name": "registerProgressRing",
+          "description": "Registers the progress-ring  elements with the design system.",
           "parameters": [
             {
               "description": "the prefix to use for the component name",
@@ -9523,78 +10088,54 @@
       "exports": [
         {
           "kind": "js",
-          "name": "ProgressConnotation",
-          "declaration": {
-            "name": "ProgressConnotation",
-            "module": "./progress"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "ProgressShape",
+          "name": "ProgressRingConnotation",
           "declaration": {
-            "name": "ProgressShape",
-            "module": "./progress"
+            "name": "ProgressRingConnotation",
+            "module": "./progress-ring"
           }
         },
         {
           "kind": "js",
-          "name": "progressDefinition",
+          "name": "progressRingDefinition",
           "declaration": {
-            "name": "progressDefinition",
-            "module": "libs/components/src/lib/progress/definition.ts"
+            "name": "progressRingDefinition",
+            "module": "libs/components/src/lib/progress-ring/definition.ts"
           }
         },
         {
           "kind": "js",
-          "name": "registerProgress",
+          "name": "registerProgressRing",
           "declaration": {
-            "name": "registerProgress",
-            "module": "libs/components/src/lib/progress/definition.ts"
+            "name": "registerProgressRing",
+            "module": "libs/components/src/lib/progress-ring/definition.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "libs/components/src/lib/progress/progress.ts",
+      "path": "libs/components/src/lib/progress-ring/progress-ring.ts",
       "declarations": [
         {
           "kind": "class",
-          "description": "Base class for progress",
-          "name": "Progress",
+          "description": "",
+          "name": "ProgressRing",
           "cssProperties": [
             {
-              "name": "--vvd-progress-cta-primary",
+              "name": "--vvd-progress-ring-cta-primary",
               "default": "var(--vvd-color-cta-500)"
             },
             {
-              "name": "--vvd-progress-cta-soft",
-              "default": "var(--vvd-color-cta-100)"
-            },
-            {
-              "name": "--vvd-progress-alert-primary",
+              "name": "--vvd-progress-ring-alert-primary",
               "default": "var(--vvd-color-alert-500)"
             },
             {
-              "name": "--vvd-progress-alert-soft",
-              "default": "var(--vvd-color-alert-100)"
-            },
-            {
-              "name": "--vvd-progress-success-primary",
+              "name": "--vvd-progress-ring-success-primary",
               "default": "var(--vvd-color-success-500)"
             },
             {
-              "name": "--vvd-progress-success-soft",
-              "default": "var(--vvd-color-success-100)"
-            },
-            {
-              "name": "--vvd-progress-accent-primary",
+              "name": "--vvd-progress-ring-accent-primary",
               "default": "var(--vvd-color-canvas-text)"
-            },
-            {
-              "name": "--vvd-progress-accent-soft",
-              "default": "var(--vvd-color-neutral-100)"
             }
           ],
           "members": [
@@ -9606,33 +10147,19 @@
               },
               "default": "null"
             },
-            {
-              "kind": "field",
-              "name": "shape",
-              "type": {
-                "text": "ProgressShape | undefined"
-              },
-              "description": "Indicates the progress' shape.",
-              "privacy": "public"
-            },
             {
               "kind": "field",
               "name": "connotation",
               "type": {
-                "text": "ProgressConnotation | undefined"
-              },
-              "description": "Indicates the progress' connotation.",
-              "privacy": "public"
+                "text": "ProgressRingConnotation | undefined"
+              }
             },
             {
               "kind": "field",
-              "name": "reverse",
+              "name": "size",
               "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Indicates the progress' reverse status.",
-              "privacy": "public"
+                "text": "-6 | -5 | -4 | -3 | -2 | -1 | 0 | 1 | 2 | 3 | 4 | 5 | undefined"
+              }
             }
           ],
           "attributes": [
@@ -9644,61 +10171,55 @@
               "default": "null",
               "fieldName": "ariaLabel"
             },
-            {
-              "name": "shape",
-              "type": {
-                "text": "ProgressShape | undefined"
-              },
-              "description": "Indicates the progress' shape.",
-              "fieldName": "shape"
-            },
             {
               "name": "connotation",
               "type": {
-                "text": "ProgressConnotation | undefined"
+                "text": "ProgressRingConnotation | undefined"
               },
-              "description": "Indicates the progress' connotation.",
               "fieldName": "connotation"
             },
             {
+              "name": "size",
               "type": {
-                "text": "boolean"
+                "text": "-6 | -5 | -4 | -3 | -2 | -1 | 0 | 1 | 2 | 3 | 4 | 5 | undefined"
               },
-              "default": "false",
-              "description": "Indicates the progress' reverse status.",
-              "fieldName": "reverse"
+              "fieldName": "size"
             }
           ],
           "superclass": {
             "name": "BaseProgress",
             "package": "@microsoft/fast-foundation"
+          },
+          "vividComponent": {
+            "public": true,
+            "name": "progress-ring"
           }
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "Progress",
+          "name": "ProgressRing",
           "declaration": {
-            "name": "Progress",
-            "module": "libs/components/src/lib/progress/progress.ts"
+            "name": "ProgressRing",
+            "module": "libs/components/src/lib/progress-ring/progress-ring.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "libs/components/src/lib/progress-ring/definition.ts",
+      "path": "libs/components/src/lib/radio/definition.ts",
       "declarations": [
         {
           "kind": "variable",
-          "name": "progressRingDefinition",
-          "description": "The progress-ring element."
+          "name": "radioDefinition",
+          "description": "The radio element."
         },
         {
           "kind": "variable",
-          "name": "registerProgressRing",
-          "description": "Registers the progress-ring  elements with the design system.",
+          "name": "registerRadio",
+          "description": "Registers the radio elements with the design system.",
           "parameters": [
             {
               "description": "the prefix to use for the component name",
@@ -9710,54 +10231,78 @@
       "exports": [
         {
           "kind": "js",
-          "name": "ProgressRingConnotation",
-          "declaration": {
-            "name": "ProgressRingConnotation",
-            "module": "./progress-ring"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "progressRingDefinition",
+          "name": "radioDefinition",
           "declaration": {
-            "name": "progressRingDefinition",
-            "module": "libs/components/src/lib/progress-ring/definition.ts"
+            "name": "radioDefinition",
+            "module": "libs/components/src/lib/radio/definition.ts"
           }
         },
         {
           "kind": "js",
-          "name": "registerProgressRing",
+          "name": "registerRadio",
           "declaration": {
-            "name": "registerProgressRing",
-            "module": "libs/components/src/lib/progress-ring/definition.ts"
+            "name": "registerRadio",
+            "module": "libs/components/src/lib/radio/definition.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "libs/components/src/lib/progress-ring/progress-ring.ts",
+      "path": "libs/components/src/lib/radio/radio.ts",
       "declarations": [
         {
           "kind": "class",
-          "description": "Base class for progress-ring",
-          "name": "ProgressRing",
+          "description": "",
+          "name": "Radio",
           "cssProperties": [
             {
-              "name": "--vvd-progress-ring-cta-primary",
+              "name": "--vvd-radio-cta-primary",
               "default": "var(--vvd-color-cta-500)"
             },
             {
-              "name": "--vvd-progress-ring-alert-primary",
-              "default": "var(--vvd-color-alert-500)"
+              "name": "--vvd-radio-cta-primary-text",
+              "default": "var(--vvd-color-canvas)"
             },
             {
-              "name": "--vvd-progress-ring-success-primary",
-              "default": "var(--vvd-color-success-500)"
+              "name": "--vvd-radio-cta-primary-increment",
+              "default": "var(--vvd-color-cta-600)"
             },
             {
-              "name": "--vvd-progress-ring-accent-primary",
+              "name": "--vvd-radio-cta-intermediate",
+              "default": "var(--vvd-color-cta-500)"
+            },
+            {
+              "name": "--vvd-radio-cta-firm",
+              "default": "var(--vvd-color-cta-600)"
+            },
+            {
+              "name": "--vvd-radio-cta-fierce",
+              "default": "var(--vvd-color-cta-700)"
+            },
+            {
+              "name": "--vvd-radio-accent-primary",
               "default": "var(--vvd-color-canvas-text)"
+            },
+            {
+              "name": "--vvd-radio-accent-primary-text",
+              "default": "var(--vvd-color-canvas)"
+            },
+            {
+              "name": "--vvd-radio-accent-primary-increment",
+              "default": "var(--vvd-color-neutral-800)"
+            },
+            {
+              "name": "--vvd-radio-accent-intermediate",
+              "default": "var(--vvd-color-neutral-500)"
+            },
+            {
+              "name": "--vvd-radio-accent-firm",
+              "default": "var(--vvd-color-canvas-text)"
+            },
+            {
+              "name": "--vvd-radio-accent-fierce",
+              "default": "var(--vvd-color-neutral-700)"
             }
           ],
           "members": [
@@ -9771,17 +10316,21 @@
             },
             {
               "kind": "field",
-              "name": "connotation",
+              "name": "label",
               "type": {
-                "text": "ProgressRingConnotation | undefined"
-              }
+                "text": "string | undefined"
+              },
+              "description": "Indicates the radio's label.",
+              "privacy": "public"
             },
             {
               "kind": "field",
-              "name": "size",
+              "name": "connotation",
               "type": {
-                "text": "-6 | -5 | -4 | -3 | -2 | -1 | 0 | 1 | 2 | 3 | 4 | 5 | undefined"
-              }
+                "text": "RadioConnotation | undefined"
+              },
+              "description": "The connotation the radioButton should have.",
+              "privacy": "public"
             }
           ],
           "attributes": [
@@ -9793,51 +10342,160 @@
               "default": "null",
               "fieldName": "ariaLabel"
             },
+            {
+              "name": "label",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Indicates the radio's label.",
+              "fieldName": "label"
+            },
             {
               "name": "connotation",
               "type": {
-                "text": "ProgressRingConnotation | undefined"
+                "text": "RadioConnotation | undefined"
               },
+              "description": "The connotation the radioButton should have.",
               "fieldName": "connotation"
-            },
+            }
+          ],
+          "superclass": {
+            "name": "FastRadio",
+            "package": "@microsoft/fast-foundation"
+          },
+          "vividComponent": {
+            "public": true,
+            "name": "radio"
+          }
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "Radio",
+          "declaration": {
+            "name": "Radio",
+            "module": "libs/components/src/lib/radio/radio.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "libs/components/src/lib/radio-group/definition.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "radioGroupDefinition",
+          "description": "The radio-group element is a custom element that is used to display a group of radio buttons."
+        },
+        {
+          "kind": "variable",
+          "name": "registerRadioGroup",
+          "description": "Registers the radio-group elements with the design system.",
+          "parameters": [
             {
-              "name": "size",
+              "description": "the prefix to use for the component name",
+              "name": "prefix"
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "radioGroupDefinition",
+          "declaration": {
+            "name": "radioGroupDefinition",
+            "module": "libs/components/src/lib/radio-group/definition.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "registerRadioGroup",
+          "declaration": {
+            "name": "registerRadioGroup",
+            "module": "libs/components/src/lib/radio-group/definition.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "libs/components/src/lib/radio-group/radio-group.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "RadioGroup",
+          "slots": [
+            {
+              "description": "Default slot.",
+              "name": ""
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "label",
               "type": {
-                "text": "-6 | -5 | -4 | -3 | -2 | -1 | 0 | 1 | 2 | 3 | 4 | 5 | undefined"
+                "text": "string | undefined"
               },
-              "fieldName": "size"
+              "description": "Indicates the group's label.",
+              "privacy": "public"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "label",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Indicates the group's label.",
+              "fieldName": "label"
             }
           ],
           "superclass": {
-            "name": "BaseProgress",
+            "name": "FastRadioGroup",
             "package": "@microsoft/fast-foundation"
+          },
+          "vividComponent": {
+            "public": true,
+            "name": "radio-group",
+            "vueModels": [
+              {
+                "name": "modelValue",
+                "attributeName": "value",
+                "eventName": "change",
+                "valueMapping": "(event.target as HTMLInputElement).value"
+              }
+            ]
           }
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "ProgressRing",
+          "name": "RadioGroup",
           "declaration": {
-            "name": "ProgressRing",
-            "module": "libs/components/src/lib/progress-ring/progress-ring.ts"
+            "name": "RadioGroup",
+            "module": "libs/components/src/lib/radio-group/radio-group.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "libs/components/src/lib/radio/definition.ts",
+      "path": "libs/components/src/lib/range-slider/definition.ts",
       "declarations": [
         {
           "kind": "variable",
-          "name": "radioDefinition",
-          "description": "The radio element."
+          "name": "rangeSliderDefinition"
         },
         {
           "kind": "variable",
-          "name": "registerRadio",
-          "description": "Registers the radio elements with the design system.",
+          "name": "registerRangeSlider",
+          "description": "Registers the range-slider element with the design system.",
           "parameters": [
             {
               "description": "the prefix to use for the component name",
@@ -9849,239 +10507,543 @@
       "exports": [
         {
           "kind": "js",
-          "name": "radioDefinition",
+          "name": "rangeSliderDefinition",
           "declaration": {
-            "name": "radioDefinition",
-            "module": "libs/components/src/lib/radio/definition.ts"
+            "name": "rangeSliderDefinition",
+            "module": "libs/components/src/lib/range-slider/definition.ts"
           }
         },
         {
           "kind": "js",
-          "name": "registerRadio",
+          "name": "registerRangeSlider",
           "declaration": {
-            "name": "registerRadio",
-            "module": "libs/components/src/lib/radio/definition.ts"
+            "name": "registerRangeSlider",
+            "module": "libs/components/src/lib/range-slider/definition.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "libs/components/src/lib/radio/radio.ts",
+      "path": "libs/components/src/lib/range-slider/locale.ts",
+      "declarations": [],
+      "exports": []
+    },
+    {
+      "kind": "javascript-module",
+      "path": "libs/components/src/lib/range-slider/range-slider.form-associated.ts",
       "declarations": [
         {
           "kind": "class",
-          "description": "Base class for radio",
-          "name": "Radio",
+          "description": "",
+          "name": "FormAssociatedRangeSlider",
+          "members": [
+            {
+              "kind": "field",
+              "name": "proxy"
+            }
+          ],
+          "mixins": [
+            {
+              "name": "FormAssociated",
+              "package": "@microsoft/fast-foundation"
+            }
+          ],
+          "superclass": {
+            "name": "_RangeSlider",
+            "module": "libs/components/src/lib/range-slider/range-slider.form-associated.ts"
+          }
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "FormAssociatedRangeSlider",
+          "declaration": {
+            "name": "FormAssociatedRangeSlider",
+            "module": "libs/components/src/lib/range-slider/range-slider.form-associated.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "libs/components/src/lib/range-slider/range-slider.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Base class for range-slider",
+          "name": "RangeSlider",
           "cssProperties": [
             {
-              "name": "--vvd-radio-cta-primary",
+              "name": "--vvd-slider-cta-primary",
               "default": "var(--vvd-color-cta-500)"
             },
             {
-              "name": "--vvd-radio-cta-primary-text",
-              "default": "var(--vvd-color-canvas)"
+              "name": "--vvd-slider-accent-primary",
+              "default": "var(--vvd-color-canvas-text)"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "#isInternalValueUpdate",
+              "privacy": "private",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "start",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The start value of the range."
+            },
+            {
+              "kind": "field",
+              "name": "initialStart",
+              "type": {
+                "text": "| string\n\t\t| undefined"
+              },
+              "description": "The initial start value. This value sets the `start` property\nonly when the `start` property has not been explicitly set."
+            },
+            {
+              "kind": "field",
+              "name": "currentStart",
+              "type": {
+                "text": "string"
+              },
+              "description": "The current start value of the element. This property serves as a mechanism\nto set the `start` property through both property assignment and the\n.setAttribute() method. This is useful for setting the field's value\nin UI libraries that bind data through the .setAttribute() API\nand don't support IDL attribute binding."
+            },
+            {
+              "kind": "field",
+              "name": "startAsNumber",
+              "type": {
+                "text": "number"
+              },
+              "description": "The start property, typed as a number.",
+              "privacy": "public"
+            },
+            {
+              "kind": "field",
+              "name": "end",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The end value of the range."
+            },
+            {
+              "kind": "field",
+              "name": "initialEnd",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The initial end value. This value sets the `end` property\nonly when the `end` property has not been explicitly set."
+            },
+            {
+              "kind": "field",
+              "name": "currentEnd",
+              "type": {
+                "text": "string"
+              },
+              "description": "The current end value of the element. This property serves as a mechanism\nto set the `end` property through both property assignment and the\n.setAttribute() method. This is useful for setting the field's value\nin UI libraries that bind data through the .setAttribute() API\nand don't support IDL attribute binding."
+            },
+            {
+              "kind": "field",
+              "name": "endAsNumber",
+              "description": "The end property, typed as a number.",
+              "privacy": "public"
+            },
+            {
+              "kind": "method",
+              "name": "#updateValues",
+              "parameters": [
+                {
+                  "name": "{ start, end }",
+                  "type": {
+                    "text": "{ start?: string; end?: string }"
+                  }
+                },
+                {
+                  "name": "emitEvents",
+                  "default": "true",
+                  "type": {
+                    "text": "boolean"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "field",
+              "name": "min",
+              "type": {
+                "text": "number"
+              },
+              "default": "0",
+              "description": "The minimum value of the range.",
+              "privacy": "public"
+            },
+            {
+              "kind": "field",
+              "name": "max",
+              "type": {
+                "text": "number"
+              },
+              "default": "10",
+              "description": "The maximum value of the range.",
+              "privacy": "public"
+            },
+            {
+              "kind": "field",
+              "name": "step",
+              "type": {
+                "text": "number"
+              },
+              "default": "1",
+              "description": "Value to increment or decrement via arrow keys, mouse click or drag.",
+              "privacy": "public"
+            },
+            {
+              "kind": "method",
+              "name": "#applyStep",
+              "parameters": [
+                {
+                  "name": "thumb",
+                  "type": {
+                    "text": "'start' | 'end'"
+                  }
+                },
+                {
+                  "name": "direction",
+                  "type": {
+                    "text": "Direction"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "field",
+              "name": "orientation",
+              "type": {
+                "text": "Orientation"
+              },
+              "description": "The orientation of the slider.",
+              "privacy": "public"
+            },
+            {
+              "kind": "field",
+              "name": "ariaStartLabel",
+              "type": {
+                "text": "string | null"
+              },
+              "default": "null",
+              "description": "Aria label for the start thumb",
+              "privacy": "public"
+            },
+            {
+              "kind": "field",
+              "name": "ariaEndLabel",
+              "type": {
+                "text": "string | null"
+              },
+              "default": "null",
+              "description": "Aria label for the end thumb",
+              "privacy": "public"
+            },
+            {
+              "kind": "field",
+              "name": "markers",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Display markers on/off",
+              "privacy": "public"
+            },
+            {
+              "kind": "field",
+              "name": "connotation",
+              "type": {
+                "text": "RangeSliderConnotation | undefined"
+              },
+              "description": "The connotation of the component",
+              "privacy": "public"
+            },
+            {
+              "kind": "field",
+              "name": "valueTextFormatter",
+              "type": {
+                "text": "(value: string) => string"
+              },
+              "description": "Custom function that generates a string for the component's \"aria-valuetext\" attribute based on the current value.",
+              "privacy": "public"
+            },
+            {
+              "kind": "method",
+              "name": "#updateFormValue"
+            },
+            {
+              "kind": "method",
+              "name": "formResetCallback"
+            },
+            {
+              "kind": "field",
+              "name": "#thumbs",
+              "privacy": "private",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "#thumbConstraints",
+              "privacy": "private",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "#draggingThumb",
+              "privacy": "private",
+              "type": {
+                "text": "false | 'start' | 'end'"
+              },
+              "default": "false"
+            },
+            {
+              "kind": "method",
+              "name": "#updateThumbPositions"
+            },
+            {
+              "kind": "method",
+              "name": "#thumbTrackEndOffset",
+              "parameters": [
+                {
+                  "name": "value",
+                  "type": {
+                    "text": "number"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "#calculateValueFromMouseEvent",
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "Pick<MouseEvent, 'pageX' | 'pageY'>"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "#roundToNearestStep",
+              "parameters": [
+                {
+                  "name": "thumb",
+                  "type": {
+                    "text": "'start' | 'end'"
+                  }
+                },
+                {
+                  "name": "value",
+                  "type": {
+                    "text": "number"
+                  }
+                }
+              ]
             },
             {
-              "name": "--vvd-radio-cta-primary-increment",
-              "default": "var(--vvd-color-cta-600)"
+              "kind": "method",
+              "name": "#registerThumbListeners"
             },
             {
-              "name": "--vvd-radio-cta-intermediate",
-              "default": "var(--vvd-color-cta-500)"
+              "kind": "method",
+              "name": "#unregisterThumbListeners"
             },
             {
-              "name": "--vvd-radio-cta-firm",
-              "default": "var(--vvd-color-cta-600)"
+              "kind": "field",
+              "name": "#onThumbMousedown",
+              "privacy": "private"
             },
             {
-              "name": "--vvd-radio-cta-fierce",
-              "default": "var(--vvd-color-cta-700)"
+              "kind": "field",
+              "name": "#onThumbKeydown",
+              "privacy": "private"
             },
             {
-              "name": "--vvd-radio-accent-primary",
-              "default": "var(--vvd-color-canvas-text)"
+              "kind": "method",
+              "name": "#registerDragHandlers"
             },
             {
-              "name": "--vvd-radio-accent-primary-text",
-              "default": "var(--vvd-color-canvas)"
+              "kind": "method",
+              "name": "#unregisterDragListeners"
             },
             {
-              "name": "--vvd-radio-accent-primary-increment",
-              "default": "var(--vvd-color-neutral-800)"
+              "kind": "field",
+              "name": "#onDragMove",
+              "privacy": "private"
             },
             {
-              "name": "--vvd-radio-accent-intermediate",
-              "default": "var(--vvd-color-neutral-500)"
+              "kind": "field",
+              "name": "#onDragEnd",
+              "privacy": "private"
             },
             {
-              "name": "--vvd-radio-accent-firm",
-              "default": "var(--vvd-color-canvas-text)"
+              "kind": "field",
+              "name": "proxy",
+              "inheritedFrom": {
+                "name": "FormAssociatedRangeSlider",
+                "module": "libs/components/src/lib/range-slider/range-slider.form-associated.ts"
+              }
+            }
+          ],
+          "events": [
+            {
+              "description": "Event emitted when the start value changes",
+              "name": "input:start"
             },
             {
-              "name": "--vvd-radio-accent-fierce",
-              "default": "var(--vvd-color-neutral-700)"
+              "description": "Event emitted when the end value changes",
+              "name": "input:end"
             }
           ],
-          "members": [
+          "attributes": [
             {
-              "kind": "field",
-              "name": "ariaLabel",
+              "name": "start",
               "type": {
-                "text": "string | null"
+                "text": "| string\n\t\t| undefined"
               },
-              "default": "null"
+              "description": "The initial start value. This value sets the `start` property\nonly when the `start` property has not been explicitly set.",
+              "fieldName": "initialStart"
             },
             {
-              "kind": "field",
-              "name": "label",
+              "name": "current-start",
+              "type": {
+                "text": "string"
+              },
+              "description": "The current start value of the element. This property serves as a mechanism\nto set the `start` property through both property assignment and the\n.setAttribute() method. This is useful for setting the field's value\nin UI libraries that bind data through the .setAttribute() API\nand don't support IDL attribute binding.",
+              "fieldName": "currentStart"
+            },
+            {
+              "name": "end",
               "type": {
                 "text": "string | undefined"
               },
-              "description": "Indicates the radio's label.",
-              "privacy": "public"
+              "description": "The initial end value. This value sets the `end` property\nonly when the `end` property has not been explicitly set.",
+              "fieldName": "initialEnd"
             },
             {
-              "kind": "field",
-              "name": "connotation",
+              "name": "current-end",
               "type": {
-                "text": "RadioConnotation | undefined"
+                "text": "string"
               },
-              "description": "The connotation the radioButton should have.",
-              "privacy": "public"
-            }
-          ],
-          "attributes": [
+              "description": "The current end value of the element. This property serves as a mechanism\nto set the `end` property through both property assignment and the\n.setAttribute() method. This is useful for setting the field's value\nin UI libraries that bind data through the .setAttribute() API\nand don't support IDL attribute binding.",
+              "fieldName": "currentEnd"
+            },
             {
-              "name": "aria-label",
               "type": {
-                "text": "string | null"
+                "text": "number"
               },
-              "default": "null",
-              "fieldName": "ariaLabel"
+              "default": "0",
+              "description": "The minimum value of the range.",
+              "fieldName": "min"
             },
             {
-              "name": "label",
               "type": {
-                "text": "string | undefined"
+                "text": "number"
               },
-              "description": "Indicates the radio's label.",
-              "fieldName": "label"
+              "default": "10",
+              "description": "The maximum value of the range.",
+              "fieldName": "max"
             },
             {
-              "name": "connotation",
               "type": {
-                "text": "RadioConnotation | undefined"
+                "text": "number"
               },
-              "description": "The connotation the radioButton should have.",
-              "fieldName": "connotation"
-            }
-          ],
-          "superclass": {
-            "name": "FastRadio",
-            "package": "@microsoft/fast-foundation"
-          }
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "Radio",
-          "declaration": {
-            "name": "Radio",
-            "module": "libs/components/src/lib/radio/radio.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "libs/components/src/lib/radio-group/definition.ts",
-      "declarations": [
-        {
-          "kind": "variable",
-          "name": "radioGroupDefinition",
-          "description": "The radio-group element is a custom element that is used to display a group of radio buttons."
-        },
-        {
-          "kind": "variable",
-          "name": "registerRadioGroup",
-          "description": "Registers the radio-group elements with the design system.",
-          "parameters": [
+              "default": "1",
+              "description": "Value to increment or decrement via arrow keys, mouse click or drag.",
+              "fieldName": "step"
+            },
             {
-              "description": "the prefix to use for the component name",
-              "name": "prefix"
-            }
-          ]
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "radioGroupDefinition",
-          "declaration": {
-            "name": "radioGroupDefinition",
-            "module": "libs/components/src/lib/radio-group/definition.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "registerRadioGroup",
-          "declaration": {
-            "name": "registerRadioGroup",
-            "module": "libs/components/src/lib/radio-group/definition.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "libs/components/src/lib/radio-group/radio-group.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "Base class for radio-group",
-          "name": "RadioGroup",
-          "slots": [
+              "name": "orientation",
+              "type": {
+                "text": "Orientation"
+              },
+              "description": "The orientation of the slider.",
+              "fieldName": "orientation"
+            },
             {
-              "description": "Default slot.",
-              "name": ""
-            }
-          ],
-          "members": [
+              "name": "aria-start-label",
+              "type": {
+                "text": "string | null"
+              },
+              "default": "null",
+              "description": "Aria label for the start thumb",
+              "fieldName": "ariaStartLabel"
+            },
             {
-              "kind": "field",
-              "name": "label",
+              "name": "aria-end-label",
               "type": {
-                "text": "string | undefined"
+                "text": "string | null"
               },
-              "description": "Indicates the group's label.",
-              "privacy": "public"
-            }
-          ],
-          "attributes": [
+              "default": "null",
+              "description": "Aria label for the end thumb",
+              "fieldName": "ariaEndLabel"
+            },
             {
-              "name": "label",
               "type": {
-                "text": "string | undefined"
+                "text": "boolean"
               },
-              "description": "Indicates the group's label.",
-              "fieldName": "label"
+              "default": "false",
+              "description": "Display markers on/off",
+              "fieldName": "markers"
+            },
+            {
+              "name": "connotation",
+              "type": {
+                "text": "RangeSliderConnotation | undefined"
+              },
+              "description": "The connotation of the component",
+              "fieldName": "connotation"
             }
           ],
           "superclass": {
-            "name": "FastRadioGroup",
-            "package": "@microsoft/fast-foundation"
+            "name": "FormAssociatedRangeSlider",
+            "module": "/libs/components/src/lib/range-slider/range-slider.form-associated"
+          },
+          "vividComponent": {
+            "name": "range-slider",
+            "public": true,
+            "vueModels": [
+              {
+                "name": "start",
+                "attributeName": "current-start",
+                "eventName": "input:start",
+                "valueMapping": "(event.target as any).start"
+              },
+              {
+                "name": "end",
+                "attributeName": "current-end",
+                "eventName": "input:end",
+                "valueMapping": "(event.target as any).end"
+              }
+            ]
           }
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "RadioGroup",
+          "name": "RangeSlider",
           "declaration": {
-            "name": "RadioGroup",
-            "module": "libs/components/src/lib/radio-group/radio-group.ts"
+            "name": "RangeSlider",
+            "module": "libs/components/src/lib/range-slider/range-slider.ts"
           }
         }
       ]
@@ -10148,7 +11110,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "Base class for select",
+          "description": "",
           "name": "Select",
           "cssProperties": [
             {
@@ -10188,6 +11150,10 @@
             {
               "description": "Slot to add meta content to the select control.",
               "name": "meta"
+            },
+            {
+              "description": "Describes how to use the select. Alternative to the `helper-text` attribute.",
+              "name": "helper-text"
             }
           ],
           "members": [
@@ -10284,6 +11250,18 @@
           "superclass": {
             "name": "FoundationSelect",
             "package": "@microsoft/fast-foundation"
+          },
+          "vividComponent": {
+            "public": true,
+            "name": "select",
+            "vueModels": [
+              {
+                "name": "modelValue",
+                "attributeName": "current-value",
+                "eventName": "input",
+                "valueMapping": "(event.target as HTMLInputElement).value"
+              }
+            ]
           }
         }
       ],
@@ -10343,7 +11321,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "Base class for selectable-box",
+          "description": "",
           "name": "SelectableBox",
           "cssProperties": [
             {
@@ -10529,6 +11507,10 @@
           "superclass": {
             "name": "FoundationElement",
             "package": "@microsoft/fast-foundation"
+          },
+          "vividComponent": {
+            "public": true,
+            "name": "selectable-box"
           }
         }
       ],
@@ -10589,7 +11571,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "Base class for side-drawer",
+          "description": "",
           "name": "SideDrawer",
           "slots": [
             {
@@ -10708,6 +11690,10 @@
           "superclass": {
             "name": "FoundationElement",
             "package": "@microsoft/fast-foundation"
+          },
+          "vividComponent": {
+            "public": true,
+            "name": "side-drawer"
           }
         }
       ],
@@ -10776,7 +11762,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "Base class for slider",
+          "description": "",
           "name": "Slider",
           "cssProperties": [
             {
@@ -10862,6 +11848,18 @@
           "superclass": {
             "name": "FastSlider",
             "package": "@microsoft/fast-foundation"
+          },
+          "vividComponent": {
+            "public": true,
+            "name": "slider",
+            "vueModels": [
+              {
+                "name": "modelValue",
+                "attributeName": "current-value",
+                "eventName": "change",
+                "valueMapping": "(event.target as HTMLInputElement).value"
+              }
+            ]
           }
         }
       ],
@@ -10947,7 +11945,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "Base class for split button",
+          "description": "",
           "name": "SplitButton",
           "cssProperties": [
             {
@@ -11218,7 +12216,7 @@
               "kind": "field",
               "name": "indicatorAriaLabel",
               "type": {
-                "text": "string | null"
+                "text": "| string\n\t\t| null"
               },
               "default": "null",
               "description": "Defines a string value that labels the indicator element.\n\nhttps://www.w3.org/TR/wai-aria-1.1/#aria-label",
@@ -11321,7 +12319,7 @@
             {
               "name": "indicator-aria-label",
               "type": {
-                "text": "string | null"
+                "text": "| string\n\t\t| null"
               },
               "default": "null",
               "description": "Defines a string value that labels the indicator element.\n\nhttps://www.w3.org/TR/wai-aria-1.1/#aria-label",
@@ -11331,6 +12329,10 @@
           "superclass": {
             "name": "FoundationElement",
             "package": "@microsoft/fast-foundation"
+          },
+          "vividComponent": {
+            "public": true,
+            "name": "split-button"
           }
         }
       ],
@@ -11399,7 +12401,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "Base class for switch",
+          "description": "",
           "name": "Switch",
           "cssProperties": [
             {
@@ -11540,6 +12542,18 @@
           "superclass": {
             "name": "FoundationSwitch",
             "package": "@microsoft/fast-foundation"
+          },
+          "vividComponent": {
+            "public": true,
+            "name": "switch",
+            "vueModels": [
+              {
+                "name": "modelValue",
+                "attributeName": "current-checked",
+                "eventName": "change",
+                "valueMapping": "(event.target as HTMLInputElement).checked"
+              }
+            ]
           }
         }
       ],
@@ -11616,7 +12630,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "Base class for tab",
+          "description": "",
           "name": "Tab",
           "cssProperties": [
             {
@@ -11763,6 +12777,10 @@
           "superclass": {
             "name": "FoundationTab",
             "package": "@microsoft/fast-foundation"
+          },
+          "vividComponent": {
+            "public": true,
+            "name": "tab"
           }
         }
       ],
@@ -11823,7 +12841,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "Base class for tab-panel",
+          "description": "",
           "name": "TabPanel",
           "slots": [
             {
@@ -11834,6 +12852,10 @@
           "superclass": {
             "name": "FoundationTabPanel",
             "package": "@microsoft/fast-foundation"
+          },
+          "vividComponent": {
+            "public": true,
+            "name": "tab-panel"
           }
         }
       ],
@@ -11902,7 +12924,7 @@
         },
         {
           "kind": "class",
-          "description": "Base class for tabs",
+          "description": "",
           "name": "Tabs",
           "cssProperties": [
             {
@@ -12071,6 +13093,10 @@
           "superclass": {
             "name": "FoundationTabs",
             "package": "@microsoft/fast-foundation"
+          },
+          "vividComponent": {
+            "public": true,
+            "name": "tabs"
           }
         }
       ],
@@ -12163,7 +13189,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "Base class for tag.",
+          "description": "",
           "name": "Tag",
           "cssProperties": [
             {
@@ -12411,6 +13437,10 @@
           "superclass": {
             "name": "FoundationElement",
             "package": "@microsoft/fast-foundation"
+          },
+          "vividComponent": {
+            "public": true,
+            "name": "tag"
           }
         }
       ],
@@ -12470,7 +13500,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "Base class for tag-group",
+          "description": "",
           "name": "TagGroup",
           "slots": [
             {
@@ -12501,6 +13531,10 @@
           "superclass": {
             "name": "FoundationElement",
             "package": "@microsoft/fast-foundation"
+          },
+          "vividComponent": {
+            "public": true,
+            "name": "tag-group"
           }
         }
       ],
@@ -12537,6 +13571,22 @@
         }
       ],
       "exports": [
+        {
+          "kind": "js",
+          "name": "TextAnchorConnotation",
+          "declaration": {
+            "name": "TextAnchorConnotation",
+            "module": "./text-anchor"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "TextAnchorAppearance",
+          "declaration": {
+            "name": "TextAnchorAppearance",
+            "module": "./text-anchor"
+          }
+        },
         {
           "kind": "js",
           "name": "textAnchorDefinition",
@@ -12561,7 +13611,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "Base class for text-anchor",
+          "description": "",
           "name": "TextAnchor",
           "slots": [
             {
@@ -12578,6 +13628,24 @@
               },
               "description": "Indicates the text anchor's text.",
               "privacy": "public"
+            },
+            {
+              "kind": "field",
+              "name": "connotation",
+              "type": {
+                "text": "TextAnchorConnotation | undefined"
+              },
+              "description": "The connotation Text-Anchor should have.",
+              "privacy": "public"
+            },
+            {
+              "kind": "field",
+              "name": "appearance",
+              "type": {
+                "text": "TextAnchorAppearance | undefined"
+              },
+              "description": "The appearance Text-Anchor should have.",
+              "privacy": "public"
             }
           ],
           "attributes": [
@@ -12588,11 +13656,30 @@
               },
               "description": "Indicates the text anchor's text.",
               "fieldName": "text"
+            },
+            {
+              "name": "connotation",
+              "type": {
+                "text": "TextAnchorConnotation | undefined"
+              },
+              "description": "The connotation Text-Anchor should have.",
+              "fieldName": "connotation"
+            },
+            {
+              "name": "appearance",
+              "type": {
+                "text": "TextAnchorAppearance | undefined"
+              },
+              "description": "The appearance Text-Anchor should have.",
+              "fieldName": "appearance"
             }
           ],
           "superclass": {
             "name": "Anchor",
             "package": "@microsoft/fast-foundation"
+          },
+          "vividComponent": {
+            "name": "text-anchor"
           }
         }
       ],
@@ -12661,7 +13748,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "Base class for text-area",
+          "description": "",
           "name": "TextArea",
           "cssProperties": [
             {
@@ -12761,6 +13848,12 @@
               "default": "var(--vvd-color-neutral-100)"
             }
           ],
+          "slots": [
+            {
+              "description": "Describes how to use the text-area. Alternative to the `helper-text` attribute.",
+              "name": "helper-text"
+            }
+          ],
           "members": [
             {
               "kind": "field",
@@ -12793,6 +13886,18 @@
           "superclass": {
             "name": "FoundationTextArea",
             "package": "@microsoft/fast-foundation"
+          },
+          "vividComponent": {
+            "public": true,
+            "name": "text-area",
+            "vueModels": [
+              {
+                "name": "modelValue",
+                "attributeName": "current-value",
+                "eventName": "input",
+                "valueMapping": "(event.target as HTMLInputElement).value"
+              }
+            ]
           }
         }
       ],
@@ -12913,6 +14018,10 @@
             {
               "description": "Used to add action items to the end of the text-field.",
               "name": "action-items"
+            },
+            {
+              "description": "Describes how to use the text-field. Alternative to the `helper-text` attribute.",
+              "name": "helper-text"
             }
           ],
           "members": [
@@ -12995,6 +14104,18 @@
           "superclass": {
             "name": "FoundationTextfield",
             "package": "@microsoft/fast-foundation"
+          },
+          "vividComponent": {
+            "public": true,
+            "name": "text-field",
+            "vueModels": [
+              {
+                "name": "modelValue",
+                "attributeName": "current-value",
+                "eventName": "input",
+                "valueMapping": "(event.target as HTMLInputElement).value"
+              }
+            ]
           }
         }
       ],
@@ -13097,13 +14218,17 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "Base class for time-picker",
+          "description": "",
           "name": "TimePicker",
           "cssProperties": [
             {
               "name": "--vvd-time-picker-accent-primary",
               "default": "var(--vvd-color-canvas-text)"
             },
+            {
+              "name": "--vvd-time-picker-accent-firm",
+              "default": "var(--vvd-color-canvas-text)"
+            },
             {
               "name": "--vvd-time-picker-accent-faint",
               "default": "var(--vvd-color-neutral-50)"
@@ -13121,6 +14246,12 @@
               "default": "var(--vvd-color-neutral-300)"
             }
           ],
+          "slots": [
+            {
+              "description": "Describes how to use the time-picker. Alternative to the `helper-text` attribute.",
+              "name": "helper-text"
+            }
+          ],
           "members": [
             {
               "kind": "field",
@@ -13336,6 +14467,18 @@
           "superclass": {
             "name": "FormAssociatedTimePicker",
             "module": "/libs/components/src/lib/time-picker/time-picker.form-associated"
+          },
+          "vividComponent": {
+            "public": true,
+            "name": "time-picker",
+            "vueModels": [
+              {
+                "name": "modelValue",
+                "attributeName": "current-value",
+                "eventName": "input",
+                "valueMapping": "(event.target as HTMLInputElement).value"
+              }
+            ]
           }
         }
       ],
@@ -13396,7 +14539,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "Base class for toggletip",
+          "description": "",
           "name": "Toggletip",
           "slots": [
             {
@@ -13577,6 +14720,10 @@
           "superclass": {
             "name": "FoundationElement",
             "package": "@microsoft/fast-foundation"
+          },
+          "vividComponent": {
+            "public": true,
+            "name": "toggletip"
           }
         }
       ],
@@ -13637,7 +14784,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "Base class for tooltip",
+          "description": "",
           "name": "Tooltip",
           "slots": [
             {
@@ -13738,34 +14885,233 @@
             }
           ],
           "superclass": {
-            "name": "FoundationElement",
+            "name": "FoundationElement",
+            "package": "@microsoft/fast-foundation"
+          },
+          "vividComponent": {
+            "public": true,
+            "name": "tooltip"
+          }
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "Tooltip",
+          "declaration": {
+            "name": "Tooltip",
+            "module": "libs/components/src/lib/tooltip/tooltip.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "libs/components/src/lib/tree-item/definition.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "treeItemDefinition"
+        },
+        {
+          "kind": "variable",
+          "name": "registerTreeItem",
+          "description": "Registers the tree-item element with the design system.",
+          "parameters": [
+            {
+              "description": "the prefix to use for the component name",
+              "name": "prefix"
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "treeItemDefinition",
+          "declaration": {
+            "name": "treeItemDefinition",
+            "module": "libs/components/src/lib/tree-item/definition.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "registerTreeItem",
+          "declaration": {
+            "name": "registerTreeItem",
+            "module": "libs/components/src/lib/tree-item/definition.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "libs/components/src/lib/tree-item/tree-item.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "TreeItem",
+          "cssProperties": [
+            {
+              "name": "--vvd-tree-item-accent-primary",
+              "default": "var(--vvd-color-canvas-text)"
+            },
+            {
+              "name": "--vvd-tree-item-accent-primary-text",
+              "default": "var(--vvd-color-canvas)"
+            },
+            {
+              "name": "--vvd-tree-item-accent-primary-increment",
+              "default": "var(--vvd-color-neutral-800)"
+            },
+            {
+              "name": "--vvd-tree-item-accent-faint",
+              "default": "var(--vvd-color-neutral-50)"
+            },
+            {
+              "name": "--vvd-tree-item-accent-soft",
+              "default": "var(--vvd-color-neutral-100)"
+            }
+          ],
+          "slots": [
+            {
+              "description": "To specify a child tree item.",
+              "name": "item"
+            },
+            {
+              "description": "Add an icon to the component.",
+              "name": "icon"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "text",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Indicates the text's text.",
+              "privacy": "public"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "text",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Indicates the text's text.",
+              "fieldName": "text"
+            }
+          ],
+          "superclass": {
+            "name": "FastTreeItem",
+            "package": "@microsoft/fast-foundation"
+          },
+          "vividComponent": {
+            "public": true,
+            "name": "tree-item"
+          }
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "TreeItem",
+          "declaration": {
+            "name": "TreeItem",
+            "module": "libs/components/src/lib/tree-item/tree-item.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "libs/components/src/lib/tree-view/definition.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "treeViewDefinition"
+        },
+        {
+          "kind": "variable",
+          "name": "registerTreeView",
+          "description": "Registers the tree-view element with the design system.",
+          "parameters": [
+            {
+              "description": "the prefix to use for the component name",
+              "name": "prefix"
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "treeViewDefinition",
+          "declaration": {
+            "name": "treeViewDefinition",
+            "module": "libs/components/src/lib/tree-view/definition.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "registerTreeView",
+          "declaration": {
+            "name": "registerTreeView",
+            "module": "libs/components/src/lib/tree-view/definition.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "libs/components/src/lib/tree-view/tree-view.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "TreeView",
+          "slots": [
+            {
+              "description": "Default slot.",
+              "name": ""
+            }
+          ],
+          "superclass": {
+            "name": "FastTreeView",
             "package": "@microsoft/fast-foundation"
+          },
+          "vividComponent": {
+            "public": true,
+            "name": "tree-view"
           }
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "Tooltip",
+          "name": "TreeView",
           "declaration": {
-            "name": "Tooltip",
-            "module": "libs/components/src/lib/tooltip/tooltip.ts"
+            "name": "TreeView",
+            "module": "libs/components/src/lib/tree-view/tree-view.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "libs/components/src/lib/tree-item/definition.ts",
+      "path": "libs/components/src/lib/video-player/definition.ts",
       "declarations": [
         {
           "kind": "variable",
-          "name": "treeItemDefinition"
+          "name": "videoPlayerDefinition"
         },
         {
           "kind": "variable",
-          "name": "registerTreeItem",
-          "description": "Registers the tree-item element with the design system.",
+          "name": "registerVideoPlayer",
+          "description": "Registers the video-player element with the design system.",
           "parameters": [
             {
               "description": "the prefix to use for the component name",
@@ -13777,166 +15123,357 @@
       "exports": [
         {
           "kind": "js",
-          "name": "treeItemDefinition",
+          "name": "videoPlayerDefinition",
           "declaration": {
-            "name": "treeItemDefinition",
-            "module": "libs/components/src/lib/tree-item/definition.ts"
+            "name": "videoPlayerDefinition",
+            "module": "libs/components/src/lib/video-player/definition.ts"
           }
         },
         {
           "kind": "js",
-          "name": "registerTreeItem",
+          "name": "registerVideoPlayer",
           "declaration": {
-            "name": "registerTreeItem",
-            "module": "libs/components/src/lib/tree-item/definition.ts"
+            "name": "registerVideoPlayer",
+            "module": "libs/components/src/lib/video-player/definition.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "libs/components/src/lib/tree-item/tree-item.ts",
+      "path": "libs/components/src/lib/video-player/locale.ts",
+      "declarations": [],
+      "exports": []
+    },
+    {
+      "kind": "javascript-module",
+      "path": "libs/components/src/lib/video-player/video-player.ts",
       "declarations": [
+        {
+          "kind": "variable",
+          "name": "DEFAULT_PLAYBACK_RATES",
+          "type": {
+            "text": "string"
+          },
+          "default": "'0.5, 1, 1.5, 2'"
+        },
         {
           "kind": "class",
-          "description": "Base class for tree-item",
-          "name": "TreeItem",
-          "cssProperties": [
+          "description": "Base class for video-player",
+          "name": "VideoPlayer",
+          "slots": [
             {
-              "name": "--vvd-tree-item-accent-primary",
-              "default": "var(--vvd-color-canvas-text)"
+              "description": "Default slot",
+              "name": ""
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "poster",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Reference to an image which is displayed before the video is played",
+              "privacy": "public"
             },
             {
-              "name": "--vvd-tree-item-accent-primary-text",
-              "default": "var(--vvd-color-canvas)"
+              "kind": "field",
+              "name": "src",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "URL of a video file",
+              "privacy": "public"
             },
             {
-              "name": "--vvd-tree-item-accent-primary-increment",
-              "default": "var(--vvd-color-neutral-800)"
+              "kind": "field",
+              "name": "autoplay",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Allows the video will play automatically (muted)",
+              "privacy": "public"
             },
             {
-              "name": "--vvd-tree-item-accent-faint",
-              "default": "var(--vvd-color-neutral-50)"
+              "kind": "field",
+              "name": "loop",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Allows the video to loop back to the beginning when finished",
+              "privacy": "public"
             },
             {
-              "name": "--vvd-tree-item-accent-soft",
-              "default": "var(--vvd-color-neutral-100)"
+              "kind": "field",
+              "name": "playbackRates",
+              "type": {
+                "text": "string"
+              },
+              "default": "'0.5, 1, 1.5, 2'",
+              "description": "Sets the available playback rates. When an empty string, no choices will be available",
+              "privacy": "public"
+            },
+            {
+              "kind": "field",
+              "name": "skipBy",
+              "type": {
+                "text": "MediaSkipBy"
+              },
+              "description": "Allows the video to loop back to the beginning when finished",
+              "privacy": "public"
+            },
+            {
+              "kind": "field",
+              "name": "#noSourceErrorElement",
+              "privacy": "private",
+              "readonly": true
+            },
+            {
+              "kind": "method",
+              "name": "#disposePlayer"
+            },
+            {
+              "kind": "method",
+              "name": "#setupVideoElement"
+            },
+            {
+              "kind": "field",
+              "name": "#controlElement",
+              "privacy": "private",
+              "readonly": true
+            },
+            {
+              "kind": "method",
+              "name": "#hideNoSourceError",
+              "parameters": [
+                {
+                  "name": "show",
+                  "default": "true"
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "#setupVideoPlayer",
+              "parameters": [
+                {
+                  "name": "settings",
+                  "type": {
+                    "text": "any"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "#setupPlayerEvents"
             }
           ],
-          "slots": [
+          "events": [
             {
-              "description": "To specify a child tree item.",
-              "name": "item"
+              "description": "Fired when the video is played",
+              "name": "play"
             },
             {
-              "description": "Add an icon to the component.",
-              "name": "icon"
+              "description": "Fired when the video is paused",
+              "name": "pause"
+            },
+            {
+              "description": "Fired when the video is ended",
+              "name": "ended"
             }
           ],
-          "members": [
+          "attributes": [
             {
-              "kind": "field",
-              "name": "text",
+              "name": "poster",
               "type": {
                 "text": "string | undefined"
               },
-              "description": "Indicates the text's text.",
-              "privacy": "public"
-            }
-          ],
-          "attributes": [
+              "description": "Reference to an image which is displayed before the video is played",
+              "fieldName": "poster"
+            },
             {
-              "name": "text",
+              "name": "src",
               "type": {
                 "text": "string | undefined"
               },
-              "description": "Indicates the text's text.",
-              "fieldName": "text"
+              "description": "URL of a video file",
+              "fieldName": "src"
+            },
+            {
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Allows the video will play automatically (muted)",
+              "fieldName": "autoplay"
+            },
+            {
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Allows the video to loop back to the beginning when finished",
+              "fieldName": "loop"
+            },
+            {
+              "name": "playback-rates",
+              "type": {
+                "text": "string"
+              },
+              "default": "DEFAULT_PLAYBACK_RATES",
+              "description": "Sets the available playback rates. When an empty string, no choices will be available",
+              "resolveInitializer": {
+                "module": "libs/components/src/lib/video-player/video-player.ts"
+              },
+              "fieldName": "playbackRates"
+            },
+            {
+              "name": "skip-by",
+              "type": {
+                "text": "MediaSkipBy"
+              },
+              "description": "Allows the video to loop back to the beginning when finished",
+              "fieldName": "skipBy"
             }
           ],
           "superclass": {
-            "name": "FastTreeItem",
+            "name": "FoundationElement",
             "package": "@microsoft/fast-foundation"
+          },
+          "vividComponent": {
+            "public": true,
+            "name": "video-player"
           }
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "TreeItem",
+          "name": "DEFAULT_PLAYBACK_RATES",
           "declaration": {
-            "name": "TreeItem",
-            "module": "libs/components/src/lib/tree-item/tree-item.ts"
+            "name": "DEFAULT_PLAYBACK_RATES",
+            "module": "libs/components/src/lib/video-player/video-player.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "VideoPlayer",
+          "declaration": {
+            "name": "VideoPlayer",
+            "module": "libs/components/src/lib/video-player/video-player.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "libs/components/src/lib/tree-view/definition.ts",
+      "path": "libs/components/src/lib/range-slider/utils/lerp.ts",
       "declarations": [
         {
-          "kind": "variable",
-          "name": "treeViewDefinition"
+          "kind": "function",
+          "name": "lerp",
+          "parameters": [
+            {
+              "name": "a",
+              "type": {
+                "text": "number"
+              }
+            },
+            {
+              "name": "b",
+              "type": {
+                "text": "number"
+              }
+            },
+            {
+              "name": "value",
+              "type": {
+                "text": "number"
+              }
+            }
+          ],
+          "description": "Linearly interpolates between two values."
         },
         {
-          "kind": "variable",
-          "name": "registerTreeView",
-          "description": "Registers the tree-view element with the design system.",
+          "kind": "function",
+          "name": "inverseLerp",
           "parameters": [
             {
-              "description": "the prefix to use for the component name",
-              "name": "prefix"
+              "name": "a",
+              "type": {
+                "text": "number"
+              }
+            },
+            {
+              "name": "b",
+              "type": {
+                "text": "number"
+              }
+            },
+            {
+              "name": "value",
+              "type": {
+                "text": "number"
+              }
             }
-          ]
+          ],
+          "description": "Returns the fraction of a value between a and b."
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "treeViewDefinition",
+          "name": "lerp",
           "declaration": {
-            "name": "treeViewDefinition",
-            "module": "libs/components/src/lib/tree-view/definition.ts"
+            "name": "lerp",
+            "module": "libs/components/src/lib/range-slider/utils/lerp.ts"
           }
         },
         {
           "kind": "js",
-          "name": "registerTreeView",
+          "name": "inverseLerp",
           "declaration": {
-            "name": "registerTreeView",
-            "module": "libs/components/src/lib/tree-view/definition.ts"
+            "name": "inverseLerp",
+            "module": "libs/components/src/lib/range-slider/utils/lerp.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "libs/components/src/lib/tree-view/tree-view.ts",
+      "path": "libs/components/src/lib/range-slider/utils/roundToStepValue.ts",
       "declarations": [
         {
-          "kind": "class",
-          "description": "Base class for Tree View",
-          "name": "TreeView",
-          "slots": [
+          "kind": "function",
+          "name": "roundToStepValue",
+          "parameters": [
             {
-              "description": "Default slot.",
-              "name": ""
+              "name": "value",
+              "type": {
+                "text": "number"
+              }
+            },
+            {
+              "name": "step",
+              "type": {
+                "text": "number"
+              }
             }
           ],
-          "superclass": {
-            "name": "FastTreeView",
-            "package": "@microsoft/fast-foundation"
-          }
+          "description": "Rounds a value to the nearest step value. Handles decimal rounding."
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "TreeView",
+          "name": "roundToStepValue",
           "declaration": {
-            "name": "TreeView",
-            "module": "libs/components/src/lib/tree-view/tree-view.ts"
+            "name": "roundToStepValue",
+            "module": "libs/components/src/lib/range-slider/utils/roundToStepValue.ts"
           }
         }
       ]
@@ -14306,6 +15843,10 @@
               "name": "--vvd-date-picker-accent-primary",
               "default": "var(--vvd-color-canvas-text)"
             },
+            {
+              "name": "--vvd-date-picker-accent-firm",
+              "default": "var(--vvd-color-canvas-text)"
+            },
             {
               "name": "--vvd-date-picker-accent-faint",
               "default": "var(--vvd-color-neutral-50)"