@vonage/vivid 3.50.1 → 3.52.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": [
             {
@@ -816,6 +832,10 @@
               "name": "--vvd-appearanceUI-cta-firm",
               "default": "var(--vvd-color-cta-600)"
             },
+            {
+              "name": "--vvd-appearanceUI-cta-firm-all",
+              "default": "var(--vvd-color-cta-600)"
+            },
             {
               "name": "--vvd-appearanceUI-cta-fierce",
               "default": "var(--vvd-color-cta-700)"
@@ -864,6 +884,10 @@
               "name": "--vvd-appearanceUI-success-firm",
               "default": "var(--vvd-color-success-600)"
             },
+            {
+              "name": "--vvd-appearanceUI-success-firm-all",
+              "default": "var(--vvd-color-success-600)"
+            },
             {
               "name": "--vvd-appearanceUI-success-fierce",
               "default": "var(--vvd-color-success-700)"
@@ -912,6 +936,10 @@
               "name": "--vvd-appearanceUI-alert-firm",
               "default": "var(--vvd-color-alert-600)"
             },
+            {
+              "name": "--vvd-appearanceUI-alert-firm-all",
+              "default": "var(--vvd-color-alert-600)"
+            },
             {
               "name": "--vvd-appearanceUI-alert-fierce",
               "default": "var(--vvd-color-alert-700)"
@@ -960,6 +988,10 @@
               "name": "--vvd-appearanceUI-warning-firm",
               "default": "var(--vvd-color-warning-600)"
             },
+            {
+              "name": "--vvd-appearanceUI-warning-firm-all",
+              "default": "var(--vvd-color-warning-600)"
+            },
             {
               "name": "--vvd-appearanceUI-warning-fierce",
               "default": "var(--vvd-color-warning-700)"
@@ -1008,6 +1040,10 @@
               "name": "--vvd-appearanceUI-information-firm",
               "default": "var(--vvd-color-information-600)"
             },
+            {
+              "name": "--vvd-appearanceUI-information-firm-all",
+              "default": "var(--vvd-color-information-600)"
+            },
             {
               "name": "--vvd-appearanceUI-information-fierce",
               "default": "var(--vvd-color-information-700)"
@@ -1056,6 +1092,10 @@
               "name": "--vvd-appearanceUI-announcement-firm",
               "default": "var(--vvd-color-announcement-600)"
             },
+            {
+              "name": "--vvd-appearanceUI-announcement-firm-all",
+              "default": "var(--vvd-color-announcement-600)"
+            },
             {
               "name": "--vvd-appearanceUI-announcement-fierce",
               "default": "var(--vvd-color-announcement-700)"
@@ -1104,6 +1144,10 @@
               "name": "--vvd-appearanceUI-accent-firm",
               "default": "var(--vvd-color-canvas-text)"
             },
+            {
+              "name": "--vvd-appearanceUI-accent-firm-all",
+              "default": "var(--vvd-color-neutral-600)"
+            },
             {
               "name": "--vvd-appearanceUI-accent-fierce",
               "default": "var(--vvd-color-neutral-700)"
@@ -1253,6 +1297,9 @@
           "superclass": {
             "name": "FoundationElement",
             "package": "@microsoft/fast-foundation"
+          },
+          "vividComponent": {
+            "name": "appearance-ui"
           }
         }
       ],
@@ -1312,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"
             },
@@ -1327,7 +1374,7 @@
               "kind": "field",
               "name": "pauseButtonAriaLabel",
               "type": {
-                "text": "string | null"
+                "text": "| string\n\t\t| null"
               },
               "default": "null"
             },
@@ -1382,7 +1429,7 @@
             {
               "name": "play-button-aria-label",
               "type": {
-                "text": "string | null"
+                "text": "| string\n\t\t| null"
               },
               "default": "null",
               "fieldName": "playButtonAriaLabel"
@@ -1390,7 +1437,7 @@
             {
               "name": "pause-button-aria-label",
               "type": {
-                "text": "string | null"
+                "text": "| string\n\t\t| null"
               },
               "default": "null",
               "fieldName": "pauseButtonAriaLabel"
@@ -1438,6 +1485,10 @@
           "superclass": {
             "name": "FoundationElement",
             "package": "@microsoft/fast-foundation"
+          },
+          "vividComponent": {
+            "public": true,
+            "name": "audio-player"
           }
         }
       ],
@@ -1526,6 +1577,10 @@
               "name": "--vvd-avatar-cta-firm",
               "default": "var(--vvd-color-cta-600)"
             },
+            {
+              "name": "--vvd-avatar-cta-firm-all",
+              "default": "var(--vvd-color-cta-600)"
+            },
             {
               "name": "--vvd-avatar-cta-fierce",
               "default": "var(--vvd-color-cta-700)"
@@ -1554,6 +1609,10 @@
               "name": "--vvd-avatar-accent-firm",
               "default": "var(--vvd-color-canvas-text)"
             },
+            {
+              "name": "--vvd-avatar-accent-firm-all",
+              "default": "var(--vvd-color-neutral-600)"
+            },
             {
               "name": "--vvd-avatar-accent-fierce",
               "default": "var(--vvd-color-neutral-700)"
@@ -1686,6 +1745,10 @@
           "superclass": {
             "name": "FoundationElement",
             "package": "@microsoft/fast-foundation"
+          },
+          "vividComponent": {
+            "public": true,
+            "name": "avatar"
           }
         }
       ],
