@vonage/vivid 4.3.0 → 4.5.0

package/custom-elements.json

@@ -819,600 +819,6 @@
       "declarations": [],
       "exports": []
     },
-    {
-      "kind": "javascript-module",
-      "path": "libs/components/src/lib/appearance-ui/appearance-ui.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "AppearanceUi",
-          "cssProperties": [
-            {
-              "name": "--vvd-appearanceUI-cta-faint",
-              "default": "var(--vvd-color-cta-50)"
-            },
-            {
-              "name": "--vvd-appearanceUI-cta-soft",
-              "default": "var(--vvd-color-cta-100)"
-            },
-            {
-              "name": "--vvd-appearanceUI-cta-dim",
-              "default": "var(--vvd-color-cta-200)"
-            },
-            {
-              "name": "--vvd-appearanceUI-cta-pale",
-              "default": "var(--vvd-color-cta-300)"
-            },
-            {
-              "name": "--vvd-appearanceUI-cta-light",
-              "default": "var(--vvd-color-cta-400)"
-            },
-            {
-              "name": "--vvd-appearanceUI-cta-primary",
-              "default": "var(--vvd-color-cta-500)"
-            },
-            {
-              "name": "--vvd-appearanceUI-cta-primary-text",
-              "default": "var(--vvd-color-canvas)"
-            },
-            {
-              "name": "--vvd-appearanceUI-cta-primary-increment",
-              "default": "var(--vvd-color-cta-600)"
-            },
-            {
-              "name": "--vvd-appearanceUI-cta-firm",
-              "default": "var(--vvd-color-cta-600)"
-            },
-            {
-              "name": "--vvd-appearanceUI-cta-firm-all",
-              "default": "var(--vvd-color-cta-600)"
-            },
-            {
-              "name": "--vvd-appearanceUI-cta-fierce",
-              "default": "var(--vvd-color-cta-700)"
-            },
-            {
-              "name": "--vvd-appearanceUI-cta-fierce-primary",
-              "default": "var(--vvd-color-cta-700)"
-            },
-            {
-              "name": "--vvd-appearanceUI-cta-contrast",
-              "default": "var(--vvd-color-cta-800)"
-            },
-            {
-              "name": "--vvd-appearanceUI-cta-intermediate",
-              "default": "var(--vvd-color-cta-500)"
-            },
-            {
-              "name": "--vvd-appearanceUI-success-faint",
-              "default": "var(--vvd-color-success-50)"
-            },
-            {
-              "name": "--vvd-appearanceUI-success-soft",
-              "default": "var(--vvd-color-success-100)"
-            },
-            {
-              "name": "--vvd-appearanceUI-success-dim",
-              "default": "var(--vvd-color-success-200)"
-            },
-            {
-              "name": "--vvd-appearanceUI-success-pale",
-              "default": "var(--vvd-color-success-300)"
-            },
-            {
-              "name": "--vvd-appearanceUI-success-light",
-              "default": "var(--vvd-color-success-400)"
-            },
-            {
-              "name": "--vvd-appearanceUI-success-primary",
-              "default": "var(--vvd-color-success-500)"
-            },
-            {
-              "name": "--vvd-appearanceUI-success-primary-text",
-              "default": "var(--vvd-color-canvas)"
-            },
-            {
-              "name": "--vvd-appearanceUI-success-primary-increment",
-              "default": "var(--vvd-color-success-600)"
-            },
-            {
-              "name": "--vvd-appearanceUI-success-firm",
-              "default": "var(--vvd-color-success-600)"
-            },
-            {
-              "name": "--vvd-appearanceUI-success-firm-all",
-              "default": "var(--vvd-color-success-600)"
-            },
-            {
-              "name": "--vvd-appearanceUI-success-fierce",
-              "default": "var(--vvd-color-success-700)"
-            },
-            {
-              "name": "--vvd-appearanceUI-success-fierce-primary",
-              "default": "var(--vvd-color-success-700)"
-            },
-            {
-              "name": "--vvd-appearanceUI-success-contrast",
-              "default": "var(--vvd-color-success-800)"
-            },
-            {
-              "name": "--vvd-appearanceUI-success-intermediate",
-              "default": "var(--vvd-color-success-500)"
-            },
-            {
-              "name": "--vvd-appearanceUI-alert-faint",
-              "default": "var(--vvd-color-alert-50)"
-            },
-            {
-              "name": "--vvd-appearanceUI-alert-soft",
-              "default": "var(--vvd-color-alert-100)"
-            },
-            {
-              "name": "--vvd-appearanceUI-alert-dim",
-              "default": "var(--vvd-color-alert-200)"
-            },
-            {
-              "name": "--vvd-appearanceUI-alert-pale",
-              "default": "var(--vvd-color-alert-300)"
-            },
-            {
-              "name": "--vvd-appearanceUI-alert-light",
-              "default": "var(--vvd-color-alert-400)"
-            },
-            {
-              "name": "--vvd-appearanceUI-alert-primary",
-              "default": "var(--vvd-color-alert-500)"
-            },
-            {
-              "name": "--vvd-appearanceUI-alert-primary-text",
-              "default": "var(--vvd-color-canvas)"
-            },
-            {
-              "name": "--vvd-appearanceUI-alert-primary-increment",
-              "default": "var(--vvd-color-alert-600)"
-            },
-            {
-              "name": "--vvd-appearanceUI-alert-firm",
-              "default": "var(--vvd-color-alert-600)"
-            },
-            {
-              "name": "--vvd-appearanceUI-alert-firm-all",
-              "default": "var(--vvd-color-alert-600)"
-            },
-            {
-              "name": "--vvd-appearanceUI-alert-fierce",
-              "default": "var(--vvd-color-alert-700)"
-            },
-            {
-              "name": "--vvd-appearanceUI-alert-fierce-primary",
-              "default": "var(--vvd-color-alert-700)"
-            },
-            {
-              "name": "--vvd-appearanceUI-alert-contrast",
-              "default": "var(--vvd-color-alert-800)"
-            },
-            {
-              "name": "--vvd-appearanceUI-alert-intermediate",
-              "default": "var(--vvd-color-alert-500)"
-            },
-            {
-              "name": "--vvd-appearanceUI-warning-faint",
-              "default": "var(--vvd-color-warning-50)"
-            },
-            {
-              "name": "--vvd-appearanceUI-warning-soft",
-              "default": "var(--vvd-color-warning-100)"
-            },
-            {
-              "name": "--vvd-appearanceUI-warning-dim",
-              "default": "var(--vvd-color-warning-200)"
-            },
-            {
-              "name": "--vvd-appearanceUI-warning-pale",
-              "default": "var(--vvd-color-warning-300)"
-            },
-            {
-              "name": "--vvd-appearanceUI-warning-light",
-              "default": "var(--vvd-color-warning-400)"
-            },
-            {
-              "name": "--vvd-appearanceUI-warning-primary",
-              "default": "var(--vvd-color-warning-300)"
-            },
-            {
-              "name": "--vvd-appearanceUI-warning-primary-text",
-              "default": "var(--vvd-color-canvas-text)"
-            },
-            {
-              "name": "--vvd-appearanceUI-warning-primary-increment",
-              "default": "var(--vvd-color-warning-600)"
-            },
-            {
-              "name": "--vvd-appearanceUI-warning-firm",
-              "default": "var(--vvd-color-warning-600)"
-            },
-            {
-              "name": "--vvd-appearanceUI-warning-firm-all",
-              "default": "var(--vvd-color-warning-600)"
-            },
-            {
-              "name": "--vvd-appearanceUI-warning-fierce",
-              "default": "var(--vvd-color-warning-700)"
-            },
-            {
-              "name": "--vvd-appearanceUI-warning-fierce-primary",
-              "default": "var(--vvd-color-warning-300)"
-            },
-            {
-              "name": "--vvd-appearanceUI-warning-contrast",
-              "default": "var(--vvd-color-warning-800)"
-            },
-            {
-              "name": "--vvd-appearanceUI-warning-intermediate",
-              "default": "var(--vvd-color-warning-300)"
-            },
-            {
-              "name": "--vvd-appearanceUI-information-faint",
-              "default": "var(--vvd-color-information-50)"
-            },
-            {
-              "name": "--vvd-appearanceUI-information-soft",
-              "default": "var(--vvd-color-information-100)"
-            },
-            {
-              "name": "--vvd-appearanceUI-information-dim",
-              "default": "var(--vvd-color-information-200)"
-            },
-            {
-              "name": "--vvd-appearanceUI-information-pale",
-              "default": "var(--vvd-color-information-300)"
-            },
-            {
-              "name": "--vvd-appearanceUI-information-light",
-              "default": "var(--vvd-color-information-400)"
-            },
-            {
-              "name": "--vvd-appearanceUI-information-primary",
-              "default": "var(--vvd-color-information-500)"
-            },
-            {
-              "name": "--vvd-appearanceUI-information-primary-text",
-              "default": "var(--vvd-color-canvas)"
-            },
-            {
-              "name": "--vvd-appearanceUI-information-primary-increment",
-              "default": "var(--vvd-color-information-600)"
-            },
-            {
-              "name": "--vvd-appearanceUI-information-firm",
-              "default": "var(--vvd-color-information-600)"
-            },
-            {
-              "name": "--vvd-appearanceUI-information-firm-all",
-              "default": "var(--vvd-color-information-600)"
-            },
-            {
-              "name": "--vvd-appearanceUI-information-fierce",
-              "default": "var(--vvd-color-information-700)"
-            },
-            {
-              "name": "--vvd-appearanceUI-information-fierce-primary",
-              "default": "var(--vvd-color-information-700)"
-            },
-            {
-              "name": "--vvd-appearanceUI-information-contrast",
-              "default": "var(--vvd-color-information-800)"
-            },
-            {
-              "name": "--vvd-appearanceUI-information-intermediate",
-              "default": "var(--vvd-color-information-500)"
-            },
-            {
-              "name": "--vvd-appearanceUI-announcement-faint",
-              "default": "var(--vvd-color-announcement-50)"
-            },
-            {
-              "name": "--vvd-appearanceUI-announcement-soft",
-              "default": "var(--vvd-color-announcement-100)"
-            },
-            {
-              "name": "--vvd-appearanceUI-announcement-dim",
-              "default": "var(--vvd-color-announcement-200)"
-            },
-            {
-              "name": "--vvd-appearanceUI-announcement-pale",
-              "default": "var(--vvd-color-announcement-300)"
-            },
-            {
-              "name": "--vvd-appearanceUI-announcement-light",
-              "default": "var(--vvd-color-announcement-400)"
-            },
-            {
-              "name": "--vvd-appearanceUI-announcement-primary",
-              "default": "var(--vvd-color-announcement-500)"
-            },
-            {
-              "name": "--vvd-appearanceUI-announcement-primary-text",
-              "default": "var(--vvd-color-canvas)"
-            },
-            {
-              "name": "--vvd-appearanceUI-announcement-primary-increment",
-              "default": "var(--vvd-color-announcement-600)"
-            },
-            {
-              "name": "--vvd-appearanceUI-announcement-firm",
-              "default": "var(--vvd-color-announcement-600)"
-            },
-            {
-              "name": "--vvd-appearanceUI-announcement-firm-all",
-              "default": "var(--vvd-color-announcement-600)"
-            },
-            {
-              "name": "--vvd-appearanceUI-announcement-fierce",
-              "default": "var(--vvd-color-announcement-700)"
-            },
-            {
-              "name": "--vvd-appearanceUI-announcement-fierce-primary",
-              "default": "var(--vvd-color-announcement-700)"
-            },
-            {
-              "name": "--vvd-appearanceUI-announcement-contrast",
-              "default": "var(--vvd-color-announcement-800)"
-            },
-            {
-              "name": "--vvd-appearanceUI-announcement-intermediate",
-              "default": "var(--vvd-color-announcement-500)"
-            },
-            {
-              "name": "--vvd-appearanceUI-accent-faint",
-              "default": "var(--vvd-color-neutral-50)"
-            },
-            {
-              "name": "--vvd-appearanceUI-accent-soft",
-              "default": "var(--vvd-color-neutral-100)"
-            },
-            {
-              "name": "--vvd-appearanceUI-accent-dim",
-              "default": "var(--vvd-color-neutral-200)"
-            },
-            {
-              "name": "--vvd-appearanceUI-accent-pale",
-              "default": "var(--vvd-color-neutral-300)"
-            },
-            {
-              "name": "--vvd-appearanceUI-accent-light",
-              "default": "var(--vvd-color-neutral-400)"
-            },
-            {
-              "name": "--vvd-appearanceUI-accent-primary",
-              "default": "var(--vvd-color-canvas-text)"
-            },
-            {
-              "name": "--vvd-appearanceUI-accent-primary-text",
-              "default": "var(--vvd-color-canvas)"
-            },
-            {
-              "name": "--vvd-appearanceUI-accent-primary-increment",
-              "default": "var(--vvd-color-neutral-800)"
-            },
-            {
-              "name": "--vvd-appearanceUI-accent-firm",
-              "default": "var(--vvd-color-canvas-text)"
-            },
-            {
-              "name": "--vvd-appearanceUI-accent-firm-all",
-              "default": "var(--vvd-color-neutral-600)"
-            },
-            {
-              "name": "--vvd-appearanceUI-accent-fierce",
-              "default": "var(--vvd-color-neutral-700)"
-            },
-            {
-              "name": "--vvd-appearanceUI-accent-fierce-primary",
-              "default": "var(--vvd-color-canvas-text)"
-            },
-            {
-              "name": "--vvd-appearanceUI-accent-contrast",
-              "default": "var(--vvd-color-neutral-800)"
-            },
-            {
-              "name": "--vvd-appearanceUI-accent-intermediate",
-              "default": "var(--vvd-color-neutral-500)"
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "appearance",
-              "type": {
-                "text": "AppearanceUIAppearance | undefined"
-              },
-              "description": "The appearance.",
-              "privacy": "public"
-            },
-            {
-              "kind": "field",
-              "name": "hovered",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Displays the hover state via class",
-              "privacy": "public"
-            },
-            {
-              "kind": "field",
-              "name": "active",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Displays the active state via class",
-              "privacy": "public"
-            },
-            {
-              "kind": "field",
-              "name": "selected",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Displays the selected state via class",
-              "privacy": "public"
-            },
-            {
-              "kind": "field",
-              "name": "disabled",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Displays the disabled state",
-              "privacy": "public"
-            },
-            {
-              "kind": "field",
-              "name": "readonly",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Displays the disabled state",
-              "privacy": "public"
-            },
-            {
-              "kind": "field",
-              "name": "text",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Indicates the text's text.",
-              "privacy": "public"
-            }
-          ],
-          "attributes": [
-            {
-              "name": "appearance",
-              "type": {
-                "text": "AppearanceUIAppearance | undefined"
-              },
-              "description": "The appearance.",
-              "fieldName": "appearance"
-            },
-            {
-              "name": "hovered",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Displays the hover state via class",
-              "fieldName": "hovered"
-            },
-            {
-              "name": "active",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Displays the active state via class",
-              "fieldName": "active"
-            },
-            {
-              "name": "selected",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Displays the selected state via class",
-              "fieldName": "selected"
-            },
-            {
-              "name": "disabled",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Displays the disabled state",
-              "fieldName": "disabled"
-            },
-            {
-              "name": "readonly",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Displays the disabled state",
-              "fieldName": "readonly"
-            },
-            {
-              "name": "text",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Indicates the text's text.",
-              "fieldName": "text"
-            }
-          ],
-          "superclass": {
-            "name": "FoundationElement",
-            "package": "@microsoft/fast-foundation"
-          },
-          "vividComponent": {
-            "name": "appearance-ui"
-          }
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "AppearanceUi",
-          "declaration": {
-            "name": "AppearanceUi",
-            "module": "libs/components/src/lib/appearance-ui/appearance-ui.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "libs/components/src/lib/appearance-ui/definition.ts",
-      "declarations": [
-        {
-          "kind": "variable",
-          "name": "appearanceUiDefinition"
-        },
-        {
-          "kind": "variable",
-          "name": "registerAppearanceUi",
-          "description": "Registers the appearance-ui element with the design system.",
-          "parameters": [
-            {
-              "description": "the prefix to use for the component name",
-              "name": "prefix"
-            }
-          ]
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "appearanceUiDefinition",
-          "declaration": {
-            "name": "appearanceUiDefinition",
-            "module": "libs/components/src/lib/appearance-ui/definition.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "registerAppearanceUi",
-          "declaration": {
-            "name": "registerAppearanceUi",
-            "module": "libs/components/src/lib/appearance-ui/definition.ts"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "libs/components/src/lib/audio-player/audio-player.ts",
@@ -4364,7 +3770,9 @@
               {
                 "name": "modelValue",
                 "attributeName": "checked",
-                "eventName": "change",
+                "eventNames": [
+                  "change"
+                ],
                 "valueMapping": "(event.target as HTMLInputElement).checked"
               }
             ]
@@ -4521,7 +3929,9 @@
               {
                 "name": "modelValue",
                 "attributeName": "value",
-                "eventName": "change",
+                "eventNames": [
+                  "change"
+                ],
                 "valueMapping": "(event.target as HTMLInputElement).value"
               }
             ]
@@ -5598,7 +5008,9 @@
               {
                 "name": "modelValue",
                 "attributeName": "value",
-                "eventName": "input",
+                "eventNames": [
+                  "input"
+                ],
                 "valueMapping": "(event.target as HTMLInputElement).value"
               }
             ]
@@ -6156,13 +5568,17 @@
               {
                 "name": "start",
                 "attributeName": "start",
-                "eventName": "input:start",
+                "eventNames": [
+                  "input:start"
+                ],
                 "valueMapping": "(event.target as any).start"
               },
               {
                 "name": "end",
                 "attributeName": "end",
-                "eventName": "input:end",
+                "eventNames": [
+                  "input:end"
+                ],
                 "valueMapping": "(event.target as any).end"
               }
             ]
@@ -6583,7 +5999,9 @@
               {
                 "name": "modelValue",
                 "attributeName": "value",
-                "eventName": "input",
+                "eventNames": [
+                  "input"
+                ],
                 "valueMapping": "(event.target as any).value"
               }
             ]
@@ -6749,12 +6167,12 @@
             },
             {
               "kind": "field",
-              "name": "#modal",
-              "privacy": "private",
+              "name": "modal",
               "type": {
                 "text": "boolean"
               },
-              "default": "false"
+              "default": "false",
+              "description": "Controls whether the dialog is modal."
             },
             {
               "kind": "field",
@@ -6793,26 +6211,29 @@
             },
             {
               "kind": "method",
-              "name": "#handleModal",
-              "parameters": [
-                {
-                  "name": "show",
-                  "type": {
-                    "text": "boolean"
-                  }
-                }
-              ]
+              "name": "show"
             },
             {
               "kind": "method",
-              "name": "show"
+              "name": "showModal"
             },
             {
               "kind": "method",
-              "name": "showModal"
+              "name": "#closeDialog"
+            },
+            {
+              "kind": "method",
+              "name": "#showDialog"
             }
           ],
           "events": [
+            {
+              "type": {
+                "text": "CustomEvent<undefined>"
+              },
+              "description": "The `open` event fires when the dialog opens.",
+              "name": "open"
+            },
             {
               "type": {
                 "text": "CustomEvent<string>"
@@ -6889,6 +6310,14 @@
               },
               "default": "false",
               "fieldName": "noLightDismiss"
+            },
+            {
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Controls whether the dialog is modal.",
+              "fieldName": "modal"
             }
           ],
           "superclass": {
@@ -6897,7 +6326,18 @@
           },
           "vividComponent": {
             "public": true,
-            "name": "dialog"
+            "name": "dialog",
+            "vueModels": [
+              {
+                "name": "open",
+                "attributeName": "open",
+                "eventNames": [
+                  "open",
+                  "close"
+                ],
+                "valueMapping": "(event.target as any).open"
+              }
+            ]
           }
         }
       ],
