@vonage/vivid-vue 4.19.0 → 4.20.0

package/index.cjs

@@ -44,13 +44,6 @@ function registerComponent(type, registerFunction) {
 const VAccordion = vue.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.
@@ -114,7 +107,6 @@ const VAccordion = vue.defineComponent({
         {
           ref: "element",
           attrs: {
-            ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
             ...this.expandMode !== void 0 ? { "expand-mode": this.expandMode } : {}
           },
           class: "vvd-component",
@@ -151,7 +143,6 @@ const VAccordion = vue.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) => {
@@ -184,35 +175,52 @@ const VAccordion = vue.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] = vue.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] = vue.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 = vue.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.
      */
@@ -305,7 +313,6 @@ const VAccordionItem = vue.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 } : {},
@@ -344,7 +351,7 @@ const VAccordionItem = vue.defineComponent({
         [
           this.$slots.default,
           // @slot icon Add an icon to the component.
-          handleNamedSlot("icon", this.$slots["icon"])
+          handleNamedSlotV2("icon", this.$slots["icon"])
         ]
       );
     }
@@ -354,7 +361,6 @@ const VAccordionItem = vue.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 } : {},
@@ -391,7 +397,7 @@ const VAccordionItem = vue.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"])
       ]
     );
   }
@@ -407,13 +413,6 @@ const VActionGroup = vue.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.
      */
@@ -472,7 +471,6 @@ const VActionGroup = vue.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 } : {}
           },
@@ -508,7 +506,6 @@ const VActionGroup = vue.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 } : {}
         }),
@@ -542,13 +539,6 @@ const VActionGroup = vue.defineComponent({
 const VAlert = vue.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.
      */
@@ -568,7 +558,7 @@ const VAlert = vue.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 },
@@ -662,7 +652,6 @@ const VAlert = vue.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 } : {},
@@ -705,11 +694,11 @@ const VAlert = vue.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"])
         ]
       );
     }
@@ -719,7 +708,6 @@ const VAlert = vue.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 } : {},
@@ -760,11 +748,11 @@ const VAlert = vue.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"])
       ]
     );
   }
@@ -773,13 +761,6 @@ const VAlert = vue.defineComponent({
 const VAudioPlayer = vue.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.
      */
@@ -883,7 +864,6 @@ const VAudioPlayer = vue.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 } : {},
@@ -927,7 +907,6 @@ const VAudioPlayer = vue.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 } : {},
@@ -977,13 +956,6 @@ const VAvatar = vue.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.
      */
@@ -1058,7 +1030,6 @@ const VAvatar = vue.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 } : {},
@@ -1090,7 +1061,7 @@ const VAvatar = vue.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"])
         ]
       );
     }
@@ -1101,7 +1072,6 @@ const VAvatar = vue.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 } : {},
@@ -1131,7 +1101,7 @@ const VAvatar = vue.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"])
       ]
     );
   }
@@ -1147,13 +1117,6 @@ const VBadge = vue.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.
      */
@@ -1225,7 +1188,6 @@ const VBadge = vue.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 } : {},
@@ -1257,7 +1219,7 @@ const VBadge = vue.defineComponent({
         [
           this.$slots.default,
           // @slot icon Add an icon to the component.
-          handleNamedSlot("icon", this.$slots["icon"])
+          handleNamedSlotV2("icon", this.$slots["icon"])
         ]
       );
     }
@@ -1268,7 +1230,6 @@ const VBadge = vue.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 } : {},
@@ -1298,7 +1259,7 @@ const VBadge = vue.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"])
       ]
     );
   }
@@ -1309,13 +1270,6 @@ const VBanner = vue.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
@@ -1380,7 +1334,6 @@ const VBanner = vue.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 } : {},
@@ -1412,9 +1365,9 @@ const VBanner = vue.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"])
         ]
       );
     }
@@ -1426,7 +1379,6 @@ const VBanner = vue.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 } : {},
@@ -1456,9 +1408,9 @@ const VBanner = vue.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"])
       ]
     );
   }