@@ -1765,7 +1828,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "Base class for badge",
+          "description": "",
           "name": "Badge",
           "cssProperties": [
             {
@@ -1797,7 +1860,7 @@
               "default": "var(--vvd-color-cta-700)"
             },
             {
-              "name": "--vvd-badge-cta-firm",
+              "name": "--vvd-badge-cta-firm-all",
               "default": "var(--vvd-color-cta-600)"
             },
             {
@@ -1829,7 +1892,7 @@
               "default": "var(--vvd-color-success-700)"
             },
             {
-              "name": "--vvd-badge-success-firm",
+              "name": "--vvd-badge-success-firm-all",
               "default": "var(--vvd-color-success-600)"
             },
             {
@@ -1861,7 +1924,7 @@
               "default": "var(--vvd-color-alert-700)"
             },
             {
-              "name": "--vvd-badge-alert-firm",
+              "name": "--vvd-badge-alert-firm-all",
               "default": "var(--vvd-color-alert-600)"
             },
             {
@@ -1893,7 +1956,7 @@
               "default": "var(--vvd-color-warning-700)"
             },
             {
-              "name": "--vvd-badge-warning-firm",
+              "name": "--vvd-badge-warning-firm-all",
               "default": "var(--vvd-color-warning-600)"
             },
             {
@@ -1925,7 +1988,7 @@
               "default": "var(--vvd-color-information-700)"
             },
             {
-              "name": "--vvd-badge-information-firm",
+              "name": "--vvd-badge-information-firm-all",
               "default": "var(--vvd-color-information-600)"
             },
             {
@@ -1957,8 +2020,8 @@
               "default": "var(--vvd-color-neutral-700)"
             },
             {
-              "name": "--vvd-badge-accent-firm",
-              "default": "var(--vvd-color-canvas-text)"
+              "name": "--vvd-badge-accent-firm-all",
+              "default": "var(--vvd-color-neutral-600)"
             }
           ],
           "slots": [
@@ -2042,6 +2105,10 @@
           "superclass": {
             "name": "FoundationElement",
             "package": "@microsoft/fast-foundation"
+          },
+          "vividComponent": {
+            "public": true,
+            "name": "badge"
           }
         }
       ],
@@ -2126,7 +2193,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "Base class for banner",
+          "description": "",
           "name": "Banner",
           "cssProperties": [
             {
@@ -2185,7 +2252,7 @@
               "kind": "field",
               "name": "dismissButtonAriaLabel",
               "type": {
-                "text": "string | null"
+                "text": "| string\n\t\t| null"
               },
               "default": "null"
             },
@@ -2269,7 +2336,7 @@
             {
               "name": "dismiss-aria-label",
               "type": {
-                "text": "string | null"
+                "text": "| string\n\t\t| null"
               },
               "default": "null",
               "fieldName": "dismissButtonAriaLabel"
@@ -2328,6 +2395,10 @@
           "superclass": {
             "name": "FoundationElement",
             "package": "@microsoft/fast-foundation"
+          },
+          "vividComponent": {
+            "public": true,
+            "name": "banner"
           }
         }
       ],
@@ -2389,7 +2460,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "Base class for breadcrumb",
+          "description": "",
           "name": "Breadcrumb",
           "slots": [
             {
@@ -2400,6 +2471,10 @@
           "superclass": {
             "name": "FoundationElement",
             "package": "@microsoft/fast-foundation"
+          },
+          "vividComponent": {
+            "public": true,
+            "name": "breadcrumb"
           }
         }
       ],
@@ -2447,7 +2522,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "Base class for breadcrumb-item",
+          "description": "",
           "name": "BreadcrumbItem",
           "members": [
             {
@@ -2470,6 +2545,10 @@
           "superclass": {
             "name": "FastBreadcrumbItem",
             "package": "@microsoft/fast-foundation"
+          },
+          "vividComponent": {
+            "public": true,
+            "name": "breadcrumb-item"
           }
         }
       ],
@@ -2517,7 +2596,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "Base class for button",
+          "description": "",
           "name": "Button",
           "cssProperties": [
             {
@@ -2720,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",
@@ -2728,6 +2817,69 @@
               },
               "description": "Indicates the button's label.",
               "privacy": "public"
+            },
+            {
+              "kind": "field",
+              "name": "href",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Indicates the button's href.",
+              "privacy": "public"
+            },
+            {
+              "kind": "field",
+              "name": "download",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Indicates the button's download.",
+              "privacy": "public"
+            },
+            {
+              "kind": "field",
+              "name": "hreflang",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Indicates the button's hreflang.",
+              "privacy": "public"
+            },
+            {
+              "kind": "field",
+              "name": "ping",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Indicates the button's ping.",
+              "privacy": "public"
+            },
+            {
+              "kind": "field",
+              "name": "referrerpolicy",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Indicates the button's referrerpolicy.",
+              "privacy": "public"
+            },
+            {
+              "kind": "field",
+              "name": "rel",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Indicates the button's rel.",
+              "privacy": "public"
+            },
+            {
+              "kind": "field",
+              "name": "target",
+              "type": {
+                "text": "'_self' | '_blank' | '_parent' | '_top' | undefined"
+              },
+              "description": "Indicates the target's rel.",
+              "privacy": "public"
             }
           ],
           "attributes": [
@@ -2788,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": {
@@ -2795,11 +2956,71 @@
               },
               "description": "Indicates the button's label.",
               "fieldName": "label"
+            },
+            {
+              "name": "href",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Indicates the button's href.",
+              "fieldName": "href"
+            },
+            {
+              "name": "download",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Indicates the button's download.",
+              "fieldName": "download"
+            },
+            {
+              "name": "hreflang",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Indicates the button's hreflang.",
+              "fieldName": "hreflang"
+            },
+            {
+              "name": "ping",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Indicates the button's ping.",
+              "fieldName": "ping"
+            },
+            {
+              "name": "referrerpolicy",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Indicates the button's referrerpolicy.",
+              "fieldName": "referrerpolicy"
+            },
+            {
+              "name": "rel",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Indicates the button's rel.",
+              "fieldName": "rel"
+            },
+            {
+              "name": "target",
+              "type": {
+                "text": "'_self' | '_blank' | '_parent' | '_top' | undefined"
+              },
+              "description": "Indicates the target's rel.",
+              "fieldName": "target"
             }
           ],
           "superclass": {
             "name": "FoundationButton",
             "package": "@microsoft/fast-foundation"
+          },
+          "vividComponent": {
+            "public": true,
+            "name": "button"
           }
         }
       ],
