@vonage/vivid-vue 4.24.0 → 4.25.0

package/index.js

@@ -346,7 +346,7 @@ const VAccordionItem = 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"])
         ]
       );
@@ -392,7 +392,7 @@ const VAccordionItem = 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"])
       ]
     );
@@ -691,7 +691,7 @@ const VAlert = 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"])
@@ -745,7 +745,7 @@ const VAlert = 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"])
@@ -1133,6 +1133,13 @@ const VBadge = 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.
      */
@@ -1188,6 +1195,7 @@ const VBadge = 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",
@@ -1214,7 +1222,7 @@ const VBadge = 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"])
         ]
       );
@@ -1230,6 +1238,7 @@ const VBadge = 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) => {
@@ -1254,7 +1263,7 @@ const VBadge = 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"])
       ]
     );
@@ -1362,7 +1371,7 @@ const VBanner = 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"])
         ]
       );
@@ -1405,7 +1414,7 @@ const VBanner = 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"])
       ]
     );
@@ -1521,38 +1530,31 @@ const VBreadcrumbItem = 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,
@@ -1560,7 +1562,7 @@ const VBreadcrumbItem = 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 }
   },
@@ -1612,7 +1614,6 @@ const VBreadcrumbItem = 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 } : {},
@@ -1654,7 +1655,6 @@ const VBreadcrumbItem = 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 } : {},
@@ -1722,7 +1722,7 @@ const VButton = 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 },
     /**
@@ -1760,11 +1760,11 @@ const VButton = 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 },
     /**
@@ -1777,7 +1777,7 @@ const VButton = 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 },
@@ -1794,15 +1794,15 @@ const VButton = 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 },
     /**
@@ -1825,7 +1825,7 @@ const VButton = 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,
@@ -1836,18 +1836,14 @@ const VButton = 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 }
   },
@@ -1884,6 +1880,19 @@ const VButton = 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}
      */
@@ -1960,7 +1969,7 @@ const VButton = 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"])
         ]
       );
@@ -2026,7 +2035,7 @@ const VButton = 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"])
       ]
     );
@@ -2401,6 +2410,14 @@ const VCard = 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
      */
@@ -2413,21 +2430,52 @@ const VCard = 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: [
     /**
@@ -2475,11 +2523,20 @@ const VCard = 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: {
@@ -2525,11 +2582,20 @@ const VCard = 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);
@@ -2576,19 +2642,11 @@ const VCheckbox = 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 },
     /**
@@ -2599,7 +2657,8 @@ const VCheckbox = 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 },
     /**
@@ -2607,11 +2666,12 @@ const VCheckbox = 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 },
     /**
@@ -2619,7 +2679,7 @@ const VCheckbox = 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 },
@@ -2640,16 +2700,12 @@ const VCheckbox = 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 }
   },
@@ -2698,6 +2754,19 @@ const VCheckbox = 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) {
@@ -2840,11 +2909,11 @@ const VCombobox = 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 },
     /**
@@ -2852,7 +2921,8 @@ const VCombobox = 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 },
     /**
@@ -2861,7 +2931,7 @@ const VCombobox = 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 },
@@ -2906,23 +2976,15 @@ const VCombobox = 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 }
   },
@@ -2969,12 +3031,25 @@ const VCombobox = 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.
      */
@@ -3055,7 +3130,7 @@ const VCombobox = 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"])
@@ -3115,7 +3190,7 @@ const VCombobox = 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"])
@@ -3660,11 +3735,17 @@ const VDatePicker = 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 },
     /**
@@ -3692,11 +3773,11 @@ const VDatePicker = 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 }
   },
@@ -3742,7 +3823,21 @@ const VDatePicker = 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", registerDatePicker);
     const element = ref(null);
@@ -3757,6 +3852,7 @@ const VDatePicker = 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 } : {},
@@ -3807,6 +3903,7 @@ const VDatePicker = 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 } : {},
@@ -3865,9 +3962,14 @@ const VDateRangePicker = 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.
@@ -3879,7 +3981,8 @@ const VDateRangePicker = 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 },
     /**
@@ -3915,7 +4018,7 @@ const VDateRangePicker = 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 }
   },
@@ -3976,7 +4079,21 @@ const VDateRangePicker = 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",
@@ -3995,6 +4112,7 @@ const VDateRangePicker = 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 } : {},
@@ -4056,6 +4174,7 @@ const VDateRangePicker = 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 } : {},
@@ -4124,11 +4243,17 @@ const VDateTimePicker = 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 },
     /**
@@ -4180,11 +4305,11 @@ const VDateTimePicker = 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 }
   },
@@ -4230,7 +4355,21 @@ const VDateTimePicker = 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",
@@ -4249,6 +4388,7 @@ const VDateTimePicker = 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 } : {},
@@ -4306,6 +4446,7 @@ const VDateTimePicker = 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 } : {},
@@ -4361,6 +4502,10 @@ const VDialPad = 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.
      */