@@ -1466,15 +1418,7 @@ const VBanner = vue.defineComponent({
 
 const VBreadcrumb = vue.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.
@@ -1519,9 +1463,7 @@ const VBreadcrumb = vue.defineComponent({
         this.componentName,
         {
           ref: "element",
-          attrs: {
-            ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {}
-          },
+          attrs: {},
           class: "vvd-component",
           on: {
             blur: (event) => {
@@ -1552,9 +1494,7 @@ const VBreadcrumb = vue.defineComponent({
       {
         ref: "element",
         class: "vvd-component",
-        ...handleVue3Props({
-          ...this.ariaCurrent !== void 0 ? { "^aria-current": this.ariaCurrent } : {}
-        }),
+        ...handleVue3Props({}),
         onBlur: (event) => {
           this.$emit("blur", event);
         },
@@ -1585,13 +1525,6 @@ const VBreadcrumb = vue.defineComponent({
 const VBreadcrumbItem = vue.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
      */
@@ -1684,7 +1617,6 @@ const VBreadcrumbItem = vue.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 } : {},
@@ -1727,7 +1659,6 @@ const VBreadcrumbItem = vue.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 } : {},
@@ -1780,13 +1711,6 @@ const VButton = vue.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.
      */
@@ -1986,7 +1910,6 @@ const VButton = vue.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 } : {},
@@ -2043,7 +1966,7 @@ const VButton = vue.defineComponent({
         [
           this.$slots.default,
           // @slot icon Add an icon to the component.
-          handleNamedSlot("icon", this.$slots["icon"])
+          handleNamedSlotV2("icon", this.$slots["icon"])
         ]
       );
     }
@@ -2055,7 +1978,6 @@ const VButton = vue.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 } : {},
@@ -2110,7 +2032,7 @@ const VButton = vue.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"])
       ]
     );
   }
@@ -2119,13 +2041,6 @@ const VButton = vue.defineComponent({
 const VCalendar = vue.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.
@@ -2219,7 +2134,6 @@ const VCalendar = vue.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 } : {}
@@ -2253,19 +2167,19 @@ const VCalendar = vue.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"])
         ]
       );
     }
@@ -2275,7 +2189,6 @@ const VCalendar = vue.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 } : {},
@@ -2305,19 +2218,19 @@ const VCalendar = vue.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"])
       ]
     );
   }
@@ -2333,13 +2246,6 @@ const VCalendarEvent = vue.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.
      */
@@ -2417,7 +2323,6 @@ const VCalendarEvent = vue.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 } : {},
@@ -2457,7 +2362,6 @@ const VCalendarEvent = vue.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 } : {},
@@ -2502,13 +2406,6 @@ const VCard = vue.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
      */
@@ -2583,7 +2480,6 @@ const VCard = vue.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 } : {},
@@ -2615,15 +2511,15 @@ const VCard = vue.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"])
         ]
       );
     }
@@ -2634,7 +2530,6 @@ const VCard = vue.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 } : {},
@@ -2664,15 +2559,15 @@ const VCard = vue.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"])
       ]
     );
   }
@@ -2685,13 +2580,6 @@ const VCheckbox = vue.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
@@ -2731,6 +2619,10 @@ const VCheckbox = vue.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.
@@ -2825,7 +2717,6 @@ const VCheckbox = vue.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 } : {},
@@ -2842,6 +2733,9 @@ const VCheckbox = vue.defineComponent({
             ...this.value !== void 0 ? { "current-value": this.value } : {}
           },
           class: "vvd-component",
+          domProps: {
+            ...this.indeterminate !== void 0 ? { indeterminate: this.indeterminate } : {}
+          },
           on: {
             blur: (event) => {
               this.$emit("blur", event);
@@ -2870,7 +2764,7 @@ const VCheckbox = vue.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"])
         ]
       );
     }
@@ -2880,13 +2774,13 @@ const VCheckbox = vue.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 } : {},
@@ -2923,7 +2817,7 @@ const VCheckbox = vue.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"])
       ]
     );
   }
