@vonage/vivid-vue 5.8.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, registerContextualHelp, 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.
@@ -4378,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"])
         ]
@@ -4427,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"])
       ]
@@ -4648,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"])
         ]
@@ -4708,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"])
       ]
@@ -4920,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"])
         ]
@@ -4976,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"])
       ]
@@ -6220,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"])
         ]
@@ -6273,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"])
       ]
@@ -8059,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"])
         ]
@@ -8125,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"])
       ]
@@ -8489,6 +8538,238 @@ const VPagination = defineComponent({
   }
 });
 
+const VPopover = defineComponent({
+  name: "VPopover",
+  props: {
+    /**
+     * Sets the color-scheme to alternate (dark/light)
+     */
+    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
+    },
+    /**
+     * Sets the layout of the popover.
+     */
+    layout: {
+      type: String,
+      default: void 0
+    },
+    /**
+     * If true, the popover uses manual dismissal (no light-dismiss).
+     * Adds a close button to the UI.
+     */
+    manual: { type: Boolean, default: void 0 },
+    /**
+     * Sets the offset between popover and the anchor element.
+     */
+    offset: { type: Number, default: void 0 },
+    /**
+     * Indicates if the popover is currently open.
+     * Can be set declaratively to open/close the popover.
+     * Automatically updates when the user dismisses the popover.
+     */
+    open: { type: Boolean, default: void 0 },
+    /**
+     * The placement of the popover relative to the anchor.
+     */
+    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",
+    /**
+     * Fired when the popover closes.
+     * @type {CustomEvent}
+     */
+    "close",
+    /**
+     * 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",
+    /**
+     * Fired when the popover opens.
+     * @type {CustomEvent}
+     */
+    "open"
+  ],
+  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("popover", registerPopover);
+    const element = ref(null);
+    return { componentName, element };
+  },
+  render() {
+    if (isVue2) {
+      return h(
+        this.componentName,
+        {
+          ref: "element",
+          attrs: {
+            ...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: {
+            blur: (event) => {
+              this.$emit("blur", event);
+            },
+            click: (event) => {
+              this.$emit("click", event);
+            },
+            close: (event) => {
+              this.$emit("close", 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);
+            },
+            open: (event) => {
+              this.$emit("open", event);
+            }
+          }
+        },
+        [
+          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(
+      this.componentName,
+      {
+        ref: "element",
+        class: "vvd-component",
+        ...handleVue3Props({
+          ...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 && 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 = defineComponent({
   name: "VProgress",
   props: {
@@ -9681,62 +9962,179 @@ 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.
+     * The view to display, created from the RteConfig.
      */
-    enableSelectAll: { type: Boolean, default: void 0 },
+    view: { type: null, default: void 0 }
+  },
+  emits: [
     /**
-     * Provides a custom error message. Any current error state will be overridden.
+     * Fires when the element loses focus.
+     * @type {FocusEvent}
      */
-    errorText: { type: String, default: void 0 },
-    externalTags: { type: Boolean, default: void 0 },
-    fixedDropdown: { type: Boolean, default: void 0 },
+    "blur",
     /**
-     * Provides additional information to help the user enter the correct information.
-     * To add HTML to the helper text, use the helper-text slot instead.
+     * 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}
      */
-    helperText: { type: String, default: void 0 },
+    "click",
     /**
-     * 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 receives focus.
+     * @type {FocusEvent}
      */
-    icon: { type: String, default: void 0 },
+    "focus",
     /**
-     * Indicates the icon affix alignment.
+     * Fires when the value of an element has been changed.
+     * @type {Event}
      */
-    iconTrailing: { type: Boolean, default: void 0 },
+    "input",
     /**
-     * The default value of the element. This value sets the `value` property
-     * only when the `value` property has not been explicitly set.
+     * Fires when a key is pressed.
+     * @type {KeyboardEvent}
      */
-    initialValue: { type: String, default: void 0 },
+    "keydown",
     /**
-     * The label for the form element.
+     * Fires when a key is released.
+     * @type {KeyboardEvent}
      */
-    label: { type: String, default: void 0 },
+    "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.
      */
@@ -9927,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.
@@ -10006,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.
@@ -10253,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.
@@ -10313,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.
@@ -11896,58 +12308,14 @@ const VTabPanel = defineComponent({
   }
 });
 
-const VTabs = defineComponent({
-  name: "VTabs",
-  props: {
-    /**
-     * The id of the active tab
-     */
-    activeid: { type: String, default: void 0 },
-    /**
-     * Deprecated attribute. It has no effect.
-     */
-    activeindicator: { type: Boolean, default: void 0 },
-    /**
-     * The connotation the tabs should have.
-     */
-    connotation: {
-      type: String,
-      default: void 0
-    },
-    /**
-     * sets the initial preferred margin from predefined available options
-     */
-    gutters: { type: String, default: void 0 },
-    /**
-     * The orientation
-     */
-    orientation: {
-      type: String,
-      default: void 0
-    },
-    /**
-     * sets overflow to the tab-panel
-     */
-    scrollablePanel: { type: Boolean, default: void 0 },
-    /**
-     * Controls the layout of the tabs.
-     */
-    tabsLayout: {
-      type: String,
-      default: void 0
-    }
-  },
+const VTable = defineComponent({
+  name: "VTable",
   emits: [
     /**
      * Fires when the element loses focus.
      * @type {FocusEvent}
      */
     "blur",
-    /**
-     * Fires a custom 'change' event when a tab is clicked or during keyboard navigation
-     * @type {CustomEvent<HTMLElement>}
-     */
-    "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}
@@ -11974,17 +12342,9 @@ const VTabs = defineComponent({
      */
     "keyup"
   ],
-  methods: {
-    /**
-     * Adjusts the active index by numerical increments.
-     * Only enabled tabs are considered.
-     */
-    adjust(adjustment) {
-      return this.element?.adjust(adjustment);
-    }
-  },
+  methods: {},
   setup(props, ctx) {
-    const componentName = registerComponent("tabs", registerTabs);
+    const componentName = registerComponent("table", registerDataTable);
     const element = ref(null);
     return { componentName, element };
   },
@@ -11994,23 +12354,12 @@ const VTabs = defineComponent({
         this.componentName,
         {
           ref: "element",
-          attrs: {
-            ...this.activeid !== void 0 ? { activeid: this.activeid } : {},
-            ...this.activeindicator !== void 0 ? { activeindicator: this.activeindicator } : {},
-            ...this.connotation !== void 0 ? { connotation: this.connotation } : {},
-            ...this.gutters !== void 0 ? { gutters: this.gutters } : {},
-            ...this.orientation !== void 0 ? { orientation: this.orientation } : {},
-            ...this.scrollablePanel !== void 0 ? { "scrollable-panel": this.scrollablePanel } : {},
-            ...this.tabsLayout !== void 0 ? { "tabs-layout": this.tabsLayout } : {}
-          },
+          attrs: {},
           class: "vvd-component",
           on: {
             blur: (event) => {
               this.$emit("blur", event);
             },
-            change: (event) => {
-              this.$emit("change", event);
-            },
             click: (event) => {
               this.$emit("click", event);
             },
@@ -12028,11 +12377,7 @@ const VTabs = defineComponent({
             }
           }
         },
-        [
-          this.$slots.default,
-          // @slot action-items Slot for action items such as buttons or controls.
-          handleNamedSlotV2("action-items", this.$slots["action-items"])
-        ]
+        [this.$slots.default]
       );
     }
     return h(
@@ -12040,21 +12385,10 @@ const VTabs = defineComponent({
       {
         ref: "element",
         class: "vvd-component",
-        ...handleVue3Props({
-          ...this.activeid !== void 0 ? { "^activeid": this.activeid } : {},
-          ...this.activeindicator !== void 0 && this.activeindicator !== false ? { "^activeindicator": this.activeindicator } : {},
-          ...this.connotation !== void 0 ? { "^connotation": this.connotation } : {},
-          ...this.gutters !== void 0 ? { "^gutters": this.gutters } : {},
-          ...this.orientation !== void 0 ? { "^orientation": this.orientation } : {},
-          ...this.scrollablePanel !== void 0 && this.scrollablePanel !== false ? { "^scrollable-panel": this.scrollablePanel } : {},
-          ...this.tabsLayout !== void 0 ? { "^tabs-layout": this.tabsLayout } : {}
-        }),
+        ...handleVue3Props({}),
         onBlur: (event) => {
           this.$emit("blur", event);
         },
-        onChange: (event) => {
-          this.$emit("change", event);
-        },
         onClick: (event) => {
           this.$emit("click", event);
         },
@@ -12073,39 +12407,750 @@ const VTabs = defineComponent({
       },
       [
         // @ts-ignore
-        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"])
+        this.$slots.default && this.$slots.default()
       ]
     );
   }
 });
 
-const VTag = defineComponent({
-  name: "VTag",
-  props: {
+const VTableBody = defineComponent({
+  name: "VTableBody",
+  emits: [
     /**
-     * The appearance the tag should have.
+     * Fires when the element loses focus.
+     * @type {FocusEvent}
      */
-    appearance: {
-      type: String,
-      default: void 0
-    },
+    "blur",
     /**
-     * The connotation the tag should have.
+     * 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}
      */
-    connotation: {
-      type: String,
-      default: void 0
-    },
+    "click",
     /**
-     * indicates whether the tag is disabled
+     * Fires when the element receives focus.
+     * @type {FocusEvent}
      */
-    disabled: { type: Boolean, default: void 0 },
+    "focus",
     /**
-     * A decorative icon the custom element should have.
-     * See the Vivid Icon Gallery for available icons: https://icons.vivid.vonage.com/
-     */
+     * 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);
+            },
+            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 VTableHead = defineComponent({
+  name: "VTableHead",
+  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-head", 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 VTableHeaderCell = defineComponent({
+  name: "VTableHeaderCell",
+  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-header-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);
+            },
+            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 VTableRow = defineComponent({
+  name: "VTableRow",
+  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-row", 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 VTabs = defineComponent({
+  name: "VTabs",
+  props: {
+    /**
+     * The id of the active tab
+     */
+    activeid: { type: String, default: void 0 },
+    /**
+     * Deprecated attribute. It has no effect.
+     */
+    activeindicator: { type: Boolean, default: void 0 },
+    /**
+     * The connotation the tabs should have.
+     */
+    connotation: {
+      type: String,
+      default: void 0
+    },
+    /**
+     * sets the initial preferred margin from predefined available options
+     */
+    gutters: { type: String, default: void 0 },
+    /**
+     * The orientation
+     */
+    orientation: {
+      type: String,
+      default: void 0
+    },
+    /**
+     * sets overflow to the tab-panel
+     */
+    scrollablePanel: { type: Boolean, default: void 0 },
+    /**
+     * Controls the layout of the tabs.
+     */
+    tabsLayout: {
+      type: String,
+      default: void 0
+    }
+  },
+  emits: [
+    /**
+     * Fires when the element loses focus.
+     * @type {FocusEvent}
+     */
+    "blur",
+    /**
+     * Fires a custom 'change' event when a tab is clicked or during keyboard navigation
+     * @type {CustomEvent<HTMLElement>}
+     */
+    "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"
+  ],
+  methods: {
+    /**
+     * Adjusts the active index by numerical increments.
+     * Only enabled tabs are considered.
+     */
+    adjust(adjustment) {
+      return this.element?.adjust(adjustment);
+    }
+  },
+  setup(props, ctx) {
+    const componentName = registerComponent("tabs", registerTabs);
+    const element = ref(null);
+    return { componentName, element };
+  },
+  render() {
+    if (isVue2) {
+      return h(
+        this.componentName,
+        {
+          ref: "element",
+          attrs: {
+            ...this.activeid !== void 0 ? { activeid: this.activeid } : {},
+            ...this.activeindicator !== void 0 ? { activeindicator: this.activeindicator } : {},
+            ...this.connotation !== void 0 ? { connotation: this.connotation } : {},
+            ...this.gutters !== void 0 ? { gutters: this.gutters } : {},
+            ...this.orientation !== void 0 ? { orientation: this.orientation } : {},
+            ...this.scrollablePanel !== void 0 ? { "scrollable-panel": this.scrollablePanel } : {},
+            ...this.tabsLayout !== void 0 ? { "tabs-layout": this.tabsLayout } : {}
+          },
+          class: "vvd-component",
+          on: {
+            blur: (event) => {
+              this.$emit("blur", event);
+            },
+            change: (event) => {
+              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,
+          // @slot action-items Slot for action items such as buttons or controls.
+          handleNamedSlotV2("action-items", this.$slots["action-items"])
+        ]
+      );
+    }
+    return h(
+      this.componentName,
+      {
+        ref: "element",
+        class: "vvd-component",
+        ...handleVue3Props({
+          ...this.activeid !== void 0 ? { "^activeid": this.activeid } : {},
+          ...this.activeindicator !== void 0 && this.activeindicator !== false ? { "^activeindicator": this.activeindicator } : {},
+          ...this.connotation !== void 0 ? { "^connotation": this.connotation } : {},
+          ...this.gutters !== void 0 ? { "^gutters": this.gutters } : {},
+          ...this.orientation !== void 0 ? { "^orientation": this.orientation } : {},
+          ...this.scrollablePanel !== void 0 && this.scrollablePanel !== false ? { "^scrollable-panel": this.scrollablePanel } : {},
+          ...this.tabsLayout !== void 0 ? { "^tabs-layout": this.tabsLayout } : {}
+        }),
+        onBlur: (event) => {
+          this.$emit("blur", event);
+        },
+        onChange: (event) => {
+          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(),
+        // @slot action-items Slot for action items such as buttons or controls.
+        handleNamedSlotV3("action-items", this.$slots["action-items"])
+      ]
+    );
+  }
+});
+
+const VTag = defineComponent({
+  name: "VTag",
+  props: {
+    /**
+     * The appearance the tag should have.
+     */
+    appearance: {
+      type: String,
+      default: void 0
+    },
+    /**
+     * The connotation the tag should have.
+     */
+    connotation: {
+      type: String,
+      default: void 0
+    },
+    /**
+     * indicates whether the tag is disabled
+     */
+    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 tag's label.
@@ -12635,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"])
         ]
@@ -12695,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"])
       ]
@@ -12963,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.
@@ -13034,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.
@@ -13228,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"])
         ]
@@ -13280,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"])
       ]
@@ -14370,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";
@@ -14384,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";
@@ -15435,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, 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, 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 };