@vonage/vivid-vue 5.8.0 → 5.10.0

package/dist/index.cjs

@@ -169,7 +169,7 @@ const VAccordion = vue.defineComponent({
       },
       [
         // @ts-ignore
-        this.$slots.default && this.$slots.default()
+        this.$slots.default?.()
       ]
     );
   }
@@ -182,10 +182,15 @@ function handleNamedSlotV2(slot, children) {
   }
   for (const [index, child] of children.entries()) {
     if (isTextNode(child)) {
-      children[index] = vue.h("span", { attrs: { slot } }, child.text);
+      children[index] = vue.h(
+        "span",
+        { attrs: { slot, key: `${slot}-${index}` } },
+        child.text
+      );
     } else {
       if (!child.data) child.data = {};
       child.data.attrs = { ...child.data?.attrs, slot };
+      child.data.key = `${slot}-${index}`;
     }
   }
   return children;
@@ -194,28 +199,38 @@ 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 };
+  let keyIndex = 0;
+  function handleChildren(slot2, children2) {
+    if (Array.isArray(children2)) {
+      for (const [index, child] of children2.entries()) {
+        if (!isVNodeV3(child)) {
+          continue;
+        }
+        if (child.type === fragmentSymbol) {
+          handleChildren(slot2, child.children);
+        } else if (child.type === textSymbol) {
+          children2[index] = vue.h(
+            "span",
+            { slot: slot2, key: `${slot2}-${keyIndex++}` },
+            // @ts-ignore
+            child.children
+          );
+        } else {
+          if (!child.props) child.props = {};
+          child.props = { ...child.props, slot: slot2 };
+          child.key = `${slot2}-${keyIndex++}`;
+        }
       }
     }
+    return children2;
   }
-  return children;
+  return handleChildren(slot, children);
 }
 function handleNamedSlotV3(slot, children) {
   if (!children) {
     return null;
   }
-  return handleSlottedChildrenV3(slot, children());
+  return handleSlottedChildrenV3(slot, children);
 }
 
 const VAccordionItem = vue.defineComponent({
@@ -408,13 +423,13 @@ const VAccordionItem = vue.defineComponent({
       },
       [
         // @ts-ignore
-        this.$slots.default && this.$slots.default(),
+        this.$slots.default?.(),
         // @slot heading Used to add content to the heading.
-        handleNamedSlotV3("heading", this.$slots["heading"]),
+        handleNamedSlotV3("heading", this.$slots["heading"]?.()),
         // @slot icon The preferred way to add an icon to the component.
-        handleNamedSlotV3("icon", this.$slots["icon"]),
+        handleNamedSlotV3("icon", this.$slots["icon"]?.()),
         // @slot meta Used to add additional content to the heading.
-        handleNamedSlotV3("meta", this.$slots["meta"])
+        handleNamedSlotV3("meta", this.$slots["meta"]?.())
       ]
     );
   }
@@ -547,7 +562,7 @@ const VActionGroup = vue.defineComponent({
       },
       [
         // @ts-ignore
-        this.$slots.default && this.$slots.default()
+        this.$slots.default?.()
       ]
     );
   }
@@ -763,13 +778,16 @@ const VAlert = vue.defineComponent({
       },
       [
         // @ts-ignore
-        this.$slots.default && this.$slots.default(),
+        this.$slots.default?.(),
         // @slot action-items Add action items to the Alert using this slot.
-        handleNamedSlotV3("action-items", this.$slots["action-items"]),
+        handleNamedSlotV3(
+          "action-items",
+          this.$slots["action-items"]?.()
+        ),
         // @slot icon The preferred way to add an icon to the component.
-        handleNamedSlotV3("icon", this.$slots["icon"]),
+        handleNamedSlotV3("icon", this.$slots["icon"]?.()),
         // @slot main The main content of the Alert.
-        handleNamedSlotV3("main", this.$slots["main"])
+        handleNamedSlotV3("main", this.$slots["main"]?.())
       ]
     );
   }
@@ -966,7 +984,7 @@ const VAudioPlayer = vue.defineComponent({
       },
       [
         // @ts-ignore
-        this.$slots.default && this.$slots.default()
+        this.$slots.default?.()
       ]
     );
   }
@@ -1184,11 +1202,11 @@ const VAvatar = vue.defineComponent({
       },
       [
         // @ts-ignore
-        this.$slots.default && 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).
-        handleNamedSlotV3("graphic", this.$slots["graphic"]),
+        handleNamedSlotV3("graphic", this.$slots["graphic"]?.()),
         // @slot icon The preferred way to add an icon to the component.
-        handleNamedSlotV3("icon", this.$slots["icon"])
+        handleNamedSlotV3("icon", this.$slots["icon"]?.())
       ]
     );
   }
@@ -1353,9 +1371,9 @@ const VBadge = vue.defineComponent({
       },
       [
         // @ts-ignore
-        this.$slots.default && this.$slots.default(),
+        this.$slots.default?.(),
         // @slot icon The preferred way to add an icon to the component.
-        handleNamedSlotV3("icon", this.$slots["icon"])
+        handleNamedSlotV3("icon", this.$slots["icon"]?.())
       ]
     );
   }
@@ -1502,11 +1520,14 @@ const VBanner = vue.defineComponent({
       },
       [
         // @ts-ignore
-        this.$slots.default && this.$slots.default(),
+        this.$slots.default?.(),
         // @slot action-items Add action items to banner using this slot.
-        handleNamedSlotV3("action-items", this.$slots["action-items"]),
+        handleNamedSlotV3(
+          "action-items",
+          this.$slots["action-items"]?.()
+        ),
         // @slot icon The preferred way to add an icon to the component.
-        handleNamedSlotV3("icon", this.$slots["icon"])
+        handleNamedSlotV3("icon", this.$slots["icon"]?.())
       ]
     );
   }
@@ -1611,7 +1632,7 @@ const VBreadcrumb = vue.defineComponent({
       },
       [
         // @ts-ignore
-        this.$slots.default && this.$slots.default()
+        this.$slots.default?.()
       ]
     );
   }
@@ -1777,7 +1798,7 @@ const VBreadcrumbItem = vue.defineComponent({
       },
       [
         // @ts-ignore
-        this.$slots.default && this.$slots.default()
+        this.$slots.default?.()
       ]
     );
   }
@@ -2132,9 +2153,9 @@ const VButton = vue.defineComponent({
       },
       [
         // @ts-ignore
-        this.$slots.default && this.$slots.default(),
+        this.$slots.default?.(),
         // @slot icon The preferred way to add an icon to the component.
-        handleNamedSlotV3("icon", this.$slots["icon"])
+        handleNamedSlotV3("icon", this.$slots["icon"]?.())
       ]
     );
   }