@@ -2879,7 +3100,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "Base class for calendar",
+          "description": "",
           "name": "Calendar",
           "slots": [
             {
@@ -3068,6 +3289,10 @@
           "superclass": {
             "name": "FoundationElement",
             "package": "@microsoft/fast-foundation"
+          },
+          "vividComponent": {
+            "public": true,
+            "name": "calendar"
           }
         }
       ],
@@ -3115,7 +3340,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "Base class for calendar-event",
+          "description": "",
           "name": "CalendarEvent",
           "cssProperties": [
             {
@@ -3355,6 +3580,10 @@
           "superclass": {
             "name": "FoundationElement",
             "package": "@microsoft/fast-foundation"
+          },
+          "vividComponent": {
+            "public": true,
+            "name": "calendar-event"
           }
         }
       ],
@@ -3418,7 +3647,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "Base class for card",
+          "description": "",
           "name": "Card",
           "slots": [
             {
@@ -3565,6 +3794,10 @@
           "superclass": {
             "name": "FoundationElement",
             "package": "@microsoft/fast-foundation"
+          },
+          "vividComponent": {
+            "public": true,
+            "name": "card"
           }
         }
       ],
@@ -3628,7 +3861,7 @@
         },
         {
           "kind": "class",
-          "description": "Base class for checkbox",
+          "description": "",
           "name": "Checkbox",
           "cssProperties": [
             {
@@ -3742,6 +3975,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"
+              }
+            ]
           }
         }
       ],
@@ -3797,7 +4042,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "Base class for combobox",
+          "description": "",
           "name": "Combobox",
           "cssProperties": [
             {
@@ -3856,6 +4101,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"
+              }
+            ]
           }
         }
       ],
@@ -3880,7 +4137,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",
@@ -3927,7 +4184,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "Base class for data-grid",
+          "description": "",
           "name": "DataGridCell",
           "cssProperties": [
             {
@@ -3942,6 +4199,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)"
@@ -3966,6 +4231,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)"
@@ -4090,6 +4363,10 @@
           "superclass": {
             "name": "FoundationDataGridCell",
             "package": "@microsoft/fast-foundation"
+          },
+          "vividComponent": {
+            "public": true,
+            "name": "data-grid-cell"
           }
         }
       ],
@@ -4110,7 +4387,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "Base class for data-grid",
+          "description": "",
           "name": "DataGridRow",
           "cssProperties": [
             {
@@ -4125,10 +4402,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)"
@@ -4149,10 +4434,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)"
@@ -4200,6 +4493,10 @@
           "superclass": {
             "name": "FoundationDataGridRow",
             "package": "@microsoft/fast-foundation"
+          },
+          "vividComponent": {
+            "public": true,
+            "name": "data-grid-row"
           }
         }
       ],
@@ -4222,9 +4519,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"
         },
@@ -4344,7 +4641,7 @@
         },
         {
           "kind": "class",
-          "description": "Base class for data-grid",
+          "description": "",
           "name": "DataGrid",
           "slots": [
             {
@@ -4419,7 +4716,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",
@@ -4473,6 +4770,10 @@
           "superclass": {
             "name": "FoundationDataGrid",
             "package": "@microsoft/fast-foundation"
+          },
+          "vividComponent": {
+            "public": true,
+            "name": "data-grid"
           }
         }
       ],
@@ -4517,7 +4818,7 @@
           "type": {
             "text": "array"
           },
-          "default": "[dataGridCell, dataGridRow, dataGrid, ...iconRegistries]"
+          "default": "[\n\tdataGridCell,\n\tdataGridRow,\n\tdataGrid,\n\t...iconRegistries,\n]"
         },
         {
           "kind": "variable",
@@ -4811,6 +5112,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": {
@@ -4930,7 +5243,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "Base class for date-range-picker",
+          "description": "",
           "name": "DateRangePicker",
           "members": [
             {
@@ -5337,6 +5650,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"
+              }
+            ]
           }
         }
       ],
@@ -5435,7 +5766,7 @@
         },
         {
           "kind": "class",
-          "description": "Base class for dialog",
+          "description": "",
           "name": "Dialog",
           "slots": [
             {
@@ -5518,7 +5849,7 @@
               "kind": "field",
               "name": "dismissButtonAriaLabel",
               "type": {
-                "text": "string | null"
+                "text": "| string\n\t\t| null"
               },
               "default": "null"
             },
@@ -5657,7 +5988,7 @@
             {
               "name": "dismiss-button-aria-label",
               "type": {
-                "text": "string | null"
+                "text": "| string\n\t\t| null"
               },
               "default": "null",
               "fieldName": "dismissButtonAriaLabel"
@@ -5674,6 +6005,10 @@
           "superclass": {
             "name": "FoundationElement",
             "package": "@microsoft/fast-foundation"
+          },
+          "vividComponent": {
+            "public": true,
+            "name": "dialog"
           }
         }
       ],
@@ -5735,11 +6070,15 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "Base class for divider",
+          "description": "",
           "name": "Divider",
           "superclass": {
             "name": "FoundationDivider",
             "package": "@microsoft/fast-foundation"
+          },
+          "vividComponent": {
+            "public": true,
+            "name": "divider"
           }
         }
       ],
@@ -5787,7 +6126,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "Base class for elevation",
+          "description": "",
           "name": "Elevation",
           "slots": [
             {
@@ -5836,6 +6175,9 @@
           "superclass": {
             "name": "FoundationElement",
             "package": "@microsoft/fast-foundation"
+          },
+          "vividComponent": {
+            "name": "elevation"
           }
         }
       ],
@@ -5952,6 +6294,10 @@
           "superclass": {
             "name": "FoundationElement",
             "package": "@microsoft/fast-foundation"
+          },
+          "vividComponent": {
+            "public": true,
+            "name": "empty-state"
           }
         }
       ],