@@ -4465,6 +4610,12 @@ const VDialPad = defineComponent({
     "update:modelValue"
   ],
   methods: {
+    /**
+     * Moves focus into the diapl-pad.
+     */
+    focus() {
+      return this.element?.focus();
+    },
     valueChanged(_oldValue, newValue) {
       return this.element?.valueChanged(_oldValue, newValue);
     }
@@ -4481,6 +4632,7 @@ const VDialPad = 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 } : {},
@@ -4537,6 +4689,7 @@ const VDialPad = 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 } : {},
@@ -4847,7 +5000,7 @@ const VDivider = defineComponent({
       default: void 0
     },
     /**
-     * The role of the element.
+     * The role of the element. This property will be removed
      */
     role: {
       type: String,
@@ -4982,9 +5135,6 @@ const VEmptyState = 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
@@ -5168,7 +5318,7 @@ const VFab = 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 },
@@ -5199,11 +5349,7 @@ const VFab = 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 }
   },
@@ -5240,6 +5386,19 @@ const VFab = 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}
      */
@@ -5302,7 +5461,7 @@ const VFab = 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"])
         ]
       );
@@ -5354,7 +5513,7 @@ const VFab = 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"])
       ]
     );
@@ -5373,7 +5532,7 @@ const VFilePicker = 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 },
     /**
@@ -5381,11 +5540,12 @@ const VFilePicker = 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 },
@@ -5435,11 +5595,7 @@ const VFilePicker = 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 }
   },
@@ -5484,6 +5640,12 @@ const VFilePicker = 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);
     },
@@ -5517,6 +5679,13 @@ const VFilePicker = 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();
     },
@@ -5784,6 +5953,10 @@ const VIcon = 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/
@@ -5844,6 +6017,7 @@ const VIcon = 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 } : {}
           },
@@ -5879,6 +6053,7 @@ const VIcon = 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 } : {}
         }),
@@ -6308,6 +6483,13 @@ const VMenuItem = 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.
      */
@@ -6344,7 +6526,7 @@ const VMenuItem = 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",
@@ -6354,7 +6536,7 @@ const VMenuItem = defineComponent({
      */
     "click",
     /**
-     * Fires a custom 'expanded-change' event when the expanded state changes
+     * Fired when the expanded state changes.
      * @type {CustomEvent<HTMLElement>}
      */
     "expanded-change",
@@ -6401,6 +6583,7 @@ const VMenuItem = 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 } : {},
@@ -6458,6 +6641,7 @@ const VMenuItem = 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 } : {},
@@ -6627,6 +6811,10 @@ const VNavDisclosure = 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/
@@ -6693,6 +6881,7 @@ const VNavDisclosure = 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 } : {}
@@ -6724,7 +6913,7 @@ const VNavDisclosure = 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"])
@@ -6739,6 +6928,7 @@ const VNavDisclosure = 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 } : {}
@@ -6768,7 +6958,7 @@ const VNavDisclosure = 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"])
@@ -6781,36 +6971,33 @@ const VNavItem = 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 },
     /**
@@ -6819,30 +7006,30 @@ const VNavItem = 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 }
   },
@@ -6878,11 +7065,7 @@ const VNavItem = defineComponent({
      */
     "keyup"
   ],
-  methods: {
-    getBodyTemplate() {
-      return this.element?.getBodyTemplate();
-    }
-  },
+  methods: {},
   setup(props, ctx) {
     const componentName = registerComponent("nav-item", registerNavItem);
     const element = ref(null);
@@ -6896,8 +7079,8 @@ const VNavItem = 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 } : {},
@@ -6933,7 +7116,7 @@ const VNavItem = 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"])
@@ -6947,8 +7130,8 @@ const VNavItem = 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 } : {},
@@ -6982,7 +7165,7 @@ const VNavItem = 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"])
@@ -7081,7 +7264,7 @@ const VNote = 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"])
         ]
       );
@@ -7118,7 +7301,7 @@ const VNote = 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"])
       ]
     );
@@ -7141,10 +7324,6 @@ const VNumberField = 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
@@ -7154,11 +7333,12 @@ const VNumberField = 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 },
     /**
@@ -7171,7 +7351,7 @@ const VNumberField = 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 },
@@ -7232,23 +7412,15 @@ const VNumberField = 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 }
   },
@@ -7295,6 +7467,19 @@ const VNumberField = 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
      */
