@vonage/vivid 3.13.0 → 3.15.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,29 +2723,34 @@
           "kind": "class",
           "description": "Base class for checkbox",
           "name": "Checkbox",
-          "members": [
+          "cssProperties": [
             {
-              "kind": "field",
-              "name": "label",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Indicates the checkbox's label.",
-              "privacy": "public"
-            }
-          ],
-          "attributes": [
+              "name": "--vvd-checkbox-accent-primary",
+              "default": "var(--vvd-color-canvas-text)"
+            },
             {
-              "name": "label",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Indicates the checkbox's label.",
-              "fieldName": "label"
+              "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)"
             }
           ],
           "superclass": {
-            "name": "FastCheckbox",
+            "name": "FoundationCheckbox",
             "package": "@microsoft/fast-foundation"
           }
         }
@@ -2214,6 +2809,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 +2943,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 +3045,16 @@
               ]
             }
           ],
+          "attributes": [
+            {
+              "name": "aria-selected",
+              "type": {
+                "text": "string | null"
+              },
+              "default": "null",
+              "fieldName": "ariaSelected"
+            }
+          ],
           "superclass": {
             "name": "FoundationElement",
             "package": "@microsoft/fast-foundation"
@@ -2381,6 +3080,76 @@
           "kind": "class",
           "description": "Base class for data-grid",
           "name": "DataGridRow",
+          "cssProperties": [
+            {
+              "name": "--vvd-data-grid-row-cta-primary",
+              "default": "var(--vvd-color-cta-500)"
+            },
+            {
+              "name": "--vvd-data-grid-row-cta-primary-text",
+              "default": "var(--vvd-color-canvas)"
+            },
+            {
+              "name": "--vvd-data-grid-row-cta-primary-increment",
+              "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-pale",
+              "default": "var(--vvd-color-cta-300)"
+            },
+            {
+              "name": "--vvd-data-grid-row-cta-dim",
+              "default": "var(--vvd-color-cta-200)"
+            },
+            {
+              "name": "--vvd-data-grid-row-accent-primary",
+              "default": "var(--vvd-color-canvas-text)"
+            },
+            {
+              "name": "--vvd-data-grid-row-accent-primary-text",
+              "default": "var(--vvd-color-canvas)"
+            },
+            {
+              "name": "--vvd-data-grid-row-accent-primary-increment",
+              "default": "var(--vvd-color-neutral-800)"
+            },
+            {
+              "name": "--vvd-data-grid-row-accent-faint",
+              "default": "var(--vvd-color-neutral-50)"
+            },
+            {
+              "name": "--vvd-data-grid-row-accent-pale",
+              "default": "var(--vvd-color-neutral-300)"
+            },
+            {
+              "name": "--vvd-data-grid-row-accent-dim",
+              "default": "var(--vvd-color-neutral-200)"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "ariaSelected",
+              "type": {
+                "text": "string | null"
+              },
+              "default": "null"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "aria-selected",
+              "type": {
+                "text": "string | null"
+              },
+              "default": "null",
+              "fieldName": "ariaSelected"
+            }
+          ],
           "superclass": {
             "name": "FoundationElement",
             "package": "@microsoft/fast-foundation"
@@ -2504,9 +3273,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 +3294,57 @@
               "type": {
                 "text": "DataGridSelectionMode | undefined"
               }
+            },
+            {
+              "kind": "field",
+              "name": "#selectedRows",
+              "privacy": "private",
+              "type": {
+                "text": "DataGridRow[]"
+              },
+              "readonly": true
+            },
+            {
+              "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": "#handleCellSelection",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "#handleRowSelection",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "#setSelectedState",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "#resetSelection"
             }
           ],
           "attributes": [
@@ -2964,33 +3784,129 @@
           "description": "Registers the divider elements with the design system.",
           "parameters": [
             {
-              "description": "the prefix to use for the component name",
-              "name": "prefix"
+              "description": "the prefix to use for the component name",
+              "name": "prefix"
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "registerDivider",
+          "declaration": {
+            "name": "registerDivider",
+            "module": "libs/components/src/lib/divider/definition.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "libs/components/src/lib/divider/divider.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Base class for divider",
+          "name": "Divider",
+          "superclass": {
+            "name": "FoundationDivider",
+            "package": "@microsoft/fast-foundation"
+          }
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "Divider",
+          "declaration": {
+            "name": "Divider",
+            "module": "libs/components/src/lib/divider/divider.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "libs/components/src/lib/elevation/definition.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "registerElevation",
+          "description": "Registers the elevation elements with the design system.",
+          "parameters": [
+            {
+              "description": "the prefix to use for the component name",
+              "name": "prefix"
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "registerElevation",
+          "declaration": {
+            "name": "registerElevation",
+            "module": "libs/components/src/lib/elevation/definition.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "libs/components/src/lib/elevation/elevation.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Base class for elevation",
+          "name": "Elevation",
+          "slots": [
+            {
+              "description": "Default slot.",
+              "name": ""
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "dp",
+              "type": {
+                "text": "0 | 2 | 4 | 8 | 12 | 16 | 24 | undefined"
+              },
+              "description": "Indicates the elevation's dp.",
+              "privacy": "public"
+            },
+            {
+              "kind": "field",
+              "name": "noShadow",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "description": "toggles the elevation's shadow.",
+              "privacy": "public"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "dp",
+              "type": {
+                "text": "0 | 2 | 4 | 8 | 12 | 16 | 24 | undefined"
+              },
+              "description": "Indicates the elevation's dp.",
+              "fieldName": "dp"
+            },
+            {
+              "name": "no-shadow",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "description": "toggles the elevation's shadow.",
+              "fieldName": "noShadow"
             }
-          ]
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "registerDivider",
-          "declaration": {
-            "name": "registerDivider",
-            "module": "libs/components/src/lib/divider/definition.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "libs/components/src/lib/divider/divider.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "Base class for divider",
-          "name": "Divider",
+          ],
           "superclass": {
-            "name": "FoundationDivider",
+            "name": "FoundationElement",
             "package": "@microsoft/fast-foundation"
           }
         }
@@ -2998,22 +3914,26 @@
       "exports": [
         {
           "kind": "js",
-          "name": "Divider",
+          "name": "Elevation",
           "declaration": {
-            "name": "Divider",
-            "module": "libs/components/src/lib/divider/divider.ts"
+            "name": "Elevation",
+            "module": "libs/components/src/lib/elevation/elevation.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "libs/components/src/lib/elevation/definition.ts",
+      "path": "libs/components/src/lib/empty-state/definition.ts",
       "declarations": [
         {
           "kind": "variable",
-          "name": "registerElevation",
-          "description": "Registers the elevation elements with the design system.",
+          "name": "emptyStateDefinition"
+        },
+        {
+          "kind": "variable",
+          "name": "registerEmptyState",
+          "description": "Registers the empty-state element with the design system.",
           "parameters": [
             {
               "description": "the prefix to use for the component name",
@@ -3025,64 +3945,80 @@
       "exports": [
         {
           "kind": "js",
-          "name": "registerElevation",
+          "name": "emptyStateDefinition",
           "declaration": {
-            "name": "registerElevation",
-            "module": "libs/components/src/lib/elevation/definition.ts"
+            "name": "emptyStateDefinition",
+            "module": "libs/components/src/lib/empty-state/definition.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "registerEmptyState",
+          "declaration": {
+            "name": "registerEmptyState",
+            "module": "libs/components/src/lib/empty-state/definition.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "libs/components/src/lib/elevation/elevation.ts",
+      "path": "libs/components/src/lib/empty-state/empty-state.ts",
       "declarations": [
         {
           "kind": "class",
-          "description": "Base class for elevation",
-          "name": "Elevation",
+          "description": "An empty state element. Used when there is no data to display to the user.",
+          "name": "EmptyState",
           "slots": [
             {
-              "description": "Default slot.",
+              "description": "The default slot controls the body text of the empty state",
               "name": ""
+            },
+            {
+              "description": "The graphic slot allows overriding the icon with a custom illustration",
+              "name": "graphic"
+            },
+            {
+              "description": "Slot to add action items to the empty state",
+              "name": "action-items"
             }
           ],
           "members": [
             {
               "kind": "field",
-              "name": "dp",
+              "name": "headline",
               "type": {
-                "text": "0 | 2 | 4 | 8 | 12 | 16 | 24 | undefined"
+                "text": "string | undefined"
               },
-              "description": "Indicates the elevation's dp.",
+              "description": "An optional headline for the empty state.",
               "privacy": "public"
             },
             {
               "kind": "field",
-              "name": "noShadow",
+              "name": "icon",
               "type": {
-                "text": "boolean | undefined"
+                "text": "string | undefined"
               },
-              "description": "toggles the elevation's shadow.",
+              "description": "Icon for the empty state.",
               "privacy": "public"
             }
           ],
           "attributes": [
             {
-              "name": "dp",
+              "name": "headline",
               "type": {
-                "text": "0 | 2 | 4 | 8 | 12 | 16 | 24 | undefined"
+                "text": "string | undefined"
               },
-              "description": "Indicates the elevation's dp.",
-              "fieldName": "dp"
+              "description": "An optional headline for the empty state.",
+              "fieldName": "headline"
             },
             {
-              "name": "no-shadow",
+              "name": "icon",
               "type": {
-                "text": "boolean | undefined"
+                "text": "string | undefined"
               },
-              "description": "toggles the elevation's shadow.",
-              "fieldName": "noShadow"
+              "description": "Icon for the empty state.",
+              "fieldName": "icon"
             }
           ],
           "superclass": {
@@ -3094,10 +4030,10 @@
       "exports": [
         {
           "kind": "js",
-          "name": "Elevation",
+          "name": "EmptyState",
           "declaration": {
-            "name": "Elevation",
-            "module": "libs/components/src/lib/elevation/elevation.ts"
+            "name": "EmptyState",
+            "module": "libs/components/src/lib/empty-state/empty-state.ts"
           }
         }
       ]
@@ -3166,6 +4102,56 @@
           "kind": "class",
           "description": "Base class for fab",
           "name": "Fab",
+          "cssProperties": [
+            {
+              "name": "--vvd-fab-accent-primary",
+              "default": "var(--vvd-color-canvas-text)"
+            },
+            {
+              "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",
@@ -3499,6 +4485,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.",
@@ -3838,6 +4850,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.",
@@ -4094,6 +5124,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",
@@ -4268,6 +5328,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.",
@@ -4389,6 +5467,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"
@@ -4491,6 +5591,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.",
@@ -4629,6 +5791,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",
@@ -4740,6 +5976,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",
@@ -5438,6 +6704,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",
@@ -5558,6 +6858,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",
@@ -5655,6 +6973,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",
@@ -5849,10 +7185,64 @@
           "kind": "class",
           "description": "Base class for select",
           "name": "Select",
+          "cssProperties": [
+            {
+              "name": "--vvd-select-success-primary",
+              "default": "var(--vvd-color-success-500)"
+            },
+            {
+              "name": "--vvd-select-success-backdrop",
+              "default": "var(--vvd-color-success-50)"
+            },
+            {
+              "name": "--vvd-select-success-intermediate",
+              "default": "var(--vvd-color-success-500)"
+            },
+            {
+              "name": "--vvd-select-success-firm",
+              "default": "var(--vvd-color-success-600)"
+            },
+            {
+              "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": [
@@ -6238,6 +7628,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",
@@ -6534,6 +8022,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.",
@@ -6706,6 +8216,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",
@@ -7108,6 +8676,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",
@@ -7207,6 +8849,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",
@@ -7792,6 +9508,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.",