@@ -7095,39 +6535,141 @@
           "description": "Registers the empty-state element 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": "EmptyStateConnotation",
+          "declaration": {
+            "name": "EmptyStateConnotation",
+            "module": "./empty-state"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "EmptyStateIconDecoration",
+          "declaration": {
+            "name": "EmptyStateIconDecoration",
+            "module": "./empty-state"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "emptyStateDefinition",
+          "declaration": {
+            "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/empty-state/empty-state.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "An empty state element. Used when there is no data to display to the user.",
+          "name": "EmptyState",
+          "cssProperties": [
+            {
+              "name": "--vvd-empty-state-cta-firm-all",
+              "default": "var(--vvd-color-cta-600)"
+            },
+            {
+              "name": "--vvd-empty-state-cta-dim",
+              "default": "var(--vvd-color-cta-200)"
+            },
+            {
+              "name": "--vvd-empty-state-cta-faint",
+              "default": "var(--vvd-color-cta-50)"
+            },
+            {
+              "name": "--vvd-empty-state-success-firm-all",
+              "default": "var(--vvd-color-success-600)"
+            },
+            {
+              "name": "--vvd-empty-state-success-dim",
+              "default": "var(--vvd-color-success-200)"
+            },
+            {
+              "name": "--vvd-empty-state-success-faint",
+              "default": "var(--vvd-color-success-50)"
+            },
+            {
+              "name": "--vvd-empty-state-alert-firm-all",
+              "default": "var(--vvd-color-alert-600)"
+            },
+            {
+              "name": "--vvd-empty-state-alert-dim",
+              "default": "var(--vvd-color-alert-200)"
+            },
+            {
+              "name": "--vvd-empty-state-alert-faint",
+              "default": "var(--vvd-color-alert-50)"
+            },
+            {
+              "name": "--vvd-empty-state-warning-firm-all",
+              "default": "var(--vvd-color-warning-600)"
+            },
+            {
+              "name": "--vvd-empty-state-warning-dim",
+              "default": "var(--vvd-color-warning-200)"
+            },
+            {
+              "name": "--vvd-empty-state-warning-faint",
+              "default": "var(--vvd-color-warning-50)"
+            },
+            {
+              "name": "--vvd-empty-state-information-firm-all",
+              "default": "var(--vvd-color-information-600)"
+            },
+            {
+              "name": "--vvd-empty-state-information-dim",
+              "default": "var(--vvd-color-information-200)"
+            },
+            {
+              "name": "--vvd-empty-state-information-faint",
+              "default": "var(--vvd-color-information-50)"
+            },
+            {
+              "name": "--vvd-empty-state-announcement-firm-all",
+              "default": "var(--vvd-color-announcement-600)"
+            },
+            {
+              "name": "--vvd-empty-state-announcement-dim",
+              "default": "var(--vvd-color-announcement-200)"
+            },
+            {
+              "name": "--vvd-empty-state-announcement-faint",
+              "default": "var(--vvd-color-announcement-50)"
+            },
+            {
+              "name": "--vvd-empty-state-accent-firm-all",
+              "default": "var(--vvd-color-neutral-600)"
+            },
+            {
+              "name": "--vvd-empty-state-accent-dim",
+              "default": "var(--vvd-color-neutral-200)"
+            },
+            {
+              "name": "--vvd-empty-state-accent-faint",
+              "default": "var(--vvd-color-neutral-50)"
             }
-          ]
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "emptyStateDefinition",
-          "declaration": {
-            "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/empty-state/empty-state.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "An empty state element. Used when there is no data to display to the user.",
-          "name": "EmptyState",
+          ],
           "slots": [
             {
               "description": "The default slot controls the body text of the empty state",
@@ -7143,6 +6685,15 @@
             }
           ],
           "members": [
+            {
+              "kind": "field",
+              "name": "connotation",
+              "type": {
+                "text": "EmptyStateConnotation | undefined"
+              },
+              "description": "The connotation the empty state should have.",
+              "privacy": "public"
+            },
             {
               "kind": "field",
               "name": "headline",
@@ -7160,9 +6711,26 @@
               },
               "description": "Icon for the empty state.",
               "privacy": "public"
+            },
+            {
+              "kind": "field",
+              "name": "iconDecoration",
+              "type": {
+                "text": "EmptyStateIconDecoration | undefined"
+              },
+              "description": "option to a new design for the icon circle",
+              "privacy": "public"
             }
           ],
           "attributes": [
+            {
+              "name": "connotation",
+              "type": {
+                "text": "EmptyStateConnotation | undefined"
+              },
+              "description": "The connotation the empty state should have.",
+              "fieldName": "connotation"
+            },
             {
               "name": "headline",
               "type": {
@@ -7178,6 +6746,14 @@
               },
               "description": "Icon for the empty state.",
               "fieldName": "icon"
+            },
+            {
+              "name": "icon-decoration",
+              "type": {
+                "text": "EmptyStateIconDecoration | undefined"
+              },
+              "description": "option to a new design for the icon circle",
+              "fieldName": "iconDecoration"
             }
           ],
           "superclass": {
@@ -8044,6 +7620,10 @@
               "name": "--vvd-icon-success-primary",
               "default": "var(--vvd-color-success-500)"
             },
+            {
+              "name": "--vvd-icon-warning-primary",
+              "default": "var(--vvd-color-warning-300)"
+            },
             {
               "name": "--vvd-icon-alert-primary",
               "default": "var(--vvd-color-alert-500)"
@@ -9148,7 +8728,9 @@
               {
                 "name": "modelValue",
                 "attributeName": "checked",
-                "eventName": "change",
+                "eventNames": [
+                  "change"
+                ],
                 "valueMapping": "(event.target as HTMLInputElement).checked"
               }
             ]
@@ -10493,7 +10075,9 @@
               {
                 "name": "modelValue",
                 "attributeName": "value",
-                "eventName": "input",
+                "eventNames": [
+                  "input"
+                ],
                 "valueMapping": "(event.target as HTMLInputElement).value"
               }
             ]
@@ -10982,8 +10566,26 @@
     {
       "kind": "javascript-module",
       "path": "libs/components/src/lib/popup/popup.ts",
-      "declarations": [],
-      "exports": []
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "PlacementStrategy",
+          "type": {
+            "text": "{\n\tFlip: 'flip',\n\tAutoPlacementHorizontal: 'auto-placement-horizontal',\n\tAutoPlacementVertical: 'auto-placement-vertical',\n}"
+          },
+          "default": "{\n\tFlip: 'flip',\n\tAutoPlacementHorizontal: 'auto-placement-horizontal',\n\tAutoPlacementVertical: 'auto-placement-vertical',\n}"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "PlacementStrategy",
+          "declaration": {
+            "name": "PlacementStrategy",
+            "module": "libs/components/src/lib/popup/popup.ts"
+          }
+        }
+      ]
     },
     {
       "kind": "javascript-module",
@@ -11596,7 +11198,9 @@
               {
                 "name": "modelValue",
                 "attributeName": "value",
-                "eventName": "change",
+                "eventNames": [
+                  "change"
+                ],
                 "valueMapping": "(event.target as HTMLInputElement).value"
               }
             ]