@@ -2943,13 +2837,6 @@ const VCombobox = vue.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.
      */
@@ -3125,7 +3012,6 @@ const VCombobox = vue.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 } : {},
@@ -3173,11 +3059,11 @@ const VCombobox = vue.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"])
         ]
       );
     }
@@ -3188,7 +3074,6 @@ const VCombobox = vue.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 } : {},
@@ -3234,11 +3119,11 @@ const VCombobox = vue.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"])
       ]
     );
   }
@@ -3247,13 +3132,6 @@ const VCombobox = vue.defineComponent({
 const VDataGrid = vue.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
      */
@@ -3339,7 +3217,6 @@ const VDataGrid = vue.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 } : {},
@@ -3382,7 +3259,6 @@ const VDataGrid = vue.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 } : {},
@@ -3422,13 +3298,6 @@ const VDataGrid = vue.defineComponent({
 const VDataGridCell = vue.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.
      */
@@ -3528,7 +3397,6 @@ const VDataGridCell = vue.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 } : {},
@@ -3577,7 +3445,6 @@ const VDataGridCell = vue.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 } : {},
@@ -3623,13 +3490,6 @@ const VDataGridCell = vue.defineComponent({
 const VDataGridRow = vue.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.
      */
@@ -3715,7 +3575,6 @@ const VDataGridRow = vue.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 } : {}
@@ -3757,7 +3616,6 @@ const VDataGridRow = vue.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 } : {}
@@ -3802,13 +3660,6 @@ const VDatePicker = vue.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.
      */
@@ -3909,7 +3760,6 @@ const VDatePicker = vue.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 } : {},
@@ -3950,7 +3800,7 @@ const VDatePicker = vue.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"])
         ]
       );
     }
@@ -3960,7 +3810,6 @@ const VDatePicker = vue.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 } : {},
@@ -3999,7 +3848,7 @@ const VDatePicker = vue.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"])
       ]
     );
   }
@@ -4008,13 +3857,6 @@ const VDatePicker = vue.defineComponent({
 const VDateRangePicker = vue.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.
      */
@@ -4155,7 +3997,6 @@ const VDateRangePicker = vue.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 } : {},
@@ -4207,7 +4048,7 @@ const VDateRangePicker = vue.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"])
         ]
       );
     }
@@ -4217,7 +4058,6 @@ const VDateRangePicker = vue.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 } : {},
@@ -4267,7 +4107,7 @@ const VDateRangePicker = vue.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"])
       ]
     );
   }
@@ -4280,13 +4120,6 @@ const VDateTimePicker = vue.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.
      */
@@ -4418,7 +4251,6 @@ const VDateTimePicker = vue.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 } : {},
@@ -4466,7 +4298,7 @@ const VDateTimePicker = vue.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"])
         ]
       );
     }
@@ -4476,7 +4308,6 @@ const VDateTimePicker = vue.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 } : {},
@@ -4522,7 +4353,7 @@ const VDateTimePicker = vue.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"])
       ]
     );
   }
@@ -4535,13 +4366,6 @@ const VDialPad = vue.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.
      */
@@ -4662,7 +4486,6 @@ const VDialPad = vue.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 } : {},
@@ -4719,7 +4542,6 @@ const VDialPad = vue.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 } : {},
@@ -4775,13 +4597,6 @@ const VDialPad = vue.defineComponent({
 const VDialog = vue.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
@@ -4898,7 +4713,6 @@ const VDialog = vue.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 } : {},
@@ -4948,15 +4762,15 @@ const VDialog = vue.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"])
         ]
       );
     }
@@ -4966,7 +4780,6 @@ const VDialog = vue.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 } : {},
@@ -5014,15 +4827,15 @@ const VDialog = vue.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"])
       ]
     );
   }
@@ -5031,13 +4844,6 @@ const VDialog = vue.defineComponent({
 const VDivider = vue.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.
      */
@@ -5098,7 +4904,6 @@ const VDivider = vue.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 } : {}
           },