@@ -7341,7 +7526,6 @@ const VNumberField = 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 } : {},
@@ -7408,7 +7592,6 @@ const VNumberField = 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 } : {},
@@ -7595,7 +7778,7 @@ const VOption = 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"])
         ]
       );
@@ -7639,7 +7822,7 @@ const VOption = 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"])
       ]
     );
@@ -7983,7 +8166,7 @@ const VProgressRing = defineComponent({
     /**
      * The value of the progress
      */
-    value: { type: Boolean, default: void 0 }
+    value: { type: Number, default: void 0 }
   },
   emits: [
     /**
@@ -8076,7 +8259,7 @@ const VProgressRing = 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);
@@ -8110,11 +8293,7 @@ const VRadio = 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 },
     /**
@@ -8125,7 +8304,8 @@ const VRadio = 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 },
     /**
@@ -8133,16 +8313,20 @@ const VRadio = 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 },
     /**
@@ -8154,11 +8338,7 @@ const VRadio = 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 }
   },
@@ -8199,7 +8379,21 @@ const VRadio = 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", registerRadio);
     const element = ref(null);
@@ -8217,6 +8411,7 @@ const VRadio = 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 } : {},
@@ -8263,6 +8458,7 @@ const VRadio = 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 } : {},
@@ -8311,8 +8507,14 @@ const VRadioGroup = 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 },
     /**
@@ -8331,6 +8533,10 @@ const VRadioGroup = 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
      */
@@ -8400,10 +8606,13 @@ const VRadioGroup = 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",
@@ -8432,7 +8641,11 @@ const VRadioGroup = 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 h(
@@ -8442,10 +8655,13 @@ const VRadioGroup = 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) => {
@@ -8473,7 +8689,9 @@ const VRadioGroup = 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"])
       ]
     );
   }
@@ -8520,7 +8738,7 @@ const VRangeSlider = 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 },
@@ -8572,11 +8790,7 @@ const VRangeSlider = 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 }
   },
@@ -8638,8 +8852,21 @@ const VRangeSlider = 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) {
@@ -8817,12 +9044,18 @@ const VRichTextEditor = 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();
     },
@@ -8940,13 +9173,14 @@ const VSearchableSelect = 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 },
     /**
@@ -8959,7 +9193,7 @@ const VSearchableSelect = 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 },
@@ -8993,23 +9227,15 @@ const VSearchableSelect = 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 },
     /**
@@ -9069,7 +9295,21 @@ const VSearchableSelect = 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",
@@ -9146,7 +9386,7 @@ const VSearchableSelect = 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"]),
@@ -9222,7 +9462,7 @@ const VSearchableSelect = 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(
@@ -9259,7 +9499,7 @@ const VSelect = 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 },
     /**
@@ -9267,7 +9507,8 @@ const VSelect = 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 },
     /**
@@ -9280,7 +9521,7 @@ const VSelect = 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 },
@@ -9320,23 +9561,15 @@ const VSelect = 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 }
   },
@@ -9383,11 +9616,21 @@ const VSelect = 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.
@@ -9469,7 +9712,7 @@ const VSelect = 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"])
@@ -9529,7 +9772,7 @@ const VSelect = 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"])
@@ -9545,9 +9788,6 @@ const VSelectableBox = 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
@@ -9894,7 +10134,7 @@ const VSlider = 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 },
@@ -9942,19 +10182,11 @@ const VSlider = 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 }
   },
@@ -10001,6 +10233,12 @@ const VSlider = defineComponent({
     "update:modelValue"
   ],
   methods: {
+    /**
+     * Return the current validity of the element.
+     */
+    checkValidity() {
+      return this.element?.checkValidity();
+    },
     /**
      * Decrement the value by the step
      */
@@ -10013,6 +10251,13 @@ const VSlider = 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
      */
@@ -10284,7 +10529,7 @@ const VSplitButton = 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"])
         ]
       );
@@ -10333,7 +10578,7 @@ const VSplitButton = 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"])
       ]
     );
@@ -10348,19 +10593,11 @@ const VSwitch = 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 },
     /**
@@ -10371,7 +10608,8 @@ const VSwitch = 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 },
     /**
@@ -10379,7 +10617,7 @@ const VSwitch = 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 },
@@ -10400,11 +10638,7 @@ const VSwitch = 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 }
   },
@@ -10450,7 +10684,21 @@ const VSwitch = 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", registerSwitch);
     const element = ref(null);
@@ -10554,7 +10802,6 @@ const VSwitch = defineComponent({
 const VTab = defineComponent({
   name: "VTab",
   props: {
-    ariaSelected: { type: String, default: void 0 },
     /**
      * The connotation the tab should have.
      */