@@ -11901,6 +11505,16 @@
               "description": "The connotation of the component",
               "privacy": "public"
             },
+            {
+              "kind": "field",
+              "name": "pin",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Show current values on the thumbs.",
+              "privacy": "public"
+            },
             {
               "kind": "field",
               "name": "valueTextFormatter",
@@ -11931,13 +11545,38 @@
               "readonly": true
             },
             {
-              "kind": "field",
-              "name": "#draggingThumb",
-              "privacy": "private",
-              "type": {
-                "text": "false | 'start' | 'end'"
+              "kind": "method",
+              "name": "#getThumbId",
+              "return": {
+                "type": {
+                  "text": "ThumbId"
+                }
               },
-              "default": "false"
+              "parameters": [
+                {
+                  "name": "thumb",
+                  "type": {
+                    "text": "HTMLElement"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "#getThumbIdFromEvent",
+              "return": {
+                "type": {
+                  "text": "ThumbId"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ]
             },
             {
               "kind": "method",
@@ -11974,7 +11613,7 @@
                 {
                   "name": "thumb",
                   "type": {
-                    "text": "'start' | 'end'"
+                    "text": "ThumbId"
                   }
                 },
                 {
@@ -11985,6 +11624,27 @@
                 }
               ]
             },
+            {
+              "kind": "field",
+              "name": "#isNonVisibleFocus",
+              "privacy": "private",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "kind": "method",
+              "name": "#focusThumbNonVisibly",
+              "parameters": [
+                {
+                  "name": "thumb",
+                  "type": {
+                    "text": "HTMLElement"
+                  }
+                }
+              ]
+            },
             {
               "kind": "method",
               "name": "#registerThumbListeners"
@@ -11993,6 +11653,26 @@
               "kind": "method",
               "name": "#unregisterThumbListeners"
             },
+            {
+              "kind": "field",
+              "name": "#onThumbFocus",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "#onThumbBlur",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "#onMouseOver",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "#onMouseOut",
+              "privacy": "private"
+            },
             {
               "kind": "field",
               "name": "#onThumbMousedown",
@@ -12158,6 +11838,14 @@
               },
               "description": "The connotation of the component",
               "fieldName": "connotation"
+            },
+            {
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Show current values on the thumbs.",
+              "fieldName": "pin"
             }
           ],
           "superclass": {
@@ -12171,13 +11859,17 @@
               {
                 "name": "start",
                 "attributeName": "start",
-                "eventName": "input:start",
+                "eventNames": [
+                  "input:start"
+                ],
                 "valueMapping": "(event.target as any).start"
               },
               {
                 "name": "end",
                 "attributeName": "end",
-                "eventName": "input:end",
+                "eventNames": [
+                  "input:end"
+                ],
                 "valueMapping": "(event.target as any).end"
               }
             ]
@@ -12349,6 +12041,10 @@
               "description": "The placeholder attribute.",
               "privacy": "public"
             },
+            {
+              "kind": "method",
+              "name": "labelChanged"
+            },
             {
               "kind": "field",
               "name": "displayValue",
@@ -12451,7 +12147,9 @@
               {
                 "name": "modelValue",
                 "attributeName": "value",
-                "eventName": "input",
+                "eventNames": [
+                  "input"
+                ],
                 "valueMapping": "(event.target as HTMLInputElement).value"
               }
             ]
@@ -13003,6 +12701,16 @@
               "description": "Display markers on/off",
               "privacy": "public"
             },
