npm - @vonage/vivid-vue - Versions diffs - 5.7.0 → 5.9.0 - Mend

@vonage/vivid-vue 5.7.0 → 5.9.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (101) hide show

package/dist/index.cjs CHANGED Viewed

@@ -3178,6 +3178,8 @@ const VColorPicker = vue.defineComponent({
         },
         [
           this.$slots.default,
+          // @slot contextual-help Slot for the contextual-help component, displayed next to the label.
+          handleNamedSlotV2("contextual-help", this.$slots["contextual-help"]),
           // @slot helper-text Describes how to use the text-field. Alternative to the `helper-text` attribute.
           handleNamedSlotV2("helper-text", this.$slots["helper-text"]),
           // @slot popup-text Overrides the default "Color Picker" title of the Popup window.
@@ -3235,6 +3237,11 @@ const VColorPicker = vue.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.
@@ -3487,6 +3494,8 @@ const VCombobox = vue.defineComponent({
         },
         [
           this.$slots.default,
+          // @slot contextual-help Slot for the contextual-help component, displayed next to the label.
+          handleNamedSlotV2("contextual-help", this.$slots["contextual-help"]),
           // @slot helper-text Describes how to use the combobox. Alternative to the `helper-text` attribute.
           handleNamedSlotV2("helper-text", this.$slots["helper-text"]),
           // @slot icon The preferred way to add an icon to the combobox control.
@@ -3547,6 +3556,11 @@ const VCombobox = vue.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.
@@ -3558,6 +3572,133 @@ const VCombobox = vue.defineComponent({
   }
 });
+const VContextualHelp = vue.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",
+      vivid.registerContextualHelp
+    );
+    const element = vue.ref(null);
+    return { componentName, element };
+  },
+  render() {
+    if (isVue2) {
+      return vue.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 vue.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 = vue.defineComponent({
   name: "VDataGrid",
   props: {
@@ -4255,6 +4396,8 @@ const VDatePicker = vue.defineComponent({
         },
         [
           this.$slots.default,
+          // @slot contextual-help Slot for the contextual-help component, displayed next to the label.
+          handleNamedSlotV2("contextual-help", this.$slots["contextual-help"]),
           // @slot helper-text Describes how to use the date-picker. Alternative to the `helper-text` attribute.
           handleNamedSlotV2("helper-text", this.$slots["helper-text"])
         ]
@@ -4304,6 +4447,11 @@ const VDatePicker = vue.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"])
       ]
@@ -4525,6 +4673,8 @@ const VDateRangePicker = vue.defineComponent({
         },
         [
           this.$slots.default,
+          // @slot contextual-help Slot for the contextual-help component, displayed next to the label.
+          handleNamedSlotV2("contextual-help", this.$slots["contextual-help"]),
           // @slot helper-text Describes how to use the date-range-picker. Alternative to the `helper-text` attribute.
           handleNamedSlotV2("helper-text", this.$slots["helper-text"])
         ]
@@ -4585,6 +4735,11 @@ const VDateRangePicker = vue.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"])
       ]
@@ -4797,6 +4952,8 @@ const VDateTimePicker = vue.defineComponent({
         },
         [
           this.$slots.default,
+          // @slot contextual-help Slot for the contextual-help component, displayed next to the label.
+          handleNamedSlotV2("contextual-help", this.$slots["contextual-help"]),
           // @slot helper-text Describes how to use the date-picker. Alternative to the `helper-text` attribute.
           handleNamedSlotV2("helper-text", this.$slots["helper-text"])
         ]
@@ -4853,6 +5010,11 @@ const VDateTimePicker = vue.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"])
       ]
@@ -6097,6 +6259,8 @@ const VFilePicker = vue.defineComponent({
         },
         [
           this.$slots.default,
+          // @slot contextual-help Slot for the contextual-help component, displayed next to the label.
+          handleNamedSlotV2("contextual-help", this.$slots["contextual-help"]),
           // @slot helper-text Describes how to use the file-picker. Alternative to the `helper-text` attribute.
           handleNamedSlotV2("helper-text", this.$slots["helper-text"])
         ]
@@ -6150,6 +6314,11 @@ const VFilePicker = vue.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"])
       ]
@@ -7936,6 +8105,8 @@ const VNumberField = vue.defineComponent({
         },
         [
           this.$slots.default,
+          // @slot contextual-help Slot for the contextual-help component, displayed next to the label.
+          handleNamedSlotV2("contextual-help", this.$slots["contextual-help"]),
           // @slot helper-text Describes how to use the number-field. Alternative to the `helper-text` attribute.
           handleNamedSlotV2("helper-text", this.$slots["helper-text"])
         ]
@@ -8002,6 +8173,11 @@ const VNumberField = vue.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"])
       ]
@@ -8366,43 +8542,53 @@ const VPagination = vue.defineComponent({
   }
 });
-const VProgress = vue.defineComponent({
-  name: "VProgress",
+const VPopover = vue.defineComponent({
+  name: "VPopover",
   props: {
     /**
-     * Indicates the progress' connotation.
+     * Sets the color-scheme to alternate (dark/light)
      */
-    connotation: {
+    alternate: { type: Boolean, default: void 0 },
+    /**
+     * Whether to render the arrow tip.
+     */
+    arrow: { type: Boolean, default: void 0 },
+    /**
+     * Overrides the default Dismiss button's aria-label.
+     */
+    dismissButtonAriaLabel: {
       type: String,
       default: void 0
     },
     /**
-     * The maximum value
+     * Sets the layout of the popover.
      */
-    max: { type: Number, default: void 0 },
+    layout: {
+      type: String,
+      default: void 0
+    },
     /**
-     * The minimum value
+     * If true, the popover uses manual dismissal (no light-dismiss).
+     * Adds a close button to the UI.
      */
-    min: { type: Number, default: void 0 },
+    manual: { type: Boolean, default: void 0 },
     /**
-     * Indicates the progress is paused
+     * Sets the offset between popover and the anchor element.
      */
-    paused: { type: Boolean, default: void 0 },
+    offset: { type: Number, default: void 0 },
     /**
-     * Indicates the progress' reverse status.
+     * Indicates if the popover is currently open.
+     * Can be set declaratively to open/close the popover.
+     * Automatically updates when the user dismisses the popover.
      */
-    reverse: { type: Boolean, default: void 0 },
+    open: { type: Boolean, default: void 0 },
     /**
-     * Indicates the progress' shape.
+     * The placement of the popover relative to the anchor.
      */
-    shape: {
+    placement: {
       type: String,
       default: void 0
-    },
-    /**
-     * The value of the progress
-     */
-    value: { type: Number, default: void 0 }
+    }
   },
   emits: [
     /**
@@ -8415,6 +8601,11 @@ const VProgress = vue.defineComponent({
      * @type {MouseEvent}
      */
     "click",
+    /**
+     * Fired when the popover closes.
+     * @type {CustomEvent}
+     */
+    "close",
     /**
      * Fires when the element receives focus.
      * @type {FocusEvent}
@@ -8434,11 +8625,47 @@ const VProgress = vue.defineComponent({
      * Fires when a key is released.
      * @type {KeyboardEvent}
      */
-    "keyup"
+    "keyup",
+    /**
+     * Fired when the popover opens.
+     * @type {CustomEvent}
+     */
+    "open"
   ],
-  methods: {},
+  methods: {
+    _slottedAnchorChanged() {
+      return this.element?._slottedAnchorChanged();
+    },
+    anchorChanged() {
+      return this.element?.anchorChanged();
+    },
+    arrowChanged() {
+      return this.element?.arrowChanged();
+    },
+    hide() {
+      return this.element?.hide();
+    },
+    openChanged(_oldValue, newValue) {
+      return this.element?.openChanged(_oldValue, newValue);
+    },
+    placementChanged() {
+      return this.element?.placementChanged();
+    },
+    show() {
+      return this.element?.show();
+    },
+    toggle() {
+      return this.element?.toggle();
+    },
+    /**
+     * Updates the position of the popover
+     */
+    updatePosition() {
+      return this.element?.updatePosition();
+    }
+  },
   setup(props, ctx) {
-    const componentName = registerComponent("progress", vivid.registerProgress);
+    const componentName = registerComponent("popover", vivid.registerPopover);
     const element = vue.ref(null);
     return { componentName, element };
   },
@@ -8449,13 +8676,14 @@ const VProgress = vue.defineComponent({
         {
           ref: "element",
           attrs: {
-            ...this.connotation !== void 0 ? { connotation: this.connotation } : {},
-            ...this.max !== void 0 ? { max: this.max } : {},
-            ...this.min !== void 0 ? { min: this.min } : {},
-            ...this.paused !== void 0 ? { paused: this.paused } : {},
-            ...this.reverse !== void 0 ? { reverse: this.reverse } : {},
-            ...this.shape !== void 0 ? { shape: this.shape } : {},
-            ...this.value !== void 0 ? { value: this.value } : {}
+            ...this.alternate !== void 0 ? { alternate: this.alternate } : {},
+            ...this.arrow !== void 0 ? { arrow: this.arrow } : {},
+            ...this.dismissButtonAriaLabel !== void 0 ? { "dismiss-button-aria-label": this.dismissButtonAriaLabel } : {},
+            ...this.layout !== void 0 ? { layout: this.layout } : {},
+            ...this.manual !== void 0 ? { manual: this.manual } : {},
+            ...this.offset !== void 0 ? { offset: this.offset } : {},
+            ...this.open !== void 0 ? { open: this.open } : {},
+            ...this.placement !== void 0 ? { placement: this.placement } : {}
           },
           class: "vvd-component",
           on: {
@@ -8465,6 +8693,9 @@ const VProgress = vue.defineComponent({
             click: (event) => {
               this.$emit("click", event);
             },
+            close: (event) => {
+              this.$emit("close", event);
+            },
             focus: (event) => {
               this.$emit("focus", event);
             },
@@ -8476,10 +8707,19 @@ const VProgress = vue.defineComponent({
             },
             keyup: (event) => {
               this.$emit("keyup", event);
+            },
+            open: (event) => {
+              this.$emit("open", event);
             }
           }
         },
-        [this.$slots.default]
+        [
+          this.$slots.default,
+          // @slot anchor Slot for the trigger element.
+          handleNamedSlotV2("anchor", this.$slots["anchor"]),
+          // @slot footer Use the footer slot in order to add action buttons or other contents to the bottom of the dialog.
+          handleNamedSlotV2("footer", this.$slots["footer"])
+        ]
       );
     }
     return vue.h(
@@ -8488,13 +8728,14 @@ const VProgress = vue.defineComponent({
         ref: "element",
         class: "vvd-component",
         ...handleVue3Props({
-          ...this.connotation !== void 0 ? { "^connotation": this.connotation } : {},
-          ...this.max !== void 0 ? { "^max": this.max } : {},
-          ...this.min !== void 0 ? { "^min": this.min } : {},
-          ...this.paused !== void 0 && this.paused !== false ? { "^paused": this.paused } : {},
-          ...this.reverse !== void 0 && this.reverse !== false ? { "^reverse": this.reverse } : {},
-          ...this.shape !== void 0 ? { "^shape": this.shape } : {},
-          ...this.value !== void 0 ? { "^value": this.value } : {}
+          ...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);
@@ -8502,6 +8743,9 @@ const VProgress = vue.defineComponent({
         onClick: (event) => {
           this.$emit("click", event);
         },
+        onClose: (event) => {
+          this.$emit("close", event);
+        },
         onFocus: (event) => {
           this.$emit("focus", event);
         },
@@ -8513,19 +8757,29 @@ const VProgress = vue.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 = vue.defineComponent({
-  name: "VProgressRing",
+const VProgress = vue.defineComponent({
+  name: "VProgress",
   props: {
+    /**
+     * Indicates the progress' connotation.
+     */
     connotation: {
       type: String,
       default: void 0
@@ -8542,8 +8796,15 @@ const VProgressRing = vue.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
     },
     /**
@@ -8585,9 +8846,156 @@ const VProgressRing = vue.defineComponent({
   ],
   methods: {},
   setup(props, ctx) {
-    const componentName = registerComponent(
-      "progress-ring",
-      vivid.registerProgressRing
+    const componentName = registerComponent("progress", vivid.registerProgress);
+    const element = vue.ref(null);
+    return { componentName, element };
+  },
+  render() {
+    if (isVue2) {
+      return vue.h(
+        this.componentName,
+        {
+          ref: "element",
+          attrs: {
+            ...this.connotation !== void 0 ? { connotation: this.connotation } : {},
+            ...this.max !== void 0 ? { max: this.max } : {},
+            ...this.min !== void 0 ? { min: this.min } : {},
+            ...this.paused !== void 0 ? { paused: this.paused } : {},
+            ...this.reverse !== void 0 ? { reverse: this.reverse } : {},
+            ...this.shape !== void 0 ? { shape: this.shape } : {},
+            ...this.value !== void 0 ? { value: this.value } : {}
+          },
+          class: "vvd-component",
+          on: {
+            blur: (event) => {
+              this.$emit("blur", event);
+            },
+            click: (event) => {
+              this.$emit("click", event);
+            },
+            focus: (event) => {
+              this.$emit("focus", event);
+            },
+            input: (event) => {
+              this.$emit("input", event);
+            },
+            keydown: (event) => {
+              this.$emit("keydown", event);
+            },
+            keyup: (event) => {
+              this.$emit("keyup", event);
+            }
+          }
+        },
+        [this.$slots.default]
+      );
+    }
+    return vue.h(
+      this.componentName,
+      {
+        ref: "element",
+        class: "vvd-component",
+        ...handleVue3Props({
+          ...this.connotation !== void 0 ? { "^connotation": this.connotation } : {},
+          ...this.max !== void 0 ? { "^max": this.max } : {},
+          ...this.min !== void 0 ? { "^min": this.min } : {},
+          ...this.paused !== void 0 && this.paused !== false ? { "^paused": this.paused } : {},
+          ...this.reverse !== void 0 && this.reverse !== false ? { "^reverse": this.reverse } : {},
+          ...this.shape !== void 0 ? { "^shape": this.shape } : {},
+          ...this.value !== void 0 ? { "^value": this.value } : {}
+        }),
+        onBlur: (event) => {
+          this.$emit("blur", event);
+        },
+        onClick: (event) => {
+          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 = vue.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",
+      vivid.registerProgressRing
     );
     const element = vue.ref(null);
     return { componentName, element };
@@ -9558,107 +9966,13 @@ const VRichTextEditor = vue.defineComponent({
   }
 });
-const VSearchableSelect = vue.defineComponent({
-  name: "VSearchableSelect",
-  model: isVue2 ? {
-    prop: "modelValue",
-    event: "update:modelValue"
-  } : void 0,
+const VRichTextView = vue.defineComponent({
+  name: "VRichTextView",
   props: {
-    appearance: {
-      type: String,
-      default: void 0
-    },
-    /**
-     * Adds a clear button to the input field that clears the selected values.
-     */
-    clearable: { type: Boolean, default: void 0 },
-    /**
-     * Overrides the default "Deselect All" text
-     */
-    deselectAllText: { type: String, default: void 0 },
-    /**
-     * Sets the element's disabled state. A disabled element will not be included during form submission.
-     */
-    disabled: { type: Boolean, default: void 0 },
-    /**
-     * Adds a "Select All" option at the top of the options list.
-     */
-    enableSelectAll: { type: Boolean, default: void 0 },
-    /**
-     * Provides a custom error message. Any current error state will be overridden.
-     */
-    errorText: { type: String, default: void 0 },
-    externalTags: { type: Boolean, default: void 0 },
-    fixedDropdown: { type: Boolean, default: void 0 },
-    /**
-     * Provides additional information to help the user enter the correct information.
-     * To add HTML to the helper text, use the helper-text slot instead.
-     */
-    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: [
     /**
@@ -9666,11 +9980,6 @@ const VSearchableSelect = vue.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}
@@ -9682,9 +9991,225 @@ const VSearchableSelect = vue.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",
+      vivid.registerRichTextView
+    );
+    const element = vue.ref(null);
+    return { componentName, element };
+  },
+  render() {
+    if (isVue2) {
+      return vue.h(
+        this.componentName,
+        {
+          ref: "element",
+          attrs: {},
+          class: "vvd-component",
+          domProps: { ...this.view !== void 0 ? { view: this.view } : {} },
+          on: {
+            blur: (event) => {
+              this.$emit("blur", event);
+            },
+            click: (event) => {
+              this.$emit("click", event);
+            },
+            focus: (event) => {
+              this.$emit("focus", event);
+            },
+            input: (event) => {
+              this.$emit("input", event);
+            },
+            keydown: (event) => {
+              this.$emit("keydown", event);
+            },
+            keyup: (event) => {
+              this.$emit("keyup", event);
+            }
+          }
+        },
+        [this.$slots.default]
+      );
+    }
+    return vue.h(
+      this.componentName,
+      {
+        ref: "element",
+        class: "vvd-component",
+        ...handleVue3Props({
+          ...this.view !== void 0 ? { ".view": this.view } : {}
+        }),
+        onBlur: (event) => {
+          this.$emit("blur", event);
+        },
+        onClick: (event) => {
+          this.$emit("click", event);
+        },
+        onFocus: (event) => {
+          this.$emit("focus", event);
+        },
+        onInput: (event) => {
+          this.$emit("input", event);
+        },
+        onKeydown: (event) => {
+          this.$emit("keydown", event);
+        },
+        onKeyup: (event) => {
+          this.$emit("keyup", event);
+        }
+      },
+      [
+        // @ts-ignore
+        this.$slots.default && this.$slots.default()
+      ]
+    );
+  }
+});
+const VSearchableSelect = vue.defineComponent({
+  name: "VSearchableSelect",
+  model: isVue2 ? {
+    prop: "modelValue",
+    event: "update:modelValue"
+  } : void 0,
+  props: {
+    appearance: {
+      type: String,
+      default: void 0
+    },
+    /**
+     * Adds a clear button to the input field that clears the selected values.
+     */
+    clearable: { type: Boolean, default: void 0 },
+    /**
+     * Overrides the default "Deselect All" text
+     */
+    deselectAllText: { type: String, default: void 0 },
+    /**
+     * Sets the element's disabled state. A disabled element will not be included during form submission.
+     */
+    disabled: { type: Boolean, default: void 0 },
+    /**
+     * Adds a "Select All" option at the top of the options list.
+     */
+    enableSelectAll: { type: Boolean, default: void 0 },
+    /**
+     * Provides a custom error message. Any current error state will be overridden.
+     */
+    errorText: { type: String, default: void 0 },
+    externalTags: { type: Boolean, default: void 0 },
+    fixedDropdown: { type: Boolean, default: void 0 },
+    /**
+     * Provides additional information to help the user enter the correct information.
+     * To add HTML to the helper text, use the helper-text slot instead.
+     */
+    helperText: { type: String, default: void 0 },
+    /**
+     * A decorative icon the custom element should have.
+     * See the Vivid Icon Gallery for available icons: https://icons.vivid.vonage.com/
+     */
+    icon: { type: String, default: void 0 },
+    /**
+     * Indicates the icon affix alignment.
+     */
+    iconTrailing: { type: Boolean, default: void 0 },
+    /**
+     * The default value of the element. This value sets the `value` property
+     * only when the `value` property has not been explicitly set.
+     */
+    initialValue: { type: String, default: void 0 },
+    /**
+     * The label for the form element.
+     */
+    label: { type: String, default: void 0 },
+    /**
+     * Whether the component is in a loading state.
+     */
+    loading: { type: Boolean, default: void 0 },
+    maxLines: { type: Number, default: void 0 },
+    maxSelected: { type: Number, default: void 0 },
+    multiple: { type: Boolean, default: void 0 },
+    /**
+     * The name of the element. This element's value will be surfaced during form submission under the provided name.
+     */
+    name: { type: String, default: void 0 },
+    open: { type: Boolean, default: void 0 },
+    /**
+     * Function to filter the options to display.
+     */
+    optionFilter: {
+      type: null,
+      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.
@@ -9804,6 +10329,8 @@ const VSearchableSelect = vue.defineComponent({
         },
         [
           this.$slots.default,
+          // @slot contextual-help Slot for the contextual-help component, displayed next to the label.
+          handleNamedSlotV2("contextual-help", this.$slots["contextual-help"]),
           // @slot helper-text Describes how to use the component. Alternative to the `helper-text` attribute.
           handleNamedSlotV2("helper-text", this.$slots["helper-text"]),
           // @slot icon The preferred way to add an icon to the control.
@@ -9883,6 +10410,11 @@ const VSearchableSelect = vue.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.
@@ -10130,6 +10662,8 @@ const VSelect = vue.defineComponent({
         },
         [
           this.$slots.default,
+          // @slot contextual-help Slot for the contextual-help component, displayed next to the label.
+          handleNamedSlotV2("contextual-help", this.$slots["contextual-help"]),
           // @slot helper-text Describes how to use the select. Alternative to the `helper-text` attribute.
           handleNamedSlotV2("helper-text", this.$slots["helper-text"]),
           // @slot icon The preferred way to add an icon to the select control.
@@ -10190,6 +10724,11 @@ const VSelect = vue.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.
@@ -11196,9 +11735,842 @@ const VSplitButton = vue.defineComponent({
           },
           class: "vvd-component",
           on: {
-            "action-click": (event) => {
-              this.$emit("action-click", event);
-            },
+            "action-click": (event) => {
+              this.$emit("action-click", event);
+            },
+            blur: (event) => {
+              this.$emit("blur", event);
+            },
+            click: (event) => {
+              this.$emit("click", event);
+            },
+            focus: (event) => {
+              this.$emit("focus", event);
+            },
+            "indicator-click": (event) => {
+              this.$emit("indicator-click", event);
+            },
+            input: (event) => {
+              this.$emit("input", event);
+            },
+            keydown: (event) => {
+              this.$emit("keydown", event);
+            },
+            keyup: (event) => {
+              this.$emit("keyup", event);
+            }
+          }
+        },
+        [
+          this.$slots.default,
+          // @slot icon The preferred way to add an icon to the component.
+          handleNamedSlotV2("icon", this.$slots["icon"])
+        ]
+      );
+    }
+    return vue.h(
+      this.componentName,
+      {
+        ref: "element",
+        class: "vvd-component",
+        ...handleVue3Props({
+          ...this.appearance !== void 0 ? { "^appearance": this.appearance } : {},
+          ...this.connotation !== void 0 ? { "^connotation": this.connotation } : {},
+          ...this.disabled !== void 0 && this.disabled !== false ? { "^disabled": this.disabled } : {},
+          ...this.icon !== void 0 ? { "^icon": this.icon } : {},
+          ...this.indicatorAriaLabel !== void 0 ? { "^indicator-aria-label": this.indicatorAriaLabel } : {},
+          ...this.label !== void 0 ? { "^label": this.label } : {},
+          ...this.shape !== void 0 ? { "^shape": this.shape } : {},
+          ...this.size !== void 0 ? { "^size": this.size } : {},
+          ...this.splitIndicator !== void 0 ? { "^split-indicator": this.splitIndicator } : {}
+        }),
+        onActionClick: (event) => {
+          this.$emit("action-click", event);
+        },
+        onBlur: (event) => {
+          this.$emit("blur", event);
+        },
+        onClick: (event) => {
+          this.$emit("click", event);
+        },
+        onFocus: (event) => {
+          this.$emit("focus", event);
+        },
+        onIndicatorClick: (event) => {
+          this.$emit("indicator-click", event);
+        },
+        onInput: (event) => {
+          this.$emit("input", event);
+        },
+        onKeydown: (event) => {
+          this.$emit("keydown", event);
+        },
+        onKeyup: (event) => {
+          this.$emit("keyup", event);
+        }
+      },
+      [
+        // @ts-ignore
+        this.$slots.default && this.$slots.default(),
+        // @slot icon The preferred way to add an icon to the component.
+        handleNamedSlotV3("icon", this.$slots["icon"])
+      ]
+    );
+  }
+});
+const VSwitch = vue.defineComponent({
+  name: "VSwitch",
+  model: isVue2 ? {
+    prop: "modelValue",
+    event: "update:modelValue"
+  } : void 0,
+  props: {
+    /**
+     * The current checkedness of the element.
+     */
+    checked: { type: Boolean, default: void 0 },
+    /**
+     * The current checkedness of the element.
+     */
+    modelValue: { type: Boolean, default: void 0 },
+    /**
+     * Indicates the switch's connotation.
+     */
+    connotation: {
+      type: String,
+      default: void 0
+    },
+    /**
+     * The default checkedness of the element. This value sets the `checked` property
+     * only when the `checked` property has not been explicitly set.
+     */
+    defaultChecked: { type: Boolean, default: void 0 },
+    /**
+     * Sets the element's disabled state. A disabled element will not be included during form submission.
+     */
+    disabled: { type: Boolean, default: void 0 },
+    /**
+     * The default value of the element. This value sets the `value` property
+     * only when the `value` property has not been explicitly set.
+     */
+    initialValue: { type: String, default: void 0 },
+    /**
+     * Indicates the switch's label.
+     */
+    label: { type: String, default: void 0 },
+    /**
+     * The name of the element. This element's value will be surfaced during form submission under the provided name.
+     */
+    name: { type: String, default: void 0 },
+    /**
+     * When true, the control will be immutable by user interaction. See https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly | readonly HTML attribute for more information.
+     */
+    readonly: { type: Boolean, default: void 0 },
+    /**
+     * Require the field to be completed prior to form submission.
+     */
+    required: { type: Boolean, default: void 0 },
+    /**
+     * The current value of the element.
+     */
+    value: { type: String, default: void 0 }
+  },
+  emits: [
+    /**
+     * Fires when the element loses focus.
+     * @type {FocusEvent}
+     */
+    "blur",
+    /**
+     * Emits a custom change event when the checked state changes
+     * @type {CustomEvent<undefined>}
+     */
+    "change",
+    /**
+     * Fires when a pointing device button (such as a mouse's primary mouse button) is both pressed and released while the pointer is located inside the element.
+     * @type {MouseEvent}
+     */
+    "click",
+    /**
+     * Fires when the element receives focus.
+     * @type {FocusEvent}
+     */
+    "focus",
+    /**
+     * Fires when the value of an element has been changed.
+     * @type {Event}
+     */
+    "input",
+    /**
+     * Fires when a key is pressed.
+     * @type {KeyboardEvent}
+     */
+    "keydown",
+    /**
+     * Fires when a key is released.
+     * @type {KeyboardEvent}
+     */
+    "keyup",
+    /**
+     * Fires when the modelValue value changes
+     * @type {boolean}
+     */
+    "update:modelValue"
+  ],
+  methods: {
+    /**
+     * Return the current validity of the element.
+     */
+    checkValidity() {
+      return this.element?.checkValidity();
+    },
+    /**
+     * Return the current validity of the element.
+     * If false, fires an invalid event at the element.
+     */
+    reportValidity() {
+      return this.element?.reportValidity();
+    }
+  },
+  setup(props, ctx) {
+    const componentName = registerComponent("switch", vivid.registerSwitch);
+    const element = vue.ref(null);
+    return { componentName, element };
+  },
+  render() {
+    if (isVue2) {
+      return vue.h(
+        this.componentName,
+        {
+          ref: "element",
+          attrs: {
+            ...(this.modelValue ?? this.checked) !== void 0 ? { "current-checked": this.modelValue ?? this.checked } : {},
+            ...this.connotation !== void 0 ? { connotation: this.connotation } : {},
+            ...this.defaultChecked !== void 0 ? { checked: this.defaultChecked } : {},
+            ...this.disabled !== void 0 ? { disabled: this.disabled } : {},
+            ...this.initialValue !== void 0 ? { value: this.initialValue } : {},
+            ...this.label !== void 0 ? { label: this.label } : {},
+            ...this.name !== void 0 ? { name: this.name } : {},
+            ...this.readonly !== void 0 ? { readonly: this.readonly } : {},
+            ...this.required !== void 0 ? { required: this.required } : {},
+            ...this.value !== void 0 ? { "current-value": this.value } : {}
+          },
+          class: "vvd-component",
+          on: {
+            blur: (event) => {
+              this.$emit("blur", event);
+            },
+            change: (event) => {
+              this.$emit("update:modelValue", event.currentTarget.checked);
+              this.$emit("change", event);
+            },
+            click: (event) => {
+              this.$emit("click", event);
+            },
+            focus: (event) => {
+              this.$emit("focus", event);
+            },
+            input: (event) => {
+              this.$emit("input", event);
+            },
+            keydown: (event) => {
+              this.$emit("keydown", event);
+            },
+            keyup: (event) => {
+              this.$emit("keyup", event);
+            }
+          }
+        },
+        [this.$slots.default]
+      );
+    }
+    return vue.h(
+      this.componentName,
+      {
+        ref: "element",
+        class: "vvd-component",
+        ...handleVue3Props({
+          ...(this.modelValue ?? this.checked) !== void 0 && (this.modelValue ?? this.checked) !== false ? { "^current-checked": this.modelValue ?? this.checked } : {},
+          ...this.connotation !== void 0 ? { "^connotation": this.connotation } : {},
+          ...this.defaultChecked !== void 0 && this.defaultChecked !== false ? { "^checked": this.defaultChecked } : {},
+          ...this.disabled !== void 0 && this.disabled !== false ? { "^disabled": this.disabled } : {},
+          ...this.initialValue !== void 0 ? { "^value": this.initialValue } : {},
+          ...this.label !== void 0 ? { "^label": this.label } : {},
+          ...this.name !== void 0 ? { "^name": this.name } : {},
+          ...this.readonly !== void 0 && this.readonly !== false ? { "^readonly": this.readonly } : {},
+          ...this.required !== void 0 && this.required !== false ? { "^required": this.required } : {},
+          ...this.value !== void 0 ? { "^current-value": this.value } : {}
+        }),
+        onBlur: (event) => {
+          this.$emit("blur", event);
+        },
+        onChange: (event) => {
+          this.$emit("update:modelValue", event.currentTarget.checked);
+          this.$emit("change", event);
+        },
+        onClick: (event) => {
+          this.$emit("click", event);
+        },
+        onFocus: (event) => {
+          this.$emit("focus", event);
+        },
+        onInput: (event) => {
+          this.$emit("input", event);
+        },
+        onKeydown: (event) => {
+          this.$emit("keydown", event);
+        },
+        onKeyup: (event) => {
+          this.$emit("keyup", event);
+        }
+      },
+      [
+        // @ts-ignore
+        this.$slots.default && this.$slots.default()
+      ]
+    );
+  }
+});
+const VTab = vue.defineComponent({
+  name: "VTab",
+  props: {
+    /**
+     * The connotation the tab should have.
+     */
+    connotation: {
+      type: String,
+      default: void 0
+    },
+    /**
+     * When true, the control will be immutable by user interaction. See https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled | disabled HTML attribute for more information.
+     */
+    disabled: { type: Boolean, default: void 0 },
+    /**
+     * A decorative icon the custom element should have.
+     * See the Vivid Icon Gallery for available icons: https://icons.vivid.vonage.com/
+     */
+    icon: { type: String, default: void 0 },
+    /**
+     * Indicates the icon affix alignment.
+     */
+    iconTrailing: { type: Boolean, default: void 0 },
+    /**
+     * Indicates the tab's label.
+     */
+    label: { type: String, default: void 0 },
+    /**
+     * Adds a close button
+     */
+    removable: { type: Boolean, default: void 0 },
+    /**
+     * The shape the tab should have.
+     */
+    shape: {
+      type: String,
+      default: void 0
+    },
+    tabIndex: { type: Number, default: void 0 }
+  },
+  emits: [
+    /**
+     * Fires when the element loses focus.
+     * @type {FocusEvent}
+     */
+    "blur",
+    /**
+     * Fires when a pointing device button (such as a mouse's primary mouse button) is both pressed and released while the pointer is located inside the element.
+     * @type {MouseEvent}
+     */
+    "click",
+    /**
+     * Fires when the element receives focus.
+     * @type {FocusEvent}
+     */
+    "focus",
+    /**
+     * Fires when the value of an element has been changed.
+     * @type {Event}
+     */
+    "input",
+    /**
+     * Fires when a key is pressed.
+     * @type {KeyboardEvent}
+     */
+    "keydown",
+    /**
+     * Fires when a key is released.
+     * @type {KeyboardEvent}
+     */
+    "keyup"
+  ],
+  methods: {
+    _handleCloseClick(e) {
+      return this.element?._handleCloseClick(e);
+    },
+    _onKeyDown(e) {
+      return this.element?._onKeyDown(e);
+    }
+  },
+  setup(props, ctx) {
+    const componentName = registerComponent("tab", vivid.registerTab);
+    const element = vue.ref(null);
+    return { componentName, element };
+  },
+  render() {
+    if (isVue2) {
+      return vue.h(
+        this.componentName,
+        {
+          ref: "element",
+          attrs: {
+            ...this.connotation !== void 0 ? { connotation: this.connotation } : {},
+            ...this.disabled !== void 0 ? { disabled: this.disabled } : {},
+            ...this.icon !== void 0 ? { icon: this.icon } : {},
+            ...this.iconTrailing !== void 0 ? { "icon-trailing": this.iconTrailing } : {},
+            ...this.label !== void 0 ? { label: this.label } : {},
+            ...this.removable !== void 0 ? { removable: this.removable } : {},
+            ...this.shape !== void 0 ? { shape: this.shape } : {},
+            ...this.tabIndex !== void 0 ? { tabIndex: this.tabIndex } : {}
+          },
+          class: "vvd-component",
+          on: {
+            blur: (event) => {
+              this.$emit("blur", event);
+            },
+            click: (event) => {
+              this.$emit("click", event);
+            },
+            focus: (event) => {
+              this.$emit("focus", event);
+            },
+            input: (event) => {
+              this.$emit("input", event);
+            },
+            keydown: (event) => {
+              this.$emit("keydown", event);
+            },
+            keyup: (event) => {
+              this.$emit("keyup", event);
+            }
+          }
+        },
+        [
+          this.$slots.default,
+          // @slot icon The preferred way to add an icon to the component.
+          handleNamedSlotV2("icon", this.$slots["icon"])
+        ]
+      );
+    }
+    return vue.h(
+      this.componentName,
+      {
+        ref: "element",
+        class: "vvd-component",
+        ...handleVue3Props({
+          ...this.connotation !== void 0 ? { "^connotation": this.connotation } : {},
+          ...this.disabled !== void 0 && this.disabled !== false ? { "^disabled": this.disabled } : {},
+          ...this.icon !== void 0 ? { "^icon": this.icon } : {},
+          ...this.iconTrailing !== void 0 && this.iconTrailing !== false ? { "^icon-trailing": this.iconTrailing } : {},
+          ...this.label !== void 0 ? { "^label": this.label } : {},
+          ...this.removable !== void 0 && this.removable !== false ? { "^removable": this.removable } : {},
+          ...this.shape !== void 0 ? { "^shape": this.shape } : {},
+          ...this.tabIndex !== void 0 ? { "^tabIndex": this.tabIndex } : {}
+        }),
+        onBlur: (event) => {
+          this.$emit("blur", event);
+        },
+        onClick: (event) => {
+          this.$emit("click", event);
+        },
+        onFocus: (event) => {
+          this.$emit("focus", event);
+        },
+        onInput: (event) => {
+          this.$emit("input", event);
+        },
+        onKeydown: (event) => {
+          this.$emit("keydown", event);
+        },
+        onKeyup: (event) => {
+          this.$emit("keyup", event);
+        }
+      },
+      [
+        // @ts-ignore
+        this.$slots.default && this.$slots.default(),
+        // @slot icon The preferred way to add an icon to the component.
+        handleNamedSlotV3("icon", this.$slots["icon"])
+      ]
+    );
+  }
+});
+const VTabPanel = vue.defineComponent({
+  name: "VTabPanel",
+  emits: [
+    /**
+     * Fires when the element loses focus.
+     * @type {FocusEvent}
+     */
+    "blur",
+    /**
+     * Fires when a pointing device button (such as a mouse's primary mouse button) is both pressed and released while the pointer is located inside the element.
+     * @type {MouseEvent}
+     */
+    "click",
+    /**
+     * Fires when the element receives focus.
+     * @type {FocusEvent}
+     */
+    "focus",
+    /**
+     * Fires when the value of an element has been changed.
+     * @type {Event}
+     */
+    "input",
+    /**
+     * Fires when a key is pressed.
+     * @type {KeyboardEvent}
+     */
+    "keydown",
+    /**
+     * Fires when a key is released.
+     * @type {KeyboardEvent}
+     */
+    "keyup"
+  ],
+  methods: {},
+  setup(props, ctx) {
+    const componentName = registerComponent("tab-panel", vivid.registerTabPanel);
+    const element = vue.ref(null);
+    return { componentName, element };
+  },
+  render() {
+    if (isVue2) {
+      return vue.h(
+        this.componentName,
+        {
+          ref: "element",
+          attrs: {},
+          class: "vvd-component",
+          on: {
+            blur: (event) => {
+              this.$emit("blur", event);
+            },
+            click: (event) => {
+              this.$emit("click", event);
+            },
+            focus: (event) => {
+              this.$emit("focus", event);
+            },
+            input: (event) => {
+              this.$emit("input", event);
+            },
+            keydown: (event) => {
+              this.$emit("keydown", event);
+            },
+            keyup: (event) => {
+              this.$emit("keyup", event);
+            }
+          }
+        },
+        [this.$slots.default]
+      );
+    }
+    return vue.h(
+      this.componentName,
+      {
+        ref: "element",
+        class: "vvd-component",
+        ...handleVue3Props({}),
+        onBlur: (event) => {
+          this.$emit("blur", event);
+        },
+        onClick: (event) => {
+          this.$emit("click", event);
+        },
+        onFocus: (event) => {
+          this.$emit("focus", event);
+        },
+        onInput: (event) => {
+          this.$emit("input", event);
+        },
+        onKeydown: (event) => {
+          this.$emit("keydown", event);
+        },
+        onKeyup: (event) => {
+          this.$emit("keyup", event);
+        }
+      },
+      [
+        // @ts-ignore
+        this.$slots.default && this.$slots.default()
+      ]
+    );
+  }
+});
+const VTable = vue.defineComponent({
+  name: "VTable",
+  emits: [
+    /**
+     * Fires when the element loses focus.
+     * @type {FocusEvent}
+     */
+    "blur",
+    /**
+     * Fires when a pointing device button (such as a mouse's primary mouse button) is both pressed and released while the pointer is located inside the element.
+     * @type {MouseEvent}
+     */
+    "click",
+    /**
+     * Fires when the element receives focus.
+     * @type {FocusEvent}
+     */
+    "focus",
+    /**
+     * Fires when the value of an element has been changed.
+     * @type {Event}
+     */
+    "input",
+    /**
+     * Fires when a key is pressed.
+     * @type {KeyboardEvent}
+     */
+    "keydown",
+    /**
+     * Fires when a key is released.
+     * @type {KeyboardEvent}
+     */
+    "keyup"
+  ],
+  methods: {},
+  setup(props, ctx) {
+    const componentName = registerComponent("table", vivid.registerDataTable);
+    const element = vue.ref(null);
+    return { componentName, element };
+  },
+  render() {
+    if (isVue2) {
+      return vue.h(
+        this.componentName,
+        {
+          ref: "element",
+          attrs: {},
+          class: "vvd-component",
+          on: {
+            blur: (event) => {
+              this.$emit("blur", event);
+            },
+            click: (event) => {
+              this.$emit("click", event);
+            },
+            focus: (event) => {
+              this.$emit("focus", event);
+            },
+            input: (event) => {
+              this.$emit("input", event);
+            },
+            keydown: (event) => {
+              this.$emit("keydown", event);
+            },
+            keyup: (event) => {
+              this.$emit("keyup", event);
+            }
+          }
+        },
+        [this.$slots.default]
+      );
+    }
+    return vue.h(
+      this.componentName,
+      {
+        ref: "element",
+        class: "vvd-component",
+        ...handleVue3Props({}),
+        onBlur: (event) => {
+          this.$emit("blur", event);
+        },
+        onClick: (event) => {
+          this.$emit("click", event);
+        },
+        onFocus: (event) => {
+          this.$emit("focus", event);
+        },
+        onInput: (event) => {
+          this.$emit("input", event);
+        },
+        onKeydown: (event) => {
+          this.$emit("keydown", event);
+        },
+        onKeyup: (event) => {
+          this.$emit("keyup", event);
+        }
+      },
+      [
+        // @ts-ignore
+        this.$slots.default && this.$slots.default()
+      ]
+    );
+  }
+});
+const VTableBody = vue.defineComponent({
+  name: "VTableBody",
+  emits: [
+    /**
+     * Fires when the element loses focus.
+     * @type {FocusEvent}
+     */
+    "blur",
+    /**
+     * Fires when a pointing device button (such as a mouse's primary mouse button) is both pressed and released while the pointer is located inside the element.
+     * @type {MouseEvent}
+     */
+    "click",
+    /**
+     * Fires when the element receives focus.
+     * @type {FocusEvent}
+     */
+    "focus",
+    /**
+     * Fires when the value of an element has been changed.
+     * @type {Event}
+     */
+    "input",
+    /**
+     * Fires when a key is pressed.
+     * @type {KeyboardEvent}
+     */
+    "keydown",
+    /**
+     * Fires when a key is released.
+     * @type {KeyboardEvent}
+     */
+    "keyup"
+  ],
+  methods: {},
+  setup(props, ctx) {
+    const componentName = registerComponent("table-body", vivid.registerDataTable);
+    const element = vue.ref(null);
+    return { componentName, element };
+  },
+  render() {
+    if (isVue2) {
+      return vue.h(
+        this.componentName,
+        {
+          ref: "element",
+          attrs: {},
+          class: "vvd-component",
+          on: {
+            blur: (event) => {
+              this.$emit("blur", event);
+            },
+            click: (event) => {
+              this.$emit("click", event);
+            },
+            focus: (event) => {
+              this.$emit("focus", event);
+            },
+            input: (event) => {
+              this.$emit("input", event);
+            },
+            keydown: (event) => {
+              this.$emit("keydown", event);
+            },
+            keyup: (event) => {
+              this.$emit("keyup", event);
+            }
+          }
+        },
+        [this.$slots.default]
+      );
+    }
+    return vue.h(
+      this.componentName,
+      {
+        ref: "element",
+        class: "vvd-component",
+        ...handleVue3Props({}),
+        onBlur: (event) => {
+          this.$emit("blur", event);
+        },
+        onClick: (event) => {
+          this.$emit("click", event);
+        },
+        onFocus: (event) => {
+          this.$emit("focus", event);
+        },
+        onInput: (event) => {
+          this.$emit("input", event);
+        },
+        onKeydown: (event) => {
+          this.$emit("keydown", event);
+        },
+        onKeyup: (event) => {
+          this.$emit("keyup", event);
+        }
+      },
+      [
+        // @ts-ignore
+        this.$slots.default && this.$slots.default()
+      ]
+    );
+  }
+});
+const VTableCell = vue.defineComponent({
+  name: "VTableCell",
+  emits: [
+    /**
+     * Fires when the element loses focus.
+     * @type {FocusEvent}
+     */
+    "blur",
+    /**
+     * Fires when a pointing device button (such as a mouse's primary mouse button) is both pressed and released while the pointer is located inside the element.
+     * @type {MouseEvent}
+     */
+    "click",
+    /**
+     * Fires when the element receives focus.
+     * @type {FocusEvent}
+     */
+    "focus",
+    /**
+     * Fires when the value of an element has been changed.
+     * @type {Event}
+     */
+    "input",
+    /**
+     * Fires when a key is pressed.
+     * @type {KeyboardEvent}
+     */
+    "keydown",
+    /**
+     * Fires when a key is released.
+     * @type {KeyboardEvent}
+     */
+    "keyup"
+  ],
+  methods: {},
+  setup(props, ctx) {
+    const componentName = registerComponent("table-cell", vivid.registerDataTable);
+    const element = vue.ref(null);
+    return { componentName, element };
+  },
+  render() {
+    if (isVue2) {
+      return vue.h(
+        this.componentName,
+        {
+          ref: "element",
+          attrs: {},
+          class: "vvd-component",
+          on: {
             blur: (event) => {
               this.$emit("blur", event);
             },
@@ -11208,9 +12580,6 @@ const VSplitButton = vue.defineComponent({
             focus: (event) => {
               this.$emit("focus", event);
             },
-            "indicator-click": (event) => {
-              this.$emit("indicator-click", event);
-            },
             input: (event) => {
               this.$emit("input", event);
             },
@@ -11222,11 +12591,7 @@ const VSplitButton = vue.defineComponent({
             }
           }
         },
-        [
-          this.$slots.default,
-          // @slot icon The preferred way to add an icon to the component.
-          handleNamedSlotV2("icon", this.$slots["icon"])
-        ]
+        [this.$slots.default]
       );
     }
     return vue.h(
@@ -11234,20 +12599,7 @@ const VSplitButton = vue.defineComponent({
       {
         ref: "element",
         class: "vvd-component",
-        ...handleVue3Props({
-          ...this.appearance !== void 0 ? { "^appearance": this.appearance } : {},
-          ...this.connotation !== void 0 ? { "^connotation": this.connotation } : {},
-          ...this.disabled !== void 0 && this.disabled !== false ? { "^disabled": this.disabled } : {},
-          ...this.icon !== void 0 ? { "^icon": this.icon } : {},
-          ...this.indicatorAriaLabel !== void 0 ? { "^indicator-aria-label": this.indicatorAriaLabel } : {},
-          ...this.label !== void 0 ? { "^label": this.label } : {},
-          ...this.shape !== void 0 ? { "^shape": this.shape } : {},
-          ...this.size !== void 0 ? { "^size": this.size } : {},
-          ...this.splitIndicator !== void 0 ? { "^split-indicator": this.splitIndicator } : {}
-        }),
-        onActionClick: (event) => {
-          this.$emit("action-click", event);
-        },
+        ...handleVue3Props({}),
         onBlur: (event) => {
           this.$emit("blur", event);
         },
@@ -11257,9 +12609,6 @@ const VSplitButton = vue.defineComponent({
         onFocus: (event) => {
           this.$emit("focus", event);
         },
-        onIndicatorClick: (event) => {
-          this.$emit("indicator-click", event);
-        },
         onInput: (event) => {
           this.$emit("input", event);
         },
@@ -11272,82 +12621,20 @@ const VSplitButton = vue.defineComponent({
       },
       [
         // @ts-ignore
-        this.$slots.default && this.$slots.default(),
-        // @slot icon The preferred way to add an icon to the component.
-        handleNamedSlotV3("icon", this.$slots["icon"])
+        this.$slots.default && this.$slots.default()
       ]
     );
   }
 });
-const VSwitch = vue.defineComponent({
-  name: "VSwitch",
-  model: isVue2 ? {
-    prop: "modelValue",
-    event: "update:modelValue"
-  } : void 0,
-  props: {
-    /**
-     * The current checkedness of the element.
-     */
-    checked: { type: Boolean, default: void 0 },
-    /**
-     * The current checkedness of the element.
-     */
-    modelValue: { type: Boolean, default: void 0 },
-    /**
-     * Indicates the switch's connotation.
-     */
-    connotation: {
-      type: String,
-      default: void 0
-    },
-    /**
-     * The default checkedness of the element. This value sets the `checked` property
-     * only when the `checked` property has not been explicitly set.
-     */
-    defaultChecked: { type: Boolean, default: void 0 },
-    /**
-     * Sets the element's disabled state. A disabled element will not be included during form submission.
-     */
-    disabled: { type: Boolean, default: void 0 },
-    /**
-     * The default value of the element. This value sets the `value` property
-     * only when the `value` property has not been explicitly set.
-     */
-    initialValue: { type: String, default: void 0 },
-    /**
-     * Indicates the switch's label.
-     */
-    label: { type: String, default: void 0 },
-    /**
-     * The name of the element. This element's value will be surfaced during form submission under the provided name.
-     */
-    name: { type: String, default: void 0 },
-    /**
-     * When true, the control will be immutable by user interaction. See https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly | readonly HTML attribute for more information.
-     */
-    readonly: { type: Boolean, default: void 0 },
-    /**
-     * Require the field to be completed prior to form submission.
-     */
-    required: { type: Boolean, default: void 0 },
-    /**
-     * The current value of the element.
-     */
-    value: { type: String, default: void 0 }
-  },
+const VTableHead = vue.defineComponent({
+  name: "VTableHead",
   emits: [
     /**
      * Fires when the element loses focus.
      * @type {FocusEvent}
      */
     "blur",
-    /**
-     * Emits a custom change event when the checked state changes
-     * @type {CustomEvent<undefined>}
-     */
-    "change",
     /**
      * Fires when a pointing device button (such as a mouse's primary mouse button) is both pressed and released while the pointer is located inside the element.
      * @type {MouseEvent}
@@ -11372,30 +12659,11 @@ const VSwitch = vue.defineComponent({
      * Fires when a key is released.
      * @type {KeyboardEvent}
      */
-    "keyup",
-    /**
-     * Fires when the modelValue value changes
-     * @type {boolean}
-     */
-    "update:modelValue"
+    "keyup"
   ],
-  methods: {
-    /**
-     * Return the current validity of the element.
-     */
-    checkValidity() {
-      return this.element?.checkValidity();
-    },
-    /**
-     * Return the current validity of the element.
-     * If false, fires an invalid event at the element.
-     */
-    reportValidity() {
-      return this.element?.reportValidity();
-    }
-  },
+  methods: {},
   setup(props, ctx) {
-    const componentName = registerComponent("switch", vivid.registerSwitch);
+    const componentName = registerComponent("table-head", vivid.registerDataTable);
     const element = vue.ref(null);
     return { componentName, element };
   },
@@ -11405,27 +12673,12 @@ const VSwitch = vue.defineComponent({
         this.componentName,
         {
           ref: "element",
-          attrs: {
-            ...(this.modelValue ?? this.checked) !== void 0 ? { "current-checked": this.modelValue ?? this.checked } : {},
-            ...this.connotation !== void 0 ? { connotation: this.connotation } : {},
-            ...this.defaultChecked !== void 0 ? { checked: this.defaultChecked } : {},
-            ...this.disabled !== void 0 ? { disabled: this.disabled } : {},
-            ...this.initialValue !== void 0 ? { value: this.initialValue } : {},
-            ...this.label !== void 0 ? { label: this.label } : {},
-            ...this.name !== void 0 ? { name: this.name } : {},
-            ...this.readonly !== void 0 ? { readonly: this.readonly } : {},
-            ...this.required !== void 0 ? { required: this.required } : {},
-            ...this.value !== void 0 ? { "current-value": this.value } : {}
-          },
+          attrs: {},
           class: "vvd-component",
           on: {
             blur: (event) => {
               this.$emit("blur", event);
             },
-            change: (event) => {
-              this.$emit("update:modelValue", event.currentTarget.checked);
-              this.$emit("change", event);
-            },
             click: (event) => {
               this.$emit("click", event);
             },
@@ -11451,25 +12704,10 @@ const VSwitch = vue.defineComponent({
       {
         ref: "element",
         class: "vvd-component",
-        ...handleVue3Props({
-          ...(this.modelValue ?? this.checked) !== void 0 && (this.modelValue ?? this.checked) !== false ? { "^current-checked": this.modelValue ?? this.checked } : {},
-          ...this.connotation !== void 0 ? { "^connotation": this.connotation } : {},
-          ...this.defaultChecked !== void 0 && this.defaultChecked !== false ? { "^checked": this.defaultChecked } : {},
-          ...this.disabled !== void 0 && this.disabled !== false ? { "^disabled": this.disabled } : {},
-          ...this.initialValue !== void 0 ? { "^value": this.initialValue } : {},
-          ...this.label !== void 0 ? { "^label": this.label } : {},
-          ...this.name !== void 0 ? { "^name": this.name } : {},
-          ...this.readonly !== void 0 && this.readonly !== false ? { "^readonly": this.readonly } : {},
-          ...this.required !== void 0 && this.required !== false ? { "^required": this.required } : {},
-          ...this.value !== void 0 ? { "^current-value": this.value } : {}
-        }),
+        ...handleVue3Props({}),
         onBlur: (event) => {
           this.$emit("blur", event);
         },
-        onChange: (event) => {
-          this.$emit("update:modelValue", event.currentTarget.checked);
-          this.$emit("change", event);
-        },
         onClick: (event) => {
           this.$emit("click", event);
         },
@@ -11494,46 +12732,8 @@ const VSwitch = vue.defineComponent({
   }
 });
-const VTab = vue.defineComponent({
-  name: "VTab",
-  props: {
-    /**
-     * The connotation the tab should have.
-     */
-    connotation: {
-      type: String,
-      default: void 0
-    },
-    /**
-     * When true, the control will be immutable by user interaction. See https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled | disabled HTML attribute for more information.
-     */
-    disabled: { type: Boolean, default: void 0 },
-    /**
-     * A decorative icon the custom element should have.
-     * See the Vivid Icon Gallery for available icons: https://icons.vivid.vonage.com/
-     */
-    icon: { type: String, default: void 0 },
-    /**
-     * Indicates the icon affix alignment.
-     */
-    iconTrailing: { type: Boolean, default: void 0 },
-    /**
-     * Indicates the tab's label.
-     */
-    label: { type: String, default: void 0 },
-    /**
-     * Adds a close button
-     */
-    removable: { type: Boolean, default: void 0 },
-    /**
-     * The shape the tab should have.
-     */
-    shape: {
-      type: String,
-      default: void 0
-    },
-    tabIndex: { type: Number, default: void 0 }
-  },
+const VTableHeaderCell = vue.defineComponent({
+  name: "VTableHeaderCell",
   emits: [
     /**
      * Fires when the element loses focus.
@@ -11566,16 +12766,12 @@ const VTab = vue.defineComponent({
      */
     "keyup"
   ],
-  methods: {
-    _handleCloseClick(e) {
-      return this.element?._handleCloseClick(e);
-    },
-    _onKeyDown(e) {
-      return this.element?._onKeyDown(e);
-    }
-  },
+  methods: {},
   setup(props, ctx) {
-    const componentName = registerComponent("tab", vivid.registerTab);
+    const componentName = registerComponent(
+      "table-header-cell",
+      vivid.registerDataTable
+    );
     const element = vue.ref(null);
     return { componentName, element };
   },
@@ -11585,16 +12781,7 @@ const VTab = vue.defineComponent({
         this.componentName,
         {
           ref: "element",
-          attrs: {
-            ...this.connotation !== void 0 ? { connotation: this.connotation } : {},
-            ...this.disabled !== void 0 ? { disabled: this.disabled } : {},
-            ...this.icon !== void 0 ? { icon: this.icon } : {},
-            ...this.iconTrailing !== void 0 ? { "icon-trailing": this.iconTrailing } : {},
-            ...this.label !== void 0 ? { label: this.label } : {},
-            ...this.removable !== void 0 ? { removable: this.removable } : {},
-            ...this.shape !== void 0 ? { shape: this.shape } : {},
-            ...this.tabIndex !== void 0 ? { tabIndex: this.tabIndex } : {}
-          },
+          attrs: {},
           class: "vvd-component",
           on: {
             blur: (event) => {
@@ -11617,11 +12804,7 @@ const VTab = vue.defineComponent({
             }
           }
         },
-        [
-          this.$slots.default,
-          // @slot icon The preferred way to add an icon to the component.
-          handleNamedSlotV2("icon", this.$slots["icon"])
-        ]
+        [this.$slots.default]
       );
     }
     return vue.h(
@@ -11629,16 +12812,7 @@ const VTab = vue.defineComponent({
       {
         ref: "element",
         class: "vvd-component",
-        ...handleVue3Props({
-          ...this.connotation !== void 0 ? { "^connotation": this.connotation } : {},
-          ...this.disabled !== void 0 && this.disabled !== false ? { "^disabled": this.disabled } : {},
-          ...this.icon !== void 0 ? { "^icon": this.icon } : {},
-          ...this.iconTrailing !== void 0 && this.iconTrailing !== false ? { "^icon-trailing": this.iconTrailing } : {},
-          ...this.label !== void 0 ? { "^label": this.label } : {},
-          ...this.removable !== void 0 && this.removable !== false ? { "^removable": this.removable } : {},
-          ...this.shape !== void 0 ? { "^shape": this.shape } : {},
-          ...this.tabIndex !== void 0 ? { "^tabIndex": this.tabIndex } : {}
-        }),
+        ...handleVue3Props({}),
         onBlur: (event) => {
           this.$emit("blur", event);
         },
@@ -11660,16 +12834,14 @@ const VTab = vue.defineComponent({
       },
       [
         // @ts-ignore
-        this.$slots.default && this.$slots.default(),
-        // @slot icon The preferred way to add an icon to the component.
-        handleNamedSlotV3("icon", this.$slots["icon"])
+        this.$slots.default && this.$slots.default()
       ]
     );
   }
 });
-const VTabPanel = vue.defineComponent({
-  name: "VTabPanel",
+const VTableRow = vue.defineComponent({
+  name: "VTableRow",
   emits: [
     /**
      * Fires when the element loses focus.
@@ -11704,7 +12876,7 @@ const VTabPanel = vue.defineComponent({
   ],
   methods: {},
   setup(props, ctx) {
-    const componentName = registerComponent("tab-panel", vivid.registerTabPanel);
+    const componentName = registerComponent("table-row", vivid.registerDataTable);
     const element = vue.ref(null);
     return { componentName, element };
   },
@@ -11905,7 +13077,11 @@ const VTabs = vue.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 vue.h(
@@ -11946,7 +13122,9 @@ const VTabs = vue.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"])
       ]
     );
   }
@@ -12506,6 +13684,8 @@ const VTextArea = vue.defineComponent({
         },
         [
           this.$slots.default,
+          // @slot contextual-help Slot for the contextual-help component, displayed next to the label.
+          handleNamedSlotV2("contextual-help", this.$slots["contextual-help"]),
           // @slot helper-text Describes how to use the text-area. Alternative to the `helper-text` attribute.
           handleNamedSlotV2("helper-text", this.$slots["helper-text"])
         ]
@@ -12566,6 +13746,11 @@ const VTextArea = vue.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"])
       ]
@@ -12834,6 +14019,8 @@ const VTextField = vue.defineComponent({
           this.$slots.default,
           // @slot action-items Used to add action items to the end of the text-field.
           handleNamedSlotV2("action-items", this.$slots["action-items"]),
+          // @slot contextual-help Slot for the contextual-help component, displayed next to the label.
+          handleNamedSlotV2("contextual-help", this.$slots["contextual-help"]),
           // @slot helper-text Describes how to use the text-field. Alternative to the `helper-text` attribute.
           handleNamedSlotV2("helper-text", this.$slots["helper-text"]),
           // @slot leading-action-items Used to add action items to the start of the text-field.
@@ -12905,6 +14092,11 @@ const VTextField = vue.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.
@@ -13099,6 +14291,8 @@ const VTimePicker = vue.defineComponent({
         },
         [
           this.$slots.default,
+          // @slot contextual-help Slot for the contextual-help component, displayed next to the label.
+          handleNamedSlotV2("contextual-help", this.$slots["contextual-help"]),
           // @slot helper-text Describes how to use the time-picker. Alternative to the `helper-text` attribute.
           handleNamedSlotV2("helper-text", this.$slots["helper-text"])
         ]
@@ -13151,6 +14345,11 @@ const VTimePicker = vue.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"])
       ]
@@ -14241,6 +15440,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";
@@ -14255,6 +15456,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";
@@ -15324,6 +16527,7 @@ exports.VCard = VCard;
 exports.VCheckbox = VCheckbox;
 exports.VColorPicker = VColorPicker;
 exports.VCombobox = VCombobox;
+exports.VContextualHelp = VContextualHelp;
 exports.VDataGrid = VDataGrid;
 exports.VDataGridCell = VDataGridCell;
 exports.VDataGridRow = VDataGridRow;
@@ -15348,12 +16552,14 @@ exports.VNote = VNote;
 exports.VNumberField = VNumberField;
 exports.VOption = VOption;
 exports.VPagination = VPagination;
+exports.VPopover = VPopover;
 exports.VProgress = VProgress;
 exports.VProgressRing = VProgressRing;
 exports.VRadio = VRadio;
 exports.VRadioGroup = VRadioGroup;
 exports.VRangeSlider = VRangeSlider;
 exports.VRichTextEditor = VRichTextEditor;
+exports.VRichTextView = VRichTextView;
 exports.VSearchableSelect = VSearchableSelect;
 exports.VSelect = VSelect;
 exports.VSelectableBox = VSelectableBox;
@@ -15364,6 +16570,12 @@ exports.VSplitButton = VSplitButton;
 exports.VSwitch = VSwitch;
 exports.VTab = VTab;
 exports.VTabPanel = VTabPanel;
+exports.VTable = VTable;
+exports.VTableBody = VTableBody;
+exports.VTableCell = VTableCell;
+exports.VTableHead = VTableHead;
+exports.VTableHeaderCell = VTableHeaderCell;
+exports.VTableRow = VTableRow;
 exports.VTabs = VTabs;
 exports.VTag = VTag;
 exports.VTagGroup = VTagGroup;