@@ -5133,7 +4938,6 @@ const VDivider = vue.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 } : {}
         }),
@@ -5167,13 +4971,6 @@ const VDivider = vue.defineComponent({
 const VEmptyState = vue.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.
      */
@@ -5243,7 +5040,6 @@ const VEmptyState = vue.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 } : {},
@@ -5274,9 +5070,9 @@ const VEmptyState = vue.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"])
         ]
       );
     }
@@ -5286,7 +5082,6 @@ const VEmptyState = vue.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 } : {},
@@ -5315,9 +5110,9 @@ const VEmptyState = vue.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"])
       ]
     );
   }
@@ -5326,13 +5121,6 @@ const VEmptyState = vue.defineComponent({
 const VFab = vue.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.
      */
@@ -5476,7 +5264,6 @@ const VFab = vue.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 } : {},
@@ -5521,7 +5308,7 @@ const VFab = vue.defineComponent({
         [
           this.$slots.default,
           // @slot icon Slot to add an icon to fab.
-          handleNamedSlot("icon", this.$slots["icon"])
+          handleNamedSlotV2("icon", this.$slots["icon"])
         ]
       );
     }
@@ -5531,7 +5318,6 @@ const VFab = vue.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 } : {},
@@ -5574,7 +5360,7 @@ const VFab = vue.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"])
       ]
     );
   }
@@ -5587,13 +5373,6 @@ const VFilePicker = vue.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.
      */
@@ -5763,7 +5542,6 @@ const VFilePicker = vue.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 } : {},
@@ -5808,7 +5586,7 @@ const VFilePicker = vue.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"])
         ]
       );
     }
@@ -5819,7 +5597,6 @@ const VFilePicker = vue.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 } : {},
@@ -5862,7 +5639,7 @@ const VFilePicker = vue.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"])
       ]
     );
   }
@@ -5875,13 +5652,6 @@ const VHeader = vue.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
      */
@@ -5933,7 +5703,6 @@ const VHeader = vue.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",
@@ -5961,9 +5730,9 @@ const VHeader = vue.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"])
         ]
       );
     }
@@ -5974,7 +5743,6 @@ const VHeader = vue.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) => {
@@ -6000,9 +5768,9 @@ const VHeader = vue.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"])
       ]
     );
   }
@@ -6011,13 +5779,6 @@ const VHeader = vue.defineComponent({
 const VIcon = vue.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.
      */
@@ -6084,7 +5845,6 @@ const VIcon = vue.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 } : {}
@@ -6120,7 +5880,6 @@ const VIcon = vue.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 } : {}
@@ -6155,13 +5914,6 @@ const VIcon = vue.defineComponent({
 const VLayout = vue.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
      */
@@ -6243,7 +5995,6 @@ const VLayout = vue.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 } : {},
@@ -6281,7 +6032,6 @@ const VLayout = vue.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 } : {},
@@ -6325,13 +6075,6 @@ const VMenu = vue.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.
      */
@@ -6434,7 +6177,6 @@ const VMenu = vue.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 } : {},
@@ -6475,11 +6217,11 @@ const VMenu = vue.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"])
         ]
       );
     }
@@ -6490,7 +6232,6 @@ const VMenu = vue.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 } : {},
@@ -6526,11 +6267,11 @@ const VMenu = vue.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"])
       ]
     );
   }
@@ -6543,13 +6284,6 @@ const VMenuItem = vue.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.
      */
@@ -6665,7 +6399,6 @@ const VMenuItem = vue.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 } : {},
@@ -6709,11 +6442,11 @@ const VMenuItem = vue.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"])
         ]
       );
     }
@@ -6723,7 +6456,6 @@ const VMenuItem = vue.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 } : {},
@@ -6765,11 +6497,11 @@ const VMenuItem = vue.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"])
       ]
     );
   }
