@vonage/vivid-vue 4.24.0 → 4.25.0

package/index.cjs

@@ -350,7 +350,7 @@ const VAccordionItem = 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"])
         ]
       );
@@ -396,7 +396,7 @@ const VAccordionItem = 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"])
       ]
     );
@@ -695,7 +695,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 +749,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 +1137,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 +1199,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 +1226,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 +1242,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 +1267,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 +1375,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 +1418,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 +1534,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 +1566,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 +1618,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 +1659,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 +1726,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 +1764,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 +1781,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 +1798,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 +1829,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 +1840,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 +1884,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 +1973,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 +2039,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 +2414,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 +2434,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 +2527,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 +2586,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 +2646,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 +2661,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,11 +2670,12 @@ 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 },
     /**
@@ -2623,7 +2683,7 @@ const VCheckbox = vue.defineComponent({
      */
     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 +2704,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 +2758,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) {
@@ -2844,11 +2913,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 +2925,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 +2935,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 +2980,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 +3035,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 +3134,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 +3194,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"])
@@ -3664,11 +3739,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 +3777,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 +3827,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 +3856,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 +3907,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 +3966,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 +3985,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 +4022,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 +4083,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 +4116,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 +4178,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 +4247,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 +4309,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 +4359,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 +4392,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 +4450,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 +4506,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 +4614,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 +4636,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 +4693,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 } : {},
@@ -4851,7 +5004,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 +5139,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 +5322,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 +5353,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 +5390,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 +5465,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 +5517,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 +5536,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 +5544,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 +5599,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 +5644,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 +5683,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 +5957,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 +6021,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 +6057,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 +6487,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 +6530,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 +6540,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 +6587,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 +6645,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 +6815,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 +6885,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 +6917,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 +6932,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 +6962,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 +6975,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 +7010,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 +7069,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 +7083,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 +7120,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 +7134,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 +7169,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 +7268,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 +7305,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 +7328,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 +7337,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 +7355,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 +7416,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 +7471,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 +7530,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 +7596,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 +7782,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 +7826,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 +8170,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 +8263,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 +8297,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 +8308,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 +8317,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 +8342,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 +8383,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 +8415,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 +8462,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 +8511,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 +8537,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 +8610,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 +8645,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 +8659,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 +8693,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 +8742,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 +8794,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 +8856,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 +9048,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 +9177,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 +9197,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 +9231,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 +9299,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 +9390,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 +9466,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 +9503,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 +9511,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 +9525,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 +9565,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 +9620,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 +9716,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 +9776,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 +9792,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 +10138,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 +10186,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 +10237,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 +10255,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 +10533,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 +10582,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 +10597,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 +10612,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 +10621,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 +10642,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 +10688,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 +10806,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 +10831,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 +10895,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 +10928,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 +10939,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 +10970,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 +11413,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 +11462,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 +11586,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 +11598,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 +11606,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 +11632,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 +11664,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 +11726,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 +11899,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 +11907,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 +11921,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 +11983,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 +11994,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 +12045,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 +12242,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 +12288,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 +12338,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 +12368,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 +12422,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 +12896,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 +12943,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 +14504,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 Mon, 02 Jun 2025 14:00:28 GMT\n */\n/**\n * Do not edit directly\n * Generated on Mon, 02 Jun 2025 14:00:28 GMT\n */\n/**\n * Do not edit directly\n * Generated on Mon, 02 Jun 2025 14:00:28 GMT\n */\n/**\n * Do not edit directly\n * Generated on Mon, 02 Jun 2025 14:00:28 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 Mon, 02 Jun 2025 14:00:28 GMT\n */\n/**\n * Do not edit directly\n * Generated on Mon, 02 Jun 2025 14:00:28 GMT\n */\n/**\n * Do not edit directly\n * Generated on Mon, 02 Jun 2025 14:00:28 GMT\n */\n/**\n * Do not edit directly\n * Generated on Mon, 02 Jun 2025 14:00:28 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 Mon, 02 Jun 2025 14:00:28 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 Mon, 02 Jun 2025 14:00:28 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 Mon, 02 Jun 2025 14:00:28 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 +14550,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 +14611,7 @@ const vivid3 = {
     }
   }
 };
+const vivid3 = vividVue;
 
 exports.Icon = Icon;
 exports.VAccordion = VAccordion;
@@ -14403,3 +14683,4 @@ exports.VVideoPlayer = VVideoPlayer;
 exports.optionalStyles = optionalStyles;
 exports.setCustomComponentPrefix = setCustomComponentPrefix;
 exports.vivid3 = vivid3;
+exports.vividVue = vividVue;