+            {
+              "kind": "field",
+              "name": "pin",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Show current value on the thumb.",
+              "privacy": "public"
+            },
             {
               "kind": "field",
               "name": "connotation",
@@ -13020,6 +12728,45 @@
               },
               "description": "Custom function that generates a string for the component's \"aria-valuetext\" attribute based on the current value.",
               "privacy": "public"
+            },
+            {
+              "kind": "field",
+              "name": "#isNonVisibleFocus",
+              "privacy": "private",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "kind": "method",
+              "name": "#registerThumbListeners"
+            },
+            {
+              "kind": "method",
+              "name": "#unregisterThumbListeners"
+            },
+            {
+              "kind": "field",
+              "name": "#onMouseOver",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "#onMouseOut",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "handleMouseDown"
+            },
+            {
+              "kind": "field",
+              "name": "handleThumbMouseDown"
+            },
+            {
+              "kind": "field",
+              "name": "keypressHandler"
             }
           ],
           "events": [
@@ -13056,6 +12803,14 @@
               "description": "Display markers on/off",
               "fieldName": "markers"
             },
+            {
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Show current value on the thumb.",
+              "fieldName": "pin"
+            },
             {
               "name": "connotation",
               "type": {
@@ -13076,7 +12831,9 @@
               {
                 "name": "modelValue",
                 "attributeName": "value",
-                "eventName": "change",
+                "eventNames": [
+                  "change"
+                ],
                 "valueMapping": "(event.target as HTMLInputElement).value"
               }
             ]
@@ -13841,7 +13598,9 @@
               {
                 "name": "modelValue",
                 "attributeName": "checked",
-                "eventName": "change",
+                "eventNames": [
+                  "change"
+                ],
                 "valueMapping": "(event.target as HTMLInputElement).checked"
               }
             ]