@@ -6777,15 +6509,7 @@ const VMenuItem = vue.defineComponent({
 
 const VNav = vue.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.
@@ -6830,9 +6554,7 @@ const VNav = vue.defineComponent({
         this.componentName,
         {
           ref: "element",
-          attrs: {
-            ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {}
-          },
+          attrs: {},
           class: "vvd-component",
           on: {
             blur: (event) => {
@@ -6863,9 +6585,7 @@ const VNav = vue.defineComponent({
       {
         ref: "element",
         class: "vvd-component",
-        ...handleVue3Props({
-          ...this.ariaCurrent !== void 0 ? { "^aria-current": this.ariaCurrent } : {}
-        }),
+        ...handleVue3Props({}),
         onBlur: (event) => {
           this.$emit("blur", event);
         },
@@ -6903,13 +6623,6 @@ const VNavDisclosure = vue.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.
      */
@@ -6982,7 +6695,6 @@ const VNavDisclosure = vue.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 } : {},
@@ -7016,9 +6728,9 @@ const VNavDisclosure = vue.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"])
         ]
       );
     }
@@ -7029,7 +6741,6 @@ const VNavDisclosure = vue.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 } : {},
@@ -7061,9 +6772,9 @@ const VNavDisclosure = vue.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"])
       ]
     );
   }
@@ -7079,13 +6790,6 @@ const VNavItem = vue.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
      */
@@ -7195,7 +6899,6 @@ const VNavItem = vue.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 } : {},
@@ -7234,9 +6937,9 @@ const VNavItem = vue.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"])
         ]
       );
     }
@@ -7247,7 +6950,6 @@ const VNavItem = vue.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 } : {},
@@ -7284,9 +6986,9 @@ const VNavItem = vue.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"])
       ]
     );
   }
@@ -7295,13 +6997,6 @@ const VNavItem = vue.defineComponent({
 const VNote = vue.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
@@ -7361,7 +7056,6 @@ const VNote = vue.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 } : {}
@@ -7391,7 +7085,7 @@ const VNote = vue.defineComponent({
         [
           this.$slots.default,
           // @slot icon Add an icon to the component.
-          handleNamedSlot("icon", this.$slots["icon"])
+          handleNamedSlotV2("icon", this.$slots["icon"])
         ]
       );
     }
@@ -7401,7 +7095,6 @@ const VNote = vue.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 } : {}
@@ -7429,7 +7122,7 @@ const VNote = vue.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"])
       ]
     );
   }
@@ -7446,13 +7139,6 @@ const VNumberField = vue.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.
@@ -7656,7 +7342,6 @@ const VNumberField = vue.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 } : {},
@@ -7713,7 +7398,7 @@ const VNumberField = vue.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"])
         ]
       );
     }
@@ -7724,7 +7409,6 @@ const VNumberField = vue.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 } : {},
@@ -7779,7 +7463,7 @@ const VNumberField = vue.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"])
       ]
     );
   }
@@ -7788,13 +7472,6 @@ const VNumberField = vue.defineComponent({
 const VOption = vue.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.
      */
@@ -7877,7 +7554,6 @@ const VOption = vue.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 } : {},
@@ -7915,7 +7591,7 @@ const VOption = vue.defineComponent({
         [
           this.$slots.default,
           // @slot icon Slot to add an icon to the option.
-          handleNamedSlot("icon", this.$slots["icon"])
+          handleNamedSlotV2("icon", this.$slots["icon"])
         ]
       );
     }
@@ -7925,7 +7601,6 @@ const VOption = vue.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 } : {},
@@ -7959,7 +7634,7 @@ const VOption = vue.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"])
       ]
     );
   }
