@vonage/vivid-vue 5.7.0 → 5.9.0

package/dist/index.js

@@ -1,5 +1,5 @@
 import { ref, version, onBeforeMount, defineComponent, h } from 'vue';
-import { registerAccordion, registerAccordionItem, registerActionGroup, registerAlert, registerAudioPlayer, registerAvatar, registerBadge, registerBanner, registerBreadcrumb, registerBreadcrumbItem, registerButton, registerCalendar, registerCalendarEvent, registerCard, registerCheckbox, registerColorPicker, registerCombobox, registerDataGrid, registerDatePicker, registerDateRangePicker, registerDateTimePicker, registerDialPad, registerDialog, registerDivider, registerEmptyState, registerFab, registerFilePicker, registerHeader, registerIcon, registerLayout, registerMenu, registerMenuItem, registerNav, registerNavDisclosure, registerNavItem, registerNote, registerNumberField, registerOption, registerPagination, registerProgress, registerProgressRing, registerRadio, registerRadioGroup, registerRangeSlider, registerRichTextEditor, registerSearchableSelect, registerSelect, registerSelectableBox, registerSideDrawer, registerSimpleColorPicker, registerSlider, registerSplitButton, registerSwitch, registerTab, registerTabPanel, registerTabs, registerTag, registerTagGroup, registerTextArea, registerTextField, registerTimePicker, registerToggletip, registerTooltip, registerTreeItem, registerTreeView, registerVideoPlayer } from '@vonage/vivid';
+import { registerAccordion, registerAccordionItem, registerActionGroup, registerAlert, registerAudioPlayer, registerAvatar, registerBadge, registerBanner, registerBreadcrumb, registerBreadcrumbItem, registerButton, registerCalendar, registerCalendarEvent, registerCard, registerCheckbox, registerColorPicker, registerCombobox, registerContextualHelp, registerDataGrid, registerDatePicker, registerDateRangePicker, registerDateTimePicker, registerDialPad, registerDialog, registerDivider, registerEmptyState, registerFab, registerFilePicker, registerHeader, registerIcon, registerLayout, registerMenu, registerMenuItem, registerNav, registerNavDisclosure, registerNavItem, registerNote, registerNumberField, registerOption, registerPagination, registerPopover, registerProgress, registerProgressRing, registerRadio, registerRadioGroup, registerRangeSlider, registerRichTextEditor, registerRichTextView, registerSearchableSelect, registerSelect, registerSelectableBox, registerSideDrawer, registerSimpleColorPicker, registerSlider, registerSplitButton, registerSwitch, registerTab, registerTabPanel, registerDataTable, registerTabs, registerTag, registerTagGroup, registerTextArea, registerTextField, registerTimePicker, registerToggletip, registerTooltip, registerTreeItem, registerTreeView, registerVideoPlayer } from '@vonage/vivid';
 
 const CustomComponentPrefix = ref("vvd3");
 function setCustomComponentPrefix(prefix) {
@@ -3174,6 +3174,8 @@ const VColorPicker = 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.
@@ -3231,6 +3233,11 @@ const VColorPicker = defineComponent({
       [
         // @ts-ignore
         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"]),
         // @slot popup-text Overrides the default "Color Picker" title of the Popup window.
@@ -3483,6 +3490,8 @@ const VCombobox = 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.
@@ -3543,6 +3552,11 @@ const VCombobox = defineComponent({
       [
         // @ts-ignore
         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"]),
         // @slot icon The preferred way to add an icon to the combobox control.
@@ -3554,6 +3568,133 @@ const VCombobox = defineComponent({
   }
 });
 
+const VContextualHelp = defineComponent({
+  name: "VContextualHelp",
+  props: {
+    /**
+     * Placement of the toggletip
+     */
+    placement: {
+      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(
+      "contextual-help",
+      registerContextualHelp
+    );
+    const element = ref(null);
+    return { componentName, element };
+  },
+  render() {
+    if (isVue2) {
+      return h(
+        this.componentName,
+        {
+          ref: "element",
+          attrs: {
+            ...this.placement !== void 0 ? { placement: this.placement } : {}
+          },
+          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 Custom icon slot (optional).
+          handleNamedSlotV2("icon", this.$slots["icon"])
+        ]
+      );
+    }
+    return h(
+      this.componentName,
+      {
+        ref: "element",
+        class: "vvd-component",
+        ...handleVue3Props({
+          ...this.placement !== void 0 ? { "^placement": this.placement } : {}
+        }),
+        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 && this.$slots.default(),
+        // @slot icon Custom icon slot (optional).
+        handleNamedSlotV3("icon", this.$slots["icon"])
+      ]
+    );
+  }
+});
+
 const VDataGrid = defineComponent({
   name: "VDataGrid",
   props: {
@@ -4251,6 +4392,8 @@ const VDatePicker = 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"])
         ]
@@ -4300,6 +4443,11 @@ const VDatePicker = defineComponent({
       [
         // @ts-ignore
         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"])
       ]
@@ -4521,6 +4669,8 @@ const VDateRangePicker = 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"])
         ]
@@ -4581,6 +4731,11 @@ const VDateRangePicker = defineComponent({
       [
         // @ts-ignore
         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"])
       ]
@@ -4793,6 +4948,8 @@ const VDateTimePicker = 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"])
         ]
@@ -4849,6 +5006,11 @@ const VDateTimePicker = defineComponent({
       [
         // @ts-ignore
         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"])
       ]
@@ -6093,6 +6255,8 @@ const VFilePicker = 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"])
         ]
@@ -6146,6 +6310,11 @@ const VFilePicker = defineComponent({
       [
         // @ts-ignore
         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"])
       ]
@@ -7932,6 +8101,8 @@ const VNumberField = 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"])
         ]
@@ -7998,6 +8169,11 @@ const VNumberField = defineComponent({
       [
         // @ts-ignore
         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"])
       ]
@@ -8362,43 +8538,53 @@ const VPagination = defineComponent({
   }
 });
 
-const VProgress = defineComponent({
-  name: "VProgress",
+const VPopover = 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: [
     /**
@@ -8411,6 +8597,11 @@ const VProgress = defineComponent({
      * @type {MouseEvent}
      */
     "click",
+    /**
+     * Fired when the popover closes.
+     * @type {CustomEvent}
+     */
+    "close",
     /**
      * Fires when the element receives focus.
      * @type {FocusEvent}
@@ -8430,11 +8621,47 @@ const VProgress = 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", registerProgress);
+    const componentName = registerComponent("popover", registerPopover);
     const element = ref(null);
     return { componentName, element };
   },
@@ -8445,13 +8672,14 @@ const VProgress = 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: {
@@ -8461,6 +8689,9 @@ const VProgress = defineComponent({
             click: (event) => {
               this.$emit("click", event);
             },
+            close: (event) => {
+              this.$emit("close", event);
+            },
             focus: (event) => {
               this.$emit("focus", event);
             },
@@ -8472,10 +8703,19 @@ const VProgress = 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 h(
@@ -8484,13 +8724,14 @@ const VProgress = 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 } : {}
+          ...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);
@@ -8498,6 +8739,9 @@ const VProgress = defineComponent({
         onClick: (event) => {
           this.$emit("click", event);
         },
+        onClose: (event) => {
+          this.$emit("close", event);
+        },
         onFocus: (event) => {
           this.$emit("focus", event);
         },
@@ -8509,19 +8753,29 @@ const VProgress = defineComponent({
         },
         onKeyup: (event) => {
           this.$emit("keyup", event);
+        },
+        onOpen: (event) => {
+          this.$emit("open", event);
         }
       },
       [
         // @ts-ignore
-        this.$slots.default && this.$slots.default()
+        this.$slots.default && 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 VProgressRing = defineComponent({
-  name: "VProgressRing",
+const VProgress = defineComponent({
+  name: "VProgress",
   props: {
+    /**
+     * Indicates the progress' connotation.
+     */
     connotation: {
       type: String,
       default: void 0
@@ -8538,8 +8792,15 @@ const VProgressRing = defineComponent({
      * Indicates the progress is paused
      */
     paused: { type: Boolean, default: void 0 },
-    size: {
-      type: Number,
+    /**
+     * Indicates the progress' reverse status.
+     */
+    reverse: { type: Boolean, default: void 0 },
+    /**
+     * Indicates the progress' shape.
+     */
+    shape: {
+      type: String,
       default: void 0
     },
     /**
@@ -8581,9 +8842,156 @@ const VProgressRing = defineComponent({
   ],
   methods: {},
   setup(props, ctx) {
-    const componentName = registerComponent(
-      "progress-ring",
-      registerProgressRing
+    const componentName = registerComponent("progress", registerProgress);
+    const element = ref(null);
+    return { componentName, element };
+  },
+  render() {
+    if (isVue2) {
+      return 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 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) => {
+          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 && this.$slots.default()
+      ]
+    );
+  }
+});
+
+const VProgressRing = defineComponent({
+  name: "VProgressRing",
+  props: {
+    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 },
+    size: {
+      type: Number,
+      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-ring",
+      registerProgressRing
     );
     const element = ref(null);
     return { componentName, element };
@@ -9554,107 +9962,13 @@ const VRichTextEditor = defineComponent({
   }
 });
 
-const VSearchableSelect = defineComponent({
-  name: "VSearchableSelect",
-  model: isVue2 ? {
-    prop: "modelValue",
-    event: "update:modelValue"
-  } : void 0,
+const VRichTextView = 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.
-     */
-    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,
-      default: void 0
-    },
-    placeholder: { type: String, default: void 0 },
-    /**
-     * Require the field to be completed prior to form submission.
-     */
-    required: { type: Boolean, default: void 0 },
-    /**
-     * Overrides the default "Select All" text
-     */
-    selectAllText: { type: String, default: void 0 },
-    shape: { type: String, default: void 0 },
-    /**
-     * Provides a custom success message. Any current error state will be overridden.
-     */
-    successText: { type: String, default: void 0 },
-    /**
-     * The current value of the element.
-     */
-    value: { type: String, default: void 0 },
-    /**
-     * The current value of the element.
-     */
-    modelValue: { type: String, default: void 0 },
-    /**
-     * List of selected option values.
+     * The view to display, created from the RteConfig.
      */
-    values: { type: Array, default: void 0 }
+    view: { type: null, default: void 0 }
   },
   emits: [
     /**
@@ -9662,11 +9976,6 @@ const VSearchableSelect = defineComponent({
      * @type {FocusEvent}
      */
     "blur",
-    /**
-     * Fired when the selected options change
-     * @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}
@@ -9678,9 +9987,225 @@ const VSearchableSelect = defineComponent({
      */
     "focus",
     /**
-     * Fired when the selected options change
-     * @type {CustomEvent<undefined>}
-     */
+     * 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(
+      "rich-text-view",
+      registerRichTextView
+    );
+    const element = ref(null);
+    return { componentName, element };
+  },
+  render() {
+    if (isVue2) {
+      return 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);
+            }
+          }
+        },
+        [this.$slots.default]
+      );
+    }
+    return 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);
+        }
+      },
+      [
+        // @ts-ignore
+        this.$slots.default && this.$slots.default()
+      ]
+    );
+  }
+});
+
+const VSearchableSelect = 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,
+      default: void 0
+    },
+    placeholder: { type: String, default: void 0 },
+    /**
+     * Require the field to be completed prior to form submission.
+     */
+    required: { type: Boolean, default: void 0 },
+    /**
+     * Overrides the default "Select All" text
+     */
+    selectAllText: { type: String, default: void 0 },
+    shape: { type: String, default: void 0 },
+    /**
+     * Provides a custom success message. Any current error state will be overridden.
+     */
+    successText: { type: String, default: void 0 },
+    /**
+     * The current value of the element.
+     */
+    value: { type: String, default: void 0 },
+    /**
+     * The current value of the element.
+     */
+    modelValue: { type: String, default: void 0 },
+    /**
+     * List of selected option values.
+     */
+    values: { type: Array, default: void 0 }
+  },
+  emits: [
+    /**
+     * Fires when the element loses focus.
+     * @type {FocusEvent}
+     */
+    "blur",
+    /**
+     * Fired when the selected options change
+     * @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",
+    /**
+     * Fired when the selected options change
+     * @type {CustomEvent<undefined>}
+     */
     "input",
     /**
      * Fires when a key is pressed.
@@ -9800,6 +10325,8 @@ const VSearchableSelect = 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.
@@ -9879,6 +10406,11 @@ const VSearchableSelect = defineComponent({
       [
         // @ts-ignore
         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"]),
         // @slot icon The preferred way to add an icon to the control.
@@ -10126,6 +10658,8 @@ const VSelect = 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.
@@ -10186,6 +10720,11 @@ const VSelect = defineComponent({
       [
         // @ts-ignore
         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"]),
         // @slot icon The preferred way to add an icon to the select control.
@@ -11192,9 +11731,842 @@ const VSplitButton = 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 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 && this.$slots.default(),
+        // @slot icon The preferred way to add an icon to the component.
+        handleNamedSlotV3("icon", this.$slots["icon"])
+      ]
+    );
+  }
+});
+
+const VSwitch = 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", registerSwitch);
+    const element = ref(null);
+    return { componentName, element };
+  },
+  render() {
+    if (isVue2) {
+      return 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 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 && this.$slots.default()
+      ]
+    );
+  }
+});
+
+const VTab = 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", registerTab);
+    const element = ref(null);
+    return { componentName, element };
+  },
+  render() {
+    if (isVue2) {
+      return 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 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 && this.$slots.default(),
+        // @slot icon The preferred way to add an icon to the component.
+        handleNamedSlotV3("icon", this.$slots["icon"])
+      ]
+    );
+  }
+});
+
+const VTabPanel = 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", registerTabPanel);
+    const element = ref(null);
+    return { componentName, element };
+  },
+  render() {
+    if (isVue2) {
+      return 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 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 && this.$slots.default()
+      ]
+    );
+  }
+});
+
+const VTable = 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", registerDataTable);
+    const element = ref(null);
+    return { componentName, element };
+  },
+  render() {
+    if (isVue2) {
+      return 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 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 && this.$slots.default()
+      ]
+    );
+  }
+});
+
+const VTableBody = 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", registerDataTable);
+    const element = ref(null);
+    return { componentName, element };
+  },
+  render() {
+    if (isVue2) {
+      return 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 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 && this.$slots.default()
+      ]
+    );
+  }
+});
+
+const VTableCell = 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", registerDataTable);
+    const element = ref(null);
+    return { componentName, element };
+  },
+  render() {
+    if (isVue2) {
+      return h(
+        this.componentName,
+        {
+          ref: "element",
+          attrs: {},
+          class: "vvd-component",
+          on: {
             blur: (event) => {
               this.$emit("blur", event);
             },
@@ -11204,9 +12576,6 @@ const VSplitButton = defineComponent({
             focus: (event) => {
               this.$emit("focus", event);
             },
-            "indicator-click": (event) => {
-              this.$emit("indicator-click", event);
-            },
             input: (event) => {
               this.$emit("input", event);
             },
@@ -11218,11 +12587,7 @@ const VSplitButton = 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 h(
@@ -11230,20 +12595,7 @@ const VSplitButton = 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);
         },
@@ -11253,9 +12605,6 @@ const VSplitButton = defineComponent({
         onFocus: (event) => {
           this.$emit("focus", event);
         },
-        onIndicatorClick: (event) => {
-          this.$emit("indicator-click", event);
-        },
         onInput: (event) => {
           this.$emit("input", event);
         },
@@ -11268,82 +12617,20 @@ const VSplitButton = 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 && this.$slots.default()
       ]
     );
   }
 });
 
-const VSwitch = 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 = 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}
@@ -11368,30 +12655,11 @@ const VSwitch = 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", registerSwitch);
+    const componentName = registerComponent("table-head", registerDataTable);
     const element = ref(null);
     return { componentName, element };
   },
@@ -11401,27 +12669,12 @@ const VSwitch = 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);
             },
@@ -11447,25 +12700,10 @@ const VSwitch = 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);
         },
@@ -11490,46 +12728,8 @@ const VSwitch = defineComponent({
   }
 });
 
-const VTab = 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 = defineComponent({
+  name: "VTableHeaderCell",
   emits: [
     /**
      * Fires when the element loses focus.
@@ -11562,16 +12762,12 @@ const VTab = 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", registerTab);
+    const componentName = registerComponent(
+      "table-header-cell",
+      registerDataTable
+    );
     const element = ref(null);
     return { componentName, element };
   },
@@ -11581,16 +12777,7 @@ const VTab = 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) => {
@@ -11613,11 +12800,7 @@ const VTab = 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 h(
@@ -11625,16 +12808,7 @@ const VTab = 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);
         },
@@ -11656,16 +12830,14 @@ const VTab = 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 && this.$slots.default()
       ]
     );
   }
 });
 
-const VTabPanel = defineComponent({
-  name: "VTabPanel",
+const VTableRow = defineComponent({
+  name: "VTableRow",
   emits: [
     /**
      * Fires when the element loses focus.
@@ -11700,7 +12872,7 @@ const VTabPanel = defineComponent({
   ],
   methods: {},
   setup(props, ctx) {
-    const componentName = registerComponent("tab-panel", registerTabPanel);
+    const componentName = registerComponent("table-row", registerDataTable);
     const element = ref(null);
     return { componentName, element };
   },
@@ -11901,7 +13073,11 @@ const VTabs = defineComponent({
             }
           }
         },
-        [this.$slots.default]
+        [
+          this.$slots.default,
+          // @slot action-items Slot for action items such as buttons or controls.
+          handleNamedSlotV2("action-items", this.$slots["action-items"])
+        ]
       );
     }
     return h(
@@ -11942,7 +13118,9 @@ const VTabs = defineComponent({
       },
       [
         // @ts-ignore
-        this.$slots.default && 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"])
       ]
     );
   }
@@ -12502,6 +13680,8 @@ const VTextArea = 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"])
         ]
@@ -12562,6 +13742,11 @@ const VTextArea = defineComponent({
       [
         // @ts-ignore
         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"])
       ]
@@ -12830,6 +14015,8 @@ const VTextField = 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.
@@ -12901,6 +14088,11 @@ const VTextField = defineComponent({
         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"]),
+        // @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"]),
         // @slot leading-action-items Used to add action items to the start of the text-field.
@@ -13095,6 +14287,8 @@ const VTimePicker = 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"])
         ]
@@ -13147,6 +14341,11 @@ const VTimePicker = defineComponent({
       [
         // @ts-ignore
         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"])
       ]
@@ -14237,6 +15436,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";
@@ -14251,6 +15452,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";
@@ -15302,4 +16505,4 @@ const vividVue = {
 };
 const vivid3 = vividVue;
 
-export { Icon, VAccordion, VAccordionItem, VActionGroup, VAlert, VAudioPlayer, VAvatar, VBadge, VBanner, VBreadcrumb, VBreadcrumbItem, VButton, VCalendar, VCalendarEvent, VCard, VCheckbox, VColorPicker, VCombobox, VDataGrid, VDataGridCell, VDataGridRow, VDatePicker, VDateRangePicker, VDateTimePicker, VDialPad, VDialog, VDivider, VEmptyState, VFab, VFilePicker, VHeader, VIcon, VLayout, VMenu, VMenuItem, VNav, VNavDisclosure, VNavItem, VNote, VNumberField, VOption, VPagination, VProgress, VProgressRing, VRadio, VRadioGroup, VRangeSlider, VRichTextEditor, VSearchableSelect, VSelect, VSelectableBox, VSideDrawer, VSimpleColorPicker, VSlider, VSplitButton, VSwitch, VTab, VTabPanel, VTabs, VTag, VTagGroup, VTextArea, VTextField, VTimePicker, VToggletip, VTooltip, VTreeItem, VTreeView, VVideoPlayer, optionalStyles, setCustomComponentPrefix, vivid3, vividVue };
+export { Icon, VAccordion, VAccordionItem, VActionGroup, VAlert, VAudioPlayer, VAvatar, VBadge, VBanner, VBreadcrumb, VBreadcrumbItem, VButton, VCalendar, VCalendarEvent, VCard, VCheckbox, VColorPicker, VCombobox, VContextualHelp, VDataGrid, VDataGridCell, VDataGridRow, VDatePicker, VDateRangePicker, VDateTimePicker, VDialPad, VDialog, VDivider, VEmptyState, VFab, VFilePicker, VHeader, VIcon, VLayout, VMenu, VMenuItem, VNav, VNavDisclosure, VNavItem, VNote, VNumberField, VOption, VPagination, VPopover, VProgress, VProgressRing, VRadio, VRadioGroup, VRangeSlider, VRichTextEditor, VRichTextView, VSearchableSelect, VSelect, VSelectableBox, VSideDrawer, VSimpleColorPicker, VSlider, VSplitButton, VSwitch, VTab, VTabPanel, VTable, VTableBody, VTableCell, VTableHead, VTableHeaderCell, VTableRow, VTabs, VTag, VTagGroup, VTextArea, VTextField, VTimePicker, VToggletip, VTooltip, VTreeItem, VTreeView, VVideoPlayer, optionalStyles, setCustomComponentPrefix, vivid3, vividVue };