@vonage/vivid-vue 4.19.0 → 4.20.0

package/index.js

@@ -40,13 +40,6 @@ function registerComponent(type, registerFunction) {
 const VAccordion = defineComponent({
   name: "VAccordion",
   props: {
-    /**
-     * Indicates the element that represents the current item within a container or set of related elements.
-     */
-    ariaCurrent: {
-      type: String,
-      default: void 0
-    },
     /**
      * Controls the expand mode of the Accordion, either allowing
      * single or multiple item expansion.
@@ -110,7 +103,6 @@ const VAccordion = defineComponent({
         {
           ref: "element",
           attrs: {
-            ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
             ...this.expandMode !== void 0 ? { "expand-mode": this.expandMode } : {}
           },
           class: "vvd-component",
@@ -147,7 +139,6 @@ const VAccordion = defineComponent({
         ref: "element",
         class: "vvd-component",
         ...handleVue3Props({
-          ...this.ariaCurrent !== void 0 ? { "^aria-current": this.ariaCurrent } : {},
           ...this.expandMode !== void 0 ? { "^expand-mode": this.expandMode } : {}
         }),
         onBlur: (event) => {
@@ -180,35 +171,52 @@ const VAccordion = defineComponent({
   }
 });
 
+const isTextNode = (node) => !node.tag && node.text;
 function handleNamedSlotV2(slot, children) {
-  children.forEach((child) => {
-    if (!child.data) child.data = {};
-    child.data.attrs = { ...child.data?.attrs, slot };
-  });
+  if (!children) {
+    return null;
+  }
+  for (const [index, child] of children.entries()) {
+    if (isTextNode(child)) {
+      children[index] = h("span", { attrs: { slot } }, child.text);
+    } else {
+      if (!child.data) child.data = {};
+      child.data.attrs = { ...child.data?.attrs, slot };
+    }
+  }
   return children;
 }
-function handleNamedSlotV3(slot, children) {
-  children.forEach((child) => {
-    if (!child.props) child.props = {};
-    child.props = { ...child.props, slot };
-  });
+const fragmentSymbol = Symbol.for("v-fgt");
+const textSymbol = Symbol.for("v-txt");
+const isVNodeV3 = (node) => typeof node === "object" && node !== null && !(node instanceof Array);
+function handleSlottedChildrenV3(slot, children) {
+  if (Array.isArray(children)) {
+    for (const [index, child] of children.entries()) {
+      if (!isVNodeV3(child)) {
+        continue;
+      }
+      if (child.type === fragmentSymbol) {
+        handleSlottedChildrenV3(slot, child.children);
+      } else if (child.type === textSymbol) {
+        children[index] = h("span", { slot }, child.children);
+      } else {
+        if (!child.props) child.props = {};
+        child.props = { ...child.props, slot };
+      }
+    }
+  }
   return children;
 }
-function handleNamedSlot(slot, children) {
-  if (!children) return null;
-  return isVue2 ? handleNamedSlotV2(slot, children) : handleNamedSlotV3(slot, children());
+function handleNamedSlotV3(slot, children) {
+  if (!children) {
+    return null;
+  }
+  return handleSlottedChildrenV3(slot, children());
 }
 
 const VAccordionItem = defineComponent({
   name: "VAccordionItem",
   props: {
-    /**
-     * Indicates the element that represents the current item within a container or set of related elements.
-     */
-    ariaCurrent: {
-      type: String,
-      default: void 0
-    },
     /**
      * Expands or collapses the item.
      */
@@ -301,7 +309,6 @@ const VAccordionItem = defineComponent({
         {
           ref: "element",
           attrs: {
-            ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
             ...this.expanded !== void 0 ? { expanded: this.expanded } : {},
             ...this.heading !== void 0 ? { heading: this.heading } : {},
             ...this.headingLevel !== void 0 ? { "heading-level": this.headingLevel } : {},
@@ -340,7 +347,7 @@ const VAccordionItem = defineComponent({
         [
           this.$slots.default,
           // @slot icon Add an icon to the component.
-          handleNamedSlot("icon", this.$slots["icon"])
+          handleNamedSlotV2("icon", this.$slots["icon"])
         ]
       );
     }
@@ -350,7 +357,6 @@ const VAccordionItem = defineComponent({
         ref: "element",
         class: "vvd-component",
         ...handleVue3Props({
-          ...this.ariaCurrent !== void 0 ? { "^aria-current": this.ariaCurrent } : {},
           ...this.expanded !== void 0 && this.expanded !== false ? { "^expanded": this.expanded } : {},
           ...this.heading !== void 0 ? { "^heading": this.heading } : {},
           ...this.headingLevel !== void 0 ? { "^heading-level": this.headingLevel } : {},
@@ -387,7 +393,7 @@ const VAccordionItem = defineComponent({
         // @ts-ignore
         this.$slots.default && this.$slots.default(),
         // @slot icon Add an icon to the component.
-        handleNamedSlot("icon", this.$slots["icon"])
+        handleNamedSlotV3("icon", this.$slots["icon"])
       ]
     );
   }
@@ -403,13 +409,6 @@ const VActionGroup = defineComponent({
       type: String,
       default: void 0
     },
-    /**
-     * Indicates the element that represents the current item within a container or set of related elements.
-     */
-    ariaCurrent: {
-      type: String,
-      default: void 0
-    },
     /**
      * The shape the ActionGroup should have.
      */
@@ -468,7 +467,6 @@ const VActionGroup = defineComponent({
           ref: "element",
           attrs: {
             ...this.appearance !== void 0 ? { appearance: this.appearance } : {},
-            ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
             ...this.shape !== void 0 ? { shape: this.shape } : {},
             ...this.tight !== void 0 ? { tight: this.tight } : {}
           },
@@ -504,7 +502,6 @@ const VActionGroup = defineComponent({
         class: "vvd-component",
         ...handleVue3Props({
           ...this.appearance !== void 0 ? { "^appearance": this.appearance } : {},
-          ...this.ariaCurrent !== void 0 ? { "^aria-current": this.ariaCurrent } : {},
           ...this.shape !== void 0 ? { "^shape": this.shape } : {},
           ...this.tight !== void 0 && this.tight !== false ? { "^tight": this.tight } : {}
         }),
@@ -538,13 +535,6 @@ const VActionGroup = defineComponent({
 const VAlert = defineComponent({
   name: "VAlert",
   props: {
-    /**
-     * Indicates the element that represents the current item within a container or set of related elements.
-     */
-    ariaCurrent: {
-      type: String,
-      default: void 0
-    },
     /**
      * Sets an appropriate icon / icon color for the connotation.
      */
@@ -564,7 +554,7 @@ const VAlert = defineComponent({
      */
     headline: { type: String, default: void 0 },
     /**
-     * The icon to display in the Alert. Takes precedence over the connotation's icon.
+     * A decorative icon the custom element should have.
      * See the Vivid Icon Gallery for available icons: https://icons.vivid.vonage.com/
      */
     icon: { type: String, default: void 0 },
@@ -658,7 +648,6 @@ const VAlert = defineComponent({
         {
           ref: "element",
           attrs: {
-            ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
             ...this.connotation !== void 0 ? { connotation: this.connotation } : {},
             ...this.dismissButtonAriaLabel !== void 0 ? { "dismiss-button-aria-label": this.dismissButtonAriaLabel } : {},
             ...this.headline !== void 0 ? { headline: this.headline } : {},
@@ -701,11 +690,11 @@ const VAlert = defineComponent({
         [
           this.$slots.default,
           // @slot action-items Add action items to the Alert using this slot.
-          handleNamedSlot("action-items", this.$slots["action-items"]),
+          handleNamedSlotV2("action-items", this.$slots["action-items"]),
           // @slot icon Add an icon to the component.
-          handleNamedSlot("icon", this.$slots["icon"]),
+          handleNamedSlotV2("icon", this.$slots["icon"]),
           // @slot main The main content of the Alert.
-          handleNamedSlot("main", this.$slots["main"])
+          handleNamedSlotV2("main", this.$slots["main"])
         ]
       );
     }
@@ -715,7 +704,6 @@ const VAlert = defineComponent({
         ref: "element",
         class: "vvd-component",
         ...handleVue3Props({
-          ...this.ariaCurrent !== void 0 ? { "^aria-current": this.ariaCurrent } : {},
           ...this.connotation !== void 0 ? { "^connotation": this.connotation } : {},
           ...this.dismissButtonAriaLabel !== void 0 ? { "^dismiss-button-aria-label": this.dismissButtonAriaLabel } : {},
           ...this.headline !== void 0 ? { "^headline": this.headline } : {},
@@ -756,11 +744,11 @@ const VAlert = defineComponent({
         // @ts-ignore
         this.$slots.default && this.$slots.default(),
         // @slot action-items Add action items to the Alert using this slot.
-        handleNamedSlot("action-items", this.$slots["action-items"]),
+        handleNamedSlotV3("action-items", this.$slots["action-items"]),
         // @slot icon Add an icon to the component.
-        handleNamedSlot("icon", this.$slots["icon"]),
+        handleNamedSlotV3("icon", this.$slots["icon"]),
         // @slot main The main content of the Alert.
-        handleNamedSlot("main", this.$slots["main"])
+        handleNamedSlotV3("main", this.$slots["main"])
       ]
     );
   }
@@ -769,13 +757,6 @@ const VAlert = defineComponent({
 const VAudioPlayer = defineComponent({
   name: "VAudioPlayer",
   props: {
-    /**
-     * Indicates the element that represents the current item within a container or set of related elements.
-     */
-    ariaCurrent: {
-      type: String,
-      default: void 0
-    },
     /**
      * The connotation the audio-player should have.
      */
@@ -879,7 +860,6 @@ const VAudioPlayer = defineComponent({
         {
           ref: "element",
           attrs: {
-            ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
             ...this.connotation !== void 0 ? { connotation: this.connotation } : {},
             ...this.disabled !== void 0 ? { disabled: this.disabled } : {},
             ...this.notime !== void 0 ? { notime: this.notime } : {},
@@ -923,7 +903,6 @@ const VAudioPlayer = defineComponent({
         ref: "element",
         class: "vvd-component",
         ...handleVue3Props({
-          ...this.ariaCurrent !== void 0 ? { "^aria-current": this.ariaCurrent } : {},
           ...this.connotation !== void 0 ? { "^connotation": this.connotation } : {},
           ...this.disabled !== void 0 && this.disabled !== false ? { "^disabled": this.disabled } : {},
           ...this.notime !== void 0 && this.notime !== false ? { "^notime": this.notime } : {},
@@ -973,13 +952,6 @@ const VAvatar = defineComponent({
       type: String,
       default: void 0
     },
-    /**
-     * Indicates the element that represents the current item within a container or set of related elements.
-     */
-    ariaCurrent: {
-      type: String,
-      default: void 0
-    },
     /**
      * The connotation the avatar should have.
      */
@@ -1054,7 +1026,6 @@ const VAvatar = defineComponent({
           ref: "element",
           attrs: {
             ...this.appearance !== void 0 ? { appearance: this.appearance } : {},
-            ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
             ...this.connotation !== void 0 ? { connotation: this.connotation } : {},
             ...this.icon !== void 0 ? { icon: this.icon } : {},
             ...this.initials !== void 0 ? { initials: this.initials } : {},
@@ -1086,7 +1057,7 @@ const VAvatar = defineComponent({
         [
           this.$slots.default,
           // @slot graphic Assign nodes to the graphic slot to set a graphic media of any kind (e.g. image, illustration etc).
-          handleNamedSlot("graphic", this.$slots["graphic"])
+          handleNamedSlotV2("graphic", this.$slots["graphic"])
         ]
       );
     }
@@ -1097,7 +1068,6 @@ const VAvatar = defineComponent({
         class: "vvd-component",
         ...handleVue3Props({
           ...this.appearance !== void 0 ? { "^appearance": this.appearance } : {},
-          ...this.ariaCurrent !== void 0 ? { "^aria-current": this.ariaCurrent } : {},
           ...this.connotation !== void 0 ? { "^connotation": this.connotation } : {},
           ...this.icon !== void 0 ? { "^icon": this.icon } : {},
           ...this.initials !== void 0 ? { "^initials": this.initials } : {},
@@ -1127,7 +1097,7 @@ const VAvatar = defineComponent({
         // @ts-ignore
         this.$slots.default && this.$slots.default(),
         // @slot graphic Assign nodes to the graphic slot to set a graphic media of any kind (e.g. image, illustration etc).
-        handleNamedSlot("graphic", this.$slots["graphic"])
+        handleNamedSlotV3("graphic", this.$slots["graphic"])
       ]
     );
   }
@@ -1143,13 +1113,6 @@ const VBadge = defineComponent({
       type: String,
       default: void 0
     },
-    /**
-     * Indicates the element that represents the current item within a container or set of related elements.
-     */
-    ariaCurrent: {
-      type: String,
-      default: void 0
-    },
     /**
      * The connotation the badge should have.
      */
@@ -1221,7 +1184,6 @@ const VBadge = defineComponent({
           ref: "element",
           attrs: {
             ...this.appearance !== void 0 ? { appearance: this.appearance } : {},
-            ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
             ...this.connotation !== void 0 ? { connotation: this.connotation } : {},
             ...this.icon !== void 0 ? { icon: this.icon } : {},
             ...this.iconTrailing !== void 0 ? { "icon-trailing": this.iconTrailing } : {},
@@ -1253,7 +1215,7 @@ const VBadge = defineComponent({
         [
           this.$slots.default,
           // @slot icon Add an icon to the component.
-          handleNamedSlot("icon", this.$slots["icon"])
+          handleNamedSlotV2("icon", this.$slots["icon"])
         ]
       );
     }
@@ -1264,7 +1226,6 @@ const VBadge = defineComponent({
         class: "vvd-component",
         ...handleVue3Props({
           ...this.appearance !== void 0 ? { "^appearance": this.appearance } : {},
-          ...this.ariaCurrent !== void 0 ? { "^aria-current": this.ariaCurrent } : {},
           ...this.connotation !== void 0 ? { "^connotation": this.connotation } : {},
           ...this.icon !== void 0 ? { "^icon": this.icon } : {},
           ...this.iconTrailing !== void 0 && this.iconTrailing !== false ? { "^icon-trailing": this.iconTrailing } : {},
@@ -1294,7 +1255,7 @@ const VBadge = defineComponent({
         // @ts-ignore
         this.$slots.default && this.$slots.default(),
         // @slot icon Add an icon to the component.
-        handleNamedSlot("icon", this.$slots["icon"])
+        handleNamedSlotV3("icon", this.$slots["icon"])
       ]
     );
   }
@@ -1305,13 +1266,6 @@ const VBanner = defineComponent({
   props: {
     actionHref: { type: String, default: void 0 },
     actionText: { type: String, default: void 0 },
-    /**
-     * Indicates the element that represents the current item within a container or set of related elements.
-     */
-    ariaCurrent: {
-      type: String,
-      default: void 0
-    },
     connotation: {
       type: String,
       default: void 0
@@ -1376,7 +1330,6 @@ const VBanner = defineComponent({
           attrs: {
             ...this.actionHref !== void 0 ? { "action-href": this.actionHref } : {},
             ...this.actionText !== void 0 ? { "action-text": this.actionText } : {},
-            ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
             ...this.connotation !== void 0 ? { connotation: this.connotation } : {},
             ...this.dismissAriaLabel !== void 0 ? { "dismiss-aria-label": this.dismissAriaLabel } : {},
             ...this.icon !== void 0 ? { icon: this.icon } : {},
@@ -1408,9 +1361,9 @@ const VBanner = defineComponent({
         [
           this.$slots.default,
           // @slot action-items Add action items to banner using this slot.
-          handleNamedSlot("action-items", this.$slots["action-items"]),
+          handleNamedSlotV2("action-items", this.$slots["action-items"]),
           // @slot icon Add an icon to the component.
-          handleNamedSlot("icon", this.$slots["icon"])
+          handleNamedSlotV2("icon", this.$slots["icon"])
         ]
       );
     }
@@ -1422,7 +1375,6 @@ const VBanner = defineComponent({
         ...handleVue3Props({
           ...this.actionHref !== void 0 ? { "^action-href": this.actionHref } : {},
           ...this.actionText !== void 0 ? { "^action-text": this.actionText } : {},
-          ...this.ariaCurrent !== void 0 ? { "^aria-current": this.ariaCurrent } : {},
           ...this.connotation !== void 0 ? { "^connotation": this.connotation } : {},
           ...this.dismissAriaLabel !== void 0 ? { "^dismiss-aria-label": this.dismissAriaLabel } : {},
           ...this.icon !== void 0 ? { "^icon": this.icon } : {},
@@ -1452,9 +1404,9 @@ const VBanner = defineComponent({
         // @ts-ignore
         this.$slots.default && this.$slots.default(),
         // @slot action-items Add action items to banner using this slot.
-        handleNamedSlot("action-items", this.$slots["action-items"]),
+        handleNamedSlotV3("action-items", this.$slots["action-items"]),
         // @slot icon Add an icon to the component.
-        handleNamedSlot("icon", this.$slots["icon"])
+        handleNamedSlotV3("icon", this.$slots["icon"])
       ]
     );
   }
@@ -1462,15 +1414,7 @@ const VBanner = defineComponent({
 
 const VBreadcrumb = defineComponent({
   name: "VBreadcrumb",
-  props: {
-    /**
-     * Indicates the element that represents the current item within a container or set of related elements.
-     */
-    ariaCurrent: {
-      type: String,
-      default: void 0
-    }
-  },
+  props: {},
   emits: [
     /**
      * Fires when the element loses focus.
@@ -1515,9 +1459,7 @@ const VBreadcrumb = defineComponent({
         this.componentName,
         {
           ref: "element",
-          attrs: {
-            ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {}
-          },
+          attrs: {},
           class: "vvd-component",
           on: {
             blur: (event) => {
@@ -1548,9 +1490,7 @@ const VBreadcrumb = defineComponent({
       {
         ref: "element",
         class: "vvd-component",
-        ...handleVue3Props({
-          ...this.ariaCurrent !== void 0 ? { "^aria-current": this.ariaCurrent } : {}
-        }),
+        ...handleVue3Props({}),
         onBlur: (event) => {
           this.$emit("blur", event);
         },
@@ -1581,13 +1521,6 @@ const VBreadcrumb = defineComponent({
 const VBreadcrumbItem = defineComponent({
   name: "VBreadcrumbItem",
   props: {
-    /**
-     * Indicates the element that represents the current item within a container or set of related elements.
-     */
-    ariaCurrent: {
-      type: String,
-      default: void 0
-    },
     /**
      * See https://www.w3.org/WAI/PF/aria/roles#link for more information
      */
@@ -1680,7 +1613,6 @@ const VBreadcrumbItem = defineComponent({
         {
           ref: "element",
           attrs: {
-            ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
             ...this.ariaExpanded !== void 0 ? { "aria-expanded": this.ariaExpanded } : {},
             ...this.download !== void 0 ? { download: this.download } : {},
             ...this.href !== void 0 ? { href: this.href } : {},
@@ -1723,7 +1655,6 @@ const VBreadcrumbItem = defineComponent({
         ref: "element",
         class: "vvd-component",
         ...handleVue3Props({
-          ...this.ariaCurrent !== void 0 ? { "^aria-current": this.ariaCurrent } : {},
           ...this.ariaExpanded !== void 0 ? { "^aria-expanded": this.ariaExpanded } : {},
           ...this.download !== void 0 ? { "^download": this.download } : {},
           ...this.href !== void 0 ? { "^href": this.href } : {},
@@ -1776,13 +1707,6 @@ const VButton = defineComponent({
       type: String,
       default: void 0
     },
-    /**
-     * Indicates the element that represents the current item within a container or set of related elements.
-     */
-    ariaCurrent: {
-      type: String,
-      default: void 0
-    },
     /**
      * Determines if the element should receive document focus on page load.
      */
@@ -1982,7 +1906,6 @@ const VButton = defineComponent({
           attrs: {
             ...this.active !== void 0 ? { active: this.active } : {},
             ...this.appearance !== void 0 ? { appearance: this.appearance } : {},
-            ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
             ...this.autofocus !== void 0 ? { autofocus: this.autofocus } : {},
             ...this.connotation !== void 0 ? { connotation: this.connotation } : {},
             ...this.disabled !== void 0 ? { disabled: this.disabled } : {},
@@ -2039,7 +1962,7 @@ const VButton = defineComponent({
         [
           this.$slots.default,
           // @slot icon Add an icon to the component.
-          handleNamedSlot("icon", this.$slots["icon"])
+          handleNamedSlotV2("icon", this.$slots["icon"])
         ]
       );
     }
@@ -2051,7 +1974,6 @@ const VButton = defineComponent({
         ...handleVue3Props({
           ...this.active !== void 0 && this.active !== false ? { "^active": this.active } : {},
           ...this.appearance !== void 0 ? { "^appearance": this.appearance } : {},
-          ...this.ariaCurrent !== void 0 ? { "^aria-current": this.ariaCurrent } : {},
           ...this.autofocus !== void 0 && this.autofocus !== false ? { "^autofocus": this.autofocus } : {},
           ...this.connotation !== void 0 ? { "^connotation": this.connotation } : {},
           ...this.disabled !== void 0 && this.disabled !== false ? { "^disabled": this.disabled } : {},
@@ -2106,7 +2028,7 @@ const VButton = defineComponent({
         // @ts-ignore
         this.$slots.default && this.$slots.default(),
         // @slot icon Add an icon to the component.
-        handleNamedSlot("icon", this.$slots["icon"])
+        handleNamedSlotV3("icon", this.$slots["icon"])
       ]
     );
   }
@@ -2115,13 +2037,6 @@ const VButton = defineComponent({
 const VCalendar = defineComponent({
   name: "VCalendar",
   props: {
-    /**
-     * Indicates the element that represents the current item within a container or set of related elements.
-     */
-    ariaCurrent: {
-      type: String,
-      default: void 0
-    },
     /**
      * The date within a week of choice.
      * Accepts any parameter acceptable by the `Date()` constructor.
@@ -2215,7 +2130,6 @@ const VCalendar = defineComponent({
         {
           ref: "element",
           attrs: {
-            ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
             ...this.hour12 !== void 0 ? { hour12: this.hour12 } : {},
             ...this.startDay !== void 0 ? { "start-day": this.startDay } : {},
             ...this.stickyMode !== void 0 ? { "sticky-mode": this.stickyMode } : {}
@@ -2249,19 +2163,19 @@ const VCalendar = defineComponent({
         [
           this.$slots.default,
           // @slot day-0 Assign elements to corresponding day column using this slot.
-          handleNamedSlot("day-0", this.$slots["day-0"]),
+          handleNamedSlotV2("day-0", this.$slots["day-0"]),
           // @slot day-1 Assign elements to corresponding day column using this slot.
-          handleNamedSlot("day-1", this.$slots["day-1"]),
+          handleNamedSlotV2("day-1", this.$slots["day-1"]),
           // @slot day-2 Assign elements to corresponding day column using this slot.
-          handleNamedSlot("day-2", this.$slots["day-2"]),
+          handleNamedSlotV2("day-2", this.$slots["day-2"]),
           // @slot day-3 Assign elements to corresponding day column using this slot.
-          handleNamedSlot("day-3", this.$slots["day-3"]),
+          handleNamedSlotV2("day-3", this.$slots["day-3"]),
           // @slot day-4 Assign elements to corresponding day column using this slot.
-          handleNamedSlot("day-4", this.$slots["day-4"]),
+          handleNamedSlotV2("day-4", this.$slots["day-4"]),
           // @slot day-5 Assign elements to corresponding day column using this slot.
-          handleNamedSlot("day-5", this.$slots["day-5"]),
+          handleNamedSlotV2("day-5", this.$slots["day-5"]),
           // @slot day-6 Assign elements to corresponding day column using this slot.
-          handleNamedSlot("day-6", this.$slots["day-6"])
+          handleNamedSlotV2("day-6", this.$slots["day-6"])
         ]
       );
     }
@@ -2271,7 +2185,6 @@ const VCalendar = defineComponent({
         ref: "element",
         class: "vvd-component",
         ...handleVue3Props({
-          ...this.ariaCurrent !== void 0 ? { "^aria-current": this.ariaCurrent } : {},
           ...this.datetime !== void 0 ? { ".datetime": this.datetime } : {},
           ...this.hour12 !== void 0 && this.hour12 !== false ? { "^hour12": this.hour12 } : {},
           ...this.locales !== void 0 ? { ".locales": this.locales } : {},
@@ -2301,19 +2214,19 @@ const VCalendar = defineComponent({
         // @ts-ignore
         this.$slots.default && this.$slots.default(),
         // @slot day-0 Assign elements to corresponding day column using this slot.
-        handleNamedSlot("day-0", this.$slots["day-0"]),
+        handleNamedSlotV3("day-0", this.$slots["day-0"]),
         // @slot day-1 Assign elements to corresponding day column using this slot.
-        handleNamedSlot("day-1", this.$slots["day-1"]),
+        handleNamedSlotV3("day-1", this.$slots["day-1"]),
         // @slot day-2 Assign elements to corresponding day column using this slot.
-        handleNamedSlot("day-2", this.$slots["day-2"]),
+        handleNamedSlotV3("day-2", this.$slots["day-2"]),
         // @slot day-3 Assign elements to corresponding day column using this slot.
-        handleNamedSlot("day-3", this.$slots["day-3"]),
+        handleNamedSlotV3("day-3", this.$slots["day-3"]),
         // @slot day-4 Assign elements to corresponding day column using this slot.
-        handleNamedSlot("day-4", this.$slots["day-4"]),
+        handleNamedSlotV3("day-4", this.$slots["day-4"]),
         // @slot day-5 Assign elements to corresponding day column using this slot.
-        handleNamedSlot("day-5", this.$slots["day-5"]),
+        handleNamedSlotV3("day-5", this.$slots["day-5"]),
         // @slot day-6 Assign elements to corresponding day column using this slot.
-        handleNamedSlot("day-6", this.$slots["day-6"])
+        handleNamedSlotV3("day-6", this.$slots["day-6"])
       ]
     );
   }
@@ -2329,13 +2242,6 @@ const VCalendarEvent = defineComponent({
       type: String,
       default: void 0
     },
-    /**
-     * Indicates the element that represents the current item within a container or set of related elements.
-     */
-    ariaCurrent: {
-      type: String,
-      default: void 0
-    },
     /**
      * The connotation the calendar event should have.
      */
@@ -2413,7 +2319,6 @@ const VCalendarEvent = defineComponent({
           ref: "element",
           attrs: {
             ...this.appearance !== void 0 ? { appearance: this.appearance } : {},
-            ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
             ...this.connotation !== void 0 ? { connotation: this.connotation } : {},
             ...this.description !== void 0 ? { description: this.description } : {},
             ...this.duration !== void 0 ? { duration: this.duration } : {},
@@ -2453,7 +2358,6 @@ const VCalendarEvent = defineComponent({
         class: "vvd-component",
         ...handleVue3Props({
           ...this.appearance !== void 0 ? { "^appearance": this.appearance } : {},
-          ...this.ariaCurrent !== void 0 ? { "^aria-current": this.ariaCurrent } : {},
           ...this.connotation !== void 0 ? { "^connotation": this.connotation } : {},
           ...this.description !== void 0 ? { "^description": this.description } : {},
           ...this.duration !== void 0 ? { "^duration": this.duration } : {},
@@ -2498,13 +2402,6 @@ const VCard = defineComponent({
       type: String,
       default: void 0
     },
-    /**
-     * Indicates the element that represents the current item within a container or set of related elements.
-     */
-    ariaCurrent: {
-      type: String,
-      default: void 0
-    },
     /**
      * card elevation dp
      */
@@ -2579,7 +2476,6 @@ const VCard = defineComponent({
           ref: "element",
           attrs: {
             ...this.appearance !== void 0 ? { appearance: this.appearance } : {},
-            ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
             ...this.elevation !== void 0 ? { elevation: this.elevation } : {},
             ...this.headline !== void 0 ? { headline: this.headline } : {},
             ...this.icon !== void 0 ? { icon: this.icon } : {},
@@ -2611,15 +2507,15 @@ const VCard = defineComponent({
         [
           this.$slots.default,
           // @slot footer The footer slot is for content in the card footer.
-          handleNamedSlot("footer", this.$slots["footer"]),
+          handleNamedSlotV2("footer", this.$slots["footer"]),
           // @slot graphic The graphic slot overrides the icon property.
-          handleNamedSlot("graphic", this.$slots["graphic"]),
+          handleNamedSlotV2("graphic", this.$slots["graphic"]),
           // @slot main Assign nodes to main slot to fully override a card's predefined flow and style with your own.
-          handleNamedSlot("main", this.$slots["main"]),
+          handleNamedSlotV2("main", this.$slots["main"]),
           // @slot media The media slot is mainly for images or video content above the card header.
-          handleNamedSlot("media", this.$slots["media"]),
+          handleNamedSlotV2("media", this.$slots["media"]),
           // @slot meta The meta slot is for action content in the card header.
-          handleNamedSlot("meta", this.$slots["meta"])
+          handleNamedSlotV2("meta", this.$slots["meta"])
         ]
       );
     }
@@ -2630,7 +2526,6 @@ const VCard = defineComponent({
         class: "vvd-component",
         ...handleVue3Props({
           ...this.appearance !== void 0 ? { "^appearance": this.appearance } : {},
-          ...this.ariaCurrent !== void 0 ? { "^aria-current": this.ariaCurrent } : {},
           ...this.elevation !== void 0 ? { "^elevation": this.elevation } : {},
           ...this.headline !== void 0 ? { "^headline": this.headline } : {},
           ...this.icon !== void 0 ? { "^icon": this.icon } : {},
@@ -2660,15 +2555,15 @@ const VCard = defineComponent({
         // @ts-ignore
         this.$slots.default && this.$slots.default(),
         // @slot footer The footer slot is for content in the card footer.
-        handleNamedSlot("footer", this.$slots["footer"]),
+        handleNamedSlotV3("footer", this.$slots["footer"]),
         // @slot graphic The graphic slot overrides the icon property.
-        handleNamedSlot("graphic", this.$slots["graphic"]),
+        handleNamedSlotV3("graphic", this.$slots["graphic"]),
         // @slot main Assign nodes to main slot to fully override a card's predefined flow and style with your own.
-        handleNamedSlot("main", this.$slots["main"]),
+        handleNamedSlotV3("main", this.$slots["main"]),
         // @slot media The media slot is mainly for images or video content above the card header.
-        handleNamedSlot("media", this.$slots["media"]),
+        handleNamedSlotV3("media", this.$slots["media"]),
         // @slot meta The meta slot is for action content in the card header.
-        handleNamedSlot("meta", this.$slots["meta"])
+        handleNamedSlotV3("meta", this.$slots["meta"])
       ]
     );
   }
@@ -2681,13 +2576,6 @@ const VCheckbox = defineComponent({
     event: "update:modelValue"
   } : void 0,
   props: {
-    /**
-     * Indicates the element that represents the current item within a container or set of related elements.
-     */
-    ariaCurrent: {
-      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
@@ -2727,6 +2615,10 @@ const VCheckbox = defineComponent({
      * The helper text for the form element.
      */
     helperText: { type: String, default: void 0 },
+    /**
+     * The indeterminate state of the control
+     */
+    indeterminate: { type: Boolean, default: void 0 },
     /**
      * The initial value of the form. This value sets the `value` property
      * only when the `value` property has not been explicitly set.
@@ -2821,7 +2713,6 @@ const VCheckbox = defineComponent({
         {
           ref: "element",
           attrs: {
-            ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
             ...(this.modelValue ?? this.checked) !== void 0 ? { "current-checked": this.modelValue ?? this.checked } : {},
             ...this.connotation !== void 0 ? { connotation: this.connotation } : {},
             ...this.defaultChecked !== void 0 ? { checked: this.defaultChecked } : {},
@@ -2838,6 +2729,9 @@ const VCheckbox = defineComponent({
             ...this.value !== void 0 ? { "current-value": this.value } : {}
           },
           class: "vvd-component",
+          domProps: {
+            ...this.indeterminate !== void 0 ? { indeterminate: this.indeterminate } : {}
+          },
           on: {
             blur: (event) => {
               this.$emit("blur", event);
@@ -2866,7 +2760,7 @@ const VCheckbox = defineComponent({
         [
           this.$slots.default,
           // @slot helper-text Describes how to use the checkbox. Alternative to the `helper-text` attribute.
-          handleNamedSlot("helper-text", this.$slots["helper-text"])
+          handleNamedSlotV2("helper-text", this.$slots["helper-text"])
         ]
       );
     }
@@ -2876,13 +2770,13 @@ const VCheckbox = defineComponent({
         ref: "element",
         class: "vvd-component",
         ...handleVue3Props({
-          ...this.ariaCurrent !== void 0 ? { "^aria-current": this.ariaCurrent } : {},
           ...(this.modelValue ?? this.checked) !== void 0 && (this.modelValue ?? this.checked) !== false ? { "^current-checked": this.modelValue ?? this.checked } : {},
           ...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.helperText !== void 0 ? { "^helper-text": this.helperText } : {},
+          ...this.indeterminate !== void 0 ? { ".indeterminate": this.indeterminate } : {},
           ...this.initialValue !== void 0 ? { "^value": this.initialValue } : {},
           ...this.label !== void 0 ? { "^label": this.label } : {},
           ...this.name !== void 0 ? { "^name": this.name } : {},
@@ -2919,7 +2813,7 @@ const VCheckbox = defineComponent({
         // @ts-ignore
         this.$slots.default && this.$slots.default(),
         // @slot helper-text Describes how to use the checkbox. Alternative to the `helper-text` attribute.
-        handleNamedSlot("helper-text", this.$slots["helper-text"])
+        handleNamedSlotV3("helper-text", this.$slots["helper-text"])
       ]
     );
   }
@@ -2939,13 +2833,6 @@ const VCombobox = defineComponent({
       type: String,
       default: void 0
     },
-    /**
-     * Indicates the element that represents the current item within a container or set of related elements.
-     */
-    ariaCurrent: {
-      type: String,
-      default: void 0
-    },
     /**
      * The autocomplete attribute.
      */
@@ -3121,7 +3008,6 @@ const VCombobox = defineComponent({
           ref: "element",
           attrs: {
             ...this.appearance !== void 0 ? { appearance: this.appearance } : {},
-            ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
             ...this.autocomplete !== void 0 ? { autocomplete: this.autocomplete } : {},
             ...this.disabled !== void 0 ? { disabled: this.disabled } : {},
             ...this.errorText !== void 0 ? { "error-text": this.errorText } : {},
@@ -3169,11 +3055,11 @@ const VCombobox = defineComponent({
         [
           this.$slots.default,
           // @slot helper-text Describes how to use the combobox. Alternative to the `helper-text` attribute.
-          handleNamedSlot("helper-text", this.$slots["helper-text"]),
+          handleNamedSlotV2("helper-text", this.$slots["helper-text"]),
           // @slot icon Slot to add an icon to the combobox control.
-          handleNamedSlot("icon", this.$slots["icon"]),
+          handleNamedSlotV2("icon", this.$slots["icon"]),
           // @slot meta Slot to add meta content to the combobox control.
-          handleNamedSlot("meta", this.$slots["meta"])
+          handleNamedSlotV2("meta", this.$slots["meta"])
         ]
       );
     }
@@ -3184,7 +3070,6 @@ const VCombobox = defineComponent({
         class: "vvd-component",
         ...handleVue3Props({
           ...this.appearance !== void 0 ? { "^appearance": this.appearance } : {},
-          ...this.ariaCurrent !== void 0 ? { "^aria-current": this.ariaCurrent } : {},
           ...this.autocomplete !== void 0 ? { "^autocomplete": this.autocomplete } : {},
           ...this.disabled !== void 0 && this.disabled !== false ? { "^disabled": this.disabled } : {},
           ...this.errorText !== void 0 ? { "^error-text": this.errorText } : {},
@@ -3230,11 +3115,11 @@ const VCombobox = defineComponent({
         // @ts-ignore
         this.$slots.default && this.$slots.default(),
         // @slot helper-text Describes how to use the combobox. Alternative to the `helper-text` attribute.
-        handleNamedSlot("helper-text", this.$slots["helper-text"]),
+        handleNamedSlotV3("helper-text", this.$slots["helper-text"]),
         // @slot icon Slot to add an icon to the combobox control.
-        handleNamedSlot("icon", this.$slots["icon"]),
+        handleNamedSlotV3("icon", this.$slots["icon"]),
         // @slot meta Slot to add meta content to the combobox control.
-        handleNamedSlot("meta", this.$slots["meta"])
+        handleNamedSlotV3("meta", this.$slots["meta"])
       ]
     );
   }
@@ -3243,13 +3128,6 @@ const VCombobox = defineComponent({
 const VDataGrid = defineComponent({
   name: "VDataGrid",
   props: {
-    /**
-     * Indicates the element that represents the current item within a container or set of related elements.
-     */
-    ariaCurrent: {
-      type: String,
-      default: void 0
-    },
     /**
      * Whether the grid should automatically generate a header row and its type
      */
@@ -3335,7 +3213,6 @@ const VDataGrid = defineComponent({
         {
           ref: "element",
           attrs: {
-            ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
             ...this.generateHeader !== void 0 ? { "generate-header": this.generateHeader } : {},
             ...this.gridTemplateColumns !== void 0 ? { "grid-template-columns": this.gridTemplateColumns } : {},
             ...this.noTabbing !== void 0 ? { "no-tabbing": this.noTabbing } : {},
@@ -3378,7 +3255,6 @@ const VDataGrid = defineComponent({
         ref: "element",
         class: "vvd-component",
         ...handleVue3Props({
-          ...this.ariaCurrent !== void 0 ? { "^aria-current": this.ariaCurrent } : {},
           ...this.generateHeader !== void 0 ? { "^generate-header": this.generateHeader } : {},
           ...this.gridTemplateColumns !== void 0 ? { "^grid-template-columns": this.gridTemplateColumns } : {},
           ...this.noTabbing !== void 0 && this.noTabbing !== false ? { "^no-tabbing": this.noTabbing } : {},
@@ -3418,13 +3294,6 @@ const VDataGrid = defineComponent({
 const VDataGridCell = defineComponent({
   name: "VDataGridCell",
   props: {
-    /**
-     * Indicates the element that represents the current item within a container or set of related elements.
-     */
-    ariaCurrent: {
-      type: String,
-      default: void 0
-    },
     /**
      * Indicates the selected status.
      */
@@ -3524,7 +3393,6 @@ const VDataGridCell = defineComponent({
         {
           ref: "element",
           attrs: {
-            ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
             ...this.ariaSelected !== void 0 ? { "aria-selected": this.ariaSelected } : {},
             ...this.ariaSort !== void 0 ? { "aria-sort": this.ariaSort } : {},
             ...this.cellType !== void 0 ? { "cell-type": this.cellType } : {},
@@ -3573,7 +3441,6 @@ const VDataGridCell = defineComponent({
         ref: "element",
         class: "vvd-component",
         ...handleVue3Props({
-          ...this.ariaCurrent !== void 0 ? { "^aria-current": this.ariaCurrent } : {},
           ...this.ariaSelected !== void 0 ? { "^aria-selected": this.ariaSelected } : {},
           ...this.ariaSort !== void 0 ? { "^aria-sort": this.ariaSort } : {},
           ...this.cellType !== void 0 ? { "^cell-type": this.cellType } : {},
@@ -3619,13 +3486,6 @@ const VDataGridCell = defineComponent({
 const VDataGridRow = defineComponent({
   name: "VDataGridRow",
   props: {
-    /**
-     * Indicates the element that represents the current item within a container or set of related elements.
-     */
-    ariaCurrent: {
-      type: String,
-      default: void 0
-    },
     /**
      * Indicates the selected status.
      */
@@ -3711,7 +3571,6 @@ const VDataGridRow = defineComponent({
         {
           ref: "element",
           attrs: {
-            ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
             ...this.ariaSelected !== void 0 ? { "aria-selected": this.ariaSelected } : {},
             ...this.gridTemplateColumns !== void 0 ? { "grid-template-columns": this.gridTemplateColumns } : {},
             ...this.rowType !== void 0 ? { "row-type": this.rowType } : {}
@@ -3753,7 +3612,6 @@ const VDataGridRow = defineComponent({
         ref: "element",
         class: "vvd-component",
         ...handleVue3Props({
-          ...this.ariaCurrent !== void 0 ? { "^aria-current": this.ariaCurrent } : {},
           ...this.ariaSelected !== void 0 ? { "^aria-selected": this.ariaSelected } : {},
           ...this.gridTemplateColumns !== void 0 ? { "^grid-template-columns": this.gridTemplateColumns } : {},
           ...this.rowType !== void 0 ? { "^row-type": this.rowType } : {}
@@ -3798,13 +3656,6 @@ const VDatePicker = defineComponent({
     event: "update:modelValue"
   } : void 0,
   props: {
-    /**
-     * Indicates the element that represents the current item within a container or set of related elements.
-     */
-    ariaCurrent: {
-      type: String,
-      default: void 0
-    },
     /**
      * Sets the element's disabled state. A disabled element will not be included during form submission.
      */
@@ -3905,7 +3756,6 @@ const VDatePicker = defineComponent({
         {
           ref: "element",
           attrs: {
-            ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
             ...this.disabled !== void 0 ? { disabled: this.disabled } : {},
             ...this.errorText !== void 0 ? { "error-text": this.errorText } : {},
             ...this.initialValue !== void 0 ? { value: this.initialValue } : {},
@@ -3946,7 +3796,7 @@ const VDatePicker = defineComponent({
         [
           this.$slots.default,
           // @slot helper-text Describes how to use the date-picker. Alternative to the `helper-text` attribute.
-          handleNamedSlot("helper-text", this.$slots["helper-text"])
+          handleNamedSlotV2("helper-text", this.$slots["helper-text"])
         ]
       );
     }
@@ -3956,7 +3806,6 @@ const VDatePicker = defineComponent({
         ref: "element",
         class: "vvd-component",
         ...handleVue3Props({
-          ...this.ariaCurrent !== void 0 ? { "^aria-current": this.ariaCurrent } : {},
           ...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 } : {},
@@ -3995,7 +3844,7 @@ const VDatePicker = defineComponent({
         // @ts-ignore
         this.$slots.default && this.$slots.default(),
         // @slot helper-text Describes how to use the date-picker. Alternative to the `helper-text` attribute.
-        handleNamedSlot("helper-text", this.$slots["helper-text"])
+        handleNamedSlotV3("helper-text", this.$slots["helper-text"])
       ]
     );
   }
@@ -4004,13 +3853,6 @@ const VDatePicker = defineComponent({
 const VDateRangePicker = defineComponent({
   name: "VDateRangePicker",
   props: {
-    /**
-     * Indicates the element that represents the current item within a container or set of related elements.
-     */
-    ariaCurrent: {
-      type: String,
-      default: void 0
-    },
     /**
      * Sets the element's disabled state. A disabled element will not be included during form submission.
      */
@@ -4151,7 +3993,6 @@ const VDateRangePicker = defineComponent({
         {
           ref: "element",
           attrs: {
-            ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
             ...this.disabled !== void 0 ? { disabled: this.disabled } : {},
             ...this.end !== void 0 ? { "current-end": this.end } : {},
             ...this.errorText !== void 0 ? { "error-text": this.errorText } : {},
@@ -4203,7 +4044,7 @@ const VDateRangePicker = defineComponent({
         [
           this.$slots.default,
           // @slot helper-text Describes how to use the date-range-picker. Alternative to the `helper-text` attribute.
-          handleNamedSlot("helper-text", this.$slots["helper-text"])
+          handleNamedSlotV2("helper-text", this.$slots["helper-text"])
         ]
       );
     }
@@ -4213,7 +4054,6 @@ const VDateRangePicker = defineComponent({
         ref: "element",
         class: "vvd-component",
         ...handleVue3Props({
-          ...this.ariaCurrent !== void 0 ? { "^aria-current": this.ariaCurrent } : {},
           ...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 } : {},
@@ -4263,7 +4103,7 @@ const VDateRangePicker = defineComponent({
         // @ts-ignore
         this.$slots.default && this.$slots.default(),
         // @slot helper-text Describes how to use the date-range-picker. Alternative to the `helper-text` attribute.
-        handleNamedSlot("helper-text", this.$slots["helper-text"])
+        handleNamedSlotV3("helper-text", this.$slots["helper-text"])
       ]
     );
   }
@@ -4276,13 +4116,6 @@ const VDateTimePicker = defineComponent({
     event: "update:modelValue"
   } : void 0,
   props: {
-    /**
-     * Indicates the element that represents the current item within a container or set of related elements.
-     */
-    ariaCurrent: {
-      type: String,
-      default: void 0
-    },
     /**
      * Forces a 12h or 24h clock to be used.
      */
@@ -4414,7 +4247,6 @@ const VDateTimePicker = defineComponent({
         {
           ref: "element",
           attrs: {
-            ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
             ...this.clock !== void 0 ? { clock: this.clock } : {},
             ...this.disabled !== void 0 ? { disabled: this.disabled } : {},
             ...this.errorText !== void 0 ? { "error-text": this.errorText } : {},
@@ -4462,7 +4294,7 @@ const VDateTimePicker = defineComponent({
         [
           this.$slots.default,
           // @slot helper-text Describes how to use the date-picker. Alternative to the `helper-text` attribute.
-          handleNamedSlot("helper-text", this.$slots["helper-text"])
+          handleNamedSlotV2("helper-text", this.$slots["helper-text"])
         ]
       );
     }
@@ -4472,7 +4304,6 @@ const VDateTimePicker = defineComponent({
         ref: "element",
         class: "vvd-component",
         ...handleVue3Props({
-          ...this.ariaCurrent !== void 0 ? { "^aria-current": this.ariaCurrent } : {},
           ...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 } : {},
@@ -4518,7 +4349,7 @@ const VDateTimePicker = defineComponent({
         // @ts-ignore
         this.$slots.default && this.$slots.default(),
         // @slot helper-text Describes how to use the date-picker. Alternative to the `helper-text` attribute.
-        handleNamedSlot("helper-text", this.$slots["helper-text"])
+        handleNamedSlotV3("helper-text", this.$slots["helper-text"])
       ]
     );
   }
@@ -4531,13 +4362,6 @@ const VDialPad = defineComponent({
     event: "update:modelValue"
   } : void 0,
   props: {
-    /**
-     * Indicates the element that represents the current item within a container or set of related elements.
-     */
-    ariaCurrent: {
-      type: String,
-      default: void 0
-    },
     /**
      * Indicates the active state of the dial-pad.
      */
@@ -4658,7 +4482,6 @@ const VDialPad = defineComponent({
         {
           ref: "element",
           attrs: {
-            ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
             ...this.callActive !== void 0 ? { "call-active": this.callActive } : {},
             ...this.callButtonLabel !== void 0 ? { "call-button-label": this.callButtonLabel } : {},
             ...this.disabled !== void 0 ? { disabled: this.disabled } : {},
@@ -4715,7 +4538,6 @@ const VDialPad = defineComponent({
         ref: "element",
         class: "vvd-component",
         ...handleVue3Props({
-          ...this.ariaCurrent !== void 0 ? { "^aria-current": this.ariaCurrent } : {},
           ...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 } : {},
@@ -4771,13 +4593,6 @@ const VDialPad = defineComponent({
 const VDialog = defineComponent({
   name: "VDialog",
   props: {
-    /**
-     * Indicates the element that represents the current item within a container or set of related elements.
-     */
-    ariaCurrent: {
-      type: String,
-      default: void 0
-    },
     dismissButtonAriaLabel: {
       type: String,
       default: void 0
@@ -4894,7 +4709,6 @@ const VDialog = defineComponent({
         {
           ref: "element",
           attrs: {
-            ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
             ...this.dismissButtonAriaLabel !== void 0 ? { "dismiss-button-aria-label": this.dismissButtonAriaLabel } : {},
             ...this.fullWidthBody !== void 0 ? { "full-width-body": this.fullWidthBody } : {},
             ...this.headline !== void 0 ? { headline: this.headline } : {},
@@ -4944,15 +4758,15 @@ const VDialog = defineComponent({
         [
           this.$slots.default,
           // @slot action-items Use the action-items slot in order to add action buttons to the bottom of the dialog.
-          handleNamedSlot("action-items", this.$slots["action-items"]),
+          handleNamedSlotV2("action-items", this.$slots["action-items"]),
           // @slot body Use the body slot in order to add custom HTML to the dialog.
-          handleNamedSlot("body", this.$slots["body"]),
+          handleNamedSlotV2("body", this.$slots["body"]),
           // @slot footer Use the footer slot in order to add action buttons to the bottom of the dialog.
-          handleNamedSlot("footer", this.$slots["footer"]),
+          handleNamedSlotV2("footer", this.$slots["footer"]),
           // @slot graphic Use the graphic slot in order to replace the icon.
-          handleNamedSlot("graphic", this.$slots["graphic"]),
+          handleNamedSlotV2("graphic", this.$slots["graphic"]),
           // @slot main Assign nodes to the main slot to fully override a dialog’s predefined flow and style with your own.
-          handleNamedSlot("main", this.$slots["main"])
+          handleNamedSlotV2("main", this.$slots["main"])
         ]
       );
     }
@@ -4962,7 +4776,6 @@ const VDialog = defineComponent({
         ref: "element",
         class: "vvd-component",
         ...handleVue3Props({
-          ...this.ariaCurrent !== void 0 ? { "^aria-current": this.ariaCurrent } : {},
           ...this.dismissButtonAriaLabel !== void 0 ? { "^dismiss-button-aria-label": this.dismissButtonAriaLabel } : {},
           ...this.fullWidthBody !== void 0 && this.fullWidthBody !== false ? { "^full-width-body": this.fullWidthBody } : {},
           ...this.headline !== void 0 ? { "^headline": this.headline } : {},
@@ -5010,15 +4823,15 @@ const VDialog = defineComponent({
         // @ts-ignore
         this.$slots.default && this.$slots.default(),
         // @slot action-items Use the action-items slot in order to add action buttons to the bottom of the dialog.
-        handleNamedSlot("action-items", this.$slots["action-items"]),
+        handleNamedSlotV3("action-items", this.$slots["action-items"]),
         // @slot body Use the body slot in order to add custom HTML to the dialog.
-        handleNamedSlot("body", this.$slots["body"]),
+        handleNamedSlotV3("body", this.$slots["body"]),
         // @slot footer Use the footer slot in order to add action buttons to the bottom of the dialog.
-        handleNamedSlot("footer", this.$slots["footer"]),
+        handleNamedSlotV3("footer", this.$slots["footer"]),
         // @slot graphic Use the graphic slot in order to replace the icon.
-        handleNamedSlot("graphic", this.$slots["graphic"]),
+        handleNamedSlotV3("graphic", this.$slots["graphic"]),
         // @slot main Assign nodes to the main slot to fully override a dialog’s predefined flow and style with your own.
-        handleNamedSlot("main", this.$slots["main"])
+        handleNamedSlotV3("main", this.$slots["main"])
       ]
     );
   }
@@ -5027,13 +4840,6 @@ const VDialog = defineComponent({
 const VDivider = defineComponent({
   name: "VDivider",
   props: {
-    /**
-     * Indicates the element that represents the current item within a container or set of related elements.
-     */
-    ariaCurrent: {
-      type: String,
-      default: void 0
-    },
     /**
      * The orientation of the divider.
      */
@@ -5094,7 +4900,6 @@ const VDivider = defineComponent({
         {
           ref: "element",
           attrs: {
-            ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
             ...this.orientation !== void 0 ? { orientation: this.orientation } : {},
             ...this.role !== void 0 ? { role: this.role } : {}
           },
@@ -5129,7 +4934,6 @@ const VDivider = defineComponent({
         ref: "element",
         class: "vvd-component",
         ...handleVue3Props({
-          ...this.ariaCurrent !== void 0 ? { "^aria-current": this.ariaCurrent } : {},
           ...this.orientation !== void 0 ? { "^orientation": this.orientation } : {},
           ...this.role !== void 0 ? { "^role": this.role } : {}
         }),
@@ -5163,13 +4967,6 @@ const VDivider = defineComponent({
 const VEmptyState = defineComponent({
   name: "VEmptyState",
   props: {
-    /**
-     * Indicates the element that represents the current item within a container or set of related elements.
-     */
-    ariaCurrent: {
-      type: String,
-      default: void 0
-    },
     /**
      * The connotation the empty state should have.
      */
@@ -5239,7 +5036,6 @@ const VEmptyState = defineComponent({
         {
           ref: "element",
           attrs: {
-            ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
             ...this.connotation !== void 0 ? { connotation: this.connotation } : {},
             ...this.headline !== void 0 ? { headline: this.headline } : {},
             ...this.icon !== void 0 ? { icon: this.icon } : {},
@@ -5270,9 +5066,9 @@ const VEmptyState = defineComponent({
         [
           this.$slots.default,
           // @slot action-items Slot to add action items to the empty state
-          handleNamedSlot("action-items", this.$slots["action-items"]),
+          handleNamedSlotV2("action-items", this.$slots["action-items"]),
           // @slot graphic The graphic slot allows overriding the icon with a custom illustration
-          handleNamedSlot("graphic", this.$slots["graphic"])
+          handleNamedSlotV2("graphic", this.$slots["graphic"])
         ]
       );
     }
@@ -5282,7 +5078,6 @@ const VEmptyState = defineComponent({
         ref: "element",
         class: "vvd-component",
         ...handleVue3Props({
-          ...this.ariaCurrent !== void 0 ? { "^aria-current": this.ariaCurrent } : {},
           ...this.connotation !== void 0 ? { "^connotation": this.connotation } : {},
           ...this.headline !== void 0 ? { "^headline": this.headline } : {},
           ...this.icon !== void 0 ? { "^icon": this.icon } : {},
@@ -5311,9 +5106,9 @@ const VEmptyState = defineComponent({
         // @ts-ignore
         this.$slots.default && this.$slots.default(),
         // @slot action-items Slot to add action items to the empty state
-        handleNamedSlot("action-items", this.$slots["action-items"]),
+        handleNamedSlotV3("action-items", this.$slots["action-items"]),
         // @slot graphic The graphic slot allows overriding the icon with a custom illustration
-        handleNamedSlot("graphic", this.$slots["graphic"])
+        handleNamedSlotV3("graphic", this.$slots["graphic"])
       ]
     );
   }
@@ -5322,13 +5117,6 @@ const VEmptyState = defineComponent({
 const VFab = defineComponent({
   name: "VFab",
   props: {
-    /**
-     * Indicates the element that represents the current item within a container or set of related elements.
-     */
-    ariaCurrent: {
-      type: String,
-      default: void 0
-    },
     /**
      * Determines if the element should receive document focus on page load.
      */
@@ -5472,7 +5260,6 @@ const VFab = defineComponent({
         {
           ref: "element",
           attrs: {
-            ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
             ...this.autofocus !== void 0 ? { autofocus: this.autofocus } : {},
             ...this.connotation !== void 0 ? { connotation: this.connotation } : {},
             ...this.disabled !== void 0 ? { disabled: this.disabled } : {},
@@ -5517,7 +5304,7 @@ const VFab = defineComponent({
         [
           this.$slots.default,
           // @slot icon Slot to add an icon to fab.
-          handleNamedSlot("icon", this.$slots["icon"])
+          handleNamedSlotV2("icon", this.$slots["icon"])
         ]
       );
     }
@@ -5527,7 +5314,6 @@ const VFab = defineComponent({
         ref: "element",
         class: "vvd-component",
         ...handleVue3Props({
-          ...this.ariaCurrent !== void 0 ? { "^aria-current": this.ariaCurrent } : {},
           ...this.autofocus !== void 0 && this.autofocus !== false ? { "^autofocus": this.autofocus } : {},
           ...this.connotation !== void 0 ? { "^connotation": this.connotation } : {},
           ...this.disabled !== void 0 && this.disabled !== false ? { "^disabled": this.disabled } : {},
@@ -5570,7 +5356,7 @@ const VFab = defineComponent({
         // @ts-ignore
         this.$slots.default && this.$slots.default(),
         // @slot icon Slot to add an icon to fab.
-        handleNamedSlot("icon", this.$slots["icon"])
+        handleNamedSlotV3("icon", this.$slots["icon"])
       ]
     );
   }
@@ -5583,13 +5369,6 @@ const VFilePicker = defineComponent({
      * List of accepted files types
      */
     accept: { type: String, default: void 0 },
-    /**
-     * Indicates the element that represents the current item within a container or set of related elements.
-     */
-    ariaCurrent: {
-      type: String,
-      default: void 0
-    },
     /**
      * Sets the element's disabled state. A disabled element will not be included during form submission.
      */
@@ -5759,7 +5538,6 @@ const VFilePicker = defineComponent({
           ref: "element",
           attrs: {
             ...this.accept !== void 0 ? { accept: this.accept } : {},
-            ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
             ...this.disabled !== void 0 ? { disabled: this.disabled } : {},
             ...this.errorText !== void 0 ? { "error-text": this.errorText } : {},
             ...this.fileTooBigError !== void 0 ? { "file-too-big-error": this.fileTooBigError } : {},
@@ -5804,7 +5582,7 @@ const VFilePicker = defineComponent({
         [
           this.$slots.default,
           // @slot helper-text Describes how to use the file-picker. Alternative to the `helper-text` attribute.
-          handleNamedSlot("helper-text", this.$slots["helper-text"])
+          handleNamedSlotV2("helper-text", this.$slots["helper-text"])
         ]
       );
     }
@@ -5815,7 +5593,6 @@ const VFilePicker = defineComponent({
         class: "vvd-component",
         ...handleVue3Props({
           ...this.accept !== void 0 ? { "^accept": this.accept } : {},
-          ...this.ariaCurrent !== void 0 ? { "^aria-current": this.ariaCurrent } : {},
           ...this.disabled !== void 0 && this.disabled !== false ? { "^disabled": this.disabled } : {},
           ...this.errorText !== void 0 ? { "^error-text": this.errorText } : {},
           ...this.fileTooBigError !== void 0 ? { "^file-too-big-error": this.fileTooBigError } : {},
@@ -5858,7 +5635,7 @@ const VFilePicker = defineComponent({
         // @ts-ignore
         this.$slots.default && this.$slots.default(),
         // @slot helper-text Describes how to use the file-picker. Alternative to the `helper-text` attribute.
-        handleNamedSlot("helper-text", this.$slots["helper-text"])
+        handleNamedSlotV3("helper-text", this.$slots["helper-text"])
       ]
     );
   }
@@ -5871,13 +5648,6 @@ const VHeader = defineComponent({
      * applies scheme alternate to header region
      */
     alternate: { type: Boolean, default: void 0 },
-    /**
-     * Indicates the element that represents the current item within a container or set of related elements.
-     */
-    ariaCurrent: {
-      type: String,
-      default: void 0
-    },
     /**
      * header elevation shadow
      */
@@ -5929,7 +5699,6 @@ const VHeader = defineComponent({
           ref: "element",
           attrs: {
             ...this.alternate !== void 0 ? { alternate: this.alternate } : {},
-            ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
             ...this.elevationShadow !== void 0 ? { "elevation-shadow": this.elevationShadow } : {}
           },
           class: "vvd-component",
@@ -5957,9 +5726,9 @@ const VHeader = defineComponent({
         [
           this.$slots.default,
           // @slot action-items Nodes assigned to action-items slot will be set at the end of the header.
-          handleNamedSlot("action-items", this.$slots["action-items"]),
+          handleNamedSlotV2("action-items", this.$slots["action-items"]),
           // @slot app-content Content vertically aligned with header.
-          handleNamedSlot("app-content", this.$slots["app-content"])
+          handleNamedSlotV2("app-content", this.$slots["app-content"])
         ]
       );
     }
@@ -5970,7 +5739,6 @@ const VHeader = defineComponent({
         class: "vvd-component",
         ...handleVue3Props({
           ...this.alternate !== void 0 && this.alternate !== false ? { "^alternate": this.alternate } : {},
-          ...this.ariaCurrent !== void 0 ? { "^aria-current": this.ariaCurrent } : {},
           ...this.elevationShadow !== void 0 && this.elevationShadow !== false ? { "^elevation-shadow": this.elevationShadow } : {}
         }),
         onBlur: (event) => {
@@ -5996,9 +5764,9 @@ const VHeader = defineComponent({
         // @ts-ignore
         this.$slots.default && this.$slots.default(),
         // @slot action-items Nodes assigned to action-items slot will be set at the end of the header.
-        handleNamedSlot("action-items", this.$slots["action-items"]),
+        handleNamedSlotV3("action-items", this.$slots["action-items"]),
         // @slot app-content Content vertically aligned with header.
-        handleNamedSlot("app-content", this.$slots["app-content"])
+        handleNamedSlotV3("app-content", this.$slots["app-content"])
       ]
     );
   }
@@ -6007,13 +5775,6 @@ const VHeader = defineComponent({
 const VIcon = defineComponent({
   name: "VIcon",
   props: {
-    /**
-     * Indicates the element that represents the current item within a container or set of related elements.
-     */
-    ariaCurrent: {
-      type: String,
-      default: void 0
-    },
     /**
      * The connotation the icon should have.
      */
@@ -6080,7 +5841,6 @@ const VIcon = defineComponent({
         {
           ref: "element",
           attrs: {
-            ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
             ...this.connotation !== void 0 ? { connotation: this.connotation } : {},
             ...this.name !== void 0 ? { name: this.name } : {},
             ...this.size !== void 0 ? { size: this.size } : {}
@@ -6116,7 +5876,6 @@ const VIcon = defineComponent({
         ref: "element",
         class: "vvd-component",
         ...handleVue3Props({
-          ...this.ariaCurrent !== void 0 ? { "^aria-current": this.ariaCurrent } : {},
           ...this.connotation !== void 0 ? { "^connotation": this.connotation } : {},
           ...this.name !== void 0 ? { "^name": this.name } : {},
           ...this.size !== void 0 ? { "^size": this.size } : {}
@@ -6151,13 +5910,6 @@ const VIcon = defineComponent({
 const VLayout = defineComponent({
   name: "VLayout",
   props: {
-    /**
-     * Indicates the element that represents the current item within a container or set of related elements.
-     */
-    ariaCurrent: {
-      type: String,
-      default: void 0
-    },
     /**
      * sets the initial preferred auto-sizing from predefined available options
      */
@@ -6239,7 +5991,6 @@ const VLayout = defineComponent({
         {
           ref: "element",
           attrs: {
-            ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
             ...this.autoSizing !== void 0 ? { "auto-sizing": this.autoSizing } : {},
             ...this.columnBasis !== void 0 ? { "column-basis": this.columnBasis } : {},
             ...this.columnSpacing !== void 0 ? { "column-spacing": this.columnSpacing } : {},
@@ -6277,7 +6028,6 @@ const VLayout = defineComponent({
         ref: "element",
         class: "vvd-component",
         ...handleVue3Props({
-          ...this.ariaCurrent !== void 0 ? { "^aria-current": this.ariaCurrent } : {},
           ...this.autoSizing !== void 0 ? { "^auto-sizing": this.autoSizing } : {},
           ...this.columnBasis !== void 0 ? { "^column-basis": this.columnBasis } : {},
           ...this.columnSpacing !== void 0 ? { "^column-spacing": this.columnSpacing } : {},
@@ -6321,13 +6071,6 @@ const VMenu = defineComponent({
       type: [String, HTMLElement],
       default: void 0
     },
-    /**
-     * Indicates the element that represents the current item within a container or set of related elements.
-     */
-    ariaCurrent: {
-      type: String,
-      default: void 0
-    },
     /**
      * indicates whether the menu will automatically close when focus moves away from it.
      */
@@ -6430,7 +6173,6 @@ const VMenu = defineComponent({
         {
           ref: "element",
           attrs: {
-            ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
             ...this.autoDismiss !== void 0 ? { "auto-dismiss": this.autoDismiss } : {},
             ...this.open !== void 0 ? { open: this.open } : {},
             ...this.placement !== void 0 ? { placement: this.placement } : {},
@@ -6471,11 +6213,11 @@ const VMenu = defineComponent({
         [
           this.$slots.default,
           // @slot action-items Used to add action items to the bottom of the menu.
-          handleNamedSlot("action-items", this.$slots["action-items"]),
+          handleNamedSlotV2("action-items", this.$slots["action-items"]),
           // @slot anchor Used to set the anchor element for the menu.
-          handleNamedSlot("anchor", this.$slots["anchor"]),
+          handleNamedSlotV2("anchor", this.$slots["anchor"]),
           // @slot header Used to add additional content to the top of the menu.
-          handleNamedSlot("header", this.$slots["header"])
+          handleNamedSlotV2("header", this.$slots["header"])
         ]
       );
     }
@@ -6486,7 +6228,6 @@ const VMenu = defineComponent({
         class: "vvd-component",
         ...handleVue3Props({
           ...this.anchor !== void 0 ? { ".anchor": this.anchor } : {},
-          ...this.ariaCurrent !== void 0 ? { "^aria-current": this.ariaCurrent } : {},
           ...this.autoDismiss !== void 0 && this.autoDismiss !== false ? { "^auto-dismiss": this.autoDismiss } : {},
           ...this.open !== void 0 && this.open !== false ? { "^open": this.open } : {},
           ...this.placement !== void 0 ? { "^placement": this.placement } : {},
@@ -6522,11 +6263,11 @@ const VMenu = defineComponent({
         // @ts-ignore
         this.$slots.default && this.$slots.default(),
         // @slot action-items Used to add action items to the bottom of the menu.
-        handleNamedSlot("action-items", this.$slots["action-items"]),
+        handleNamedSlotV3("action-items", this.$slots["action-items"]),
         // @slot anchor Used to set the anchor element for the menu.
-        handleNamedSlot("anchor", this.$slots["anchor"]),
+        handleNamedSlotV3("anchor", this.$slots["anchor"]),
         // @slot header Used to add additional content to the top of the menu.
-        handleNamedSlot("header", this.$slots["header"])
+        handleNamedSlotV3("header", this.$slots["header"])
       ]
     );
   }
@@ -6539,13 +6280,6 @@ const VMenuItem = defineComponent({
     event: "update:modelValue"
   } : void 0,
   props: {
-    /**
-     * Indicates the element that represents the current item within a container or set of related elements.
-     */
-    ariaCurrent: {
-      type: String,
-      default: void 0
-    },
     /**
      * Controls the appearance of the check indicator.
      */
@@ -6661,7 +6395,6 @@ const VMenuItem = defineComponent({
         {
           ref: "element",
           attrs: {
-            ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
             ...this.checkAppearance !== void 0 ? { "check-appearance": this.checkAppearance } : {},
             ...this.checkTrailing !== void 0 ? { "check-trailing": this.checkTrailing } : {},
             ...(this.modelValue ?? this.checked) !== void 0 ? { checked: this.modelValue ?? this.checked } : {},
@@ -6705,11 +6438,11 @@ const VMenuItem = defineComponent({
         [
           this.$slots.default,
           // @slot meta Assign nodes to the `meta` slot to set a badge or an additional icon.
-          handleNamedSlot("meta", this.$slots["meta"]),
+          handleNamedSlotV2("meta", this.$slots["meta"]),
           // @slot submenu Assign a Menu to the `submenu` slot to add a submenu.
-          handleNamedSlot("submenu", this.$slots["submenu"]),
+          handleNamedSlotV2("submenu", this.$slots["submenu"]),
           // @slot trailing-meta Assign nodes to the `meta` slot to set a badge or an additional icon.
-          handleNamedSlot("trailing-meta", this.$slots["trailing-meta"])
+          handleNamedSlotV2("trailing-meta", this.$slots["trailing-meta"])
         ]
       );
     }
@@ -6719,7 +6452,6 @@ const VMenuItem = defineComponent({
         ref: "element",
         class: "vvd-component",
         ...handleVue3Props({
-          ...this.ariaCurrent !== void 0 ? { "^aria-current": this.ariaCurrent } : {},
           ...this.checkAppearance !== void 0 ? { "^check-appearance": this.checkAppearance } : {},
           ...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 } : {},
@@ -6761,11 +6493,11 @@ const VMenuItem = defineComponent({
         // @ts-ignore
         this.$slots.default && this.$slots.default(),
         // @slot meta Assign nodes to the `meta` slot to set a badge or an additional icon.
-        handleNamedSlot("meta", this.$slots["meta"]),
+        handleNamedSlotV3("meta", this.$slots["meta"]),
         // @slot submenu Assign a Menu to the `submenu` slot to add a submenu.
-        handleNamedSlot("submenu", this.$slots["submenu"]),
+        handleNamedSlotV3("submenu", this.$slots["submenu"]),
         // @slot trailing-meta Assign nodes to the `meta` slot to set a badge or an additional icon.
-        handleNamedSlot("trailing-meta", this.$slots["trailing-meta"])
+        handleNamedSlotV3("trailing-meta", this.$slots["trailing-meta"])
       ]
     );
   }
@@ -6773,15 +6505,7 @@ const VMenuItem = defineComponent({
 
 const VNav = defineComponent({
   name: "VNav",
-  props: {
-    /**
-     * Indicates the element that represents the current item within a container or set of related elements.
-     */
-    ariaCurrent: {
-      type: String,
-      default: void 0
-    }
-  },
+  props: {},
   emits: [
     /**
      * Fires when the element loses focus.
@@ -6826,9 +6550,7 @@ const VNav = defineComponent({
         this.componentName,
         {
           ref: "element",
-          attrs: {
-            ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {}
-          },
+          attrs: {},
           class: "vvd-component",
           on: {
             blur: (event) => {
@@ -6859,9 +6581,7 @@ const VNav = defineComponent({
       {
         ref: "element",
         class: "vvd-component",
-        ...handleVue3Props({
-          ...this.ariaCurrent !== void 0 ? { "^aria-current": this.ariaCurrent } : {}
-        }),
+        ...handleVue3Props({}),
         onBlur: (event) => {
           this.$emit("blur", event);
         },
@@ -6899,13 +6619,6 @@ const VNavDisclosure = defineComponent({
       type: String,
       default: void 0
     },
-    /**
-     * Indicates the element that represents the current item within a container or set of related elements.
-     */
-    ariaCurrent: {
-      type: String,
-      default: void 0
-    },
     /**
      * The connotation nav-disclosure should have.
      */
@@ -6978,7 +6691,6 @@ const VNavDisclosure = defineComponent({
           ref: "element",
           attrs: {
             ...this.appearance !== void 0 ? { appearance: this.appearance } : {},
-            ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
             ...this.connotation !== void 0 ? { connotation: this.connotation } : {},
             ...this.icon !== void 0 ? { icon: this.icon } : {},
             ...this.label !== void 0 ? { label: this.label } : {},
@@ -7012,9 +6724,9 @@ const VNavDisclosure = defineComponent({
         [
           this.$slots.default,
           // @slot icon Add an icon to the component.
-          handleNamedSlot("icon", this.$slots["icon"]),
+          handleNamedSlotV2("icon", this.$slots["icon"]),
           // @slot meta A slot to add additional content to the nav disclosure.
-          handleNamedSlot("meta", this.$slots["meta"])
+          handleNamedSlotV2("meta", this.$slots["meta"])
         ]
       );
     }
@@ -7025,7 +6737,6 @@ const VNavDisclosure = defineComponent({
         class: "vvd-component",
         ...handleVue3Props({
           ...this.appearance !== void 0 ? { "^appearance": this.appearance } : {},
-          ...this.ariaCurrent !== void 0 ? { "^aria-current": this.ariaCurrent } : {},
           ...this.connotation !== void 0 ? { "^connotation": this.connotation } : {},
           ...this.icon !== void 0 ? { "^icon": this.icon } : {},
           ...this.label !== void 0 ? { "^label": this.label } : {},
@@ -7057,9 +6768,9 @@ const VNavDisclosure = defineComponent({
         // @ts-ignore
         this.$slots.default && this.$slots.default(),
         // @slot icon Add an icon to the component.
-        handleNamedSlot("icon", this.$slots["icon"]),
+        handleNamedSlotV3("icon", this.$slots["icon"]),
         // @slot meta A slot to add additional content to the nav disclosure.
-        handleNamedSlot("meta", this.$slots["meta"])
+        handleNamedSlotV3("meta", this.$slots["meta"])
       ]
     );
   }
@@ -7075,13 +6786,6 @@ const VNavItem = defineComponent({
       type: String,
       default: void 0
     },
-    /**
-     * Indicates the element that represents the current item within a container or set of related elements.
-     */
-    ariaCurrent: {
-      type: String,
-      default: void 0
-    },
     /**
      * See https://www.w3.org/WAI/PF/aria/roles#link for more information
      */
@@ -7191,7 +6895,6 @@ const VNavItem = defineComponent({
           ref: "element",
           attrs: {
             ...this.appearance !== void 0 ? { appearance: this.appearance } : {},
-            ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
             ...this.ariaExpanded !== void 0 ? { "aria-expanded": this.ariaExpanded } : {},
             ...this.connotation !== void 0 ? { connotation: this.connotation } : {},
             ...this.download !== void 0 ? { download: this.download } : {},
@@ -7230,9 +6933,9 @@ const VNavItem = defineComponent({
         [
           this.$slots.default,
           // @slot icon Add an icon to the component.
-          handleNamedSlot("icon", this.$slots["icon"]),
+          handleNamedSlotV2("icon", this.$slots["icon"]),
           // @slot meta A slot to add additional content to the nav item.
-          handleNamedSlot("meta", this.$slots["meta"])
+          handleNamedSlotV2("meta", this.$slots["meta"])
         ]
       );
     }
@@ -7243,7 +6946,6 @@ const VNavItem = defineComponent({
         class: "vvd-component",
         ...handleVue3Props({
           ...this.appearance !== void 0 ? { "^appearance": this.appearance } : {},
-          ...this.ariaCurrent !== void 0 ? { "^aria-current": this.ariaCurrent } : {},
           ...this.ariaExpanded !== void 0 ? { "^aria-expanded": this.ariaExpanded } : {},
           ...this.connotation !== void 0 ? { "^connotation": this.connotation } : {},
           ...this.download !== void 0 ? { "^download": this.download } : {},
@@ -7280,9 +6982,9 @@ const VNavItem = defineComponent({
         // @ts-ignore
         this.$slots.default && this.$slots.default(),
         // @slot icon Add an icon to the component.
-        handleNamedSlot("icon", this.$slots["icon"]),
+        handleNamedSlotV3("icon", this.$slots["icon"]),
         // @slot meta A slot to add additional content to the nav item.
-        handleNamedSlot("meta", this.$slots["meta"])
+        handleNamedSlotV3("meta", this.$slots["meta"])
       ]
     );
   }
@@ -7291,13 +6993,6 @@ const VNavItem = defineComponent({
 const VNote = defineComponent({
   name: "VNote",
   props: {
-    /**
-     * Indicates the element that represents the current item within a container or set of related elements.
-     */
-    ariaCurrent: {
-      type: String,
-      default: void 0
-    },
     connotation: {
       type: String,
       default: void 0
@@ -7357,7 +7052,6 @@ const VNote = defineComponent({
         {
           ref: "element",
           attrs: {
-            ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
             ...this.connotation !== void 0 ? { connotation: this.connotation } : {},
             ...this.headline !== void 0 ? { headline: this.headline } : {},
             ...this.icon !== void 0 ? { icon: this.icon } : {}
@@ -7387,7 +7081,7 @@ const VNote = defineComponent({
         [
           this.$slots.default,
           // @slot icon Add an icon to the component.
-          handleNamedSlot("icon", this.$slots["icon"])
+          handleNamedSlotV2("icon", this.$slots["icon"])
         ]
       );
     }
@@ -7397,7 +7091,6 @@ const VNote = defineComponent({
         ref: "element",
         class: "vvd-component",
         ...handleVue3Props({
-          ...this.ariaCurrent !== void 0 ? { "^aria-current": this.ariaCurrent } : {},
           ...this.connotation !== void 0 ? { "^connotation": this.connotation } : {},
           ...this.headline !== void 0 ? { "^headline": this.headline } : {},
           ...this.icon !== void 0 ? { "^icon": this.icon } : {}
@@ -7425,7 +7118,7 @@ const VNote = defineComponent({
         // @ts-ignore
         this.$slots.default && this.$slots.default(),
         // @slot icon Add an icon to the component.
-        handleNamedSlot("icon", this.$slots["icon"])
+        handleNamedSlotV3("icon", this.$slots["icon"])
       ]
     );
   }
@@ -7442,13 +7135,6 @@ const VNumberField = defineComponent({
       type: String,
       default: void 0
     },
-    /**
-     * Indicates the element that represents the current item within a container or set of related elements.
-     */
-    ariaCurrent: {
-      type: String,
-      default: void 0
-    },
     autoComplete: { type: String, default: void 0 },
     /**
      * 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.
@@ -7652,7 +7338,6 @@ const VNumberField = defineComponent({
           ref: "element",
           attrs: {
             ...this.appearance !== void 0 ? { appearance: this.appearance } : {},
-            ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
             ...this.autoComplete !== void 0 ? { autoComplete: this.autoComplete } : {},
             ...this.autofocus !== void 0 ? { autofocus: this.autofocus } : {},
             ...this.charCount !== void 0 ? { "char-count": this.charCount } : {},
@@ -7709,7 +7394,7 @@ const VNumberField = defineComponent({
         [
           this.$slots.default,
           // @slot helper-text Describes how to use the number-field. Alternative to the `helper-text` attribute.
-          handleNamedSlot("helper-text", this.$slots["helper-text"])
+          handleNamedSlotV2("helper-text", this.$slots["helper-text"])
         ]
       );
     }
@@ -7720,7 +7405,6 @@ const VNumberField = defineComponent({
         class: "vvd-component",
         ...handleVue3Props({
           ...this.appearance !== void 0 ? { "^appearance": this.appearance } : {},
-          ...this.ariaCurrent !== void 0 ? { "^aria-current": this.ariaCurrent } : {},
           ...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 } : {},
@@ -7775,7 +7459,7 @@ const VNumberField = defineComponent({
         // @ts-ignore
         this.$slots.default && this.$slots.default(),
         // @slot helper-text Describes how to use the number-field. Alternative to the `helper-text` attribute.
-        handleNamedSlot("helper-text", this.$slots["helper-text"])
+        handleNamedSlotV3("helper-text", this.$slots["helper-text"])
       ]
     );
   }
@@ -7784,13 +7468,6 @@ const VNumberField = defineComponent({
 const VOption = defineComponent({
   name: "VOption",
   props: {
-    /**
-     * Indicates the element that represents the current item within a container or set of related elements.
-     */
-    ariaCurrent: {
-      type: String,
-      default: void 0
-    },
     /**
      * The disabled state of the option.
      */
@@ -7873,7 +7550,6 @@ const VOption = defineComponent({
         {
           ref: "element",
           attrs: {
-            ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
             ...this.disabled !== void 0 ? { disabled: this.disabled } : {},
             ...this.icon !== void 0 ? { icon: this.icon } : {},
             ...this.iconTrailing !== void 0 ? { "icon-trailing": this.iconTrailing } : {},
@@ -7911,7 +7587,7 @@ const VOption = defineComponent({
         [
           this.$slots.default,
           // @slot icon Slot to add an icon to the option.
-          handleNamedSlot("icon", this.$slots["icon"])
+          handleNamedSlotV2("icon", this.$slots["icon"])
         ]
       );
     }
@@ -7921,7 +7597,6 @@ const VOption = defineComponent({
         ref: "element",
         class: "vvd-component",
         ...handleVue3Props({
-          ...this.ariaCurrent !== void 0 ? { "^aria-current": this.ariaCurrent } : {},
           ...this.disabled !== void 0 && this.disabled !== false ? { "^disabled": this.disabled } : {},
           ...this.icon !== void 0 ? { "^icon": this.icon } : {},
           ...this.iconTrailing !== void 0 && this.iconTrailing !== false ? { "^icon-trailing": this.iconTrailing } : {},
@@ -7955,7 +7630,7 @@ const VOption = defineComponent({
         // @ts-ignore
         this.$slots.default && this.$slots.default(),
         // @slot icon Slot to add an icon to the option.
-        handleNamedSlot("icon", this.$slots["icon"])
+        handleNamedSlotV3("icon", this.$slots["icon"])
       ]
     );
   }
@@ -7964,13 +7639,6 @@ const VOption = defineComponent({
 const VPagination = defineComponent({
   name: "VPagination",
   props: {
-    /**
-     * Indicates the element that represents the current item within a container or set of related elements.
-     */
-    ariaCurrent: {
-      type: String,
-      default: void 0
-    },
     navIcons: { type: Boolean, default: void 0 },
     selectedIndex: { type: Number, default: void 0 },
     /**
@@ -8046,7 +7714,6 @@ const VPagination = defineComponent({
         {
           ref: "element",
           attrs: {
-            ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
             ...this.navIcons !== void 0 ? { "nav-icons": this.navIcons } : {},
             ...this.selectedIndex !== void 0 ? { "selected-index": this.selectedIndex } : {},
             ...this.shape !== void 0 ? { shape: this.shape } : {},
@@ -8087,7 +7754,6 @@ const VPagination = defineComponent({
         ref: "element",
         class: "vvd-component",
         ...handleVue3Props({
-          ...this.ariaCurrent !== void 0 ? { "^aria-current": this.ariaCurrent } : {},
           ...this.navIcons !== void 0 && this.navIcons !== false ? { "^nav-icons": this.navIcons } : {},
           ...this.selectedIndex !== void 0 ? { "^selected-index": this.selectedIndex } : {},
           ...this.shape !== void 0 ? { "^shape": this.shape } : {},
@@ -8127,13 +7793,6 @@ const VPagination = defineComponent({
 const VProgress = defineComponent({
   name: "VProgress",
   props: {
-    /**
-     * Indicates the element that represents the current item within a container or set of related elements.
-     */
-    ariaCurrent: {
-      type: String,
-      default: void 0
-    },
     /**
      * Indicates the progress' connotation.
      */
@@ -8214,7 +7873,6 @@ const VProgress = defineComponent({
         {
           ref: "element",
           attrs: {
-            ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
             ...this.connotation !== void 0 ? { connotation: this.connotation } : {},
             ...this.max !== void 0 ? { max: this.max } : {},
             ...this.min !== void 0 ? { min: this.min } : {},
@@ -8254,7 +7912,6 @@ const VProgress = defineComponent({
         ref: "element",
         class: "vvd-component",
         ...handleVue3Props({
-          ...this.ariaCurrent !== void 0 ? { "^aria-current": this.ariaCurrent } : {},
           ...this.connotation !== void 0 ? { "^connotation": this.connotation } : {},
           ...this.max !== void 0 ? { "^max": this.max } : {},
           ...this.min !== void 0 ? { "^min": this.min } : {},
@@ -8293,13 +7950,6 @@ const VProgress = defineComponent({
 const VProgressRing = defineComponent({
   name: "VProgressRing",
   props: {
-    /**
-     * Indicates the element that represents the current item within a container or set of related elements.
-     */
-    ariaCurrent: {
-      type: String,
-      default: void 0
-    },
     connotation: {
       type: String,
       default: void 0
@@ -8373,7 +8023,6 @@ const VProgressRing = defineComponent({
         {
           ref: "element",
           attrs: {
-            ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
             ...this.connotation !== void 0 ? { connotation: this.connotation } : {},
             ...this.max !== void 0 ? { max: this.max } : {},
             ...this.min !== void 0 ? { min: this.min } : {},
@@ -8412,7 +8061,6 @@ const VProgressRing = defineComponent({
         ref: "element",
         class: "vvd-component",
         ...handleVue3Props({
-          ...this.ariaCurrent !== void 0 ? { "^aria-current": this.ariaCurrent } : {},
           ...this.connotation !== void 0 ? { "^connotation": this.connotation } : {},
           ...this.max !== void 0 ? { "^max": this.max } : {},
           ...this.min !== void 0 ? { "^min": this.min } : {},
@@ -8450,13 +8098,6 @@ const VProgressRing = defineComponent({
 const VRadio = defineComponent({
   name: "VRadio",
   props: {
-    /**
-     * Indicates the element that represents the current item within a container or set of related elements.
-     */
-    ariaCurrent: {
-      type: String,
-      default: void 0
-    },
     ariaLabel: { type: String, default: void 0 },
     /**
      * The current checkedness of the element. This property serves as a mechanism
@@ -8561,7 +8202,6 @@ const VRadio = defineComponent({
         {
           ref: "element",
           attrs: {
-            ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
             ...this.ariaLabel !== void 0 ? { "aria-label": this.ariaLabel } : {},
             ...this.checked !== void 0 ? { "current-checked": this.checked } : {},
             ...this.connotation !== void 0 ? { connotation: this.connotation } : {},
@@ -8608,7 +8248,6 @@ const VRadio = defineComponent({
         ref: "element",
         class: "vvd-component",
         ...handleVue3Props({
-          ...this.ariaCurrent !== void 0 ? { "^aria-current": this.ariaCurrent } : {},
           ...this.ariaLabel !== void 0 ? { "^aria-label": this.ariaLabel } : {},
           ...this.checked !== void 0 && this.checked !== false ? { "^current-checked": this.checked } : {},
           ...this.connotation !== void 0 ? { "^connotation": this.connotation } : {},
@@ -8658,13 +8297,6 @@ const VRadioGroup = defineComponent({
     event: "update:modelValue"
   } : void 0,
   props: {
-    /**
-     * Indicates the element that represents the current item within a container or set of related elements.
-     */
-    ariaCurrent: {
-      type: String,
-      default: void 0
-    },
     /**
      * Disables the radio group and child radios.
      */
@@ -8757,7 +8389,6 @@ const VRadioGroup = defineComponent({
         {
           ref: "element",
           attrs: {
-            ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
             ...this.disabled !== void 0 ? { disabled: this.disabled } : {},
             ...this.label !== void 0 ? { label: this.label } : {},
             ...this.name !== void 0 ? { name: this.name } : {},
@@ -8800,7 +8431,6 @@ const VRadioGroup = defineComponent({
         ref: "element",
         class: "vvd-component",
         ...handleVue3Props({
-          ...this.ariaCurrent !== void 0 ? { "^aria-current": this.ariaCurrent } : {},
           ...this.disabled !== void 0 && this.disabled !== false ? { "^disabled": this.disabled } : {},
           ...this.label !== void 0 ? { "^label": this.label } : {},
           ...this.name !== void 0 ? { "^name": this.name } : {},
@@ -8842,13 +8472,6 @@ const VRadioGroup = defineComponent({
 const VRangeSlider = defineComponent({
   name: "VRangeSlider",
   props: {
-    /**
-     * Indicates the element that represents the current item within a container or set of related elements.
-     */
-    ariaCurrent: {
-      type: String,
-      default: void 0
-    },
     /**
      * Aria label for the end thumb
      */
@@ -9024,7 +8647,6 @@ const VRangeSlider = defineComponent({
         {
           ref: "element",
           attrs: {
-            ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
             ...this.ariaEndLabel !== void 0 ? { "aria-end-label": this.ariaEndLabel } : {},
             ...this.ariaStartLabel !== void 0 ? { "aria-start-label": this.ariaStartLabel } : {},
             ...this.connotation !== void 0 ? { connotation: this.connotation } : {},
@@ -9087,7 +8709,6 @@ const VRangeSlider = defineComponent({
         ref: "element",
         class: "vvd-component",
         ...handleVue3Props({
-          ...this.ariaCurrent !== void 0 ? { "^aria-current": this.ariaCurrent } : {},
           ...this.ariaEndLabel !== void 0 ? { "^aria-end-label": this.ariaEndLabel } : {},
           ...this.ariaStartLabel !== void 0 ? { "^aria-start-label": this.ariaStartLabel } : {},
           ...this.connotation !== void 0 ? { "^connotation": this.connotation } : {},
@@ -9149,13 +8770,6 @@ const VRangeSlider = defineComponent({
 const VRichTextEditor = defineComponent({
   name: "VRichTextEditor",
   props: {
-    /**
-     * Indicates the element that represents the current item within a container or set of related elements.
-     */
-    ariaCurrent: {
-      type: String,
-      default: void 0
-    },
     selectionEnd: { type: Number, default: void 0 },
     selectionStart: { type: Number, default: void 0 }
   },
@@ -9198,6 +8812,9 @@ const VRichTextEditor = defineComponent({
     selectionStartChanged() {
       return this.element?.selectionStartChanged();
     },
+    setSelectionDecoration(decoration) {
+      return this.element?.setSelectionDecoration(decoration);
+    },
     setTextSize(size) {
       return this.element?.setTextSize(size);
     }
@@ -9217,7 +8834,6 @@ const VRichTextEditor = defineComponent({
         {
           ref: "element",
           attrs: {
-            ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
             ...this.selectionEnd !== void 0 ? { "selection-end": this.selectionEnd } : {},
             ...this.selectionStart !== void 0 ? { "selection-start": this.selectionStart } : {}
           },
@@ -9252,7 +8868,6 @@ const VRichTextEditor = defineComponent({
         ref: "element",
         class: "vvd-component",
         ...handleVue3Props({
-          ...this.ariaCurrent !== void 0 ? { "^aria-current": this.ariaCurrent } : {},
           ...this.selectionEnd !== void 0 ? { "^selection-end": this.selectionEnd } : {},
           ...this.selectionStart !== void 0 ? { "^selection-start": this.selectionStart } : {}
         }),
@@ -9294,13 +8909,6 @@ const VSearchableSelect = defineComponent({
       type: String,
       default: void 0
     },
-    /**
-     * Indicates the element that represents the current item within a container or set of related elements.
-     */
-    ariaCurrent: {
-      type: String,
-      default: void 0
-    },
     /**
      * Adds a clear button to the input field that clears the selected values.
      */
@@ -9455,7 +9063,6 @@ const VSearchableSelect = defineComponent({
           ref: "element",
           attrs: {
             ...this.appearance !== void 0 ? { appearance: this.appearance } : {},
-            ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
             ...this.clearable !== void 0 ? { clearable: this.clearable } : {},
             ...this.disabled !== void 0 ? { disabled: this.disabled } : {},
             ...this.errorText !== void 0 ? { "error-text": this.errorText } : {},
@@ -9514,17 +9121,17 @@ const VSearchableSelect = defineComponent({
         [
           this.$slots.default,
           // @slot helper-text Describes how to use the component. Alternative to the `helper-text` attribute.
-          handleNamedSlot("helper-text", this.$slots["helper-text"]),
+          handleNamedSlotV2("helper-text", this.$slots["helper-text"]),
           // @slot icon Slot to add an icon to the control.
-          handleNamedSlot("icon", this.$slots["icon"]),
+          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.
-          handleNamedSlot("loading-options", this.$slots["loading-options"]),
+          handleNamedSlotV2("loading-options", this.$slots["loading-options"]),
           // @slot meta Slot to add meta content to the control.
-          handleNamedSlot("meta", this.$slots["meta"]),
+          handleNamedSlotV2("meta", this.$slots["meta"]),
           // @slot no-matches Message that appears when no options match the search query.
-          handleNamedSlot("no-matches", this.$slots["no-matches"]),
+          handleNamedSlotV2("no-matches", this.$slots["no-matches"]),
           // @slot no-options Message that appears when no options are available.
-          handleNamedSlot("no-options", this.$slots["no-options"])
+          handleNamedSlotV2("no-options", this.$slots["no-options"])
         ]
       );
     }
@@ -9535,7 +9142,6 @@ const VSearchableSelect = defineComponent({
         class: "vvd-component",
         ...handleVue3Props({
           ...this.appearance !== void 0 ? { "^appearance": this.appearance } : {},
-          ...this.ariaCurrent !== void 0 ? { "^aria-current": this.ariaCurrent } : {},
           ...this.clearable !== void 0 && this.clearable !== false ? { "^clearable": this.clearable } : {},
           ...this.disabled !== void 0 && this.disabled !== false ? { "^disabled": this.disabled } : {},
           ...this.errorText !== void 0 ? { "^error-text": this.errorText } : {},
@@ -9590,17 +9196,20 @@ const VSearchableSelect = defineComponent({
         // @ts-ignore
         this.$slots.default && this.$slots.default(),
         // @slot helper-text Describes how to use the component. Alternative to the `helper-text` attribute.
-        handleNamedSlot("helper-text", this.$slots["helper-text"]),
+        handleNamedSlotV3("helper-text", this.$slots["helper-text"]),
         // @slot icon Slot to add an icon to the control.
-        handleNamedSlot("icon", this.$slots["icon"]),
+        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.
-        handleNamedSlot("loading-options", this.$slots["loading-options"]),
+        handleNamedSlotV3(
+          "loading-options",
+          this.$slots["loading-options"]
+        ),
         // @slot meta Slot to add meta content to the control.
-        handleNamedSlot("meta", this.$slots["meta"]),
+        handleNamedSlotV3("meta", this.$slots["meta"]),
         // @slot no-matches Message that appears when no options match the search query.
-        handleNamedSlot("no-matches", this.$slots["no-matches"]),
+        handleNamedSlotV3("no-matches", this.$slots["no-matches"]),
         // @slot no-options Message that appears when no options are available.
-        handleNamedSlot("no-options", this.$slots["no-options"])
+        handleNamedSlotV3("no-options", this.$slots["no-options"])
       ]
     );
   }
@@ -9620,13 +9229,6 @@ const VSelect = defineComponent({
       type: String,
       default: void 0
     },
-    /**
-     * Indicates the element that represents the current item within a container or set of related elements.
-     */
-    ariaCurrent: {
-      type: String,
-      default: void 0
-    },
     /**
      * Sets the element's disabled state. A disabled element will not be included during form submission.
      */
@@ -9794,7 +9396,6 @@ const VSelect = defineComponent({
           ref: "element",
           attrs: {
             ...this.appearance !== void 0 ? { appearance: this.appearance } : {},
-            ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
             ...this.disabled !== void 0 ? { disabled: this.disabled } : {},
             ...this.errorText !== void 0 ? { "error-text": this.errorText } : {},
             ...this.fixedDropdown !== void 0 ? { "fixed-dropdown": this.fixedDropdown } : {},
@@ -9842,11 +9443,11 @@ const VSelect = defineComponent({
         [
           this.$slots.default,
           // @slot helper-text Describes how to use the select. Alternative to the `helper-text` attribute.
-          handleNamedSlot("helper-text", this.$slots["helper-text"]),
+          handleNamedSlotV2("helper-text", this.$slots["helper-text"]),
           // @slot icon Slot to add an icon to the select control.
-          handleNamedSlot("icon", this.$slots["icon"]),
+          handleNamedSlotV2("icon", this.$slots["icon"]),
           // @slot meta Slot to add meta content to the select control.
-          handleNamedSlot("meta", this.$slots["meta"])
+          handleNamedSlotV2("meta", this.$slots["meta"])
         ]
       );
     }
@@ -9857,7 +9458,6 @@ const VSelect = defineComponent({
         class: "vvd-component",
         ...handleVue3Props({
           ...this.appearance !== void 0 ? { "^appearance": this.appearance } : {},
-          ...this.ariaCurrent !== void 0 ? { "^aria-current": this.ariaCurrent } : {},
           ...this.disabled !== void 0 && this.disabled !== false ? { "^disabled": this.disabled } : {},
           ...this.errorText !== void 0 ? { "^error-text": this.errorText } : {},
           ...this.fixedDropdown !== void 0 && this.fixedDropdown !== false ? { "^fixed-dropdown": this.fixedDropdown } : {},
@@ -9903,11 +9503,11 @@ const VSelect = defineComponent({
         // @ts-ignore
         this.$slots.default && this.$slots.default(),
         // @slot helper-text Describes how to use the select. Alternative to the `helper-text` attribute.
-        handleNamedSlot("helper-text", this.$slots["helper-text"]),
+        handleNamedSlotV3("helper-text", this.$slots["helper-text"]),
         // @slot icon Slot to add an icon to the select control.
-        handleNamedSlot("icon", this.$slots["icon"]),
+        handleNamedSlotV3("icon", this.$slots["icon"]),
         // @slot meta Slot to add meta content to the select control.
-        handleNamedSlot("meta", this.$slots["meta"])
+        handleNamedSlotV3("meta", this.$slots["meta"])
       ]
     );
   }
@@ -9916,13 +9516,6 @@ const VSelect = defineComponent({
 const VSelectableBox = defineComponent({
   name: "VSelectableBox",
   props: {
-    /**
-     * Indicates the element that represents the current item within a container or set of related elements.
-     */
-    ariaCurrent: {
-      type: String,
-      default: void 0
-    },
     /**
      * Controls the checked state of the box
      */
@@ -10007,7 +9600,6 @@ const VSelectableBox = defineComponent({
         {
           ref: "element",
           attrs: {
-            ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
             ...this.checked !== void 0 ? { checked: this.checked } : {},
             ...this.clickable !== void 0 ? { clickable: this.clickable } : {},
             ...this.clickableBox !== void 0 ? { "clickable-box": this.clickableBox } : {},
@@ -10049,7 +9641,6 @@ const VSelectableBox = defineComponent({
         ref: "element",
         class: "vvd-component",
         ...handleVue3Props({
-          ...this.ariaCurrent !== void 0 ? { "^aria-current": this.ariaCurrent } : {},
           ...this.checked !== void 0 && this.checked !== false ? { "^checked": this.checked } : {},
           ...this.clickable !== void 0 && this.clickable !== false ? { "^clickable": this.clickable } : {},
           ...this.clickableBox !== void 0 && this.clickableBox !== false ? { "^clickable-box": this.clickableBox } : {},
@@ -10094,13 +9685,6 @@ const VSideDrawer = defineComponent({
      * applies scheme alternate region
      */
     alternate: { type: Boolean, default: void 0 },
-    /**
-     * Indicates the element that represents the current item within a container or set of related elements.
-     */
-    ariaCurrent: {
-      type: String,
-      default: void 0
-    },
     /**
      * sets the side drawer's type to modal
      */
@@ -10175,7 +9759,6 @@ const VSideDrawer = defineComponent({
           ref: "element",
           attrs: {
             ...this.alternate !== void 0 ? { alternate: this.alternate } : {},
-            ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
             ...this.modal !== void 0 ? { modal: this.modal } : {},
             ...this.open !== void 0 ? { open: this.open } : {},
             ...this.trailing !== void 0 ? { trailing: this.trailing } : {}
@@ -10214,7 +9797,7 @@ const VSideDrawer = defineComponent({
         [
           this.$slots.default,
           // @slot app-content Sets assigned nodes to the main application content, the side drawer is opened next to.
-          handleNamedSlot("app-content", this.$slots["app-content"])
+          handleNamedSlotV2("app-content", this.$slots["app-content"])
         ]
       );
     }
@@ -10225,7 +9808,6 @@ const VSideDrawer = defineComponent({
         class: "vvd-component",
         ...handleVue3Props({
           ...this.alternate !== void 0 && this.alternate !== false ? { "^alternate": this.alternate } : {},
-          ...this.ariaCurrent !== void 0 ? { "^aria-current": this.ariaCurrent } : {},
           ...this.modal !== void 0 && this.modal !== false ? { "^modal": this.modal } : {},
           ...this.open !== void 0 && this.open !== false ? { "^open": this.open } : {},
           ...this.trailing !== void 0 && this.trailing !== false ? { "^trailing": this.trailing } : {}
@@ -10262,7 +9844,7 @@ const VSideDrawer = defineComponent({
         // @ts-ignore
         this.$slots.default && this.$slots.default(),
         // @slot app-content Sets assigned nodes to the main application content, the side drawer is opened next to.
-        handleNamedSlot("app-content", this.$slots["app-content"])
+        handleNamedSlotV3("app-content", this.$slots["app-content"])
       ]
     );
   }
@@ -10275,13 +9857,6 @@ const VSlider = defineComponent({
     event: "update:modelValue"
   } : void 0,
   props: {
-    /**
-     * Indicates the element that represents the current item within a container or set of related elements.
-     */
-    ariaCurrent: {
-      type: String,
-      default: void 0
-    },
     /**
      * slider connotation
      */
@@ -10435,7 +10010,6 @@ const VSlider = defineComponent({
         {
           ref: "element",
           attrs: {
-            ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
             ...this.connotation !== void 0 ? { connotation: this.connotation } : {},
             ...this.disabled !== void 0 ? { disabled: this.disabled } : {},
             ...this.initialValue !== void 0 ? { value: this.initialValue } : {},
@@ -10486,7 +10060,6 @@ const VSlider = defineComponent({
         ref: "element",
         class: "vvd-component",
         ...handleVue3Props({
-          ...this.ariaCurrent !== void 0 ? { "^aria-current": this.ariaCurrent } : {},
           ...this.connotation !== void 0 ? { "^connotation": this.connotation } : {},
           ...this.disabled !== void 0 && this.disabled !== false ? { "^disabled": this.disabled } : {},
           ...this.initialValue !== void 0 ? { "^value": this.initialValue } : {},
@@ -10543,13 +10116,6 @@ const VSplitButton = defineComponent({
       type: String,
       default: void 0
     },
-    /**
-     * Indicates the element that represents the current item within a container or set of related elements.
-     */
-    ariaCurrent: {
-      type: String,
-      default: void 0
-    },
     /**
      * The connotation the split button should have.
      */
@@ -10562,7 +10128,7 @@ const VSplitButton = defineComponent({
      */
     disabled: { type: Boolean, default: void 0 },
     /**
-     * Indicates the split button's icon.
+     * A decorative icon the custom element should have.
      * See the Vivid Icon Gallery for available icons: https://icons.vivid.vonage.com/
      */
     icon: { type: String, default: void 0 },
@@ -10654,7 +10220,6 @@ const VSplitButton = defineComponent({
           ref: "element",
           attrs: {
             ...this.appearance !== void 0 ? { appearance: this.appearance } : {},
-            ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
             ...this.connotation !== void 0 ? { connotation: this.connotation } : {},
             ...this.disabled !== void 0 ? { disabled: this.disabled } : {},
             ...this.icon !== void 0 ? { icon: this.icon } : {},
@@ -10695,7 +10260,7 @@ const VSplitButton = defineComponent({
         [
           this.$slots.default,
           // @slot icon Add an icon to the component.
-          handleNamedSlot("icon", this.$slots["icon"])
+          handleNamedSlotV2("icon", this.$slots["icon"])
         ]
       );
     }
@@ -10706,7 +10271,6 @@ const VSplitButton = defineComponent({
         class: "vvd-component",
         ...handleVue3Props({
           ...this.appearance !== void 0 ? { "^appearance": this.appearance } : {},
-          ...this.ariaCurrent !== void 0 ? { "^aria-current": this.ariaCurrent } : {},
           ...this.connotation !== void 0 ? { "^connotation": this.connotation } : {},
           ...this.disabled !== void 0 && this.disabled !== false ? { "^disabled": this.disabled } : {},
           ...this.icon !== void 0 ? { "^icon": this.icon } : {},
@@ -10745,7 +10309,7 @@ const VSplitButton = defineComponent({
         // @ts-ignore
         this.$slots.default && this.$slots.default(),
         // @slot icon Add an icon to the component.
-        handleNamedSlot("icon", this.$slots["icon"])
+        handleNamedSlotV3("icon", this.$slots["icon"])
       ]
     );
   }
@@ -10758,13 +10322,6 @@ const VSwitch = defineComponent({
     event: "update:modelValue"
   } : void 0,
   props: {
-    /**
-     * Indicates the element that represents the current item within a container or set of related elements.
-     */
-    ariaCurrent: {
-      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
@@ -10881,7 +10438,6 @@ const VSwitch = defineComponent({
         {
           ref: "element",
           attrs: {
-            ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
             ...(this.modelValue ?? this.checked) !== void 0 ? { "current-checked": this.modelValue ?? this.checked } : {},
             ...this.connotation !== void 0 ? { connotation: this.connotation } : {},
             ...this.defaultChecked !== void 0 ? { checked: this.defaultChecked } : {},
@@ -10928,7 +10484,6 @@ const VSwitch = defineComponent({
         ref: "element",
         class: "vvd-component",
         ...handleVue3Props({
-          ...this.ariaCurrent !== void 0 ? { "^aria-current": this.ariaCurrent } : {},
           ...(this.modelValue ?? this.checked) !== void 0 && (this.modelValue ?? this.checked) !== false ? { "^current-checked": this.modelValue ?? this.checked } : {},
           ...this.connotation !== void 0 ? { "^connotation": this.connotation } : {},
           ...this.defaultChecked !== void 0 && this.defaultChecked !== false ? { "^checked": this.defaultChecked } : {},
@@ -10974,13 +10529,6 @@ const VSwitch = defineComponent({
 const VTab = defineComponent({
   name: "VTab",
   props: {
-    /**
-     * Indicates the element that represents the current item within a container or set of related elements.
-     */
-    ariaCurrent: {
-      type: String,
-      default: void 0
-    },
     ariaSelected: { type: String, default: void 0 },
     /**
      * The connotation the tab should have.
@@ -11071,7 +10619,6 @@ const VTab = defineComponent({
         {
           ref: "element",
           attrs: {
-            ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
             ...this.ariaSelected !== void 0 ? { "aria-selected": this.ariaSelected } : {},
             ...this.connotation !== void 0 ? { connotation: this.connotation } : {},
             ...this.disabled !== void 0 ? { disabled: this.disabled } : {},
@@ -11107,7 +10654,7 @@ const VTab = defineComponent({
         [
           this.$slots.default,
           // @slot icon Slot to add an icon to tab.
-          handleNamedSlot("icon", this.$slots["icon"])
+          handleNamedSlotV2("icon", this.$slots["icon"])
         ]
       );
     }
@@ -11117,7 +10664,6 @@ const VTab = defineComponent({
         ref: "element",
         class: "vvd-component",
         ...handleVue3Props({
-          ...this.ariaCurrent !== void 0 ? { "^aria-current": this.ariaCurrent } : {},
           ...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 } : {},
@@ -11151,7 +10697,7 @@ const VTab = defineComponent({
         // @ts-ignore
         this.$slots.default && this.$slots.default(),
         // @slot icon Slot to add an icon to tab.
-        handleNamedSlot("icon", this.$slots["icon"])
+        handleNamedSlotV3("icon", this.$slots["icon"])
       ]
     );
   }
@@ -11159,15 +10705,7 @@ const VTab = defineComponent({
 
 const VTabPanel = defineComponent({
   name: "VTabPanel",
-  props: {
-    /**
-     * Indicates the element that represents the current item within a container or set of related elements.
-     */
-    ariaCurrent: {
-      type: String,
-      default: void 0
-    }
-  },
+  props: {},
   emits: [
     /**
      * Fires when the element loses focus.
@@ -11212,9 +10750,7 @@ const VTabPanel = defineComponent({
         this.componentName,
         {
           ref: "element",
-          attrs: {
-            ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {}
-          },
+          attrs: {},
           class: "vvd-component",
           on: {
             blur: (event) => {
@@ -11245,9 +10781,7 @@ const VTabPanel = defineComponent({
       {
         ref: "element",
         class: "vvd-component",
-        ...handleVue3Props({
-          ...this.ariaCurrent !== void 0 ? { "^aria-current": this.ariaCurrent } : {}
-        }),
+        ...handleVue3Props({}),
         onBlur: (event) => {
           this.$emit("blur", event);
         },
@@ -11286,13 +10820,6 @@ const VTabs = defineComponent({
      * Whether or not to show the active indicator
      */
     activeindicator: { type: Boolean, default: void 0 },
-    /**
-     * Indicates the element that represents the current item within a container or set of related elements.
-     */
-    ariaCurrent: {
-      type: String,
-      default: void 0
-    },
     /**
      * The connotation the tabs should have.
      */
@@ -11382,7 +10909,6 @@ const VTabs = defineComponent({
           attrs: {
             ...this.activeid !== void 0 ? { activeid: this.activeid } : {},
             ...this.activeindicator !== void 0 ? { activeindicator: this.activeindicator } : {},
-            ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
             ...this.connotation !== void 0 ? { connotation: this.connotation } : {},
             ...this.gutters !== void 0 ? { gutters: this.gutters } : {},
             ...this.orientation !== void 0 ? { orientation: this.orientation } : {},
@@ -11425,7 +10951,6 @@ const VTabs = defineComponent({
         ...handleVue3Props({
           ...this.activeid !== void 0 ? { "^activeid": this.activeid } : {},
           ...this.activeindicator !== void 0 && this.activeindicator !== false ? { "^activeindicator": this.activeindicator } : {},
-          ...this.ariaCurrent !== void 0 ? { "^aria-current": this.ariaCurrent } : {},
           ...this.connotation !== void 0 ? { "^connotation": this.connotation } : {},
           ...this.gutters !== void 0 ? { "^gutters": this.gutters } : {},
           ...this.orientation !== void 0 ? { "^orientation": this.orientation } : {},
@@ -11472,13 +10997,6 @@ const VTag = defineComponent({
       type: String,
       default: void 0
     },
-    /**
-     * Indicates the element that represents the current item within a container or set of related elements.
-     */
-    ariaCurrent: {
-      type: String,
-      default: void 0
-    },
     /**
      * The connotation the tag should have.
      */
@@ -11582,7 +11100,6 @@ const VTag = defineComponent({
           ref: "element",
           attrs: {
             ...this.appearance !== void 0 ? { appearance: this.appearance } : {},
-            ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
             ...this.connotation !== void 0 ? { connotation: this.connotation } : {},
             ...this.disabled !== void 0 ? { disabled: this.disabled } : {},
             ...this.icon !== void 0 ? { icon: this.icon } : {},
@@ -11623,7 +11140,7 @@ const VTag = defineComponent({
         [
           this.$slots.default,
           // @slot icon Add an icon to the component.
-          handleNamedSlot("icon", this.$slots["icon"])
+          handleNamedSlotV2("icon", this.$slots["icon"])
         ]
       );
     }
@@ -11634,7 +11151,6 @@ const VTag = defineComponent({
         class: "vvd-component",
         ...handleVue3Props({
           ...this.appearance !== void 0 ? { "^appearance": this.appearance } : {},
-          ...this.ariaCurrent !== void 0 ? { "^aria-current": this.ariaCurrent } : {},
           ...this.connotation !== void 0 ? { "^connotation": this.connotation } : {},
           ...this.disabled !== void 0 && this.disabled !== false ? { "^disabled": this.disabled } : {},
           ...this.icon !== void 0 ? { "^icon": this.icon } : {},
@@ -11673,7 +11189,7 @@ const VTag = defineComponent({
         // @ts-ignore
         this.$slots.default && this.$slots.default(),
         // @slot icon Add an icon to the component.
-        handleNamedSlot("icon", this.$slots["icon"])
+        handleNamedSlotV3("icon", this.$slots["icon"])
       ]
     );
   }
@@ -11681,15 +11197,7 @@ const VTag = defineComponent({
 
 const VTagGroup = defineComponent({
   name: "VTagGroup",
-  props: {
-    /**
-     * Indicates the element that represents the current item within a container or set of related elements.
-     */
-    ariaCurrent: {
-      type: String,
-      default: void 0
-    }
-  },
+  props: {},
   emits: [
     /**
      * Fires when the element loses focus.
@@ -11734,9 +11242,7 @@ const VTagGroup = defineComponent({
         this.componentName,
         {
           ref: "element",
-          attrs: {
-            ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {}
-          },
+          attrs: {},
           class: "vvd-component",
           on: {
             blur: (event) => {
@@ -11767,9 +11273,7 @@ const VTagGroup = defineComponent({
       {
         ref: "element",
         class: "vvd-component",
-        ...handleVue3Props({
-          ...this.ariaCurrent !== void 0 ? { "^aria-current": this.ariaCurrent } : {}
-        }),
+        ...handleVue3Props({}),
         onBlur: (event) => {
           this.$emit("blur", event);
         },
@@ -11804,13 +11308,6 @@ const VTextArea = defineComponent({
     event: "update:modelValue"
   } : void 0,
   props: {
-    /**
-     * Indicates the element that represents the current item within a container or set of related elements.
-     */
-    ariaCurrent: {
-      type: String,
-      default: void 0
-    },
     /**
      * Indicates that this element should get focus after the page finishes loading.
      */
@@ -11988,7 +11485,6 @@ const VTextArea = defineComponent({
         {
           ref: "element",
           attrs: {
-            ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
             ...this.autofocus !== void 0 ? { autofocus: this.autofocus } : {},
             ...this.charCount !== void 0 ? { "char-count": this.charCount } : {},
             ...this.cols !== void 0 ? { cols: this.cols } : {},
@@ -12041,7 +11537,7 @@ const VTextArea = defineComponent({
         [
           this.$slots.default,
           // @slot helper-text Describes how to use the text-area. Alternative to the `helper-text` attribute.
-          handleNamedSlot("helper-text", this.$slots["helper-text"])
+          handleNamedSlotV2("helper-text", this.$slots["helper-text"])
         ]
       );
     }
@@ -12051,7 +11547,6 @@ const VTextArea = defineComponent({
         ref: "element",
         class: "vvd-component",
         ...handleVue3Props({
-          ...this.ariaCurrent !== void 0 ? { "^aria-current": this.ariaCurrent } : {},
           ...this.autofocus !== void 0 && this.autofocus !== false ? { "^autofocus": this.autofocus } : {},
           ...this.charCount !== void 0 && this.charCount !== false ? { "^char-count": this.charCount } : {},
           ...this.cols !== void 0 ? { "^cols": this.cols } : {},
@@ -12102,7 +11597,7 @@ const VTextArea = defineComponent({
         // @ts-ignore
         this.$slots.default && this.$slots.default(),
         // @slot helper-text Describes how to use the text-area. Alternative to the `helper-text` attribute.
-        handleNamedSlot("helper-text", this.$slots["helper-text"])
+        handleNamedSlotV3("helper-text", this.$slots["helper-text"])
       ]
     );
   }
@@ -12119,13 +11614,6 @@ const VTextField = defineComponent({
       type: String,
       default: void 0
     },
-    /**
-     * Indicates the element that represents the current item within a container or set of related elements.
-     */
-    ariaCurrent: {
-      type: String,
-      default: void 0
-    },
     autoComplete: { type: String, default: void 0 },
     /**
      * 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.
@@ -12314,7 +11802,6 @@ const VTextField = defineComponent({
           ref: "element",
           attrs: {
             ...this.appearance !== void 0 ? { appearance: this.appearance } : {},
-            ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
             ...this.autoComplete !== void 0 ? { autoComplete: this.autoComplete } : {},
             ...this.autofocus !== void 0 ? { autofocus: this.autofocus } : {},
             ...this.charCount !== void 0 ? { "char-count": this.charCount } : {},
@@ -12370,11 +11857,11 @@ const VTextField = defineComponent({
         [
           this.$slots.default,
           // @slot action-items Used to add action items to the end of the text-field.
-          handleNamedSlot("action-items", this.$slots["action-items"]),
+          handleNamedSlotV2("action-items", this.$slots["action-items"]),
           // @slot helper-text Describes how to use the text-field. Alternative to the `helper-text` attribute.
-          handleNamedSlot("helper-text", this.$slots["helper-text"]),
+          handleNamedSlotV2("helper-text", this.$slots["helper-text"]),
           // @slot leading-action-items Used to add action items to the start of the text-field.
-          handleNamedSlot(
+          handleNamedSlotV2(
             "leading-action-items",
             this.$slots["leading-action-items"]
           )
@@ -12388,7 +11875,6 @@ const VTextField = defineComponent({
         class: "vvd-component",
         ...handleVue3Props({
           ...this.appearance !== void 0 ? { "^appearance": this.appearance } : {},
-          ...this.ariaCurrent !== void 0 ? { "^aria-current": this.ariaCurrent } : {},
           ...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 } : {},
@@ -12442,11 +11928,11 @@ const VTextField = defineComponent({
         // @ts-ignore
         this.$slots.default && this.$slots.default(),
         // @slot action-items Used to add action items to the end of the text-field.
-        handleNamedSlot("action-items", this.$slots["action-items"]),
+        handleNamedSlotV3("action-items", this.$slots["action-items"]),
         // @slot helper-text Describes how to use the text-field. Alternative to the `helper-text` attribute.
-        handleNamedSlot("helper-text", this.$slots["helper-text"]),
+        handleNamedSlotV3("helper-text", this.$slots["helper-text"]),
         // @slot leading-action-items Used to add action items to the start of the text-field.
-        handleNamedSlot(
+        handleNamedSlotV3(
           "leading-action-items",
           this.$slots["leading-action-items"]
         )
@@ -12462,13 +11948,6 @@ const VTimePicker = defineComponent({
     event: "update:modelValue"
   } : void 0,
   props: {
-    /**
-     * Indicates the element that represents the current item within a container or set of related elements.
-     */
-    ariaCurrent: {
-      type: String,
-      default: void 0
-    },
     /**
      * Forces a 12h or 24h clock to be used.
      */
@@ -12581,7 +12060,6 @@ const VTimePicker = defineComponent({
         {
           ref: "element",
           attrs: {
-            ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
             ...this.clock !== void 0 ? { clock: this.clock } : {},
             ...this.disabled !== void 0 ? { disabled: this.disabled } : {},
             ...this.errorText !== void 0 ? { "error-text": this.errorText } : {},
@@ -12625,7 +12103,7 @@ const VTimePicker = defineComponent({
         [
           this.$slots.default,
           // @slot helper-text Describes how to use the time-picker. Alternative to the `helper-text` attribute.
-          handleNamedSlot("helper-text", this.$slots["helper-text"])
+          handleNamedSlotV2("helper-text", this.$slots["helper-text"])
         ]
       );
     }
@@ -12635,7 +12113,6 @@ const VTimePicker = defineComponent({
         ref: "element",
         class: "vvd-component",
         ...handleVue3Props({
-          ...this.ariaCurrent !== void 0 ? { "^aria-current": this.ariaCurrent } : {},
           ...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 } : {},
@@ -12677,7 +12154,7 @@ const VTimePicker = defineComponent({
         // @ts-ignore
         this.$slots.default && this.$slots.default(),
         // @slot helper-text Describes how to use the time-picker. Alternative to the `helper-text` attribute.
-        handleNamedSlot("helper-text", this.$slots["helper-text"])
+        handleNamedSlotV3("helper-text", this.$slots["helper-text"])
       ]
     );
   }
@@ -12697,13 +12174,6 @@ const VToggletip = defineComponent({
       type: [String, HTMLElement],
       default: void 0
     },
-    /**
-     * Indicates the element that represents the current item within a container or set of related elements.
-     */
-    ariaCurrent: {
-      type: String,
-      default: void 0
-    },
     /**
      * the optional title of the toggletip
      */
@@ -12770,7 +12240,6 @@ const VToggletip = defineComponent({
           ref: "element",
           attrs: {
             ...this.alternate !== void 0 ? { alternate: this.alternate } : {},
-            ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
             ...this.headline !== void 0 ? { headline: this.headline } : {},
             ...this.open !== void 0 ? { open: this.open } : {},
             ...this.placement !== void 0 ? { placement: this.placement } : {}
@@ -12803,9 +12272,9 @@ const VToggletip = defineComponent({
         [
           this.$slots.default,
           // @slot action-items The content to display in the toggletip action items.
-          handleNamedSlot("action-items", this.$slots["action-items"]),
+          handleNamedSlotV2("action-items", this.$slots["action-items"]),
           // @slot anchor Used to set the anchor element for the toggletip.
-          handleNamedSlot("anchor", this.$slots["anchor"])
+          handleNamedSlotV2("anchor", this.$slots["anchor"])
         ]
       );
     }
@@ -12817,7 +12286,6 @@ const VToggletip = defineComponent({
         ...handleVue3Props({
           ...this.alternate !== void 0 && this.alternate !== false ? { "^alternate": this.alternate } : {},
           ...this.anchor !== void 0 ? { ".anchor": this.anchor } : {},
-          ...this.ariaCurrent !== void 0 ? { "^aria-current": this.ariaCurrent } : {},
           ...this.headline !== void 0 ? { "^headline": this.headline } : {},
           ...this.open !== void 0 && this.open !== false ? { "^open": this.open } : {},
           ...this.placement !== void 0 ? { "^placement": this.placement } : {}
@@ -12845,9 +12313,9 @@ const VToggletip = defineComponent({
         // @ts-ignore
         this.$slots.default && this.$slots.default(),
         // @slot action-items The content to display in the toggletip action items.
-        handleNamedSlot("action-items", this.$slots["action-items"]),
+        handleNamedSlotV3("action-items", this.$slots["action-items"]),
         // @slot anchor Used to set the anchor element for the toggletip.
-        handleNamedSlot("anchor", this.$slots["anchor"])
+        handleNamedSlotV3("anchor", this.$slots["anchor"])
       ]
     );
   }
@@ -12863,13 +12331,6 @@ const VTooltip = defineComponent({
       type: [String, HTMLElement],
       default: void 0
     },
-    /**
-     * Indicates the element that represents the current item within a container or set of related elements.
-     */
-    ariaCurrent: {
-      type: String,
-      default: void 0
-    },
     open: { type: Boolean, default: void 0 },
     placement: {
       type: String,
@@ -12926,7 +12387,6 @@ const VTooltip = defineComponent({
         {
           ref: "element",
           attrs: {
-            ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
             ...this.open !== void 0 ? { open: this.open } : {},
             ...this.placement !== void 0 ? { placement: this.placement } : {},
             ...this.text !== void 0 ? { text: this.text } : {}
@@ -12959,7 +12419,7 @@ const VTooltip = defineComponent({
         [
           this.$slots.default,
           // @slot anchor Used to set the anchor element for the tooltip.
-          handleNamedSlot("anchor", this.$slots["anchor"])
+          handleNamedSlotV2("anchor", this.$slots["anchor"])
         ]
       );
     }
@@ -12970,7 +12430,6 @@ const VTooltip = defineComponent({
         class: "vvd-component",
         ...handleVue3Props({
           ...this.anchor !== void 0 ? { ".anchor": this.anchor } : {},
-          ...this.ariaCurrent !== void 0 ? { "^aria-current": this.ariaCurrent } : {},
           ...this.open !== void 0 && this.open !== false ? { "^open": this.open } : {},
           ...this.placement !== void 0 ? { "^placement": this.placement } : {},
           ...this.text !== void 0 ? { "^text": this.text } : {}
@@ -12998,7 +12457,7 @@ const VTooltip = defineComponent({
         // @ts-ignore
         this.$slots.default && this.$slots.default(),
         // @slot anchor Used to set the anchor element for the tooltip.
-        handleNamedSlot("anchor", this.$slots["anchor"])
+        handleNamedSlotV3("anchor", this.$slots["anchor"])
       ]
     );
   }
@@ -13007,13 +12466,6 @@ const VTooltip = defineComponent({
 const VTreeItem = defineComponent({
   name: "VTreeItem",
   props: {
-    /**
-     * Indicates the element that represents the current item within a container or set of related elements.
-     */
-    ariaCurrent: {
-      type: String,
-      default: void 0
-    },
     /**
      * When true, the control will be immutable by user interaction. See https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled | disabled HTML attribute for more information.
      */
@@ -13101,7 +12553,6 @@ const VTreeItem = defineComponent({
         {
           ref: "element",
           attrs: {
-            ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
             ...this.disabled !== void 0 ? { disabled: this.disabled } : {},
             ...this.expanded !== void 0 ? { expanded: this.expanded } : {},
             ...this.icon !== void 0 ? { icon: this.icon } : {},
@@ -13139,9 +12590,9 @@ const VTreeItem = defineComponent({
         [
           this.$slots.default,
           // @slot icon Add an icon to the component.
-          handleNamedSlot("icon", this.$slots["icon"]),
+          handleNamedSlotV2("icon", this.$slots["icon"]),
           // @slot item To specify a child tree item.
-          handleNamedSlot("item", this.$slots["item"])
+          handleNamedSlotV2("item", this.$slots["item"])
         ]
       );
     }
@@ -13151,7 +12602,6 @@ const VTreeItem = defineComponent({
         ref: "element",
         class: "vvd-component",
         ...handleVue3Props({
-          ...this.ariaCurrent !== void 0 ? { "^aria-current": this.ariaCurrent } : {},
           ...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 } : {},
@@ -13187,9 +12637,9 @@ const VTreeItem = defineComponent({
         // @ts-ignore
         this.$slots.default && this.$slots.default(),
         // @slot icon Add an icon to the component.
-        handleNamedSlot("icon", this.$slots["icon"]),
+        handleNamedSlotV3("icon", this.$slots["icon"]),
         // @slot item To specify a child tree item.
-        handleNamedSlot("item", this.$slots["item"])
+        handleNamedSlotV3("item", this.$slots["item"])
       ]
     );
   }
@@ -13198,13 +12648,6 @@ const VTreeItem = defineComponent({
 const VTreeView = defineComponent({
   name: "VTreeView",
   props: {
-    /**
-     * Indicates the element that represents the current item within a container or set of related elements.
-     */
-    ariaCurrent: {
-      type: String,
-      default: void 0
-    },
     /**
      * /**
      *  When true, the control will be appear expanded by user interaction.
@@ -13263,7 +12706,6 @@ const VTreeView = defineComponent({
         {
           ref: "element",
           attrs: {
-            ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
             ...this.renderCollapsedNodes !== void 0 ? { "render-collapsed-nodes": this.renderCollapsedNodes } : {}
           },
           class: "vvd-component",
@@ -13297,7 +12739,6 @@ const VTreeView = defineComponent({
         ref: "element",
         class: "vvd-component",
         ...handleVue3Props({
-          ...this.ariaCurrent !== void 0 ? { "^aria-current": this.ariaCurrent } : {},
           ...this.renderCollapsedNodes !== void 0 && this.renderCollapsedNodes !== false ? { "^render-collapsed-nodes": this.renderCollapsedNodes } : {}
         }),
         onBlur: (event) => {
@@ -13330,13 +12771,6 @@ const VTreeView = defineComponent({
 const VVideoPlayer = defineComponent({
   name: "VVideoPlayer",
   props: {
-    /**
-     * Indicates the element that represents the current item within a container or set of related elements.
-     */
-    ariaCurrent: {
-      type: String,
-      default: void 0
-    },
     /**
      * Allows the video will play automatically (muted)
      */
@@ -13428,7 +12862,6 @@ const VVideoPlayer = defineComponent({
         {
           ref: "element",
           attrs: {
-            ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
             ...this.autoplay !== void 0 ? { autoplay: this.autoplay } : {},
             ...this.loop !== void 0 ? { loop: this.loop } : {},
             ...this.playbackRates !== void 0 ? { "playback-rates": this.playbackRates } : {},
@@ -13476,7 +12909,6 @@ const VVideoPlayer = defineComponent({
         ref: "element",
         class: "vvd-component",
         ...handleVue3Props({
-          ...this.ariaCurrent !== void 0 ? { "^aria-current": this.ariaCurrent } : {},
           ...this.autoplay !== void 0 && this.autoplay !== false ? { "^autoplay": this.autoplay } : {},
           ...this.loop !== void 0 && this.loop !== false ? { "^loop": this.loop } : {},
           ...this.playbackRates !== void 0 ? { "^playback-rates": this.playbackRates } : {},
@@ -14763,17 +14195,17 @@ var Icon = /* @__PURE__ */ ((Icon2) => {
   return Icon2;
 })(Icon || {});
 
-const tokensThemeLightCss = "/**\n * Do not edit directly\n * Generated on Mon, 31 Mar 2025 14:32:18 GMT\n */\n/**\n * Do not edit directly\n * Generated on Mon, 31 Mar 2025 14:32:18 GMT\n */\n/**\n * Do not edit directly\n * Generated on Mon, 31 Mar 2025 14:32:18 GMT\n */\n/**\n * Do not edit directly\n * Generated on Mon, 31 Mar 2025 14:32:18 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 Tue, 08 Apr 2025 15:53:11 GMT\n */\n/**\n * Do not edit directly\n * Generated on Tue, 08 Apr 2025 15:53:11 GMT\n */\n/**\n * Do not edit directly\n * Generated on Tue, 08 Apr 2025 15:53:11 GMT\n */\n/**\n * Do not edit directly\n * Generated on Tue, 08 Apr 2025 15:53:11 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, 31 Mar 2025 14:32:18 GMT\n */\n/**\n * Do not edit directly\n * Generated on Mon, 31 Mar 2025 14:32:18 GMT\n */\n/**\n * Do not edit directly\n * Generated on Mon, 31 Mar 2025 14:32:18 GMT\n */\n/**\n * Do not edit directly\n * Generated on Mon, 31 Mar 2025 14:32:18 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 Tue, 08 Apr 2025 15:53:11 GMT\n */\n/**\n * Do not edit directly\n * Generated on Tue, 08 Apr 2025 15:53:11 GMT\n */\n/**\n * Do not edit directly\n * Generated on Tue, 08 Apr 2025 15:53:11 GMT\n */\n/**\n * Do not edit directly\n * Generated on Tue, 08 Apr 2025 15:53:11 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, 31 Mar 2025 14:32:18 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 Tue, 08 Apr 2025 15:53:11 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, 31 Mar 2025 14:32:18 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-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 Tue, 08 Apr 2025 15:53:11 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-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, 31 Mar 2025 14:32:18 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 Tue, 08 Apr 2025 15:53:11 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",