@@ -7968,13 +7643,6 @@ const VOption = vue.defineComponent({
 const VPagination = vue.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 },
     /**
@@ -8050,7 +7718,6 @@ const VPagination = vue.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 } : {},
@@ -8091,7 +7758,6 @@ const VPagination = vue.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 } : {},
@@ -8131,13 +7797,6 @@ const VPagination = vue.defineComponent({
 const VProgress = vue.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.
      */
@@ -8218,7 +7877,6 @@ const VProgress = vue.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 } : {},
@@ -8258,7 +7916,6 @@ const VProgress = vue.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 } : {},
@@ -8297,13 +7954,6 @@ const VProgress = vue.defineComponent({
 const VProgressRing = vue.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
@@ -8377,7 +8027,6 @@ const VProgressRing = vue.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 } : {},
@@ -8416,7 +8065,6 @@ const VProgressRing = vue.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 } : {},
@@ -8454,13 +8102,6 @@ const VProgressRing = vue.defineComponent({
 const VRadio = vue.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
@@ -8565,7 +8206,6 @@ const VRadio = vue.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 } : {},
@@ -8612,7 +8252,6 @@ const VRadio = vue.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 } : {},
@@ -8662,13 +8301,6 @@ const VRadioGroup = vue.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.
      */
@@ -8761,7 +8393,6 @@ const VRadioGroup = vue.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 } : {},
@@ -8804,7 +8435,6 @@ const VRadioGroup = vue.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 } : {},
@@ -8846,13 +8476,6 @@ const VRadioGroup = vue.defineComponent({
 const VRangeSlider = vue.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
      */
@@ -9028,7 +8651,6 @@ const VRangeSlider = vue.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 } : {},
@@ -9091,7 +8713,6 @@ const VRangeSlider = vue.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 } : {},
@@ -9153,13 +8774,6 @@ const VRangeSlider = vue.defineComponent({
 const VRichTextEditor = vue.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 }
   },
@@ -9202,6 +8816,9 @@ const VRichTextEditor = vue.defineComponent({
     selectionStartChanged() {
       return this.element?.selectionStartChanged();
     },
+    setSelectionDecoration(decoration) {
+      return this.element?.setSelectionDecoration(decoration);
+    },
     setTextSize(size) {
       return this.element?.setTextSize(size);
     }
@@ -9221,7 +8838,6 @@ const VRichTextEditor = vue.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 } : {}
           },
@@ -9256,7 +8872,6 @@ const VRichTextEditor = vue.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 } : {}
         }),
@@ -9298,13 +8913,6 @@ const VSearchableSelect = vue.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.
      */
@@ -9459,7 +9067,6 @@ const VSearchableSelect = vue.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 } : {},
@@ -9518,17 +9125,17 @@ const VSearchableSelect = vue.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"])
         ]
       );
     }
@@ -9539,7 +9146,6 @@ const VSearchableSelect = vue.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 } : {},
@@ -9594,17 +9200,20 @@ const VSearchableSelect = vue.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"])
       ]
     );
   }
@@ -9624,13 +9233,6 @@ const VSelect = vue.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.
      */
@@ -9798,7 +9400,6 @@ const VSelect = vue.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 } : {},
@@ -9846,11 +9447,11 @@ const VSelect = vue.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"])
         ]
       );
     }
@@ -9861,7 +9462,6 @@ const VSelect = vue.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 } : {},
@@ -9907,11 +9507,11 @@ const VSelect = vue.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"])
       ]
     );
   }
@@ -9920,13 +9520,6 @@ const VSelect = vue.defineComponent({
 const VSelectableBox = vue.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
      */
@@ -10011,7 +9604,6 @@ const VSelectableBox = vue.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 } : {},
@@ -10053,7 +9645,6 @@ const VSelectableBox = vue.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 } : {},
@@ -10098,13 +9689,6 @@ const VSideDrawer = vue.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
      */
@@ -10179,7 +9763,6 @@ const VSideDrawer = vue.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 } : {}
@@ -10218,7 +9801,7 @@ const VSideDrawer = vue.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"])
         ]
       );
     }
@@ -10229,7 +9812,6 @@ const VSideDrawer = vue.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 } : {}
@@ -10266,7 +9848,7 @@ const VSideDrawer = vue.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"])
       ]
     );
   }
@@ -10279,13 +9861,6 @@ const VSlider = vue.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
      */
@@ -10439,7 +10014,6 @@ const VSlider = vue.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 } : {},
@@ -10490,7 +10064,6 @@ const VSlider = vue.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 } : {},
@@ -10547,13 +10120,6 @@ const VSplitButton = vue.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.
      */