@@ -6028,7 +6374,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "Base class for fab",
+          "description": "",
           "name": "Fab",
           "cssProperties": [
             {
@@ -6144,6 +6490,10 @@
           "superclass": {
             "name": "FoundationButton",
             "package": "@microsoft/fast-foundation"
+          },
+          "vividComponent": {
+            "public": true,
+            "name": "fab"
           }
         }
       ],
@@ -6243,7 +6593,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "File-picker component",
+          "description": "",
           "name": "FilePicker",
           "members": [
             {
@@ -6519,6 +6869,10 @@
           "superclass": {
             "name": "FormAssociatedFilePicker",
             "module": "/libs/components/src/lib/file-picker/file-picker.form-associated"
+          },
+          "vividComponent": {
+            "public": true,
+            "name": "file-picker"
           }
         }
       ],
@@ -6541,17 +6895,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",
@@ -6563,94 +6917,29 @@
       "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",
+          "description": "",
           "name": "Header",
           "slots": [
             {
@@ -6710,6 +6999,10 @@
           "superclass": {
             "name": "FoundationElement",
             "package": "@microsoft/fast-foundation"
+          },
+          "vividComponent": {
+            "public": true,
+            "name": "header"
           }
         }
       ],
@@ -6905,6 +7198,10 @@
           "superclass": {
             "name": "FoundationElement",
             "package": "@microsoft/fast-foundation"
+          },
+          "vividComponent": {
+            "public": true,
+            "name": "icon"
           }
         }
       ],
@@ -7005,7 +7302,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": [
             {
@@ -7105,6 +7402,10 @@
           "superclass": {
             "name": "FoundationElement",
             "package": "@microsoft/fast-foundation"
+          },
+          "vividComponent": {
+            "public": true,
+            "name": "layout"
           }
         }
       ],
@@ -7173,7 +7474,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "Base class for listbox",
+          "description": "",
           "name": "Listbox",
           "cssProperties": [
             {
@@ -7289,6 +7590,9 @@
           "superclass": {
             "name": "FoundationListboxElement",
             "package": "@microsoft/fast-foundation"
+          },
+          "vividComponent": {
+            "name": "listbox"
           }
         }
       ],
@@ -7357,13 +7661,17 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "Base class for menu",
+          "description": "",
           "name": "Menu",
           "slots": [
             {
               "description": "Default slot.",
               "name": ""
             },
+            {
+              "description": "Used to set the anchor element for the menu.",
+              "name": "anchor"
+            },
             {
               "description": "Used to add additional content to the top of the menu.",
               "name": "header"
@@ -7491,12 +7799,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"
             },
             {
@@ -7559,6 +7878,10 @@
           "superclass": {
             "name": "FastMenu",
             "package": "@microsoft/fast-foundation"
+          },
+          "vividComponent": {
+            "public": true,
+            "name": "menu"
           }
         }
       ],
@@ -7635,9 +7958,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)"
@@ -7650,6 +8005,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)"
@@ -7700,6 +8059,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",
@@ -7769,6 +8137,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": {
@@ -7790,6 +8166,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"
+              }
+            ]
           }
         }
       ],
@@ -7858,7 +8246,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": [
             {
@@ -7869,6 +8257,10 @@
           "superclass": {
             "name": "FoundationElement",
             "package": "@microsoft/fast-foundation"
+          },
+          "vividComponent": {
+            "public": true,
+            "name": "nav"
           }
         }
       ],
@@ -7929,7 +8321,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": [
             {
@@ -8042,6 +8434,10 @@
           "superclass": {
             "name": "FoundationElement",
             "package": "@microsoft/fast-foundation"
+          },
+          "vividComponent": {
+            "public": true,
+            "name": "nav-disclosure"
           }
         }
       ],
@@ -8159,6 +8555,10 @@
             "name": "TextAnchor",
             "module": "/libs/components/src/lib/text-anchor/text-anchor"
           },
+          "vividComponent": {
+            "public": true,
+            "name": "nav-item"
+          },
           "attributes": [
             {
               "name": "text",
@@ -8240,7 +8640,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "Base class for note",
+          "description": "",
           "name": "Note",
           "cssProperties": [
             {
@@ -8352,6 +8752,10 @@
           "superclass": {
             "name": "FoundationElement",
             "package": "@microsoft/fast-foundation"
+          },
+          "vividComponent": {
+            "public": true,
+            "name": "note"
           }
         }
       ],
@@ -8381,7 +8785,7 @@
           "type": {
             "text": "array"
           },
-          "default": "[numberFieldDefinition(), ...buttonRegistries, ...dividerRegistries]"
+          "default": "[\n\tnumberFieldDefinition(),\n\t...buttonRegistries,\n\t...dividerRegistries,\n]"
         },
         {
           "kind": "variable",
@@ -8450,7 +8854,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "Base class for number-field",
+          "description": "",
           "name": "NumberField",
           "cssProperties": [
             {
@@ -8491,7 +8895,7 @@
               "kind": "field",
               "name": "incrementButtonAriaLabel",
               "type": {
-                "text": "string | null"
+                "text": "| string\n\t\t| null"
               },
               "default": "null"
             },
@@ -8499,7 +8903,7 @@
               "kind": "field",
               "name": "decrementButtonAriaLabel",
               "type": {
-                "text": "string | null"
+                "text": "| string\n\t\t| null"
               },
               "default": "null"
             },
@@ -8560,7 +8964,7 @@
             {
               "name": "increment-button-aria-label",
               "type": {
-                "text": "string | null"
+                "text": "| string\n\t\t| null"
               },
               "default": "null",
               "fieldName": "incrementButtonAriaLabel"
@@ -8568,7 +8972,7 @@
             {
               "name": "decrement-button-aria-label",
               "type": {
-                "text": "string | null"
+                "text": "| string\n\t\t| null"
               },
               "default": "null",
               "fieldName": "decrementButtonAriaLabel"
@@ -8598,6 +9002,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"
+              }
+            ]
           }
         }
       ],