@@ -2318,21 +2339,21 @@ const VCalendar = vue.defineComponent({
       },
       [
         // @ts-ignore
-        this.$slots.default && this.$slots.default(),
+        this.$slots.default?.(),
         // @slot day-0 Assign elements to corresponding day column using this slot.
-        handleNamedSlotV3("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.
-        handleNamedSlotV3("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.
-        handleNamedSlotV3("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.
-        handleNamedSlotV3("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.
-        handleNamedSlotV3("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.
-        handleNamedSlotV3("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.
-        handleNamedSlotV3("day-6", this.$slots["day-6"])
+        handleNamedSlotV3("day-6", this.$slots["day-6"]?.())
       ]
     );
   }
@@ -2492,7 +2513,7 @@ const VCalendarEvent = vue.defineComponent({
       },
       [
         // @ts-ignore
-        this.$slots.default && this.$slots.default()
+        this.$slots.default?.()
       ]
     );
   }
@@ -2716,17 +2737,17 @@ const VCard = vue.defineComponent({
       },
       [
         // @ts-ignore
-        this.$slots.default && this.$slots.default(),
+        this.$slots.default?.(),
         // @slot footer The footer slot is for content in the card footer.
-        handleNamedSlotV3("footer", this.$slots["footer"]),
+        handleNamedSlotV3("footer", this.$slots["footer"]?.()),
         // @slot graphic The graphic slot overrides the icon property.
-        handleNamedSlotV3("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.
-        handleNamedSlotV3("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.
-        handleNamedSlotV3("media", this.$slots["media"]),
+        handleNamedSlotV3("media", this.$slots["media"]?.()),
         // @slot meta The meta slot is for action content in the card header.
-        handleNamedSlotV3("meta", this.$slots["meta"])
+        handleNamedSlotV3("meta", this.$slots["meta"]?.())
       ]
     );
   }
@@ -2972,9 +2993,12 @@ const VCheckbox = vue.defineComponent({
       },
       [
         // @ts-ignore
-        this.$slots.default && this.$slots.default(),
+        this.$slots.default?.(),
         // @slot helper-text Describes how to use the checkbox. Alternative to the `helper-text` attribute.
-        handleNamedSlotV3("helper-text", this.$slots["helper-text"])
+        handleNamedSlotV3(
+          "helper-text",
+          this.$slots["helper-text"]?.()
+        )
       ]
     );
   }
@@ -3178,6 +3202,8 @@ const VColorPicker = vue.defineComponent({
         },
         [
           this.$slots.default,
+          // @slot contextual-help Slot for the contextual-help component, displayed next to the label.
+          handleNamedSlotV2("contextual-help", this.$slots["contextual-help"]),
           // @slot helper-text Describes how to use the text-field. Alternative to the `helper-text` attribute.
           handleNamedSlotV2("helper-text", this.$slots["helper-text"]),
           // @slot popup-text Overrides the default "Color Picker" title of the Popup window.
@@ -3234,13 +3260,24 @@ const VColorPicker = vue.defineComponent({
       },
       [
         // @ts-ignore
-        this.$slots.default && this.$slots.default(),
+        this.$slots.default?.(),
+        // @slot contextual-help Slot for the contextual-help component, displayed next to the label.
+        handleNamedSlotV3(
+          "contextual-help",
+          this.$slots["contextual-help"]?.()
+        ),
         // @slot helper-text Describes how to use the text-field. Alternative to the `helper-text` attribute.
-        handleNamedSlotV3("helper-text", this.$slots["helper-text"]),
+        handleNamedSlotV3(
+          "helper-text",
+          this.$slots["helper-text"]?.()
+        ),
         // @slot popup-text Overrides the default "Color Picker" title of the Popup window.
-        handleNamedSlotV3("popup-text", this.$slots["popup-text"]),
+        handleNamedSlotV3("popup-text", this.$slots["popup-text"]?.()),
         // @slot swatches-text  Overrides the default "Saved colors:" text above color swatches.
-        handleNamedSlotV3("swatches-text", this.$slots["swatches-text"])
+        handleNamedSlotV3(
+          "swatches-text",
+          this.$slots["swatches-text"]?.()
+        )
       ]
     );
   }
@@ -3487,6 +3524,8 @@ const VCombobox = vue.defineComponent({
         },
         [
           this.$slots.default,
+          // @slot contextual-help Slot for the contextual-help component, displayed next to the label.
+          handleNamedSlotV2("contextual-help", this.$slots["contextual-help"]),
           // @slot helper-text Describes how to use the combobox. Alternative to the `helper-text` attribute.
           handleNamedSlotV2("helper-text", this.$slots["helper-text"]),
           // @slot icon The preferred way to add an icon to the combobox control.
@@ -3546,13 +3585,21 @@ const VCombobox = vue.defineComponent({
       },
       [
         // @ts-ignore
-        this.$slots.default && this.$slots.default(),
+        this.$slots.default?.(),
+        // @slot contextual-help Slot for the contextual-help component, displayed next to the label.
+        handleNamedSlotV3(
+          "contextual-help",
+          this.$slots["contextual-help"]?.()
+        ),
         // @slot helper-text Describes how to use the combobox. Alternative to the `helper-text` attribute.
-        handleNamedSlotV3("helper-text", this.$slots["helper-text"]),
+        handleNamedSlotV3(
+          "helper-text",
+          this.$slots["helper-text"]?.()
+        ),
         // @slot icon The preferred way to add an icon to the combobox control.
-        handleNamedSlotV3("icon", this.$slots["icon"]),
+        handleNamedSlotV3("icon", this.$slots["icon"]?.()),
         // @slot meta Slot to add meta content to the combobox control.
-        handleNamedSlotV3("meta", this.$slots["meta"])
+        handleNamedSlotV3("meta", this.$slots["meta"]?.())
       ]
     );
   }
@@ -3677,9 +3724,136 @@ const VContextualHelp = vue.defineComponent({
       },
       [
         // @ts-ignore
-        this.$slots.default && this.$slots.default(),
+        this.$slots.default?.(),
         // @slot icon Custom icon slot (optional).
-        handleNamedSlotV3("icon", this.$slots["icon"])
+        handleNamedSlotV3("icon", this.$slots["icon"]?.())
+      ]
+    );
+  }
+});
+
+const VCountry = vue.defineComponent({
+  name: "VCountry",
+  props: {
+    /**
+     * ISO 3166-1 alpha-2 country code (e.g. "GB", "UK", "US"). When set, the component shows the matching flag icon and the code (e.g. "UK") automatically.
+     */
+    code: { type: String, default: void 0 },
+    /**
+     * Optional label to override the displayed text. When set, this is shown instead of the country code (e.g. for obscure countries where "Saint Helena" is clearer than "SH").
+     */
+    label: { type: String, default: void 0 }
+  },
+  emits: [
+    /**
+     * Fires when the element loses focus.
+     * @type {FocusEvent}
+     */
+    "blur",
+    /**
+     * Fires when a pointing device button (such as a mouse's primary mouse button) is both pressed and released while the pointer is located inside the element.
+     * @type {MouseEvent}
+     */
+    "click",
+    /**
+     * Fires when the element receives focus.
+     * @type {FocusEvent}
+     */
+    "focus",
+    /**
+     * Fires when the value of an element has been changed.
+     * @type {Event}
+     */
+    "input",
+    /**
+     * Fires when a key is pressed.
+     * @type {KeyboardEvent}
+     */
+    "keydown",
+    /**
+     * Fires when a key is released.
+     * @type {KeyboardEvent}
+     */
+    "keyup"
+  ],
+  methods: {},
+  setup(props, ctx) {
+    const componentName = registerComponent("country", vivid.registerCountry);
+    const element = vue.ref(null);
+    return { componentName, element };
+  },
+  render() {
+    if (isVue2) {
+      return vue.h(
+        this.componentName,
+        {
+          ref: "element",
+          attrs: {
+            ...this.code !== void 0 ? { code: this.code } : {},
+            ...this.label !== void 0 ? { label: this.label } : {}
+          },
+          class: "vvd-component",
+          on: {
+            blur: (event) => {
+              this.$emit("blur", event);
+            },
+            click: (event) => {
+              this.$emit("click", event);
+            },
+            focus: (event) => {
+              this.$emit("focus", event);
+            },
+            input: (event) => {
+              this.$emit("input", event);
+            },
+            keydown: (event) => {
+              this.$emit("keydown", event);
+            },
+            keyup: (event) => {
+              this.$emit("keyup", event);
+            }
+          }
+        },
+        [
+          this.$slots.default,
+          // @slot icon Optional custom flag or graphic. When `code` is set and no content is slotted, a default flag icon (Vivid/Vonage icon set) is shown.
+          handleNamedSlotV2("icon", this.$slots["icon"])
+        ]
+      );
+    }
+    return vue.h(
+      this.componentName,
+      {
+        ref: "element",
+        class: "vvd-component",
+        ...handleVue3Props({
+          ...this.code !== void 0 ? { "^code": this.code } : {},
+          ...this.label !== void 0 ? { "^label": this.label } : {}
+        }),
+        onBlur: (event) => {
+          this.$emit("blur", event);
+        },
+        onClick: (event) => {
+          this.$emit("click", event);
+        },
+        onFocus: (event) => {
+          this.$emit("focus", event);
+        },
+        onInput: (event) => {
+          this.$emit("input", event);
+        },
+        onKeydown: (event) => {
+          this.$emit("keydown", event);
+        },
+        onKeyup: (event) => {
+          this.$emit("keyup", event);
+        }
+      },
+      [
+        // @ts-ignore
+        this.$slots.default?.(),
+        // @slot icon Optional custom flag or graphic. When `code` is set and no content is slotted, a default flag icon (Vivid/Vonage icon set) is shown.
+        handleNamedSlotV3("icon", this.$slots["icon"]?.())
       ]
     );
   }
@@ -3851,7 +4025,7 @@ const VDataGrid = vue.defineComponent({
       },
       [
         // @ts-ignore
-        this.$slots.default && this.$slots.default()
+        this.$slots.default?.()
       ]
     );
   }
@@ -4043,7 +4217,7 @@ const VDataGridCell = vue.defineComponent({
       },
       [
         // @ts-ignore
-        this.$slots.default && this.$slots.default()
+        this.$slots.default?.()
       ]
     );
   }
@@ -4209,7 +4383,7 @@ const VDataGridRow = vue.defineComponent({
       },
       [
         // @ts-ignore
-        this.$slots.default && this.$slots.default()
+        this.$slots.default?.()
       ]
     );
   }
@@ -4382,6 +4556,8 @@ const VDatePicker = vue.defineComponent({
         },
         [
           this.$slots.default,
+          // @slot contextual-help Slot for the contextual-help component, displayed next to the label.
+          handleNamedSlotV2("contextual-help", this.$slots["contextual-help"]),
           // @slot helper-text Describes how to use the date-picker. Alternative to the `helper-text` attribute.
           handleNamedSlotV2("helper-text", this.$slots["helper-text"])
         ]
@@ -4430,9 +4606,17 @@ const VDatePicker = vue.defineComponent({
       },
       [
         // @ts-ignore
-        this.$slots.default && this.$slots.default(),
+        this.$slots.default?.(),
+        // @slot contextual-help Slot for the contextual-help component, displayed next to the label.
+        handleNamedSlotV3(
+          "contextual-help",
+          this.$slots["contextual-help"]?.()
+        ),
         // @slot helper-text Describes how to use the date-picker. Alternative to the `helper-text` attribute.
-        handleNamedSlotV3("helper-text", this.$slots["helper-text"])
+        handleNamedSlotV3(
+          "helper-text",
+          this.$slots["helper-text"]?.()
+        )
       ]
     );
   }
@@ -4652,6 +4836,8 @@ const VDateRangePicker = vue.defineComponent({
         },
         [
           this.$slots.default,
+          // @slot contextual-help Slot for the contextual-help component, displayed next to the label.
+          handleNamedSlotV2("contextual-help", this.$slots["contextual-help"]),
           // @slot helper-text Describes how to use the date-range-picker. Alternative to the `helper-text` attribute.
           handleNamedSlotV2("helper-text", this.$slots["helper-text"])
         ]
@@ -4711,9 +4897,17 @@ const VDateRangePicker = vue.defineComponent({
       },
       [
         // @ts-ignore
-        this.$slots.default && this.$slots.default(),
+        this.$slots.default?.(),
+        // @slot contextual-help Slot for the contextual-help component, displayed next to the label.
+        handleNamedSlotV3(
+          "contextual-help",
+          this.$slots["contextual-help"]?.()
+        ),
         // @slot helper-text Describes how to use the date-range-picker. Alternative to the `helper-text` attribute.
-        handleNamedSlotV3("helper-text", this.$slots["helper-text"])
+        handleNamedSlotV3(
+          "helper-text",
+          this.$slots["helper-text"]?.()
+        )
       ]
     );
   }
@@ -4924,6 +5118,8 @@ const VDateTimePicker = vue.defineComponent({
         },
         [
           this.$slots.default,
+          // @slot contextual-help Slot for the contextual-help component, displayed next to the label.
+          handleNamedSlotV2("contextual-help", this.$slots["contextual-help"]),
           // @slot helper-text Describes how to use the date-picker. Alternative to the `helper-text` attribute.
           handleNamedSlotV2("helper-text", this.$slots["helper-text"])
         ]
@@ -4979,9 +5175,17 @@ const VDateTimePicker = vue.defineComponent({
       },
       [
         // @ts-ignore
-        this.$slots.default && this.$slots.default(),
+        this.$slots.default?.(),
+        // @slot contextual-help Slot for the contextual-help component, displayed next to the label.
+        handleNamedSlotV3(
+          "contextual-help",
+          this.$slots["contextual-help"]?.()
+        ),
         // @slot helper-text Describes how to use the date-picker. Alternative to the `helper-text` attribute.
-        handleNamedSlotV3("helper-text", this.$slots["helper-text"])
+        handleNamedSlotV3(
+          "helper-text",
+          this.$slots["helper-text"]?.()
+        )
       ]
     );
   }
@@ -5234,7 +5438,7 @@ const VDialPad = vue.defineComponent({
       },
       [
         // @ts-ignore
-        this.$slots.default && this.$slots.default()
+        this.$slots.default?.()
       ]
     );
   }
@@ -5477,17 +5681,20 @@ const VDialog = vue.defineComponent({
       },
       [
         // @ts-ignore
-        this.$slots.default && 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.
-        handleNamedSlotV3("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.
-        handleNamedSlotV3("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.
-        handleNamedSlotV3("footer", this.$slots["footer"]),
+        handleNamedSlotV3("footer", this.$slots["footer"]?.()),
         // @slot graphic Use the graphic slot in order to replace the icon.
-        handleNamedSlotV3("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.
-        handleNamedSlotV3("main", this.$slots["main"])
+        handleNamedSlotV3("main", this.$slots["main"]?.())
       ]
     );
   }
@@ -5614,7 +5821,7 @@ const VDivider = vue.defineComponent({
       },
       [
         // @ts-ignore
-        this.$slots.default && this.$slots.default()
+        this.$slots.default?.()
       ]
     );
   }
@@ -5757,11 +5964,14 @@ const VEmptyState = vue.defineComponent({
       },
       [
         // @ts-ignore
-        this.$slots.default && this.$slots.default(),
+        this.$slots.default?.(),
         // @slot action-items Slot to add action items to the empty state
-        handleNamedSlotV3("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
-        handleNamedSlotV3("graphic", this.$slots["graphic"])
+        handleNamedSlotV3("graphic", this.$slots["graphic"]?.())
       ]
     );
   }
@@ -6023,9 +6233,9 @@ const VFab = vue.defineComponent({
       },
       [
         // @ts-ignore
-        this.$slots.default && this.$slots.default(),
+        this.$slots.default?.(),
         // @slot icon The preferred way to add an icon to the component.
-        handleNamedSlotV3("icon", this.$slots["icon"])
+        handleNamedSlotV3("icon", this.$slots["icon"]?.())
       ]
     );
   }
@@ -6224,6 +6434,8 @@ const VFilePicker = vue.defineComponent({
         },
         [
           this.$slots.default,
+          // @slot contextual-help Slot for the contextual-help component, displayed next to the label.
+          handleNamedSlotV2("contextual-help", this.$slots["contextual-help"]),
           // @slot helper-text Describes how to use the file-picker. Alternative to the `helper-text` attribute.
           handleNamedSlotV2("helper-text", this.$slots["helper-text"])
         ]
@@ -6276,9 +6488,17 @@ const VFilePicker = vue.defineComponent({
       },
       [
         // @ts-ignore
-        this.$slots.default && this.$slots.default(),
+        this.$slots.default?.(),
+        // @slot contextual-help Slot for the contextual-help component, displayed next to the label.
+        handleNamedSlotV3(
+          "contextual-help",
+          this.$slots["contextual-help"]?.()
+        ),
         // @slot helper-text Describes how to use the file-picker. Alternative to the `helper-text` attribute.
-        handleNamedSlotV3("helper-text", this.$slots["helper-text"])
+        handleNamedSlotV3(
+          "helper-text",
+          this.$slots["helper-text"]?.()
+        )
       ]
     );
   }
@@ -6405,11 +6625,17 @@ const VHeader = vue.defineComponent({
       },
       [
         // @ts-ignore
-        this.$slots.default && this.$slots.default(),
+        this.$slots.default?.(),
         // @slot action-items Nodes assigned to action-items slot will be set at the end of the header.
-        handleNamedSlotV3("action-items", this.$slots["action-items"]),
+        handleNamedSlotV3(
+          "action-items",
+          this.$slots["action-items"]?.()
+        ),
         // @slot app-content Content vertically aligned with header.
-        handleNamedSlotV3("app-content", this.$slots["app-content"])
+        handleNamedSlotV3(
+          "app-content",
+          this.$slots["app-content"]?.()
+        )
       ]
     );
   }
@@ -6550,7 +6776,7 @@ const VIcon = vue.defineComponent({
       },
       [
         // @ts-ignore
-        this.$slots.default && this.$slots.default()
+        this.$slots.default?.()
       ]
     );
   }
@@ -6704,7 +6930,7 @@ const VLayout = vue.defineComponent({
       },
       [
         // @ts-ignore
-        this.$slots.default && this.$slots.default()
+        this.$slots.default?.()
       ]
     );
   }
@@ -6916,13 +7142,16 @@ const VMenu = vue.defineComponent({
       },
       [
         // @ts-ignore
-        this.$slots.default && this.$slots.default(),
+        this.$slots.default?.(),
         // @slot action-items Used to add action items to the bottom of the menu.
-        handleNamedSlotV3("action-items", this.$slots["action-items"]),
+        handleNamedSlotV3(
+          "action-items",
+          this.$slots["action-items"]?.()
+        ),
         // @slot anchor Used to set the anchor element for the menu.
-        handleNamedSlotV3("anchor", this.$slots["anchor"]),
+        handleNamedSlotV3("anchor", this.$slots["anchor"]?.()),
         // @slot header Used to add additional content to the top of the menu.
-        handleNamedSlotV3("header", this.$slots["header"])
+        handleNamedSlotV3("header", this.$slots["header"]?.())
       ]
     );
   }
@@ -7146,13 +7375,16 @@ const VMenuItem = vue.defineComponent({
       },
       [
         // @ts-ignore
-        this.$slots.default && this.$slots.default(),
+        this.$slots.default?.(),
         // @slot meta Assign nodes to the `meta` slot to set a badge or an additional icon.
-        handleNamedSlotV3("meta", this.$slots["meta"]),
+        handleNamedSlotV3("meta", this.$slots["meta"]?.()),
         // @slot submenu Assign a Menu to the `submenu` slot to add a submenu.
-        handleNamedSlotV3("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.
-        handleNamedSlotV3("trailing-meta", this.$slots["trailing-meta"])
+        handleNamedSlotV3(
+          "trailing-meta",
+          this.$slots["trailing-meta"]?.()
+        )
       ]
     );
   }
@@ -7257,7 +7489,7 @@ const VNav = vue.defineComponent({
       },
       [
         // @ts-ignore
-        this.$slots.default && this.$slots.default()
+        this.$slots.default?.()
       ]
     );
   }
@@ -7426,11 +7658,11 @@ const VNavDisclosure = vue.defineComponent({
       },
       [
         // @ts-ignore
-        this.$slots.default && this.$slots.default(),
+        this.$slots.default?.(),
         // @slot icon The preferred way to add an icon to the component.
-        handleNamedSlotV3("icon", this.$slots["icon"]),
+        handleNamedSlotV3("icon", this.$slots["icon"]?.()),
         // @slot meta A slot to add additional content to the nav disclosure.
-        handleNamedSlotV3("meta", this.$slots["meta"])
+        handleNamedSlotV3("meta", this.$slots["meta"]?.())
       ]
     );
   }
@@ -7633,11 +7865,11 @@ const VNavItem = vue.defineComponent({
       },
       [
         // @ts-ignore
-        this.$slots.default && this.$slots.default(),
+        this.$slots.default?.(),
         // @slot icon The preferred way to add an icon to the component.
-        handleNamedSlotV3("icon", this.$slots["icon"]),
+        handleNamedSlotV3("icon", this.$slots["icon"]?.()),
         // @slot meta A slot to add additional content to the nav item.
-        handleNamedSlotV3("meta", this.$slots["meta"])
+        handleNamedSlotV3("meta", this.$slots["meta"]?.())
       ]
     );
   }
@@ -7769,9 +8001,9 @@ const VNote = vue.defineComponent({
       },
       [
         // @ts-ignore
-        this.$slots.default && this.$slots.default(),
+        this.$slots.default?.(),
         // @slot icon The preferred way to add an icon to the component.
-        handleNamedSlotV3("icon", this.$slots["icon"])
+        handleNamedSlotV3("icon", this.$slots["icon"]?.())
       ]
     );
   }
@@ -8063,6 +8295,8 @@ const VNumberField = vue.defineComponent({
         },
         [
           this.$slots.default,
+          // @slot contextual-help Slot for the contextual-help component, displayed next to the label.
+          handleNamedSlotV2("contextual-help", this.$slots["contextual-help"]),
           // @slot helper-text Describes how to use the number-field. Alternative to the `helper-text` attribute.
           handleNamedSlotV2("helper-text", this.$slots["helper-text"])
         ]
@@ -8128,9 +8362,17 @@ const VNumberField = vue.defineComponent({
       },
       [
         // @ts-ignore
-        this.$slots.default && this.$slots.default(),
+        this.$slots.default?.(),
+        // @slot contextual-help Slot for the contextual-help component, displayed next to the label.
+        handleNamedSlotV3(
+          "contextual-help",
+          this.$slots["contextual-help"]?.()
+        ),
         // @slot helper-text Describes how to use the number-field. Alternative to the `helper-text` attribute.
-        handleNamedSlotV3("helper-text", this.$slots["helper-text"])
+        handleNamedSlotV3(
+          "helper-text",
+          this.$slots["helper-text"]?.()
+        )
       ]
     );
   }
@@ -8269,6 +8511,8 @@ const VOption = vue.defineComponent({
           this.$slots.default,
           // @slot icon The preferred way to add an icon to the component.
           handleNamedSlotV2("icon", this.$slots["icon"]),
+          // @slot tag-icon Icon to be displayed in the tag when selected inside of Searchable Select.
+          handleNamedSlotV2("tag-icon", this.$slots["tag-icon"]),
           // @slot trailing-meta For additional elements at the end of the Option.
           handleNamedSlotV2("trailing-meta", this.$slots["trailing-meta"])
         ]
@@ -8314,11 +8558,16 @@ const VOption = vue.defineComponent({
       },
       [
         // @ts-ignore
-        this.$slots.default && this.$slots.default(),
+        this.$slots.default?.(),
         // @slot icon The preferred way to add an icon to the component.
-        handleNamedSlotV3("icon", this.$slots["icon"]),
+        handleNamedSlotV3("icon", this.$slots["icon"]?.()),
+        // @slot tag-icon Icon to be displayed in the tag when selected inside of Searchable Select.
+        handleNamedSlotV3("tag-icon", this.$slots["tag-icon"]?.()),
         // @slot trailing-meta For additional elements at the end of the Option.
-        handleNamedSlotV3("trailing-meta", this.$slots["trailing-meta"])
+        handleNamedSlotV3(
+          "trailing-meta",
+          this.$slots["trailing-meta"]?.()
+        )
       ]
     );
   }