@@ -10580,7 +10827,7 @@ const VTab = defineComponent({
      */
     label: { type: String, default: void 0 },
     /**
-     * Indicates the tab's label.
+     * Adds a close button
      */
     removable: { type: Boolean, default: void 0 },
     /**
@@ -10644,7 +10891,6 @@ const VTab = 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 } : {},
@@ -10678,7 +10924,7 @@ const VTab = 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"])
         ]
       );
@@ -10689,7 +10935,6 @@ const VTab = 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 } : {},
@@ -10721,7 +10966,7 @@ const VTab = 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"])
       ]
     );
@@ -11164,7 +11409,7 @@ const VTag = 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"])
         ]
       );
@@ -11213,7 +11458,7 @@ const VTag = 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"])
       ]
     );
@@ -11337,7 +11582,7 @@ const VTextArea = 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 },
     /**
@@ -11349,7 +11594,7 @@ const VTextArea = 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 },
     /**
@@ -11357,11 +11602,12 @@ const VTextArea = 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 },
@@ -11382,7 +11628,7 @@ const VTextArea = 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 },
     /**
@@ -11414,23 +11660,15 @@ const VTextArea = 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 },
     /**
@@ -11484,6 +11722,19 @@ const VTextArea = 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
      */
@@ -11644,7 +11895,7 @@ const VTextField = 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 },
     /**
@@ -11652,11 +11903,12 @@ const VTextField = 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 },
     /**
@@ -11665,7 +11917,7 @@ const VTextField = 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 },
@@ -11727,7 +11979,7 @@ const VTextField = 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 },
     /**
@@ -11738,19 +11990,11 @@ const VTextField = 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 }
   },
@@ -11797,9 +12041,22 @@ const VTextField = 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
      */
@@ -11981,11 +12238,17 @@ const VTimePicker = 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 },
     /**
@@ -12021,11 +12284,11 @@ const VTimePicker = 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 }
   },
@@ -12071,7 +12334,21 @@ const VTimePicker = 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", registerTimePicker);
     const element = ref(null);
@@ -12087,6 +12364,7 @@ const VTimePicker = 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 } : {},
@@ -12140,6 +12418,7 @@ const VTimePicker = 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 } : {},
@@ -12613,7 +12892,7 @@ const VTreeItem = 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"])
@@ -12660,7 +12939,7 @@ const VTreeItem = 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"])
@@ -14221,17 +14500,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",
@@ -14267,7 +14546,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) {
@@ -14328,5 +14607,6 @@ const vivid3 = {
     }
   }
 };
+const vivid3 = vividVue;
 
-export { Icon, VAccordion, VAccordionItem, VActionGroup, VAlert, VAudioPlayer, VAvatar, VBadge, VBanner, VBreadcrumb, VBreadcrumbItem, VButton, VCalendar, VCalendarEvent, VCard, VCheckbox, VCombobox, VDataGrid, VDataGridCell, VDataGridRow, VDatePicker, VDateRangePicker, VDateTimePicker, VDialPad, VDialog, VDivider, VEmptyState, VFab, VFilePicker, VHeader, VIcon, VLayout, VMenu, VMenuItem, VNav, VNavDisclosure, VNavItem, VNote, VNumberField, VOption, VPagination, VProgress, VProgressRing, VRadio, VRadioGroup, VRangeSlider, VRichTextEditor, VSearchableSelect, VSelect, VSelectableBox, VSideDrawer, VSlider, VSplitButton, VSwitch, VTab, VTabPanel, VTabs, VTag, VTagGroup, VTextArea, VTextField, VTimePicker, VToggletip, VTooltip, VTreeItem, VTreeView, VVideoPlayer, optionalStyles, setCustomComponentPrefix, vivid3 };
+export { Icon, VAccordion, VAccordionItem, VActionGroup, VAlert, VAudioPlayer, VAvatar, VBadge, VBanner, VBreadcrumb, VBreadcrumbItem, VButton, VCalendar, VCalendarEvent, VCard, VCheckbox, VCombobox, VDataGrid, VDataGridCell, VDataGridRow, VDatePicker, VDateRangePicker, VDateTimePicker, VDialPad, VDialog, VDivider, VEmptyState, VFab, VFilePicker, VHeader, VIcon, VLayout, VMenu, VMenuItem, VNav, VNavDisclosure, VNavItem, VNote, VNumberField, VOption, VPagination, VProgress, VProgressRing, VRadio, VRadioGroup, VRangeSlider, VRichTextEditor, VSearchableSelect, VSelect, VSelectableBox, VSideDrawer, VSlider, VSplitButton, VSwitch, VTab, VTabPanel, VTabs, VTag, VTagGroup, VTextArea, VTextField, VTimePicker, VToggletip, VTooltip, VTreeItem, VTreeView, VVideoPlayer, optionalStyles, setCustomComponentPrefix, vivid3, vividVue };