@@ -8658,7 +9074,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "Base class for option",
+          "description": "",
           "name": "ListboxOption",
           "cssProperties": [
             {
@@ -8673,6 +9089,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)"
@@ -8744,6 +9164,10 @@
           "superclass": {
             "name": "FoundationListboxOption",
             "package": "@microsoft/fast-foundation"
+          },
+          "vividComponent": {
+            "public": true,
+            "name": "option"
           }
         }
       ],
@@ -8819,7 +9243,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "Base class for pagination",
+          "description": "",
           "name": "Pagination",
           "members": [
             {
@@ -8995,6 +9419,10 @@
           "superclass": {
             "name": "FoundationElement",
             "package": "@microsoft/fast-foundation"
+          },
+          "vividComponent": {
+            "public": true,
+            "name": "pagination"
           }
         }
       ],
@@ -9068,291 +9496,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": "variable",
+          "name": "progressDefinition",
+          "description": "The progress element."
+        },
+        {
+          "kind": "variable",
+          "name": "registerProgress",
+          "description": "Registers the progress elements with the design system.",
+          "parameters": [
+            {
+              "description": "the prefix to use for the component name",
+              "name": "prefix"
+            }
+          ]
+        }
+      ],
+      "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": "Base class for popup",
-          "name": "Popup",
-          "slots": [
+          "description": "",
+          "name": "Progress",
+          "cssProperties": [
             {
-              "description": "Default slot.",
-              "name": ""
+              "name": "--vvd-progress-cta-primary",
+              "default": "var(--vvd-color-cta-500)"
+            },
+            {
+              "name": "--vvd-progress-cta-soft",
+              "default": "var(--vvd-color-cta-100)"
+            },
+            {
+              "name": "--vvd-progress-alert-primary",
+              "default": "var(--vvd-color-alert-500)"
+            },
+            {
+              "name": "--vvd-progress-alert-soft",
+              "default": "var(--vvd-color-alert-100)"
+            },
+            {
+              "name": "--vvd-progress-success-primary",
+              "default": "var(--vvd-color-success-500)"
+            },
+            {
+              "name": "--vvd-progress-success-soft",
+              "default": "var(--vvd-color-success-100)"
+            },
+            {
+              "name": "--vvd-progress-accent-primary",
+              "default": "var(--vvd-color-canvas-text)"
+            },
+            {
+              "name": "--vvd-progress-accent-soft",
+              "default": "var(--vvd-color-neutral-100)"
             }
           ],
           "members": [
             {
               "kind": "field",
-              "name": "#middleware",
-              "privacy": "private",
+              "name": "ariaLabel",
               "type": {
-                "text": "Array<any>"
+                "text": "string | null"
               },
-              "readonly": true
-            },
-            {
-              "kind": "field",
-              "name": "#cleanup",
-              "privacy": "private",
-              "type": {
-                "text": "() => void | undefined"
-              }
+              "default": "null"
             },
             {
               "kind": "field",
-              "name": "popupEl",
+              "name": "shape",
               "type": {
-                "text": "HTMLElement"
-              }
+                "text": "ProgressShape | undefined"
+              },
+              "description": "Indicates the progress' shape.",
+              "privacy": "public"
             },
             {
               "kind": "field",
-              "name": "arrowEl",
+              "name": "connotation",
               "type": {
-                "text": "HTMLElement"
-              }
+                "text": "ProgressConnotation | undefined"
+              },
+              "description": "Indicates the progress' connotation.",
+              "privacy": "public"
             },
             {
               "kind": "field",
-              "name": "open",
+              "name": "reverse",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "indicates whether the popup is open",
+              "description": "Indicates the progress' reverse status.",
               "privacy": "public"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "aria-label",
+              "type": {
+                "text": "string | null"
+              },
+              "default": "null",
+              "fieldName": "ariaLabel"
             },
             {
-              "kind": "method",
-              "name": "openChanged",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "_",
-                  "type": {
-                    "text": "boolean"
-                  }
-                },
-                {
-                  "name": "newValue",
-                  "type": {
-                    "text": "boolean"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "field",
-              "name": "dismissible",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "adds close button to the popup",
-              "privacy": "public"
-            },
-            {
-              "kind": "field",
-              "name": "arrow",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "adds small triangle to indicate the trigger element",
-              "privacy": "public"
-            },
-            {
-              "kind": "field",
-              "name": "alternate",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "set the color-scheme to dark",
-              "privacy": "public"
-            },
-            {
-              "kind": "field",
-              "name": "placement",
-              "type": {
-                "text": "Placement | undefined"
-              },
-              "description": "the placement of the popup",
-              "privacy": "public"
-            },
-            {
-              "kind": "field",
-              "name": "strategy",
-              "type": {
-                "text": "Strategy | undefined"
-              },
-              "default": "'fixed'",
-              "description": "the strategy of the popup",
-              "privacy": "public"
-            },
-            {
-              "kind": "field",
-              "name": "anchor",
-              "type": {
-                "text": "HTMLElement | undefined"
-              },
-              "description": "The element to anchor the popup to.",
-              "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": [
-            {
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "indicates whether the popup is open",
-              "fieldName": "open"
-            },
-            {
+              "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",
@@ -9364,78 +9714,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": [
@@ -9447,179 +9773,16 @@
               },
               "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",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Indicates the progress' reverse status.",
-              "privacy": "public"
-            }
-          ],
-          "attributes": [
-            {
-              "name": "aria-label",
-              "type": {
-                "text": "string | null"
-              },
-              "default": "null",
-              "fieldName": "ariaLabel"
-            },
-            {
-              "name": "shape",
-              "type": {
-                "text": "ProgressShape | undefined"
-              },
-              "description": "Indicates the progress' shape.",
-              "fieldName": "shape"
-            },
-            {
-              "name": "connotation",
-              "type": {
-                "text": "ProgressConnotation | undefined"
-              },
-              "description": "Indicates the progress' connotation.",
-              "fieldName": "connotation"
-            },
-            {
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Indicates the progress' reverse status.",
-              "fieldName": "reverse"
-            }
-          ],
-          "superclass": {
-            "name": "BaseProgress",
-            "package": "@microsoft/fast-foundation"
-          }
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "Progress",
-          "declaration": {
-            "name": "Progress",
-            "module": "libs/components/src/lib/progress/progress.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "libs/components/src/lib/progress-ring/definition.ts",
-      "declarations": [
-        {
-          "kind": "variable",
-          "name": "progressRingDefinition",
-          "description": "The progress-ring element."
-        },
-        {
-          "kind": "variable",
-          "name": "registerProgressRing",
-          "description": "Registers the progress-ring  elements with the design system.",
-          "parameters": [
-            {
-              "description": "the prefix to use for the component name",
-              "name": "prefix"
-            }
-          ]
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "ProgressRingConnotation",
-          "declaration": {
-            "name": "ProgressRingConnotation",
-            "module": "./progress-ring"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "progressRingDefinition",
-          "declaration": {
-            "name": "progressRingDefinition",
-            "module": "libs/components/src/lib/progress-ring/definition.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "registerProgressRing",
-          "declaration": {
-            "name": "registerProgressRing",
-            "module": "libs/components/src/lib/progress-ring/definition.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "libs/components/src/lib/progress-ring/progress-ring.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "Base class for progress-ring",
-          "name": "ProgressRing",
-          "cssProperties": [
-            {
-              "name": "--vvd-progress-ring-cta-primary",
-              "default": "var(--vvd-color-cta-500)"
-            },
-            {
-              "name": "--vvd-progress-ring-alert-primary",
-              "default": "var(--vvd-color-alert-500)"
-            },
-            {
-              "name": "--vvd-progress-ring-success-primary",
-              "default": "var(--vvd-color-success-500)"
-            },
-            {
-              "name": "--vvd-progress-ring-accent-primary",
-              "default": "var(--vvd-color-canvas-text)"
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "ariaLabel",
-              "type": {
-                "text": "string | null"
-              },
-              "default": "null"
-            },
-            {
-              "kind": "field",
-              "name": "connotation",
-              "type": {
-                "text": "ProgressRingConnotation | undefined"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "size",
+              "name": "size",
               "type": {
                 "text": "-6 | -5 | -4 | -3 | -2 | -1 | 0 | 1 | 2 | 3 | 4 | 5 | undefined"
               }
@@ -9652,6 +9815,10 @@
           "superclass": {
             "name": "BaseProgress",
             "package": "@microsoft/fast-foundation"
+          },
+          "vividComponent": {
+            "public": true,
+            "name": "progress-ring"
           }
         }
       ],
@@ -9712,7 +9879,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "Base class for radio",
+          "description": "",
           "name": "Radio",
           "cssProperties": [
             {
@@ -9821,6 +9988,10 @@
           "superclass": {
             "name": "FastRadio",
             "package": "@microsoft/fast-foundation"
+          },
+          "vividComponent": {
+            "public": true,
+            "name": "radio"
           }
         }
       ],
@@ -9881,7 +10052,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "Base class for radio-group",
+          "description": "",
           "name": "RadioGroup",
           "slots": [
             {
@@ -9889,40 +10060,616 @@
               "name": ""
             }
           ],
-          "members": [
+          "members": [
+            {
+              "kind": "field",
+              "name": "label",
+              "type": {
+                "text": "string | undefined"
+              },
+              "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": "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": "RadioGroup",
+          "declaration": {
+            "name": "RadioGroup",
+            "module": "libs/components/src/lib/radio-group/radio-group.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "libs/components/src/lib/range-slider/definition.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "rangeSliderDefinition"
+        },
+        {
+          "kind": "variable",
+          "name": "registerRangeSlider",
+          "description": "Registers the range-slider element with the design system.",
+          "parameters": [
+            {
+              "description": "the prefix to use for the component name",
+              "name": "prefix"
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "rangeSliderDefinition",
+          "declaration": {
+            "name": "rangeSliderDefinition",
+            "module": "libs/components/src/lib/range-slider/definition.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "registerRangeSlider",
+          "declaration": {
+            "name": "registerRangeSlider",
+            "module": "libs/components/src/lib/range-slider/definition.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "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": "",
+          "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-slider-cta-primary",
+              "default": "var(--vvd-color-cta-500)"
+            },
+            {
+              "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"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "#registerThumbListeners"
+            },
+            {
+              "kind": "method",
+              "name": "#unregisterThumbListeners"
+            },
+            {
+              "kind": "field",
+              "name": "#onThumbMousedown",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "#onThumbKeydown",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "#registerDragHandlers"
+            },
+            {
+              "kind": "method",
+              "name": "#unregisterDragListeners"
+            },
+            {
+              "kind": "field",
+              "name": "#onDragMove",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "#onDragEnd",
+              "privacy": "private"
+            },
+            {
+              "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"
+            },
+            {
+              "description": "Event emitted when the end value changes",
+              "name": "input:end"
+            }
+          ],
+          "attributes": [
             {
-              "kind": "field",
-              "name": "label",
+              "name": "start",
               "type": {
-                "text": "string | undefined"
+                "text": "| string\n\t\t| undefined"
               },
-              "description": "Indicates the group's label.",
-              "privacy": "public"
-            }
-          ],
-          "attributes": [
+              "description": "The initial start value. This value sets the `start` property\nonly when the `start` property has not been explicitly set.",
+              "fieldName": "initialStart"
+            },
             {
-              "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 group's label.",
-              "fieldName": "label"
+              "description": "The initial end value. This value sets the `end` property\nonly when the `end` property has not been explicitly set.",
+              "fieldName": "initialEnd"
+            },
+            {
+              "name": "current-end",
+              "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.",
+              "fieldName": "currentEnd"
+            },
+            {
+              "type": {
+                "text": "number"
+              },
+              "default": "0",
+              "description": "The minimum value of the range.",
+              "fieldName": "min"
+            },
+            {
+              "type": {
+                "text": "number"
+              },
+              "default": "10",
+              "description": "The maximum value of the range.",
+              "fieldName": "max"
+            },
+            {
+              "type": {
+                "text": "number"
+              },
+              "default": "1",
+              "description": "Value to increment or decrement via arrow keys, mouse click or drag.",
+              "fieldName": "step"
+            },
+            {
+              "name": "orientation",
+              "type": {
+                "text": "Orientation"
+              },
+              "description": "The orientation of the slider.",
+              "fieldName": "orientation"
+            },
+            {
+              "name": "aria-start-label",
+              "type": {
+                "text": "string | null"
+              },
+              "default": "null",
+              "description": "Aria label for the start thumb",
+              "fieldName": "ariaStartLabel"
+            },
+            {
+              "name": "aria-end-label",
+              "type": {
+                "text": "string | null"
+              },
+              "default": "null",
+              "description": "Aria label for the end thumb",
+              "fieldName": "ariaEndLabel"
+            },
+            {
+              "type": {
+                "text": "boolean"
+              },
+              "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"
           }
         }
       ]
@@ -9989,7 +10736,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "Base class for select",
+          "description": "",
           "name": "Select",
           "cssProperties": [
             {
@@ -10125,6 +10872,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"
+              }
+            ]
           }
         }
       ],
@@ -10184,11 +10943,11 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "Base class for selectable-box",
+          "description": "",
           "name": "SelectableBox",
           "cssProperties": [
             {
-              "name": "--vvd-selectable-box-cta-firm",
+              "name": "--vvd-selectable-box-cta-firm-all",
               "default": "var(--vvd-color-cta-600)"
             },
             {
@@ -10208,8 +10967,8 @@
               "default": "var(--vvd-color-cta-100)"
             },
             {
-              "name": "--vvd-selectable-box-accent-firm",
-              "default": "var(--vvd-color-canvas-text)"
+              "name": "--vvd-selectable-box-accent-firm-all",
+              "default": "var(--vvd-color-neutral-600)"
             },
             {
               "name": "--vvd-selectable-box-accent-pale",
@@ -10370,6 +11129,10 @@
           "superclass": {
             "name": "FoundationElement",
             "package": "@microsoft/fast-foundation"
+          },
+          "vividComponent": {
+            "public": true,
+            "name": "selectable-box"
           }
         }
       ],
@@ -10430,7 +11193,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "Base class for side-drawer",
+          "description": "",
           "name": "SideDrawer",
           "slots": [
             {
@@ -10549,6 +11312,10 @@
           "superclass": {
             "name": "FoundationElement",
             "package": "@microsoft/fast-foundation"
+          },
+          "vividComponent": {
+            "public": true,
+            "name": "side-drawer"
           }
         }
       ],
@@ -10617,7 +11384,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "Base class for slider",
+          "description": "",
           "name": "Slider",
           "cssProperties": [
             {
@@ -10703,6 +11470,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"
+              }
+            ]
           }
         }
       ],
@@ -10788,7 +11567,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "Base class for split button",
+          "description": "",
           "name": "SplitButton",
           "cssProperties": [
             {
@@ -11059,7 +11838,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",
@@ -11162,7 +11941,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",
@@ -11172,6 +11951,10 @@
           "superclass": {
             "name": "FoundationElement",
             "package": "@microsoft/fast-foundation"
+          },
+          "vividComponent": {
+            "public": true,
+            "name": "split-button"
           }
         }
       ],
@@ -11240,7 +12023,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "Base class for switch",
+          "description": "",
           "name": "Switch",
           "cssProperties": [
             {
@@ -11263,6 +12046,10 @@
               "name": "--vvd-switch-cta-intermediate",
               "default": "var(--vvd-color-cta-500)"
             },
+            {
+              "name": "--vvd-switch-cta-fierce",
+              "default": "var(--vvd-color-cta-700)"
+            },
             {
               "name": "--vvd-switch-alert-primary-text",
               "default": "var(--vvd-color-canvas)"
@@ -11283,6 +12070,10 @@
               "name": "--vvd-switch-alert-intermediate",
               "default": "var(--vvd-color-alert-500)"
             },
+            {
+              "name": "--vvd-switch-alert-fierce",
+              "default": "var(--vvd-color-alert-700)"
+            },
             {
               "name": "--vvd-switch-success-primary-text",
               "default": "var(--vvd-color-canvas)"
@@ -11303,6 +12094,10 @@
               "name": "--vvd-switch-success-intermediate",
               "default": "var(--vvd-color-success-500)"
             },
+            {
+              "name": "--vvd-switch-success-fierce",
+              "default": "var(--vvd-color-success-700)"
+            },
             {
               "name": "--vvd-switch-accent-primary-text",
               "default": "var(--vvd-color-canvas)"
@@ -11322,6 +12117,10 @@
             {
               "name": "--vvd-switch-accent-intermediate",
               "default": "var(--vvd-color-neutral-500)"
+            },
+            {
+              "name": "--vvd-switch-accent-fierce",
+              "default": "var(--vvd-color-neutral-700)"
             }
           ],
           "members": [
@@ -11365,6 +12164,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"
+              }
+            ]
           }
         }
       ],
@@ -11441,7 +12252,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "Base class for tab",
+          "description": "",
           "name": "Tab",
           "cssProperties": [
             {
@@ -11588,6 +12399,10 @@
           "superclass": {
             "name": "FoundationTab",
             "package": "@microsoft/fast-foundation"
+          },
+          "vividComponent": {
+            "public": true,
+            "name": "tab"
           }
         }
       ],
@@ -11648,7 +12463,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "Base class for tab-panel",
+          "description": "",
           "name": "TabPanel",
           "slots": [
             {
@@ -11659,6 +12474,10 @@
           "superclass": {
             "name": "FoundationTabPanel",
             "package": "@microsoft/fast-foundation"
+          },
+          "vividComponent": {
+            "public": true,
+            "name": "tab-panel"
           }
         }
       ],
@@ -11727,7 +12546,7 @@
         },
         {
           "kind": "class",
-          "description": "Base class for tabs",
+          "description": "",
           "name": "Tabs",
           "cssProperties": [
             {
@@ -11896,6 +12715,10 @@
           "superclass": {
             "name": "FoundationTabs",
             "package": "@microsoft/fast-foundation"
+          },
+          "vividComponent": {
+            "public": true,
+            "name": "tabs"
           }
         }
       ],
@@ -11988,7 +12811,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "Base class for tag.",
+          "description": "",
           "name": "Tag",
           "cssProperties": [
             {
@@ -12008,7 +12831,7 @@
               "default": "var(--vvd-color-cta-700)"
             },
             {
-              "name": "--vvd-tag-cta-firm",
+              "name": "--vvd-tag-cta-firm-all",
               "default": "var(--vvd-color-cta-600)"
             },
             {
@@ -12036,8 +12859,8 @@
               "default": "var(--vvd-color-neutral-700)"
             },
             {
-              "name": "--vvd-tag-accent-firm",
-              "default": "var(--vvd-color-canvas-text)"
+              "name": "--vvd-tag-accent-firm-all",
+              "default": "var(--vvd-color-neutral-600)"
             },
             {
               "name": "--vvd-tag-accent-faint",
@@ -12236,6 +13059,10 @@
           "superclass": {
             "name": "FoundationElement",
             "package": "@microsoft/fast-foundation"
+          },
+          "vividComponent": {
+            "public": true,
+            "name": "tag"
           }
         }
       ],
@@ -12295,7 +13122,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "Base class for tag-group",
+          "description": "",
           "name": "TagGroup",
           "slots": [
             {
@@ -12326,6 +13153,10 @@
           "superclass": {
             "name": "FoundationElement",
             "package": "@microsoft/fast-foundation"
+          },
+          "vividComponent": {
+            "public": true,
+            "name": "tag-group"
           }
         }
       ],
@@ -12386,7 +13217,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "Base class for text-anchor",
+          "description": "",
           "name": "TextAnchor",
           "slots": [
             {
@@ -12418,6 +13249,9 @@
           "superclass": {
             "name": "Anchor",
             "package": "@microsoft/fast-foundation"
+          },
+          "vividComponent": {
+            "name": "text-anchor"
           }
         }
       ],
@@ -12486,7 +13320,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "Base class for text-area",
+          "description": "",
           "name": "TextArea",
           "cssProperties": [
             {
@@ -12618,6 +13452,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"
+              }
+            ]
           }
         }
       ],
