@vonage/vivid 5.23.0 → 5.23.1-preview.0

package/custom-elements.json

@@ -5520,240 +5520,189 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/lib/card/card.ts",
+      "path": "src/lib/calendar-event/calendar-event.ts",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "Card",
+          "name": "CalendarEvent",
           "cssProperties": [
             {
-              "name": "--vvd-card-cta-primary",
-              "default": "var(--vvd-color-cta-500)"
+              "name": "--vvd-calendar-event-accent-primary",
+              "default": "var(--vvd-color-canvas-text)"
             },
             {
-              "name": "--vvd-card-cta-primary-text",
+              "name": "--vvd-calendar-event-accent-primary-text",
               "default": "var(--vvd-color-canvas)"
             },
             {
-              "name": "--vvd-card-cta-primary-increment",
-              "default": "var(--vvd-color-cta-600)"
+              "name": "--vvd-calendar-event-accent-contrast",
+              "default": "var(--vvd-color-neutral-800)"
             },
             {
-              "name": "--vvd-card-cta-faint",
-              "default": "var(--vvd-color-cta-50)"
+              "name": "--vvd-calendar-event-accent-soft",
+              "default": "var(--vvd-color-neutral-100)"
             },
             {
-              "name": "--vvd-card-cta-soft",
+              "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)"
-            }
-          ],
-          "slots": [
+            },
             {
-              "description": "The body slot is for the main content of the card. Displayed between the header and footer content.",
-              "name": "body"
+              "name": "--vvd-calendar-event-success-primary",
+              "default": "var(--vvd-color-success-500)"
             },
             {
-              "description": "The graphic slot overrides the icon property.",
-              "name": "graphic"
+              "name": "--vvd-calendar-event-success-primary-text",
+              "default": "var(--vvd-color-canvas)"
             },
             {
-              "description": "The media slot is mainly for images or video content above the card header.",
-              "name": "media"
+              "name": "--vvd-calendar-event-success-contrast",
+              "default": "var(--vvd-color-success-800)"
             },
             {
-              "description": "The meta slot is for action content in the card header.",
-              "name": "meta"
+              "name": "--vvd-calendar-event-success-soft",
+              "default": "var(--vvd-color-success-100)"
             },
             {
-              "description": "The footer slot is for content in the card footer.",
-              "name": "footer"
+              "name": "--vvd-calendar-event-alert-primary",
+              "default": "var(--vvd-color-alert-500)"
             },
             {
-              "description": "Assign nodes to main slot to fully override a card's predefined flow and style with your own.",
-              "name": "main"
-            }
-          ],
-          "members": [
+              "name": "--vvd-calendar-event-alert-primary-text",
+              "default": "var(--vvd-color-canvas)"
+            },
             {
-              "kind": "field",
-              "name": "appearance",
-              "type": {
-                "text": "CardAppearance | undefined"
-              },
-              "description": "Sets the element's appearance.",
-              "privacy": "public"
+              "name": "--vvd-calendar-event-alert-contrast",
+              "default": "var(--vvd-color-alert-800)"
             },
             {
-              "kind": "field",
-              "name": "headline",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Sets the element's headline.",
-              "privacy": "public"
+              "name": "--vvd-calendar-event-alert-soft",
+              "default": "var(--vvd-color-alert-100)"
             },
             {
-              "kind": "field",
-              "name": "subtitle",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Sets the element's subtitle.",
-              "privacy": "public"
+              "name": "--vvd-calendar-event-warning-primary",
+              "default": "var(--vvd-color-warning-300)"
             },
             {
-              "kind": "field",
-              "name": "text",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Sets the element's text.",
-              "privacy": "public"
+              "name": "--vvd-calendar-event-warning-primary-text",
+              "default": "var(--vvd-color-canvas-text)"
             },
             {
-              "kind": "field",
-              "name": "icon",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Sets the element's icon.",
-              "privacy": "public"
+              "name": "--vvd-calendar-event-warning-contrast",
+              "default": "var(--vvd-color-warning-800)"
             },
             {
-              "kind": "field",
-              "name": "elevation",
-              "type": {
-                "text": "0 | 2 | 4 | 8 | 12 | 16 | 24 | undefined"
-              },
-              "description": "Sets the element's elevation.",
-              "privacy": "public"
+              "name": "--vvd-calendar-event-warning-soft",
+              "default": "var(--vvd-color-warning-100)"
             },
             {
-              "kind": "field",
-              "name": "clickableCard",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Indicates whether card should be a clickable <button> element.",
-              "privacy": "public"
+              "name": "--vvd-calendar-event-announcement-primary",
+              "default": "var(--vvd-color-announcement-500)"
             },
             {
-              "kind": "field",
-              "name": "download",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Prompts the user to save the linked URL. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a | <a> element  for more information.",
-              "privacy": "public",
-              "inheritedFrom": {
-                "name": "Linkable",
-                "module": "src/shared/patterns/linkable.ts"
-              }
+              "name": "--vvd-calendar-event-announcement-primary-text",
+              "default": "var(--vvd-color-canvas)"
             },
             {
-              "kind": "field",
-              "name": "href",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "The URL the hyperlink references. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a | <a> element  for more information.",
-              "privacy": "public",
-              "inheritedFrom": {
-                "name": "Linkable",
-                "module": "src/shared/patterns/linkable.ts"
-              }
+              "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",
-              "name": "hreflang",
+              "name": "heading",
               "type": {
                 "text": "string | undefined"
               },
-              "description": "Hints at the language of the referenced resource. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a | <a> element  for more information.",
-              "privacy": "public",
-              "inheritedFrom": {
-                "name": "Linkable",
-                "module": "src/shared/patterns/linkable.ts"
-              }
+              "description": "Sets the event heading",
+              "privacy": "public"
             },
             {
               "kind": "field",
-              "name": "ping",
+              "name": "description",
               "type": {
                 "text": "string | undefined"
               },
-              "description": "See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a | <a> element  for more information.",
-              "privacy": "public",
-              "inheritedFrom": {
-                "name": "Linkable",
-                "module": "src/shared/patterns/linkable.ts"
-              }
+              "description": "Sets the event description",
+              "privacy": "public"
             },
             {
               "kind": "field",
-              "name": "referrerpolicy",
+              "name": "connotation",
               "type": {
-                "text": "string | undefined"
+                "text": "CalendarEventConnotation | undefined"
               },
-              "description": "See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a | <a> element  for more information.",
-              "privacy": "public",
-              "inheritedFrom": {
-                "name": "Linkable",
-                "module": "src/shared/patterns/linkable.ts"
-              }
+              "description": "Sets the first day of the week to display",
+              "privacy": "public"
             },
             {
               "kind": "field",
-              "name": "rel",
+              "name": "appearance",
               "type": {
-                "text": "string | undefined"
+                "text": "CalendarEventAppearance | undefined"
               },
-              "description": "See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a | <a> element  for more information.",
-              "privacy": "public",
-              "inheritedFrom": {
-                "name": "Linkable",
-                "module": "src/shared/patterns/linkable.ts"
-              }
+              "description": "Sets the event's appearance",
+              "privacy": "public"
             },
             {
               "kind": "field",
-              "name": "target",
+              "name": "overlapCount",
               "type": {
-                "text": "'_self' | '_blank' | '_parent' | '_top' | undefined"
+                "text": "number | undefined"
               },
-              "description": "See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a | <a> element  for more information.",
-              "privacy": "public",
-              "inheritedFrom": {
-                "name": "Linkable",
-                "module": "src/shared/patterns/linkable.ts"
-              }
+              "description": "Sets the stacking context of the event when it overlaps with another",
+              "privacy": "public"
             },
             {
               "kind": "field",
-              "name": "type",
+              "name": "start",
               "type": {
-                "text": "string | undefined"
+                "text": "number | undefined"
               },
-              "description": "See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a | <a> element  for more information.",
-              "privacy": "public",
-              "inheritedFrom": {
-                "name": "Linkable",
-                "module": "src/shared/patterns/linkable.ts"
-              }
+              "description": "Sets the event start time (e.g. `14` = 2pm)",
+              "privacy": "public"
             },
             {
               "kind": "field",
-              "name": "control",
+              "name": "duration",
               "type": {
-                "text": "HTMLAnchorElement"
+                "text": "number | undefined"
               },
-              "description": "References the root element",
-              "inheritedFrom": {
-                "name": "Linkable",
-                "module": "src/shared/patterns/linkable.ts"
-              }
+              "description": "Sets the event duration (e.g. `2` = 2 hours)",
+              "privacy": "public"
             },
             {
               "kind": "field",
@@ -5785,518 +5734,564 @@
           ],
           "attributes": [
             {
-              "name": "appearance",
+              "name": "heading",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Sets the event heading",
+              "fieldName": "heading"
+            },
+            {
+              "name": "description",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Sets the event description",
+              "fieldName": "description"
+            },
+            {
+              "name": "connotation",
+              "type": {
+                "text": "CalendarEventConnotation | undefined"
+              },
+              "description": "Sets the first day of the week to display",
+              "fieldName": "connotation"
+            },
+            {
+              "name": "appearance",
+              "type": {
+                "text": "CalendarEventAppearance | undefined"
+              },
+              "description": "Sets the event's appearance",
+              "fieldName": "appearance"
+            },
+            {
+              "name": "overlap-count",
+              "type": {
+                "text": "number | undefined"
+              },
+              "description": "Sets the stacking context of the event when it overlaps with another",
+              "fieldName": "overlapCount"
+            },
+            {
+              "name": "start",
+              "type": {
+                "text": "number | undefined"
+              },
+              "description": "Sets the event start time (e.g. `14` = 2pm)",
+              "fieldName": "start"
+            },
+            {
+              "name": "duration",
+              "type": {
+                "text": "number | undefined"
+              },
+              "description": "Sets the event duration (e.g. `2` = 2 hours)",
+              "fieldName": "duration"
+            }
+          ],
+          "mixins": [
+            {
+              "name": "DelegatesAria",
+              "module": "/src/shared/aria/delegates-aria"
+            }
+          ],
+          "superclass": {
+            "name": "VividElement",
+            "module": "/src/shared/foundation/vivid-element/vivid-element"
+          },
+          "vividComponent": {
+            "public": true,
+            "name": "calendar-event"
+          }
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "CalendarEvent",
+          "declaration": {
+            "name": "CalendarEvent",
+            "module": "src/lib/calendar-event/calendar-event.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/lib/calendar-event/definition.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "registerCalendarEvent",
+          "description": "Registers the calendar-event elements with the design system.",
+          "parameters": [
+            {
+              "description": "the prefix to use for the component name",
+              "name": "prefix"
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "CalendarEventAppearance",
+          "declaration": {
+            "name": "CalendarEventAppearance",
+            "module": "./calendar-event"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "CalendarEventConnotation",
+          "declaration": {
+            "name": "CalendarEventConnotation",
+            "module": "./calendar-event"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "registerCalendarEvent",
+          "declaration": {
+            "name": "registerCalendarEvent",
+            "module": "src/lib/calendar-event/definition.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "VwcCalendarEventElement",
+          "declaration": {
+            "name": "CalendarEvent",
+            "module": "src/lib/calendar-event/definition.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/lib/card/card.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "Card",
+          "cssProperties": [
+            {
+              "name": "--vvd-card-cta-primary",
+              "default": "var(--vvd-color-cta-500)"
+            },
+            {
+              "name": "--vvd-card-cta-primary-text",
+              "default": "var(--vvd-color-canvas)"
+            },
+            {
+              "name": "--vvd-card-cta-primary-increment",
+              "default": "var(--vvd-color-cta-600)"
+            },
+            {
+              "name": "--vvd-card-cta-faint",
+              "default": "var(--vvd-color-cta-50)"
+            },
+            {
+              "name": "--vvd-card-cta-soft",
+              "default": "var(--vvd-color-cta-100)"
+            }
+          ],
+          "slots": [
+            {
+              "description": "The body slot is for the main content of the card. Displayed between the header and footer content.",
+              "name": "body"
+            },
+            {
+              "description": "The graphic slot overrides the icon property.",
+              "name": "graphic"
+            },
+            {
+              "description": "The media slot is mainly for images or video content above the card header.",
+              "name": "media"
+            },
+            {
+              "description": "The meta slot is for action content in the card header.",
+              "name": "meta"
+            },
+            {
+              "description": "The footer slot is for content in the card footer.",
+              "name": "footer"
+            },
+            {
+              "description": "Assign nodes to main slot to fully override a card's predefined flow and style with your own.",
+              "name": "main"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "appearance",
               "type": {
                 "text": "CardAppearance | undefined"
               },
               "description": "Sets the element's appearance.",
-              "fieldName": "appearance"
+              "privacy": "public"
             },
             {
+              "kind": "field",
               "name": "headline",
               "type": {
                 "text": "string | undefined"
               },
               "description": "Sets the element's headline.",
-              "fieldName": "headline"
+              "privacy": "public"
             },
             {
+              "kind": "field",
               "name": "subtitle",
               "type": {
                 "text": "string | undefined"
               },
               "description": "Sets the element's subtitle.",
-              "fieldName": "subtitle"
+              "privacy": "public"
             },
             {
+              "kind": "field",
               "name": "text",
               "type": {
                 "text": "string | undefined"
               },
               "description": "Sets the element's text.",
-              "fieldName": "text"
+              "privacy": "public"
             },
             {
+              "kind": "field",
               "name": "icon",
               "type": {
                 "text": "string | undefined"
               },
               "description": "Sets the element's icon.",
-              "fieldName": "icon"
+              "privacy": "public"
             },
             {
+              "kind": "field",
               "name": "elevation",
               "type": {
                 "text": "0 | 2 | 4 | 8 | 12 | 16 | 24 | undefined"
               },
               "description": "Sets the element's elevation.",
-              "fieldName": "elevation"
+              "privacy": "public"
             },
             {
-              "name": "clickable-card",
+              "kind": "field",
+              "name": "clickableCard",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
               "description": "Indicates whether card should be a clickable <button> element.",
-              "fieldName": "clickableCard"
+              "privacy": "public"
             },
             {
+              "kind": "field",
               "name": "download",
               "type": {
                 "text": "string | undefined"
               },
               "description": "Prompts the user to save the linked URL. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a | <a> element  for more information.",
-              "fieldName": "download",
+              "privacy": "public",
               "inheritedFrom": {
                 "name": "Linkable",
                 "module": "src/shared/patterns/linkable.ts"
               }
             },
             {
+              "kind": "field",
               "name": "href",
               "type": {
                 "text": "string | undefined"
               },
               "description": "The URL the hyperlink references. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a | <a> element  for more information.",
-              "fieldName": "href",
+              "privacy": "public",
               "inheritedFrom": {
                 "name": "Linkable",
                 "module": "src/shared/patterns/linkable.ts"
               }
             },
             {
+              "kind": "field",
               "name": "hreflang",
               "type": {
                 "text": "string | undefined"
               },
               "description": "Hints at the language of the referenced resource. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a | <a> element  for more information.",
-              "fieldName": "hreflang",
+              "privacy": "public",
               "inheritedFrom": {
                 "name": "Linkable",
                 "module": "src/shared/patterns/linkable.ts"
               }
             },
             {
+              "kind": "field",
               "name": "ping",
               "type": {
                 "text": "string | undefined"
               },
               "description": "See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a | <a> element  for more information.",
-              "fieldName": "ping",
+              "privacy": "public",
               "inheritedFrom": {
                 "name": "Linkable",
                 "module": "src/shared/patterns/linkable.ts"
               }
             },
             {
+              "kind": "field",
               "name": "referrerpolicy",
               "type": {
                 "text": "string | undefined"
               },
               "description": "See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a | <a> element  for more information.",
-              "fieldName": "referrerpolicy",
+              "privacy": "public",
               "inheritedFrom": {
                 "name": "Linkable",
                 "module": "src/shared/patterns/linkable.ts"
               }
             },
             {
+              "kind": "field",
               "name": "rel",
               "type": {
                 "text": "string | undefined"
               },
               "description": "See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a | <a> element  for more information.",
-              "fieldName": "rel",
+              "privacy": "public",
               "inheritedFrom": {
                 "name": "Linkable",
                 "module": "src/shared/patterns/linkable.ts"
               }
             },
             {
+              "kind": "field",
               "name": "target",
               "type": {
                 "text": "'_self' | '_blank' | '_parent' | '_top' | undefined"
               },
               "description": "See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a | <a> element  for more information.",
-              "fieldName": "target",
+              "privacy": "public",
               "inheritedFrom": {
                 "name": "Linkable",
                 "module": "src/shared/patterns/linkable.ts"
               }
             },
             {
+              "kind": "field",
               "name": "type",
               "type": {
                 "text": "string | undefined"
               },
               "description": "See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a | <a> element  for more information.",
-              "fieldName": "type",
+              "privacy": "public",
               "inheritedFrom": {
                 "name": "Linkable",
                 "module": "src/shared/patterns/linkable.ts"
               }
-            }
-          ],
-          "mixins": [
+            },
             {
-              "name": "Linkable",
-              "module": "/src/shared/patterns/linkable"
-            }
-          ],
-          "superclass": {
-            "name": "VividElement",
-            "module": "/src/shared/foundation/vivid-element/vivid-element"
-          },
-          "vividComponent": {
-            "public": true,
-            "name": "card"
-          },
-          "vividTesting": {
-            "selectors": [],
-            "actions": [],
-            "queries": [
-              {
-                "name": "headline",
-                "args": [
-                  "headline"
-                ]
+              "kind": "field",
+              "name": "control",
+              "type": {
+                "text": "HTMLAnchorElement"
+              },
+              "description": "References the root element",
+              "inheritedFrom": {
+                "name": "Linkable",
+                "module": "src/shared/patterns/linkable.ts"
               }
-            ],
-            "refs": []
-          }
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "Card",
-          "declaration": {
-            "name": "Card",
-            "module": "src/lib/card/card.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/lib/card/definition.ts",
-      "declarations": [
-        {
-          "kind": "variable",
-          "name": "registerCard",
-          "description": "Registers the card elements with the design system.",
-          "parameters": [
-            {
-              "description": "the prefix to use for the component name",
-              "name": "prefix"
-            }
-          ]
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "CardAppearance",
-          "declaration": {
-            "name": "CardAppearance",
-            "module": "./card"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "registerCard",
-          "declaration": {
-            "name": "registerCard",
-            "module": "src/lib/card/definition.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "VwcCardElement",
-          "declaration": {
-            "name": "Card",
-            "module": "src/lib/card/definition.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/lib/calendar-event/calendar-event.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "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)"
+              "kind": "field",
+              "name": "VIVID_VERSION",
+              "static": true,
+              "default": "__PACKAGE_VERSION__",
+              "description": "The current version of the Vivid library, which is useful for debugging.\nIt can be accessed from any Vivid element via `<el>.constructor.VIVID_VERSION`.",
+              "type": {
+                "text": "string"
+              },
+              "inheritedFrom": {
+                "name": "VividElement",
+                "module": "src/shared/foundation/vivid-element/vivid-element.ts"
+              }
             },
             {
-              "name": "--vvd-calendar-event-information-soft",
-              "default": "var(--vvd-color-information-100)"
+              "kind": "field",
+              "name": "componentName",
+              "type": {
+                "text": "string"
+              },
+              "static": true,
+              "description": "Core component name, without prefix",
+              "inheritedFrom": {
+                "name": "VividElement",
+                "module": "src/shared/foundation/vivid-element/vivid-element.ts"
+              }
             }
           ],
-          "members": [
+          "attributes": [
             {
-              "kind": "field",
-              "name": "heading",
+              "name": "appearance",
               "type": {
-                "text": "string | undefined"
+                "text": "CardAppearance | undefined"
               },
-              "description": "Sets the event heading",
-              "privacy": "public"
+              "description": "Sets the element's appearance.",
+              "fieldName": "appearance"
             },
             {
-              "kind": "field",
-              "name": "description",
+              "name": "headline",
               "type": {
                 "text": "string | undefined"
               },
-              "description": "Sets the event description",
-              "privacy": "public"
+              "description": "Sets the element's headline.",
+              "fieldName": "headline"
             },
             {
-              "kind": "field",
-              "name": "connotation",
+              "name": "subtitle",
               "type": {
-                "text": "CalendarEventConnotation | undefined"
+                "text": "string | undefined"
               },
-              "description": "Sets the first day of the week to display",
-              "privacy": "public"
+              "description": "Sets the element's subtitle.",
+              "fieldName": "subtitle"
             },
             {
-              "kind": "field",
-              "name": "appearance",
+              "name": "text",
               "type": {
-                "text": "CalendarEventAppearance | undefined"
+                "text": "string | undefined"
               },
-              "description": "Sets the event's appearance",
-              "privacy": "public"
+              "description": "Sets the element's text.",
+              "fieldName": "text"
             },
             {
-              "kind": "field",
-              "name": "overlapCount",
+              "name": "icon",
               "type": {
-                "text": "number | undefined"
+                "text": "string | undefined"
               },
-              "description": "Sets the stacking context of the event when it overlaps with another",
-              "privacy": "public"
+              "description": "Sets the element's icon.",
+              "fieldName": "icon"
             },
             {
-              "kind": "field",
-              "name": "start",
+              "name": "elevation",
               "type": {
-                "text": "number | undefined"
+                "text": "0 | 2 | 4 | 8 | 12 | 16 | 24 | undefined"
               },
-              "description": "Sets the event start time (e.g. `14` = 2pm)",
-              "privacy": "public"
+              "description": "Sets the element's elevation.",
+              "fieldName": "elevation"
             },
             {
-              "kind": "field",
-              "name": "duration",
+              "name": "clickable-card",
               "type": {
-                "text": "number | undefined"
+                "text": "boolean"
               },
-              "description": "Sets the event duration (e.g. `2` = 2 hours)",
-              "privacy": "public"
+              "default": "false",
+              "description": "Indicates whether card should be a clickable <button> element.",
+              "fieldName": "clickableCard"
             },
             {
-              "kind": "field",
-              "name": "VIVID_VERSION",
-              "static": true,
-              "default": "__PACKAGE_VERSION__",
-              "description": "The current version of the Vivid library, which is useful for debugging.\nIt can be accessed from any Vivid element via `<el>.constructor.VIVID_VERSION`.",
+              "name": "download",
               "type": {
-                "text": "string"
+                "text": "string | undefined"
               },
+              "description": "Prompts the user to save the linked URL. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a | <a> element  for more information.",
+              "fieldName": "download",
               "inheritedFrom": {
-                "name": "VividElement",
-                "module": "src/shared/foundation/vivid-element/vivid-element.ts"
+                "name": "Linkable",
+                "module": "src/shared/patterns/linkable.ts"
               }
             },
             {
-              "kind": "field",
-              "name": "componentName",
+              "name": "href",
               "type": {
-                "text": "string"
+                "text": "string | undefined"
               },
-              "static": true,
-              "description": "Core component name, without prefix",
+              "description": "The URL the hyperlink references. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a | <a> element  for more information.",
+              "fieldName": "href",
               "inheritedFrom": {
-                "name": "VividElement",
-                "module": "src/shared/foundation/vivid-element/vivid-element.ts"
+                "name": "Linkable",
+                "module": "src/shared/patterns/linkable.ts"
               }
-            }
-          ],
-          "attributes": [
-            {
-              "name": "heading",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Sets the event heading",
-              "fieldName": "heading"
             },
             {
-              "name": "description",
+              "name": "hreflang",
               "type": {
                 "text": "string | undefined"
               },
-              "description": "Sets the event description",
-              "fieldName": "description"
+              "description": "Hints at the language of the referenced resource. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a | <a> element  for more information.",
+              "fieldName": "hreflang",
+              "inheritedFrom": {
+                "name": "Linkable",
+                "module": "src/shared/patterns/linkable.ts"
+              }
             },
             {
-              "name": "connotation",
+              "name": "ping",
               "type": {
-                "text": "CalendarEventConnotation | undefined"
+                "text": "string | undefined"
               },
-              "description": "Sets the first day of the week to display",
-              "fieldName": "connotation"
+              "description": "See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a | <a> element  for more information.",
+              "fieldName": "ping",
+              "inheritedFrom": {
+                "name": "Linkable",
+                "module": "src/shared/patterns/linkable.ts"
+              }
             },
             {
-              "name": "appearance",
+              "name": "referrerpolicy",
               "type": {
-                "text": "CalendarEventAppearance | undefined"
+                "text": "string | undefined"
               },
-              "description": "Sets the event's appearance",
-              "fieldName": "appearance"
+              "description": "See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a | <a> element  for more information.",
+              "fieldName": "referrerpolicy",
+              "inheritedFrom": {
+                "name": "Linkable",
+                "module": "src/shared/patterns/linkable.ts"
+              }
             },
             {
-              "name": "overlap-count",
+              "name": "rel",
               "type": {
-                "text": "number | undefined"
+                "text": "string | undefined"
               },
-              "description": "Sets the stacking context of the event when it overlaps with another",
-              "fieldName": "overlapCount"
+              "description": "See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a | <a> element  for more information.",
+              "fieldName": "rel",
+              "inheritedFrom": {
+                "name": "Linkable",
+                "module": "src/shared/patterns/linkable.ts"
+              }
             },
             {
-              "name": "start",
+              "name": "target",
               "type": {
-                "text": "number | undefined"
+                "text": "'_self' | '_blank' | '_parent' | '_top' | undefined"
               },
-              "description": "Sets the event start time (e.g. `14` = 2pm)",
-              "fieldName": "start"
+              "description": "See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a | <a> element  for more information.",
+              "fieldName": "target",
+              "inheritedFrom": {
+                "name": "Linkable",
+                "module": "src/shared/patterns/linkable.ts"
+              }
             },
             {
-              "name": "duration",
+              "name": "type",
               "type": {
-                "text": "number | undefined"
+                "text": "string | undefined"
               },
-              "description": "Sets the event duration (e.g. `2` = 2 hours)",
-              "fieldName": "duration"
+              "description": "See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a | <a> element  for more information.",
+              "fieldName": "type",
+              "inheritedFrom": {
+                "name": "Linkable",
+                "module": "src/shared/patterns/linkable.ts"
+              }
             }
           ],
           "mixins": [
             {
-              "name": "DelegatesAria",
-              "module": "/src/shared/aria/delegates-aria"
+              "name": "Linkable",
+              "module": "/src/shared/patterns/linkable"
             }
           ],
           "superclass": {
@@ -6305,29 +6300,42 @@
           },
           "vividComponent": {
             "public": true,
-            "name": "calendar-event"
+            "name": "card"
+          },
+          "vividTesting": {
+            "selectors": [],
+            "actions": [],
+            "queries": [
+              {
+                "name": "headline",
+                "args": [
+                  "headline"
+                ]
+              }
+            ],
+            "refs": []
           }
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "CalendarEvent",
+          "name": "Card",
           "declaration": {
-            "name": "CalendarEvent",
-            "module": "src/lib/calendar-event/calendar-event.ts"
+            "name": "Card",
+            "module": "src/lib/card/card.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/lib/calendar-event/definition.ts",
+      "path": "src/lib/card/definition.ts",
       "declarations": [
         {
           "kind": "variable",
-          "name": "registerCalendarEvent",
-          "description": "Registers the calendar-event elements with the design system.",
+          "name": "registerCard",
+          "description": "Registers the card elements with the design system.",
           "parameters": [
             {
               "description": "the prefix to use for the component name",
@@ -6339,34 +6347,26 @@
       "exports": [
         {
           "kind": "js",
-          "name": "CalendarEventAppearance",
-          "declaration": {
-            "name": "CalendarEventAppearance",
-            "module": "./calendar-event"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "CalendarEventConnotation",
+          "name": "CardAppearance",
           "declaration": {
-            "name": "CalendarEventConnotation",
-            "module": "./calendar-event"
+            "name": "CardAppearance",
+            "module": "./card"
           }
         },
         {
           "kind": "js",
-          "name": "registerCalendarEvent",
+          "name": "registerCard",
           "declaration": {
-            "name": "registerCalendarEvent",
-            "module": "src/lib/calendar-event/definition.ts"
+            "name": "registerCard",
+            "module": "src/lib/card/definition.ts"
           }
         },
         {
           "kind": "js",
-          "name": "VwcCalendarEventElement",
+          "name": "VwcCardElement",
           "declaration": {
-            "name": "CalendarEvent",
-            "module": "src/lib/calendar-event/definition.ts"
+            "name": "Card",
+            "module": "src/lib/card/definition.ts"
           }
         }
       ]
@@ -13514,12 +13514,12 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/lib/dialog/definition.ts",
+      "path": "src/lib/dial-pad/definition.ts",
       "declarations": [
         {
           "kind": "variable",
-          "name": "registerDialog",
-          "description": "Registers the dialog elements with the design system.",
+          "name": "registerDialPad",
+          "description": "Registers the dial-pad element with the design system.",
           "parameters": [
             {
               "description": "the prefix to use for the component name",
@@ -13531,231 +13531,233 @@
       "exports": [
         {
           "kind": "js",
-          "name": "IconPlacement",
-          "declaration": {
-            "name": "IconPlacement",
-            "module": "./dialog"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "registerDialog",
+          "name": "registerDialPad",
           "declaration": {
-            "name": "registerDialog",
-            "module": "src/lib/dialog/definition.ts"
+            "name": "registerDialPad",
+            "module": "src/lib/dial-pad/definition.ts"
           }
         },
         {
           "kind": "js",
-          "name": "VwcDialogElement",
+          "name": "VwcDialPadElement",
           "declaration": {
-            "name": "Dialog",
-            "module": "src/lib/dialog/definition.ts"
+            "name": "DialPad",
+            "module": "src/lib/dial-pad/definition.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/lib/dialog/dialog.ts",
+      "path": "src/lib/dial-pad/dial-pad.ts",
       "declarations": [
         {
           "kind": "class",
-          "description": "",
-          "name": "Dialog",
-          "slots": [
+          "description": "Base class for dial-pad",
+          "name": "DialPad",
+          "cssProperties": [
             {
-              "description": "Use the graphic slot in order to replace the icon.",
-              "name": "graphic"
+              "name": "--vvd-dial-pad-accent-contrast",
+              "default": "var(--vvd-color-neutral-800)"
             },
             {
-              "description": "Use the body slot in order to add custom HTML to the dialog.",
-              "name": "body"
+              "name": "--vvd-dial-pad-accent-soft",
+              "default": "var(--vvd-color-neutral-100)"
             },
             {
-              "description": "Use the footer slot in order to add action buttons to the bottom of the dialog.",
-              "name": "footer"
+              "name": "--vvd-dial-pad-accent-pale",
+              "default": "var(--vvd-color-neutral-300)"
             },
             {
-              "description": "Assign nodes to the main slot to fully override a dialog’s predefined flow and style with your own.",
-              "name": "main"
+              "name": "--vvd-dial-pad-accent-fierce",
+              "default": "var(--vvd-color-neutral-700)"
             },
             {
-              "description": "Use the action-items slot in order to add action buttons to the bottom of the dialog.",
-              "name": "action-items"
+              "name": "--vvd-dial-pad-accent-firm-all",
+              "default": "var(--vvd-color-neutral-600)"
+            },
+            {
+              "name": "--vvd-dial-pad-accent-faint",
+              "default": "var(--vvd-color-neutral-50)"
+            },
+            {
+              "name": "--vvd-dial-pad-accent-dim",
+              "default": "var(--vvd-color-neutral-200)"
             }
           ],
           "members": [
             {
               "kind": "field",
-              "name": "open",
+              "name": "helperText",
               "type": {
-                "text": "boolean"
+                "text": "string | null"
               },
-              "default": "false",
-              "description": "Sets the element's to be opened",
+              "default": "null",
+              "description": "Controls the helper text displayed below the phone input element",
               "privacy": "public"
             },
             {
               "kind": "field",
-              "name": "icon",
-              "type": {
-                "text": "string | undefined"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "iconPlacement",
-              "type": {
-                "text": "IconPlacement | undefined"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "subtitle",
-              "type": {
-                "text": "string | undefined"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "headline",
+              "name": "placeholder",
               "type": {
-                "text": "string | undefined"
-              }
+                "text": "string | null"
+              },
+              "default": "null",
+              "description": "Indicates the placeholder's text.",
+              "privacy": "public"
             },
             {
               "kind": "field",
-              "name": "fullWidthBody",
+              "name": "value",
               "type": {
-                "text": "boolean"
+                "text": "string"
               },
-              "default": "false"
+              "default": "''",
+              "description": "Value of the phone input element",
+              "privacy": "public"
             },
             {
-              "kind": "field",
-              "name": "dismissButtonAriaLabel",
-              "type": {
-                "text": "| string\n\t\t| null"
-              },
-              "default": "null"
+              "kind": "method",
+              "name": "valueChanged",
+              "parameters": [
+                {
+                  "name": "_oldValue",
+                  "type": {
+                    "text": "string | undefined"
+                  }
+                },
+                {
+                  "name": "newValue",
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ]
             },
             {
               "kind": "field",
-              "name": "noLightDismiss",
+              "name": "pattern",
               "type": {
-                "text": "boolean"
+                "text": "string"
               },
-              "default": "false",
-              "description": "prevent a modal dialog from being dismissed by clicking outside of it."
+              "default": "'^[0-9#*]*$'",
+              "description": "Regular expression to validate the value of the input element",
+              "privacy": "public"
             },
             {
               "kind": "field",
-              "name": "noDismissOnEsc",
+              "name": "disabled",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "prevent a modal dialog from being dismissed by pressing esc"
+              "description": "Controls the disabled state of the dial pad",
+              "privacy": "public"
             },
             {
               "kind": "field",
-              "name": "noDismissButton",
+              "name": "pending",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Remove the element's dismiss button"
+              "description": "Controls the pending state",
+              "privacy": "public"
             },
             {
               "kind": "field",
-              "name": "nonDismissible",
+              "name": "callActive",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "combines `no-light-dismiss`, `no-dismiss-on-esc`, and `no-dismiss-button`"
+              "description": "Controls the active state of the call",
+              "privacy": "public"
             },
             {
               "kind": "field",
-              "name": "modal",
+              "name": "noCall",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Sets the element's to be opened"
+              "description": "Removes the call button and functionality",
+              "privacy": "public"
             },
             {
               "kind": "field",
-              "name": "scrollableBody",
+              "name": "noInput",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Makes only the element's content area between the header and footer scrollable"
+              "description": "Removes the phone input element",
+              "privacy": "public"
             },
             {
               "kind": "field",
-              "name": "returnValue",
+              "name": "size",
               "type": {
-                "text": "string"
-              }
+                "text": "DialPadSize | undefined"
+              },
+              "description": "Controls the vertical size of the dial pad",
+              "privacy": "public"
             },
             {
               "kind": "field",
-              "name": "#dialogElement",
-              "privacy": "private",
+              "name": "endCallButtonLabel",
               "type": {
-                "text": "HTMLDialogElement | undefined"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "#dialog",
-              "privacy": "private",
-              "readonly": true
-            },
-            {
-              "kind": "method",
-              "name": "#isDismissibleVia",
-              "parameters": [
-                {
-                  "name": "method",
-                  "type": {
-                    "text": "DismissMethod"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "field",
-              "name": "#handleScrimClick",
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "#handleInternalFormSubmit",
-              "privacy": "private"
+                "text": "| string\n\t\t| null"
+              },
+              "default": "null",
+              "description": "Controls the end call button label",
+              "privacy": "public"
             },
             {
-              "kind": "method",
-              "name": "close"
+              "kind": "field",
+              "name": "callButtonLabel",
+              "type": {
+                "text": "string | null"
+              },
+              "default": "null",
+              "description": "Controls the call button label",
+              "privacy": "public"
             },
             {
-              "kind": "method",
-              "name": "show"
+              "kind": "field",
+              "name": "deleteAriaLabel",
+              "type": {
+                "text": "string | null"
+              },
+              "default": "null",
+              "description": "The aria-label for the delete button",
+              "privacy": "public"
             },
             {
               "kind": "method",
-              "name": "showModal"
+              "name": "_clearLongPressTimer",
+              "privacy": "private"
             },
             {
-              "kind": "method",
-              "name": "#closeDialog"
+              "kind": "field",
+              "name": "autofocus",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Indicates that an element should be focused on page load, or when the Dialog that it is part of\nis displayed. When `no-input` attribute is specified, it will be the first digit button.\nOtherwise, the text field will be focused.`",
+              "privacy": "public"
             },
             {
               "kind": "method",
-              "name": "#showDialog"
+              "name": "focus",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "description": "Moves focus into the Dial Pad. If `no-input` attribute is specified, it will be the first digit\nbutton. Otherwise, the input field will be focused.",
+              "privacy": "public"
             },
             {
               "kind": "field",
@@ -13790,209 +13792,201 @@
               "type": {
                 "text": "CustomEvent<undefined>"
               },
-              "description": "The `open` event fires when the dialog opens.",
-              "name": "open"
+              "description": "Emitted when the text field value changes",
+              "name": "change"
             },
             {
               "type": {
-                "text": "CustomEvent<string>"
+                "text": "CustomEvent<undefined>"
               },
-              "description": "The `close` event fires when the dialog closes (either via user interaction or via the API). It returns the return value inside the event's details property.",
-              "name": "close"
+              "description": "Emitted when the text field value changes",
+              "name": "input"
             },
             {
               "type": {
                 "text": "CustomEvent<undefined>"
               },
-              "description": "The `cancel` event fires when the user requests to close the dialog. You can prevent the dialog from closing by calling `.preventDefault()` on the event.",
-              "name": "cancel"
-            }
-          ],
-          "attributes": [
+              "description": "Emitted when the text field loses focus",
+              "name": "blur"
+            },
             {
-              "name": "open",
               "type": {
-                "text": "boolean"
+                "text": "CustomEvent<undefined>"
               },
-              "default": "false",
-              "description": "Sets the element's to be opened",
-              "fieldName": "open"
+              "description": "Emitted when the text field receives focus",
+              "name": "focus"
             },
             {
-              "name": "icon",
               "type": {
-                "text": "string | undefined"
+                "text": "CustomEvent<HTMLElement>"
               },
-              "fieldName": "icon"
+              "description": "Emitted when a digit button is clicked",
+              "name": "keypad-click"
             },
             {
-              "name": "icon-placement",
               "type": {
-                "text": "IconPlacement | undefined"
+                "text": "CustomEvent<undefined>"
               },
-              "fieldName": "iconPlacement"
+              "description": "Emitted when the call button is clicked",
+              "name": "dial"
             },
             {
-              "name": "subtitle",
               "type": {
-                "text": "string | undefined"
+                "text": "CustomEvent<undefined>"
               },
-              "fieldName": "subtitle"
+              "description": "Emitted when the end call button is clicked",
+              "name": "end-call"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "helper-text",
+              "type": {
+                "text": "string | null"
+              },
+              "default": "null",
+              "description": "Controls the helper text displayed below the phone input element",
+              "fieldName": "helperText"
             },
             {
-              "name": "headline",
+              "name": "placeholder",
               "type": {
-                "text": "string | undefined"
+                "text": "string | null"
               },
-              "fieldName": "headline"
+              "default": "null",
+              "description": "Indicates the placeholder's text.",
+              "fieldName": "placeholder"
             },
             {
-              "name": "full-width-body",
+              "name": "value",
               "type": {
-                "text": "boolean"
+                "text": "string"
               },
-              "default": "false",
-              "fieldName": "fullWidthBody"
+              "default": "''",
+              "description": "Value of the phone input element",
+              "fieldName": "value"
             },
             {
-              "name": "dismiss-button-aria-label",
+              "name": "pattern",
               "type": {
-                "text": "| string\n\t\t| null"
+                "text": "string"
               },
-              "default": "null",
-              "fieldName": "dismissButtonAriaLabel"
+              "default": "'^[0-9#*]*$'",
+              "description": "Regular expression to validate the value of the input element",
+              "fieldName": "pattern"
             },
             {
-              "name": "no-light-dismiss",
+              "name": "disabled",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "prevent a modal dialog from being dismissed by clicking outside of it.",
-              "fieldName": "noLightDismiss"
+              "description": "Controls the disabled state of the dial pad",
+              "fieldName": "disabled"
             },
             {
-              "name": "no-dismiss-on-esc",
+              "name": "pending",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "prevent a modal dialog from being dismissed by pressing esc",
-              "fieldName": "noDismissOnEsc"
+              "description": "Controls the pending state",
+              "fieldName": "pending"
             },
             {
-              "name": "no-dismiss-button",
+              "name": "call-active",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Remove the element's dismiss button",
-              "fieldName": "noDismissButton"
+              "description": "Controls the active state of the call",
+              "fieldName": "callActive"
             },
             {
-              "name": "non-dismissible",
+              "name": "no-call",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "combines `no-light-dismiss`, `no-dismiss-on-esc`, and `no-dismiss-button`",
-              "fieldName": "nonDismissible"
+              "description": "Removes the call button and functionality",
+              "fieldName": "noCall"
             },
             {
-              "name": "modal",
+              "name": "no-input",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Sets the element's to be opened",
-              "fieldName": "modal"
+              "description": "Removes the phone input element",
+              "fieldName": "noInput"
             },
             {
-              "name": "scrollable-body",
+              "name": "size",
               "type": {
-                "text": "boolean"
+                "text": "DialPadSize | undefined"
               },
-              "default": "false",
-              "description": "Makes only the element's content area between the header and footer scrollable",
-              "fieldName": "scrollableBody"
-            }
-          ],
-          "mixins": [
+              "description": "Controls the vertical size of the dial pad",
+              "fieldName": "size"
+            },
             {
-              "name": "Localized",
-              "module": "/src/shared/patterns"
+              "name": "end-call-button-label",
+              "type": {
+                "text": "| string\n\t\t| null"
+              },
+              "default": "null",
+              "description": "Controls the end call button label",
+              "fieldName": "endCallButtonLabel"
             },
             {
-              "name": "DelegatesAria",
-              "module": "/src/shared/aria/delegates-aria"
-            }
-          ],
-          "superclass": {
-            "name": "VividElement",
-            "module": "/src/shared/foundation/vivid-element/vivid-element"
-          },
-          "vividComponent": {
-            "public": true,
-            "name": "dialog",
-            "vueModels": [
-              {
-                "name": "open",
-                "propName": "open",
-                "eventNames": [
-                  "open",
-                  "close"
-                ],
-                "valueMapping": "event.currentTarget.open"
-              }
-            ]
-          },
-          "vividTesting": {
-            "selectors": [
-              {
-                "name": "byHeadline",
-                "args": [
-                  "byHeadline"
-                ]
-              }
-            ],
-            "actions": [
-              {
-                "name": "dismiss",
-                "args": [
-                  "click",
-                  "#dismissButton"
-                ]
-              }
-            ],
-            "queries": [
-              {
-                "name": "open",
-                "args": [
-                  "open",
-                  "true"
-                ]
+              "name": "call-button-label",
+              "type": {
+                "text": "string | null"
               },
-              {
-                "name": "closed",
-                "args": [
-                  "open",
-                  "false"
-                ]
+              "default": "null",
+              "description": "Controls the call button label",
+              "fieldName": "callButtonLabel"
+            },
+            {
+              "name": "delete-aria-label",
+              "type": {
+                "text": "string | null"
               },
+              "default": "null",
+              "description": "The aria-label for the delete button",
+              "fieldName": "deleteAriaLabel"
+            },
+            {
+              "name": "autofocus",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Indicates that an element should be focused on page load, or when the Dialog that it is part of\nis displayed. When `no-input` attribute is specified, it will be the first digit button.\nOtherwise, the text field will be focused.`",
+              "fieldName": "autofocus"
+            }
+          ],
+          "mixins": [
+            {
+              "name": "Localized",
+              "module": "/src/shared/patterns"
+            }
+          ],
+          "superclass": {
+            "name": "VividElement",
+            "module": "/src/shared/foundation/vivid-element/vivid-element"
+          },
+          "vividComponent": {
+            "public": true,
+            "name": "dial-pad",
+            "vueModels": [
               {
-                "name": "headline",
-                "args": [
-                  "headline"
-                ]
-              }
-            ],
-            "refs": [
-              {
-                "name": "dismissButton",
-                "args": [
-                  "shadow",
-                  ".dismiss-button"
-                ]
+                "name": "modelValue",
+                "propName": "value",
+                "eventNames": [
+                  "input",
+                  "@lazy:change"
+                ],
+                "valueMapping": "event.currentTarget.value"
               }
             ]
           }
@@ -14001,28 +13995,28 @@
       "exports": [
         {
           "kind": "js",
-          "name": "Dialog",
+          "name": "DialPad",
           "declaration": {
-            "name": "Dialog",
-            "module": "src/lib/dialog/dialog.ts"
+            "name": "DialPad",
+            "module": "src/lib/dial-pad/dial-pad.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/lib/dialog/locale.ts",
+      "path": "src/lib/dial-pad/locale.ts",
       "declarations": [],
       "exports": []
     },
     {
       "kind": "javascript-module",
-      "path": "src/lib/dial-pad/definition.ts",
+      "path": "src/lib/dialog/definition.ts",
       "declarations": [
         {
           "kind": "variable",
-          "name": "registerDialPad",
-          "description": "Registers the dial-pad element with the design system.",
+          "name": "registerDialog",
+          "description": "Registers the dialog elements with the design system.",
           "parameters": [
             {
               "description": "the prefix to use for the component name",
@@ -14034,233 +14028,231 @@
       "exports": [
         {
           "kind": "js",
-          "name": "registerDialPad",
+          "name": "IconPlacement",
           "declaration": {
-            "name": "registerDialPad",
-            "module": "src/lib/dial-pad/definition.ts"
+            "name": "IconPlacement",
+            "module": "./dialog"
           }
         },
         {
           "kind": "js",
-          "name": "VwcDialPadElement",
+          "name": "registerDialog",
           "declaration": {
-            "name": "DialPad",
-            "module": "src/lib/dial-pad/definition.ts"
+            "name": "registerDialog",
+            "module": "src/lib/dialog/definition.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "VwcDialogElement",
+          "declaration": {
+            "name": "Dialog",
+            "module": "src/lib/dialog/definition.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/lib/dial-pad/dial-pad.ts",
+      "path": "src/lib/dialog/dialog.ts",
       "declarations": [
         {
           "kind": "class",
-          "description": "Base class for dial-pad",
-          "name": "DialPad",
-          "cssProperties": [
-            {
-              "name": "--vvd-dial-pad-accent-contrast",
-              "default": "var(--vvd-color-neutral-800)"
-            },
-            {
-              "name": "--vvd-dial-pad-accent-soft",
-              "default": "var(--vvd-color-neutral-100)"
-            },
+          "description": "",
+          "name": "Dialog",
+          "slots": [
             {
-              "name": "--vvd-dial-pad-accent-pale",
-              "default": "var(--vvd-color-neutral-300)"
+              "description": "Use the graphic slot in order to replace the icon.",
+              "name": "graphic"
             },
             {
-              "name": "--vvd-dial-pad-accent-fierce",
-              "default": "var(--vvd-color-neutral-700)"
+              "description": "Use the body slot in order to add custom HTML to the dialog.",
+              "name": "body"
             },
             {
-              "name": "--vvd-dial-pad-accent-firm-all",
-              "default": "var(--vvd-color-neutral-600)"
+              "description": "Use the footer slot in order to add action buttons to the bottom of the dialog.",
+              "name": "footer"
             },
             {
-              "name": "--vvd-dial-pad-accent-faint",
-              "default": "var(--vvd-color-neutral-50)"
+              "description": "Assign nodes to the main slot to fully override a dialog’s predefined flow and style with your own.",
+              "name": "main"
             },
             {
-              "name": "--vvd-dial-pad-accent-dim",
-              "default": "var(--vvd-color-neutral-200)"
+              "description": "Use the action-items slot in order to add action buttons to the bottom of the dialog.",
+              "name": "action-items"
             }
           ],
           "members": [
             {
               "kind": "field",
-              "name": "helperText",
+              "name": "open",
               "type": {
-                "text": "string | null"
+                "text": "boolean"
               },
-              "default": "null",
-              "description": "Controls the helper text displayed below the phone input element",
+              "default": "false",
+              "description": "Sets the element's to be opened",
               "privacy": "public"
             },
             {
               "kind": "field",
-              "name": "placeholder",
+              "name": "icon",
               "type": {
-                "text": "string | null"
-              },
-              "default": "null",
-              "description": "Indicates the placeholder's text.",
-              "privacy": "public"
+                "text": "string | undefined"
+              }
             },
             {
               "kind": "field",
-              "name": "value",
+              "name": "iconPlacement",
               "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "Value of the phone input element",
-              "privacy": "public"
+                "text": "IconPlacement | undefined"
+              }
             },
             {
-              "kind": "method",
-              "name": "valueChanged",
-              "parameters": [
-                {
-                  "name": "_oldValue",
-                  "type": {
-                    "text": "string | undefined"
-                  }
-                },
-                {
-                  "name": "newValue",
-                  "type": {
-                    "text": "string"
-                  }
-                }
-              ]
+              "kind": "field",
+              "name": "subtitle",
+              "type": {
+                "text": "string | undefined"
+              }
             },
             {
               "kind": "field",
-              "name": "pattern",
+              "name": "headline",
               "type": {
-                "text": "string"
-              },
-              "default": "'^[0-9#*]*$'",
-              "description": "Regular expression to validate the value of the input element",
-              "privacy": "public"
+                "text": "string | undefined"
+              }
             },
             {
               "kind": "field",
-              "name": "disabled",
+              "name": "fullWidthBody",
               "type": {
                 "text": "boolean"
               },
-              "default": "false",
-              "description": "Controls the disabled state of the dial pad",
-              "privacy": "public"
+              "default": "false"
             },
             {
               "kind": "field",
-              "name": "pending",
+              "name": "dismissButtonAriaLabel",
+              "type": {
+                "text": "| string\n\t\t| null"
+              },
+              "default": "null"
+            },
+            {
+              "kind": "field",
+              "name": "noLightDismiss",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Controls the pending state",
-              "privacy": "public"
+              "description": "prevent a modal dialog from being dismissed by clicking outside of it."
             },
             {
               "kind": "field",
-              "name": "callActive",
+              "name": "noDismissOnEsc",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Controls the active state of the call",
-              "privacy": "public"
+              "description": "prevent a modal dialog from being dismissed by pressing esc"
             },
             {
               "kind": "field",
-              "name": "noCall",
+              "name": "noDismissButton",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Removes the call button and functionality",
-              "privacy": "public"
+              "description": "Remove the element's dismiss button"
             },
             {
               "kind": "field",
-              "name": "noInput",
+              "name": "nonDismissible",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Removes the phone input element",
-              "privacy": "public"
+              "description": "combines `no-light-dismiss`, `no-dismiss-on-esc`, and `no-dismiss-button`"
             },
             {
               "kind": "field",
-              "name": "size",
+              "name": "modal",
               "type": {
-                "text": "DialPadSize | undefined"
+                "text": "boolean"
               },
-              "description": "Controls the vertical size of the dial pad",
-              "privacy": "public"
+              "default": "false",
+              "description": "Sets the element's to be opened"
             },
             {
               "kind": "field",
-              "name": "endCallButtonLabel",
+              "name": "scrollableBody",
               "type": {
-                "text": "| string\n\t\t| null"
+                "text": "boolean"
               },
-              "default": "null",
-              "description": "Controls the end call button label",
-              "privacy": "public"
+              "default": "false",
+              "description": "Makes only the element's content area between the header and footer scrollable"
             },
             {
               "kind": "field",
-              "name": "callButtonLabel",
+              "name": "returnValue",
               "type": {
-                "text": "string | null"
-              },
-              "default": "null",
-              "description": "Controls the call button label",
-              "privacy": "public"
+                "text": "string"
+              }
             },
             {
               "kind": "field",
-              "name": "deleteAriaLabel",
+              "name": "#dialogElement",
+              "privacy": "private",
               "type": {
-                "text": "string | null"
-              },
-              "default": "null",
-              "description": "The aria-label for the delete button",
-              "privacy": "public"
+                "text": "HTMLDialogElement | undefined"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "#dialog",
+              "privacy": "private",
+              "readonly": true
+            },
+            {
+              "kind": "method",
+              "name": "#isDismissibleVia",
+              "parameters": [
+                {
+                  "name": "method",
+                  "type": {
+                    "text": "DismissMethod"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "field",
+              "name": "#handleScrimClick",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "#handleInternalFormSubmit",
+              "privacy": "private"
             },
             {
               "kind": "method",
-              "name": "_clearLongPressTimer",
-              "privacy": "private"
+              "name": "close"
             },
             {
-              "kind": "field",
-              "name": "autofocus",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Indicates that an element should be focused on page load, or when the Dialog that it is part of\nis displayed. When `no-input` attribute is specified, it will be the first digit button.\nOtherwise, the text field will be focused.`",
-              "privacy": "public"
+              "kind": "method",
+              "name": "show"
             },
             {
               "kind": "method",
-              "name": "focus",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "description": "Moves focus into the Dial Pad. If `no-input` attribute is specified, it will be the first digit\nbutton. Otherwise, the input field will be focused.",
-              "privacy": "public"
+              "name": "showModal"
+            },
+            {
+              "kind": "method",
+              "name": "#closeDialog"
+            },
+            {
+              "kind": "method",
+              "name": "#showDialog"
             },
             {
               "kind": "field",
@@ -14295,183 +14287,141 @@
               "type": {
                 "text": "CustomEvent<undefined>"
               },
-              "description": "Emitted when the text field value changes",
-              "name": "change"
+              "description": "The `open` event fires when the dialog opens.",
+              "name": "open"
             },
             {
               "type": {
-                "text": "CustomEvent<undefined>"
+                "text": "CustomEvent<string>"
               },
-              "description": "Emitted when the text field value changes",
-              "name": "input"
+              "description": "The `close` event fires when the dialog closes (either via user interaction or via the API). It returns the return value inside the event's details property.",
+              "name": "close"
             },
             {
               "type": {
                 "text": "CustomEvent<undefined>"
               },
-              "description": "Emitted when the text field loses focus",
-              "name": "blur"
-            },
+              "description": "The `cancel` event fires when the user requests to close the dialog. You can prevent the dialog from closing by calling `.preventDefault()` on the event.",
+              "name": "cancel"
+            }
+          ],
+          "attributes": [
             {
+              "name": "open",
               "type": {
-                "text": "CustomEvent<undefined>"
+                "text": "boolean"
               },
-              "description": "Emitted when the text field receives focus",
-              "name": "focus"
+              "default": "false",
+              "description": "Sets the element's to be opened",
+              "fieldName": "open"
             },
             {
+              "name": "icon",
               "type": {
-                "text": "CustomEvent<HTMLElement>"
+                "text": "string | undefined"
               },
-              "description": "Emitted when a digit button is clicked",
-              "name": "keypad-click"
+              "fieldName": "icon"
             },
             {
+              "name": "icon-placement",
               "type": {
-                "text": "CustomEvent<undefined>"
+                "text": "IconPlacement | undefined"
               },
-              "description": "Emitted when the call button is clicked",
-              "name": "dial"
+              "fieldName": "iconPlacement"
             },
             {
+              "name": "subtitle",
               "type": {
-                "text": "CustomEvent<undefined>"
-              },
-              "description": "Emitted when the end call button is clicked",
-              "name": "end-call"
-            }
-          ],
-          "attributes": [
-            {
-              "name": "helper-text",
-              "type": {
-                "text": "string | null"
+                "text": "string | undefined"
               },
-              "default": "null",
-              "description": "Controls the helper text displayed below the phone input element",
-              "fieldName": "helperText"
+              "fieldName": "subtitle"
             },
             {
-              "name": "placeholder",
+              "name": "headline",
               "type": {
-                "text": "string | null"
+                "text": "string | undefined"
               },
-              "default": "null",
-              "description": "Indicates the placeholder's text.",
-              "fieldName": "placeholder"
+              "fieldName": "headline"
             },
             {
-              "name": "value",
+              "name": "full-width-body",
               "type": {
-                "text": "string"
+                "text": "boolean"
               },
-              "default": "''",
-              "description": "Value of the phone input element",
-              "fieldName": "value"
+              "default": "false",
+              "fieldName": "fullWidthBody"
             },
             {
-              "name": "pattern",
+              "name": "dismiss-button-aria-label",
               "type": {
-                "text": "string"
+                "text": "| string\n\t\t| null"
               },
-              "default": "'^[0-9#*]*$'",
-              "description": "Regular expression to validate the value of the input element",
-              "fieldName": "pattern"
+              "default": "null",
+              "fieldName": "dismissButtonAriaLabel"
             },
             {
-              "name": "disabled",
+              "name": "no-light-dismiss",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Controls the disabled state of the dial pad",
-              "fieldName": "disabled"
+              "description": "prevent a modal dialog from being dismissed by clicking outside of it.",
+              "fieldName": "noLightDismiss"
             },
             {
-              "name": "pending",
+              "name": "no-dismiss-on-esc",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Controls the pending state",
-              "fieldName": "pending"
+              "description": "prevent a modal dialog from being dismissed by pressing esc",
+              "fieldName": "noDismissOnEsc"
             },
             {
-              "name": "call-active",
+              "name": "no-dismiss-button",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Controls the active state of the call",
-              "fieldName": "callActive"
+              "description": "Remove the element's dismiss button",
+              "fieldName": "noDismissButton"
             },
             {
-              "name": "no-call",
+              "name": "non-dismissible",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Removes the call button and functionality",
-              "fieldName": "noCall"
+              "description": "combines `no-light-dismiss`, `no-dismiss-on-esc`, and `no-dismiss-button`",
+              "fieldName": "nonDismissible"
             },
             {
-              "name": "no-input",
+              "name": "modal",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Removes the phone input element",
-              "fieldName": "noInput"
-            },
-            {
-              "name": "size",
-              "type": {
-                "text": "DialPadSize | undefined"
-              },
-              "description": "Controls the vertical size of the dial pad",
-              "fieldName": "size"
-            },
-            {
-              "name": "end-call-button-label",
-              "type": {
-                "text": "| string\n\t\t| null"
-              },
-              "default": "null",
-              "description": "Controls the end call button label",
-              "fieldName": "endCallButtonLabel"
-            },
-            {
-              "name": "call-button-label",
-              "type": {
-                "text": "string | null"
-              },
-              "default": "null",
-              "description": "Controls the call button label",
-              "fieldName": "callButtonLabel"
-            },
-            {
-              "name": "delete-aria-label",
-              "type": {
-                "text": "string | null"
-              },
-              "default": "null",
-              "description": "The aria-label for the delete button",
-              "fieldName": "deleteAriaLabel"
+              "description": "Sets the element's to be opened",
+              "fieldName": "modal"
             },
             {
-              "name": "autofocus",
+              "name": "scrollable-body",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Indicates that an element should be focused on page load, or when the Dialog that it is part of\nis displayed. When `no-input` attribute is specified, it will be the first digit button.\nOtherwise, the text field will be focused.`",
-              "fieldName": "autofocus"
+              "description": "Makes only the element's content area between the header and footer scrollable",
+              "fieldName": "scrollableBody"
             }
           ],
           "mixins": [
             {
               "name": "Localized",
               "module": "/src/shared/patterns"
+            },
+            {
+              "name": "DelegatesAria",
+              "module": "/src/shared/aria/delegates-aria"
             }
           ],
           "superclass": {
@@ -14480,16 +14430,66 @@
           },
           "vividComponent": {
             "public": true,
-            "name": "dial-pad",
+            "name": "dialog",
             "vueModels": [
               {
-                "name": "modelValue",
-                "propName": "value",
+                "name": "open",
+                "propName": "open",
                 "eventNames": [
-                  "input",
-                  "@lazy:change"
+                  "open",
+                  "close"
                 ],
-                "valueMapping": "event.currentTarget.value"
+                "valueMapping": "event.currentTarget.open"
+              }
+            ]
+          },
+          "vividTesting": {
+            "selectors": [
+              {
+                "name": "byHeadline",
+                "args": [
+                  "byHeadline"
+                ]
+              }
+            ],
+            "actions": [
+              {
+                "name": "dismiss",
+                "args": [
+                  "click",
+                  "#dismissButton"
+                ]
+              }
+            ],
+            "queries": [
+              {
+                "name": "open",
+                "args": [
+                  "open",
+                  "true"
+                ]
+              },
+              {
+                "name": "closed",
+                "args": [
+                  "open",
+                  "false"
+                ]
+              },
+              {
+                "name": "headline",
+                "args": [
+                  "headline"
+                ]
+              }
+            ],
+            "refs": [
+              {
+                "name": "dismissButton",
+                "args": [
+                  "shadow",
+                  ".dismiss-button"
+                ]
               }
             ]
           }
@@ -14498,17 +14498,17 @@
       "exports": [
         {
           "kind": "js",
-          "name": "DialPad",
+          "name": "Dialog",
           "declaration": {
-            "name": "DialPad",
-            "module": "src/lib/dial-pad/dial-pad.ts"
+            "name": "Dialog",
+            "module": "src/lib/dialog/dialog.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/lib/dial-pad/locale.ts",
+      "path": "src/lib/dialog/locale.ts",
       "declarations": [],
       "exports": []
     },