@vonage/vivid-vue 4.24.0 → 4.26.0

package/index.cjs

@@ -350,8 +350,12 @@ const VAccordionItem = vue.defineComponent({
         },
         [
           this.$slots.default,
-          // @slot icon Add an icon to the component.
-          handleNamedSlotV2("icon", this.$slots["icon"])
+          // @slot heading Used to add content to the heading.
+          handleNamedSlotV2("heading", this.$slots["heading"]),
+          // @slot icon The preferred way to add an icon to the component.
+          handleNamedSlotV2("icon", this.$slots["icon"]),
+          // @slot meta Used to add additional content to the heading.
+          handleNamedSlotV2("meta", this.$slots["meta"])
         ]
       );
     }
@@ -396,8 +400,12 @@ const VAccordionItem = vue.defineComponent({
       [
         // @ts-ignore
         this.$slots.default && this.$slots.default(),
-        // @slot icon Add an icon to the component.
-        handleNamedSlotV3("icon", this.$slots["icon"])
+        // @slot heading Used to add content to the heading.
+        handleNamedSlotV3("heading", this.$slots["heading"]),
+        // @slot icon The preferred way to add an icon to the component.
+        handleNamedSlotV3("icon", this.$slots["icon"]),
+        // @slot meta Used to add additional content to the heading.
+        handleNamedSlotV3("meta", this.$slots["meta"])
       ]
     );
   }