@@ -8487,49 +8736,59 @@ const VPagination = vue.defineComponent({
       },
       [
         // @ts-ignore
-        this.$slots.default && this.$slots.default()
+        this.$slots.default?.()
       ]
     );
   }
 });
 
-const VProgress = vue.defineComponent({
-  name: "VProgress",
+const VPopover = vue.defineComponent({
+  name: "VPopover",
   props: {
     /**
-     * Indicates the progress' connotation.
+     * Sets the color-scheme to alternate (dark/light)
      */
-    connotation: {
+    alternate: { type: Boolean, default: void 0 },
+    /**
+     * Whether to render the arrow tip.
+     */
+    arrow: { type: Boolean, default: void 0 },
+    /**
+     * Overrides the default Dismiss button's aria-label.
+     */
+    dismissButtonAriaLabel: {
       type: String,
       default: void 0
     },
     /**
-     * The maximum value
+     * Sets the layout of the popover.
      */
-    max: { type: Number, default: void 0 },
+    layout: {
+      type: String,
+      default: void 0
+    },
     /**
-     * The minimum value
+     * If true, the popover uses manual dismissal (no light-dismiss).
+     * Adds a close button to the UI.
      */
-    min: { type: Number, default: void 0 },
+    manual: { type: Boolean, default: void 0 },
     /**
-     * Indicates the progress is paused
+     * Sets the offset between popover and the anchor element.
      */
-    paused: { type: Boolean, default: void 0 },
+    offset: { type: Number, default: void 0 },
     /**
-     * Indicates the progress' reverse status.
+     * Indicates if the popover is currently open.
+     * Can be set declaratively to open/close the popover.
+     * Automatically updates when the user dismisses the popover.
      */
-    reverse: { type: Boolean, default: void 0 },
+    open: { type: Boolean, default: void 0 },
     /**
-     * Indicates the progress' shape.
+     * The placement of the popover relative to the anchor.
      */
-    shape: {
+    placement: {
       type: String,
       default: void 0
-    },
-    /**
-     * The value of the progress
-     */
-    value: { type: Number, default: void 0 }
+    }
   },
   emits: [
     /**
@@ -8542,6 +8801,11 @@ const VProgress = vue.defineComponent({
      * @type {MouseEvent}
      */
     "click",
+    /**
+     * Fired when the popover closes.
+     * @type {CustomEvent}
+     */
+    "close",
     /**
      * Fires when the element receives focus.
      * @type {FocusEvent}
@@ -8561,11 +8825,47 @@ const VProgress = vue.defineComponent({
      * Fires when a key is released.
      * @type {KeyboardEvent}
      */
-    "keyup"
+    "keyup",
+    /**
+     * Fired when the popover opens.
+     * @type {CustomEvent}
+     */
+    "open"
   ],
-  methods: {},
+  methods: {
+    _slottedAnchorChanged() {
+      return this.element?._slottedAnchorChanged();
+    },
+    anchorChanged() {
+      return this.element?.anchorChanged();
+    },
+    arrowChanged() {
+      return this.element?.arrowChanged();
+    },
+    hide() {
+      return this.element?.hide();
+    },
+    openChanged(_oldValue, newValue) {
+      return this.element?.openChanged(_oldValue, newValue);
+    },
+    placementChanged() {
+      return this.element?.placementChanged();
+    },
+    show() {
+      return this.element?.show();
+    },
+    toggle() {
+      return this.element?.toggle();
+    },
+    /**
+     * Updates the position of the popover
+     */
+    updatePosition() {
+      return this.element?.updatePosition();
+    }
+  },
   setup(props, ctx) {
-    const componentName = registerComponent("progress", vivid.registerProgress);
+    const componentName = registerComponent("popover", vivid.registerPopover);
     const element = vue.ref(null);
     return { componentName, element };
   },
@@ -8576,13 +8876,14 @@ const VProgress = vue.defineComponent({
         {
           ref: "element",
           attrs: {
-            ...this.connotation !== void 0 ? { connotation: this.connotation } : {},
-            ...this.max !== void 0 ? { max: this.max } : {},
-            ...this.min !== void 0 ? { min: this.min } : {},
-            ...this.paused !== void 0 ? { paused: this.paused } : {},
-            ...this.reverse !== void 0 ? { reverse: this.reverse } : {},
-            ...this.shape !== void 0 ? { shape: this.shape } : {},
-            ...this.value !== void 0 ? { value: this.value } : {}
+            ...this.alternate !== void 0 ? { alternate: this.alternate } : {},
+            ...this.arrow !== void 0 ? { arrow: this.arrow } : {},
+            ...this.dismissButtonAriaLabel !== void 0 ? { "dismiss-button-aria-label": this.dismissButtonAriaLabel } : {},
+            ...this.layout !== void 0 ? { layout: this.layout } : {},
+            ...this.manual !== void 0 ? { manual: this.manual } : {},
+            ...this.offset !== void 0 ? { offset: this.offset } : {},
+            ...this.open !== void 0 ? { open: this.open } : {},
+            ...this.placement !== void 0 ? { placement: this.placement } : {}
           },
           class: "vvd-component",
           on: {
@@ -8592,6 +8893,9 @@ const VProgress = vue.defineComponent({
             click: (event) => {
               this.$emit("click", event);
             },
+            close: (event) => {
+              this.$emit("close", event);
+            },
             focus: (event) => {
               this.$emit("focus", event);
             },
@@ -8603,10 +8907,19 @@ const VProgress = vue.defineComponent({
             },
             keyup: (event) => {
               this.$emit("keyup", event);
+            },
+            open: (event) => {
+              this.$emit("open", event);
             }
           }
         },
-        [this.$slots.default]
+        [
+          this.$slots.default,
+          // @slot anchor Slot for the trigger element.
+          handleNamedSlotV2("anchor", this.$slots["anchor"]),
+          // @slot footer Use the footer slot in order to add action buttons or other contents to the bottom of the dialog.
+          handleNamedSlotV2("footer", this.$slots["footer"])
+        ]
       );
     }
     return vue.h(
@@ -8615,15 +8928,183 @@ const VProgress = vue.defineComponent({
         ref: "element",
         class: "vvd-component",
         ...handleVue3Props({
-          ...this.connotation !== void 0 ? { "^connotation": this.connotation } : {},
-          ...this.max !== void 0 ? { "^max": this.max } : {},
-          ...this.min !== void 0 ? { "^min": this.min } : {},
-          ...this.paused !== void 0 && this.paused !== false ? { "^paused": this.paused } : {},
-          ...this.reverse !== void 0 && this.reverse !== false ? { "^reverse": this.reverse } : {},
-          ...this.shape !== void 0 ? { "^shape": this.shape } : {},
-          ...this.value !== void 0 ? { "^value": this.value } : {}
-        }),
-        onBlur: (event) => {
+          ...this.alternate !== void 0 && this.alternate !== false ? { "^alternate": this.alternate } : {},
+          ...this.arrow !== void 0 && this.arrow !== false ? { "^arrow": this.arrow } : {},
+          ...this.dismissButtonAriaLabel !== void 0 ? { "^dismiss-button-aria-label": this.dismissButtonAriaLabel } : {},
+          ...this.layout !== void 0 ? { "^layout": this.layout } : {},
+          ...this.manual !== void 0 && this.manual !== false ? { "^manual": this.manual } : {},
+          ...this.offset !== void 0 ? { "^offset": this.offset } : {},
+          ...this.open !== void 0 && this.open !== false ? { "^open": this.open } : {},
+          ...this.placement !== void 0 ? { "^placement": this.placement } : {}
+        }),
+        onBlur: (event) => {
+          this.$emit("blur", event);
+        },
+        onClick: (event) => {
+          this.$emit("click", event);
+        },
+        onClose: (event) => {
+          this.$emit("close", event);
+        },
+        onFocus: (event) => {
+          this.$emit("focus", event);
+        },
+        onInput: (event) => {
+          this.$emit("input", event);
+        },
+        onKeydown: (event) => {
+          this.$emit("keydown", event);
+        },
+        onKeyup: (event) => {
+          this.$emit("keyup", event);
+        },
+        onOpen: (event) => {
+          this.$emit("open", event);
+        }
+      },
+      [
+        // @ts-ignore
+        this.$slots.default?.(),
+        // @slot anchor Slot for the trigger element.
+        handleNamedSlotV3("anchor", this.$slots["anchor"]?.()),
+        // @slot footer Use the footer slot in order to add action buttons or other contents to the bottom of the dialog.
+        handleNamedSlotV3("footer", this.$slots["footer"]?.())
+      ]
+    );
+  }
+});
+
+const VProgress = vue.defineComponent({
+  name: "VProgress",
+  props: {
+    /**
+     * Indicates the progress' connotation.
+     */
+    connotation: {
+      type: String,
+      default: void 0
+    },
+    /**
+     * The maximum value
+     */
+    max: { type: Number, default: void 0 },
+    /**
+     * The minimum value
+     */
+    min: { type: Number, default: void 0 },
+    /**
+     * Indicates the progress is paused
+     */
+    paused: { type: Boolean, default: void 0 },
+    /**
+     * Indicates the progress' reverse status.
+     */
+    reverse: { type: Boolean, default: void 0 },
+    /**
+     * Indicates the progress' shape.
+     */
+    shape: {
+      type: String,
+      default: void 0
+    },
+    /**
+     * The value of the progress
+     */
+    value: { type: Number, default: void 0 }
+  },
+  emits: [
+    /**
+     * Fires when the element loses focus.
+     * @type {FocusEvent}
+     */
+    "blur",
+    /**
+     * Fires when a pointing device button (such as a mouse's primary mouse button) is both pressed and released while the pointer is located inside the element.
+     * @type {MouseEvent}
+     */
+    "click",
+    /**
+     * Fires when the element receives focus.
+     * @type {FocusEvent}
+     */
+    "focus",
+    /**
+     * Fires when the value of an element has been changed.
+     * @type {Event}
+     */
+    "input",
+    /**
+     * Fires when a key is pressed.
+     * @type {KeyboardEvent}
+     */
+    "keydown",
+    /**
+     * Fires when a key is released.
+     * @type {KeyboardEvent}
+     */
+    "keyup"
+  ],
+  methods: {},
+  setup(props, ctx) {
+    const componentName = registerComponent("progress", vivid.registerProgress);
+    const element = vue.ref(null);
+    return { componentName, element };
+  },
+  render() {
+    if (isVue2) {
+      return vue.h(
+        this.componentName,
+        {
+          ref: "element",
+          attrs: {
+            ...this.connotation !== void 0 ? { connotation: this.connotation } : {},
+            ...this.max !== void 0 ? { max: this.max } : {},
+            ...this.min !== void 0 ? { min: this.min } : {},
+            ...this.paused !== void 0 ? { paused: this.paused } : {},
+            ...this.reverse !== void 0 ? { reverse: this.reverse } : {},
+            ...this.shape !== void 0 ? { shape: this.shape } : {},
+            ...this.value !== void 0 ? { value: this.value } : {}
+          },
+          class: "vvd-component",
+          on: {
+            blur: (event) => {
+              this.$emit("blur", event);
+            },
+            click: (event) => {
+              this.$emit("click", event);
+            },
+            focus: (event) => {
+              this.$emit("focus", event);
+            },
+            input: (event) => {
+              this.$emit("input", event);
+            },
+            keydown: (event) => {
+              this.$emit("keydown", event);
+            },
+            keyup: (event) => {
+              this.$emit("keyup", event);
+            }
+          }
+        },
+        [this.$slots.default]
+      );
+    }
+    return vue.h(
+      this.componentName,
+      {
+        ref: "element",
+        class: "vvd-component",
+        ...handleVue3Props({
+          ...this.connotation !== void 0 ? { "^connotation": this.connotation } : {},
+          ...this.max !== void 0 ? { "^max": this.max } : {},
+          ...this.min !== void 0 ? { "^min": this.min } : {},
+          ...this.paused !== void 0 && this.paused !== false ? { "^paused": this.paused } : {},
+          ...this.reverse !== void 0 && this.reverse !== false ? { "^reverse": this.reverse } : {},
+          ...this.shape !== void 0 ? { "^shape": this.shape } : {},
+          ...this.value !== void 0 ? { "^value": this.value } : {}
+        }),
+        onBlur: (event) => {
           this.$emit("blur", event);
         },
         onClick: (event) => {
@@ -8644,7 +9125,7 @@ const VProgress = vue.defineComponent({
       },
       [
         // @ts-ignore
-        this.$slots.default && this.$slots.default()
+        this.$slots.default?.()
       ]
     );
   }
@@ -8792,7 +9273,7 @@ const VProgressRing = vue.defineComponent({
       },
       [
         // @ts-ignore
-        this.$slots.default && this.$slots.default()
+        this.$slots.default?.()
       ]
     );
   }
@@ -8997,7 +9478,7 @@ const VRadio = vue.defineComponent({
       },
       [
         // @ts-ignore
-        this.$slots.default && this.$slots.default()
+        this.$slots.default?.()
       ]
     );
   }
@@ -9196,9 +9677,12 @@ const VRadioGroup = vue.defineComponent({
       },
       [
         // @ts-ignore
-        this.$slots.default && this.$slots.default(),
+        this.$slots.default?.(),
         // @slot helper-text Describes how to use the text-field. Alternative to the `helper-text` attribute.
-        handleNamedSlotV3("helper-text", this.$slots["helper-text"])
+        handleNamedSlotV3(
+          "helper-text",
+          this.$slots["helper-text"]?.()
+        )
       ]
     );
   }
@@ -9536,12 +10020,17 @@ const VRangeSlider = vue.defineComponent({
       },
       [
         // @ts-ignore
-        this.$slots.default && this.$slots.default()
+        this.$slots.default?.()
       ]
     );
   }
 });
 
+const removeSymbol = Symbol.for("slottable-request-remove");
+function isRemoveRequest(data) {
+  return data === removeSymbol;
+}
+
 const VRichTextEditor = vue.defineComponent({
   name: "VRichTextEditor",
   props: {
@@ -9589,7 +10078,10 @@ const VRichTextEditor = vue.defineComponent({
       vivid.registerRichTextEditor
     );
     const element = vue.ref(null);
-    return { componentName, element };
+    const slottableRequests = vue.ref(
+      /* @__PURE__ */ new Map()
+    );
+    return { componentName, element, slottableRequests };
   },
   render() {
     if (isVue2) {
@@ -9620,6 +10112,17 @@ const VRichTextEditor = vue.defineComponent({
             },
             keyup: (event) => {
               this.$emit("keyup", event);
+            },
+            "slottable-request": (event) => {
+              if (isRemoveRequest(event.data)) {
+                this.slottableRequests.delete(event.slotName);
+              } else {
+                this.slottableRequests.set(event.slotName, {
+                  name: event.name,
+                  data: event.data
+                });
+              }
+              this.$forceUpdate();
             }
           }
         },
@@ -9635,6 +10138,9 @@ const VRichTextEditor = vue.defineComponent({
           handleNamedSlotV2(
             "text-color-picker",
             this.$slots["text-color-picker"]
+          ),
+          ...Array.from(this.slottableRequests.entries()).flatMap(
+            ([slotName, { name, data }]) => handleNamedSlotV2(slotName, this.$scopedSlots[name]?.(data)) ?? []
           )
         ]
       );
@@ -9664,97 +10170,270 @@ const VRichTextEditor = vue.defineComponent({
         },
         onKeyup: (event) => {
           this.$emit("keyup", event);
+        },
+        "onSlottable-request": (event) => {
+          if (isRemoveRequest(event.data)) {
+            this.slottableRequests.delete(event.slotName);
+          } else {
+            this.slottableRequests.set(event.slotName, {
+              name: event.name,
+              data: event.data
+            });
+          }
         }
       },
       [
         // @ts-ignore
-        this.$slots.default && this.$slots.default(),
+        this.$slots.default?.(),
         // @slot editor-end Displayed at the end of the scrollable editor area.
-        handleNamedSlotV3("editor-end", this.$slots["editor-end"]),
+        handleNamedSlotV3("editor-end", this.$slots["editor-end"]?.()),
         // @slot editor-start Displayed at the start of the scrollable editor area.
-        handleNamedSlotV3("editor-start", this.$slots["editor-start"]),
+        handleNamedSlotV3(
+          "editor-start",
+          this.$slots["editor-start"]?.()
+        ),
         // @slot status Displayed between the editor viewport and the toolbar.
-        handleNamedSlotV3("status", this.$slots["status"]),
+        handleNamedSlotV3("status", this.$slots["status"]?.()),
         // @slot text-color-picker Color picker for the RteTextColorFeature.
         handleNamedSlotV3(
           "text-color-picker",
-          this.$slots["text-color-picker"]
+          this.$slots["text-color-picker"]?.()
+        ),
+        ...Array.from(this.slottableRequests.entries()).flatMap(
+          ([slotName, { name, data }]) => (
+            // @ts-ignore
+            handleNamedSlotV3(slotName, this.$slots[name]?.(data)) ?? []
+          )
         )
       ]
     );
   }
 });
 
-const VSearchableSelect = vue.defineComponent({
-  name: "VSearchableSelect",
-  model: isVue2 ? {
-    prop: "modelValue",
-    event: "update:modelValue"
-  } : void 0,
+const VRichTextView = vue.defineComponent({
+  name: "VRichTextView",
   props: {
-    appearance: {
-      type: String,
-      default: void 0
-    },
     /**
-     * Adds a clear button to the input field that clears the selected values.
-     */
-    clearable: { type: Boolean, default: void 0 },
-    /**
-     * Overrides the default "Deselect All" text
-     */
-    deselectAllText: { type: String, default: void 0 },
-    /**
-     * Sets the element's disabled state. A disabled element will not be included during form submission.
-     */
-    disabled: { type: Boolean, default: void 0 },
-    /**
-     * Adds a "Select All" option at the top of the options list.
-     */
-    enableSelectAll: { type: Boolean, default: void 0 },
-    /**
-     * Provides a custom error message. Any current error state will be overridden.
-     */
-    errorText: { type: String, default: void 0 },
-    externalTags: { type: Boolean, default: void 0 },
-    fixedDropdown: { type: Boolean, default: void 0 },
-    /**
-     * Provides additional information to help the user enter the correct information.
-     * To add HTML to the helper text, use the helper-text slot instead.
+     * The view to display, created from the RteConfig.
      */
-    helperText: { type: String, default: void 0 },
+    view: { type: null, default: void 0 }
+  },
+  emits: [
     /**
-     * A decorative icon the custom element should have.
-     * See the Vivid Icon Gallery for available icons: https://icons.vivid.vonage.com/
+     * Fires when the element loses focus.
+     * @type {FocusEvent}
      */
-    icon: { type: String, default: void 0 },
+    "blur",
     /**
-     * Indicates the icon affix alignment.
+     * Fires when a pointing device button (such as a mouse's primary mouse button) is both pressed and released while the pointer is located inside the element.
+     * @type {MouseEvent}
      */
-    iconTrailing: { type: Boolean, default: void 0 },
+    "click",
     /**
-     * The default value of the element. This value sets the `value` property
-     * only when the `value` property has not been explicitly set.
+     * Fires when the element receives focus.
+     * @type {FocusEvent}
      */
-    initialValue: { type: String, default: void 0 },
+    "focus",
     /**
-     * The label for the form element.
+     * Fires when the value of an element has been changed.
+     * @type {Event}
      */
-    label: { type: String, default: void 0 },
+    "input",
     /**
-     * Whether the component is in a loading state.
+     * Fires when a key is pressed.
+     * @type {KeyboardEvent}
      */
-    loading: { type: Boolean, default: void 0 },
-    maxLines: { type: Number, default: void 0 },
-    maxSelected: { type: Number, default: void 0 },
-    multiple: { type: Boolean, default: void 0 },
+    "keydown",
     /**
-     * The name of the element. This element's value will be surfaced during form submission under the provided name.
+     * Fires when a key is released.
+     * @type {KeyboardEvent}
      */
-    name: { type: String, default: void 0 },
-    open: { type: Boolean, default: void 0 },
-    /**
-     * Function to filter the options to display.
+    "keyup"
+  ],
+  methods: {},
+  setup(props, ctx) {
+    const componentName = registerComponent(
+      "rich-text-view",
+      vivid.registerRichTextView
+    );
+    const element = vue.ref(null);
+    const slottableRequests = vue.ref(
+      /* @__PURE__ */ new Map()
+    );
+    return { componentName, element, slottableRequests };
+  },
+  render() {
+    if (isVue2) {
+      return vue.h(
+        this.componentName,
+        {
+          ref: "element",
+          attrs: {},
+          class: "vvd-component",
+          domProps: { ...this.view !== void 0 ? { view: this.view } : {} },
+          on: {
+            blur: (event) => {
+              this.$emit("blur", event);
+            },
+            click: (event) => {
+              this.$emit("click", event);
+            },
+            focus: (event) => {
+              this.$emit("focus", event);
+            },
+            input: (event) => {
+              this.$emit("input", event);
+            },
+            keydown: (event) => {
+              this.$emit("keydown", event);
+            },
+            keyup: (event) => {
+              this.$emit("keyup", event);
+            },
+            "slottable-request": (event) => {
+              if (isRemoveRequest(event.data)) {
+                this.slottableRequests.delete(event.slotName);
+              } else {
+                this.slottableRequests.set(event.slotName, {
+                  name: event.name,
+                  data: event.data
+                });
+              }
+              this.$forceUpdate();
+            }
+          }
+        },
+        [
+          this.$slots.default,
+          ,
+          ...Array.from(this.slottableRequests.entries()).flatMap(
+            ([slotName, { name, data }]) => handleNamedSlotV2(slotName, this.$scopedSlots[name]?.(data)) ?? []
+          )
+        ]
+      );
+    }
+    return vue.h(
+      this.componentName,
+      {
+        ref: "element",
+        class: "vvd-component",
+        ...handleVue3Props({
+          ...this.view !== void 0 ? { ".view": this.view } : {}
+        }),
+        onBlur: (event) => {
+          this.$emit("blur", event);
+        },
+        onClick: (event) => {
+          this.$emit("click", event);
+        },
+        onFocus: (event) => {
+          this.$emit("focus", event);
+        },
+        onInput: (event) => {
+          this.$emit("input", event);
+        },
+        onKeydown: (event) => {
+          this.$emit("keydown", event);
+        },
+        onKeyup: (event) => {
+          this.$emit("keyup", event);
+        },
+        "onSlottable-request": (event) => {
+          if (isRemoveRequest(event.data)) {
+            this.slottableRequests.delete(event.slotName);
+          } else {
+            this.slottableRequests.set(event.slotName, {
+              name: event.name,
+              data: event.data
+            });
+          }
+        }
+      },
+      [
+        // @ts-ignore
+        this.$slots.default?.(),
+        ,
+        ...Array.from(this.slottableRequests.entries()).flatMap(
+          ([slotName, { name, data }]) => (
+            // @ts-ignore
+            handleNamedSlotV3(slotName, this.$slots[name]?.(data)) ?? []
+          )
+        )
+      ]
+    );
+  }
+});
+
+const VSearchableSelect = vue.defineComponent({
+  name: "VSearchableSelect",
+  model: isVue2 ? {
+    prop: "modelValue",
+    event: "update:modelValue"
+  } : void 0,
+  props: {
+    appearance: {
+      type: String,
+      default: void 0
+    },
+    /**
+     * Adds a clear button to the input field that clears the selected values.
+     */
+    clearable: { type: Boolean, default: void 0 },
+    /**
+     * Overrides the default "Deselect All" text
+     */
+    deselectAllText: { type: String, default: void 0 },
+    /**
+     * Sets the element's disabled state. A disabled element will not be included during form submission.
+     */
+    disabled: { type: Boolean, default: void 0 },
+    /**
+     * Adds a "Select All" option at the top of the options list.
+     */
+    enableSelectAll: { type: Boolean, default: void 0 },
+    /**
+     * Provides a custom error message. Any current error state will be overridden.
+     */
+    errorText: { type: String, default: void 0 },
+    externalTags: { type: Boolean, default: void 0 },
+    fixedDropdown: { type: Boolean, default: void 0 },
+    /**
+     * Provides additional information to help the user enter the correct information.
+     * To add HTML to the helper text, use the helper-text slot instead.
+     */
+    helperText: { type: String, default: void 0 },
+    /**
+     * 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 },
+    /**
+     * Indicates the icon affix alignment.
+     */
+    iconTrailing: { type: Boolean, default: void 0 },
+    /**
+     * The default value of the element. This value sets the `value` property
+     * only when the `value` property has not been explicitly set.
+     */
+    initialValue: { type: String, default: void 0 },
+    /**
+     * The label for the form element.
+     */
+    label: { type: String, default: void 0 },
+    /**
+     * Whether the component is in a loading state.
+     */
+    loading: { type: Boolean, default: void 0 },
+    maxLines: { type: Number, default: void 0 },
+    maxSelected: { type: Number, default: void 0 },
+    multiple: { type: Boolean, default: void 0 },
+    /**
+     * The name of the element. This element's value will be surfaced during form submission under the provided name.
+     */
+    name: { type: String, default: void 0 },
+    open: { type: Boolean, default: void 0 },
+    /**
+     * Function to filter the options to display.
      */
     optionFilter: {
       type: null,
@@ -9931,6 +10610,8 @@ const VSearchableSelect = vue.defineComponent({
         },
         [
           this.$slots.default,
+          // @slot contextual-help Slot for the contextual-help component, displayed next to the label.
+          handleNamedSlotV2("contextual-help", this.$slots["contextual-help"]),
           // @slot helper-text Describes how to use the component. Alternative to the `helper-text` attribute.
           handleNamedSlotV2("helper-text", this.$slots["helper-text"]),
           // @slot icon The preferred way to add an icon to the control.
@@ -10009,22 +10690,30 @@ const VSearchableSelect = vue.defineComponent({
       },
       [
         // @ts-ignore
-        this.$slots.default && this.$slots.default(),
+        this.$slots.default?.(),
+        // @slot contextual-help Slot for the contextual-help component, displayed next to the label.
+        handleNamedSlotV3(
+          "contextual-help",
+          this.$slots["contextual-help"]?.()
+        ),
         // @slot helper-text Describes how to use the component. Alternative to the `helper-text` attribute.
-        handleNamedSlotV3("helper-text", this.$slots["helper-text"]),
+        handleNamedSlotV3(
+          "helper-text",
+          this.$slots["helper-text"]?.()
+        ),
         // @slot icon The preferred way to add an icon to the control.
-        handleNamedSlotV3("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.
         handleNamedSlotV3(
           "loading-options",
-          this.$slots["loading-options"]
+          this.$slots["loading-options"]?.()
         ),
         // @slot meta Slot to add meta content to the control.
-        handleNamedSlotV3("meta", this.$slots["meta"]),
+        handleNamedSlotV3("meta", this.$slots["meta"]?.()),
         // @slot no-matches Message that appears when no options match the search query.
-        handleNamedSlotV3("no-matches", this.$slots["no-matches"]),
+        handleNamedSlotV3("no-matches", this.$slots["no-matches"]?.()),
         // @slot no-options Message that appears when no options are available.
-        handleNamedSlotV3("no-options", this.$slots["no-options"])
+        handleNamedSlotV3("no-options", this.$slots["no-options"]?.())
       ]
     );
   }
@@ -10257,6 +10946,8 @@ const VSelect = vue.defineComponent({
         },
         [
           this.$slots.default,
+          // @slot contextual-help Slot for the contextual-help component, displayed next to the label.
+          handleNamedSlotV2("contextual-help", this.$slots["contextual-help"]),
           // @slot helper-text Describes how to use the select. Alternative to the `helper-text` attribute.
           handleNamedSlotV2("helper-text", this.$slots["helper-text"]),
           // @slot icon The preferred way to add an icon to the select control.
@@ -10316,13 +11007,21 @@ const VSelect = vue.defineComponent({
       },
       [
         // @ts-ignore
-        this.$slots.default && this.$slots.default(),
+        this.$slots.default?.(),
+        // @slot contextual-help Slot for the contextual-help component, displayed next to the label.
+        handleNamedSlotV3(
+          "contextual-help",
+          this.$slots["contextual-help"]?.()
+        ),
         // @slot helper-text Describes how to use the select. Alternative to the `helper-text` attribute.
-        handleNamedSlotV3("helper-text", this.$slots["helper-text"]),
+        handleNamedSlotV3(
+          "helper-text",
+          this.$slots["helper-text"]?.()
+        ),
         // @slot icon The preferred way to add an icon to the select control.
-        handleNamedSlotV3("icon", this.$slots["icon"]),
+        handleNamedSlotV3("icon", this.$slots["icon"]?.()),
         // @slot meta Slot to add meta content to the select control.
-        handleNamedSlotV3("meta", this.$slots["meta"])
+        handleNamedSlotV3("meta", this.$slots["meta"]?.())
       ]
     );
   }
@@ -10360,6 +11059,10 @@ const VSelectableBox = vue.defineComponent({
       type: String,
       default: void 0
     },
+    /**
+     * Disables the control (checkbox or radio) and indicates that the action is not available.
+     */
+    disabled: { type: Boolean, default: void 0 },
     /**
      * Removes the padding around the box's slot content
      */
@@ -10423,6 +11126,7 @@ const VSelectableBox = vue.defineComponent({
             ...this.connotation !== void 0 ? { connotation: this.connotation } : {},
             ...this.controlPlacement !== void 0 ? { "control-placement": this.controlPlacement } : {},
             ...this.controlType !== void 0 ? { "control-type": this.controlType } : {},
+            ...this.disabled !== void 0 ? { disabled: this.disabled } : {},
             ...this.tight !== void 0 ? { tight: this.tight } : {}
           },
           class: "vvd-component",
@@ -10464,6 +11168,7 @@ const VSelectableBox = vue.defineComponent({
           ...this.connotation !== void 0 ? { "^connotation": this.connotation } : {},
           ...this.controlPlacement !== void 0 ? { "^control-placement": this.controlPlacement } : {},
           ...this.controlType !== void 0 ? { "^control-type": this.controlType } : {},
+          ...this.disabled !== void 0 && this.disabled !== false ? { "^disabled": this.disabled } : {},
           ...this.tight !== void 0 && this.tight !== false ? { "^tight": this.tight } : {}
         }),
         onBlur: (event) => {
@@ -10490,7 +11195,7 @@ const VSelectableBox = vue.defineComponent({
       },
       [
         // @ts-ignore
-        this.$slots.default && this.$slots.default()
+        this.$slots.default?.()
       ]
     );
   }
@@ -10660,9 +11365,12 @@ const VSideDrawer = vue.defineComponent({
       },
       [
         // @ts-ignore
-        this.$slots.default && this.$slots.default(),
+        this.$slots.default?.(),
         // @slot app-content Sets assigned nodes to the main application content, the side drawer is opened next to.
-        handleNamedSlotV3("app-content", this.$slots["app-content"])
+        handleNamedSlotV3(
+          "app-content",
+          this.$slots["app-content"]?.()
+        )
       ]
     );
   }
@@ -10896,9 +11604,9 @@ const VSimpleColorPicker = vue.defineComponent({
       },
       [
         // @ts-ignore
-        this.$slots.default && this.$slots.default(),
+        this.$slots.default?.(),
         // @slot anchor Slot for attaching the toggle button
-        handleNamedSlotV3("anchor", this.$slots["anchor"])
+        handleNamedSlotV3("anchor", this.$slots["anchor"]?.())
       ]
     );
   }
@@ -11177,7 +11885,7 @@ const VSlider = vue.defineComponent({
       },
       [
         // @ts-ignore
-        this.$slots.default && this.$slots.default()
+        this.$slots.default?.()
       ]
     );
   }
@@ -11323,9 +12031,979 @@ const VSplitButton = vue.defineComponent({
           },
           class: "vvd-component",
           on: {
-            "action-click": (event) => {
-              this.$emit("action-click", event);
-            },
+            "action-click": (event) => {
+              this.$emit("action-click", event);
+            },
+            blur: (event) => {
+              this.$emit("blur", event);
+            },
+            click: (event) => {
+              this.$emit("click", event);
+            },
+            focus: (event) => {
+              this.$emit("focus", event);
+            },
+            "indicator-click": (event) => {
+              this.$emit("indicator-click", event);
+            },
+            input: (event) => {
+              this.$emit("input", event);
+            },
+            keydown: (event) => {
+              this.$emit("keydown", event);
+            },
+            keyup: (event) => {
+              this.$emit("keyup", event);
+            }
+          }
+        },
+        [
+          this.$slots.default,
+          // @slot icon The preferred way to add an icon to the component.
+          handleNamedSlotV2("icon", this.$slots["icon"])
+        ]
+      );
+    }
+    return vue.h(
+      this.componentName,
+      {
+        ref: "element",
+        class: "vvd-component",
+        ...handleVue3Props({
+          ...this.appearance !== void 0 ? { "^appearance": this.appearance } : {},
+          ...this.connotation !== void 0 ? { "^connotation": this.connotation } : {},
+          ...this.disabled !== void 0 && this.disabled !== false ? { "^disabled": this.disabled } : {},
+          ...this.icon !== void 0 ? { "^icon": this.icon } : {},
+          ...this.indicatorAriaLabel !== void 0 ? { "^indicator-aria-label": this.indicatorAriaLabel } : {},
+          ...this.label !== void 0 ? { "^label": this.label } : {},
+          ...this.shape !== void 0 ? { "^shape": this.shape } : {},
+          ...this.size !== void 0 ? { "^size": this.size } : {},
+          ...this.splitIndicator !== void 0 ? { "^split-indicator": this.splitIndicator } : {}
+        }),
+        onActionClick: (event) => {
+          this.$emit("action-click", event);
+        },
+        onBlur: (event) => {
+          this.$emit("blur", event);
+        },
+        onClick: (event) => {
+          this.$emit("click", event);
+        },
+        onFocus: (event) => {
+          this.$emit("focus", event);
+        },
+        onIndicatorClick: (event) => {
+          this.$emit("indicator-click", event);
+        },
+        onInput: (event) => {
+          this.$emit("input", event);
+        },
+        onKeydown: (event) => {
+          this.$emit("keydown", event);
+        },
+        onKeyup: (event) => {
+          this.$emit("keyup", event);
+        }
+      },
+      [
+        // @ts-ignore
+        this.$slots.default?.(),
+        // @slot icon The preferred way to add an icon to the component.
+        handleNamedSlotV3("icon", this.$slots["icon"]?.())
+      ]
+    );
+  }
+});
+
+const VStatus = vue.defineComponent({
+  name: "VStatus",
+  props: {
+    /**
+     * The connotation the status should have. Determines icon and color.
+     */
+    connotation: {
+      type: String,
+      default: void 0
+    },
+    /**
+     * 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 },
+    /**
+     * The status title (e.g. "Positive", "Info", "Warning", "Alert").
+     */
+    status: { type: String, default: void 0 }
+  },
+  emits: [
+    /**
+     * Fires when the element loses focus.
+     * @type {FocusEvent}
+     */
+    "blur",
+    /**
+     * Fires when a pointing device button (such as a mouse's primary mouse button) is both pressed and released while the pointer is located inside the element.
+     * @type {MouseEvent}
+     */
+    "click",
+    /**
+     * Fires when the element receives focus.
+     * @type {FocusEvent}
+     */
+    "focus",
+    /**
+     * Fires when the value of an element has been changed.
+     * @type {Event}
+     */
+    "input",
+    /**
+     * Fires when a key is pressed.
+     * @type {KeyboardEvent}
+     */
+    "keydown",
+    /**
+     * Fires when a key is released.
+     * @type {KeyboardEvent}
+     */
+    "keyup"
+  ],
+  methods: {},
+  setup(props, ctx) {
+    const componentName = registerComponent("status", vivid.registerStatus);
+    const element = vue.ref(null);
+    return { componentName, element };
+  },
+  render() {
+    if (isVue2) {
+      return vue.h(
+        this.componentName,
+        {
+          ref: "element",
+          attrs: {
+            ...this.connotation !== void 0 ? { connotation: this.connotation } : {},
+            ...this.icon !== void 0 ? { icon: this.icon } : {},
+            ...this.status !== void 0 ? { status: this.status } : {}
+          },
+          class: "vvd-component",
+          on: {
+            blur: (event) => {
+              this.$emit("blur", event);
+            },
+            click: (event) => {
+              this.$emit("click", event);
+            },
+            focus: (event) => {
+              this.$emit("focus", event);
+            },
+            input: (event) => {
+              this.$emit("input", event);
+            },
+            keydown: (event) => {
+              this.$emit("keydown", event);
+            },
+            keyup: (event) => {
+              this.$emit("keyup", event);
+            }
+          }
+        },
+        [
+          this.$slots.default,
+          // @slot icon Optional custom icon. When not set, icon is derived from connotation.
+          handleNamedSlotV2("icon", this.$slots["icon"])
+        ]
+      );
+    }
+    return vue.h(
+      this.componentName,
+      {
+        ref: "element",
+        class: "vvd-component",
+        ...handleVue3Props({
+          ...this.connotation !== void 0 ? { "^connotation": this.connotation } : {},
+          ...this.icon !== void 0 ? { "^icon": this.icon } : {},
+          ...this.status !== void 0 ? { "^status": this.status } : {}
+        }),
+        onBlur: (event) => {
+          this.$emit("blur", event);
+        },
+        onClick: (event) => {
+          this.$emit("click", event);
+        },
+        onFocus: (event) => {
+          this.$emit("focus", event);
+        },
+        onInput: (event) => {
+          this.$emit("input", event);
+        },
+        onKeydown: (event) => {
+          this.$emit("keydown", event);
+        },
+        onKeyup: (event) => {
+          this.$emit("keyup", event);
+        }
+      },
+      [
+        // @ts-ignore
+        this.$slots.default?.(),
+        // @slot icon Optional custom icon. When not set, icon is derived from connotation.
+        handleNamedSlotV3("icon", this.$slots["icon"]?.())
+      ]
+    );
+  }
+});
+
+const VSwitch = vue.defineComponent({
+  name: "VSwitch",
+  model: isVue2 ? {
+    prop: "modelValue",
+    event: "update:modelValue"
+  } : void 0,
+  props: {
+    /**
+     * The current checkedness of the element.
+     */
+    checked: { type: Boolean, default: void 0 },
+    /**
+     * The current checkedness of the element.
+     */
+    modelValue: { type: Boolean, default: void 0 },
+    /**
+     * Indicates the switch's connotation.
+     */
+    connotation: {
+      type: String,
+      default: void 0
+    },
+    /**
+     * The default checkedness of the element. This value sets the `checked` property
+     * only when the `checked` property has not been explicitly set.
+     */
+    defaultChecked: { type: Boolean, default: void 0 },
+    /**
+     * Sets the element's disabled state. A disabled element will not be included during form submission.
+     */
+    disabled: { type: Boolean, default: void 0 },
+    /**
+     * The default value of the element. This value sets the `value` property
+     * only when the `value` property has not been explicitly set.
+     */
+    initialValue: { type: String, default: void 0 },
+    /**
+     * Indicates the switch's label.
+     */
+    label: { type: String, default: void 0 },
+    /**
+     * The name of the element. This element's value will be surfaced during form submission under the provided name.
+     */
+    name: { type: String, default: void 0 },
+    /**
+     * When true, the control will be immutable by user interaction. See https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly | readonly HTML attribute for more information.
+     */
+    readonly: { type: Boolean, default: void 0 },
+    /**
+     * Require the field to be completed prior to form submission.
+     */
+    required: { type: Boolean, default: void 0 },
+    /**
+     * The current value of the element.
+     */
+    value: { type: String, default: void 0 }
+  },
+  emits: [
+    /**
+     * Fires when the element loses focus.
+     * @type {FocusEvent}
+     */
+    "blur",
+    /**
+     * Emits a custom change event when the checked state changes
+     * @type {CustomEvent<undefined>}
+     */
+    "change",
+    /**
+     * Fires when a pointing device button (such as a mouse's primary mouse button) is both pressed and released while the pointer is located inside the element.
+     * @type {MouseEvent}
+     */
+    "click",
+    /**
+     * Fires when the element receives focus.
+     * @type {FocusEvent}
+     */
+    "focus",
+    /**
+     * Fires when the value of an element has been changed.
+     * @type {Event}
+     */
+    "input",
+    /**
+     * Fires when a key is pressed.
+     * @type {KeyboardEvent}
+     */
+    "keydown",
+    /**
+     * Fires when a key is released.
+     * @type {KeyboardEvent}
+     */
+    "keyup",
+    /**
+     * Fires when the modelValue value changes
+     * @type {boolean}
+     */
+    "update:modelValue"
+  ],
+  methods: {
+    /**
+     * Return the current validity of the element.
+     */
+    checkValidity() {
+      return this.element?.checkValidity();
+    },
+    /**
+     * Return the current validity of the element.
+     * If false, fires an invalid event at the element.
+     */
+    reportValidity() {
+      return this.element?.reportValidity();
+    }
+  },
+  setup(props, ctx) {
+    const componentName = registerComponent("switch", vivid.registerSwitch);
+    const element = vue.ref(null);
+    return { componentName, element };
+  },
+  render() {
+    if (isVue2) {
+      return vue.h(
+        this.componentName,
+        {
+          ref: "element",
+          attrs: {
+            ...(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 } : {},
+            ...this.disabled !== void 0 ? { disabled: this.disabled } : {},
+            ...this.initialValue !== void 0 ? { value: this.initialValue } : {},
+            ...this.label !== void 0 ? { label: this.label } : {},
+            ...this.name !== void 0 ? { name: this.name } : {},
+            ...this.readonly !== void 0 ? { readonly: this.readonly } : {},
+            ...this.required !== void 0 ? { required: this.required } : {},
+            ...this.value !== void 0 ? { "current-value": this.value } : {}
+          },
+          class: "vvd-component",
+          on: {
+            blur: (event) => {
+              this.$emit("blur", event);
+            },
+            change: (event) => {
+              this.$emit("update:modelValue", event.currentTarget.checked);
+              this.$emit("change", event);
+            },
+            click: (event) => {
+              this.$emit("click", event);
+            },
+            focus: (event) => {
+              this.$emit("focus", event);
+            },
+            input: (event) => {
+              this.$emit("input", event);
+            },
+            keydown: (event) => {
+              this.$emit("keydown", event);
+            },
+            keyup: (event) => {
+              this.$emit("keyup", event);
+            }
+          }
+        },
+        [this.$slots.default]
+      );
+    }
+    return vue.h(
+      this.componentName,
+      {
+        ref: "element",
+        class: "vvd-component",
+        ...handleVue3Props({
+          ...(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.initialValue !== void 0 ? { "^value": this.initialValue } : {},
+          ...this.label !== void 0 ? { "^label": this.label } : {},
+          ...this.name !== void 0 ? { "^name": this.name } : {},
+          ...this.readonly !== void 0 && this.readonly !== false ? { "^readonly": this.readonly } : {},
+          ...this.required !== void 0 && this.required !== false ? { "^required": this.required } : {},
+          ...this.value !== void 0 ? { "^current-value": this.value } : {}
+        }),
+        onBlur: (event) => {
+          this.$emit("blur", event);
+        },
+        onChange: (event) => {
+          this.$emit("update:modelValue", event.currentTarget.checked);
+          this.$emit("change", event);
+        },
+        onClick: (event) => {
+          this.$emit("click", event);
+        },
+        onFocus: (event) => {
+          this.$emit("focus", event);
+        },
+        onInput: (event) => {
+          this.$emit("input", event);
+        },
+        onKeydown: (event) => {
+          this.$emit("keydown", event);
+        },
+        onKeyup: (event) => {
+          this.$emit("keyup", event);
+        }
+      },
+      [
+        // @ts-ignore
+        this.$slots.default?.()
+      ]
+    );
+  }
+});
+
+const VTab = vue.defineComponent({
+  name: "VTab",
+  props: {
+    /**
+     * The connotation the tab should have.
+     */
+    connotation: {
+      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.
+     */
+    disabled: { type: Boolean, default: void 0 },
+    /**
+     * A decorative icon the custom element should have.
+     * See the Vivid Icon Gallery for available icons: https://icons.vivid.vonage.com/
+     */
+    icon: { type: String, default: void 0 },
+    /**
+     * Indicates the icon affix alignment.
+     */
+    iconTrailing: { type: Boolean, default: void 0 },
+    /**
+     * Indicates the tab's label.
+     */
+    label: { type: String, default: void 0 },
+    /**
+     * Adds a close button
+     */
+    removable: { type: Boolean, default: void 0 },
+    /**
+     * The shape the tab should have.
+     */
+    shape: {
+      type: String,
+      default: void 0
+    },
+    tabIndex: { type: Number, default: void 0 }
+  },
+  emits: [
+    /**
+     * Fires when the element loses focus.
+     * @type {FocusEvent}
+     */
+    "blur",
+    /**
+     * Fires when a pointing device button (such as a mouse's primary mouse button) is both pressed and released while the pointer is located inside the element.
+     * @type {MouseEvent}
+     */
+    "click",
+    /**
+     * Fires when the element receives focus.
+     * @type {FocusEvent}
+     */
+    "focus",
+    /**
+     * Fires when the value of an element has been changed.
+     * @type {Event}
+     */
+    "input",
+    /**
+     * Fires when a key is pressed.
+     * @type {KeyboardEvent}
+     */
+    "keydown",
+    /**
+     * Fires when a key is released.
+     * @type {KeyboardEvent}
+     */
+    "keyup"
+  ],
+  methods: {
+    _handleCloseClick(e) {
+      return this.element?._handleCloseClick(e);
+    },
+    _onKeyDown(e) {
+      return this.element?._onKeyDown(e);
+    }
+  },
+  setup(props, ctx) {
+    const componentName = registerComponent("tab", vivid.registerTab);
+    const element = vue.ref(null);
+    return { componentName, element };
+  },
+  render() {
+    if (isVue2) {
+      return vue.h(
+        this.componentName,
+        {
+          ref: "element",
+          attrs: {
+            ...this.connotation !== void 0 ? { connotation: this.connotation } : {},
+            ...this.disabled !== void 0 ? { disabled: this.disabled } : {},
+            ...this.icon !== void 0 ? { icon: this.icon } : {},
+            ...this.iconTrailing !== void 0 ? { "icon-trailing": this.iconTrailing } : {},
+            ...this.label !== void 0 ? { label: this.label } : {},
+            ...this.removable !== void 0 ? { removable: this.removable } : {},
+            ...this.shape !== void 0 ? { shape: this.shape } : {},
+            ...this.tabIndex !== void 0 ? { tabIndex: this.tabIndex } : {}
+          },
+          class: "vvd-component",
+          on: {
+            blur: (event) => {
+              this.$emit("blur", event);
+            },
+            click: (event) => {
+              this.$emit("click", event);
+            },
+            focus: (event) => {
+              this.$emit("focus", event);
+            },
+            input: (event) => {
+              this.$emit("input", event);
+            },
+            keydown: (event) => {
+              this.$emit("keydown", event);
+            },
+            keyup: (event) => {
+              this.$emit("keyup", event);
+            }
+          }
+        },
+        [
+          this.$slots.default,
+          // @slot icon The preferred way to add an icon to the component.
+          handleNamedSlotV2("icon", this.$slots["icon"])
+        ]
+      );
+    }
+    return vue.h(
+      this.componentName,
+      {
+        ref: "element",
+        class: "vvd-component",
+        ...handleVue3Props({
+          ...this.connotation !== void 0 ? { "^connotation": this.connotation } : {},
+          ...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 } : {},
+          ...this.label !== void 0 ? { "^label": this.label } : {},
+          ...this.removable !== void 0 && this.removable !== false ? { "^removable": this.removable } : {},
+          ...this.shape !== void 0 ? { "^shape": this.shape } : {},
+          ...this.tabIndex !== void 0 ? { "^tabIndex": this.tabIndex } : {}
+        }),
+        onBlur: (event) => {
+          this.$emit("blur", event);
+        },
+        onClick: (event) => {
+          this.$emit("click", event);
+        },
+        onFocus: (event) => {
+          this.$emit("focus", event);
+        },
+        onInput: (event) => {
+          this.$emit("input", event);
+        },
+        onKeydown: (event) => {
+          this.$emit("keydown", event);
+        },
+        onKeyup: (event) => {
+          this.$emit("keyup", event);
+        }
+      },
+      [
+        // @ts-ignore
+        this.$slots.default?.(),
+        // @slot icon The preferred way to add an icon to the component.
+        handleNamedSlotV3("icon", this.$slots["icon"]?.())
+      ]
+    );
+  }
+});
+
+const VTabPanel = vue.defineComponent({
+  name: "VTabPanel",
+  emits: [
+    /**
+     * Fires when the element loses focus.
+     * @type {FocusEvent}
+     */
+    "blur",
+    /**
+     * Fires when a pointing device button (such as a mouse's primary mouse button) is both pressed and released while the pointer is located inside the element.
+     * @type {MouseEvent}
+     */
+    "click",
+    /**
+     * Fires when the element receives focus.
+     * @type {FocusEvent}
+     */
+    "focus",
+    /**
+     * Fires when the value of an element has been changed.
+     * @type {Event}
+     */
+    "input",
+    /**
+     * Fires when a key is pressed.
+     * @type {KeyboardEvent}
+     */
+    "keydown",
+    /**
+     * Fires when a key is released.
+     * @type {KeyboardEvent}
+     */
+    "keyup"
+  ],
+  methods: {},
+  setup(props, ctx) {
+    const componentName = registerComponent("tab-panel", vivid.registerTabPanel);
+    const element = vue.ref(null);
+    return { componentName, element };
+  },
+  render() {
+    if (isVue2) {
+      return vue.h(
+        this.componentName,
+        {
+          ref: "element",
+          attrs: {},
+          class: "vvd-component",
+          on: {
+            blur: (event) => {
+              this.$emit("blur", event);
+            },
+            click: (event) => {
+              this.$emit("click", event);
+            },
+            focus: (event) => {
+              this.$emit("focus", event);
+            },
+            input: (event) => {
+              this.$emit("input", event);
+            },
+            keydown: (event) => {
+              this.$emit("keydown", event);
+            },
+            keyup: (event) => {
+              this.$emit("keyup", event);
+            }
+          }
+        },
+        [this.$slots.default]
+      );
+    }
+    return vue.h(
+      this.componentName,
+      {
+        ref: "element",
+        class: "vvd-component",
+        ...handleVue3Props({}),
+        onBlur: (event) => {
+          this.$emit("blur", event);
+        },
+        onClick: (event) => {
+          this.$emit("click", event);
+        },
+        onFocus: (event) => {
+          this.$emit("focus", event);
+        },
+        onInput: (event) => {
+          this.$emit("input", event);
+        },
+        onKeydown: (event) => {
+          this.$emit("keydown", event);
+        },
+        onKeyup: (event) => {
+          this.$emit("keyup", event);
+        }
+      },
+      [
+        // @ts-ignore
+        this.$slots.default?.()
+      ]
+    );
+  }
+});
+
+const VTable = vue.defineComponent({
+  name: "VTable",
+  emits: [
+    /**
+     * Fires when the element loses focus.
+     * @type {FocusEvent}
+     */
+    "blur",
+    /**
+     * Fires when a pointing device button (such as a mouse's primary mouse button) is both pressed and released while the pointer is located inside the element.
+     * @type {MouseEvent}
+     */
+    "click",
+    /**
+     * Fires when the element receives focus.
+     * @type {FocusEvent}
+     */
+    "focus",
+    /**
+     * Fires when the value of an element has been changed.
+     * @type {Event}
+     */
+    "input",
+    /**
+     * Fires when a key is pressed.
+     * @type {KeyboardEvent}
+     */
+    "keydown",
+    /**
+     * Fires when a key is released.
+     * @type {KeyboardEvent}
+     */
+    "keyup"
+  ],
+  methods: {},
+  setup(props, ctx) {
+    const componentName = registerComponent("table", vivid.registerTable);
+    const element = vue.ref(null);
+    return { componentName, element };
+  },
+  render() {
+    if (isVue2) {
+      return vue.h(
+        this.componentName,
+        {
+          ref: "element",
+          attrs: {},
+          class: "vvd-component",
+          on: {
+            blur: (event) => {
+              this.$emit("blur", event);
+            },
+            click: (event) => {
+              this.$emit("click", event);
+            },
+            focus: (event) => {
+              this.$emit("focus", event);
+            },
+            input: (event) => {
+              this.$emit("input", event);
+            },
+            keydown: (event) => {
+              this.$emit("keydown", event);
+            },
+            keyup: (event) => {
+              this.$emit("keyup", event);
+            }
+          }
+        },
+        [this.$slots.default]
+      );
+    }
+    return vue.h(
+      this.componentName,
+      {
+        ref: "element",
+        class: "vvd-component",
+        ...handleVue3Props({}),
+        onBlur: (event) => {
+          this.$emit("blur", event);
+        },
+        onClick: (event) => {
+          this.$emit("click", event);
+        },
+        onFocus: (event) => {
+          this.$emit("focus", event);
+        },
+        onInput: (event) => {
+          this.$emit("input", event);
+        },
+        onKeydown: (event) => {
+          this.$emit("keydown", event);
+        },
+        onKeyup: (event) => {
+          this.$emit("keyup", event);
+        }
+      },
+      [
+        // @ts-ignore
+        this.$slots.default?.()
+      ]
+    );
+  }
+});
+
+const VTableBody = vue.defineComponent({
+  name: "VTableBody",
+  emits: [
+    /**
+     * Fires when the element loses focus.
+     * @type {FocusEvent}
+     */
+    "blur",
+    /**
+     * Fires when a pointing device button (such as a mouse's primary mouse button) is both pressed and released while the pointer is located inside the element.
+     * @type {MouseEvent}
+     */
+    "click",
+    /**
+     * Fires when the element receives focus.
+     * @type {FocusEvent}
+     */
+    "focus",
+    /**
+     * Fires when the value of an element has been changed.
+     * @type {Event}
+     */
+    "input",
+    /**
+     * Fires when a key is pressed.
+     * @type {KeyboardEvent}
+     */
+    "keydown",
+    /**
+     * Fires when a key is released.
+     * @type {KeyboardEvent}
+     */
+    "keyup"
+  ],
+  methods: {},
+  setup(props, ctx) {
+    const componentName = registerComponent("table-body", vivid.registerTable);
+    const element = vue.ref(null);
+    return { componentName, element };
+  },
+  render() {
+    if (isVue2) {
+      return vue.h(
+        this.componentName,
+        {
+          ref: "element",
+          attrs: {},
+          class: "vvd-component",
+          on: {
+            blur: (event) => {
+              this.$emit("blur", event);
+            },
+            click: (event) => {
+              this.$emit("click", event);
+            },
+            focus: (event) => {
+              this.$emit("focus", event);
+            },
+            input: (event) => {
+              this.$emit("input", event);
+            },
+            keydown: (event) => {
+              this.$emit("keydown", event);
+            },
+            keyup: (event) => {
+              this.$emit("keyup", event);
+            }
+          }
+        },
+        [this.$slots.default]
+      );
+    }
+    return vue.h(
+      this.componentName,
+      {
+        ref: "element",
+        class: "vvd-component",
+        ...handleVue3Props({}),
+        onBlur: (event) => {
+          this.$emit("blur", event);
+        },
+        onClick: (event) => {
+          this.$emit("click", event);
+        },
+        onFocus: (event) => {
+          this.$emit("focus", event);
+        },
+        onInput: (event) => {
+          this.$emit("input", event);
+        },
+        onKeydown: (event) => {
+          this.$emit("keydown", event);
+        },
+        onKeyup: (event) => {
+          this.$emit("keyup", event);
+        }
+      },
+      [
+        // @ts-ignore
+        this.$slots.default?.()
+      ]
+    );
+  }
+});
+
+const VTableCell = vue.defineComponent({
+  name: "VTableCell",
+  emits: [
+    /**
+     * Fires when the element loses focus.
+     * @type {FocusEvent}
+     */
+    "blur",
+    /**
+     * Fires when a pointing device button (such as a mouse's primary mouse button) is both pressed and released while the pointer is located inside the element.
+     * @type {MouseEvent}
+     */
+    "click",
+    /**
+     * Fires when the element receives focus.
+     * @type {FocusEvent}
+     */
+    "focus",
+    /**
+     * Fires when the value of an element has been changed.
+     * @type {Event}
+     */
+    "input",
+    /**
+     * Fires when a key is pressed.
+     * @type {KeyboardEvent}
+     */
+    "keydown",
+    /**
+     * Fires when a key is released.
+     * @type {KeyboardEvent}
+     */
+    "keyup"
+  ],
+  methods: {},
+  setup(props, ctx) {
+    const componentName = registerComponent("table-cell", vivid.registerTable);
+    const element = vue.ref(null);
+    return { componentName, element };
+  },
+  render() {
+    if (isVue2) {
+      return vue.h(
+        this.componentName,
+        {
+          ref: "element",
+          attrs: {},
+          class: "vvd-component",
+          on: {
             blur: (event) => {
               this.$emit("blur", event);
             },
@@ -11335,9 +13013,6 @@ const VSplitButton = vue.defineComponent({
             focus: (event) => {
               this.$emit("focus", event);
             },
-            "indicator-click": (event) => {
-              this.$emit("indicator-click", event);
-            },
             input: (event) => {
               this.$emit("input", event);
             },
@@ -11349,11 +13024,7 @@ const VSplitButton = vue.defineComponent({
             }
           }
         },
-        [
-          this.$slots.default,
-          // @slot icon The preferred way to add an icon to the component.
-          handleNamedSlotV2("icon", this.$slots["icon"])
-        ]
+        [this.$slots.default]
       );
     }
     return vue.h(
@@ -11361,20 +13032,7 @@ const VSplitButton = vue.defineComponent({
       {
         ref: "element",
         class: "vvd-component",
-        ...handleVue3Props({
-          ...this.appearance !== void 0 ? { "^appearance": this.appearance } : {},
-          ...this.connotation !== void 0 ? { "^connotation": this.connotation } : {},
-          ...this.disabled !== void 0 && this.disabled !== false ? { "^disabled": this.disabled } : {},
-          ...this.icon !== void 0 ? { "^icon": this.icon } : {},
-          ...this.indicatorAriaLabel !== void 0 ? { "^indicator-aria-label": this.indicatorAriaLabel } : {},
-          ...this.label !== void 0 ? { "^label": this.label } : {},
-          ...this.shape !== void 0 ? { "^shape": this.shape } : {},
-          ...this.size !== void 0 ? { "^size": this.size } : {},
-          ...this.splitIndicator !== void 0 ? { "^split-indicator": this.splitIndicator } : {}
-        }),
-        onActionClick: (event) => {
-          this.$emit("action-click", event);
-        },
+        ...handleVue3Props({}),
         onBlur: (event) => {
           this.$emit("blur", event);
         },
@@ -11384,9 +13042,6 @@ const VSplitButton = vue.defineComponent({
         onFocus: (event) => {
           this.$emit("focus", event);
         },
-        onIndicatorClick: (event) => {
-          this.$emit("indicator-click", event);
-        },
         onInput: (event) => {
           this.$emit("input", event);
         },
@@ -11399,82 +13054,20 @@ const VSplitButton = vue.defineComponent({
       },
       [
         // @ts-ignore
-        this.$slots.default && this.$slots.default(),
-        // @slot icon The preferred way to add an icon to the component.
-        handleNamedSlotV3("icon", this.$slots["icon"])
+        this.$slots.default?.()
       ]
     );
   }
 });
 
-const VSwitch = vue.defineComponent({
-  name: "VSwitch",
-  model: isVue2 ? {
-    prop: "modelValue",
-    event: "update:modelValue"
-  } : void 0,
-  props: {
-    /**
-     * The current checkedness of the element.
-     */
-    checked: { type: Boolean, default: void 0 },
-    /**
-     * The current checkedness of the element.
-     */
-    modelValue: { type: Boolean, default: void 0 },
-    /**
-     * Indicates the switch's connotation.
-     */
-    connotation: {
-      type: String,
-      default: void 0
-    },
-    /**
-     * The default checkedness of the element. This value sets the `checked` property
-     * only when the `checked` property has not been explicitly set.
-     */
-    defaultChecked: { type: Boolean, default: void 0 },
-    /**
-     * Sets the element's disabled state. A disabled element will not be included during form submission.
-     */
-    disabled: { type: Boolean, default: void 0 },
-    /**
-     * The default value of the element. This value sets the `value` property
-     * only when the `value` property has not been explicitly set.
-     */
-    initialValue: { type: String, default: void 0 },
-    /**
-     * Indicates the switch's label.
-     */
-    label: { type: String, default: void 0 },
-    /**
-     * The name of the element. This element's value will be surfaced during form submission under the provided name.
-     */
-    name: { type: String, default: void 0 },
-    /**
-     * When true, the control will be immutable by user interaction. See https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly | readonly HTML attribute for more information.
-     */
-    readonly: { type: Boolean, default: void 0 },
-    /**
-     * Require the field to be completed prior to form submission.
-     */
-    required: { type: Boolean, default: void 0 },
-    /**
-     * The current value of the element.
-     */
-    value: { type: String, default: void 0 }
-  },
+const VTableHead = vue.defineComponent({
+  name: "VTableHead",
   emits: [
     /**
      * Fires when the element loses focus.
      * @type {FocusEvent}
      */
     "blur",
-    /**
-     * Emits a custom change event when the checked state changes
-     * @type {CustomEvent<undefined>}
-     */
-    "change",
     /**
      * Fires when a pointing device button (such as a mouse's primary mouse button) is both pressed and released while the pointer is located inside the element.
      * @type {MouseEvent}
@@ -11499,30 +13092,11 @@ const VSwitch = vue.defineComponent({
      * Fires when a key is released.
      * @type {KeyboardEvent}
      */
-    "keyup",
-    /**
-     * Fires when the modelValue value changes
-     * @type {boolean}
-     */
-    "update:modelValue"
+    "keyup"
   ],
-  methods: {
-    /**
-     * Return the current validity of the element.
-     */
-    checkValidity() {
-      return this.element?.checkValidity();
-    },
-    /**
-     * Return the current validity of the element.
-     * If false, fires an invalid event at the element.
-     */
-    reportValidity() {
-      return this.element?.reportValidity();
-    }
-  },
+  methods: {},
   setup(props, ctx) {
-    const componentName = registerComponent("switch", vivid.registerSwitch);
+    const componentName = registerComponent("table-head", vivid.registerTable);
     const element = vue.ref(null);
     return { componentName, element };
   },
@@ -11532,27 +13106,12 @@ const VSwitch = vue.defineComponent({
         this.componentName,
         {
           ref: "element",
-          attrs: {
-            ...(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 } : {},
-            ...this.disabled !== void 0 ? { disabled: this.disabled } : {},
-            ...this.initialValue !== void 0 ? { value: this.initialValue } : {},
-            ...this.label !== void 0 ? { label: this.label } : {},
-            ...this.name !== void 0 ? { name: this.name } : {},
-            ...this.readonly !== void 0 ? { readonly: this.readonly } : {},
-            ...this.required !== void 0 ? { required: this.required } : {},
-            ...this.value !== void 0 ? { "current-value": this.value } : {}
-          },
+          attrs: {},
           class: "vvd-component",
           on: {
             blur: (event) => {
               this.$emit("blur", event);
             },
-            change: (event) => {
-              this.$emit("update:modelValue", event.currentTarget.checked);
-              this.$emit("change", event);
-            },
             click: (event) => {
               this.$emit("click", event);
             },
@@ -11578,25 +13137,10 @@ const VSwitch = vue.defineComponent({
       {
         ref: "element",
         class: "vvd-component",
-        ...handleVue3Props({
-          ...(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.initialValue !== void 0 ? { "^value": this.initialValue } : {},
-          ...this.label !== void 0 ? { "^label": this.label } : {},
-          ...this.name !== void 0 ? { "^name": this.name } : {},
-          ...this.readonly !== void 0 && this.readonly !== false ? { "^readonly": this.readonly } : {},
-          ...this.required !== void 0 && this.required !== false ? { "^required": this.required } : {},
-          ...this.value !== void 0 ? { "^current-value": this.value } : {}
-        }),
+        ...handleVue3Props({}),
         onBlur: (event) => {
           this.$emit("blur", event);
         },
-        onChange: (event) => {
-          this.$emit("update:modelValue", event.currentTarget.checked);
-          this.$emit("change", event);
-        },
         onClick: (event) => {
           this.$emit("click", event);
         },
@@ -11615,52 +13159,14 @@ const VSwitch = vue.defineComponent({
       },
       [
         // @ts-ignore
-        this.$slots.default && this.$slots.default()
+        this.$slots.default?.()
       ]
     );
   }
 });
 
-const VTab = vue.defineComponent({
-  name: "VTab",
-  props: {
-    /**
-     * The connotation the tab should have.
-     */
-    connotation: {
-      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.
-     */
-    disabled: { type: Boolean, default: void 0 },
-    /**
-     * A decorative icon the custom element should have.
-     * See the Vivid Icon Gallery for available icons: https://icons.vivid.vonage.com/
-     */
-    icon: { type: String, default: void 0 },
-    /**
-     * Indicates the icon affix alignment.
-     */
-    iconTrailing: { type: Boolean, default: void 0 },
-    /**
-     * Indicates the tab's label.
-     */
-    label: { type: String, default: void 0 },
-    /**
-     * Adds a close button
-     */
-    removable: { type: Boolean, default: void 0 },
-    /**
-     * The shape the tab should have.
-     */
-    shape: {
-      type: String,
-      default: void 0
-    },
-    tabIndex: { type: Number, default: void 0 }
-  },
+const VTableHeaderCell = vue.defineComponent({
+  name: "VTableHeaderCell",
   emits: [
     /**
      * Fires when the element loses focus.
@@ -11693,16 +13199,9 @@ const VTab = vue.defineComponent({
      */
     "keyup"
   ],
-  methods: {
-    _handleCloseClick(e) {
-      return this.element?._handleCloseClick(e);
-    },
-    _onKeyDown(e) {
-      return this.element?._onKeyDown(e);
-    }
-  },
+  methods: {},
   setup(props, ctx) {
-    const componentName = registerComponent("tab", vivid.registerTab);
+    const componentName = registerComponent("table-header-cell", vivid.registerTable);
     const element = vue.ref(null);
     return { componentName, element };
   },
@@ -11712,16 +13211,7 @@ const VTab = vue.defineComponent({
         this.componentName,
         {
           ref: "element",
-          attrs: {
-            ...this.connotation !== void 0 ? { connotation: this.connotation } : {},
-            ...this.disabled !== void 0 ? { disabled: this.disabled } : {},
-            ...this.icon !== void 0 ? { icon: this.icon } : {},
-            ...this.iconTrailing !== void 0 ? { "icon-trailing": this.iconTrailing } : {},
-            ...this.label !== void 0 ? { label: this.label } : {},
-            ...this.removable !== void 0 ? { removable: this.removable } : {},
-            ...this.shape !== void 0 ? { shape: this.shape } : {},
-            ...this.tabIndex !== void 0 ? { tabIndex: this.tabIndex } : {}
-          },
+          attrs: {},
           class: "vvd-component",
           on: {
             blur: (event) => {
@@ -11744,11 +13234,7 @@ const VTab = vue.defineComponent({
             }
           }
         },
-        [
-          this.$slots.default,
-          // @slot icon The preferred way to add an icon to the component.
-          handleNamedSlotV2("icon", this.$slots["icon"])
-        ]
+        [this.$slots.default]
       );
     }
     return vue.h(
@@ -11756,16 +13242,7 @@ const VTab = vue.defineComponent({
       {
         ref: "element",
         class: "vvd-component",
-        ...handleVue3Props({
-          ...this.connotation !== void 0 ? { "^connotation": this.connotation } : {},
-          ...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 } : {},
-          ...this.label !== void 0 ? { "^label": this.label } : {},
-          ...this.removable !== void 0 && this.removable !== false ? { "^removable": this.removable } : {},
-          ...this.shape !== void 0 ? { "^shape": this.shape } : {},
-          ...this.tabIndex !== void 0 ? { "^tabIndex": this.tabIndex } : {}
-        }),
+        ...handleVue3Props({}),
         onBlur: (event) => {
           this.$emit("blur", event);
         },
@@ -11787,16 +13264,14 @@ const VTab = vue.defineComponent({
       },
       [
         // @ts-ignore
-        this.$slots.default && this.$slots.default(),
-        // @slot icon The preferred way to add an icon to the component.
-        handleNamedSlotV3("icon", this.$slots["icon"])
+        this.$slots.default?.()
       ]
     );
   }
 });
 
-const VTabPanel = vue.defineComponent({
-  name: "VTabPanel",
+const VTableRow = vue.defineComponent({
+  name: "VTableRow",
   emits: [
     /**
      * Fires when the element loses focus.
@@ -11831,7 +13306,7 @@ const VTabPanel = vue.defineComponent({
   ],
   methods: {},
   setup(props, ctx) {
-    const componentName = registerComponent("tab-panel", vivid.registerTabPanel);
+    const componentName = registerComponent("table-row", vivid.registerTable);
     const element = vue.ref(null);
     return { componentName, element };
   },
@@ -11894,7 +13369,7 @@ const VTabPanel = vue.defineComponent({
       },
       [
         // @ts-ignore
-        this.$slots.default && this.$slots.default()
+        this.$slots.default?.()
       ]
     );
   }
@@ -12077,9 +13552,12 @@ const VTabs = vue.defineComponent({
       },
       [
         // @ts-ignore
-        this.$slots.default && this.$slots.default(),
+        this.$slots.default?.(),
         // @slot action-items Slot for action items such as buttons or controls.
-        handleNamedSlotV3("action-items", this.$slots["action-items"])
+        handleNamedSlotV3(
+          "action-items",
+          this.$slots["action-items"]?.()
+        )
       ]
     );
   }
@@ -12285,9 +13763,9 @@ const VTag = vue.defineComponent({
       },
       [
         // @ts-ignore
-        this.$slots.default && this.$slots.default(),
+        this.$slots.default?.(),
         // @slot icon The preferred way to add an icon to the component.
-        handleNamedSlotV3("icon", this.$slots["icon"])
+        handleNamedSlotV3("icon", this.$slots["icon"]?.())
       ]
     );
   }
@@ -12392,7 +13870,7 @@ const VTagGroup = vue.defineComponent({
       },
       [
         // @ts-ignore
-        this.$slots.default && this.$slots.default()
+        this.$slots.default?.()
       ]
     );
   }
@@ -12639,6 +14117,8 @@ const VTextArea = vue.defineComponent({
         },
         [
           this.$slots.default,
+          // @slot contextual-help Slot for the contextual-help component, displayed next to the label.
+          handleNamedSlotV2("contextual-help", this.$slots["contextual-help"]),
           // @slot helper-text Describes how to use the text-area. Alternative to the `helper-text` attribute.
           handleNamedSlotV2("helper-text", this.$slots["helper-text"])
         ]
@@ -12698,9 +14178,17 @@ const VTextArea = vue.defineComponent({
       },
       [
         // @ts-ignore
-        this.$slots.default && this.$slots.default(),
+        this.$slots.default?.(),
+        // @slot contextual-help Slot for the contextual-help component, displayed next to the label.
+        handleNamedSlotV3(
+          "contextual-help",
+          this.$slots["contextual-help"]?.()
+        ),
         // @slot helper-text Describes how to use the text-area. Alternative to the `helper-text` attribute.
-        handleNamedSlotV3("helper-text", this.$slots["helper-text"])
+        handleNamedSlotV3(
+          "helper-text",
+          this.$slots["helper-text"]?.()
+        )
       ]
     );
   }
@@ -12967,6 +14455,8 @@ const VTextField = vue.defineComponent({
           this.$slots.default,
           // @slot action-items Used to add action items to the end of the text-field.
           handleNamedSlotV2("action-items", this.$slots["action-items"]),
+          // @slot contextual-help Slot for the contextual-help component, displayed next to the label.
+          handleNamedSlotV2("contextual-help", this.$slots["contextual-help"]),
           // @slot helper-text Describes how to use the text-field. Alternative to the `helper-text` attribute.
           handleNamedSlotV2("helper-text", this.$slots["helper-text"]),
           // @slot leading-action-items Used to add action items to the start of the text-field.
@@ -13035,15 +14525,26 @@ const VTextField = vue.defineComponent({
       },
       [
         // @ts-ignore
-        this.$slots.default && this.$slots.default(),
+        this.$slots.default?.(),
         // @slot action-items Used to add action items to the end of the text-field.
-        handleNamedSlotV3("action-items", this.$slots["action-items"]),
+        handleNamedSlotV3(
+          "action-items",
+          this.$slots["action-items"]?.()
+        ),
+        // @slot contextual-help Slot for the contextual-help component, displayed next to the label.
+        handleNamedSlotV3(
+          "contextual-help",
+          this.$slots["contextual-help"]?.()
+        ),
         // @slot helper-text Describes how to use the text-field. Alternative to the `helper-text` attribute.
-        handleNamedSlotV3("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.
         handleNamedSlotV3(
           "leading-action-items",
-          this.$slots["leading-action-items"]
+          this.$slots["leading-action-items"]?.()
         )
       ]
     );
@@ -13232,6 +14733,8 @@ const VTimePicker = vue.defineComponent({
         },
         [
           this.$slots.default,
+          // @slot contextual-help Slot for the contextual-help component, displayed next to the label.
+          handleNamedSlotV2("contextual-help", this.$slots["contextual-help"]),
           // @slot helper-text Describes how to use the time-picker. Alternative to the `helper-text` attribute.
           handleNamedSlotV2("helper-text", this.$slots["helper-text"])
         ]
@@ -13283,9 +14786,17 @@ const VTimePicker = vue.defineComponent({
       },
       [
         // @ts-ignore
-        this.$slots.default && this.$slots.default(),
+        this.$slots.default?.(),
+        // @slot contextual-help Slot for the contextual-help component, displayed next to the label.
+        handleNamedSlotV3(
+          "contextual-help",
+          this.$slots["contextual-help"]?.()
+        ),
         // @slot helper-text Describes how to use the time-picker. Alternative to the `helper-text` attribute.
-        handleNamedSlotV3("helper-text", this.$slots["helper-text"])
+        handleNamedSlotV3(
+          "helper-text",
+          this.$slots["helper-text"]?.()
+        )
       ]
     );
   }
@@ -13442,11 +14953,14 @@ const VToggletip = vue.defineComponent({
       },
       [
         // @ts-ignore
-        this.$slots.default && this.$slots.default(),
+        this.$slots.default?.(),
         // @slot action-items The content to display in the toggletip action items.
-        handleNamedSlotV3("action-items", this.$slots["action-items"]),
+        handleNamedSlotV3(
+          "action-items",
+          this.$slots["action-items"]?.()
+        ),
         // @slot anchor Used to set the anchor element for the toggletip.
-        handleNamedSlotV3("anchor", this.$slots["anchor"])
+        handleNamedSlotV3("anchor", this.$slots["anchor"]?.())
       ]
     );
   }
@@ -13586,9 +15100,9 @@ const VTooltip = vue.defineComponent({
       },
       [
         // @ts-ignore
-        this.$slots.default && this.$slots.default(),
+        this.$slots.default?.(),
         // @slot anchor Used to set the anchor element for the tooltip.
-        handleNamedSlotV3("anchor", this.$slots["anchor"])
+        handleNamedSlotV3("anchor", this.$slots["anchor"]?.())
       ]
     );
   }
@@ -13766,11 +15280,11 @@ const VTreeItem = vue.defineComponent({
       },
       [
         // @ts-ignore
-        this.$slots.default && this.$slots.default(),
+        this.$slots.default?.(),
         // @slot icon The preferred way to add an icon to the component.
-        handleNamedSlotV3("icon", this.$slots["icon"]),
+        handleNamedSlotV3("icon", this.$slots["icon"]?.()),
         // @slot item To specify a child tree item.
-        handleNamedSlotV3("item", this.$slots["item"])
+        handleNamedSlotV3("item", this.$slots["item"]?.())
       ]
     );
   }
@@ -13893,7 +15407,7 @@ const VTreeView = vue.defineComponent({
       },
       [
         // @ts-ignore
-        this.$slots.default && this.$slots.default()
+        this.$slots.default?.()
       ]
     );
   }
@@ -14077,7 +15591,7 @@ const VVideoPlayer = vue.defineComponent({
       },
       [
         // @ts-ignore
-        this.$slots.default && this.$slots.default()
+        this.$slots.default?.()
       ]
     );
   }
@@ -14374,6 +15888,8 @@ var Icon = /* @__PURE__ */ ((Icon2) => {
   Icon2["copy2Solid"] = "copy-2-solid";
   Icon2["copyLine"] = "copy-line";
   Icon2["copySolid"] = "copy-solid";
+  Icon2["coverageLine"] = "coverage-line";
+  Icon2["coverageSolid"] = "coverage-solid";
   Icon2["creditCardLine"] = "credit-card-line";
   Icon2["creditCardSolid"] = "credit-card-solid";
   Icon2["cropLine"] = "crop-line";
@@ -14388,6 +15904,8 @@ var Icon = /* @__PURE__ */ ((Icon2) => {
   Icon2["cursorSolid"] = "cursor-solid";
   Icon2["darkModeLine"] = "dark-mode-line";
   Icon2["darkModeSolid"] = "dark-mode-solid";
+  Icon2["dataRoamingLine"] = "data-roaming-line";
+  Icon2["dataRoamingSolid"] = "data-roaming-solid";
   Icon2["deleteLine"] = "delete-line";
   Icon2["deleteSolid"] = "delete-solid";
   Icon2["densityHighLine"] = "density-high-line";
@@ -15330,17 +16848,17 @@ var Icon = /* @__PURE__ */ ((Icon2) => {
   return Icon2;
 })(Icon || {});
 
-const tokensThemeLightCss = "/**\n * Do not edit directly\n * Generated on Mon, 08 Dec 2025 18:08:08 GMT\n */\n/**\n * Do not edit directly\n * Generated on Mon, 08 Dec 2025 18:08:08 GMT\n */\n/**\n * Do not edit directly\n * Generated on Mon, 08 Dec 2025 18:08:08 GMT\n */\n/**\n * Do not edit directly\n * Generated on Mon, 08 Dec 2025 18:08:08 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, 10 Feb 2026 14:55:48 GMT\n */\n/**\n * Do not edit directly\n * Generated on Tue, 10 Feb 2026 14:55:48 GMT\n */\n/**\n * Do not edit directly\n * Generated on Tue, 10 Feb 2026 14:55:48 GMT\n */\n/**\n * Do not edit directly\n * Generated on Tue, 10 Feb 2026 14:55:48 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, 08 Dec 2025 18:08:08 GMT\n */\n/**\n * Do not edit directly\n * Generated on Mon, 08 Dec 2025 18:08:08 GMT\n */\n/**\n * Do not edit directly\n * Generated on Mon, 08 Dec 2025 18:08:08 GMT\n */\n/**\n * Do not edit directly\n * Generated on Mon, 08 Dec 2025 18:08:08 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, 10 Feb 2026 14:55:48 GMT\n */\n/**\n * Do not edit directly\n * Generated on Tue, 10 Feb 2026 14:55:48 GMT\n */\n/**\n * Do not edit directly\n * Generated on Tue, 10 Feb 2026 14:55:48 GMT\n */\n/**\n * Do not edit directly\n * Generated on Tue, 10 Feb 2026 14:55:48 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-display: block;\n  font-family: SpeziaCompleteVariableUpright;\n  font-stretch: 50% 200%;\n  font-weight: 1 1000;\n  src: url(\"https://fonts.resources.vonage.com/fonts/v2/SpeziaCompleteVariableUprightWeb.woff2\") format(\"woff2\");\n}\n@font-face {\n  font-display: block;\n  font-family: SpeziaMonoCompleteVariable;\n  font-stretch: 50% 200%;\n  font-weight: 1 1000;\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, 08 Dec 2025 18:08:08 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, 10 Feb 2026 14:55:48 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, 08 Dec 2025 18:08:08 GMT\n */\n/**\n * Do not edit directly\n * Generated on Mon, 08 Dec 2025 18:08:08 GMT\n */\n.vvd-root {\n  background-color: var(--vvd-color-canvas);\n  color: var(--vvd-color-canvas-text);\n  color-scheme: var(--vvd-color-scheme);\n}\n\n.vvd-scrollbar {\n  --scrollbar-track-color: transparent;\n  --scrollbar-thumb-color: color-mix(in srgb, var(--vvd-color-neutral-950), transparent 70%);\n}\n.vvd-scrollbar {\n  scrollbar-color: var(--scrollbar-thumb-color) var(--scrollbar-track-color);\n  scrollbar-width: thin;\n}\n.vvd-scrollbar ::-webkit-scrollbar {\n  width: 4px;\n}\n.vvd-scrollbar ::-webkit-scrollbar-track {\n  background: var(--scrollbar-track-color);\n}\n.vvd-scrollbar ::-webkit-scrollbar-thumb {\n  border: 0;\n  border-radius: 4px;\n  background-color: var(--scrollbar-fallback-track-color, var(--scrollbar-thumb-color));\n}\n\n.vvd-neutral-tint-elevation {\n  --_vvd-tinted-color-surface-0dp: var(--vvd-neutral-tint-color-surface-0dp);\n  --_vvd-tinted-color-surface-2dp: var(--vvd-neutral-tint-color-surface-2dp);\n  --_vvd-tinted-color-surface-4dp: var(--vvd-neutral-tint-color-surface-4dp);\n  --_vvd-tinted-color-surface-8dp: var(--vvd-neutral-tint-color-surface-8dp);\n  --_vvd-tinted-color-surface-12dp: var(--vvd-neutral-tint-color-surface-12dp);\n  --_vvd-tinted-color-surface-16dp: var(--vvd-neutral-tint-color-surface-16dp);\n  --_vvd-tinted-color-surface-24dp: var(--vvd-neutral-tint-color-surface-24dp);\n  --_vvd-tinted-shadow-surface-0dp: var(--vvd-neutral-tint-shadow-surface-0dp);\n  --_vvd-tinted-shadow-surface-2dp: var(--vvd-neutral-tint-shadow-surface-2dp);\n  --_vvd-tinted-shadow-surface-4dp: var(--vvd-neutral-tint-shadow-surface-4dp);\n  --_vvd-tinted-shadow-surface-8dp: var(--vvd-neutral-tint-shadow-surface-8dp);\n  --_vvd-tinted-shadow-surface-12dp: var(\n  \t--vvd-neutral-tint-shadow-surface-12dp\n  );\n  --_vvd-tinted-shadow-surface-16dp: var(\n  \t--vvd-neutral-tint-shadow-surface-16dp\n  );\n  --_vvd-tinted-shadow-surface-24dp: var(\n  \t--vvd-neutral-tint-shadow-surface-24dp\n  );\n}\n.vvd-neutral-tint-elevation > * {\n  --_vvd-tinted-color-surface-0dp: var(--vvd-color-surface-0dp);\n  --_vvd-tinted-color-surface-2dp: var(--vvd-color-surface-2dp);\n  --_vvd-tinted-color-surface-4dp: var(--vvd-color-surface-4dp);\n  --_vvd-tinted-color-surface-8dp: var(--vvd-color-surface-8dp);\n  --_vvd-tinted-color-surface-12dp: var(--vvd-color-surface-12dp);\n  --_vvd-tinted-color-surface-16dp: var(--vvd-color-surface-16dp);\n  --_vvd-tinted-color-surface-24dp: var(--vvd-color-surface-24dp);\n  --_vvd-tinted-shadow-surface-0dp: var(--vvd-shadow-surface-0dp);\n  --_vvd-tinted-shadow-surface-2dp: var(--vvd-shadow-surface-2dp);\n  --_vvd-tinted-shadow-surface-4dp: var(--vvd-shadow-surface-4dp);\n  --_vvd-tinted-shadow-surface-8dp: var(--vvd-shadow-surface-8dp);\n  --_vvd-tinted-shadow-surface-12dp: var(--vvd-shadow-surface-12dp);\n  --_vvd-tinted-shadow-surface-16dp: var(--vvd-shadow-surface-16dp);\n  --_vvd-tinted-shadow-surface-24dp: var(--vvd-shadow-surface-24dp);\n}\n";
+const coreThemeCss = "/**\n * Do not edit directly\n * Generated on Tue, 10 Feb 2026 14:55:48 GMT\n */\n/**\n * Do not edit directly\n * Generated on Tue, 10 Feb 2026 14:55:48 GMT\n */\n.vvd-root {\n  background-color: var(--vvd-color-canvas);\n  color: var(--vvd-color-canvas-text);\n  color-scheme: var(--vvd-color-scheme);\n}\n\n.vvd-scrollbar {\n  --scrollbar-track-color: transparent;\n  --scrollbar-thumb-color: color-mix(in srgb, var(--vvd-color-neutral-950), transparent 70%);\n}\n.vvd-scrollbar {\n  scrollbar-color: var(--scrollbar-thumb-color) var(--scrollbar-track-color);\n  scrollbar-width: thin;\n}\n.vvd-scrollbar ::-webkit-scrollbar {\n  width: 4px;\n}\n.vvd-scrollbar ::-webkit-scrollbar-track {\n  background: var(--scrollbar-track-color);\n}\n.vvd-scrollbar ::-webkit-scrollbar-thumb {\n  border: 0;\n  border-radius: 4px;\n  background-color: var(--scrollbar-fallback-track-color, var(--scrollbar-thumb-color));\n}\n\n.vvd-neutral-tint-elevation {\n  --_vvd-tinted-color-surface-0dp: var(--vvd-neutral-tint-color-surface-0dp);\n  --_vvd-tinted-color-surface-2dp: var(--vvd-neutral-tint-color-surface-2dp);\n  --_vvd-tinted-color-surface-4dp: var(--vvd-neutral-tint-color-surface-4dp);\n  --_vvd-tinted-color-surface-8dp: var(--vvd-neutral-tint-color-surface-8dp);\n  --_vvd-tinted-color-surface-12dp: var(--vvd-neutral-tint-color-surface-12dp);\n  --_vvd-tinted-color-surface-16dp: var(--vvd-neutral-tint-color-surface-16dp);\n  --_vvd-tinted-color-surface-24dp: var(--vvd-neutral-tint-color-surface-24dp);\n  --_vvd-tinted-shadow-surface-0dp: var(--vvd-neutral-tint-shadow-surface-0dp);\n  --_vvd-tinted-shadow-surface-2dp: var(--vvd-neutral-tint-shadow-surface-2dp);\n  --_vvd-tinted-shadow-surface-4dp: var(--vvd-neutral-tint-shadow-surface-4dp);\n  --_vvd-tinted-shadow-surface-8dp: var(--vvd-neutral-tint-shadow-surface-8dp);\n  --_vvd-tinted-shadow-surface-12dp: var(\n  \t--vvd-neutral-tint-shadow-surface-12dp\n  );\n  --_vvd-tinted-shadow-surface-16dp: var(\n  \t--vvd-neutral-tint-shadow-surface-16dp\n  );\n  --_vvd-tinted-shadow-surface-24dp: var(\n  \t--vvd-neutral-tint-shadow-surface-24dp\n  );\n}\n.vvd-neutral-tint-elevation > * {\n  --_vvd-tinted-color-surface-0dp: var(--vvd-color-surface-0dp);\n  --_vvd-tinted-color-surface-2dp: var(--vvd-color-surface-2dp);\n  --_vvd-tinted-color-surface-4dp: var(--vvd-color-surface-4dp);\n  --_vvd-tinted-color-surface-8dp: var(--vvd-color-surface-8dp);\n  --_vvd-tinted-color-surface-12dp: var(--vvd-color-surface-12dp);\n  --_vvd-tinted-color-surface-16dp: var(--vvd-color-surface-16dp);\n  --_vvd-tinted-color-surface-24dp: var(--vvd-color-surface-24dp);\n  --_vvd-tinted-shadow-surface-0dp: var(--vvd-shadow-surface-0dp);\n  --_vvd-tinted-shadow-surface-2dp: var(--vvd-shadow-surface-2dp);\n  --_vvd-tinted-shadow-surface-4dp: var(--vvd-shadow-surface-4dp);\n  --_vvd-tinted-shadow-surface-8dp: var(--vvd-shadow-surface-8dp);\n  --_vvd-tinted-shadow-surface-12dp: var(--vvd-shadow-surface-12dp);\n  --_vvd-tinted-shadow-surface-16dp: var(--vvd-shadow-surface-16dp);\n  --_vvd-tinted-shadow-surface-24dp: var(--vvd-shadow-surface-24dp);\n}\n";
 
-const coreTypographyCss = "/**\n * Do not edit directly\n * Generated on Mon, 08 Dec 2025 18:08:08 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  -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  text-rendering: optimizeLegibility; /* emphasise on legibility when rendering, turns on ligatures and kerning */\n}\n.vvd-root:not(:root) {\n  font: var(--vvd-typography-base);\n  font-feature-settings: \"kern\"; /* turns on 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  text-rendering: optimizeLegibility; /* emphasise on legibility when rendering, turns on ligatures and kerning */\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  position: relative;\n  font: var(--vvd-typography-base-condensed);\n  font-size: 75%;\n  line-height: 0;\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, 10 Feb 2026 14:55:48 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  -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  text-rendering: optimizeLegibility; /* emphasise on legibility when rendering, turns on ligatures and kerning */\n}\n.vvd-root:not(:root) {\n  font: var(--vvd-typography-base);\n  font-feature-settings: \"kern\"; /* turns on 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  text-rendering: optimizeLegibility; /* emphasise on legibility when rendering, turns on ligatures and kerning */\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  position: relative;\n  font: var(--vvd-typography-base-condensed);\n  font-size: 75%;\n  line-height: 0;\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",
@@ -15458,6 +16976,7 @@ exports.VCheckbox = VCheckbox;
 exports.VColorPicker = VColorPicker;
 exports.VCombobox = VCombobox;
 exports.VContextualHelp = VContextualHelp;
+exports.VCountry = VCountry;
 exports.VDataGrid = VDataGrid;
 exports.VDataGridCell = VDataGridCell;
 exports.VDataGridRow = VDataGridRow;
@@ -15482,12 +17001,14 @@ exports.VNote = VNote;
 exports.VNumberField = VNumberField;
 exports.VOption = VOption;
 exports.VPagination = VPagination;
+exports.VPopover = VPopover;
 exports.VProgress = VProgress;
 exports.VProgressRing = VProgressRing;
 exports.VRadio = VRadio;
 exports.VRadioGroup = VRadioGroup;
 exports.VRangeSlider = VRangeSlider;
 exports.VRichTextEditor = VRichTextEditor;
+exports.VRichTextView = VRichTextView;
 exports.VSearchableSelect = VSearchableSelect;
 exports.VSelect = VSelect;
 exports.VSelectableBox = VSelectableBox;
@@ -15495,9 +17016,16 @@ exports.VSideDrawer = VSideDrawer;
 exports.VSimpleColorPicker = VSimpleColorPicker;
 exports.VSlider = VSlider;
 exports.VSplitButton = VSplitButton;
+exports.VStatus = VStatus;
 exports.VSwitch = VSwitch;
 exports.VTab = VTab;
 exports.VTabPanel = VTabPanel;
+exports.VTable = VTable;
+exports.VTableBody = VTableBody;
+exports.VTableCell = VTableCell;
+exports.VTableHead = VTableHead;
+exports.VTableHeaderCell = VTableHeaderCell;
+exports.VTableRow = VTableRow;
 exports.VTabs = VTabs;
 exports.VTag = VTag;
 exports.VTagGroup = VTagGroup;