@vonage/vivid 3.12.0 → 3.14.0

package/custom-elements.json

@@ -96,6 +96,20 @@
           "kind": "class",
           "description": "",
           "name": "AccordionItem",
+          "cssProperties": [
+            {
+              "name": "--vvd-accordion-item-accent-primary",
+              "default": "var(--vvd-color-canvas-text)"
+            },
+            {
+              "name": "--vvd-accordion-item-accent-faint",
+              "default": "var(--vvd-color-neutral-50)"
+            },
+            {
+              "name": "--vvd-accordion-item-accent-soft",
+              "default": "var(--vvd-color-neutral-100)"
+            }
+          ],
           "slots": [
             {
               "description": "Default slot.",
@@ -226,6 +240,24 @@
           "kind": "class",
           "description": "Base class for action-group",
           "name": "ActionGroup",
+          "cssProperties": [
+            {
+              "name": "--vvd-action-group-accent-backdrop",
+              "default": "var(--vvd-color-canvas)"
+            },
+            {
+              "name": "--vvd-action-group-accent-primary",
+              "default": "var(--vvd-color-canvas-text)"
+            },
+            {
+              "name": "--vvd-action-group-accent-intermediate",
+              "default": "var(--vvd-color-neutral-500)"
+            },
+            {
+              "name": "--vvd-action-group-accent-faint",
+              "default": "var(--vvd-color-neutral-50)"
+            }
+          ],
           "slots": [
             {
               "description": "Default slot.",
@@ -386,6 +418,48 @@
           "kind": "class",
           "description": "Base class for alert",
           "name": "Alert",
+          "cssProperties": [
+            {
+              "name": "--vvd-alert-success-primary",
+              "default": "var(--vvd-color-success-500)"
+            },
+            {
+              "name": "--vvd-alert-success-primary-text",
+              "default": "var(--vvd-color-canvas)"
+            },
+            {
+              "name": "--vvd-alert-information-primary",
+              "default": "var(--vvd-color-information-500)"
+            },
+            {
+              "name": "--vvd-alert-information-primary-text",
+              "default": "var(--vvd-color-canvas)"
+            },
+            {
+              "name": "--vvd-alert-alert-primary",
+              "default": "var(--vvd-color-alert-500)"
+            },
+            {
+              "name": "--vvd-alert-alert-primary-text",
+              "default": "var(--vvd-color-canvas)"
+            },
+            {
+              "name": "--vvd-alert-warning-primary",
+              "default": "var(--vvd-color-warning-300)"
+            },
+            {
+              "name": "--vvd-alert-warning-primary-text",
+              "default": "var(--vvd-color-canvas-text)"
+            },
+            {
+              "name": "--vvd-alert-accent-primary",
+              "default": "var(--vvd-color-canvas-text)"
+            },
+            {
+              "name": "--vvd-alert-accent-primary-text",
+              "default": "var(--vvd-color-canvas)"
+            }
+          ],
           "slots": [
             {
               "description": "Add action items to alert using this slot.",
@@ -395,11 +469,11 @@
           "members": [
             {
               "kind": "field",
-              "name": "timeout",
+              "name": "#timeoutID",
+              "privacy": "private",
               "type": {
-                "text": "any"
-              },
-              "privacy": "private"
+                "text": "NodeJS.Timeout | undefined"
+              }
             },
             {
               "kind": "field",
@@ -432,11 +506,11 @@
             },
             {
               "kind": "field",
-              "name": "subtitle",
+              "name": "text",
               "type": {
                 "text": "string | undefined"
               },
-              "description": "the text of the alert sub-heading\naccepts string",
+              "description": "the main text of the alert\naccepts string",
               "privacy": "public"
             },
             {
@@ -448,16 +522,6 @@
               "description": "alert header icon",
               "privacy": "public"
             },
-            {
-              "kind": "field",
-              "name": "open",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "indicates whether the alert is open",
-              "privacy": "public"
-            },
             {
               "kind": "field",
               "name": "timeoutms",
@@ -479,21 +543,49 @@
             },
             {
               "kind": "field",
-              "name": "conditionedIcon",
-              "readonly": true
+              "name": "open",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "indicates whether the alert is open",
+              "privacy": "public"
             },
             {
-              "kind": "field",
-              "name": "#show",
-              "privacy": "private"
+              "kind": "method",
+              "name": "openChanged",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "oldValue",
+                  "type": {
+                    "text": "boolean"
+                  }
+                },
+                {
+                  "name": "newValue",
+                  "type": {
+                    "text": "boolean"
+                  }
+                }
+              ]
             },
             {
               "kind": "field",
-              "name": "remove"
+              "name": "conditionedIcon",
+              "readonly": true
+            },
+            {
+              "kind": "method",
+              "name": "#setupTimeout"
             },
             {
               "kind": "field",
-              "name": "#closeOnKeyDown",
+              "name": "#closeOnEscape",
               "privacy": "private"
             }
           ],
@@ -523,12 +615,12 @@
               "fieldName": "headline"
             },
             {
-              "name": "subtitle",
+              "name": "text",
               "type": {
                 "text": "string | undefined"
               },
-              "description": "the text of the alert sub-heading\naccepts string",
-              "fieldName": "subtitle"
+              "description": "the main text of the alert\naccepts string",
+              "fieldName": "text"
             },
             {
               "name": "icon",
@@ -538,14 +630,6 @@
               "description": "alert header icon",
               "fieldName": "icon"
             },
-            {
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "indicates whether the alert is open",
-              "fieldName": "open"
-            },
             {
               "type": {
                 "text": "number"
@@ -561,6 +645,14 @@
               },
               "description": "alert connotation",
               "fieldName": "connotation"
+            },
+            {
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "indicates whether the alert is open",
+              "fieldName": "open"
             }
           ],
           "superclass": {
@@ -623,6 +715,48 @@
           "kind": "class",
           "description": "",
           "name": "Avatar",
+          "cssProperties": [
+            {
+              "name": "--vvd-avatar-cta-primary",
+              "default": "var(--vvd-color-cta-500)"
+            },
+            {
+              "name": "--vvd-avatar-cta-primary-text",
+              "default": "var(--vvd-color-canvas)"
+            },
+            {
+              "name": "--vvd-avatar-cta-firm",
+              "default": "var(--vvd-color-cta-600)"
+            },
+            {
+              "name": "--vvd-avatar-cta-fierce",
+              "default": "var(--vvd-color-cta-700)"
+            },
+            {
+              "name": "--vvd-avatar-cta-pale",
+              "default": "var(--vvd-color-cta-300)"
+            },
+            {
+              "name": "--vvd-avatar-accent-primary",
+              "default": "var(--vvd-color-canvas-text)"
+            },
+            {
+              "name": "--vvd-avatar-accent-primary-text",
+              "default": "var(--vvd-color-canvas)"
+            },
+            {
+              "name": "--vvd-avatar-accent-firm",
+              "default": "var(--vvd-color-canvas-text)"
+            },
+            {
+              "name": "--vvd-avatar-accent-fierce",
+              "default": "var(--vvd-color-neutral-700)"
+            },
+            {
+              "name": "--vvd-avatar-accent-pale",
+              "default": "var(--vvd-color-neutral-300)"
+            }
+          ],
           "slots": [
             {
               "description": "Assign nodes to the graphic slot to set a graphic media of any kind (e.g. image, illustration etc).",
@@ -819,6 +953,176 @@
           "kind": "class",
           "description": "Base class for badge",
           "name": "Badge",
+          "cssProperties": [
+            {
+              "name": "--vvd-badge-cta-primary",
+              "default": "var(--vvd-color-cta-500)"
+            },
+            {
+              "name": "--vvd-badge-cta-primary-text",
+              "default": "var(--vvd-color-canvas)"
+            },
+            {
+              "name": "--vvd-badge-cta-intermediate",
+              "default": "var(--vvd-color-cta-500)"
+            },
+            {
+              "name": "--vvd-badge-cta-soft",
+              "default": "var(--vvd-color-cta-100)"
+            },
+            {
+              "name": "--vvd-badge-cta-contrast",
+              "default": "var(--vvd-color-cta-800)"
+            },
+            {
+              "name": "--vvd-badge-cta-pale",
+              "default": "var(--vvd-color-cta-300)"
+            },
+            {
+              "name": "--vvd-badge-cta-fierce",
+              "default": "var(--vvd-color-cta-700)"
+            },
+            {
+              "name": "--vvd-badge-success-primary",
+              "default": "var(--vvd-color-success-500)"
+            },
+            {
+              "name": "--vvd-badge-success-primary-text",
+              "default": "var(--vvd-color-canvas)"
+            },
+            {
+              "name": "--vvd-badge-success-intermediate",
+              "default": "var(--vvd-color-success-500)"
+            },
+            {
+              "name": "--vvd-badge-success-soft",
+              "default": "var(--vvd-color-success-100)"
+            },
+            {
+              "name": "--vvd-badge-success-contrast",
+              "default": "var(--vvd-color-success-800)"
+            },
+            {
+              "name": "--vvd-badge-success-pale",
+              "default": "var(--vvd-color-success-300)"
+            },
+            {
+              "name": "--vvd-badge-success-fierce",
+              "default": "var(--vvd-color-success-700)"
+            },
+            {
+              "name": "--vvd-badge-alert-primary",
+              "default": "var(--vvd-color-alert-500)"
+            },
+            {
+              "name": "--vvd-badge-alert-primary-text",
+              "default": "var(--vvd-color-canvas)"
+            },
+            {
+              "name": "--vvd-badge-alert-intermediate",
+              "default": "var(--vvd-color-alert-500)"
+            },
+            {
+              "name": "--vvd-badge-alert-soft",
+              "default": "var(--vvd-color-alert-100)"
+            },
+            {
+              "name": "--vvd-badge-alert-contrast",
+              "default": "var(--vvd-color-alert-800)"
+            },
+            {
+              "name": "--vvd-badge-alert-pale",
+              "default": "var(--vvd-color-alert-300)"
+            },
+            {
+              "name": "--vvd-badge-alert-fierce",
+              "default": "var(--vvd-color-alert-700)"
+            },
+            {
+              "name": "--vvd-badge-warning-primary",
+              "default": "var(--vvd-color-warning-300)"
+            },
+            {
+              "name": "--vvd-badge-warning-primary-text",
+              "default": "var(--vvd-color-canvas-text)"
+            },
+            {
+              "name": "--vvd-badge-warning-intermediate",
+              "default": "var(--vvd-color-warning-300)"
+            },
+            {
+              "name": "--vvd-badge-warning-soft",
+              "default": "var(--vvd-color-warning-100)"
+            },
+            {
+              "name": "--vvd-badge-warning-contrast",
+              "default": "var(--vvd-color-warning-800)"
+            },
+            {
+              "name": "--vvd-badge-warning-pale",
+              "default": "var(--vvd-color-warning-300)"
+            },
+            {
+              "name": "--vvd-badge-warning-fierce",
+              "default": "var(--vvd-color-warning-700)"
+            },
+            {
+              "name": "--vvd-badge-information-primary",
+              "default": "var(--vvd-color-information-500)"
+            },
+            {
+              "name": "--vvd-badge-information-primary-text",
+              "default": "var(--vvd-color-canvas)"
+            },
+            {
+              "name": "--vvd-badge-information-intermediate",
+              "default": "var(--vvd-color-information-500)"
+            },
+            {
+              "name": "--vvd-badge-information-soft",
+              "default": "var(--vvd-color-information-100)"
+            },
+            {
+              "name": "--vvd-badge-information-contrast",
+              "default": "var(--vvd-color-information-800)"
+            },
+            {
+              "name": "--vvd-badge-information-pale",
+              "default": "var(--vvd-color-information-300)"
+            },
+            {
+              "name": "--vvd-badge-information-fierce",
+              "default": "var(--vvd-color-information-700)"
+            },
+            {
+              "name": "--vvd-badge-accent-primary",
+              "default": "var(--vvd-color-canvas-text)"
+            },
+            {
+              "name": "--vvd-badge-accent-primary-text",
+              "default": "var(--vvd-color-canvas)"
+            },
+            {
+              "name": "--vvd-badge-accent-intermediate",
+              "default": "var(--vvd-color-neutral-500)"
+            },
+            {
+              "name": "--vvd-badge-accent-soft",
+              "default": "var(--vvd-color-neutral-100)"
+            },
+            {
+              "name": "--vvd-badge-accent-contrast",
+              "default": "var(--vvd-color-neutral-800)"
+            },
+            {
+              "name": "--vvd-badge-accent-pale",
+              "default": "var(--vvd-color-neutral-300)"
+            },
+            {
+              "name": "--vvd-badge-accent-fierce",
+              "default": "var(--vvd-color-neutral-700)"
+            }
+          ],
           "members": [
             {
               "kind": "field",
@@ -980,6 +1284,48 @@
           "kind": "class",
           "description": "Base class for banner",
           "name": "Banner",
+          "cssProperties": [
+            {
+              "name": "--vvd-banner-success-primary",
+              "default": "var(--vvd-color-success-500)"
+            },
+            {
+              "name": "--vvd-banner-success-primary-text",
+              "default": "var(--vvd-color-canvas)"
+            },
+            {
+              "name": "--vvd-banner-alert-primary",
+              "default": "var(--vvd-color-alert-500)"
+            },
+            {
+              "name": "--vvd-banner-alert-primary-text",
+              "default": "var(--vvd-color-canvas)"
+            },
+            {
+              "name": "--vvd-banner-announcement-primary",
+              "default": "var(--vvd-color-announcement-500)"
+            },
+            {
+              "name": "--vvd-banner-announcement-primary-text",
+              "default": "var(--vvd-color-canvas)"
+            },
+            {
+              "name": "--vvd-banner-warning-primary",
+              "default": "var(--vvd-color-warning-300)"
+            },
+            {
+              "name": "--vvd-banner-warning-primary-text",
+              "default": "var(--vvd-color-canvas-text)"
+            },
+            {
+              "name": "--vvd-banner-information-primary",
+              "default": "var(--vvd-color-information-500)"
+            },
+            {
+              "name": "--vvd-banner-information-primary-text",
+              "default": "var(--vvd-color-canvas)"
+            }
+          ],
           "slots": [
             {
               "description": "Add action items to banner using this slot.",
@@ -1301,15 +1647,145 @@
           "kind": "class",
           "description": "Base class for button",
           "name": "Button",
-          "members": [
+          "cssProperties": [
             {
-              "kind": "field",
-              "name": "connotation",
-              "type": {
-                "text": "ButtonConnotation | undefined"
-              },
-              "description": "The connotation the button should have.",
-              "privacy": "public"
+              "name": "--vvd-button-cta-primary",
+              "default": "var(--vvd-color-cta-500)"
+            },
+            {
+              "name": "--vvd-button-cta-primary-text",
+              "default": "var(--vvd-color-canvas)"
+            },
+            {
+              "name": "--vvd-button-cta-primary-increment",
+              "default": "var(--vvd-color-cta-600)"
+            },
+            {
+              "name": "--vvd-button-cta-contrast",
+              "default": "var(--vvd-color-cta-800)"
+            },
+            {
+              "name": "--vvd-button-cta-fierce",
+              "default": "var(--vvd-color-cta-700)"
+            },
+            {
+              "name": "--vvd-button-cta-firm",
+              "default": "var(--vvd-color-cta-600)"
+            },
+            {
+              "name": "--vvd-button-cta-soft",
+              "default": "var(--vvd-color-cta-100)"
+            },
+            {
+              "name": "--vvd-button-cta-faint",
+              "default": "var(--vvd-color-cta-50)"
+            },
+            {
+              "name": "--vvd-button-success-primary",
+              "default": "var(--vvd-color-success-500)"
+            },
+            {
+              "name": "--vvd-button-success-primary-text",
+              "default": "var(--vvd-color-canvas)"
+            },
+            {
+              "name": "--vvd-button-success-primary-increment",
+              "default": "var(--vvd-color-success-600)"
+            },
+            {
+              "name": "--vvd-button-success-contrast",
+              "default": "var(--vvd-color-success-800)"
+            },
+            {
+              "name": "--vvd-button-success-fierce",
+              "default": "var(--vvd-color-success-700)"
+            },
+            {
+              "name": "--vvd-button-success-firm",
+              "default": "var(--vvd-color-success-600)"
+            },
+            {
+              "name": "--vvd-button-success-soft",
+              "default": "var(--vvd-color-success-100)"
+            },
+            {
+              "name": "--vvd-button-success-faint",
+              "default": "var(--vvd-color-success-50)"
+            },
+            {
+              "name": "--vvd-button-alert-primary",
+              "default": "var(--vvd-color-alert-500)"
+            },
+            {
+              "name": "--vvd-button-alert-primary-text",
+              "default": "var(--vvd-color-canvas)"
+            },
+            {
+              "name": "--vvd-button-alert-primary-increment",
+              "default": "var(--vvd-color-alert-600)"
+            },
+            {
+              "name": "--vvd-button-alert-contrast",
+              "default": "var(--vvd-color-alert-800)"
+            },
+            {
+              "name": "--vvd-button-alert-fierce",
+              "default": "var(--vvd-color-alert-700)"
+            },
+            {
+              "name": "--vvd-button-alert-firm",
+              "default": "var(--vvd-color-alert-600)"
+            },
+            {
+              "name": "--vvd-button-alert-soft",
+              "default": "var(--vvd-color-alert-100)"
+            },
+            {
+              "name": "--vvd-button-alert-faint",
+              "default": "var(--vvd-color-alert-50)"
+            },
+            {
+              "name": "--vvd-button-accent-primary",
+              "default": "var(--vvd-color-canvas-text)"
+            },
+            {
+              "name": "--vvd-button-accent-primary-text",
+              "default": "var(--vvd-color-canvas)"
+            },
+            {
+              "name": "--vvd-button-accent-primary-increment",
+              "default": "var(--vvd-color-neutral-800)"
+            },
+            {
+              "name": "--vvd-button-accent-contrast",
+              "default": "var(--vvd-color-neutral-800)"
+            },
+            {
+              "name": "--vvd-button-accent-fierce",
+              "default": "var(--vvd-color-neutral-700)"
+            },
+            {
+              "name": "--vvd-button-accent-firm",
+              "default": "var(--vvd-color-canvas-text)"
+            },
+            {
+              "name": "--vvd-button-accent-soft",
+              "default": "var(--vvd-color-neutral-100)"
+            },
+            {
+              "name": "--vvd-button-accent-faint",
+              "default": "var(--vvd-color-neutral-50)"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "connotation",
+              "type": {
+                "text": "ButtonConnotation | undefined"
+              },
+              "description": "The connotation the button should have.",
+              "privacy": "public"
             },
             {
               "kind": "field",
@@ -1759,6 +2235,120 @@
           "kind": "class",
           "description": "Base class for calendar-event",
           "name": "CalendarEvent",
+          "cssProperties": [
+            {
+              "name": "--vvd-calendar-event-accent-primary",
+              "default": "var(--vvd-color-canvas-text)"
+            },
+            {
+              "name": "--vvd-calendar-event-accent-primary-text",
+              "default": "var(--vvd-color-canvas)"
+            },
+            {
+              "name": "--vvd-calendar-event-accent-contrast",
+              "default": "var(--vvd-color-neutral-800)"
+            },
+            {
+              "name": "--vvd-calendar-event-accent-soft",
+              "default": "var(--vvd-color-neutral-100)"
+            },
+            {
+              "name": "--vvd-calendar-event-cta-primary",
+              "default": "var(--vvd-color-cta-500)"
+            },
+            {
+              "name": "--vvd-calendar-event-cta-primary-text",
+              "default": "var(--vvd-color-canvas)"
+            },
+            {
+              "name": "--vvd-calendar-event-cta-contrast",
+              "default": "var(--vvd-color-cta-800)"
+            },
+            {
+              "name": "--vvd-calendar-event-cta-soft",
+              "default": "var(--vvd-color-cta-100)"
+            },
+            {
+              "name": "--vvd-calendar-event-success-primary",
+              "default": "var(--vvd-color-success-500)"
+            },
+            {
+              "name": "--vvd-calendar-event-success-primary-text",
+              "default": "var(--vvd-color-canvas)"
+            },
+            {
+              "name": "--vvd-calendar-event-success-contrast",
+              "default": "var(--vvd-color-success-800)"
+            },
+            {
+              "name": "--vvd-calendar-event-success-soft",
+              "default": "var(--vvd-color-success-100)"
+            },
+            {
+              "name": "--vvd-calendar-event-alert-primary",
+              "default": "var(--vvd-color-alert-500)"
+            },
+            {
+              "name": "--vvd-calendar-event-alert-primary-text",
+              "default": "var(--vvd-color-canvas)"
+            },
+            {
+              "name": "--vvd-calendar-event-alert-contrast",
+              "default": "var(--vvd-color-alert-800)"
+            },
+            {
+              "name": "--vvd-calendar-event-alert-soft",
+              "default": "var(--vvd-color-alert-100)"
+            },
+            {
+              "name": "--vvd-calendar-event-warning-primary",
+              "default": "var(--vvd-color-warning-300)"
+            },
+            {
+              "name": "--vvd-calendar-event-warning-primary-text",
+              "default": "var(--vvd-color-canvas-text)"
+            },
+            {
+              "name": "--vvd-calendar-event-warning-contrast",
+              "default": "var(--vvd-color-warning-800)"
+            },
+            {
+              "name": "--vvd-calendar-event-warning-soft",
+              "default": "var(--vvd-color-warning-100)"
+            },
+            {
+              "name": "--vvd-calendar-event-announcement-primary",
+              "default": "var(--vvd-color-announcement-500)"
+            },
+            {
+              "name": "--vvd-calendar-event-announcement-primary-text",
+              "default": "var(--vvd-color-canvas)"
+            },
+            {
+              "name": "--vvd-calendar-event-announcement-contrast",
+              "default": "var(--vvd-color-announcement-800)"
+            },
+            {
+              "name": "--vvd-calendar-event-announcement-soft",
+              "default": "var(--vvd-color-announcement-100)"
+            },
+            {
+              "name": "--vvd-calendar-event-information-primary",
+              "default": "var(--vvd-color-information-500)"
+            },
+            {
+              "name": "--vvd-calendar-event-information-primary-text",
+              "default": "var(--vvd-color-canvas)"
+            },
+            {
+              "name": "--vvd-calendar-event-information-contrast",
+              "default": "var(--vvd-color-information-800)"
+            },
+            {
+              "name": "--vvd-calendar-event-information-soft",
+              "default": "var(--vvd-color-information-100)"
+            }
+          ],
           "members": [
             {
               "kind": "field",
@@ -2133,6 +2723,32 @@
           "kind": "class",
           "description": "Base class for checkbox",
           "name": "Checkbox",
+          "cssProperties": [
+            {
+              "name": "--vvd-checkbox-accent-primary",
+              "default": "var(--vvd-color-canvas-text)"
+            },
+            {
+              "name": "--vvd-checkbox-accent-primary-text",
+              "default": "var(--vvd-color-canvas)"
+            },
+            {
+              "name": "--vvd-checkbox-accent-primary-increment",
+              "default": "var(--vvd-color-neutral-800)"
+            },
+            {
+              "name": "--vvd-checkbox-accent-intermediate",
+              "default": "var(--vvd-color-neutral-500)"
+            },
+            {
+              "name": "--vvd-checkbox-accent-backdrop",
+              "default": "var(--vvd-color-canvas)"
+            },
+            {
+              "name": "--vvd-checkbox-accent-firm",
+              "default": "var(--vvd-color-canvas-text)"
+            }
+          ],
           "members": [
             {
               "kind": "field",
@@ -2214,6 +2830,24 @@
           "kind": "class",
           "description": "Base class for combobox",
           "name": "Combobox",
+          "cssProperties": [
+            {
+              "name": "--vvd-combobox-accent-backdrop",
+              "default": "var(--vvd-color-canvas)"
+            },
+            {
+              "name": "--vvd-combobox-accent-intermediate",
+              "default": "var(--vvd-color-neutral-500)"
+            },
+            {
+              "name": "--vvd-combobox-accent-primary",
+              "default": "var(--vvd-color-canvas-text)"
+            },
+            {
+              "name": "--vvd-combobox-accent-soft",
+              "default": "var(--vvd-color-neutral-100)"
+            }
+          ],
           "slots": [
             {
               "description": "Default slot.",
@@ -2330,7 +2964,83 @@
           "kind": "class",
           "description": "Base class for data-grid",
           "name": "DataGridCell",
+          "cssProperties": [
+            {
+              "name": "--vvd-data-grid-cell-cta-primary",
+              "default": "var(--vvd-color-cta-500)"
+            },
+            {
+              "name": "--vvd-data-grid-cell-cta-primary-text",
+              "default": "var(--vvd-color-canvas)"
+            },
+            {
+              "name": "--vvd-data-grid-cell-cta-primary-increment",
+              "default": "var(--vvd-color-cta-600)"
+            },
+            {
+              "name": "--vvd-data-grid-cell-cta-faint",
+              "default": "var(--vvd-color-cta-50)"
+            },
+            {
+              "name": "--vvd-data-grid-cell-cta-pale",
+              "default": "var(--vvd-color-cta-300)"
+            },
+            {
+              "name": "--vvd-data-grid-cell-cta-dim",
+              "default": "var(--vvd-color-cta-200)"
+            },
+            {
+              "name": "--vvd-data-grid-cell-accent-primary",
+              "default": "var(--vvd-color-canvas-text)"
+            },
+            {
+              "name": "--vvd-data-grid-cell-accent-primary-text",
+              "default": "var(--vvd-color-canvas)"
+            },
+            {
+              "name": "--vvd-data-grid-cell-accent-primary-increment",
+              "default": "var(--vvd-color-neutral-800)"
+            },
+            {
+              "name": "--vvd-data-grid-cell-accent-faint",
+              "default": "var(--vvd-color-neutral-50)"
+            },
+            {
+              "name": "--vvd-data-grid-cell-accent-pale",
+              "default": "var(--vvd-color-neutral-300)"
+            },
+            {
+              "name": "--vvd-data-grid-cell-accent-dim",
+              "default": "var(--vvd-color-neutral-200)"
+            }
+          ],
           "members": [
+            {
+              "kind": "field",
+              "name": "ariaSelected",
+              "type": {
+                "text": "string | null"
+              },
+              "default": "null"
+            },
+            {
+              "kind": "method",
+              "name": "ariaSelectedChanged",
+              "parameters": [
+                {
+                  "name": "_",
+                  "type": {
+                    "text": "string | null"
+                  }
+                },
+                {
+                  "name": "selectedState",
+                  "type": {
+                    "text": "string | null"
+                  }
+                }
+              ]
+            },
             {
               "kind": "method",
               "name": "handleFocusin",
@@ -2356,6 +3066,16 @@
               ]
             }
           ],
+          "attributes": [
+            {
+              "name": "aria-selected",
+              "type": {
+                "text": "string | null"
+              },
+              "default": "null",
+              "fieldName": "ariaSelected"
+            }
+          ],
           "superclass": {
             "name": "FoundationElement",
             "package": "@microsoft/fast-foundation"
@@ -2504,9 +3224,9 @@
           "kind": "variable",
           "name": "DataGridSelectionMode",
           "type": {
-            "text": "{\n\tnone: 'none',\n\tsingleRow: 'single-row',\n\tmultiRow: 'multi-row',\n}"
+            "text": "{\n\tnone: 'none',\n\tsingleRow: 'single-row',\n\tmultiRow: 'multi-row',\n\tsingleCell: 'single-cell',\n\tmultiCell: 'multi-cell',\n}"
           },
-          "default": "{\n\tnone: 'none',\n\tsingleRow: 'single-row',\n\tmultiRow: 'multi-row',\n}"
+          "default": "{\n\tnone: 'none',\n\tsingleRow: 'single-row',\n\tmultiRow: 'multi-row',\n\tsingleCell: 'single-cell',\n\tmultiCell: 'multi-cell',\n}"
         },
         {
           "kind": "class",
@@ -2525,6 +3245,43 @@
               "type": {
                 "text": "DataGridSelectionMode | undefined"
               }
+            },
+            {
+              "kind": "field",
+              "name": "#selectedCells",
+              "privacy": "private",
+              "type": {
+                "text": "DataGridCell[]"
+              },
+              "readonly": true
+            },
+            {
+              "kind": "method",
+              "name": "selectionModeChanged"
+            },
+            {
+              "kind": "field",
+              "name": "#handleKeypress",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "#handleClick",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "#handleSelection",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "#setCellSelectedState",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "#resetSelection"
             }
           ],
           "attributes": [
@@ -3166,22 +3923,72 @@
           "kind": "class",
           "description": "Base class for fab",
           "name": "Fab",
-          "members": [
+          "cssProperties": [
             {
-              "kind": "field",
-              "name": "connotation",
-              "type": {
-                "text": "FabConnotation | undefined"
-              },
-              "description": "The connotation the fab should have.",
-              "privacy": "public"
+              "name": "--vvd-fab-accent-primary",
+              "default": "var(--vvd-color-canvas-text)"
             },
             {
-              "kind": "field",
-              "name": "size",
-              "type": {
-                "text": "FABSize | undefined"
-              },
+              "name": "--vvd-fab-accent-primary-text",
+              "default": "var(--vvd-color-canvas)"
+            },
+            {
+              "name": "--vvd-fab-accent-primary-increment",
+              "default": "var(--vvd-color-neutral-800)"
+            },
+            {
+              "name": "--vvd-fab-accent-contrast",
+              "default": "var(--vvd-color-neutral-800)"
+            },
+            {
+              "name": "--vvd-fab-accent-fierce",
+              "default": "var(--vvd-color-neutral-700)"
+            },
+            {
+              "name": "--vvd-fab-accent-firm",
+              "default": "var(--vvd-color-canvas-text)"
+            },
+            {
+              "name": "--vvd-fab-cta-primary",
+              "default": "var(--vvd-color-cta-500)"
+            },
+            {
+              "name": "--vvd-fab-cta-primary-text",
+              "default": "var(--vvd-color-canvas)"
+            },
+            {
+              "name": "--vvd-fab-cta-primary-increment",
+              "default": "var(--vvd-color-cta-600)"
+            },
+            {
+              "name": "--vvd-fab-cta-contrast",
+              "default": "var(--vvd-color-cta-800)"
+            },
+            {
+              "name": "--vvd-fab-cta-fierce",
+              "default": "var(--vvd-color-cta-700)"
+            },
+            {
+              "name": "--vvd-fab-cta-firm",
+              "default": "var(--vvd-color-cta-600)"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "connotation",
+              "type": {
+                "text": "FabConnotation | undefined"
+              },
+              "description": "The connotation the fab should have.",
+              "privacy": "public"
+            },
+            {
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "FABSize | undefined"
+              },
               "description": "The size the FAB should have.",
               "privacy": "public"
             },
@@ -3499,6 +4306,32 @@
           "kind": "class",
           "description": "",
           "name": "Icon",
+          "cssProperties": [
+            {
+              "name": "--vvd-icon-accent-primary",
+              "default": "var(--vvd-color-canvas-text)"
+            },
+            {
+              "name": "--vvd-icon-announcement-primary",
+              "default": "var(--vvd-color-announcement-500)"
+            },
+            {
+              "name": "--vvd-icon-cta-primary",
+              "default": "var(--vvd-color-cta-500)"
+            },
+            {
+              "name": "--vvd-icon-success-primary",
+              "default": "var(--vvd-color-success-500)"
+            },
+            {
+              "name": "--vvd-icon-alert-primary",
+              "default": "var(--vvd-color-alert-500)"
+            },
+            {
+              "name": "--vvd-icon-information-primary",
+              "default": "var(--vvd-color-information-500)"
+            }
+          ],
           "slots": [
             {
               "description": "Default slot.",
@@ -3625,6 +4458,14 @@
             "module": "./layout"
           }
         },
+        {
+          "kind": "js",
+          "name": "RowSpacing",
+          "declaration": {
+            "name": "RowSpacing",
+            "module": "./layout"
+          }
+        },
         {
           "kind": "js",
           "name": "Gutters",
@@ -3830,6 +4671,24 @@
           "kind": "class",
           "description": "Base class for listbox",
           "name": "Listbox",
+          "cssProperties": [
+            {
+              "name": "--vvd-listbox-accent-backdrop",
+              "default": "var(--vvd-color-canvas)"
+            },
+            {
+              "name": "--vvd-listbox-accent-intermediate",
+              "default": "var(--vvd-color-neutral-500)"
+            },
+            {
+              "name": "--vvd-listbox-accent-primary",
+              "default": "var(--vvd-color-canvas-text)"
+            },
+            {
+              "name": "--vvd-listbox-accent-soft",
+              "default": "var(--vvd-color-neutral-100)"
+            }
+          ],
           "slots": [
             {
               "description": "Default slot.",
@@ -4086,6 +4945,36 @@
           "kind": "class",
           "description": "Base class for menu-item",
           "name": "MenuItem",
+          "cssProperties": [
+            {
+              "name": "--vvd-menu-item-accent-primary",
+              "default": "var(--vvd-color-canvas-text)"
+            },
+            {
+              "name": "--vvd-menu-item-accent-primary-text",
+              "default": "var(--vvd-color-canvas)"
+            },
+            {
+              "name": "--vvd-menu-item-accent-primary-increment",
+              "default": "var(--vvd-color-neutral-800)"
+            },
+            {
+              "name": "--vvd-menu-item-accent-faint",
+              "default": "var(--vvd-color-neutral-50)"
+            },
+            {
+              "name": "--vvd-menu-item-accent-soft",
+              "default": "var(--vvd-color-neutral-100)"
+            },
+            {
+              "name": "--vvd-menu-item-accent-pale",
+              "default": "var(--vvd-color-neutral-300)"
+            },
+            {
+              "name": "--vvd-menu-item-accent-dim",
+              "default": "var(--vvd-color-neutral-200)"
+            }
+          ],
           "members": [
             {
               "kind": "field",
@@ -4260,6 +5149,24 @@
           "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 .",
           "name": "NavDisclosure",
+          "cssProperties": [
+            {
+              "name": "--vvd-nav-disclosure-accent-primary",
+              "default": "var(--vvd-color-canvas-text)"
+            },
+            {
+              "name": "--vvd-nav-disclosure-accent-primary-text",
+              "default": "var(--vvd-color-canvas)"
+            },
+            {
+              "name": "--vvd-nav-disclosure-accent-faint",
+              "default": "var(--vvd-color-neutral-50)"
+            },
+            {
+              "name": "--vvd-nav-disclosure-accent-soft",
+              "default": "var(--vvd-color-neutral-100)"
+            }
+          ],
           "slots": [
             {
               "description": "Default slot.",
@@ -4381,6 +5288,28 @@
           "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 .",
           "name": "NavItem",
+          "cssProperties": [
+            {
+              "name": "--vvd-nav-item-accent-primary",
+              "default": "var(--vvd-color-canvas-text)"
+            },
+            {
+              "name": "--vvd-nav-item-accent-primary-text",
+              "default": "var(--vvd-color-canvas)"
+            },
+            {
+              "name": "--vvd-nav-item-accent-primary-increment",
+              "default": "var(--vvd-color-neutral-800)"
+            },
+            {
+              "name": "--vvd-nav-item-accent-faint",
+              "default": "var(--vvd-color-neutral-50)"
+            },
+            {
+              "name": "--vvd-nav-item-accent-soft",
+              "default": "var(--vvd-color-neutral-100)"
+            }
+          ],
           "superclass": {
             "name": "TextAnchor",
             "module": "/libs/components/src/lib/text-anchor/text-anchor"
@@ -4483,6 +5412,68 @@
           "kind": "class",
           "description": "Base class for note",
           "name": "Note",
+          "cssProperties": [
+            {
+              "name": "--vvd-note-success-primary",
+              "default": "var(--vvd-color-success-500)"
+            },
+            {
+              "name": "--vvd-note-success-intermediate",
+              "default": "var(--vvd-color-success-500)"
+            },
+            {
+              "name": "--vvd-note-success-backdrop",
+              "default": "var(--vvd-color-success-50)"
+            },
+            {
+              "name": "--vvd-note-information-primary",
+              "default": "var(--vvd-color-information-500)"
+            },
+            {
+              "name": "--vvd-note-information-intermediate",
+              "default": "var(--vvd-color-information-500)"
+            },
+            {
+              "name": "--vvd-note-information-backdrop",
+              "default": "var(--vvd-color-information-50)"
+            },
+            {
+              "name": "--vvd-note-alert-primary",
+              "default": "var(--vvd-color-alert-500)"
+            },
+            {
+              "name": "--vvd-note-alert-intermediate",
+              "default": "var(--vvd-color-alert-500)"
+            },
+            {
+              "name": "--vvd-note-alert-backdrop",
+              "default": "var(--vvd-color-alert-50)"
+            },
+            {
+              "name": "--vvd-note-warning-primary",
+              "default": "var(--vvd-color-warning-300)"
+            },
+            {
+              "name": "--vvd-note-warning-intermediate",
+              "default": "var(--vvd-color-warning-300)"
+            },
+            {
+              "name": "--vvd-note-warning-backdrop",
+              "default": "var(--vvd-color-warning-50)"
+            },
+            {
+              "name": "--vvd-note-accent-primary",
+              "default": "var(--vvd-color-canvas-text)"
+            },
+            {
+              "name": "--vvd-note-accent-intermediate",
+              "default": "var(--vvd-color-neutral-500)"
+            },
+            {
+              "name": "--vvd-note-accent-backdrop",
+              "default": "var(--vvd-color-canvas)"
+            }
+          ],
           "slots": [
             {
               "description": "Any slotted content will appear below the headline.",
@@ -4621,6 +5612,80 @@
           "kind": "class",
           "description": "Base class for number-field",
           "name": "NumberField",
+          "cssProperties": [
+            {
+              "name": "--vvd-text-field-success-primary",
+              "default": "var(--vvd-color-success-500)"
+            },
+            {
+              "name": "--vvd-text-field-success-backdrop",
+              "default": "var(--vvd-color-success-50)"
+            },
+            {
+              "name": "--vvd-text-field-success-intermediate",
+              "default": "var(--vvd-color-success-500)"
+            },
+            {
+              "name": "--vvd-text-field-success-firm",
+              "default": "var(--vvd-color-success-600)"
+            },
+            {
+              "name": "--vvd-text-field-success-faint",
+              "default": "var(--vvd-color-success-50)"
+            },
+            {
+              "name": "--vvd-text-field-success-soft",
+              "default": "var(--vvd-color-success-100)"
+            },
+            {
+              "name": "--vvd-text-field-alert-primary",
+              "default": "var(--vvd-color-alert-500)"
+            },
+            {
+              "name": "--vvd-text-field-alert-backdrop",
+              "default": "var(--vvd-color-alert-50)"
+            },
+            {
+              "name": "--vvd-text-field-alert-intermediate",
+              "default": "var(--vvd-color-alert-500)"
+            },
+            {
+              "name": "--vvd-text-field-alert-firm",
+              "default": "var(--vvd-color-alert-600)"
+            },
+            {
+              "name": "--vvd-text-field-alert-faint",
+              "default": "var(--vvd-color-alert-50)"
+            },
+            {
+              "name": "--vvd-text-field-alert-soft",
+              "default": "var(--vvd-color-alert-100)"
+            },
+            {
+              "name": "--vvd-text-field-accent-primary",
+              "default": "var(--vvd-color-canvas-text)"
+            },
+            {
+              "name": "--vvd-text-field-accent-backdrop",
+              "default": "var(--vvd-color-canvas)"
+            },
+            {
+              "name": "--vvd-text-field-accent-intermediate",
+              "default": "var(--vvd-color-neutral-500)"
+            },
+            {
+              "name": "--vvd-text-field-accent-firm",
+              "default": "var(--vvd-color-canvas-text)"
+            },
+            {
+              "name": "--vvd-text-field-accent-faint",
+              "default": "var(--vvd-color-neutral-50)"
+            },
+            {
+              "name": "--vvd-text-field-accent-soft",
+              "default": "var(--vvd-color-neutral-100)"
+            }
+          ],
           "members": [
             {
               "kind": "field",
@@ -4732,6 +5797,36 @@
           "kind": "class",
           "description": "Base class for option",
           "name": "ListboxOption",
+          "cssProperties": [
+            {
+              "name": "--vvd-option-accent-primary",
+              "default": "var(--vvd-color-canvas-text)"
+            },
+            {
+              "name": "--vvd-option-accent-primary-text",
+              "default": "var(--vvd-color-canvas)"
+            },
+            {
+              "name": "--vvd-option-accent-primary-increment",
+              "default": "var(--vvd-color-neutral-800)"
+            },
+            {
+              "name": "--vvd-option-accent-faint",
+              "default": "var(--vvd-color-neutral-50)"
+            },
+            {
+              "name": "--vvd-option-accent-soft",
+              "default": "var(--vvd-color-neutral-100)"
+            },
+            {
+              "name": "--vvd-option-accent-pale",
+              "default": "var(--vvd-color-neutral-300)"
+            },
+            {
+              "name": "--vvd-option-accent-dim",
+              "default": "var(--vvd-color-neutral-200)"
+            }
+          ],
           "members": [
             {
               "kind": "field",
@@ -5430,6 +6525,40 @@
           "kind": "class",
           "description": "Base class for progress",
           "name": "Progress",
+          "cssProperties": [
+            {
+              "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",
@@ -5550,6 +6679,24 @@
           "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",
@@ -5647,6 +6794,24 @@
           "kind": "class",
           "description": "Base class for radio",
           "name": "Radio",
+          "cssProperties": [
+            {
+              "name": "--vvd-radio-accent-primary",
+              "default": "var(--vvd-color-canvas-text)"
+            },
+            {
+              "name": "--vvd-radio-accent-firm",
+              "default": "var(--vvd-color-canvas-text)"
+            },
+            {
+              "name": "--vvd-radio-accent-faint",
+              "default": "var(--vvd-color-neutral-50)"
+            },
+            {
+              "name": "--vvd-radio-accent-soft",
+              "default": "var(--vvd-color-neutral-100)"
+            }
+          ],
           "members": [
             {
               "kind": "field",
@@ -5841,38 +7006,92 @@
           "kind": "class",
           "description": "Base class for select",
           "name": "Select",
-          "slots": [
+          "cssProperties": [
             {
-              "description": "Default slot.",
-              "name": ""
-            }
-          ],
-          "members": [
+              "name": "--vvd-select-success-primary",
+              "default": "var(--vvd-color-success-500)"
+            },
             {
-              "kind": "field",
-              "name": "appearance",
-              "type": {
-                "text": "SelectAppearance | undefined"
-              }
+              "name": "--vvd-select-success-backdrop",
+              "default": "var(--vvd-color-success-50)"
             },
             {
-              "kind": "field",
-              "name": "shape",
-              "type": {
-                "text": "SelectShape | undefined"
-              }
+              "name": "--vvd-select-success-intermediate",
+              "default": "var(--vvd-color-success-500)"
             },
             {
-              "kind": "field",
-              "name": "_popup",
-              "type": {
-                "text": "Popup"
-              }
+              "name": "--vvd-select-success-firm",
+              "default": "var(--vvd-color-success-600)"
             },
             {
-              "kind": "field",
-              "name": "_anchor",
-              "type": {
+              "name": "--vvd-select-alert-primary",
+              "default": "var(--vvd-color-alert-500)"
+            },
+            {
+              "name": "--vvd-select-alert-backdrop",
+              "default": "var(--vvd-color-alert-50)"
+            },
+            {
+              "name": "--vvd-select-alert-intermediate",
+              "default": "var(--vvd-color-alert-500)"
+            },
+            {
+              "name": "--vvd-select-alert-firm",
+              "default": "var(--vvd-color-alert-600)"
+            },
+            {
+              "name": "--vvd-select-accent-primary",
+              "default": "var(--vvd-color-canvas-text)"
+            },
+            {
+              "name": "--vvd-select-accent-backdrop",
+              "default": "var(--vvd-color-canvas)"
+            },
+            {
+              "name": "--vvd-select-accent-intermediate",
+              "default": "var(--vvd-color-neutral-500)"
+            },
+            {
+              "name": "--vvd-select-accent-firm",
+              "default": "var(--vvd-color-canvas-text)"
+            }
+          ],
+          "slots": [
+            {
+              "description": "Default slot.",
+              "name": ""
+            },
+            {
+              "description": "Slot to add meta content to the select control.",
+              "name": "meta"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "appearance",
+              "type": {
+                "text": "SelectAppearance | undefined"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "shape",
+              "type": {
+                "text": "SelectShape | undefined"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "_popup",
+              "type": {
+                "text": "Popup"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "_anchor",
+              "type": {
                 "text": "HTMLElement"
               }
             },
@@ -6230,6 +7449,104 @@
           "kind": "class",
           "description": "Base class for switch",
           "name": "Switch",
+          "cssProperties": [
+            {
+              "name": "--vvd-switch-cta-primary-text",
+              "default": "var(--vvd-color-canvas)"
+            },
+            {
+              "name": "--vvd-switch-cta-primary",
+              "default": "var(--vvd-color-cta-500)"
+            },
+            {
+              "name": "--vvd-switch-cta-primary-increment",
+              "default": "var(--vvd-color-cta-600)"
+            },
+            {
+              "name": "--vvd-switch-cta-backdrop",
+              "default": "var(--vvd-color-cta-50)"
+            },
+            {
+              "name": "--vvd-switch-cta-firm",
+              "default": "var(--vvd-color-cta-600)"
+            },
+            {
+              "name": "--vvd-switch-cta-intermediate",
+              "default": "var(--vvd-color-cta-500)"
+            },
+            {
+              "name": "--vvd-switch-alert-primary-text",
+              "default": "var(--vvd-color-canvas)"
+            },
+            {
+              "name": "--vvd-switch-alert-primary",
+              "default": "var(--vvd-color-alert-500)"
+            },
+            {
+              "name": "--vvd-switch-alert-primary-increment",
+              "default": "var(--vvd-color-alert-600)"
+            },
+            {
+              "name": "--vvd-switch-alert-backdrop",
+              "default": "var(--vvd-color-alert-50)"
+            },
+            {
+              "name": "--vvd-switch-alert-firm",
+              "default": "var(--vvd-color-alert-600)"
+            },
+            {
+              "name": "--vvd-switch-alert-intermediate",
+              "default": "var(--vvd-color-alert-500)"
+            },
+            {
+              "name": "--vvd-switch-success-primary-text",
+              "default": "var(--vvd-color-canvas)"
+            },
+            {
+              "name": "--vvd-switch-success-primary",
+              "default": "var(--vvd-color-success-500)"
+            },
+            {
+              "name": "--vvd-switch-success-primary-increment",
+              "default": "var(--vvd-color-success-600)"
+            },
+            {
+              "name": "--vvd-switch-success-backdrop",
+              "default": "var(--vvd-color-success-50)"
+            },
+            {
+              "name": "--vvd-switch-success-firm",
+              "default": "var(--vvd-color-success-600)"
+            },
+            {
+              "name": "--vvd-switch-success-intermediate",
+              "default": "var(--vvd-color-success-500)"
+            },
+            {
+              "name": "--vvd-switch-accent-primary-text",
+              "default": "var(--vvd-color-canvas)"
+            },
+            {
+              "name": "--vvd-switch-accent-primary",
+              "default": "var(--vvd-color-canvas-text)"
+            },
+            {
+              "name": "--vvd-switch-accent-primary-increment",
+              "default": "var(--vvd-color-neutral-800)"
+            },
+            {
+              "name": "--vvd-switch-accent-backdrop",
+              "default": "var(--vvd-color-canvas)"
+            },
+            {
+              "name": "--vvd-switch-accent-firm",
+              "default": "var(--vvd-color-canvas-text)"
+            },
+            {
+              "name": "--vvd-switch-accent-intermediate",
+              "default": "var(--vvd-color-neutral-500)"
+            }
+          ],
           "members": [
             {
               "kind": "field",
@@ -6526,6 +7843,28 @@
           "kind": "class",
           "description": "Base class for tabs",
           "name": "Tabs",
+          "cssProperties": [
+            {
+              "name": "--vvd-tabs-accent-primary",
+              "default": "var(--vvd-color-canvas-text)"
+            },
+            {
+              "name": "--vvd-tabs-accent-primary-text",
+              "default": "var(--vvd-color-canvas)"
+            },
+            {
+              "name": "--vvd-tabs-accent-primary-increment",
+              "default": "var(--vvd-color-neutral-800)"
+            },
+            {
+              "name": "--vvd-tabs-accent-faint",
+              "default": "var(--vvd-color-neutral-50)"
+            },
+            {
+              "name": "--vvd-tabs-accent-soft",
+              "default": "var(--vvd-color-neutral-100)"
+            }
+          ],
           "slots": [
             {
               "description": "Default slot.",
@@ -6594,6 +7933,11 @@
               "kind": "method",
               "name": "patchIndicatorStyleTransition",
               "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "patchActiveID",
+              "privacy": "private"
             }
           ],
           "superclass": {
@@ -6693,6 +8037,64 @@
           "kind": "class",
           "description": "Base class for tag.",
           "name": "Tag",
+          "cssProperties": [
+            {
+              "name": "--vvd-tag-cta-contrast",
+              "default": "var(--vvd-color-cta-800)"
+            },
+            {
+              "name": "--vvd-tag-cta-soft",
+              "default": "var(--vvd-color-cta-100)"
+            },
+            {
+              "name": "--vvd-tag-cta-pale",
+              "default": "var(--vvd-color-cta-300)"
+            },
+            {
+              "name": "--vvd-tag-cta-fierce",
+              "default": "var(--vvd-color-cta-700)"
+            },
+            {
+              "name": "--vvd-tag-cta-firm",
+              "default": "var(--vvd-color-cta-600)"
+            },
+            {
+              "name": "--vvd-tag-cta-faint",
+              "default": "var(--vvd-color-cta-50)"
+            },
+            {
+              "name": "--vvd-tag-cta-dim",
+              "default": "var(--vvd-color-cta-200)"
+            },
+            {
+              "name": "--vvd-tag-accent-contrast",
+              "default": "var(--vvd-color-neutral-800)"
+            },
+            {
+              "name": "--vvd-tag-accent-soft",
+              "default": "var(--vvd-color-neutral-100)"
+            },
+            {
+              "name": "--vvd-tag-accent-pale",
+              "default": "var(--vvd-color-neutral-300)"
+            },
+            {
+              "name": "--vvd-tag-accent-fierce",
+              "default": "var(--vvd-color-neutral-700)"
+            },
+            {
+              "name": "--vvd-tag-accent-firm",
+              "default": "var(--vvd-color-canvas-text)"
+            },
+            {
+              "name": "--vvd-tag-accent-faint",
+              "default": "var(--vvd-color-neutral-50)"
+            },
+            {
+              "name": "--vvd-tag-accent-dim",
+              "default": "var(--vvd-color-neutral-200)"
+            }
+          ],
           "members": [
             {
               "kind": "field",
@@ -7095,6 +8497,80 @@
           "kind": "class",
           "description": "Base class for text-area",
           "name": "TextArea",
+          "cssProperties": [
+            {
+              "name": "--vvd-text-area-success-primary",
+              "default": "var(--vvd-color-success-500)"
+            },
+            {
+              "name": "--vvd-text-area-success-backdrop",
+              "default": "var(--vvd-color-success-50)"
+            },
+            {
+              "name": "--vvd-text-area-success-intermediate",
+              "default": "var(--vvd-color-success-500)"
+            },
+            {
+              "name": "--vvd-text-area-success-firm",
+              "default": "var(--vvd-color-success-600)"
+            },
+            {
+              "name": "--vvd-text-area-success-faint",
+              "default": "var(--vvd-color-success-50)"
+            },
+            {
+              "name": "--vvd-text-area-success-soft",
+              "default": "var(--vvd-color-success-100)"
+            },
+            {
+              "name": "--vvd-text-area-alert-primary",
+              "default": "var(--vvd-color-alert-500)"
+            },
+            {
+              "name": "--vvd-text-area-alert-backdrop",
+              "default": "var(--vvd-color-alert-50)"
+            },
+            {
+              "name": "--vvd-text-area-alert-intermediate",
+              "default": "var(--vvd-color-alert-500)"
+            },
+            {
+              "name": "--vvd-text-area-alert-firm",
+              "default": "var(--vvd-color-alert-600)"
+            },
+            {
+              "name": "--vvd-text-area-alert-faint",
+              "default": "var(--vvd-color-alert-50)"
+            },
+            {
+              "name": "--vvd-text-area-alert-soft",
+              "default": "var(--vvd-color-alert-100)"
+            },
+            {
+              "name": "--vvd-text-area-accent-primary",
+              "default": "var(--vvd-color-canvas-text)"
+            },
+            {
+              "name": "--vvd-text-area-accent-backdrop",
+              "default": "var(--vvd-color-canvas)"
+            },
+            {
+              "name": "--vvd-text-area-accent-intermediate",
+              "default": "var(--vvd-color-neutral-500)"
+            },
+            {
+              "name": "--vvd-text-area-accent-firm",
+              "default": "var(--vvd-color-canvas-text)"
+            },
+            {
+              "name": "--vvd-text-area-accent-faint",
+              "default": "var(--vvd-color-neutral-50)"
+            },
+            {
+              "name": "--vvd-text-area-accent-soft",
+              "default": "var(--vvd-color-neutral-100)"
+            }
+          ],
           "members": [
             {
               "kind": "field",
@@ -7194,6 +8670,80 @@
           "kind": "class",
           "description": "Base class for text-field",
           "name": "TextField",
+          "cssProperties": [
+            {
+              "name": "--vvd-text-field-success-primary",
+              "default": "var(--vvd-color-success-500)"
+            },
+            {
+              "name": "--vvd-text-field-success-backdrop",
+              "default": "var(--vvd-color-success-50)"
+            },
+            {
+              "name": "--vvd-text-field-success-intermediate",
+              "default": "var(--vvd-color-success-500)"
+            },
+            {
+              "name": "--vvd-text-field-success-firm",
+              "default": "var(--vvd-color-success-600)"
+            },
+            {
+              "name": "--vvd-text-field-success-faint",
+              "default": "var(--vvd-color-success-50)"
+            },
+            {
+              "name": "--vvd-text-field-success-soft",
+              "default": "var(--vvd-color-success-100)"
+            },
+            {
+              "name": "--vvd-text-field-alert-primary",
+              "default": "var(--vvd-color-alert-500)"
+            },
+            {
+              "name": "--vvd-text-field-alert-backdrop",
+              "default": "var(--vvd-color-alert-50)"
+            },
+            {
+              "name": "--vvd-text-field-alert-intermediate",
+              "default": "var(--vvd-color-alert-500)"
+            },
+            {
+              "name": "--vvd-text-field-alert-firm",
+              "default": "var(--vvd-color-alert-600)"
+            },
+            {
+              "name": "--vvd-text-field-alert-faint",
+              "default": "var(--vvd-color-alert-50)"
+            },
+            {
+              "name": "--vvd-text-field-alert-soft",
+              "default": "var(--vvd-color-alert-100)"
+            },
+            {
+              "name": "--vvd-text-field-accent-primary",
+              "default": "var(--vvd-color-canvas-text)"
+            },
+            {
+              "name": "--vvd-text-field-accent-backdrop",
+              "default": "var(--vvd-color-canvas)"
+            },
+            {
+              "name": "--vvd-text-field-accent-intermediate",
+              "default": "var(--vvd-color-neutral-500)"
+            },
+            {
+              "name": "--vvd-text-field-accent-firm",
+              "default": "var(--vvd-color-canvas-text)"
+            },
+            {
+              "name": "--vvd-text-field-accent-faint",
+              "default": "var(--vvd-color-neutral-50)"
+            },
+            {
+              "name": "--vvd-text-field-accent-soft",
+              "default": "var(--vvd-color-neutral-100)"
+            }
+          ],
           "members": [
             {
               "kind": "field",
@@ -7257,6 +8807,262 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "libs/components/src/lib/toggletip/definition.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "toggletipDefinition",
+          "description": "The toggletip element."
+        },
+        {
+          "kind": "variable",
+          "name": "registerToggletip",
+          "description": "Registers the toggletip element with the design system.",
+          "parameters": [
+            {
+              "description": "the prefix to use for the component name",
+              "name": "prefix"
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "toggletipDefinition",
+          "declaration": {
+            "name": "toggletipDefinition",
+            "module": "libs/components/src/lib/toggletip/definition.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "registerToggletip",
+          "declaration": {
+            "name": "registerToggletip",
+            "module": "libs/components/src/lib/toggletip/definition.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "libs/components/src/lib/toggletip/toggletip.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Base class for toggletip",
+          "name": "Toggletip",
+          "members": [
+            {
+              "kind": "field",
+              "name": "#anchorEl",
+              "privacy": "private",
+              "type": {
+                "text": "HTMLElement | null"
+              },
+              "default": "null"
+            },
+            {
+              "kind": "field",
+              "name": "#ANCHOR_ARIA_LABEL_SUFFIX",
+              "privacy": "private",
+              "type": {
+                "text": "string"
+              },
+              "default": "' ; Show more information'"
+            },
+            {
+              "kind": "field",
+              "name": "headline",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "the optional title of the toggletip",
+              "privacy": "public"
+            },
+            {
+              "kind": "field",
+              "name": "alternate",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "toggle color scheme",
+              "privacy": "public"
+            },
+            {
+              "kind": "field",
+              "name": "placement",
+              "type": {
+                "text": "Placement | undefined"
+              },
+              "default": "'right'",
+              "description": "placement of the toggletip",
+              "privacy": "public"
+            },
+            {
+              "kind": "field",
+              "name": "anchor",
+              "type": {
+                "text": "AnchorType"
+              },
+              "default": "''",
+              "description": "id or direct reference to the toggletip's anchor element",
+              "privacy": "public"
+            },
+            {
+              "kind": "method",
+              "name": "anchorChanged",
+              "parameters": [
+                {
+                  "name": "_",
+                  "type": {
+                    "text": "AnchorType"
+                  }
+                },
+                {
+                  "name": "newValue",
+                  "type": {
+                    "text": "AnchorType"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "field",
+              "name": "open",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "indicates whether the toggletip is open",
+              "privacy": "public"
+            },
+            {
+              "kind": "method",
+              "name": "openChanged",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "oldValue",
+                  "type": {
+                    "text": "boolean"
+                  }
+                },
+                {
+                  "name": "newValue",
+                  "type": {
+                    "text": "boolean"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "#setupAnchor",
+              "parameters": [
+                {
+                  "name": "a",
+                  "type": {
+                    "text": "HTMLElement"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "#cleanupAnchor",
+              "parameters": [
+                {
+                  "name": "a",
+                  "type": {
+                    "text": "HTMLElement"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "field",
+              "name": "#openIfClosed",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "#closeOnClickOutside",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "#closeOnEscape",
+              "privacy": "private"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "headline",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "the optional title of the toggletip",
+              "fieldName": "headline"
+            },
+            {
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "toggle color scheme",
+              "fieldName": "alternate"
+            },
+            {
+              "type": {
+                "text": "Placement | undefined"
+              },
+              "default": "'right'",
+              "description": "placement of the toggletip",
+              "fieldName": "placement"
+            },
+            {
+              "type": {
+                "text": "AnchorType"
+              },
+              "default": "''",
+              "description": "id or direct reference to the toggletip's anchor element",
+              "fieldName": "anchor"
+            },
+            {
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "indicates whether the toggletip is open",
+              "fieldName": "open"
+            }
+          ],
+          "superclass": {
+            "name": "FoundationElement",
+            "package": "@microsoft/fast-foundation"
+          }
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "Toggletip",
+          "declaration": {
+            "name": "Toggletip",
+            "module": "libs/components/src/lib/toggletip/toggletip.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "libs/components/src/lib/tooltip/definition.ts",
@@ -7523,6 +9329,28 @@
           "kind": "class",
           "description": "Base class for tree-item",
           "name": "TreeItem",
+          "cssProperties": [
+            {
+              "name": "--vvd-tree-item-accent-primary",
+              "default": "var(--vvd-color-canvas-text)"
+            },
+            {
+              "name": "--vvd-tree-item-accent-primary-text",
+              "default": "var(--vvd-color-canvas)"
+            },
+            {
+              "name": "--vvd-tree-item-accent-primary-increment",
+              "default": "var(--vvd-color-neutral-800)"
+            },
+            {
+              "name": "--vvd-tree-item-accent-faint",
+              "default": "var(--vvd-color-neutral-50)"
+            },
+            {
+              "name": "--vvd-tree-item-accent-soft",
+              "default": "var(--vvd-color-neutral-100)"
+            }
+          ],
           "slots": [
             {
               "description": "To specify a child tree item.",