@@ -695,7 +703,7 @@ const VAlert = vue.defineComponent({
           this.$slots.default,
           // @slot action-items Add action items to the Alert using this slot.
           handleNamedSlotV2("action-items", this.$slots["action-items"]),
-          // @slot icon Add an icon to the component.
+          // @slot icon The preferred way to add an icon to the component.
           handleNamedSlotV2("icon", this.$slots["icon"]),
           // @slot main The main content of the Alert.
           handleNamedSlotV2("main", this.$slots["main"])
@@ -749,7 +757,7 @@ const VAlert = vue.defineComponent({
         this.$slots.default && this.$slots.default(),
         // @slot action-items Add action items to the Alert using this slot.
         handleNamedSlotV3("action-items", this.$slots["action-items"]),
-        // @slot icon Add an icon to the component.
+        // @slot icon The preferred way to add an icon to the component.
         handleNamedSlotV3("icon", this.$slots["icon"]),
         // @slot main The main content of the Alert.
         handleNamedSlotV3("main", this.$slots["main"])
@@ -1137,6 +1145,13 @@ const VBadge = vue.defineComponent({
      * The shape the badge should have.
      */
     shape: { type: String, default: void 0 },
+    /**
+     * The size the badge should have.
+     */
+    size: {
+      type: String,
+      default: void 0
+    },
     /**
      * Indicates the badge's text.
      */
@@ -1192,6 +1207,7 @@ const VBadge = vue.defineComponent({
             ...this.icon !== void 0 ? { icon: this.icon } : {},
             ...this.iconTrailing !== void 0 ? { "icon-trailing": this.iconTrailing } : {},
             ...this.shape !== void 0 ? { shape: this.shape } : {},
+            ...this.size !== void 0 ? { size: this.size } : {},
             ...this.text !== void 0 ? { text: this.text } : {}
           },
           class: "vvd-component",
@@ -1218,7 +1234,7 @@ const VBadge = vue.defineComponent({
         },
         [
           this.$slots.default,
-          // @slot icon Add an icon to the component.
+          // @slot icon The preferred way to add an icon to the component.
           handleNamedSlotV2("icon", this.$slots["icon"])
         ]
       );
@@ -1234,6 +1250,7 @@ const VBadge = vue.defineComponent({
           ...this.icon !== void 0 ? { "^icon": this.icon } : {},
           ...this.iconTrailing !== void 0 && this.iconTrailing !== false ? { "^icon-trailing": this.iconTrailing } : {},
           ...this.shape !== void 0 ? { "^shape": this.shape } : {},
+          ...this.size !== void 0 ? { "^size": this.size } : {},
           ...this.text !== void 0 ? { "^text": this.text } : {}
         }),
         onBlur: (event) => {
@@ -1258,7 +1275,7 @@ const VBadge = vue.defineComponent({
       [
         // @ts-ignore
         this.$slots.default && this.$slots.default(),
-        // @slot icon Add an icon to the component.
+        // @slot icon The preferred way to add an icon to the component.
         handleNamedSlotV3("icon", this.$slots["icon"])
       ]
     );
@@ -1366,7 +1383,7 @@ const VBanner = vue.defineComponent({
           this.$slots.default,
           // @slot action-items Add action items to banner using this slot.
           handleNamedSlotV2("action-items", this.$slots["action-items"]),
-          // @slot icon Add an icon to the component.
+          // @slot icon The preferred way to add an icon to the component.
           handleNamedSlotV2("icon", this.$slots["icon"])
         ]
       );
@@ -1409,7 +1426,7 @@ const VBanner = vue.defineComponent({
         this.$slots.default && this.$slots.default(),
         // @slot action-items Add action items to banner using this slot.
         handleNamedSlotV3("action-items", this.$slots["action-items"]),
-        // @slot icon Add an icon to the component.
+        // @slot icon The preferred way to add an icon to the component.
         handleNamedSlotV3("icon", this.$slots["icon"])
       ]
     );
@@ -1525,38 +1542,31 @@ const VBreadcrumbItem = vue.defineComponent({
   name: "VBreadcrumbItem",
   props: {
     /**
-     * See https://www.w3.org/WAI/PF/aria/roles#link for more information
-     */
-    ariaExpanded: {
-      type: String,
-      default: void 0
-    },
-    /**
-     * The URL the hyperlink references. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a | <a> element for more information.
+     * 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.
      */
     download: { type: String, default: void 0 },
     /**
-     * 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.
+     * The URL the hyperlink references. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a | <a> element  for more information.
      */
     href: { type: String, default: void 0 },
     /**
-     * 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.
+     * 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.
      */
     hreflang: { type: String, default: void 0 },
     /**
-     * See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a | <a> element for more information.
+     * See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a | <a> element  for more information.
      */
     ping: { type: String, default: void 0 },
     /**
-     * See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a | <a> element for more information.
+     * See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a | <a> element  for more information.
      */
     referrerpolicy: { type: String, default: void 0 },
     /**
-     * See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a | <a> element for more information.
+     * See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a | <a> element  for more information.
      */
     rel: { type: String, default: void 0 },
     /**
-     * See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a | <a> element for more information.
+     * See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a | <a> element  for more information.
      */
     target: {
       type: String,
@@ -1564,7 +1574,7 @@ const VBreadcrumbItem = vue.defineComponent({
     },
     text: { type: String, default: void 0 },
     /**
-     * See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a | <a> element for more information.
+     * See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a | <a> element  for more information.
      */
     type: { type: String, default: void 0 }
   },
@@ -1616,7 +1626,6 @@ const VBreadcrumbItem = vue.defineComponent({
         {
           ref: "element",
           attrs: {
-            ...this.ariaExpanded !== void 0 ? { "aria-expanded": this.ariaExpanded } : {},
             ...this.download !== void 0 ? { download: this.download } : {},
             ...this.href !== void 0 ? { href: this.href } : {},
             ...this.hreflang !== void 0 ? { hreflang: this.hreflang } : {},
@@ -1658,7 +1667,6 @@ const VBreadcrumbItem = vue.defineComponent({
         ref: "element",
         class: "vvd-component",
         ...handleVue3Props({
-          ...this.ariaExpanded !== void 0 ? { "^aria-expanded": this.ariaExpanded } : {},
           ...this.download !== void 0 ? { "^download": this.download } : {},
           ...this.href !== void 0 ? { "^href": this.href } : {},
           ...this.hreflang !== void 0 ? { "^hreflang": this.hreflang } : {},
@@ -1726,7 +1734,7 @@ const VButton = vue.defineComponent({
      */
     disabled: { type: Boolean, default: void 0 },
     /**
-     * Indicates the button's download.
+     * 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.
      */
     download: { type: String, default: void 0 },
     /**
@@ -1764,11 +1772,11 @@ const VButton = vue.defineComponent({
       default: void 0
     },
     /**
-     * Indicates the button's href.
+     * The URL the hyperlink references. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a | <a> element  for more information.
      */
     href: { type: String, default: void 0 },
     /**
-     * Indicates the button's hreflang.
+     * 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.
      */
     hreflang: { type: String, default: void 0 },
     /**
@@ -1781,7 +1789,7 @@ const VButton = vue.defineComponent({
      */
     iconTrailing: { type: Boolean, default: void 0 },
     /**
-     * The initial value of the form. This value sets the `value` property
+     * The default value of the element. This value sets the `value` property
      * only when the `value` property has not been explicitly set.
      */
     initialValue: { type: String, default: void 0 },
@@ -1798,15 +1806,15 @@ const VButton = vue.defineComponent({
      */
     pending: { type: Boolean, default: void 0 },
     /**
-     * Indicates the button's ping.
+     * See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a | <a> element  for more information.
      */
     ping: { type: String, default: void 0 },
     /**
-     * Indicates the button's referrerpolicy.
+     * See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a | <a> element  for more information.
      */
     referrerpolicy: { type: String, default: void 0 },
     /**
-     * Indicates the button's rel.
+     * See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a | <a> element  for more information.
      */
     rel: { type: String, default: void 0 },
     /**
@@ -1829,7 +1837,7 @@ const VButton = vue.defineComponent({
      */
     stacked: { type: Boolean, default: void 0 },
     /**
-     * Indicates the target's rel.
+     * See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a | <a> element  for more information.
      */
     target: {
       type: String,
@@ -1840,18 +1848,14 @@ const VButton = vue.defineComponent({
      */
     title: { type: String, default: void 0 },
     /**
-     * The button type.
+     * See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a | <a> element  for more information.
      */
     type: {
       type: String,
       default: void 0
     },
     /**
-     * The current value of the element. This property serves as a mechanism
-     * to set the `value` property through both property assignment and the
-     * .setAttribute() method. This is useful for setting the field's value
-     * in UI libraries that bind data through the .setAttribute() API
-     * and don't support IDL attribute binding.
+     * The current value of the element.
      */
     value: { type: String, default: void 0 }
   },
@@ -1888,6 +1892,19 @@ const VButton = vue.defineComponent({
     "keyup"
   ],
   methods: {
+    /**
+     * Return the current validity of the element.
+     */
+    checkValidity() {
+      return this.element?.checkValidity();
+    },
+    /**
+     * Return the current validity of the element.
+     * If false, fires an invalid event at the element.
+     */
+    reportValidity() {
+      return this.element?.reportValidity();
+    },
     /**
      * {@inheritDoc (FormAssociated:interface).validate}
      */
@@ -1964,7 +1981,7 @@ const VButton = vue.defineComponent({
         },
         [
           this.$slots.default,
-          // @slot icon Add an icon to the component.
+          // @slot icon The preferred way to add an icon to the component.
           handleNamedSlotV2("icon", this.$slots["icon"])
         ]
       );
@@ -2030,7 +2047,7 @@ const VButton = vue.defineComponent({
       [
         // @ts-ignore
         this.$slots.default && this.$slots.default(),
-        // @slot icon Add an icon to the component.
+        // @slot icon The preferred way to add an icon to the component.
         handleNamedSlotV3("icon", this.$slots["icon"])
       ]
     );
@@ -2405,6 +2422,14 @@ const VCard = vue.defineComponent({
       type: String,
       default: void 0
     },
+    /**
+     * Indicates whether card should be a clickable <button> element.
+     */
+    clickableCard: { type: Boolean, default: void 0 },
+    /**
+     * 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.
+     */
+    download: { type: String, default: void 0 },
     /**
      * card elevation dp
      */
@@ -2417,21 +2442,52 @@ const VCard = vue.defineComponent({
      * accepts string
      */
     headline: { type: String, default: void 0 },
+    /**
+     * The URL the hyperlink references. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a | <a> element  for more information.
+     */
+    href: { type: String, default: void 0 },
+    /**
+     * 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.
+     */
+    hreflang: { type: String, default: void 0 },
     /**
      * card header icon
      * See the Vivid Icon Gallery for available icons: https://icons.vivid.vonage.com/
      */
     icon: { type: String, default: void 0 },
+    /**
+     * See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a | <a> element  for more information.
+     */
+    ping: { type: String, default: void 0 },
+    /**
+     * See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a | <a> element  for more information.
+     */
+    referrerpolicy: { type: String, default: void 0 },
+    /**
+     * See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a | <a> element  for more information.
+     */
+    rel: { type: String, default: void 0 },
     /**
      * the text of the card sub-heading
      * accepts string
      */
     subtitle: { type: String, default: void 0 },
+    /**
+     * See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a | <a> element  for more information.
+     */
+    target: {
+      type: String,
+      default: void 0
+    },
     /**
      * the text of the card sub-heading
      * accepts string
      */
-    text: { type: String, default: void 0 }
+    text: { type: String, default: void 0 },
+    /**
+     * See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a | <a> element  for more information.
+     */
+    type: { type: String, default: void 0 }
   },
   emits: [
     /**
@@ -2479,11 +2535,20 @@ const VCard = vue.defineComponent({
           ref: "element",
           attrs: {
             ...this.appearance !== void 0 ? { appearance: this.appearance } : {},
+            ...this.clickableCard !== void 0 ? { "clickable-card": this.clickableCard } : {},
+            ...this.download !== void 0 ? { download: this.download } : {},
             ...this.elevation !== void 0 ? { elevation: this.elevation } : {},
             ...this.headline !== void 0 ? { headline: this.headline } : {},
+            ...this.href !== void 0 ? { href: this.href } : {},
+            ...this.hreflang !== void 0 ? { hreflang: this.hreflang } : {},
             ...this.icon !== void 0 ? { icon: this.icon } : {},
+            ...this.ping !== void 0 ? { ping: this.ping } : {},
+            ...this.referrerpolicy !== void 0 ? { referrerpolicy: this.referrerpolicy } : {},
+            ...this.rel !== void 0 ? { rel: this.rel } : {},
             ...this.subtitle !== void 0 ? { subtitle: this.subtitle } : {},
-            ...this.text !== void 0 ? { text: this.text } : {}
+            ...this.target !== void 0 ? { target: this.target } : {},
+            ...this.text !== void 0 ? { text: this.text } : {},
+            ...this.type !== void 0 ? { type: this.type } : {}
           },
           class: "vvd-component",
           on: {
@@ -2529,11 +2594,20 @@ const VCard = vue.defineComponent({
         class: "vvd-component",
         ...handleVue3Props({
           ...this.appearance !== void 0 ? { "^appearance": this.appearance } : {},
+          ...this.clickableCard !== void 0 && this.clickableCard !== false ? { "^clickable-card": this.clickableCard } : {},
+          ...this.download !== void 0 ? { "^download": this.download } : {},
           ...this.elevation !== void 0 ? { "^elevation": this.elevation } : {},
           ...this.headline !== void 0 ? { "^headline": this.headline } : {},
+          ...this.href !== void 0 ? { "^href": this.href } : {},
+          ...this.hreflang !== void 0 ? { "^hreflang": this.hreflang } : {},
           ...this.icon !== void 0 ? { "^icon": this.icon } : {},
+          ...this.ping !== void 0 ? { "^ping": this.ping } : {},
+          ...this.referrerpolicy !== void 0 ? { "^referrerpolicy": this.referrerpolicy } : {},
+          ...this.rel !== void 0 ? { "^rel": this.rel } : {},
           ...this.subtitle !== void 0 ? { "^subtitle": this.subtitle } : {},
-          ...this.text !== void 0 ? { "^text": this.text } : {}
+          ...this.target !== void 0 ? { "^target": this.target } : {},
+          ...this.text !== void 0 ? { "^text": this.text } : {},
+          ...this.type !== void 0 ? { "^type": this.type } : {}
         }),
         onBlur: (event) => {
           this.$emit("blur", event);
@@ -2580,19 +2654,11 @@ const VCheckbox = vue.defineComponent({
   } : void 0,
   props: {
     /**
-     * The current checkedness of the element. This property serves as a mechanism
-     * to set the `checked` property through both property assignment and the
-     * .setAttribute() method. This is useful for setting the field's checkedness
-     * in UI libraries that bind data through the .setAttribute() API
-     * and don't support IDL attribute binding.
+     * The current checkedness of the element.
      */
     checked: { type: Boolean, default: void 0 },
     /**
-     * The current checkedness of the element. This property serves as a mechanism
-     * to set the `checked` property through both property assignment and the
-     * .setAttribute() method. This is useful for setting the field's checkedness
-     * in UI libraries that bind data through the .setAttribute() API
-     * and don't support IDL attribute binding.
+     * The current checkedness of the element.
      */
     modelValue: { type: Boolean, default: void 0 },
     /**
@@ -2603,7 +2669,8 @@ const VCheckbox = vue.defineComponent({
       default: void 0
     },
     /**
-     * Provides the default checkedness of the input element
+     * The default checkedness of the element. This value sets the `checked` property
+     * only when the `checked` property has not been explicitly set.
      */
     defaultChecked: { type: Boolean, default: void 0 },
     /**
@@ -2611,19 +2678,20 @@ const VCheckbox = vue.defineComponent({
      */
     disabled: { type: Boolean, default: void 0 },
     /**
-     * The error text for the form element.
+     * Provides a custom error message. Any current error state will be overridden.
      */
     errorText: { type: String, default: void 0 },
     /**
-     * The helper text for the form element.
+     * Provides additional information to help the user enter the correct information.
+     * To add HTML to the helper text, use the helper-text slot instead.
      */
     helperText: { type: String, default: void 0 },
     /**
-     * The indeterminate state of the control
+     * The indeterminate state of the control.
      */
     indeterminate: { type: Boolean, default: void 0 },
     /**
-     * The initial value of the form. This value sets the `value` property
+     * The default value of the element. This value sets the `value` property
      * only when the `value` property has not been explicitly set.
      */
     initialValue: { type: String, default: void 0 },
@@ -2644,16 +2712,12 @@ const VCheckbox = vue.defineComponent({
      */
     required: { type: Boolean, default: void 0 },
     /**
-     * The success text for the form element.
+     * Provides a custom success message. Any current error state will be overridden.
      */
     successText: { type: String, default: void 0 },
     tabindex: { type: String, default: void 0 },
     /**
-     * The current value of the element. This property serves as a mechanism
-     * to set the `value` property through both property assignment and the
-     * .setAttribute() method. This is useful for setting the field's value
-     * in UI libraries that bind data through the .setAttribute() API
-     * and don't support IDL attribute binding.
+     * The current value of the element.
      */
     value: { type: String, default: void 0 }
   },
@@ -2702,6 +2766,19 @@ const VCheckbox = vue.defineComponent({
   methods: {
     ariaCheckedChanged() {
       return this.element?.ariaCheckedChanged();
+    },
+    /**
+     * Return the current validity of the element.
+     */
+    checkValidity() {
+      return this.element?.checkValidity();
+    },
+    /**
+     * Return the current validity of the element.
+     * If false, fires an invalid event at the element.
+     */
+    reportValidity() {
+      return this.element?.reportValidity();
     }
   },
   setup(props, ctx) {
@@ -2722,6 +2799,7 @@ const VCheckbox = vue.defineComponent({
             ...this.disabled !== void 0 ? { disabled: this.disabled } : {},
             ...this.errorText !== void 0 ? { "error-text": this.errorText } : {},
             ...this.helperText !== void 0 ? { "helper-text": this.helperText } : {},
+            ...this.indeterminate !== void 0 ? { indeterminate: this.indeterminate } : {},
             ...this.initialValue !== void 0 ? { value: this.initialValue } : {},
             ...this.label !== void 0 ? { label: this.label } : {},
             ...this.name !== void 0 ? { name: this.name } : {},
@@ -2732,9 +2810,6 @@ const VCheckbox = vue.defineComponent({
             ...this.value !== void 0 ? { "current-value": this.value } : {}
           },
           class: "vvd-component",
-          domProps: {
-            ...this.indeterminate !== void 0 ? { indeterminate: this.indeterminate } : {}
-          },
           on: {
             blur: (event) => {
               this.$emit("blur", event);
@@ -2779,7 +2854,7 @@ const VCheckbox = vue.defineComponent({
           ...this.disabled !== void 0 && this.disabled !== false ? { "^disabled": this.disabled } : {},
           ...this.errorText !== void 0 ? { "^error-text": this.errorText } : {},
           ...this.helperText !== void 0 ? { "^helper-text": this.helperText } : {},
-          ...this.indeterminate !== void 0 ? { ".indeterminate": this.indeterminate } : {},
+          ...this.indeterminate !== void 0 && this.indeterminate !== false ? { "^indeterminate": this.indeterminate } : {},
           ...this.initialValue !== void 0 ? { "^value": this.initialValue } : {},
           ...this.label !== void 0 ? { "^label": this.label } : {},
           ...this.name !== void 0 ? { "^name": this.name } : {},
@@ -2844,11 +2919,11 @@ const VCombobox = vue.defineComponent({
       default: void 0
     },
     /**
-     * The disabled state of the listbox.
+     * Sets the element's disabled state. A disabled element will not be included during form submission.
      */
     disabled: { type: Boolean, default: void 0 },
     /**
-     * The error text for the form element.
+     * Provides a custom error message. Any current error state will be overridden.
      */
     errorText: { type: String, default: void 0 },
     /**
@@ -2856,7 +2931,8 @@ const VCombobox = vue.defineComponent({
      */
     fixedDropdown: { type: Boolean, default: void 0 },
     /**
-     * The helper text for the form element.
+     * Provides additional information to help the user enter the correct information.
+     * To add HTML to the helper text, use the helper-text slot instead.
      */
     helperText: { type: String, default: void 0 },
     /**
@@ -2865,7 +2941,7 @@ const VCombobox = vue.defineComponent({
      */
     icon: { type: String, default: void 0 },
     /**
-     * The initial value of the form. This value sets the `value` property
+     * The default value of the element. This value sets the `value` property
      * only when the `value` property has not been explicitly set.
      */
     initialValue: { type: String, default: void 0 },
@@ -2910,23 +2986,15 @@ const VCombobox = vue.defineComponent({
      */
     shape: { type: String, default: void 0 },
     /**
-     * The success text for the form element.
+     * Provides a custom success message. Any current error state will be overridden.
      */
     successText: { type: String, default: void 0 },
     /**
-     * The current value of the element. This property serves as a mechanism
-     * to set the `value` property through both property assignment and the
-     * .setAttribute() method. This is useful for setting the field's value
-     * in UI libraries that bind data through the .setAttribute() API
-     * and don't support IDL attribute binding.
+     * The current value of the element.
      */
     value: { type: String, default: void 0 },
     /**
-     * The current value of the element. This property serves as a mechanism
-     * to set the `value` property through both property assignment and the
-     * .setAttribute() method. This is useful for setting the field's value
-     * in UI libraries that bind data through the .setAttribute() API
-     * and don't support IDL attribute binding.
+     * The current value of the element.
      */
     modelValue: { type: String, default: void 0 }
   },
@@ -2973,12 +3041,25 @@ const VCombobox = vue.defineComponent({
     "update:modelValue"
   ],
   methods: {
+    /**
+     * Return the current validity of the element.
+     */
+    checkValidity() {
+      return this.element?.checkValidity();
+    },
     /**
      * Filter available options by text value.
      */
     filterOptions() {
       return this.element?.filterOptions();
     },
+    /**
+     * Return the current validity of the element.
+     * If false, fires an invalid event at the element.
+     */
+    reportValidity() {
+      return this.element?.reportValidity();
+    },
     /**
      * Moves focus to the first selectable option.
      */
@@ -3059,7 +3140,7 @@ const VCombobox = vue.defineComponent({
           this.$slots.default,
           // @slot helper-text Describes how to use the combobox. Alternative to the `helper-text` attribute.
           handleNamedSlotV2("helper-text", this.$slots["helper-text"]),
-          // @slot icon Slot to add an icon to the combobox control.
+          // @slot icon The preferred way to add an icon to the combobox control.
           handleNamedSlotV2("icon", this.$slots["icon"]),
           // @slot meta Slot to add meta content to the combobox control.
           handleNamedSlotV2("meta", this.$slots["meta"])
@@ -3119,7 +3200,7 @@ const VCombobox = vue.defineComponent({
         this.$slots.default && this.$slots.default(),
         // @slot helper-text Describes how to use the combobox. Alternative to the `helper-text` attribute.
         handleNamedSlotV3("helper-text", this.$slots["helper-text"]),
-        // @slot icon Slot to add an icon to the combobox control.
+        // @slot icon The preferred way to add an icon to the combobox control.
         handleNamedSlotV3("icon", this.$slots["icon"]),
         // @slot meta Slot to add meta content to the combobox control.
         handleNamedSlotV3("meta", this.$slots["meta"])
@@ -3321,7 +3402,18 @@ const VDataGridCell = vue.defineComponent({
      * This will be applied to the css grid-column-index value
      * applied to the cell
      */
-    gridColumn: { type: String, default: void 0 }
+    gridColumn: { type: String, default: void 0 },
+    /**
+     * Reflects selected state of the row
+     */
+    selected: { type: Boolean, default: void 0 },
+    /**
+     * Sets the sorting direction.
+     */
+    sortDirection: {
+      type: String,
+      default: void 0
+    }
   },
   emits: [
     /**
@@ -3366,14 +3458,11 @@ const VDataGridCell = vue.defineComponent({
     "keyup",
     /**
      * Event that fires when a sortable column header is clicked
-     * @type {CustomEvent<{columnDataKey: string, ariaSort: string | null}>}
+     * @type {CustomEvent<{columnDataKey: string, ariaSort: string | null, sortDirection: string | null}>}
      */
     "sort"
   ],
   methods: {
-    ariaSelectedChanged(_, selectedState) {
-      return this.element?.ariaSelectedChanged(_, selectedState);
-    },
     handleFocusin(_) {
       return this.element?.handleFocusin(_);
     },
@@ -3399,7 +3488,9 @@ const VDataGridCell = vue.defineComponent({
             ...this.ariaSelected !== void 0 ? { "aria-selected": this.ariaSelected } : {},
             ...this.ariaSort !== void 0 ? { "aria-sort": this.ariaSort } : {},
             ...this.cellType !== void 0 ? { "cell-type": this.cellType } : {},
-            ...this.gridColumn !== void 0 ? { "grid-column": this.gridColumn } : {}
+            ...this.gridColumn !== void 0 ? { "grid-column": this.gridColumn } : {},
+            ...this.selected !== void 0 ? { selected: this.selected } : {},
+            ...this.sortDirection !== void 0 ? { "sort-direction": this.sortDirection } : {}
           },
           class: "vvd-component",
           domProps: {
@@ -3448,7 +3539,9 @@ const VDataGridCell = vue.defineComponent({
           ...this.ariaSort !== void 0 ? { "^aria-sort": this.ariaSort } : {},
           ...this.cellType !== void 0 ? { "^cell-type": this.cellType } : {},
           ...this.columnDefinition !== void 0 ? { ".columnDefinition": this.columnDefinition } : {},
-          ...this.gridColumn !== void 0 ? { "^grid-column": this.gridColumn } : {}
+          ...this.gridColumn !== void 0 ? { "^grid-column": this.gridColumn } : {},
+          ...this.selected !== void 0 && this.selected !== false ? { "^selected": this.selected } : {},
+          ...this.sortDirection !== void 0 ? { "^sort-direction": this.sortDirection } : {}
         }),
         onBlur: (event) => {
           this.$emit("blur", event);
@@ -3507,7 +3600,11 @@ const VDataGridRow = vue.defineComponent({
     rowType: {
       type: String,
       default: void 0
-    }
+    },
+    /**
+     * Reflects selected state of the row
+     */
+    selected: { type: Boolean, default: void 0 }
   },
   emits: [
     /**
@@ -3576,7 +3673,8 @@ const VDataGridRow = vue.defineComponent({
           attrs: {
             ...this.ariaSelected !== void 0 ? { "aria-selected": this.ariaSelected } : {},
             ...this.gridTemplateColumns !== void 0 ? { "grid-template-columns": this.gridTemplateColumns } : {},
-            ...this.rowType !== void 0 ? { "row-type": this.rowType } : {}
+            ...this.rowType !== void 0 ? { "row-type": this.rowType } : {},
+            ...this.selected !== void 0 ? { selected: this.selected } : {}
           },
           class: "vvd-component",
           on: {
@@ -3617,7 +3715,8 @@ const VDataGridRow = vue.defineComponent({
         ...handleVue3Props({
           ...this.ariaSelected !== void 0 ? { "^aria-selected": this.ariaSelected } : {},
           ...this.gridTemplateColumns !== void 0 ? { "^grid-template-columns": this.gridTemplateColumns } : {},
-          ...this.rowType !== void 0 ? { "^row-type": this.rowType } : {}
+          ...this.rowType !== void 0 ? { "^row-type": this.rowType } : {},
+          ...this.selected !== void 0 && this.selected !== false ? { "^selected": this.selected } : {}
         }),
         onBlur: (event) => {
           this.$emit("blur", event);
@@ -3664,11 +3763,17 @@ const VDatePicker = vue.defineComponent({
      */
     disabled: { type: Boolean, default: void 0 },
     /**
-     * The error text for the form element.
+     * Provides a custom error message. Any current error state will be overridden.
      */
     errorText: { type: String, default: void 0 },
     /**
-     * The initial value of the date-picker.
+     * Provides additional information to help the user enter the correct information.
+     * To add HTML to the helper text, use the helper-text slot instead.
+     */
+    helperText: { type: String, default: void 0 },
+    /**
+     * The default value of the element. This value sets the `value` property
+     * only when the `value` property has not been explicitly set.
      */
     initialValue: { type: String, default: void 0 },
     /**
@@ -3696,11 +3801,11 @@ const VDatePicker = vue.defineComponent({
      */
     required: { type: Boolean, default: void 0 },
     /**
-     * The current value of the date-picker.
+     * The current value of the element.
      */
     value: { type: String, default: void 0 },
     /**
-     * The current value of the date-picker.
+     * The current value of the element.
      */
     modelValue: { type: String, default: void 0 }
   },
@@ -3746,7 +3851,21 @@ const VDatePicker = vue.defineComponent({
      */
     "update:modelValue"
   ],
-  methods: {},
+  methods: {
+    /**
+     * Return the current validity of the element.
+     */
+    checkValidity() {
+      return this.element?.checkValidity();
+    },
+    /**
+     * Return the current validity of the element.
+     * If false, fires an invalid event at the element.
+     */
+    reportValidity() {
+      return this.element?.reportValidity();
+    }
+  },
   setup(props, ctx) {
     const componentName = registerComponent("date-picker", vivid.registerDatePicker);
     const element = vue.ref(null);
@@ -3761,6 +3880,7 @@ const VDatePicker = vue.defineComponent({
           attrs: {
             ...this.disabled !== void 0 ? { disabled: this.disabled } : {},
             ...this.errorText !== void 0 ? { "error-text": this.errorText } : {},
+            ...this.helperText !== void 0 ? { "helper-text": this.helperText } : {},
             ...this.initialValue !== void 0 ? { value: this.initialValue } : {},
             ...this.label !== void 0 ? { label: this.label } : {},
             ...this.max !== void 0 ? { max: this.max } : {},
@@ -3811,6 +3931,7 @@ const VDatePicker = vue.defineComponent({
         ...handleVue3Props({
           ...this.disabled !== void 0 && this.disabled !== false ? { "^disabled": this.disabled } : {},
           ...this.errorText !== void 0 ? { "^error-text": this.errorText } : {},
+          ...this.helperText !== void 0 ? { "^helper-text": this.helperText } : {},
           ...this.initialValue !== void 0 ? { "^value": this.initialValue } : {},
           ...this.label !== void 0 ? { "^label": this.label } : {},
           ...this.max !== void 0 ? { "^max": this.max } : {},
@@ -3869,9 +3990,14 @@ const VDateRangePicker = vue.defineComponent({
      */
     end: { type: String, default: void 0 },
     /**
-     * The error text for the form element.
+     * Provides a custom error message. Any current error state will be overridden.
      */
     errorText: { type: String, default: void 0 },
+    /**
+     * Provides additional information to help the user enter the correct information.
+     * To add HTML to the helper text, use the helper-text slot instead.
+     */
+    helperText: { type: String, default: void 0 },
     /**
      * The initial end value. This value sets the `end` property
      * only when the `end` property has not been explicitly set.
@@ -3883,7 +4009,8 @@ const VDateRangePicker = vue.defineComponent({
      */
     initialStart: { type: String, default: void 0 },
     /**
-     * The initial value of the date-picker.
+     * The default value of the element. This value sets the `value` property
+     * only when the `value` property has not been explicitly set.
      */
     initialValue: { type: String, default: void 0 },
     /**
@@ -3919,7 +4046,7 @@ const VDateRangePicker = vue.defineComponent({
      */
     start: { type: String, default: void 0 },
     /**
-     * The current value of the date-picker.
+     * The current value of the element.
      */
     value: { type: String, default: void 0 }
   },
@@ -3980,7 +4107,21 @@ const VDateRangePicker = vue.defineComponent({
      */
     "update:start"
   ],
-  methods: {},
+  methods: {
+    /**
+     * Return the current validity of the element.
+     */
+    checkValidity() {
+      return this.element?.checkValidity();
+    },
+    /**
+     * Return the current validity of the element.
+     * If false, fires an invalid event at the element.
+     */
+    reportValidity() {
+      return this.element?.reportValidity();
+    }
+  },
   setup(props, ctx) {
     const componentName = registerComponent(
       "date-range-picker",
@@ -3999,6 +4140,7 @@ const VDateRangePicker = vue.defineComponent({
             ...this.disabled !== void 0 ? { disabled: this.disabled } : {},
             ...this.end !== void 0 ? { "current-end": this.end } : {},
             ...this.errorText !== void 0 ? { "error-text": this.errorText } : {},
+            ...this.helperText !== void 0 ? { "helper-text": this.helperText } : {},
             ...this.initialEnd !== void 0 ? { end: this.initialEnd } : {},
             ...this.initialStart !== void 0 ? { start: this.initialStart } : {},
             ...this.initialValue !== void 0 ? { value: this.initialValue } : {},
@@ -4060,6 +4202,7 @@ const VDateRangePicker = vue.defineComponent({
           ...this.disabled !== void 0 && this.disabled !== false ? { "^disabled": this.disabled } : {},
           ...this.end !== void 0 ? { "^current-end": this.end } : {},
           ...this.errorText !== void 0 ? { "^error-text": this.errorText } : {},
+          ...this.helperText !== void 0 ? { "^helper-text": this.helperText } : {},
           ...this.initialEnd !== void 0 ? { "^end": this.initialEnd } : {},
           ...this.initialStart !== void 0 ? { "^start": this.initialStart } : {},
           ...this.initialValue !== void 0 ? { "^value": this.initialValue } : {},
@@ -4128,11 +4271,17 @@ const VDateTimePicker = vue.defineComponent({
      */
     disabled: { type: Boolean, default: void 0 },
     /**
-     * The error text for the form element.
+     * Provides a custom error message. Any current error state will be overridden.
      */
     errorText: { type: String, default: void 0 },
     /**
-     * The initial value of the date-picker.
+     * Provides additional information to help the user enter the correct information.
+     * To add HTML to the helper text, use the helper-text slot instead.
+     */
+    helperText: { type: String, default: void 0 },
+    /**
+     * The default value of the element. This value sets the `value` property
+     * only when the `value` property has not been explicitly set.
      */
     initialValue: { type: String, default: void 0 },
     /**
@@ -4184,11 +4333,11 @@ const VDateTimePicker = vue.defineComponent({
      */
     secondsStep: { type: Number, default: void 0 },
     /**
-     * The current value of the date-picker.
+     * The current value of the element.
      */
     value: { type: String, default: void 0 },
     /**
-     * The current value of the date-picker.
+     * The current value of the element.
      */
     modelValue: { type: String, default: void 0 }
   },
@@ -4234,7 +4383,21 @@ const VDateTimePicker = vue.defineComponent({
      */
     "update:modelValue"
   ],
-  methods: {},
+  methods: {
+    /**
+     * Return the current validity of the element.
+     */
+    checkValidity() {
+      return this.element?.checkValidity();
+    },
+    /**
+     * Return the current validity of the element.
+     * If false, fires an invalid event at the element.
+     */
+    reportValidity() {
+      return this.element?.reportValidity();
+    }
+  },
   setup(props, ctx) {
     const componentName = registerComponent(
       "date-time-picker",
@@ -4253,6 +4416,7 @@ const VDateTimePicker = vue.defineComponent({
             ...this.clock !== void 0 ? { clock: this.clock } : {},
             ...this.disabled !== void 0 ? { disabled: this.disabled } : {},
             ...this.errorText !== void 0 ? { "error-text": this.errorText } : {},
+            ...this.helperText !== void 0 ? { "helper-text": this.helperText } : {},
             ...this.initialValue !== void 0 ? { value: this.initialValue } : {},
             ...this.label !== void 0 ? { label: this.label } : {},
             ...this.max !== void 0 ? { max: this.max } : {},
@@ -4310,6 +4474,7 @@ const VDateTimePicker = vue.defineComponent({
           ...this.clock !== void 0 ? { "^clock": this.clock } : {},
           ...this.disabled !== void 0 && this.disabled !== false ? { "^disabled": this.disabled } : {},
           ...this.errorText !== void 0 ? { "^error-text": this.errorText } : {},
+          ...this.helperText !== void 0 ? { "^helper-text": this.helperText } : {},
           ...this.initialValue !== void 0 ? { "^value": this.initialValue } : {},
           ...this.label !== void 0 ? { "^label": this.label } : {},
           ...this.max !== void 0 ? { "^max": this.max } : {},
@@ -4365,6 +4530,10 @@ const VDialPad = vue.defineComponent({
     event: "update:modelValue"
   } : void 0,
   props: {
+    /**
+     * Indicates that this element should get focus after the page finishes loading.
+     */
+    autofocus: { type: Boolean, default: void 0 },
     /**
      * Indicates the active state of the dial-pad.
      */
@@ -4469,6 +4638,12 @@ const VDialPad = vue.defineComponent({
     "update:modelValue"
   ],
   methods: {
+    /**
+     * Moves focus into the diapl-pad.
+     */
+    focus() {
+      return this.element?.focus();
+    },
     valueChanged(_oldValue, newValue) {
       return this.element?.valueChanged(_oldValue, newValue);
     }
@@ -4485,6 +4660,7 @@ const VDialPad = vue.defineComponent({
         {
           ref: "element",
           attrs: {
+            ...this.autofocus !== void 0 ? { autofocus: this.autofocus } : {},
             ...this.callActive !== void 0 ? { "call-active": this.callActive } : {},
             ...this.callButtonLabel !== void 0 ? { "call-button-label": this.callButtonLabel } : {},
             ...this.disabled !== void 0 ? { disabled: this.disabled } : {},
@@ -4541,6 +4717,7 @@ const VDialPad = vue.defineComponent({
         ref: "element",
         class: "vvd-component",
         ...handleVue3Props({
+          ...this.autofocus !== void 0 && this.autofocus !== false ? { "^autofocus": this.autofocus } : {},
           ...this.callActive !== void 0 && this.callActive !== false ? { "^call-active": this.callActive } : {},
           ...this.callButtonLabel !== void 0 ? { "^call-button-label": this.callButtonLabel } : {},
           ...this.disabled !== void 0 && this.disabled !== false ? { "^disabled": this.disabled } : {},
@@ -4635,6 +4812,10 @@ const VDialog = vue.defineComponent({
      * Indicates dialog's state
      */
     open: { type: Boolean, default: void 0 },
+    /**
+     * Makes only the element's content area between the header and footer scrollable
+     */
+    scrollableBody: { type: Boolean, default: void 0 },
     subtitle: { type: String, default: void 0 }
   },
   emits: [
@@ -4723,6 +4904,7 @@ const VDialog = vue.defineComponent({
             ...this.noLightDismiss !== void 0 ? { "no-light-dismiss": this.noLightDismiss } : {},
             ...this.nonDismissible !== void 0 ? { "non-dismissible": this.nonDismissible } : {},
             ...this.open !== void 0 ? { open: this.open } : {},
+            ...this.scrollableBody !== void 0 ? { "scrollable-body": this.scrollableBody } : {},
             ...this.subtitle !== void 0 ? { subtitle: this.subtitle } : {}
           },
           class: "vvd-component",
@@ -4790,6 +4972,7 @@ const VDialog = vue.defineComponent({
           ...this.noLightDismiss !== void 0 && this.noLightDismiss !== false ? { "^no-light-dismiss": this.noLightDismiss } : {},
           ...this.nonDismissible !== void 0 && this.nonDismissible !== false ? { "^non-dismissible": this.nonDismissible } : {},
           ...this.open !== void 0 && this.open !== false ? { "^open": this.open } : {},
+          ...this.scrollableBody !== void 0 && this.scrollableBody !== false ? { "^scrollable-body": this.scrollableBody } : {},
           ...this.subtitle !== void 0 ? { "^subtitle": this.subtitle } : {}
         }),
         onBlur: (event) => {
@@ -4851,7 +5034,7 @@ const VDivider = vue.defineComponent({
       default: void 0
     },
     /**
-     * The role of the element.
+     * The role of the element. This property will be removed
      */
     role: {
       type: String,
@@ -4986,9 +5169,6 @@ const VEmptyState = vue.defineComponent({
      * See the Vivid Icon Gallery for available icons: https://icons.vivid.vonage.com/
      */
     icon: { type: String, default: void 0 },
-    /**
-     * option to a new design for the icon circle
-     */
     iconDecoration: {
       type: String,
       default: void 0
@@ -5172,7 +5352,7 @@ const VFab = vue.defineComponent({
      */
     iconTrailing: { type: Boolean, default: void 0 },
     /**
-     * The initial value of the form. This value sets the `value` property
+     * The default value of the element. This value sets the `value` property
      * only when the `value` property has not been explicitly set.
      */
     initialValue: { type: String, default: void 0 },
@@ -5203,11 +5383,7 @@ const VFab = vue.defineComponent({
       default: void 0
     },
     /**
-     * The current value of the element. This property serves as a mechanism
-     * to set the `value` property through both property assignment and the
-     * .setAttribute() method. This is useful for setting the field's value
-     * in UI libraries that bind data through the .setAttribute() API
-     * and don't support IDL attribute binding.
+     * The current value of the element.
      */
     value: { type: String, default: void 0 }
   },
@@ -5244,6 +5420,19 @@ const VFab = vue.defineComponent({
     "keyup"
   ],
   methods: {
+    /**
+     * Return the current validity of the element.
+     */
+    checkValidity() {
+      return this.element?.checkValidity();
+    },
+    /**
+     * Return the current validity of the element.
+     * If false, fires an invalid event at the element.
+     */
+    reportValidity() {
+      return this.element?.reportValidity();
+    },
     /**
      * {@inheritDoc (FormAssociated:interface).validate}
      */
@@ -5306,7 +5495,7 @@ const VFab = vue.defineComponent({
         },
         [
           this.$slots.default,
-          // @slot icon Slot to add an icon to fab.
+          // @slot icon The preferred way to add an icon to the component.
           handleNamedSlotV2("icon", this.$slots["icon"])
         ]
       );
@@ -5358,7 +5547,7 @@ const VFab = vue.defineComponent({
       [
         // @ts-ignore
         this.$slots.default && this.$slots.default(),
-        // @slot icon Slot to add an icon to fab.
+        // @slot icon The preferred way to add an icon to the component.
         handleNamedSlotV3("icon", this.$slots["icon"])
       ]
     );
@@ -5377,7 +5566,7 @@ const VFilePicker = vue.defineComponent({
      */
     disabled: { type: Boolean, default: void 0 },
     /**
-     * The error text for the form element.
+     * Provides a custom error message. Any current error state will be overridden.
      */
     errorText: { type: String, default: void 0 },
     /**
@@ -5385,11 +5574,12 @@ const VFilePicker = vue.defineComponent({
      */
     fileTooBigError: { type: String, default: void 0 },
     /**
-     * The helper text for the form element.
+     * Provides additional information to help the user enter the correct information.
+     * To add HTML to the helper text, use the helper-text slot instead.
      */
     helperText: { type: String, default: void 0 },
     /**
-     * The initial value of the form. This value sets the `value` property
+     * The default value of the element. This value sets the `value` property
      * only when the `value` property has not been explicitly set.
      */
     initialValue: { type: String, default: void 0 },
@@ -5439,11 +5629,7 @@ const VFilePicker = vue.defineComponent({
       default: void 0
     },
     /**
-     * The current value of the element. This property serves as a mechanism
-     * to set the `value` property through both property assignment and the
-     * .setAttribute() method. This is useful for setting the field's value
-     * in UI libraries that bind data through the .setAttribute() API
-     * and don't support IDL attribute binding.
+     * The current value of the element.
      */
     value: { type: String, default: void 0 }
   },
@@ -5488,6 +5674,12 @@ const VFilePicker = vue.defineComponent({
     acceptChanged(_oldValue, newValue) {
       return this.element?.acceptChanged(_oldValue, newValue);
     },
+    /**
+     * Return the current validity of the element.
+     */
+    checkValidity() {
+      return this.element?.checkValidity();
+    },
     fileTooBigErrorChanged(_oldValue, newValue) {
       return this.element?.fileTooBigErrorChanged(_oldValue, newValue);
     },
@@ -5521,6 +5713,13 @@ const VFilePicker = vue.defineComponent({
     removeAllFiles() {
       return this.element?.removeAllFiles();
     },
+    /**
+     * Return the current validity of the element.
+     * If false, fires an invalid event at the element.
+     */
+    reportValidity() {
+      return this.element?.reportValidity();
+    },
     singleFileChanged() {
       return this.element?.singleFileChanged();
     },
@@ -5788,6 +5987,10 @@ const VIcon = vue.defineComponent({
       type: String,
       default: void 0
     },
+    /**
+     * Provides a (screen reader only) descriptive label for the icon.
+     */
+    label: { type: String, default: void 0 },
     /**
      * Indicates which icon to resolve.
      * See the Vivid Icon Gallery for available icons: https://icons.vivid.vonage.com/
@@ -5848,6 +6051,7 @@ const VIcon = vue.defineComponent({
           ref: "element",
           attrs: {
             ...this.connotation !== void 0 ? { connotation: this.connotation } : {},
+            ...this.label !== void 0 ? { label: this.label } : {},
             ...this.name !== void 0 ? { name: this.name } : {},
             ...this.size !== void 0 ? { size: this.size } : {}
           },
@@ -5883,6 +6087,7 @@ const VIcon = vue.defineComponent({
         class: "vvd-component",
         ...handleVue3Props({
           ...this.connotation !== void 0 ? { "^connotation": this.connotation } : {},
+          ...this.label !== void 0 ? { "^label": this.label } : {},
           ...this.name !== void 0 ? { "^name": this.name } : {},
           ...this.size !== void 0 ? { "^size": this.size } : {}
         }),
@@ -6312,6 +6517,13 @@ const VMenuItem = vue.defineComponent({
       type: String,
       default: void 0
     },
+    /**
+     * Whether the menu item should behave as a checkbox or radio button.
+     */
+    controlType: {
+      type: String,
+      default: void 0
+    },
     /**
      * The disabled state of the element.
      */
@@ -6348,7 +6560,7 @@ const VMenuItem = vue.defineComponent({
      */
     "blur",
     /**
-     * Fires a custom 'change' event when a non-submenu item with a role of `menuitemcheckbox`, `menuitemradio`, or `menuitem` is invoked
+     * Fired when the item is triggered. Does not fire when a submenu is collapsed or expanded.
      * @type {CustomEvent<undefined>}
      */
     "change",
@@ -6358,7 +6570,7 @@ const VMenuItem = vue.defineComponent({
      */
     "click",
     /**
-     * Fires a custom 'expanded-change' event when the expanded state changes
+     * Fired when the expanded state changes.
      * @type {CustomEvent<HTMLElement>}
      */
     "expanded-change",
@@ -6405,6 +6617,7 @@ const VMenuItem = vue.defineComponent({
             ...this.checkTrailing !== void 0 ? { "check-trailing": this.checkTrailing } : {},
             ...(this.modelValue ?? this.checked) !== void 0 ? { checked: this.modelValue ?? this.checked } : {},
             ...this.connotation !== void 0 ? { connotation: this.connotation } : {},
+            ...this.controlType !== void 0 ? { "control-type": this.controlType } : {},
             ...this.disabled !== void 0 ? { disabled: this.disabled } : {},
             ...this.expanded !== void 0 ? { expanded: this.expanded } : {},
             ...this.icon !== void 0 ? { icon: this.icon } : {},
@@ -6462,6 +6675,7 @@ const VMenuItem = vue.defineComponent({
           ...this.checkTrailing !== void 0 && this.checkTrailing !== false ? { "^check-trailing": this.checkTrailing } : {},
           ...(this.modelValue ?? this.checked) !== void 0 && (this.modelValue ?? this.checked) !== false ? { "^checked": this.modelValue ?? this.checked } : {},
           ...this.connotation !== void 0 ? { "^connotation": this.connotation } : {},
+          ...this.controlType !== void 0 ? { "^control-type": this.controlType } : {},
           ...this.disabled !== void 0 && this.disabled !== false ? { "^disabled": this.disabled } : {},
           ...this.expanded !== void 0 && this.expanded !== false ? { "^expanded": this.expanded } : {},
           ...this.icon !== void 0 ? { "^icon": this.icon } : {},
@@ -6631,6 +6845,10 @@ const VNavDisclosure = vue.defineComponent({
       type: String,
       default: void 0
     },
+    /**
+     * Indicates there's a nested active nav-item within nav-disclosure
+     */
+    current: { type: Boolean, default: void 0 },
     /**
      * A decorative icon the custom element should have.
      * See the Vivid Icon Gallery for available icons: https://icons.vivid.vonage.com/
@@ -6697,6 +6915,7 @@ const VNavDisclosure = vue.defineComponent({
           attrs: {
             ...this.appearance !== void 0 ? { appearance: this.appearance } : {},
             ...this.connotation !== void 0 ? { connotation: this.connotation } : {},
+            ...this.current !== void 0 ? { current: this.current } : {},
             ...this.icon !== void 0 ? { icon: this.icon } : {},
             ...this.label !== void 0 ? { label: this.label } : {},
             ...this.open !== void 0 ? { open: this.open } : {}
@@ -6728,7 +6947,7 @@ const VNavDisclosure = vue.defineComponent({
         },
         [
           this.$slots.default,
-          // @slot icon Add an icon to the component.
+          // @slot icon The preferred way to add an icon to the component.
           handleNamedSlotV2("icon", this.$slots["icon"]),
           // @slot meta A slot to add additional content to the nav disclosure.
           handleNamedSlotV2("meta", this.$slots["meta"])
@@ -6743,6 +6962,7 @@ const VNavDisclosure = vue.defineComponent({
         ...handleVue3Props({
           ...this.appearance !== void 0 ? { "^appearance": this.appearance } : {},
           ...this.connotation !== void 0 ? { "^connotation": this.connotation } : {},
+          ...this.current !== void 0 && this.current !== false ? { "^current": this.current } : {},
           ...this.icon !== void 0 ? { "^icon": this.icon } : {},
           ...this.label !== void 0 ? { "^label": this.label } : {},
           ...this.open !== void 0 && this.open !== false ? { "^open": this.open } : {}
@@ -6772,7 +6992,7 @@ const VNavDisclosure = vue.defineComponent({
       [
         // @ts-ignore
         this.$slots.default && this.$slots.default(),
-        // @slot icon Add an icon to the component.
+        // @slot icon The preferred way to add an icon to the component.
         handleNamedSlotV3("icon", this.$slots["icon"]),
         // @slot meta A slot to add additional content to the nav disclosure.
         handleNamedSlotV3("meta", this.$slots["meta"])
@@ -6785,36 +7005,33 @@ const VNavItem = vue.defineComponent({
   name: "VNavItem",
   props: {
     /**
-     * The appearance Text-Anchor should have.
+     * Sets the nav item's appearance
      */
     appearance: {
       type: String,
       default: void 0
     },
     /**
-     * See https://www.w3.org/WAI/PF/aria/roles#link for more information
+     * Sets the connotation color of the selected nav item
      */
-    ariaExpanded: {
+    connotation: {
       type: String,
       default: void 0
     },
     /**
-     * The connotation Text-Anchor should have.
+     * Sets the nav item as a current
      */
-    connotation: {
-      type: String,
-      default: void 0
-    },
+    current: { type: Boolean, default: void 0 },
     /**
-     * The URL the hyperlink references. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a | <a> element for more information.
+     * 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.
      */
     download: { type: String, default: void 0 },
     /**
-     * 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.
+     * The URL the hyperlink references. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a | <a> element  for more information.
      */
     href: { type: String, default: void 0 },
     /**
-     * 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.
+     * 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.
      */
     hreflang: { type: String, default: void 0 },
     /**
@@ -6823,30 +7040,30 @@ const VNavItem = vue.defineComponent({
      */
     icon: { type: String, default: void 0 },
     /**
-     * See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a | <a> element for more information.
+     * See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a | <a> element  for more information.
      */
     ping: { type: String, default: void 0 },
     /**
-     * See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a | <a> element for more information.
+     * See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a | <a> element  for more information.
      */
     referrerpolicy: { type: String, default: void 0 },
     /**
-     * See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a | <a> element for more information.
+     * See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a | <a> element  for more information.
      */
     rel: { type: String, default: void 0 },
     /**
-     * See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a | <a> element for more information.
+     * See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a | <a> element  for more information.
      */
     target: {
       type: String,
       default: void 0
     },
     /**
-     * Indicates the text anchor's text.
+     * Text of the nav item
      */
     text: { type: String, default: void 0 },
     /**
-     * See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a | <a> element for more information.
+     * See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a | <a> element  for more information.
      */
     type: { type: String, default: void 0 }
   },
@@ -6882,11 +7099,7 @@ const VNavItem = vue.defineComponent({
      */
     "keyup"
   ],
-  methods: {
-    getBodyTemplate() {
-      return this.element?.getBodyTemplate();
-    }
-  },
+  methods: {},
   setup(props, ctx) {
     const componentName = registerComponent("nav-item", vivid.registerNavItem);
     const element = vue.ref(null);
@@ -6900,8 +7113,8 @@ const VNavItem = vue.defineComponent({
           ref: "element",
           attrs: {
             ...this.appearance !== void 0 ? { appearance: this.appearance } : {},
-            ...this.ariaExpanded !== void 0 ? { "aria-expanded": this.ariaExpanded } : {},
             ...this.connotation !== void 0 ? { connotation: this.connotation } : {},
+            ...this.current !== void 0 ? { current: this.current } : {},
             ...this.download !== void 0 ? { download: this.download } : {},
             ...this.href !== void 0 ? { href: this.href } : {},
             ...this.hreflang !== void 0 ? { hreflang: this.hreflang } : {},
@@ -6937,7 +7150,7 @@ const VNavItem = vue.defineComponent({
         },
         [
           this.$slots.default,
-          // @slot icon Add an icon to the component.
+          // @slot icon The preferred way to add an icon to the component.
           handleNamedSlotV2("icon", this.$slots["icon"]),
           // @slot meta A slot to add additional content to the nav item.
           handleNamedSlotV2("meta", this.$slots["meta"])
@@ -6951,8 +7164,8 @@ const VNavItem = vue.defineComponent({
         class: "vvd-component",
         ...handleVue3Props({
           ...this.appearance !== void 0 ? { "^appearance": this.appearance } : {},
-          ...this.ariaExpanded !== void 0 ? { "^aria-expanded": this.ariaExpanded } : {},
           ...this.connotation !== void 0 ? { "^connotation": this.connotation } : {},
+          ...this.current !== void 0 && this.current !== false ? { "^current": this.current } : {},
           ...this.download !== void 0 ? { "^download": this.download } : {},
           ...this.href !== void 0 ? { "^href": this.href } : {},
           ...this.hreflang !== void 0 ? { "^hreflang": this.hreflang } : {},
@@ -6986,7 +7199,7 @@ const VNavItem = vue.defineComponent({
       [
         // @ts-ignore
         this.$slots.default && this.$slots.default(),
-        // @slot icon Add an icon to the component.
+        // @slot icon The preferred way to add an icon to the component.
         handleNamedSlotV3("icon", this.$slots["icon"]),
         // @slot meta A slot to add additional content to the nav item.
         handleNamedSlotV3("meta", this.$slots["meta"])
@@ -7085,7 +7298,7 @@ const VNote = vue.defineComponent({
         },
         [
           this.$slots.default,
-          // @slot icon Add an icon to the component.
+          // @slot icon The preferred way to add an icon to the component.
           handleNamedSlotV2("icon", this.$slots["icon"])
         ]
       );
@@ -7122,7 +7335,7 @@ const VNote = vue.defineComponent({
       [
         // @ts-ignore
         this.$slots.default && this.$slots.default(),
-        // @slot icon Add an icon to the component.
+        // @slot icon The preferred way to add an icon to the component.
         handleNamedSlotV3("icon", this.$slots["icon"])
       ]
     );
@@ -7145,10 +7358,6 @@ const VNumberField = vue.defineComponent({
      * Indicates that this element should get focus after the page finishes loading. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefautofocus | autofocus HTML attribute for more information.
      */
     autofocus: { type: Boolean, default: void 0 },
-    /**
-     * Whether to show the character count.
-     */
-    charCount: { type: Boolean, default: void 0 },
     decrementButtonAriaLabel: {
       type: String,
       default: void 0
@@ -7158,11 +7367,12 @@ const VNumberField = vue.defineComponent({
      */
     disabled: { type: Boolean, default: void 0 },
     /**
-     * The error text for the form element.
+     * Provides a custom error message. Any current error state will be overridden.
      */
     errorText: { type: String, default: void 0 },
     /**
-     * The helper text for the form element.
+     * Provides additional information to help the user enter the correct information.
+     * To add HTML to the helper text, use the helper-text slot instead.
      */
     helperText: { type: String, default: void 0 },
     /**
@@ -7175,7 +7385,7 @@ const VNumberField = vue.defineComponent({
       default: void 0
     },
     /**
-     * The initial value of the form. This value sets the `value` property
+     * The default value of the element. This value sets the `value` property
      * only when the `value` property has not been explicitly set.
      */
     initialValue: { type: String, default: void 0 },
@@ -7236,23 +7446,15 @@ const VNumberField = vue.defineComponent({
      */
     step: { type: Number, default: void 0 },
     /**
-     * The success text for the form element.
+     * Provides a custom success message. Any current error state will be overridden.
      */
     successText: { type: String, default: void 0 },
     /**
-     * The current value of the element. This property serves as a mechanism
-     * to set the `value` property through both property assignment and the
-     * .setAttribute() method. This is useful for setting the field's value
-     * in UI libraries that bind data through the .setAttribute() API
-     * and don't support IDL attribute binding.
+     * The current value of the element.
      */
     value: { type: String, default: void 0 },
     /**
-     * The current value of the element. This property serves as a mechanism
-     * to set the `value` property through both property assignment and the
-     * .setAttribute() method. This is useful for setting the field's value
-     * in UI libraries that bind data through the .setAttribute() API
-     * and don't support IDL attribute binding.
+     * The current value of the element.
      */
     modelValue: { type: String, default: void 0 }
   },
@@ -7299,6 +7501,19 @@ const VNumberField = vue.defineComponent({
     "update:modelValue"
   ],
   methods: {
+    /**
+     * Return the current validity of the element.
+     */
+    checkValidity() {
+      return this.element?.checkValidity();
+    },
+    /**
+     * Return the current validity of the element.
+     * If false, fires an invalid event at the element.
+     */
+    reportValidity() {
+      return this.element?.reportValidity();
+    },
     /**
      * Selects all the text in the number field
      */
@@ -7345,7 +7560,6 @@ const VNumberField = vue.defineComponent({
             ...this.appearance !== void 0 ? { appearance: this.appearance } : {},
             ...this.autoComplete !== void 0 ? { autoComplete: this.autoComplete } : {},
             ...this.autofocus !== void 0 ? { autofocus: this.autofocus } : {},
-            ...this.charCount !== void 0 ? { "char-count": this.charCount } : {},
             ...this.decrementButtonAriaLabel !== void 0 ? { "decrement-button-aria-label": this.decrementButtonAriaLabel } : {},
             ...this.disabled !== void 0 ? { disabled: this.disabled } : {},
             ...this.errorText !== void 0 ? { "error-text": this.errorText } : {},
@@ -7412,7 +7626,6 @@ const VNumberField = vue.defineComponent({
           ...this.appearance !== void 0 ? { "^appearance": this.appearance } : {},
           ...this.autoComplete !== void 0 ? { "^autoComplete": this.autoComplete } : {},
           ...this.autofocus !== void 0 && this.autofocus !== false ? { "^autofocus": this.autofocus } : {},
-          ...this.charCount !== void 0 && this.charCount !== false ? { "^char-count": this.charCount } : {},
           ...this.decrementButtonAriaLabel !== void 0 ? { "^decrement-button-aria-label": this.decrementButtonAriaLabel } : {},
           ...this.disabled !== void 0 && this.disabled !== false ? { "^disabled": this.disabled } : {},
           ...this.errorText !== void 0 ? { "^error-text": this.errorText } : {},
@@ -7599,7 +7812,7 @@ const VOption = vue.defineComponent({
         },
         [
           this.$slots.default,
-          // @slot icon Slot to add an icon to the option.
+          // @slot icon The preferred way to add an icon to the component.
           handleNamedSlotV2("icon", this.$slots["icon"])
         ]
       );
@@ -7643,7 +7856,7 @@ const VOption = vue.defineComponent({
       [
         // @ts-ignore
         this.$slots.default && this.$slots.default(),
-        // @slot icon Slot to add an icon to the option.
+        // @slot icon The preferred way to add an icon to the component.
         handleNamedSlotV3("icon", this.$slots["icon"])
       ]
     );
@@ -7987,7 +8200,7 @@ const VProgressRing = vue.defineComponent({
     /**
      * The value of the progress
      */
-    value: { type: Boolean, default: void 0 }
+    value: { type: Number, default: void 0 }
   },
   emits: [
     /**
@@ -8080,7 +8293,7 @@ const VProgressRing = vue.defineComponent({
           ...this.min !== void 0 ? { "^min": this.min } : {},
           ...this.paused !== void 0 && this.paused !== false ? { "^paused": this.paused } : {},
           ...this.size !== void 0 ? { "^size": this.size } : {},
-          ...this.value !== void 0 && this.value !== false ? { "^value": this.value } : {}
+          ...this.value !== void 0 ? { "^value": this.value } : {}
         }),
         onBlur: (event) => {
           this.$emit("blur", event);
@@ -8114,11 +8327,7 @@ const VRadio = vue.defineComponent({
   props: {
     ariaLabel: { type: String, default: void 0 },
     /**
-     * The current checkedness of the element. This property serves as a mechanism
-     * to set the `checked` property through both property assignment and the
-     * .setAttribute() method. This is useful for setting the field's checkedness
-     * in UI libraries that bind data through the .setAttribute() API
-     * and don't support IDL attribute binding.
+     * The current checkedness of the element.
      */
     checked: { type: Boolean, default: void 0 },
     /**
@@ -8129,7 +8338,8 @@ const VRadio = vue.defineComponent({
       default: void 0
     },
     /**
-     * Provides the default checkedness of the input element
+     * The default checkedness of the element. This value sets the `checked` property
+     * only when the `checked` property has not been explicitly set.
      */
     defaultChecked: { type: Boolean, default: void 0 },
     /**
@@ -8137,16 +8347,20 @@ const VRadio = vue.defineComponent({
      */
     disabled: { type: Boolean, default: void 0 },
     /**
-     * The initial value of the form. This value sets the `value` property
+     * Provides a custom error message. Any current error state will be overridden.
+     */
+    errorText: { type: String, default: void 0 },
+    /**
+     * The default value of the element. This value sets the `value` property
      * only when the `value` property has not been explicitly set.
      */
     initialValue: { type: String, default: void 0 },
     /**
-     * Indicates the radio's label.
+     * The label for the form element.
      */
     label: { type: String, default: void 0 },
     /**
-     * The name of the radio. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefname | name attribute for more info.
+     * The name of the element. This element's value will be surfaced during form submission under the provided name.
      */
     name: { type: String, default: void 0 },
     /**
@@ -8158,11 +8372,7 @@ const VRadio = vue.defineComponent({
      */
     required: { type: Boolean, default: void 0 },
     /**
-     * The current value of the element. This property serves as a mechanism
-     * to set the `value` property through both property assignment and the
-     * .setAttribute() method. This is useful for setting the field's value
-     * in UI libraries that bind data through the .setAttribute() API
-     * and don't support IDL attribute binding.
+     * The current value of the element.
      */
     value: { type: String, default: void 0 }
   },
@@ -8203,7 +8413,21 @@ const VRadio = vue.defineComponent({
      */
     "keyup"
   ],
-  methods: {},
+  methods: {
+    /**
+     * Return the current validity of the element.
+     */
+    checkValidity() {
+      return this.element?.checkValidity();
+    },
+    /**
+     * Return the current validity of the element.
+     * If false, fires an invalid event at the element.
+     */
+    reportValidity() {
+      return this.element?.reportValidity();
+    }
+  },
   setup(props, ctx) {
     const componentName = registerComponent("radio", vivid.registerRadio);
     const element = vue.ref(null);
@@ -8221,6 +8445,7 @@ const VRadio = vue.defineComponent({
             ...this.connotation !== void 0 ? { connotation: this.connotation } : {},
             ...this.defaultChecked !== void 0 ? { checked: this.defaultChecked } : {},
             ...this.disabled !== void 0 ? { disabled: this.disabled } : {},
+            ...this.errorText !== void 0 ? { "error-text": this.errorText } : {},
             ...this.initialValue !== void 0 ? { value: this.initialValue } : {},
             ...this.label !== void 0 ? { label: this.label } : {},
             ...this.name !== void 0 ? { name: this.name } : {},
@@ -8267,6 +8492,7 @@ const VRadio = vue.defineComponent({
           ...this.connotation !== void 0 ? { "^connotation": this.connotation } : {},
           ...this.defaultChecked !== void 0 && this.defaultChecked !== false ? { "^checked": this.defaultChecked } : {},
           ...this.disabled !== void 0 && this.disabled !== false ? { "^disabled": this.disabled } : {},
+          ...this.errorText !== void 0 ? { "^error-text": this.errorText } : {},
           ...this.initialValue !== void 0 ? { "^value": this.initialValue } : {},
           ...this.label !== void 0 ? { "^label": this.label } : {},
           ...this.name !== void 0 ? { "^name": this.name } : {},
@@ -8315,8 +8541,14 @@ const VRadioGroup = vue.defineComponent({
      * Disables the radio group and child radios.
      */
     disabled: { type: Boolean, default: void 0 },
+    errorText: { type: String, default: void 0 },
+    /**
+     * Provides additional information to help the user enter the correct information.
+     * To add HTML to the helper text, use the helper-text slot instead.
+     */
+    helperText: { type: String, default: void 0 },
     /**
-     * Indicates the group's label.
+     * The label for the radio group
      */
     label: { type: String, default: void 0 },
     /**
@@ -8335,6 +8567,10 @@ const VRadioGroup = vue.defineComponent({
      * When true, the child radios will be immutable by user interaction. See https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly | readonly HTML attribute for more information.
      */
     readonly: { type: Boolean, default: void 0 },
+    /**
+     * When true, the radio group and all its radio buttons will be required
+     */
+    required: { type: Boolean, default: void 0 },
     /**
      * The value of the checked radio
      */
@@ -8404,10 +8640,13 @@ const VRadioGroup = vue.defineComponent({
           ref: "element",
           attrs: {
             ...this.disabled !== void 0 ? { disabled: this.disabled } : {},
+            ...this.errorText !== void 0 ? { "error-text": this.errorText } : {},
+            ...this.helperText !== void 0 ? { "helper-text": this.helperText } : {},
             ...this.label !== void 0 ? { label: this.label } : {},
             ...this.name !== void 0 ? { name: this.name } : {},
             ...this.orientation !== void 0 ? { orientation: this.orientation } : {},
             ...this.readonly !== void 0 ? { readonly: this.readonly } : {},
+            ...this.required !== void 0 ? { required: this.required } : {},
             ...(this.modelValue ?? this.value) !== void 0 ? { value: this.modelValue ?? this.value } : {}
           },
           class: "vvd-component",
@@ -8436,7 +8675,11 @@ const VRadioGroup = vue.defineComponent({
             }
           }
         },
-        [this.$slots.default]
+        [
+          this.$slots.default,
+          // @slot helper-text Describes how to use the text-field. Alternative to the `helper-text` attribute.
+          handleNamedSlotV2("helper-text", this.$slots["helper-text"])
+        ]
       );
     }
     return vue.h(
@@ -8446,10 +8689,13 @@ const VRadioGroup = vue.defineComponent({
         class: "vvd-component",
         ...handleVue3Props({
           ...this.disabled !== void 0 && this.disabled !== false ? { "^disabled": this.disabled } : {},
+          ...this.errorText !== void 0 ? { "^error-text": this.errorText } : {},
+          ...this.helperText !== void 0 ? { "^helper-text": this.helperText } : {},
           ...this.label !== void 0 ? { "^label": this.label } : {},
           ...this.name !== void 0 ? { "^name": this.name } : {},
           ...this.orientation !== void 0 ? { "^orientation": this.orientation } : {},
           ...this.readonly !== void 0 && this.readonly !== false ? { "^readonly": this.readonly } : {},
+          ...this.required !== void 0 && this.required !== false ? { "^required": this.required } : {},
           ...(this.modelValue ?? this.value) !== void 0 ? { "^value": this.modelValue ?? this.value } : {}
         }),
         onBlur: (event) => {
@@ -8477,7 +8723,9 @@ const VRadioGroup = vue.defineComponent({
       },
       [
         // @ts-ignore
-        this.$slots.default && this.$slots.default()
+        this.$slots.default && this.$slots.default(),
+        // @slot helper-text Describes how to use the text-field. Alternative to the `helper-text` attribute.
+        handleNamedSlotV3("helper-text", this.$slots["helper-text"])
       ]
     );
   }
@@ -8524,7 +8772,7 @@ const VRangeSlider = vue.defineComponent({
      */
     initialStart: { type: String, default: void 0 },
     /**
-     * The initial value of the form. This value sets the `value` property
+     * The default value of the element. This value sets the `value` property
      * only when the `value` property has not been explicitly set.
      */
     initialValue: { type: String, default: void 0 },
@@ -8576,11 +8824,7 @@ const VRangeSlider = vue.defineComponent({
      */
     step: { type: Number, default: void 0 },
     /**
-     * The current value of the element. This property serves as a mechanism
-     * to set the `value` property through both property assignment and the
-     * .setAttribute() method. This is useful for setting the field's value
-     * in UI libraries that bind data through the .setAttribute() API
-     * and don't support IDL attribute binding.
+     * The current value of the element.
      */
     value: { type: String, default: void 0 }
   },
@@ -8642,8 +8886,21 @@ const VRangeSlider = vue.defineComponent({
     "update:start"
   ],
   methods: {
+    /**
+     * Return the current validity of the element.
+     */
+    checkValidity() {
+      return this.element?.checkValidity();
+    },
     formResetCallback() {
       return this.element?.formResetCallback();
+    },
+    /**
+     * Return the current validity of the element.
+     * If false, fires an invalid event at the element.
+     */
+    reportValidity() {
+      return this.element?.reportValidity();
     }
   },
   setup(props, ctx) {
@@ -8821,12 +9078,18 @@ const VRichTextEditor = vue.defineComponent({
     "keyup"
   ],
   methods: {
+    addInlineImage(imageProps) {
+      return this.element?.addInlineImage(imageProps);
+    },
     focus() {
       return this.element?.focus();
     },
     placeholderChanged() {
       return this.element?.placeholderChanged();
     },
+    scrollToAttachments(additionalPixels) {
+      return this.element?.scrollToAttachments(additionalPixels);
+    },
     selectionEndChanged() {
       return this.element?.selectionEndChanged();
     },
@@ -8944,13 +9207,14 @@ const VSearchableSelect = vue.defineComponent({
      */
     disabled: { type: Boolean, default: void 0 },
     /**
-     * The error text for the form element.
+     * Provides a custom error message. Any current error state will be overridden.
      */
     errorText: { type: String, default: void 0 },
     externalTags: { type: Boolean, default: void 0 },
     fixedDropdown: { type: Boolean, default: void 0 },
     /**
-     * The helper text for the form element.
+     * Provides additional information to help the user enter the correct information.
+     * To add HTML to the helper text, use the helper-text slot instead.
      */
     helperText: { type: String, default: void 0 },
     /**
@@ -8963,7 +9227,7 @@ const VSearchableSelect = vue.defineComponent({
      */
     iconTrailing: { type: Boolean, default: void 0 },
     /**
-     * The initial value of the form. This value sets the `value` property
+     * The default value of the element. This value sets the `value` property
      * only when the `value` property has not been explicitly set.
      */
     initialValue: { type: String, default: void 0 },
@@ -8997,23 +9261,15 @@ const VSearchableSelect = vue.defineComponent({
     required: { type: Boolean, default: void 0 },
     shape: { type: String, default: void 0 },
     /**
-     * The success text for the form element.
+     * Provides a custom success message. Any current error state will be overridden.
      */
     successText: { type: String, default: void 0 },
     /**
-     * The current value of the element. This property serves as a mechanism
-     * to set the `value` property through both property assignment and the
-     * .setAttribute() method. This is useful for setting the field's value
-     * in UI libraries that bind data through the .setAttribute() API
-     * and don't support IDL attribute binding.
+     * The current value of the element.
      */
     value: { type: String, default: void 0 },
     /**
-     * The current value of the element. This property serves as a mechanism
-     * to set the `value` property through both property assignment and the
-     * .setAttribute() method. This is useful for setting the field's value
-     * in UI libraries that bind data through the .setAttribute() API
-     * and don't support IDL attribute binding.
+     * The current value of the element.
      */
     modelValue: { type: String, default: void 0 },
     /**
@@ -9073,7 +9329,21 @@ const VSearchableSelect = vue.defineComponent({
      */
     "update:values"
   ],
-  methods: {},
+  methods: {
+    /**
+     * Return the current validity of the element.
+     */
+    checkValidity() {
+      return this.element?.checkValidity();
+    },
+    /**
+     * Return the current validity of the element.
+     * If false, fires an invalid event at the element.
+     */
+    reportValidity() {
+      return this.element?.reportValidity();
+    }
+  },
   setup(props, ctx) {
     const componentName = registerComponent(
       "searchable-select",
@@ -9150,7 +9420,7 @@ const VSearchableSelect = vue.defineComponent({
           this.$slots.default,
           // @slot helper-text Describes how to use the component. Alternative to the `helper-text` attribute.
           handleNamedSlotV2("helper-text", this.$slots["helper-text"]),
-          // @slot icon Slot to add an icon to the control.
+          // @slot icon The preferred way to add an icon to the control.
           handleNamedSlotV2("icon", this.$slots["icon"]),
           // @slot loading-options Message that appears there are no options to display and the component is in a loading state.
           handleNamedSlotV2("loading-options", this.$slots["loading-options"]),
@@ -9226,7 +9496,7 @@ const VSearchableSelect = vue.defineComponent({
         this.$slots.default && this.$slots.default(),
         // @slot helper-text Describes how to use the component. Alternative to the `helper-text` attribute.
         handleNamedSlotV3("helper-text", this.$slots["helper-text"]),
-        // @slot icon Slot to add an icon to the control.
+        // @slot icon The preferred way to add an icon to the control.
         handleNamedSlotV3("icon", this.$slots["icon"]),
         // @slot loading-options Message that appears there are no options to display and the component is in a loading state.
         handleNamedSlotV3(
@@ -9263,7 +9533,7 @@ const VSelect = vue.defineComponent({
      */
     disabled: { type: Boolean, default: void 0 },
     /**
-     * The error text for the form element.
+     * Provides a custom error message. Any current error state will be overridden.
      */
     errorText: { type: String, default: void 0 },
     /**
@@ -9271,7 +9541,8 @@ const VSelect = vue.defineComponent({
      */
     fixedDropdown: { type: Boolean, default: void 0 },
     /**
-     * The helper text for the form element.
+     * Provides additional information to help the user enter the correct information.
+     * To add HTML to the helper text, use the helper-text slot instead.
      */
     helperText: { type: String, default: void 0 },
     /**
@@ -9284,7 +9555,7 @@ const VSelect = vue.defineComponent({
      */
     iconTrailing: { type: Boolean, default: void 0 },
     /**
-     * The initial value of the form. This value sets the `value` property
+     * The default value of the element. This value sets the `value` property
      * only when the `value` property has not been explicitly set.
      */
     initialValue: { type: String, default: void 0 },
@@ -9324,23 +9595,15 @@ const VSelect = vue.defineComponent({
      */
     shape: { type: String, default: void 0 },
     /**
-     * The success text for the form element.
+     * Provides a custom success message. Any current error state will be overridden.
      */
     successText: { type: String, default: void 0 },
     /**
-     * The current value of the element. This property serves as a mechanism
-     * to set the `value` property through both property assignment and the
-     * .setAttribute() method. This is useful for setting the field's value
-     * in UI libraries that bind data through the .setAttribute() API
-     * and don't support IDL attribute binding.
+     * The current value of the element.
      */
     value: { type: String, default: void 0 },
     /**
-     * The current value of the element. This property serves as a mechanism
-     * to set the `value` property through both property assignment and the
-     * .setAttribute() method. This is useful for setting the field's value
-     * in UI libraries that bind data through the .setAttribute() API
-     * and don't support IDL attribute binding.
+     * The current value of the element.
      */
     modelValue: { type: String, default: void 0 }
   },
@@ -9387,11 +9650,21 @@ const VSelect = vue.defineComponent({
     "update:modelValue"
   ],
   methods: {
+    /**
+     * Return the current validity of the element.
+     */
+    checkValidity() {
+      return this.element?.checkValidity();
+    },
     formResetCallback() {
       return this.element?.formResetCallback();
     },
-    labelChanged() {
-      return this.element?.labelChanged();
+    /**
+     * Return the current validity of the element.
+     * If false, fires an invalid event at the element.
+     */
+    reportValidity() {
+      return this.element?.reportValidity();
     },
     /**
      * Moves focus to the first selectable option.
@@ -9473,7 +9746,7 @@ const VSelect = vue.defineComponent({
           this.$slots.default,
           // @slot helper-text Describes how to use the select. Alternative to the `helper-text` attribute.
           handleNamedSlotV2("helper-text", this.$slots["helper-text"]),
-          // @slot icon Slot to add an icon to the select control.
+          // @slot icon The preferred way to add an icon to the select control.
           handleNamedSlotV2("icon", this.$slots["icon"]),
           // @slot meta Slot to add meta content to the select control.
           handleNamedSlotV2("meta", this.$slots["meta"])
@@ -9533,7 +9806,7 @@ const VSelect = vue.defineComponent({
         this.$slots.default && this.$slots.default(),
         // @slot helper-text Describes how to use the select. Alternative to the `helper-text` attribute.
         handleNamedSlotV3("helper-text", this.$slots["helper-text"]),
-        // @slot icon Slot to add an icon to the select control.
+        // @slot icon The preferred way to add an icon to the select control.
         handleNamedSlotV3("icon", this.$slots["icon"]),
         // @slot meta Slot to add meta content to the select control.
         handleNamedSlotV3("meta", this.$slots["meta"])
@@ -9549,9 +9822,6 @@ const VSelectableBox = vue.defineComponent({
      * Controls the checked state of the box
      */
     checked: { type: Boolean, default: void 0 },
-    /**
-     * DEPRECATED: Replaced by the clickable-box prop
-     */
     clickable: { type: Boolean, default: void 0 },
     /**
      * Makes the entire selectable box clickable
@@ -9898,7 +10168,7 @@ const VSlider = vue.defineComponent({
      */
     disabled: { type: Boolean, default: void 0 },
     /**
-     * The initial value of the form. This value sets the `value` property
+     * The default value of the element. This value sets the `value` property
      * only when the `value` property has not been explicitly set.
      */
     initialValue: { type: String, default: void 0 },
@@ -9946,19 +10216,11 @@ const VSlider = vue.defineComponent({
      */
     step: { type: Number, default: void 0 },
     /**
-     * The current value of the element. This property serves as a mechanism
-     * to set the `value` property through both property assignment and the
-     * .setAttribute() method. This is useful for setting the field's value
-     * in UI libraries that bind data through the .setAttribute() API
-     * and don't support IDL attribute binding.
+     * The current value of the element.
      */
     value: { type: String, default: void 0 },
     /**
-     * The current value of the element. This property serves as a mechanism
-     * to set the `value` property through both property assignment and the
-     * .setAttribute() method. This is useful for setting the field's value
-     * in UI libraries that bind data through the .setAttribute() API
-     * and don't support IDL attribute binding.
+     * The current value of the element.
      */
     modelValue: { type: String, default: void 0 }
   },
@@ -10005,6 +10267,12 @@ const VSlider = vue.defineComponent({
     "update:modelValue"
   ],
   methods: {
+    /**
+     * Return the current validity of the element.
+     */
+    checkValidity() {
+      return this.element?.checkValidity();
+    },
     /**
      * Decrement the value by the step
      */
@@ -10017,6 +10285,13 @@ const VSlider = vue.defineComponent({
     increment() {
       return this.element?.increment();
     },
+    /**
+     * Return the current validity of the element.
+     * If false, fires an invalid event at the element.
+     */
+    reportValidity() {
+      return this.element?.reportValidity();
+    },
     /**
      * Places the thumb based on the current value
      */
@@ -10288,7 +10563,7 @@ const VSplitButton = vue.defineComponent({
         },
         [
           this.$slots.default,
-          // @slot icon Add an icon to the component.
+          // @slot icon The preferred way to add an icon to the component.
           handleNamedSlotV2("icon", this.$slots["icon"])
         ]
       );
@@ -10337,7 +10612,7 @@ const VSplitButton = vue.defineComponent({
       [
         // @ts-ignore
         this.$slots.default && this.$slots.default(),
-        // @slot icon Add an icon to the component.
+        // @slot icon The preferred way to add an icon to the component.
         handleNamedSlotV3("icon", this.$slots["icon"])
       ]
     );
@@ -10352,19 +10627,11 @@ const VSwitch = vue.defineComponent({
   } : void 0,
   props: {
     /**
-     * The current checkedness of the element. This property serves as a mechanism
-     * to set the `checked` property through both property assignment and the
-     * .setAttribute() method. This is useful for setting the field's checkedness
-     * in UI libraries that bind data through the .setAttribute() API
-     * and don't support IDL attribute binding.
+     * The current checkedness of the element.
      */
     checked: { type: Boolean, default: void 0 },
     /**
-     * The current checkedness of the element. This property serves as a mechanism
-     * to set the `checked` property through both property assignment and the
-     * .setAttribute() method. This is useful for setting the field's checkedness
-     * in UI libraries that bind data through the .setAttribute() API
-     * and don't support IDL attribute binding.
+     * The current checkedness of the element.
      */
     modelValue: { type: Boolean, default: void 0 },
     /**
@@ -10375,7 +10642,8 @@ const VSwitch = vue.defineComponent({
       default: void 0
     },
     /**
-     * Provides the default checkedness of the input element
+     * The default checkedness of the element. This value sets the `checked` property
+     * only when the `checked` property has not been explicitly set.
      */
     defaultChecked: { type: Boolean, default: void 0 },
     /**
@@ -10383,7 +10651,7 @@ const VSwitch = vue.defineComponent({
      */
     disabled: { type: Boolean, default: void 0 },
     /**
-     * The initial value of the form. This value sets the `value` property
+     * The default value of the element. This value sets the `value` property
      * only when the `value` property has not been explicitly set.
      */
     initialValue: { type: String, default: void 0 },
@@ -10404,11 +10672,7 @@ const VSwitch = vue.defineComponent({
      */
     required: { type: Boolean, default: void 0 },
     /**
-     * The current value of the element. This property serves as a mechanism
-     * to set the `value` property through both property assignment and the
-     * .setAttribute() method. This is useful for setting the field's value
-     * in UI libraries that bind data through the .setAttribute() API
-     * and don't support IDL attribute binding.
+     * The current value of the element.
      */
     value: { type: String, default: void 0 }
   },
@@ -10454,7 +10718,21 @@ const VSwitch = vue.defineComponent({
      */
     "update:modelValue"
   ],
-  methods: {},
+  methods: {
+    /**
+     * Return the current validity of the element.
+     */
+    checkValidity() {
+      return this.element?.checkValidity();
+    },
+    /**
+     * Return the current validity of the element.
+     * If false, fires an invalid event at the element.
+     */
+    reportValidity() {
+      return this.element?.reportValidity();
+    }
+  },
   setup(props, ctx) {
     const componentName = registerComponent("switch", vivid.registerSwitch);
     const element = vue.ref(null);
@@ -10558,7 +10836,6 @@ const VSwitch = vue.defineComponent({
 const VTab = vue.defineComponent({
   name: "VTab",
   props: {
-    ariaSelected: { type: String, default: void 0 },
     /**
      * The connotation the tab should have.
      */
@@ -10584,7 +10861,7 @@ const VTab = vue.defineComponent({
      */
     label: { type: String, default: void 0 },
     /**
-     * Indicates the tab's label.
+     * Adds a close button
      */
     removable: { type: Boolean, default: void 0 },
     /**
@@ -10648,7 +10925,6 @@ const VTab = vue.defineComponent({
         {
           ref: "element",
           attrs: {
-            ...this.ariaSelected !== void 0 ? { "aria-selected": this.ariaSelected } : {},
             ...this.connotation !== void 0 ? { connotation: this.connotation } : {},
             ...this.disabled !== void 0 ? { disabled: this.disabled } : {},
             ...this.icon !== void 0 ? { icon: this.icon } : {},
@@ -10682,7 +10958,7 @@ const VTab = vue.defineComponent({
         },
         [
           this.$slots.default,
-          // @slot icon Slot to add an icon to tab.
+          // @slot icon The preferred way to add an icon to the component.
           handleNamedSlotV2("icon", this.$slots["icon"])
         ]
       );
@@ -10693,7 +10969,6 @@ const VTab = vue.defineComponent({
         ref: "element",
         class: "vvd-component",
         ...handleVue3Props({
-          ...this.ariaSelected !== void 0 ? { "^aria-selected": this.ariaSelected } : {},
           ...this.connotation !== void 0 ? { "^connotation": this.connotation } : {},
           ...this.disabled !== void 0 && this.disabled !== false ? { "^disabled": this.disabled } : {},
           ...this.icon !== void 0 ? { "^icon": this.icon } : {},
@@ -10725,7 +11000,7 @@ const VTab = vue.defineComponent({
       [
         // @ts-ignore
         this.$slots.default && this.$slots.default(),
-        // @slot icon Slot to add an icon to tab.
+        // @slot icon The preferred way to add an icon to the component.
         handleNamedSlotV3("icon", this.$slots["icon"])
       ]
     );
@@ -11168,7 +11443,7 @@ const VTag = vue.defineComponent({
         },
         [
           this.$slots.default,
-          // @slot icon Add an icon to the component.
+          // @slot icon The preferred way to add an icon to the component.
           handleNamedSlotV2("icon", this.$slots["icon"])
         ]
       );
@@ -11217,7 +11492,7 @@ const VTag = vue.defineComponent({
       [
         // @ts-ignore
         this.$slots.default && this.$slots.default(),
-        // @slot icon Add an icon to the component.
+        // @slot icon The preferred way to add an icon to the component.
         handleNamedSlotV3("icon", this.$slots["icon"])
       ]
     );
@@ -11341,7 +11616,7 @@ const VTextArea = vue.defineComponent({
      */
     autofocus: { type: Boolean, default: void 0 },
     /**
-     * Whether to show the character count.
+     * Use in combination with `maxlength` to display a character count.
      */
     charCount: { type: Boolean, default: void 0 },
     /**
@@ -11353,7 +11628,7 @@ const VTextArea = vue.defineComponent({
      */
     disabled: { type: Boolean, default: void 0 },
     /**
-     * The error text for the form element.
+     * Provides a custom error message. Any current error state will be overridden.
      */
     errorText: { type: String, default: void 0 },
     /**
@@ -11361,11 +11636,12 @@ const VTextArea = vue.defineComponent({
      */
     form: { type: String, default: void 0 },
     /**
-     * The helper text for the form element.
+     * Provides additional information to help the user enter the correct information.
+     * To add HTML to the helper text, use the helper-text slot instead.
      */
     helperText: { type: String, default: void 0 },
     /**
-     * The initial value of the form. This value sets the `value` property
+     * The default value of the element. This value sets the `value` property
      * only when the `value` property has not been explicitly set.
      */
     initialValue: { type: String, default: void 0 },
@@ -11386,7 +11662,7 @@ const VTextArea = vue.defineComponent({
      */
     minlength: { type: Number, default: void 0 },
     /**
-     * The name of the element.
+     * The name of the element. This element's value will be surfaced during form submission under the provided name.
      */
     name: { type: String, default: void 0 },
     /**
@@ -11418,23 +11694,15 @@ const VTextArea = vue.defineComponent({
      */
     spellcheck: { type: Boolean, default: void 0 },
     /**
-     * The success text for the form element.
+     * Provides a custom success message. Any current error state will be overridden.
      */
     successText: { type: String, default: void 0 },
     /**
-     * The current value of the element. This property serves as a mechanism
-     * to set the `value` property through both property assignment and the
-     * .setAttribute() method. This is useful for setting the field's value
-     * in UI libraries that bind data through the .setAttribute() API
-     * and don't support IDL attribute binding.
+     * The current value of the element.
      */
     value: { type: String, default: void 0 },
     /**
-     * The current value of the element. This property serves as a mechanism
-     * to set the `value` property through both property assignment and the
-     * .setAttribute() method. This is useful for setting the field's value
-     * in UI libraries that bind data through the .setAttribute() API
-     * and don't support IDL attribute binding.
+     * The current value of the element.
      */
     modelValue: { type: String, default: void 0 },
     /**
@@ -11488,6 +11756,19 @@ const VTextArea = vue.defineComponent({
     "update:modelValue"
   ],
   methods: {
+    /**
+     * Return the current validity of the element.
+     */
+    checkValidity() {
+      return this.element?.checkValidity();
+    },
+    /**
+     * Return the current validity of the element.
+     * If false, fires an invalid event at the element.
+     */
+    reportValidity() {
+      return this.element?.reportValidity();
+    },
     /**
      * Selects all the text in the text area
      */
@@ -11648,7 +11929,7 @@ const VTextField = vue.defineComponent({
      */
     autofocus: { type: Boolean, default: void 0 },
     /**
-     * Whether to show the character count.
+     * Use in combination with `maxlength` to display a character count.
      */
     charCount: { type: Boolean, default: void 0 },
     /**
@@ -11656,11 +11937,12 @@ const VTextField = vue.defineComponent({
      */
     disabled: { type: Boolean, default: void 0 },
     /**
-     * The error text for the form element.
+     * Provides a custom error message. Any current error state will be overridden.
      */
     errorText: { type: String, default: void 0 },
     /**
-     * The helper text for the form element.
+     * Provides additional information to help the user enter the correct information.
+     * To add HTML to the helper text, use the helper-text slot instead.
      */
     helperText: { type: String, default: void 0 },
     /**
@@ -11669,7 +11951,7 @@ const VTextField = vue.defineComponent({
      */
     icon: { type: String, default: void 0 },
     /**
-     * The initial value of the form. This value sets the `value` property
+     * The default value of the element. This value sets the `value` property
      * only when the `value` property has not been explicitly set.
      */
     initialValue: { type: String, default: void 0 },
@@ -11731,7 +12013,7 @@ const VTextField = vue.defineComponent({
      */
     spellcheck: { type: Boolean, default: void 0 },
     /**
-     * The success text for the form element.
+     * Provides a custom success message. Any current error state will be overridden.
      */
     successText: { type: String, default: void 0 },
     /**
@@ -11742,19 +12024,11 @@ const VTextField = vue.defineComponent({
       default: void 0
     },
     /**
-     * The current value of the element. This property serves as a mechanism
-     * to set the `value` property through both property assignment and the
-     * .setAttribute() method. This is useful for setting the field's value
-     * in UI libraries that bind data through the .setAttribute() API
-     * and don't support IDL attribute binding.
+     * The current value of the element.
      */
     value: { type: String, default: void 0 },
     /**
-     * The current value of the element. This property serves as a mechanism
-     * to set the `value` property through both property assignment and the
-     * .setAttribute() method. This is useful for setting the field's value
-     * in UI libraries that bind data through the .setAttribute() API
-     * and don't support IDL attribute binding.
+     * The current value of the element.
      */
     modelValue: { type: String, default: void 0 }
   },
@@ -11801,9 +12075,22 @@ const VTextField = vue.defineComponent({
     "update:modelValue"
   ],
   methods: {
+    /**
+     * Return the current validity of the element.
+     */
+    checkValidity() {
+      return this.element?.checkValidity();
+    },
     focus() {
       return this.element?.focus();
     },
+    /**
+     * Return the current validity of the element.
+     * If false, fires an invalid event at the element.
+     */
+    reportValidity() {
+      return this.element?.reportValidity();
+    },
     /**
      * Selects all the text in the text field
      */
@@ -11985,11 +12272,17 @@ const VTimePicker = vue.defineComponent({
      */
     disabled: { type: Boolean, default: void 0 },
     /**
-     * The error text for the form element.
+     * Provides a custom error message. Any current error state will be overridden.
      */
     errorText: { type: String, default: void 0 },
     /**
-     * The initial value of the date-picker.
+     * Provides additional information to help the user enter the correct information.
+     * To add HTML to the helper text, use the helper-text slot instead.
+     */
+    helperText: { type: String, default: void 0 },
+    /**
+     * The default value of the element. This value sets the `value` property
+     * only when the `value` property has not been explicitly set.
      */
     initialValue: { type: String, default: void 0 },
     /**
@@ -12025,11 +12318,11 @@ const VTimePicker = vue.defineComponent({
      */
     secondsStep: { type: Number, default: void 0 },
     /**
-     * The current value of the date-picker.
+     * The current value of the element.
      */
     value: { type: String, default: void 0 },
     /**
-     * The current value of the date-picker.
+     * The current value of the element.
      */
     modelValue: { type: String, default: void 0 }
   },
@@ -12075,7 +12368,21 @@ const VTimePicker = vue.defineComponent({
      */
     "update:modelValue"
   ],
-  methods: {},
+  methods: {
+    /**
+     * Return the current validity of the element.
+     */
+    checkValidity() {
+      return this.element?.checkValidity();
+    },
+    /**
+     * Return the current validity of the element.
+     * If false, fires an invalid event at the element.
+     */
+    reportValidity() {
+      return this.element?.reportValidity();
+    }
+  },
   setup(props, ctx) {
     const componentName = registerComponent("time-picker", vivid.registerTimePicker);
     const element = vue.ref(null);
@@ -12091,6 +12398,7 @@ const VTimePicker = vue.defineComponent({
             ...this.clock !== void 0 ? { clock: this.clock } : {},
             ...this.disabled !== void 0 ? { disabled: this.disabled } : {},
             ...this.errorText !== void 0 ? { "error-text": this.errorText } : {},
+            ...this.helperText !== void 0 ? { "helper-text": this.helperText } : {},
             ...this.initialValue !== void 0 ? { value: this.initialValue } : {},
             ...this.label !== void 0 ? { label: this.label } : {},
             ...this.max !== void 0 ? { max: this.max } : {},
@@ -12144,6 +12452,7 @@ const VTimePicker = vue.defineComponent({
           ...this.clock !== void 0 ? { "^clock": this.clock } : {},
           ...this.disabled !== void 0 && this.disabled !== false ? { "^disabled": this.disabled } : {},
           ...this.errorText !== void 0 ? { "^error-text": this.errorText } : {},
+          ...this.helperText !== void 0 ? { "^helper-text": this.helperText } : {},
           ...this.initialValue !== void 0 ? { "^value": this.initialValue } : {},
           ...this.label !== void 0 ? { "^label": this.label } : {},
           ...this.max !== void 0 ? { "^max": this.max } : {},
@@ -12617,7 +12926,7 @@ const VTreeItem = vue.defineComponent({
         },
         [
           this.$slots.default,
-          // @slot icon Add an icon to the component.
+          // @slot icon The preferred way to add an icon to the component.
           handleNamedSlotV2("icon", this.$slots["icon"]),
           // @slot item To specify a child tree item.
           handleNamedSlotV2("item", this.$slots["item"])
@@ -12664,7 +12973,7 @@ const VTreeItem = vue.defineComponent({
       [
         // @ts-ignore
         this.$slots.default && this.$slots.default(),
-        // @slot icon Add an icon to the component.
+        // @slot icon The preferred way to add an icon to the component.
         handleNamedSlotV3("icon", this.$slots["icon"]),
         // @slot item To specify a child tree item.
         handleNamedSlotV3("item", this.$slots["item"])
@@ -14225,17 +14534,17 @@ var Icon = /* @__PURE__ */ ((Icon2) => {
   return Icon2;
 })(Icon || {});
 
-const tokensThemeLightCss = "/**\n * Do not edit directly\n * Generated on Mon, 12 May 2025 14:52:14 GMT\n */\n/**\n * Do not edit directly\n * Generated on Mon, 12 May 2025 14:52:14 GMT\n */\n/**\n * Do not edit directly\n * Generated on Mon, 12 May 2025 14:52:14 GMT\n */\n/**\n * Do not edit directly\n * Generated on Mon, 12 May 2025 14:52:14 GMT\n */\n@property --vvd-size-density {\n  syntax: \"<integer>\";\n  inherits: true;\n  initial-value: 0;\n}\n@property --vvd-size-font-scale-base {\n  syntax: \"<length>\";\n  inherits: true;\n  initial-value: 16px;\n}\n.vvd-root, ::part(vvd-root) {\n  --vvd-color-scheme: light;\n  --vvd-color-canvas: #ffffff;\n  --vvd-color-canvas-text: #0d0d0d;\n  --vvd-color-neutral-50: #F2F2F2;\n  --vvd-color-neutral-100: #E6E6E6;\n  --vvd-color-neutral-200: #cccccc;\n  --vvd-color-neutral-300: #b3b3b3;\n  --vvd-color-neutral-400: #929292;\n  --vvd-color-neutral-500: #757575;\n  --vvd-color-neutral-600: #666666;\n  --vvd-color-neutral-700: #4d4d4d;\n  --vvd-color-neutral-800: #333333;\n  --vvd-color-neutral-900: #1a1a1a;\n  --vvd-color-neutral-950: #0d0d0d;\n  --vvd-color-cta-50: #f5f0fd;\n  --vvd-color-cta-100: #ece2fa;\n  --vvd-color-cta-200: #dcc1fc;\n  --vvd-color-cta-300: #cba1fa;\n  --vvd-color-cta-400: #b27bf2;\n  --vvd-color-cta-500: #9941ff;\n  --vvd-color-cta-600: #871eff;\n  --vvd-color-cta-700: #6405d1;\n  --vvd-color-cta-800: #440291;\n  --vvd-color-cta-900: #26044d;\n  --vvd-color-cta-950: #140623;\n  --vvd-color-warning-50: #FDF5D4;\n  --vvd-color-warning-100: #FDEAA0;\n  --vvd-color-warning-200: #FACC4B;\n  --vvd-color-warning-300: #fa9f00;\n  --vvd-color-warning-400: #e07902;\n  --vvd-color-warning-500: #be5702;\n  --vvd-color-warning-600: #A64C03;\n  --vvd-color-warning-700: #893000;\n  --vvd-color-warning-800: #522801;\n  --vvd-color-warning-900: #2A1502;\n  --vvd-color-warning-950: #150B01;\n  --vvd-color-information-50: #e8f4fb;\n  --vvd-color-information-100: #d3e9fc;\n  --vvd-color-information-200: #9dd2fe;\n  --vvd-color-information-300: #65baff;\n  --vvd-color-information-400: #2997f0;\n  --vvd-color-information-500: #0276d5;\n  --vvd-color-information-600: #0e65c2;\n  --vvd-color-information-700: #094a9e;\n  --vvd-color-information-800: #0e306d;\n  --vvd-color-information-900: #071939;\n  --vvd-color-information-950: #040d1d;\n  --vvd-color-announcement-50: #ffedfb;\n  --vvd-color-announcement-100: #ffdcf7;\n  --vvd-color-announcement-200: #f8b9e7;\n  --vvd-color-announcement-300: #fb8fd8;\n  --vvd-color-announcement-400: #e560bb;\n  --vvd-color-announcement-500: #d6219c;\n  --vvd-color-announcement-600: #bb1e89;\n  --vvd-color-announcement-700: #8f1669;\n  --vvd-color-announcement-800: #620256;\n  --vvd-color-announcement-900: #32082c;\n  --vvd-color-announcement-950: #1d031a;\n  --vvd-color-success-50: #e1f8e5;\n  --vvd-color-success-100: #cfeed4;\n  --vvd-color-success-200: #86e090;\n  --vvd-color-success-300: #53ca6a;\n  --vvd-color-success-400: #30a849;\n  --vvd-color-success-500: #1c8731;\n  --vvd-color-success-600: #167629;\n  --vvd-color-success-700: #155923;\n  --vvd-color-success-800: #183a1e;\n  --vvd-color-success-900: #0a1e11;\n  --vvd-color-success-950: #060f09;\n  --vvd-color-alert-50: #ffeef2;\n  --vvd-color-alert-100: #fedfdf;\n  --vvd-color-alert-200: #ffbbbb;\n  --vvd-color-alert-300: #fe9696;\n  --vvd-color-alert-400: #f75959;\n  --vvd-color-alert-500: #e61d1d;\n  --vvd-color-alert-600: #cd0d0d;\n  --vvd-color-alert-700: #9f0202;\n  --vvd-color-alert-800: #6e0000;\n  --vvd-color-alert-900: #3e0004;\n  --vvd-color-alert-950: #250004;\n  --vvd-color-neutral-tint-50: #f2f3f9;\n  --vvd-color-neutral-tint-100: #e5e5ec;\n  --vvd-color-neutral-tint-200: #cbcbd9;\n  --vvd-color-neutral-tint-300: #b2b1c7;\n  --vvd-color-neutral-tint-400: #908fae;\n  --vvd-color-neutral-tint-500: #727198;\n  --vvd-color-neutral-tint-600: #63628d;\n  --vvd-color-neutral-tint-700: #494977;\n  --vvd-color-neutral-tint-800: #31304f;\n  --vvd-color-neutral-tint-900: #191828;\n  --vvd-color-neutral-tint-950: #0d0c15;\n  --vvd-color-surface-0dp: #ffffff;\n  --vvd-color-surface-2dp: #ffffff;\n  --vvd-color-surface-4dp: #ffffff;\n  --vvd-color-surface-8dp: #ffffff;\n  --vvd-color-surface-12dp: #ffffff;\n  --vvd-color-surface-16dp: #ffffff;\n  --vvd-color-surface-24dp: #ffffff;\n  --vvd-shadow-surface-0dp: drop-shadow(1px 0px 0px #cccccc) drop-shadow(0px 1px 0px #cccccc) drop-shadow(0px -1px 0px #cccccc) drop-shadow(-1px 0px 0px #cccccc);\n  --vvd-shadow-surface-2dp: drop-shadow(0px 1px 4px #0000001a) drop-shadow(0px 1px 2px #0000000d) drop-shadow(0px 2px 1px #0000000d);\n  --vvd-shadow-surface-4dp: drop-shadow(0px 2px 8px #0000001a) drop-shadow(0px 2px 4px #0000000d) drop-shadow(0px 4px 2px #0000000d);\n  --vvd-shadow-surface-8dp: drop-shadow(0px 2px 16px #0000001a) drop-shadow(0px 8px 8px #0000000d) drop-shadow(0px 4px 4px #0000000d);\n  --vvd-shadow-surface-12dp: drop-shadow(0px 4px 24px #0000001a) drop-shadow(0px 12px 16px #0000000d) drop-shadow(0px 6px 8px #0000000d);\n  --vvd-shadow-surface-16dp: drop-shadow(0px 6px 32px #0000001a) drop-shadow(0px 16px 24px #0000000d) drop-shadow(0px 8px 12px #0000000d);\n  --vvd-shadow-surface-24dp: drop-shadow(0px 12px 48px #00000033) drop-shadow(0px 24px 32px #0000000d) drop-shadow(0px 12px 16px #0000000d);\n  --vvd-neutral-tint-shadow-surface-0dp: drop-shadow(1px 0px 0px #31304f1a) drop-shadow(0px 1px 0px #31304f1a) drop-shadow(0px -1px 0px #31304f1a) drop-shadow(-1px 0px 0px #31304f1a);\n  --vvd-neutral-tint-shadow-surface-2dp: drop-shadow(0px 1px 4px #26044d1a) drop-shadow(0px 1px 2px #26044d0d) drop-shadow(0px 2px 1px #26044d0d);\n  --vvd-neutral-tint-shadow-surface-4dp: drop-shadow(0px 2px 8px #26044d1a) drop-shadow(0px 2px 4px #26044d0d) drop-shadow(0px 4px 2px #26044d0d);\n  --vvd-neutral-tint-shadow-surface-8dp: drop-shadow(0px 2px 16px #26044d1a) drop-shadow(0px 8px 8px #26044d0d) drop-shadow(0px 4px 4px #26044d0d);\n  --vvd-neutral-tint-shadow-surface-12dp: drop-shadow(0px 4px 24px #26044d1a) drop-shadow(0px 12px 16px #26044d0d) drop-shadow(0px 6px 8px #26044d0d);\n  --vvd-neutral-tint-shadow-surface-16dp: drop-shadow(0px 6px 32px #26044d1a) drop-shadow(0px 16px 24px #26044d0d) drop-shadow(0px 8px 12px #26044d0d);\n  --vvd-neutral-tint-shadow-surface-24dp: drop-shadow(0px 12px 48px #26044d33) drop-shadow(0px 24px 32px #26044d0d) drop-shadow(0px 12px 16px #26044d0d);\n  --vvd-typography-headline: 500 calc(var(--vvd-size-font-scale-base, 16px) * 4.125)/1.3333333333333333 Montserrat;\n  --vvd-typography-subtitle: 500 calc(var(--vvd-size-font-scale-base, 16px) * 3.25)/1.3076923076923077 Montserrat;\n  --vvd-typography-heading-1: 500 calc(var(--vvd-size-font-scale-base, 16px) * 2.5)/1.3 Montserrat;\n  --vvd-typography-heading-2: 500 calc(var(--vvd-size-font-scale-base, 16px) * 2)/1.375 Montserrat;\n  --vvd-typography-heading-3: 500 calc(var(--vvd-size-font-scale-base, 16px) * 1.625)/1.3846153846153846 Montserrat;\n  --vvd-typography-heading-4: 500 calc(var(--vvd-size-font-scale-base, 16px) * 1.25)/1.4 Montserrat;\n  --vvd-typography-base: 400 calc(var(--vvd-size-font-scale-base, 16px) * 0.875)/1.4285714285714286 Montserrat;\n  --vvd-typography-base-bold: 600 calc(var(--vvd-size-font-scale-base, 16px) * 0.875)/1.4285714285714286 Montserrat;\n  --vvd-typography-base-code: 400 calc(var(--vvd-size-font-scale-base, 16px) * 0.875)/1.4285714285714286 Roboto Mono;\n  --vvd-typography-base-condensed: 400 calc(var(--vvd-size-font-scale-base, 16px) * 0.75)/1.3333333333333333 Montserrat;\n  --vvd-typography-base-condensed-bold: 600 calc(var(--vvd-size-font-scale-base, 16px) * 0.75)/1.3333333333333333 Montserrat;\n  --vvd-typography-base-extended: 400 calc(var(--vvd-size-font-scale-base, 16px))/1.5 Montserrat;\n  --vvd-typography-base-extended-bold: 600 calc(var(--vvd-size-font-scale-base, 16px))/1.5 Montserrat;\n}\n\n.vvd-theme-alternate, ::part(vvd-theme-alternate) {\n  --vvd-color-scheme: dark;\n  --vvd-color-canvas: #000000;\n  --vvd-color-canvas-text: #ffffff;\n  --vvd-color-neutral-50: #1a1a1a;\n  --vvd-color-neutral-100: #333333;\n  --vvd-color-neutral-200: #4d4d4d;\n  --vvd-color-neutral-300: #666666;\n  --vvd-color-neutral-400: #757575;\n  --vvd-color-neutral-500: #929292;\n  --vvd-color-neutral-600: #b3b3b3;\n  --vvd-color-neutral-700: #cccccc;\n  --vvd-color-neutral-800: #E6E6E6;\n  --vvd-color-neutral-900: #F2F2F2;\n  --vvd-color-neutral-950: #ffffff;\n  --vvd-color-cta-50: #26044d;\n  --vvd-color-cta-100: #440291;\n  --vvd-color-cta-200: #6405d1;\n  --vvd-color-cta-300: #871eff;\n  --vvd-color-cta-400: #9941ff;\n  --vvd-color-cta-500: #b27bf2;\n  --vvd-color-cta-600: #cba1fa;\n  --vvd-color-cta-700: #dcc1fc;\n  --vvd-color-cta-800: #ece2fa;\n  --vvd-color-cta-900: #f5f0fd;\n  --vvd-color-warning-50: #2A1502;\n  --vvd-color-warning-100: #522801;\n  --vvd-color-warning-200: #803807;\n  --vvd-color-warning-300: #A64C03;\n  --vvd-color-warning-400: #be5702;\n  --vvd-color-warning-500: #e07902;\n  --vvd-color-warning-600: #fa9f00;\n  --vvd-color-warning-700: #FACC4B;\n  --vvd-color-warning-800: #FDEAA0;\n  --vvd-color-warning-900: #FDF5D4;\n  --vvd-color-information-50: #071939;\n  --vvd-color-information-100: #0e306d;\n  --vvd-color-information-200: #094a9e;\n  --vvd-color-information-300: #0e65c2;\n  --vvd-color-information-400: #0276d5;\n  --vvd-color-information-500: #2997f0;\n  --vvd-color-information-600: #65baff;\n  --vvd-color-information-700: #9dd2fe;\n  --vvd-color-information-800: #d3e9fc;\n  --vvd-color-information-900: #e8f4fb;\n  --vvd-color-announcement-50: #32082c;\n  --vvd-color-announcement-100: #620256;\n  --vvd-color-announcement-200: #8f1669;\n  --vvd-color-announcement-300: #bb1e89;\n  --vvd-color-announcement-400: #d6219c;\n  --vvd-color-announcement-500: #e560bb;\n  --vvd-color-announcement-600: #fb8fd8;\n  --vvd-color-announcement-700: #f8b9e7;\n  --vvd-color-announcement-800: #ffdcf7;\n  --vvd-color-announcement-900: #ffedfb;\n  --vvd-color-success-50: #0a1e11;\n  --vvd-color-success-100: #183a1e;\n  --vvd-color-success-200: #155923;\n  --vvd-color-success-300: #167629;\n  --vvd-color-success-400: #1c8731;\n  --vvd-color-success-500: #30a849;\n  --vvd-color-success-600: #53ca6a;\n  --vvd-color-success-700: #86e090;\n  --vvd-color-success-800: #cfeed4;\n  --vvd-color-success-900: #e1f8e5;\n  --vvd-color-alert-50: #3e0004;\n  --vvd-color-alert-100: #6e0000;\n  --vvd-color-alert-200: #9f0202;\n  --vvd-color-alert-300: #cd0d0d;\n  --vvd-color-alert-400: #e61d1d;\n  --vvd-color-alert-500: #f75959;\n  --vvd-color-alert-600: #fe9696;\n  --vvd-color-alert-700: #ffbbbb;\n  --vvd-color-alert-800: #fedfdf;\n  --vvd-color-alert-900: #ffeef2;\n  --vvd-color-neutral-tint-50: #191828;\n  --vvd-color-neutral-tint-100: #31304f;\n  --vvd-color-neutral-tint-200: #494977;\n  --vvd-color-neutral-tint-300: #63628d;\n  --vvd-color-neutral-tint-400: #727198;\n  --vvd-color-neutral-tint-500: #908fae;\n  --vvd-color-neutral-tint-600: #b2b1c7;\n  --vvd-color-neutral-tint-700: #cbcbd9;\n  --vvd-color-neutral-tint-800: #e5e5ec;\n  --vvd-color-neutral-tint-900: #f2f3f9;\n  --vvd-color-surface-0dp: #0d0d0d;\n  --vvd-color-surface-2dp: linear-gradient(#ffffff0f, #ffffff0f), #0d0d0d;\n  --vvd-color-surface-4dp: linear-gradient(#ffffff14, #ffffff14), #0d0d0d;\n  --vvd-color-surface-8dp: linear-gradient(#ffffff1a, #ffffff1a), #0d0d0d;\n  --vvd-color-surface-12dp: linear-gradient(#ffffff1f, #ffffff1f), #0d0d0d;\n  --vvd-color-surface-16dp: linear-gradient(#ffffff24, #ffffff24), #0d0d0d;\n  --vvd-color-surface-24dp: linear-gradient(#ffffff29, #ffffff29), #0d0d0d;\n  --vvd-shadow-surface-0dp: drop-shadow(1px 0px 0px #4d4d4d) drop-shadow(0px 1px 0px #4d4d4d) drop-shadow(0px -1px 0px #4d4d4d) drop-shadow(-1px 0px 0px #4d4d4d);\n  --vvd-shadow-surface-2dp: drop-shadow(0px 1px 4px #00000040) drop-shadow(0px 1px 2px #00000040) drop-shadow(0px 2px 1px #00000040);\n  --vvd-shadow-surface-4dp: drop-shadow(0px 2px 8px #00000040) drop-shadow(0px 2px 4px #00000040) drop-shadow(0px 4px 4px #00000040);\n  --vvd-shadow-surface-8dp: drop-shadow(0px 2px 16px #00000040) drop-shadow(0px 8px 8px #00000040) drop-shadow(0px 4px 4px #00000040);\n  --vvd-shadow-surface-12dp: drop-shadow(0px 4px 24px #00000040) drop-shadow(0px 12px 16px #00000040) drop-shadow(0px 6px 8px #00000040);\n  --vvd-shadow-surface-16dp: drop-shadow(0px 6px 32px #00000040) drop-shadow(0px 16px 24px #00000040) drop-shadow(0px 8px 12px #00000040);\n  --vvd-shadow-surface-24dp: drop-shadow(0px 12px 48px #00000040) drop-shadow(0px 24px 32px #00000040) drop-shadow(0px 12px 16px #00000040);\n  --vvd-neutral-tint-color-surface-0dp: #191828;\n  --vvd-neutral-tint-color-surface-2dp: linear-gradient(#ffffff08, #ffffff08), #191828;\n  --vvd-neutral-tint-color-surface-4dp: linear-gradient(#ffffff0f, #ffffff0f), #191828;\n  --vvd-neutral-tint-color-surface-8dp: linear-gradient(#ffffff14, #ffffff14), #191828;\n  --vvd-neutral-tint-color-surface-12dp: linear-gradient(#ffffff1f, #ffffff1f), #191828;\n  --vvd-neutral-tint-color-surface-16dp: linear-gradient(#ffffff24, #ffffff24), #191828;\n  --vvd-neutral-tint-color-surface-24dp: linear-gradient(#ffffff33, #ffffff33), #191828;\n  --vvd-neutral-tint-shadow-surface-0dp: drop-shadow(1px 0px 0px #f2f3f91a) drop-shadow(0px 1px 0px #f2f3f91a) drop-shadow(0px -1px 0px #f2f3f91a) drop-shadow(-1px 0px 0px #f2f3f91a);\n  --vvd-neutral-tint-shadow-surface-2dp: none;\n  --vvd-neutral-tint-shadow-surface-4dp: none;\n  --vvd-neutral-tint-shadow-surface-8dp: none;\n  --vvd-neutral-tint-shadow-surface-12dp: none;\n  --vvd-neutral-tint-shadow-surface-16dp: none;\n  --vvd-neutral-tint-shadow-surface-24dp: none;\n}\n";
+const tokensThemeLightCss = "/**\n * Do not edit directly\n * Generated on Wed, 18 Jun 2025 09:28:14 GMT\n */\n/**\n * Do not edit directly\n * Generated on Wed, 18 Jun 2025 09:28:14 GMT\n */\n/**\n * Do not edit directly\n * Generated on Wed, 18 Jun 2025 09:28:14 GMT\n */\n/**\n * Do not edit directly\n * Generated on Wed, 18 Jun 2025 09:28:14 GMT\n */\n@property --vvd-size-density {\n  syntax: \"<integer>\";\n  inherits: true;\n  initial-value: 0;\n}\n@property --vvd-size-font-scale-base {\n  syntax: \"<length>\";\n  inherits: true;\n  initial-value: 16px;\n}\n.vvd-root, ::part(vvd-root) {\n  --vvd-color-scheme: light;\n  --vvd-color-canvas: #ffffff;\n  --vvd-color-canvas-text: #0d0d0d;\n  --vvd-color-neutral-50: #F2F2F2;\n  --vvd-color-neutral-100: #E6E6E6;\n  --vvd-color-neutral-200: #cccccc;\n  --vvd-color-neutral-300: #b3b3b3;\n  --vvd-color-neutral-400: #929292;\n  --vvd-color-neutral-500: #757575;\n  --vvd-color-neutral-600: #666666;\n  --vvd-color-neutral-700: #4d4d4d;\n  --vvd-color-neutral-800: #333333;\n  --vvd-color-neutral-900: #1a1a1a;\n  --vvd-color-neutral-950: #0d0d0d;\n  --vvd-color-cta-50: #f5f0fd;\n  --vvd-color-cta-100: #ece2fa;\n  --vvd-color-cta-200: #dcc1fc;\n  --vvd-color-cta-300: #cba1fa;\n  --vvd-color-cta-400: #b27bf2;\n  --vvd-color-cta-500: #9941ff;\n  --vvd-color-cta-600: #871eff;\n  --vvd-color-cta-700: #6405d1;\n  --vvd-color-cta-800: #440291;\n  --vvd-color-cta-900: #26044d;\n  --vvd-color-cta-950: #140623;\n  --vvd-color-warning-50: #FDF5D4;\n  --vvd-color-warning-100: #FDEAA0;\n  --vvd-color-warning-200: #FACC4B;\n  --vvd-color-warning-300: #fa9f00;\n  --vvd-color-warning-400: #e07902;\n  --vvd-color-warning-500: #be5702;\n  --vvd-color-warning-600: #A64C03;\n  --vvd-color-warning-700: #893000;\n  --vvd-color-warning-800: #522801;\n  --vvd-color-warning-900: #2A1502;\n  --vvd-color-warning-950: #150B01;\n  --vvd-color-information-50: #e8f4fb;\n  --vvd-color-information-100: #d3e9fc;\n  --vvd-color-information-200: #9dd2fe;\n  --vvd-color-information-300: #65baff;\n  --vvd-color-information-400: #2997f0;\n  --vvd-color-information-500: #0276d5;\n  --vvd-color-information-600: #0e65c2;\n  --vvd-color-information-700: #094a9e;\n  --vvd-color-information-800: #0e306d;\n  --vvd-color-information-900: #071939;\n  --vvd-color-information-950: #040d1d;\n  --vvd-color-announcement-50: #ffedfb;\n  --vvd-color-announcement-100: #ffdcf7;\n  --vvd-color-announcement-200: #f8b9e7;\n  --vvd-color-announcement-300: #fb8fd8;\n  --vvd-color-announcement-400: #e560bb;\n  --vvd-color-announcement-500: #d6219c;\n  --vvd-color-announcement-600: #bb1e89;\n  --vvd-color-announcement-700: #8f1669;\n  --vvd-color-announcement-800: #620256;\n  --vvd-color-announcement-900: #32082c;\n  --vvd-color-announcement-950: #1d031a;\n  --vvd-color-success-50: #e1f8e5;\n  --vvd-color-success-100: #cfeed4;\n  --vvd-color-success-200: #86e090;\n  --vvd-color-success-300: #53ca6a;\n  --vvd-color-success-400: #30a849;\n  --vvd-color-success-500: #1c8731;\n  --vvd-color-success-600: #167629;\n  --vvd-color-success-700: #155923;\n  --vvd-color-success-800: #183a1e;\n  --vvd-color-success-900: #0a1e11;\n  --vvd-color-success-950: #060f09;\n  --vvd-color-alert-50: #ffeef2;\n  --vvd-color-alert-100: #fedfdf;\n  --vvd-color-alert-200: #ffbbbb;\n  --vvd-color-alert-300: #fe9696;\n  --vvd-color-alert-400: #f75959;\n  --vvd-color-alert-500: #e61d1d;\n  --vvd-color-alert-600: #cd0d0d;\n  --vvd-color-alert-700: #9f0202;\n  --vvd-color-alert-800: #6e0000;\n  --vvd-color-alert-900: #3e0004;\n  --vvd-color-alert-950: #250004;\n  --vvd-color-neutral-tint-50: #f2f3f9;\n  --vvd-color-neutral-tint-100: #e5e5ec;\n  --vvd-color-neutral-tint-200: #cbcbd9;\n  --vvd-color-neutral-tint-300: #b2b1c7;\n  --vvd-color-neutral-tint-400: #908fae;\n  --vvd-color-neutral-tint-500: #727198;\n  --vvd-color-neutral-tint-600: #63628d;\n  --vvd-color-neutral-tint-700: #494977;\n  --vvd-color-neutral-tint-800: #31304f;\n  --vvd-color-neutral-tint-900: #191828;\n  --vvd-color-neutral-tint-950: #0d0c15;\n  --vvd-color-surface-0dp: #ffffff;\n  --vvd-color-surface-2dp: #ffffff;\n  --vvd-color-surface-4dp: #ffffff;\n  --vvd-color-surface-8dp: #ffffff;\n  --vvd-color-surface-12dp: #ffffff;\n  --vvd-color-surface-16dp: #ffffff;\n  --vvd-color-surface-24dp: #ffffff;\n  --vvd-shadow-surface-0dp: drop-shadow(1px 0px 0px #cccccc) drop-shadow(0px 1px 0px #cccccc) drop-shadow(0px -1px 0px #cccccc) drop-shadow(-1px 0px 0px #cccccc);\n  --vvd-shadow-surface-2dp: drop-shadow(0px 1px 4px #0000001a) drop-shadow(0px 1px 2px #0000000d) drop-shadow(0px 2px 1px #0000000d);\n  --vvd-shadow-surface-4dp: drop-shadow(0px 2px 8px #0000001a) drop-shadow(0px 2px 4px #0000000d) drop-shadow(0px 4px 2px #0000000d);\n  --vvd-shadow-surface-8dp: drop-shadow(0px 2px 16px #0000001a) drop-shadow(0px 8px 8px #0000000d) drop-shadow(0px 4px 4px #0000000d);\n  --vvd-shadow-surface-12dp: drop-shadow(0px 4px 24px #0000001a) drop-shadow(0px 12px 16px #0000000d) drop-shadow(0px 6px 8px #0000000d);\n  --vvd-shadow-surface-16dp: drop-shadow(0px 6px 32px #0000001a) drop-shadow(0px 16px 24px #0000000d) drop-shadow(0px 8px 12px #0000000d);\n  --vvd-shadow-surface-24dp: drop-shadow(0px 12px 48px #00000033) drop-shadow(0px 24px 32px #0000000d) drop-shadow(0px 12px 16px #0000000d);\n  --vvd-neutral-tint-shadow-surface-0dp: drop-shadow(1px 0px 0px #31304f1a) drop-shadow(0px 1px 0px #31304f1a) drop-shadow(0px -1px 0px #31304f1a) drop-shadow(-1px 0px 0px #31304f1a);\n  --vvd-neutral-tint-shadow-surface-2dp: drop-shadow(0px 1px 4px #26044d1a) drop-shadow(0px 1px 2px #26044d0d) drop-shadow(0px 2px 1px #26044d0d);\n  --vvd-neutral-tint-shadow-surface-4dp: drop-shadow(0px 2px 8px #26044d1a) drop-shadow(0px 2px 4px #26044d0d) drop-shadow(0px 4px 2px #26044d0d);\n  --vvd-neutral-tint-shadow-surface-8dp: drop-shadow(0px 2px 16px #26044d1a) drop-shadow(0px 8px 8px #26044d0d) drop-shadow(0px 4px 4px #26044d0d);\n  --vvd-neutral-tint-shadow-surface-12dp: drop-shadow(0px 4px 24px #26044d1a) drop-shadow(0px 12px 16px #26044d0d) drop-shadow(0px 6px 8px #26044d0d);\n  --vvd-neutral-tint-shadow-surface-16dp: drop-shadow(0px 6px 32px #26044d1a) drop-shadow(0px 16px 24px #26044d0d) drop-shadow(0px 8px 12px #26044d0d);\n  --vvd-neutral-tint-shadow-surface-24dp: drop-shadow(0px 12px 48px #26044d33) drop-shadow(0px 24px 32px #26044d0d) drop-shadow(0px 12px 16px #26044d0d);\n  --vvd-typography-headline: 500 calc(var(--vvd-size-font-scale-base, 16px) * 4.125)/1.3333333333333333 Montserrat;\n  --vvd-typography-subtitle: 500 calc(var(--vvd-size-font-scale-base, 16px) * 3.25)/1.3076923076923077 Montserrat;\n  --vvd-typography-heading-1: 500 calc(var(--vvd-size-font-scale-base, 16px) * 2.5)/1.3 Montserrat;\n  --vvd-typography-heading-2: 500 calc(var(--vvd-size-font-scale-base, 16px) * 2)/1.375 Montserrat;\n  --vvd-typography-heading-3: 500 calc(var(--vvd-size-font-scale-base, 16px) * 1.625)/1.3846153846153846 Montserrat;\n  --vvd-typography-heading-4: 500 calc(var(--vvd-size-font-scale-base, 16px) * 1.25)/1.4 Montserrat;\n  --vvd-typography-base: 400 calc(var(--vvd-size-font-scale-base, 16px) * 0.875)/1.4285714285714286 Montserrat;\n  --vvd-typography-base-bold: 600 calc(var(--vvd-size-font-scale-base, 16px) * 0.875)/1.4285714285714286 Montserrat;\n  --vvd-typography-base-code: 400 calc(var(--vvd-size-font-scale-base, 16px) * 0.875)/1.4285714285714286 Roboto Mono;\n  --vvd-typography-base-condensed: 400 calc(var(--vvd-size-font-scale-base, 16px) * 0.75)/1.3333333333333333 Montserrat;\n  --vvd-typography-base-condensed-bold: 600 calc(var(--vvd-size-font-scale-base, 16px) * 0.75)/1.3333333333333333 Montserrat;\n  --vvd-typography-base-extended: 400 calc(var(--vvd-size-font-scale-base, 16px))/1.5 Montserrat;\n  --vvd-typography-base-extended-bold: 600 calc(var(--vvd-size-font-scale-base, 16px))/1.5 Montserrat;\n}\n\n.vvd-theme-alternate, ::part(vvd-theme-alternate) {\n  --vvd-color-scheme: dark;\n  --vvd-color-canvas: #000000;\n  --vvd-color-canvas-text: #ffffff;\n  --vvd-color-neutral-50: #1a1a1a;\n  --vvd-color-neutral-100: #333333;\n  --vvd-color-neutral-200: #4d4d4d;\n  --vvd-color-neutral-300: #666666;\n  --vvd-color-neutral-400: #757575;\n  --vvd-color-neutral-500: #929292;\n  --vvd-color-neutral-600: #b3b3b3;\n  --vvd-color-neutral-700: #cccccc;\n  --vvd-color-neutral-800: #E6E6E6;\n  --vvd-color-neutral-900: #F2F2F2;\n  --vvd-color-neutral-950: #ffffff;\n  --vvd-color-cta-50: #26044d;\n  --vvd-color-cta-100: #440291;\n  --vvd-color-cta-200: #6405d1;\n  --vvd-color-cta-300: #871eff;\n  --vvd-color-cta-400: #9941ff;\n  --vvd-color-cta-500: #b27bf2;\n  --vvd-color-cta-600: #cba1fa;\n  --vvd-color-cta-700: #dcc1fc;\n  --vvd-color-cta-800: #ece2fa;\n  --vvd-color-cta-900: #f5f0fd;\n  --vvd-color-warning-50: #2A1502;\n  --vvd-color-warning-100: #522801;\n  --vvd-color-warning-200: #803807;\n  --vvd-color-warning-300: #A64C03;\n  --vvd-color-warning-400: #be5702;\n  --vvd-color-warning-500: #e07902;\n  --vvd-color-warning-600: #fa9f00;\n  --vvd-color-warning-700: #FACC4B;\n  --vvd-color-warning-800: #FDEAA0;\n  --vvd-color-warning-900: #FDF5D4;\n  --vvd-color-information-50: #071939;\n  --vvd-color-information-100: #0e306d;\n  --vvd-color-information-200: #094a9e;\n  --vvd-color-information-300: #0e65c2;\n  --vvd-color-information-400: #0276d5;\n  --vvd-color-information-500: #2997f0;\n  --vvd-color-information-600: #65baff;\n  --vvd-color-information-700: #9dd2fe;\n  --vvd-color-information-800: #d3e9fc;\n  --vvd-color-information-900: #e8f4fb;\n  --vvd-color-announcement-50: #32082c;\n  --vvd-color-announcement-100: #620256;\n  --vvd-color-announcement-200: #8f1669;\n  --vvd-color-announcement-300: #bb1e89;\n  --vvd-color-announcement-400: #d6219c;\n  --vvd-color-announcement-500: #e560bb;\n  --vvd-color-announcement-600: #fb8fd8;\n  --vvd-color-announcement-700: #f8b9e7;\n  --vvd-color-announcement-800: #ffdcf7;\n  --vvd-color-announcement-900: #ffedfb;\n  --vvd-color-success-50: #0a1e11;\n  --vvd-color-success-100: #183a1e;\n  --vvd-color-success-200: #155923;\n  --vvd-color-success-300: #167629;\n  --vvd-color-success-400: #1c8731;\n  --vvd-color-success-500: #30a849;\n  --vvd-color-success-600: #53ca6a;\n  --vvd-color-success-700: #86e090;\n  --vvd-color-success-800: #cfeed4;\n  --vvd-color-success-900: #e1f8e5;\n  --vvd-color-alert-50: #3e0004;\n  --vvd-color-alert-100: #6e0000;\n  --vvd-color-alert-200: #9f0202;\n  --vvd-color-alert-300: #cd0d0d;\n  --vvd-color-alert-400: #e61d1d;\n  --vvd-color-alert-500: #f75959;\n  --vvd-color-alert-600: #fe9696;\n  --vvd-color-alert-700: #ffbbbb;\n  --vvd-color-alert-800: #fedfdf;\n  --vvd-color-alert-900: #ffeef2;\n  --vvd-color-neutral-tint-50: #191828;\n  --vvd-color-neutral-tint-100: #31304f;\n  --vvd-color-neutral-tint-200: #494977;\n  --vvd-color-neutral-tint-300: #63628d;\n  --vvd-color-neutral-tint-400: #727198;\n  --vvd-color-neutral-tint-500: #908fae;\n  --vvd-color-neutral-tint-600: #b2b1c7;\n  --vvd-color-neutral-tint-700: #cbcbd9;\n  --vvd-color-neutral-tint-800: #e5e5ec;\n  --vvd-color-neutral-tint-900: #f2f3f9;\n  --vvd-color-surface-0dp: #0d0d0d;\n  --vvd-color-surface-2dp: linear-gradient(#ffffff0f, #ffffff0f), #0d0d0d;\n  --vvd-color-surface-4dp: linear-gradient(#ffffff14, #ffffff14), #0d0d0d;\n  --vvd-color-surface-8dp: linear-gradient(#ffffff1a, #ffffff1a), #0d0d0d;\n  --vvd-color-surface-12dp: linear-gradient(#ffffff1f, #ffffff1f), #0d0d0d;\n  --vvd-color-surface-16dp: linear-gradient(#ffffff24, #ffffff24), #0d0d0d;\n  --vvd-color-surface-24dp: linear-gradient(#ffffff29, #ffffff29), #0d0d0d;\n  --vvd-shadow-surface-0dp: drop-shadow(1px 0px 0px #4d4d4d) drop-shadow(0px 1px 0px #4d4d4d) drop-shadow(0px -1px 0px #4d4d4d) drop-shadow(-1px 0px 0px #4d4d4d);\n  --vvd-shadow-surface-2dp: drop-shadow(0px 1px 4px #00000040) drop-shadow(0px 1px 2px #00000040) drop-shadow(0px 2px 1px #00000040);\n  --vvd-shadow-surface-4dp: drop-shadow(0px 2px 8px #00000040) drop-shadow(0px 2px 4px #00000040) drop-shadow(0px 4px 4px #00000040);\n  --vvd-shadow-surface-8dp: drop-shadow(0px 2px 16px #00000040) drop-shadow(0px 8px 8px #00000040) drop-shadow(0px 4px 4px #00000040);\n  --vvd-shadow-surface-12dp: drop-shadow(0px 4px 24px #00000040) drop-shadow(0px 12px 16px #00000040) drop-shadow(0px 6px 8px #00000040);\n  --vvd-shadow-surface-16dp: drop-shadow(0px 6px 32px #00000040) drop-shadow(0px 16px 24px #00000040) drop-shadow(0px 8px 12px #00000040);\n  --vvd-shadow-surface-24dp: drop-shadow(0px 12px 48px #00000040) drop-shadow(0px 24px 32px #00000040) drop-shadow(0px 12px 16px #00000040);\n  --vvd-neutral-tint-color-surface-0dp: #191828;\n  --vvd-neutral-tint-color-surface-2dp: linear-gradient(#ffffff08, #ffffff08), #191828;\n  --vvd-neutral-tint-color-surface-4dp: linear-gradient(#ffffff0f, #ffffff0f), #191828;\n  --vvd-neutral-tint-color-surface-8dp: linear-gradient(#ffffff14, #ffffff14), #191828;\n  --vvd-neutral-tint-color-surface-12dp: linear-gradient(#ffffff1f, #ffffff1f), #191828;\n  --vvd-neutral-tint-color-surface-16dp: linear-gradient(#ffffff24, #ffffff24), #191828;\n  --vvd-neutral-tint-color-surface-24dp: linear-gradient(#ffffff33, #ffffff33), #191828;\n  --vvd-neutral-tint-shadow-surface-0dp: drop-shadow(1px 0px 0px #f2f3f91a) drop-shadow(0px 1px 0px #f2f3f91a) drop-shadow(0px -1px 0px #f2f3f91a) drop-shadow(-1px 0px 0px #f2f3f91a);\n  --vvd-neutral-tint-shadow-surface-2dp: none;\n  --vvd-neutral-tint-shadow-surface-4dp: none;\n  --vvd-neutral-tint-shadow-surface-8dp: none;\n  --vvd-neutral-tint-shadow-surface-12dp: none;\n  --vvd-neutral-tint-shadow-surface-16dp: none;\n  --vvd-neutral-tint-shadow-surface-24dp: none;\n}\n";
 
-const tokensThemeDarkCss = "/**\n * Do not edit directly\n * Generated on Mon, 12 May 2025 14:52:14 GMT\n */\n/**\n * Do not edit directly\n * Generated on Mon, 12 May 2025 14:52:14 GMT\n */\n/**\n * Do not edit directly\n * Generated on Mon, 12 May 2025 14:52:14 GMT\n */\n/**\n * Do not edit directly\n * Generated on Mon, 12 May 2025 14:52:14 GMT\n */\n@property --vvd-size-density {\n  syntax: \"<integer>\";\n  inherits: true;\n  initial-value: 0;\n}\n@property --vvd-size-font-scale-base {\n  syntax: \"<length>\";\n  inherits: true;\n  initial-value: 16px;\n}\n.vvd-root, ::part(vvd-root) {\n  --vvd-color-scheme: dark;\n  --vvd-color-canvas: #000000;\n  --vvd-color-canvas-text: #ffffff;\n  --vvd-color-neutral-50: #1a1a1a;\n  --vvd-color-neutral-100: #333333;\n  --vvd-color-neutral-200: #4d4d4d;\n  --vvd-color-neutral-300: #666666;\n  --vvd-color-neutral-400: #757575;\n  --vvd-color-neutral-500: #929292;\n  --vvd-color-neutral-600: #b3b3b3;\n  --vvd-color-neutral-700: #cccccc;\n  --vvd-color-neutral-800: #E6E6E6;\n  --vvd-color-neutral-900: #F2F2F2;\n  --vvd-color-neutral-950: #ffffff;\n  --vvd-color-cta-50: #26044d;\n  --vvd-color-cta-100: #440291;\n  --vvd-color-cta-200: #6405d1;\n  --vvd-color-cta-300: #871eff;\n  --vvd-color-cta-400: #9941ff;\n  --vvd-color-cta-500: #b27bf2;\n  --vvd-color-cta-600: #cba1fa;\n  --vvd-color-cta-700: #dcc1fc;\n  --vvd-color-cta-800: #ece2fa;\n  --vvd-color-cta-900: #f5f0fd;\n  --vvd-color-warning-50: #2A1502;\n  --vvd-color-warning-100: #522801;\n  --vvd-color-warning-200: #803807;\n  --vvd-color-warning-300: #A64C03;\n  --vvd-color-warning-400: #be5702;\n  --vvd-color-warning-500: #e07902;\n  --vvd-color-warning-600: #fa9f00;\n  --vvd-color-warning-700: #FACC4B;\n  --vvd-color-warning-800: #FDEAA0;\n  --vvd-color-warning-900: #FDF5D4;\n  --vvd-color-information-50: #071939;\n  --vvd-color-information-100: #0e306d;\n  --vvd-color-information-200: #094a9e;\n  --vvd-color-information-300: #0e65c2;\n  --vvd-color-information-400: #0276d5;\n  --vvd-color-information-500: #2997f0;\n  --vvd-color-information-600: #65baff;\n  --vvd-color-information-700: #9dd2fe;\n  --vvd-color-information-800: #d3e9fc;\n  --vvd-color-information-900: #e8f4fb;\n  --vvd-color-announcement-50: #32082c;\n  --vvd-color-announcement-100: #620256;\n  --vvd-color-announcement-200: #8f1669;\n  --vvd-color-announcement-300: #bb1e89;\n  --vvd-color-announcement-400: #d6219c;\n  --vvd-color-announcement-500: #e560bb;\n  --vvd-color-announcement-600: #fb8fd8;\n  --vvd-color-announcement-700: #f8b9e7;\n  --vvd-color-announcement-800: #ffdcf7;\n  --vvd-color-announcement-900: #ffedfb;\n  --vvd-color-success-50: #0a1e11;\n  --vvd-color-success-100: #183a1e;\n  --vvd-color-success-200: #155923;\n  --vvd-color-success-300: #167629;\n  --vvd-color-success-400: #1c8731;\n  --vvd-color-success-500: #30a849;\n  --vvd-color-success-600: #53ca6a;\n  --vvd-color-success-700: #86e090;\n  --vvd-color-success-800: #cfeed4;\n  --vvd-color-success-900: #e1f8e5;\n  --vvd-color-alert-50: #3e0004;\n  --vvd-color-alert-100: #6e0000;\n  --vvd-color-alert-200: #9f0202;\n  --vvd-color-alert-300: #cd0d0d;\n  --vvd-color-alert-400: #e61d1d;\n  --vvd-color-alert-500: #f75959;\n  --vvd-color-alert-600: #fe9696;\n  --vvd-color-alert-700: #ffbbbb;\n  --vvd-color-alert-800: #fedfdf;\n  --vvd-color-alert-900: #ffeef2;\n  --vvd-color-neutral-tint-50: #191828;\n  --vvd-color-neutral-tint-100: #31304f;\n  --vvd-color-neutral-tint-200: #494977;\n  --vvd-color-neutral-tint-300: #63628d;\n  --vvd-color-neutral-tint-400: #727198;\n  --vvd-color-neutral-tint-500: #908fae;\n  --vvd-color-neutral-tint-600: #b2b1c7;\n  --vvd-color-neutral-tint-700: #cbcbd9;\n  --vvd-color-neutral-tint-800: #e5e5ec;\n  --vvd-color-neutral-tint-900: #f2f3f9;\n  --vvd-color-surface-0dp: #0d0d0d;\n  --vvd-color-surface-2dp: linear-gradient(#ffffff0f, #ffffff0f), #0d0d0d;\n  --vvd-color-surface-4dp: linear-gradient(#ffffff14, #ffffff14), #0d0d0d;\n  --vvd-color-surface-8dp: linear-gradient(#ffffff1a, #ffffff1a), #0d0d0d;\n  --vvd-color-surface-12dp: linear-gradient(#ffffff1f, #ffffff1f), #0d0d0d;\n  --vvd-color-surface-16dp: linear-gradient(#ffffff24, #ffffff24), #0d0d0d;\n  --vvd-color-surface-24dp: linear-gradient(#ffffff29, #ffffff29), #0d0d0d;\n  --vvd-shadow-surface-0dp: drop-shadow(1px 0px 0px #4d4d4d) drop-shadow(0px 1px 0px #4d4d4d) drop-shadow(0px -1px 0px #4d4d4d) drop-shadow(-1px 0px 0px #4d4d4d);\n  --vvd-shadow-surface-2dp: drop-shadow(0px 1px 4px #00000040) drop-shadow(0px 1px 2px #00000040) drop-shadow(0px 2px 1px #00000040);\n  --vvd-shadow-surface-4dp: drop-shadow(0px 2px 8px #00000040) drop-shadow(0px 2px 4px #00000040) drop-shadow(0px 4px 4px #00000040);\n  --vvd-shadow-surface-8dp: drop-shadow(0px 2px 16px #00000040) drop-shadow(0px 8px 8px #00000040) drop-shadow(0px 4px 4px #00000040);\n  --vvd-shadow-surface-12dp: drop-shadow(0px 4px 24px #00000040) drop-shadow(0px 12px 16px #00000040) drop-shadow(0px 6px 8px #00000040);\n  --vvd-shadow-surface-16dp: drop-shadow(0px 6px 32px #00000040) drop-shadow(0px 16px 24px #00000040) drop-shadow(0px 8px 12px #00000040);\n  --vvd-shadow-surface-24dp: drop-shadow(0px 12px 48px #00000040) drop-shadow(0px 24px 32px #00000040) drop-shadow(0px 12px 16px #00000040);\n  --vvd-neutral-tint-color-surface-0dp: #191828;\n  --vvd-neutral-tint-color-surface-2dp: linear-gradient(#ffffff08, #ffffff08), #191828;\n  --vvd-neutral-tint-color-surface-4dp: linear-gradient(#ffffff0f, #ffffff0f), #191828;\n  --vvd-neutral-tint-color-surface-8dp: linear-gradient(#ffffff14, #ffffff14), #191828;\n  --vvd-neutral-tint-color-surface-12dp: linear-gradient(#ffffff1f, #ffffff1f), #191828;\n  --vvd-neutral-tint-color-surface-16dp: linear-gradient(#ffffff24, #ffffff24), #191828;\n  --vvd-neutral-tint-color-surface-24dp: linear-gradient(#ffffff33, #ffffff33), #191828;\n  --vvd-neutral-tint-shadow-surface-0dp: drop-shadow(1px 0px 0px #f2f3f91a) drop-shadow(0px 1px 0px #f2f3f91a) drop-shadow(0px -1px 0px #f2f3f91a) drop-shadow(-1px 0px 0px #f2f3f91a);\n  --vvd-neutral-tint-shadow-surface-2dp: none;\n  --vvd-neutral-tint-shadow-surface-4dp: none;\n  --vvd-neutral-tint-shadow-surface-8dp: none;\n  --vvd-neutral-tint-shadow-surface-12dp: none;\n  --vvd-neutral-tint-shadow-surface-16dp: none;\n  --vvd-neutral-tint-shadow-surface-24dp: none;\n  --vvd-typography-headline: 500 calc(var(--vvd-size-font-scale-base, 16px) * 4.125)/1.3333333333333333 Montserrat;\n  --vvd-typography-subtitle: 500 calc(var(--vvd-size-font-scale-base, 16px) * 3.25)/1.3076923076923077 Montserrat;\n  --vvd-typography-heading-1: 500 calc(var(--vvd-size-font-scale-base, 16px) * 2.5)/1.3 Montserrat;\n  --vvd-typography-heading-2: 500 calc(var(--vvd-size-font-scale-base, 16px) * 2)/1.375 Montserrat;\n  --vvd-typography-heading-3: 500 calc(var(--vvd-size-font-scale-base, 16px) * 1.625)/1.3846153846153846 Montserrat;\n  --vvd-typography-heading-4: 500 calc(var(--vvd-size-font-scale-base, 16px) * 1.25)/1.4 Montserrat;\n  --vvd-typography-base: 400 calc(var(--vvd-size-font-scale-base, 16px) * 0.875)/1.4285714285714286 Montserrat;\n  --vvd-typography-base-bold: 600 calc(var(--vvd-size-font-scale-base, 16px) * 0.875)/1.4285714285714286 Montserrat;\n  --vvd-typography-base-code: 400 calc(var(--vvd-size-font-scale-base, 16px) * 0.875)/1.4285714285714286 Roboto Mono;\n  --vvd-typography-base-condensed: 400 calc(var(--vvd-size-font-scale-base, 16px) * 0.75)/1.3333333333333333 Montserrat;\n  --vvd-typography-base-condensed-bold: 600 calc(var(--vvd-size-font-scale-base, 16px) * 0.75)/1.3333333333333333 Montserrat;\n  --vvd-typography-base-extended: 400 calc(var(--vvd-size-font-scale-base, 16px))/1.5 Montserrat;\n  --vvd-typography-base-extended-bold: 600 calc(var(--vvd-size-font-scale-base, 16px))/1.5 Montserrat;\n}\n\n.vvd-theme-alternate, ::part(vvd-theme-alternate) {\n  --vvd-color-scheme: light;\n  --vvd-color-canvas: #ffffff;\n  --vvd-color-canvas-text: #0d0d0d;\n  --vvd-color-neutral-50: #F2F2F2;\n  --vvd-color-neutral-100: #E6E6E6;\n  --vvd-color-neutral-200: #cccccc;\n  --vvd-color-neutral-300: #b3b3b3;\n  --vvd-color-neutral-400: #929292;\n  --vvd-color-neutral-500: #757575;\n  --vvd-color-neutral-600: #666666;\n  --vvd-color-neutral-700: #4d4d4d;\n  --vvd-color-neutral-800: #333333;\n  --vvd-color-neutral-900: #1a1a1a;\n  --vvd-color-neutral-950: #0d0d0d;\n  --vvd-color-cta-50: #f5f0fd;\n  --vvd-color-cta-100: #ece2fa;\n  --vvd-color-cta-200: #dcc1fc;\n  --vvd-color-cta-300: #cba1fa;\n  --vvd-color-cta-400: #b27bf2;\n  --vvd-color-cta-500: #9941ff;\n  --vvd-color-cta-600: #871eff;\n  --vvd-color-cta-700: #6405d1;\n  --vvd-color-cta-800: #440291;\n  --vvd-color-cta-900: #26044d;\n  --vvd-color-cta-950: #140623;\n  --vvd-color-warning-50: #FDF5D4;\n  --vvd-color-warning-100: #FDEAA0;\n  --vvd-color-warning-200: #FACC4B;\n  --vvd-color-warning-300: #fa9f00;\n  --vvd-color-warning-400: #e07902;\n  --vvd-color-warning-500: #be5702;\n  --vvd-color-warning-600: #A64C03;\n  --vvd-color-warning-700: #893000;\n  --vvd-color-warning-800: #522801;\n  --vvd-color-warning-900: #2A1502;\n  --vvd-color-warning-950: #150B01;\n  --vvd-color-information-50: #e8f4fb;\n  --vvd-color-information-100: #d3e9fc;\n  --vvd-color-information-200: #9dd2fe;\n  --vvd-color-information-300: #65baff;\n  --vvd-color-information-400: #2997f0;\n  --vvd-color-information-500: #0276d5;\n  --vvd-color-information-600: #0e65c2;\n  --vvd-color-information-700: #094a9e;\n  --vvd-color-information-800: #0e306d;\n  --vvd-color-information-900: #071939;\n  --vvd-color-information-950: #040d1d;\n  --vvd-color-announcement-50: #ffedfb;\n  --vvd-color-announcement-100: #ffdcf7;\n  --vvd-color-announcement-200: #f8b9e7;\n  --vvd-color-announcement-300: #fb8fd8;\n  --vvd-color-announcement-400: #e560bb;\n  --vvd-color-announcement-500: #d6219c;\n  --vvd-color-announcement-600: #bb1e89;\n  --vvd-color-announcement-700: #8f1669;\n  --vvd-color-announcement-800: #620256;\n  --vvd-color-announcement-900: #32082c;\n  --vvd-color-announcement-950: #1d031a;\n  --vvd-color-success-50: #e1f8e5;\n  --vvd-color-success-100: #cfeed4;\n  --vvd-color-success-200: #86e090;\n  --vvd-color-success-300: #53ca6a;\n  --vvd-color-success-400: #30a849;\n  --vvd-color-success-500: #1c8731;\n  --vvd-color-success-600: #167629;\n  --vvd-color-success-700: #155923;\n  --vvd-color-success-800: #183a1e;\n  --vvd-color-success-900: #0a1e11;\n  --vvd-color-success-950: #060f09;\n  --vvd-color-alert-50: #ffeef2;\n  --vvd-color-alert-100: #fedfdf;\n  --vvd-color-alert-200: #ffbbbb;\n  --vvd-color-alert-300: #fe9696;\n  --vvd-color-alert-400: #f75959;\n  --vvd-color-alert-500: #e61d1d;\n  --vvd-color-alert-600: #cd0d0d;\n  --vvd-color-alert-700: #9f0202;\n  --vvd-color-alert-800: #6e0000;\n  --vvd-color-alert-900: #3e0004;\n  --vvd-color-alert-950: #250004;\n  --vvd-color-neutral-tint-50: #f2f3f9;\n  --vvd-color-neutral-tint-100: #e5e5ec;\n  --vvd-color-neutral-tint-200: #cbcbd9;\n  --vvd-color-neutral-tint-300: #b2b1c7;\n  --vvd-color-neutral-tint-400: #908fae;\n  --vvd-color-neutral-tint-500: #727198;\n  --vvd-color-neutral-tint-600: #63628d;\n  --vvd-color-neutral-tint-700: #494977;\n  --vvd-color-neutral-tint-800: #31304f;\n  --vvd-color-neutral-tint-900: #191828;\n  --vvd-color-neutral-tint-950: #0d0c15;\n  --vvd-color-surface-0dp: #ffffff;\n  --vvd-color-surface-2dp: #ffffff;\n  --vvd-color-surface-4dp: #ffffff;\n  --vvd-color-surface-8dp: #ffffff;\n  --vvd-color-surface-12dp: #ffffff;\n  --vvd-color-surface-16dp: #ffffff;\n  --vvd-color-surface-24dp: #ffffff;\n  --vvd-shadow-surface-0dp: drop-shadow(1px 0px 0px #cccccc) drop-shadow(0px 1px 0px #cccccc) drop-shadow(0px -1px 0px #cccccc) drop-shadow(-1px 0px 0px #cccccc);\n  --vvd-shadow-surface-2dp: drop-shadow(0px 1px 4px #0000001a) drop-shadow(0px 1px 2px #0000000d) drop-shadow(0px 2px 1px #0000000d);\n  --vvd-shadow-surface-4dp: drop-shadow(0px 2px 8px #0000001a) drop-shadow(0px 2px 4px #0000000d) drop-shadow(0px 4px 2px #0000000d);\n  --vvd-shadow-surface-8dp: drop-shadow(0px 2px 16px #0000001a) drop-shadow(0px 8px 8px #0000000d) drop-shadow(0px 4px 4px #0000000d);\n  --vvd-shadow-surface-12dp: drop-shadow(0px 4px 24px #0000001a) drop-shadow(0px 12px 16px #0000000d) drop-shadow(0px 6px 8px #0000000d);\n  --vvd-shadow-surface-16dp: drop-shadow(0px 6px 32px #0000001a) drop-shadow(0px 16px 24px #0000000d) drop-shadow(0px 8px 12px #0000000d);\n  --vvd-shadow-surface-24dp: drop-shadow(0px 12px 48px #00000033) drop-shadow(0px 24px 32px #0000000d) drop-shadow(0px 12px 16px #0000000d);\n  --vvd-neutral-tint-shadow-surface-0dp: drop-shadow(1px 0px 0px #31304f1a) drop-shadow(0px 1px 0px #31304f1a) drop-shadow(0px -1px 0px #31304f1a) drop-shadow(-1px 0px 0px #31304f1a);\n  --vvd-neutral-tint-shadow-surface-2dp: drop-shadow(0px 1px 4px #26044d1a) drop-shadow(0px 1px 2px #26044d0d) drop-shadow(0px 2px 1px #26044d0d);\n  --vvd-neutral-tint-shadow-surface-4dp: drop-shadow(0px 2px 8px #26044d1a) drop-shadow(0px 2px 4px #26044d0d) drop-shadow(0px 4px 2px #26044d0d);\n  --vvd-neutral-tint-shadow-surface-8dp: drop-shadow(0px 2px 16px #26044d1a) drop-shadow(0px 8px 8px #26044d0d) drop-shadow(0px 4px 4px #26044d0d);\n  --vvd-neutral-tint-shadow-surface-12dp: drop-shadow(0px 4px 24px #26044d1a) drop-shadow(0px 12px 16px #26044d0d) drop-shadow(0px 6px 8px #26044d0d);\n  --vvd-neutral-tint-shadow-surface-16dp: drop-shadow(0px 6px 32px #26044d1a) drop-shadow(0px 16px 24px #26044d0d) drop-shadow(0px 8px 12px #26044d0d);\n  --vvd-neutral-tint-shadow-surface-24dp: drop-shadow(0px 12px 48px #26044d33) drop-shadow(0px 24px 32px #26044d0d) drop-shadow(0px 12px 16px #26044d0d);\n}\n";
+const tokensThemeDarkCss = "/**\n * Do not edit directly\n * Generated on Wed, 18 Jun 2025 09:28:14 GMT\n */\n/**\n * Do not edit directly\n * Generated on Wed, 18 Jun 2025 09:28:14 GMT\n */\n/**\n * Do not edit directly\n * Generated on Wed, 18 Jun 2025 09:28:14 GMT\n */\n/**\n * Do not edit directly\n * Generated on Wed, 18 Jun 2025 09:28:14 GMT\n */\n@property --vvd-size-density {\n  syntax: \"<integer>\";\n  inherits: true;\n  initial-value: 0;\n}\n@property --vvd-size-font-scale-base {\n  syntax: \"<length>\";\n  inherits: true;\n  initial-value: 16px;\n}\n.vvd-root, ::part(vvd-root) {\n  --vvd-color-scheme: dark;\n  --vvd-color-canvas: #000000;\n  --vvd-color-canvas-text: #ffffff;\n  --vvd-color-neutral-50: #1a1a1a;\n  --vvd-color-neutral-100: #333333;\n  --vvd-color-neutral-200: #4d4d4d;\n  --vvd-color-neutral-300: #666666;\n  --vvd-color-neutral-400: #757575;\n  --vvd-color-neutral-500: #929292;\n  --vvd-color-neutral-600: #b3b3b3;\n  --vvd-color-neutral-700: #cccccc;\n  --vvd-color-neutral-800: #E6E6E6;\n  --vvd-color-neutral-900: #F2F2F2;\n  --vvd-color-neutral-950: #ffffff;\n  --vvd-color-cta-50: #26044d;\n  --vvd-color-cta-100: #440291;\n  --vvd-color-cta-200: #6405d1;\n  --vvd-color-cta-300: #871eff;\n  --vvd-color-cta-400: #9941ff;\n  --vvd-color-cta-500: #b27bf2;\n  --vvd-color-cta-600: #cba1fa;\n  --vvd-color-cta-700: #dcc1fc;\n  --vvd-color-cta-800: #ece2fa;\n  --vvd-color-cta-900: #f5f0fd;\n  --vvd-color-warning-50: #2A1502;\n  --vvd-color-warning-100: #522801;\n  --vvd-color-warning-200: #803807;\n  --vvd-color-warning-300: #A64C03;\n  --vvd-color-warning-400: #be5702;\n  --vvd-color-warning-500: #e07902;\n  --vvd-color-warning-600: #fa9f00;\n  --vvd-color-warning-700: #FACC4B;\n  --vvd-color-warning-800: #FDEAA0;\n  --vvd-color-warning-900: #FDF5D4;\n  --vvd-color-information-50: #071939;\n  --vvd-color-information-100: #0e306d;\n  --vvd-color-information-200: #094a9e;\n  --vvd-color-information-300: #0e65c2;\n  --vvd-color-information-400: #0276d5;\n  --vvd-color-information-500: #2997f0;\n  --vvd-color-information-600: #65baff;\n  --vvd-color-information-700: #9dd2fe;\n  --vvd-color-information-800: #d3e9fc;\n  --vvd-color-information-900: #e8f4fb;\n  --vvd-color-announcement-50: #32082c;\n  --vvd-color-announcement-100: #620256;\n  --vvd-color-announcement-200: #8f1669;\n  --vvd-color-announcement-300: #bb1e89;\n  --vvd-color-announcement-400: #d6219c;\n  --vvd-color-announcement-500: #e560bb;\n  --vvd-color-announcement-600: #fb8fd8;\n  --vvd-color-announcement-700: #f8b9e7;\n  --vvd-color-announcement-800: #ffdcf7;\n  --vvd-color-announcement-900: #ffedfb;\n  --vvd-color-success-50: #0a1e11;\n  --vvd-color-success-100: #183a1e;\n  --vvd-color-success-200: #155923;\n  --vvd-color-success-300: #167629;\n  --vvd-color-success-400: #1c8731;\n  --vvd-color-success-500: #30a849;\n  --vvd-color-success-600: #53ca6a;\n  --vvd-color-success-700: #86e090;\n  --vvd-color-success-800: #cfeed4;\n  --vvd-color-success-900: #e1f8e5;\n  --vvd-color-alert-50: #3e0004;\n  --vvd-color-alert-100: #6e0000;\n  --vvd-color-alert-200: #9f0202;\n  --vvd-color-alert-300: #cd0d0d;\n  --vvd-color-alert-400: #e61d1d;\n  --vvd-color-alert-500: #f75959;\n  --vvd-color-alert-600: #fe9696;\n  --vvd-color-alert-700: #ffbbbb;\n  --vvd-color-alert-800: #fedfdf;\n  --vvd-color-alert-900: #ffeef2;\n  --vvd-color-neutral-tint-50: #191828;\n  --vvd-color-neutral-tint-100: #31304f;\n  --vvd-color-neutral-tint-200: #494977;\n  --vvd-color-neutral-tint-300: #63628d;\n  --vvd-color-neutral-tint-400: #727198;\n  --vvd-color-neutral-tint-500: #908fae;\n  --vvd-color-neutral-tint-600: #b2b1c7;\n  --vvd-color-neutral-tint-700: #cbcbd9;\n  --vvd-color-neutral-tint-800: #e5e5ec;\n  --vvd-color-neutral-tint-900: #f2f3f9;\n  --vvd-color-surface-0dp: #0d0d0d;\n  --vvd-color-surface-2dp: linear-gradient(#ffffff0f, #ffffff0f), #0d0d0d;\n  --vvd-color-surface-4dp: linear-gradient(#ffffff14, #ffffff14), #0d0d0d;\n  --vvd-color-surface-8dp: linear-gradient(#ffffff1a, #ffffff1a), #0d0d0d;\n  --vvd-color-surface-12dp: linear-gradient(#ffffff1f, #ffffff1f), #0d0d0d;\n  --vvd-color-surface-16dp: linear-gradient(#ffffff24, #ffffff24), #0d0d0d;\n  --vvd-color-surface-24dp: linear-gradient(#ffffff29, #ffffff29), #0d0d0d;\n  --vvd-shadow-surface-0dp: drop-shadow(1px 0px 0px #4d4d4d) drop-shadow(0px 1px 0px #4d4d4d) drop-shadow(0px -1px 0px #4d4d4d) drop-shadow(-1px 0px 0px #4d4d4d);\n  --vvd-shadow-surface-2dp: drop-shadow(0px 1px 4px #00000040) drop-shadow(0px 1px 2px #00000040) drop-shadow(0px 2px 1px #00000040);\n  --vvd-shadow-surface-4dp: drop-shadow(0px 2px 8px #00000040) drop-shadow(0px 2px 4px #00000040) drop-shadow(0px 4px 4px #00000040);\n  --vvd-shadow-surface-8dp: drop-shadow(0px 2px 16px #00000040) drop-shadow(0px 8px 8px #00000040) drop-shadow(0px 4px 4px #00000040);\n  --vvd-shadow-surface-12dp: drop-shadow(0px 4px 24px #00000040) drop-shadow(0px 12px 16px #00000040) drop-shadow(0px 6px 8px #00000040);\n  --vvd-shadow-surface-16dp: drop-shadow(0px 6px 32px #00000040) drop-shadow(0px 16px 24px #00000040) drop-shadow(0px 8px 12px #00000040);\n  --vvd-shadow-surface-24dp: drop-shadow(0px 12px 48px #00000040) drop-shadow(0px 24px 32px #00000040) drop-shadow(0px 12px 16px #00000040);\n  --vvd-neutral-tint-color-surface-0dp: #191828;\n  --vvd-neutral-tint-color-surface-2dp: linear-gradient(#ffffff08, #ffffff08), #191828;\n  --vvd-neutral-tint-color-surface-4dp: linear-gradient(#ffffff0f, #ffffff0f), #191828;\n  --vvd-neutral-tint-color-surface-8dp: linear-gradient(#ffffff14, #ffffff14), #191828;\n  --vvd-neutral-tint-color-surface-12dp: linear-gradient(#ffffff1f, #ffffff1f), #191828;\n  --vvd-neutral-tint-color-surface-16dp: linear-gradient(#ffffff24, #ffffff24), #191828;\n  --vvd-neutral-tint-color-surface-24dp: linear-gradient(#ffffff33, #ffffff33), #191828;\n  --vvd-neutral-tint-shadow-surface-0dp: drop-shadow(1px 0px 0px #f2f3f91a) drop-shadow(0px 1px 0px #f2f3f91a) drop-shadow(0px -1px 0px #f2f3f91a) drop-shadow(-1px 0px 0px #f2f3f91a);\n  --vvd-neutral-tint-shadow-surface-2dp: none;\n  --vvd-neutral-tint-shadow-surface-4dp: none;\n  --vvd-neutral-tint-shadow-surface-8dp: none;\n  --vvd-neutral-tint-shadow-surface-12dp: none;\n  --vvd-neutral-tint-shadow-surface-16dp: none;\n  --vvd-neutral-tint-shadow-surface-24dp: none;\n  --vvd-typography-headline: 500 calc(var(--vvd-size-font-scale-base, 16px) * 4.125)/1.3333333333333333 Montserrat;\n  --vvd-typography-subtitle: 500 calc(var(--vvd-size-font-scale-base, 16px) * 3.25)/1.3076923076923077 Montserrat;\n  --vvd-typography-heading-1: 500 calc(var(--vvd-size-font-scale-base, 16px) * 2.5)/1.3 Montserrat;\n  --vvd-typography-heading-2: 500 calc(var(--vvd-size-font-scale-base, 16px) * 2)/1.375 Montserrat;\n  --vvd-typography-heading-3: 500 calc(var(--vvd-size-font-scale-base, 16px) * 1.625)/1.3846153846153846 Montserrat;\n  --vvd-typography-heading-4: 500 calc(var(--vvd-size-font-scale-base, 16px) * 1.25)/1.4 Montserrat;\n  --vvd-typography-base: 400 calc(var(--vvd-size-font-scale-base, 16px) * 0.875)/1.4285714285714286 Montserrat;\n  --vvd-typography-base-bold: 600 calc(var(--vvd-size-font-scale-base, 16px) * 0.875)/1.4285714285714286 Montserrat;\n  --vvd-typography-base-code: 400 calc(var(--vvd-size-font-scale-base, 16px) * 0.875)/1.4285714285714286 Roboto Mono;\n  --vvd-typography-base-condensed: 400 calc(var(--vvd-size-font-scale-base, 16px) * 0.75)/1.3333333333333333 Montserrat;\n  --vvd-typography-base-condensed-bold: 600 calc(var(--vvd-size-font-scale-base, 16px) * 0.75)/1.3333333333333333 Montserrat;\n  --vvd-typography-base-extended: 400 calc(var(--vvd-size-font-scale-base, 16px))/1.5 Montserrat;\n  --vvd-typography-base-extended-bold: 600 calc(var(--vvd-size-font-scale-base, 16px))/1.5 Montserrat;\n}\n\n.vvd-theme-alternate, ::part(vvd-theme-alternate) {\n  --vvd-color-scheme: light;\n  --vvd-color-canvas: #ffffff;\n  --vvd-color-canvas-text: #0d0d0d;\n  --vvd-color-neutral-50: #F2F2F2;\n  --vvd-color-neutral-100: #E6E6E6;\n  --vvd-color-neutral-200: #cccccc;\n  --vvd-color-neutral-300: #b3b3b3;\n  --vvd-color-neutral-400: #929292;\n  --vvd-color-neutral-500: #757575;\n  --vvd-color-neutral-600: #666666;\n  --vvd-color-neutral-700: #4d4d4d;\n  --vvd-color-neutral-800: #333333;\n  --vvd-color-neutral-900: #1a1a1a;\n  --vvd-color-neutral-950: #0d0d0d;\n  --vvd-color-cta-50: #f5f0fd;\n  --vvd-color-cta-100: #ece2fa;\n  --vvd-color-cta-200: #dcc1fc;\n  --vvd-color-cta-300: #cba1fa;\n  --vvd-color-cta-400: #b27bf2;\n  --vvd-color-cta-500: #9941ff;\n  --vvd-color-cta-600: #871eff;\n  --vvd-color-cta-700: #6405d1;\n  --vvd-color-cta-800: #440291;\n  --vvd-color-cta-900: #26044d;\n  --vvd-color-cta-950: #140623;\n  --vvd-color-warning-50: #FDF5D4;\n  --vvd-color-warning-100: #FDEAA0;\n  --vvd-color-warning-200: #FACC4B;\n  --vvd-color-warning-300: #fa9f00;\n  --vvd-color-warning-400: #e07902;\n  --vvd-color-warning-500: #be5702;\n  --vvd-color-warning-600: #A64C03;\n  --vvd-color-warning-700: #893000;\n  --vvd-color-warning-800: #522801;\n  --vvd-color-warning-900: #2A1502;\n  --vvd-color-warning-950: #150B01;\n  --vvd-color-information-50: #e8f4fb;\n  --vvd-color-information-100: #d3e9fc;\n  --vvd-color-information-200: #9dd2fe;\n  --vvd-color-information-300: #65baff;\n  --vvd-color-information-400: #2997f0;\n  --vvd-color-information-500: #0276d5;\n  --vvd-color-information-600: #0e65c2;\n  --vvd-color-information-700: #094a9e;\n  --vvd-color-information-800: #0e306d;\n  --vvd-color-information-900: #071939;\n  --vvd-color-information-950: #040d1d;\n  --vvd-color-announcement-50: #ffedfb;\n  --vvd-color-announcement-100: #ffdcf7;\n  --vvd-color-announcement-200: #f8b9e7;\n  --vvd-color-announcement-300: #fb8fd8;\n  --vvd-color-announcement-400: #e560bb;\n  --vvd-color-announcement-500: #d6219c;\n  --vvd-color-announcement-600: #bb1e89;\n  --vvd-color-announcement-700: #8f1669;\n  --vvd-color-announcement-800: #620256;\n  --vvd-color-announcement-900: #32082c;\n  --vvd-color-announcement-950: #1d031a;\n  --vvd-color-success-50: #e1f8e5;\n  --vvd-color-success-100: #cfeed4;\n  --vvd-color-success-200: #86e090;\n  --vvd-color-success-300: #53ca6a;\n  --vvd-color-success-400: #30a849;\n  --vvd-color-success-500: #1c8731;\n  --vvd-color-success-600: #167629;\n  --vvd-color-success-700: #155923;\n  --vvd-color-success-800: #183a1e;\n  --vvd-color-success-900: #0a1e11;\n  --vvd-color-success-950: #060f09;\n  --vvd-color-alert-50: #ffeef2;\n  --vvd-color-alert-100: #fedfdf;\n  --vvd-color-alert-200: #ffbbbb;\n  --vvd-color-alert-300: #fe9696;\n  --vvd-color-alert-400: #f75959;\n  --vvd-color-alert-500: #e61d1d;\n  --vvd-color-alert-600: #cd0d0d;\n  --vvd-color-alert-700: #9f0202;\n  --vvd-color-alert-800: #6e0000;\n  --vvd-color-alert-900: #3e0004;\n  --vvd-color-alert-950: #250004;\n  --vvd-color-neutral-tint-50: #f2f3f9;\n  --vvd-color-neutral-tint-100: #e5e5ec;\n  --vvd-color-neutral-tint-200: #cbcbd9;\n  --vvd-color-neutral-tint-300: #b2b1c7;\n  --vvd-color-neutral-tint-400: #908fae;\n  --vvd-color-neutral-tint-500: #727198;\n  --vvd-color-neutral-tint-600: #63628d;\n  --vvd-color-neutral-tint-700: #494977;\n  --vvd-color-neutral-tint-800: #31304f;\n  --vvd-color-neutral-tint-900: #191828;\n  --vvd-color-neutral-tint-950: #0d0c15;\n  --vvd-color-surface-0dp: #ffffff;\n  --vvd-color-surface-2dp: #ffffff;\n  --vvd-color-surface-4dp: #ffffff;\n  --vvd-color-surface-8dp: #ffffff;\n  --vvd-color-surface-12dp: #ffffff;\n  --vvd-color-surface-16dp: #ffffff;\n  --vvd-color-surface-24dp: #ffffff;\n  --vvd-shadow-surface-0dp: drop-shadow(1px 0px 0px #cccccc) drop-shadow(0px 1px 0px #cccccc) drop-shadow(0px -1px 0px #cccccc) drop-shadow(-1px 0px 0px #cccccc);\n  --vvd-shadow-surface-2dp: drop-shadow(0px 1px 4px #0000001a) drop-shadow(0px 1px 2px #0000000d) drop-shadow(0px 2px 1px #0000000d);\n  --vvd-shadow-surface-4dp: drop-shadow(0px 2px 8px #0000001a) drop-shadow(0px 2px 4px #0000000d) drop-shadow(0px 4px 2px #0000000d);\n  --vvd-shadow-surface-8dp: drop-shadow(0px 2px 16px #0000001a) drop-shadow(0px 8px 8px #0000000d) drop-shadow(0px 4px 4px #0000000d);\n  --vvd-shadow-surface-12dp: drop-shadow(0px 4px 24px #0000001a) drop-shadow(0px 12px 16px #0000000d) drop-shadow(0px 6px 8px #0000000d);\n  --vvd-shadow-surface-16dp: drop-shadow(0px 6px 32px #0000001a) drop-shadow(0px 16px 24px #0000000d) drop-shadow(0px 8px 12px #0000000d);\n  --vvd-shadow-surface-24dp: drop-shadow(0px 12px 48px #00000033) drop-shadow(0px 24px 32px #0000000d) drop-shadow(0px 12px 16px #0000000d);\n  --vvd-neutral-tint-shadow-surface-0dp: drop-shadow(1px 0px 0px #31304f1a) drop-shadow(0px 1px 0px #31304f1a) drop-shadow(0px -1px 0px #31304f1a) drop-shadow(-1px 0px 0px #31304f1a);\n  --vvd-neutral-tint-shadow-surface-2dp: drop-shadow(0px 1px 4px #26044d1a) drop-shadow(0px 1px 2px #26044d0d) drop-shadow(0px 2px 1px #26044d0d);\n  --vvd-neutral-tint-shadow-surface-4dp: drop-shadow(0px 2px 8px #26044d1a) drop-shadow(0px 2px 4px #26044d0d) drop-shadow(0px 4px 2px #26044d0d);\n  --vvd-neutral-tint-shadow-surface-8dp: drop-shadow(0px 2px 16px #26044d1a) drop-shadow(0px 8px 8px #26044d0d) drop-shadow(0px 4px 4px #26044d0d);\n  --vvd-neutral-tint-shadow-surface-12dp: drop-shadow(0px 4px 24px #26044d1a) drop-shadow(0px 12px 16px #26044d0d) drop-shadow(0px 6px 8px #26044d0d);\n  --vvd-neutral-tint-shadow-surface-16dp: drop-shadow(0px 6px 32px #26044d1a) drop-shadow(0px 16px 24px #26044d0d) drop-shadow(0px 8px 12px #26044d0d);\n  --vvd-neutral-tint-shadow-surface-24dp: drop-shadow(0px 12px 48px #26044d33) drop-shadow(0px 24px 32px #26044d0d) drop-shadow(0px 12px 16px #26044d0d);\n}\n";
 
 const fontsSpeziaVariableCss = "@font-face {\n  font-family: SpeziaCompleteVariableUpright;\n  font-stretch: 50% 200%;\n  font-weight: 1 1000;\n  font-display: block;\n  src: url(\"https://fonts.resources.vonage.com/fonts/v2/SpeziaCompleteVariableUprightWeb.woff2\") format(\"woff2\");\n}\n@font-face {\n  font-family: SpeziaMonoCompleteVariable;\n  font-stretch: 50% 200%;\n  font-weight: 1 1000;\n  font-display: block;\n  src: url(\"https://fonts.resources.vonage.com/fonts/v2/SpeziaMonoCompleteVariableWeb.woff2\") format(\"woff2\");\n}\n.vvd-root {\n  --vvd-typography-headline: 500 condensed\n  \tcalc(var(--vvd-size-font-scale-base, 16px) * 4.125) / 1.3333333333333333\n  \tSpeziaCompleteVariableUpright;\n  --vvd-typography-subtitle: 500 condensed\n  \tcalc(var(--vvd-size-font-scale-base, 16px) * 3.25) / 1.3076923076923077\n  \tSpeziaCompleteVariableUpright;\n  --vvd-typography-heading-1: 500 condensed\n  \tcalc(var(--vvd-size-font-scale-base, 16px) * 2.5) / 1.3\n  \tSpeziaCompleteVariableUpright;\n  --vvd-typography-heading-2: 500 condensed\n  \tcalc(var(--vvd-size-font-scale-base, 16px) * 2) / 1.375\n  \tSpeziaCompleteVariableUpright;\n  --vvd-typography-heading-3: 500 condensed\n  \tcalc(var(--vvd-size-font-scale-base, 16px) * 1.625) / 1.3846153846153846\n  \tSpeziaCompleteVariableUpright;\n  --vvd-typography-heading-4: 500 condensed\n  \tcalc(var(--vvd-size-font-scale-base, 16px) * 1.25) / 1.4\n  \tSpeziaCompleteVariableUpright;\n  --vvd-typography-base: 400 ultra-condensed\n  \tcalc(var(--vvd-size-font-scale-base, 16px) * 0.875) / 1.4285714285714286\n  \tSpeziaCompleteVariableUpright;\n  --vvd-typography-base-bold: 600 ultra-condensed\n  \tcalc(var(--vvd-size-font-scale-base, 16px) * 0.875) / 1.4285714285714286\n  \tSpeziaCompleteVariableUpright;\n  --vvd-typography-base-code: 400 ultra-condensed\n  \tcalc(var(--vvd-size-font-scale-base, 16px) * 0.875) / 1.4285714285714286\n  \tSpeziaMonoCompleteVariable;\n  --vvd-typography-base-condensed: 400 ultra-condensed\n  \tcalc(var(--vvd-size-font-scale-base, 16px) * 0.75) / 1.3333333333333333\n  \tSpeziaCompleteVariableUpright;\n  --vvd-typography-base-condensed-bold: 600 ultra-condensed\n  \tcalc(var(--vvd-size-font-scale-base, 16px) * 0.75) / 1.3333333333333333\n  \tSpeziaCompleteVariableUpright;\n  --vvd-typography-base-extended: 400 ultra-condensed\n  \tcalc(var(--vvd-size-font-scale-base, 16px)) / 1.5\n  \tSpeziaCompleteVariableUpright;\n  --vvd-typography-base-extended-bold: 600 ultra-condensed\n  \tcalc(var(--vvd-size-font-scale-base, 16px)) / 1.5\n  \tSpeziaCompleteVariableUpright;\n}\n";
 
-const tokensVivid2CompatCss = "/**\n * Do not edit directly\n * Generated on Mon, 12 May 2025 14:52:13 GMT\n */\n.vvd-root, ::part(vvd-root),\n.vvd-theme-alternate, ::part(vvd-theme-alternate) {\n  --_vvd3--vvd-color-neutral-50: var(\n  \t--vvd-color-neutral-50\n  );\n}\n\n.vvd-component:not(.vvd-theme-alternate) {\n  --vvd-color-neutral-50: var(--_vvd3--vvd-color-neutral-50);\n}\n";
+const tokensVivid2CompatCss = "/**\n * Do not edit directly\n * Generated on Wed, 18 Jun 2025 09:28:14 GMT\n */\n.vvd-root, ::part(vvd-root),\n.vvd-theme-alternate, ::part(vvd-theme-alternate) {\n  --_vvd3--vvd-color-neutral-50: var(\n  \t--vvd-color-neutral-50\n  );\n}\n\n.vvd-component:not(.vvd-theme-alternate) {\n  --vvd-color-neutral-50: var(--_vvd3--vvd-color-neutral-50);\n}\n";
 
-const coreThemeCss = "/**\n * Do not edit directly\n * Generated on Mon, 12 May 2025 14:52:13 GMT\n */\n.vvd-root {\n  color-scheme: var(--vvd-color-scheme);\n  background-color: var(--vvd-color-canvas);\n  color: var(--vvd-color-canvas-text);\n}\n\n.vvd-scrollbar {\n  --scrollbar-track-color: transparent;\n  --scrollbar-thumb-color: color-mix(in srgb, var(--vvd-color-neutral-950), transparent 70%);\n}\n.vvd-scrollbar {\n  scrollbar-color: var(--scrollbar-thumb-color) var(--scrollbar-track-color);\n  scrollbar-width: thin;\n}\n.vvd-scrollbar ::-webkit-scrollbar {\n  width: 4px;\n}\n.vvd-scrollbar ::-webkit-scrollbar-track {\n  background: var(--scrollbar-track-color);\n}\n.vvd-scrollbar ::-webkit-scrollbar-thumb {\n  border: 0;\n  border-radius: 4px;\n  background-color: var(--scrollbar-fallback-track-color, var(--scrollbar-thumb-color));\n}\n\n.vvd-neutral-tint-elevation {\n  --_vvd-tinted-color-surface-0dp: var(--vvd-neutral-tint-color-surface-0dp);\n  --_vvd-tinted-color-surface-2dp: var(--vvd-neutral-tint-color-surface-2dp);\n  --_vvd-tinted-color-surface-4dp: var(--vvd-neutral-tint-color-surface-4dp);\n  --_vvd-tinted-color-surface-8dp: var(--vvd-neutral-tint-color-surface-8dp);\n  --_vvd-tinted-color-surface-12dp: var(--vvd-neutral-tint-color-surface-12dp);\n  --_vvd-tinted-color-surface-16dp: var(--vvd-neutral-tint-color-surface-16dp);\n  --_vvd-tinted-color-surface-24dp: var(--vvd-neutral-tint-color-surface-24dp);\n  --_vvd-tinted-shadow-surface-0dp: var(--vvd-neutral-tint-shadow-surface-0dp);\n  --_vvd-tinted-shadow-surface-2dp: var(--vvd-neutral-tint-shadow-surface-2dp);\n  --_vvd-tinted-shadow-surface-4dp: var(--vvd-neutral-tint-shadow-surface-4dp);\n  --_vvd-tinted-shadow-surface-8dp: var(--vvd-neutral-tint-shadow-surface-8dp);\n  --_vvd-tinted-shadow-surface-12dp: var(\n  \t--vvd-neutral-tint-shadow-surface-12dp\n  );\n  --_vvd-tinted-shadow-surface-16dp: var(\n  \t--vvd-neutral-tint-shadow-surface-16dp\n  );\n  --_vvd-tinted-shadow-surface-24dp: var(\n  \t--vvd-neutral-tint-shadow-surface-24dp\n  );\n}\n.vvd-neutral-tint-elevation > * {\n  --_vvd-tinted-color-surface-0dp: var(--vvd-color-surface-0dp);\n  --_vvd-tinted-color-surface-2dp: var(--vvd-color-surface-2dp);\n  --_vvd-tinted-color-surface-4dp: var(--vvd-color-surface-4dp);\n  --_vvd-tinted-color-surface-8dp: var(--vvd-color-surface-8dp);\n  --_vvd-tinted-color-surface-12dp: var(--vvd-color-surface-12dp);\n  --_vvd-tinted-color-surface-16dp: var(--vvd-color-surface-16dp);\n  --_vvd-tinted-color-surface-24dp: var(--vvd-color-surface-24dp);\n  --_vvd-tinted-shadow-surface-0dp: var(--vvd-shadow-surface-0dp);\n  --_vvd-tinted-shadow-surface-2dp: var(--vvd-shadow-surface-2dp);\n  --_vvd-tinted-shadow-surface-4dp: var(--vvd-shadow-surface-4dp);\n  --_vvd-tinted-shadow-surface-8dp: var(--vvd-shadow-surface-8dp);\n  --_vvd-tinted-shadow-surface-12dp: var(--vvd-shadow-surface-12dp);\n  --_vvd-tinted-shadow-surface-16dp: var(--vvd-shadow-surface-16dp);\n  --_vvd-tinted-shadow-surface-24dp: var(--vvd-shadow-surface-24dp);\n}\n";
+const coreThemeCss = "/**\n * Do not edit directly\n * Generated on Wed, 18 Jun 2025 09:28:14 GMT\n */\n.vvd-root {\n  color-scheme: var(--vvd-color-scheme);\n  background-color: var(--vvd-color-canvas);\n  color: var(--vvd-color-canvas-text);\n}\n\n.vvd-scrollbar {\n  --scrollbar-track-color: transparent;\n  --scrollbar-thumb-color: color-mix(in srgb, var(--vvd-color-neutral-950), transparent 70%);\n}\n.vvd-scrollbar {\n  scrollbar-color: var(--scrollbar-thumb-color) var(--scrollbar-track-color);\n  scrollbar-width: thin;\n}\n.vvd-scrollbar ::-webkit-scrollbar {\n  width: 4px;\n}\n.vvd-scrollbar ::-webkit-scrollbar-track {\n  background: var(--scrollbar-track-color);\n}\n.vvd-scrollbar ::-webkit-scrollbar-thumb {\n  border: 0;\n  border-radius: 4px;\n  background-color: var(--scrollbar-fallback-track-color, var(--scrollbar-thumb-color));\n}\n\n.vvd-neutral-tint-elevation {\n  --_vvd-tinted-color-surface-0dp: var(--vvd-neutral-tint-color-surface-0dp);\n  --_vvd-tinted-color-surface-2dp: var(--vvd-neutral-tint-color-surface-2dp);\n  --_vvd-tinted-color-surface-4dp: var(--vvd-neutral-tint-color-surface-4dp);\n  --_vvd-tinted-color-surface-8dp: var(--vvd-neutral-tint-color-surface-8dp);\n  --_vvd-tinted-color-surface-12dp: var(--vvd-neutral-tint-color-surface-12dp);\n  --_vvd-tinted-color-surface-16dp: var(--vvd-neutral-tint-color-surface-16dp);\n  --_vvd-tinted-color-surface-24dp: var(--vvd-neutral-tint-color-surface-24dp);\n  --_vvd-tinted-shadow-surface-0dp: var(--vvd-neutral-tint-shadow-surface-0dp);\n  --_vvd-tinted-shadow-surface-2dp: var(--vvd-neutral-tint-shadow-surface-2dp);\n  --_vvd-tinted-shadow-surface-4dp: var(--vvd-neutral-tint-shadow-surface-4dp);\n  --_vvd-tinted-shadow-surface-8dp: var(--vvd-neutral-tint-shadow-surface-8dp);\n  --_vvd-tinted-shadow-surface-12dp: var(\n  \t--vvd-neutral-tint-shadow-surface-12dp\n  );\n  --_vvd-tinted-shadow-surface-16dp: var(\n  \t--vvd-neutral-tint-shadow-surface-16dp\n  );\n  --_vvd-tinted-shadow-surface-24dp: var(\n  \t--vvd-neutral-tint-shadow-surface-24dp\n  );\n}\n.vvd-neutral-tint-elevation > * {\n  --_vvd-tinted-color-surface-0dp: var(--vvd-color-surface-0dp);\n  --_vvd-tinted-color-surface-2dp: var(--vvd-color-surface-2dp);\n  --_vvd-tinted-color-surface-4dp: var(--vvd-color-surface-4dp);\n  --_vvd-tinted-color-surface-8dp: var(--vvd-color-surface-8dp);\n  --_vvd-tinted-color-surface-12dp: var(--vvd-color-surface-12dp);\n  --_vvd-tinted-color-surface-16dp: var(--vvd-color-surface-16dp);\n  --_vvd-tinted-color-surface-24dp: var(--vvd-color-surface-24dp);\n  --_vvd-tinted-shadow-surface-0dp: var(--vvd-shadow-surface-0dp);\n  --_vvd-tinted-shadow-surface-2dp: var(--vvd-shadow-surface-2dp);\n  --_vvd-tinted-shadow-surface-4dp: var(--vvd-shadow-surface-4dp);\n  --_vvd-tinted-shadow-surface-8dp: var(--vvd-shadow-surface-8dp);\n  --_vvd-tinted-shadow-surface-12dp: var(--vvd-shadow-surface-12dp);\n  --_vvd-tinted-shadow-surface-16dp: var(--vvd-shadow-surface-16dp);\n  --_vvd-tinted-shadow-surface-24dp: var(--vvd-shadow-surface-24dp);\n}\n";
 
-const coreTypographyCss = "/**\n * Do not edit directly\n * Generated on Mon, 12 May 2025 14:52:13 GMT\n */\n.vvd-root:root {\n  --vvd-size-font-scale-base: 1rem;\n  font-size: unset;\n}\n.vvd-root:root > body {\n  font: var(--vvd-typography-base);\n  font-feature-settings: \"kern\"; /* turns on kerning */\n  text-rendering: optimizeLegibility; /* emphasise on legibility when rendering, turns on ligatures and kerning */\n  -webkit-font-smoothing: antialiased; /* apply font anti-aliasing for Webkit on OSX */\n  -moz-osx-font-smoothing: grayscale; /* apply font anti-aliasing for Firefox on OSX */\n}\n.vvd-root:not(:root) {\n  font: var(--vvd-typography-base);\n  font-feature-settings: \"kern\"; /* turns on kerning */\n  text-rendering: optimizeLegibility; /* emphasise on legibility when rendering, turns on ligatures and kerning */\n  -webkit-font-smoothing: antialiased; /* apply font anti-aliasing for Webkit on OSX */\n  -moz-osx-font-smoothing: grayscale; /* apply font anti-aliasing for Firefox on OSX */\n}\n.vvd-root p,\n.vvd-root .font-base {\n  font: var(--vvd-typography-base);\n  margin-block: 16px;\n}\n.vvd-root p.tight,\n.vvd-root .font-base.tight {\n  margin-block: 0;\n}\n.vvd-root .font-base-bold {\n  font: var(--vvd-typography-base-bold);\n}\n.vvd-root .font-base-condensed {\n  font: var(--vvd-typography-base-condensed);\n}\n.vvd-root .font-base-condensed-bold {\n  font: var(--vvd-typography-base-condensed-bold);\n}\n.vvd-root .font-base-extended {\n  font: var(--vvd-typography-base-extended);\n}\n.vvd-root .font-base-extended-bold {\n  font: var(--vvd-typography-base-extended-bold);\n}\n.vvd-root .font-base-code {\n  font: var(--vvd-typography-base-code);\n}\n.vvd-root b, .vvd-root strong {\n  font-weight: 600;\n}\n.vvd-root pre, .vvd-root var, .vvd-root code, .vvd-root kbd, .vvd-root samp {\n  font: var(--vvd-typography-base-code);\n}\n.vvd-root .headline {\n  font: var(--vvd-typography-headline);\n  margin-block: 40px;\n}\n.vvd-root .subtitle {\n  font: var(--vvd-typography-subtitle);\n  margin-block: 40px;\n}\n.vvd-root h1,\n.vvd-root .heading1 {\n  font: var(--vvd-typography-heading-1);\n  margin-block: 32px;\n}\n.vvd-root h2,\n.vvd-root .heading2 {\n  font: var(--vvd-typography-heading-2);\n  margin-block: 32px;\n}\n.vvd-root h3,\n.vvd-root .heading3 {\n  font: var(--vvd-typography-heading-3);\n  margin-block: 24px;\n}\n.vvd-root h4,\n.vvd-root .heading4 {\n  font: var(--vvd-typography-heading-4);\n  margin-block: 24px;\n}\n.vvd-root .headline b, .vvd-root .headline strong,\n.vvd-root .subtitle b,\n.vvd-root .subtitle strong,\n.vvd-root h1 b,\n.vvd-root h1 strong,\n.vvd-root .heading1 b,\n.vvd-root .heading1 strong,\n.vvd-root h2 b,\n.vvd-root h2 strong,\n.vvd-root .heading2 b,\n.vvd-root .heading2 strong,\n.vvd-root h3 b,\n.vvd-root h3 strong,\n.vvd-root .heading3 b,\n.vvd-root .heading3 strong,\n.vvd-root h4 b,\n.vvd-root h4 strong,\n.vvd-root .heading4 b,\n.vvd-root .heading4 strong {\n  font-weight: 500;\n}\n.vvd-root .headline.tight,\n.vvd-root .subtitle.tight,\n.vvd-root h1.tight,\n.vvd-root .heading1.tight,\n.vvd-root h2.tight,\n.vvd-root .heading2.tight,\n.vvd-root h3.tight,\n.vvd-root .heading3.tight,\n.vvd-root h4.tight,\n.vvd-root .heading4.tight {\n  margin-block: 0;\n}\n.vvd-root small,\n.vvd-root figcaption {\n  font: var(--vvd-typography-base-condensed);\n}\n.vvd-root sub,\n.vvd-root sup {\n  font: var(--vvd-typography-base-condensed);\n  font-size: 75%;\n  line-height: 0;\n  position: relative;\n  vertical-align: baseline;\n}\n.vvd-root sub {\n  bottom: -0.25em;\n}\n.vvd-root sup {\n  top: -0.5em;\n}\n";
+const coreTypographyCss = "/**\n * Do not edit directly\n * Generated on Wed, 18 Jun 2025 09:28:14 GMT\n */\n.vvd-root:root {\n  --vvd-size-font-scale-base: 1rem;\n  font-size: unset;\n}\n.vvd-root:root > body {\n  font: var(--vvd-typography-base);\n  font-feature-settings: \"kern\"; /* turns on kerning */\n  text-rendering: optimizeLegibility; /* emphasise on legibility when rendering, turns on ligatures and kerning */\n  -webkit-font-smoothing: antialiased; /* apply font anti-aliasing for Webkit on OSX */\n  -moz-osx-font-smoothing: grayscale; /* apply font anti-aliasing for Firefox on OSX */\n}\n.vvd-root:not(:root) {\n  font: var(--vvd-typography-base);\n  font-feature-settings: \"kern\"; /* turns on kerning */\n  text-rendering: optimizeLegibility; /* emphasise on legibility when rendering, turns on ligatures and kerning */\n  -webkit-font-smoothing: antialiased; /* apply font anti-aliasing for Webkit on OSX */\n  -moz-osx-font-smoothing: grayscale; /* apply font anti-aliasing for Firefox on OSX */\n}\n.vvd-root p,\n.vvd-root .font-base {\n  font: var(--vvd-typography-base);\n  margin-block: 16px;\n}\n.vvd-root p.tight,\n.vvd-root .font-base.tight {\n  margin-block: 0;\n}\n.vvd-root .font-base-bold {\n  font: var(--vvd-typography-base-bold);\n}\n.vvd-root .font-base-condensed {\n  font: var(--vvd-typography-base-condensed);\n}\n.vvd-root .font-base-condensed-bold {\n  font: var(--vvd-typography-base-condensed-bold);\n}\n.vvd-root .font-base-extended {\n  font: var(--vvd-typography-base-extended);\n}\n.vvd-root .font-base-extended-bold {\n  font: var(--vvd-typography-base-extended-bold);\n}\n.vvd-root .font-base-code {\n  font: var(--vvd-typography-base-code);\n}\n.vvd-root b, .vvd-root strong {\n  font-weight: 600;\n}\n.vvd-root pre, .vvd-root var, .vvd-root code, .vvd-root kbd, .vvd-root samp {\n  font: var(--vvd-typography-base-code);\n}\n.vvd-root .headline {\n  font: var(--vvd-typography-headline);\n  margin-block: 40px;\n}\n.vvd-root .subtitle {\n  font: var(--vvd-typography-subtitle);\n  margin-block: 40px;\n}\n.vvd-root h1,\n.vvd-root .heading1 {\n  font: var(--vvd-typography-heading-1);\n  margin-block: 32px;\n}\n.vvd-root h2,\n.vvd-root .heading2 {\n  font: var(--vvd-typography-heading-2);\n  margin-block: 32px;\n}\n.vvd-root h3,\n.vvd-root .heading3 {\n  font: var(--vvd-typography-heading-3);\n  margin-block: 24px;\n}\n.vvd-root h4,\n.vvd-root .heading4 {\n  font: var(--vvd-typography-heading-4);\n  margin-block: 24px;\n}\n.vvd-root .headline b, .vvd-root .headline strong,\n.vvd-root .subtitle b,\n.vvd-root .subtitle strong,\n.vvd-root h1 b,\n.vvd-root h1 strong,\n.vvd-root .heading1 b,\n.vvd-root .heading1 strong,\n.vvd-root h2 b,\n.vvd-root h2 strong,\n.vvd-root .heading2 b,\n.vvd-root .heading2 strong,\n.vvd-root h3 b,\n.vvd-root h3 strong,\n.vvd-root .heading3 b,\n.vvd-root .heading3 strong,\n.vvd-root h4 b,\n.vvd-root h4 strong,\n.vvd-root .heading4 b,\n.vvd-root .heading4 strong {\n  font-weight: 500;\n}\n.vvd-root .headline.tight,\n.vvd-root .subtitle.tight,\n.vvd-root h1.tight,\n.vvd-root .heading1.tight,\n.vvd-root h2.tight,\n.vvd-root .heading2.tight,\n.vvd-root h3.tight,\n.vvd-root .heading3.tight,\n.vvd-root h4.tight,\n.vvd-root .heading4.tight {\n  margin-block: 0;\n}\n.vvd-root small,\n.vvd-root figcaption {\n  font: var(--vvd-typography-base-condensed);\n}\n.vvd-root sub,\n.vvd-root sup {\n  font: var(--vvd-typography-base-condensed);\n  font-size: 75%;\n  line-height: 0;\n  position: relative;\n  vertical-align: baseline;\n}\n.vvd-root sub {\n  bottom: -0.25em;\n}\n.vvd-root sup {\n  top: -0.5em;\n}\n";
 
 const theme = {
   name: "core/theme",
@@ -14271,7 +14580,7 @@ const appendStyle = (css) => {
   styleElement.innerHTML = css;
   document.head.append(styleElement);
 };
-const vivid3 = {
+const vividVue = {
   install(app, options) {
     const addRootClassTo = options.addRootClassTo ?? "root";
     switch (addRootClassTo) {
@@ -14332,6 +14641,7 @@ const vivid3 = {
     }
   }
 };
+const vivid3 = vividVue;
 
 exports.Icon = Icon;
 exports.VAccordion = VAccordion;
@@ -14403,3 +14713,4 @@ exports.VVideoPlayer = VVideoPlayer;
 exports.optionalStyles = optionalStyles;
 exports.setCustomComponentPrefix = setCustomComponentPrefix;
 exports.vivid3 = vivid3;
+exports.vividVue = vividVue;