@@ -14314,6 +14073,10 @@
                 }
               }
             },
+            {
+              "kind": "method",
+              "name": "#updateScrollStatus"
+            },
             {
               "kind": "method",
               "name": "tabpanelsChanged",
@@ -14327,6 +14090,14 @@
               "kind": "method",
               "name": "patchIndicatorStyleTransition"
             },
+            {
+              "kind": "field",
+              "name": "#resizeObserver",
+              "privacy": "private",
+              "type": {
+                "text": "ResizeObserver | undefined"
+              }
+            },
             {
               "kind": "method",
               "name": "#updateTabsConnotation"
@@ -15219,7 +14990,9 @@
               {
                 "name": "modelValue",
                 "attributeName": "value",
-                "eventName": "input",
+                "eventNames": [
+                  "input"
+                ],
                 "valueMapping": "(event.target as HTMLInputElement).value"
               }
             ]
@@ -15470,7 +15243,9 @@
               {
                 "name": "modelValue",
                 "attributeName": "value",
-                "eventName": "input",
+                "eventNames": [
+                  "input"
+                ],
                 "valueMapping": "(event.target as HTMLInputElement).value"
               }
             ]
@@ -15843,7 +15618,9 @@
               {
                 "name": "modelValue",
                 "attributeName": "value",
-                "eventName": "input",
+                "eventNames": [
+                  "input"
+                ],
                 "valueMapping": "(event.target as HTMLInputElement).value"
               }
             ]
@@ -16545,23 +16322,6 @@
           },
           "default": "'0.5, 1, 1.5, 2'"
         },
-        {
-          "kind": "function",
-          "name": "getPlaybackRatesArray",
-          "return": {
-            "type": {
-              "text": "number[]"
-            }
-          },
-          "parameters": [
-            {
-              "name": "playbackRates",
-              "type": {
-                "text": "string"
-              }
-            }
-          ]
-        },
         {
           "kind": "class",
           "description": "Base class for video-player",
@@ -16773,14 +16533,6 @@
             "module": "libs/components/src/lib/video-player/video-player.ts"
           }
         },
-        {
-          "kind": "js",
-          "name": "getPlaybackRatesArray",
-          "declaration": {
-            "name": "getPlaybackRatesArray",
-            "module": "libs/components/src/lib/video-player/video-player.ts"
-          }
-        },
         {
           "kind": "js",
           "name": "VideoPlayer",