@@ -10566,7 +10132,7 @@ const VSplitButton = vue.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 },
@@ -10658,7 +10224,6 @@ const VSplitButton = vue.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 } : {},
@@ -10699,7 +10264,7 @@ const VSplitButton = vue.defineComponent({
         [
           this.$slots.default,
           // @slot icon Add an icon to the component.
-          handleNamedSlot("icon", this.$slots["icon"])
+          handleNamedSlotV2("icon", this.$slots["icon"])
         ]
       );
     }
@@ -10710,7 +10275,6 @@ const VSplitButton = vue.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 } : {},
@@ -10749,7 +10313,7 @@ const VSplitButton = vue.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"])
       ]
     );
   }
@@ -10762,13 +10326,6 @@ const VSwitch = vue.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
@@ -10885,7 +10442,6 @@ const VSwitch = vue.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 } : {},
@@ -10932,7 +10488,6 @@ const VSwitch = vue.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 } : {},
@@ -10978,13 +10533,6 @@ const VSwitch = vue.defineComponent({
 const VTab = vue.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.
@@ -11075,7 +10623,6 @@ const VTab = vue.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 } : {},
@@ -11111,7 +10658,7 @@ const VTab = vue.defineComponent({
         [
           this.$slots.default,
           // @slot icon Slot to add an icon to tab.
-          handleNamedSlot("icon", this.$slots["icon"])
+          handleNamedSlotV2("icon", this.$slots["icon"])
         ]
       );
     }
@@ -11121,7 +10668,6 @@ const VTab = vue.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 } : {},
@@ -11155,7 +10701,7 @@ const VTab = vue.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"])
       ]
     );
   }
@@ -11163,15 +10709,7 @@ const VTab = vue.defineComponent({
 
 const VTabPanel = vue.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.
@@ -11216,9 +10754,7 @@ const VTabPanel = vue.defineComponent({
         this.componentName,
         {
           ref: "element",
-          attrs: {
-            ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {}
-          },
+          attrs: {},
           class: "vvd-component",
           on: {
             blur: (event) => {
@@ -11249,9 +10785,7 @@ const VTabPanel = vue.defineComponent({
       {
         ref: "element",
         class: "vvd-component",
-        ...handleVue3Props({
-          ...this.ariaCurrent !== void 0 ? { "^aria-current": this.ariaCurrent } : {}
-        }),
+        ...handleVue3Props({}),
         onBlur: (event) => {
           this.$emit("blur", event);
         },
@@ -11290,13 +10824,6 @@ const VTabs = vue.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.
      */
@@ -11386,7 +10913,6 @@ const VTabs = vue.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 } : {},
@@ -11429,7 +10955,6 @@ const VTabs = vue.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 } : {},
@@ -11476,13 +11001,6 @@ const VTag = vue.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.
      */
@@ -11586,7 +11104,6 @@ const VTag = vue.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 } : {},
@@ -11627,7 +11144,7 @@ const VTag = vue.defineComponent({
         [
           this.$slots.default,
           // @slot icon Add an icon to the component.
-          handleNamedSlot("icon", this.$slots["icon"])
+          handleNamedSlotV2("icon", this.$slots["icon"])
         ]
       );
     }
@@ -11638,7 +11155,6 @@ const VTag = vue.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 } : {},
@@ -11677,7 +11193,7 @@ const VTag = vue.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"])
       ]
     );
   }
@@ -11685,15 +11201,7 @@ const VTag = vue.defineComponent({
 
 const VTagGroup = vue.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.
@@ -11738,9 +11246,7 @@ const VTagGroup = vue.defineComponent({
         this.componentName,
         {
           ref: "element",
-          attrs: {
-            ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {}
-          },
+          attrs: {},
           class: "vvd-component",
           on: {
             blur: (event) => {
@@ -11771,9 +11277,7 @@ const VTagGroup = vue.defineComponent({
       {
         ref: "element",
         class: "vvd-component",
-        ...handleVue3Props({
-          ...this.ariaCurrent !== void 0 ? { "^aria-current": this.ariaCurrent } : {}
-        }),
+        ...handleVue3Props({}),
         onBlur: (event) => {
           this.$emit("blur", event);
         },
@@ -11808,13 +11312,6 @@ const VTextArea = vue.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.
      */
@@ -11992,7 +11489,6 @@ const VTextArea = vue.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 } : {},
@@ -12045,7 +11541,7 @@ const VTextArea = vue.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"])
         ]
       );
     }
@@ -12055,7 +11551,6 @@ const VTextArea = vue.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 } : {},
@@ -12106,7 +11601,7 @@ const VTextArea = vue.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"])
       ]
     );
   }
@@ -12123,13 +11618,6 @@ const VTextField = vue.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.
@@ -12318,7 +11806,6 @@ const VTextField = vue.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 } : {},
@@ -12374,11 +11861,11 @@ const VTextField = vue.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"]
           )
@@ -12392,7 +11879,6 @@ const VTextField = vue.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 } : {},
@@ -12446,11 +11932,11 @@ const VTextField = vue.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"]
         )
@@ -12466,13 +11952,6 @@ const VTimePicker = vue.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.
      */
@@ -12585,7 +12064,6 @@ const VTimePicker = vue.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 } : {},
@@ -12629,7 +12107,7 @@ const VTimePicker = vue.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"])
         ]
       );
     }