@@ -12820,6 +13666,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"
+              }
+            ]
           }
         }
       ],
@@ -12922,13 +13780,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)"
@@ -13161,6 +14023,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"
+              }
+            ]
           }
         }
       ],
@@ -13221,13 +14095,17 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "Base class for toggletip",
+          "description": "",
           "name": "Toggletip",
           "slots": [
             {
               "description": "The content to display in the toggletip.",
               "name": ""
             },
+            {
+              "description": "Used to set the anchor element for the toggletip.",
+              "name": "anchor"
+            },
             {
               "description": "The content to display in the toggletip action items.",
               "name": "action-items"
@@ -13398,6 +14276,10 @@
           "superclass": {
             "name": "FoundationElement",
             "package": "@microsoft/fast-foundation"
+          },
+          "vividComponent": {
+            "public": true,
+            "name": "toggletip"
           }
         }
       ],
@@ -13458,8 +14340,14 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "Base class for tooltip",
+          "description": "",
           "name": "Tooltip",
+          "slots": [
+            {
+              "description": "Used to set the anchor element for the tooltip.",
+              "name": "anchor"
+            }
+          ],
           "members": [
             {
               "kind": "field",
@@ -13555,6 +14443,10 @@
           "superclass": {
             "name": "FoundationElement",
             "package": "@microsoft/fast-foundation"
+          },
+          "vividComponent": {
+            "public": true,
+            "name": "tooltip"
           }
         }
       ],