@@ -12639,7 +12117,6 @@ const VTimePicker = vue.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 } : {},
@@ -12681,7 +12158,7 @@ const VTimePicker = vue.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"])
       ]
     );
   }
@@ -12701,13 +12178,6 @@ const VToggletip = vue.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
      */
@@ -12774,7 +12244,6 @@ const VToggletip = vue.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 } : {}
@@ -12807,9 +12276,9 @@ const VToggletip = vue.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"])
         ]
       );
     }
@@ -12821,7 +12290,6 @@ const VToggletip = vue.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 } : {}
@@ -12849,9 +12317,9 @@ const VToggletip = vue.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"])
       ]
     );
   }
@@ -12867,13 +12335,6 @@ const VTooltip = vue.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,
@@ -12930,7 +12391,6 @@ const VTooltip = vue.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 } : {}
@@ -12963,7 +12423,7 @@ const VTooltip = vue.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"])
         ]
       );
     }
@@ -12974,7 +12434,6 @@ const VTooltip = vue.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 } : {}
@@ -13002,7 +12461,7 @@ const VTooltip = vue.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"])
       ]
     );
   }
@@ -13011,13 +12470,6 @@ const VTooltip = vue.defineComponent({
 const VTreeItem = vue.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.
      */
@@ -13105,7 +12557,6 @@ const VTreeItem = vue.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 } : {},
@@ -13143,9 +12594,9 @@ const VTreeItem = vue.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"])
         ]
       );
     }
@@ -13155,7 +12606,6 @@ const VTreeItem = vue.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 } : {},
@@ -13191,9 +12641,9 @@ const VTreeItem = vue.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"])
       ]
     );
   }
@@ -13202,13 +12652,6 @@ const VTreeItem = vue.defineComponent({
 const VTreeView = vue.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.
@@ -13267,7 +12710,6 @@ const VTreeView = vue.defineComponent({
         {
           ref: "element",
           attrs: {
-            ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
             ...this.renderCollapsedNodes !== void 0 ? { "render-collapsed-nodes": this.renderCollapsedNodes } : {}
           },
           class: "vvd-component",
@@ -13301,7 +12743,6 @@ const VTreeView = vue.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) => {
@@ -13334,13 +12775,6 @@ const VTreeView = vue.defineComponent({
 const VVideoPlayer = vue.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)
      */
@@ -13432,7 +12866,6 @@ const VVideoPlayer = vue.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 } : {},
@@ -13480,7 +12913,6 @@ const VVideoPlayer = vue.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 } : {},
@@ -14767,17 +14199,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",