@@ -13614,7 +14506,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "Base class for tree-item",
+          "description": "",
           "name": "TreeItem",
           "cssProperties": [
             {
@@ -13672,6 +14564,10 @@
           "superclass": {
             "name": "FastTreeItem",
             "package": "@microsoft/fast-foundation"
+          },
+          "vividComponent": {
+            "public": true,
+            "name": "tree-item"
           }
         }
       ],
@@ -13731,7 +14627,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "Base class for Tree View",
+          "description": "",
           "name": "TreeView",
           "slots": [
             {
@@ -13742,6 +14638,10 @@
           "superclass": {
             "name": "FastTreeView",
             "package": "@microsoft/fast-foundation"
+          },
+          "vividComponent": {
+            "public": true,
+            "name": "tree-view"
           }
         }
       ],
@@ -13756,6 +14656,115 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "libs/components/src/lib/range-slider/utils/lerp.ts",
+      "declarations": [
+        {
+          "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": "function",
+          "name": "inverseLerp",
+          "parameters": [
+            {
+              "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": "lerp",
+          "declaration": {
+            "name": "lerp",
+            "module": "libs/components/src/lib/range-slider/utils/lerp.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "inverseLerp",
+          "declaration": {
+            "name": "inverseLerp",
+            "module": "libs/components/src/lib/range-slider/utils/lerp.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "libs/components/src/lib/range-slider/utils/roundToStepValue.ts",
+      "declarations": [
+        {
+          "kind": "function",
+          "name": "roundToStepValue",
+          "parameters": [
+            {
+              "name": "value",
+              "type": {
+                "text": "number"
+              }
+            },
+            {
+              "name": "step",
+              "type": {
+                "text": "number"
+              }
+            }
+          ],
+          "description": "Rounds a value to the nearest step value. Handles decimal rounding."
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "roundToStepValue",
+          "declaration": {
+            "name": "roundToStepValue",
+            "module": "libs/components/src/lib/range-slider/utils/roundToStepValue.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "libs/components/src/lib/time-picker/time/picker.ts",
@@ -14121,6 +15130,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)"