@vonage/vivid-vue 3.3.0 → 3.4.0

package/dist/index.es.js

@@ -1,17 +1,17 @@
-import { ref as r, version as m, onBeforeMount as v, defineComponent as d, h as n } from "vue";
-import { registerAccordion as y, registerAccordionItem as f, registerActionGroup as $, registerAvatar as k, registerBadge as g, registerBanner as b, registerBreadcrumb as C, registerBreadcrumbItem as S, registerButton as w, registerCalendar as x, registerCalendarEvent as V, registerCard as N, registerCheckbox as B, registerCombobox as T, registerDataGrid as K, registerDialog as I, registerDivider as q, registerFab as z, registerHeader as F, registerIcon as P, registerLayout as L, registerMenu as D, registerMenuItem as M, registerNav as A, registerNavDisclosure as O, registerNavItem as G, registerNote as E, registerNumberField as H, registerOption as R, registerPopup as W, registerProgress as j, registerProgressRing as U, registerRadio as J, registerRadioGroup as Q, registerSelect as X, registerSideDrawer as Y, registerSlider as Z, registerSwitch as _, registerTab as tt, registerTabs as et, registerTabPanel as it, registerTextArea as ot, registerTextField as st, registerTooltip as nt, registerTreeItem as at, registerTreeView as rt, registerTag as dt, registerTagGroup as lt } from "@vonage/vivid";
-const p = r("vvd3");
-function mt(t) {
+import { ref as d, version as m, onBeforeMount as v, defineComponent as l, h as n } from "vue";
+import { registerAccordion as y, registerAccordionItem as f, registerActionGroup as $, registerAlert as k, registerAvatar as g, registerBadge as b, registerBanner as C, registerBreadcrumb as x, registerBreadcrumbItem as S, registerButton as w, registerCalendar as V, registerCalendarEvent as N, registerCard as B, registerCheckbox as T, registerCombobox as K, registerDataGrid as I, registerDialog as z, registerDivider as F, registerEmptyState as q, registerFab as P, registerHeader as L, registerIcon as D, registerLayout as M, registerMenu as A, registerMenuItem as O, registerNav as E, registerNavDisclosure as G, registerNavItem as H, registerNote as R, registerNumberField as W, registerOption as j, registerPagination as U, registerPopup as J, registerProgress as Q, registerProgressRing as X, registerRadio as Y, registerRadioGroup as Z, registerSelect as _, registerSideDrawer as tt, registerSlider as et, registerSwitch as it, registerTab as ot, registerTabs as st, registerTabPanel as nt, registerTextArea as at, registerTextField as rt, registerToggletip as dt, registerTooltip as lt, registerTreeItem as ht, registerTreeView as ut, registerTag as ct, registerTagGroup as pt } from "@vonage/vivid";
+const p = d("vvd3");
+function $t(t) {
   p.value = t;
 }
 const a = m.startsWith("2");
-function l(t, o) {
-  const s = r(`${p.value}-${t}`);
+function h(t, o) {
+  const s = d(`${p.value}-${t}`);
   return v(() => {
     o(p.value);
   }), s;
 }
-const vt = d({
+const kt = l({
   name: "VAccordion",
   props: {
     /**
@@ -65,7 +65,7 @@ const vt = d({
     "change"
   ],
   setup(t, o) {
-    const s = l("accordion", y), e = r(null);
+    const s = h("accordion", y), e = d(null);
     return o.expose({
       closeAll() {
         var i;
@@ -115,7 +115,7 @@ const vt = d({
       ]
     );
   }
-}), yt = d({
+}), gt = l({
   name: "VAccordionItem",
   props: {
     /**
@@ -199,7 +199,7 @@ const vt = d({
     "change"
   ],
   setup(t, o) {
-    const s = l("accordion-item", f), e = r(null);
+    const s = h("accordion-item", f), e = d(null);
     return o.expose({}), { componentName: s, element: e };
   },
   render() {
@@ -260,7 +260,7 @@ const vt = d({
       ]
     );
   }
-}), ft = d({
+}), bt = l({
   name: "VActionGroup",
   props: {
     /**
@@ -318,7 +318,7 @@ const vt = d({
     "input"
   ],
   setup(t, o) {
-    const s = l("action-group", $), e = r(null);
+    const s = h("action-group", $), e = d(null);
     return o.expose({}), { componentName: s, element: e };
   },
   render() {
@@ -370,21 +370,194 @@ const vt = d({
     );
   }
 });
-function ht(t, o) {
+function mt(t, o) {
   return o.forEach((s) => {
     var e;
     s.data || (s.data = {}), s.data.attrs = { ...(e = s.data) == null ? void 0 : e.attrs, slot: t };
   }), o;
 }
-function ut(t, o) {
+function vt(t, o) {
   return o.forEach((s) => {
     s.props || (s.props = {}), s.props = { ...s.props, slot: t };
   }), o;
 }
-function h(t, o) {
-  return o ? a ? ht(t, o) : ut(t, o()) : null;
+function r(t, o) {
+  return o ? a ? mt(t, o) : vt(t, o()) : null;
 }
-const $t = d({
+const Ct = l({
+  name: "VAlert",
+  props: {
+    /**
+     * Indicates the element that represents the current item within a container or set of related elements.
+     */
+    ariaCurrent: {
+      type: String,
+      default: void 0
+    },
+    /**
+     * if the alert is removable
+     * accepts boolean
+     */
+    removable: { type: Boolean, default: void 0 },
+    /**
+     * the placement of the alert
+     */
+    placement: {
+      type: String,
+      default: void 0
+    },
+    /**
+     * the text of the alert heading
+     * accepts string
+     */
+    headline: { type: String, default: void 0 },
+    /**
+     * the main text of the alert
+     * accepts string
+     */
+    text: { type: String, default: void 0 },
+    /**
+     * alert header icon
+     * See the Vivid Icon Gallery for available icons: https://icons.vivid.vonage.com/
+     */
+    icon: {
+      type: String,
+      default: void 0
+    },
+    /**
+     * the timeout ms to show the alert
+     * accepts number
+     */
+    timeoutms: { type: Number, default: void 0 },
+    /**
+     * alert connotation
+     */
+    connotation: {
+      type: String,
+      default: void 0
+    },
+    /**
+     * indicates whether the alert is open
+     */
+    open: { type: Boolean, default: void 0 }
+  },
+  emits: [
+    /**
+     * 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 element loses focus.
+     * @type {FocusEvent}
+     */
+    "blur",
+    /**
+     * Fires when a key is pressed.
+     * @type {KeyboardEvent}
+     */
+    "keydown",
+    /**
+     * Fires when a key is released.
+     * @type {KeyboardEvent}
+     */
+    "keyup",
+    /**
+     * Fires when the value of an element has been changed.
+     * @type {Event}
+     */
+    "input",
+    /**
+     * Emitted when the alert is opened
+     * @type {unknown}
+     */
+    "open",
+    /**
+     * Emitted when the alert is closed
+     * @type {unknown}
+     */
+    "close"
+  ],
+  setup(t, o) {
+    const s = h("alert", k), e = d(null);
+    return o.expose({
+      openChanged(i, u) {
+        var c;
+        return (c = e.value) == null ? void 0 : c.openChanged(i, u);
+      }
+    }), { componentName: s, element: e };
+  },
+  render() {
+    return a ? n(
+      this.componentName,
+      {
+        ref: "element",
+        attrs: {
+          ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
+          ...this.removable !== void 0 ? { removable: this.removable } : {},
+          ...this.placement !== void 0 ? { placement: this.placement } : {},
+          ...this.headline !== void 0 ? { headline: this.headline } : {},
+          ...this.text !== void 0 ? { text: this.text } : {},
+          ...this.icon !== void 0 ? { icon: this.icon } : {},
+          ...this.timeoutms !== void 0 ? { timeoutms: this.timeoutms } : {},
+          ...this.connotation !== void 0 ? { connotation: this.connotation } : {},
+          ...this.open !== void 0 ? { open: this.open } : {}
+        },
+        class: "vvd-root",
+        on: {
+          click: (t) => this.$emit("click", t),
+          focus: (t) => this.$emit("focus", t),
+          blur: (t) => this.$emit("blur", t),
+          keydown: (t) => this.$emit("keydown", t),
+          keyup: (t) => this.$emit("keyup", t),
+          input: (t) => this.$emit("input", t),
+          open: (t) => this.$emit("open", t),
+          close: (t) => this.$emit("close", t)
+        }
+      },
+      [
+        // @slot action-items Add action items to alert using this slot.
+        r("action-items", this.$slots["action-items"]),
+        // @slot main The main content of the alert
+        r("main", this.$slots.main)
+      ]
+    ) : n(
+      this.componentName,
+      {
+        ref: "element",
+        class: "vvd-root",
+        ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
+        ...this.removable !== void 0 ? { removable: this.removable } : {},
+        ...this.placement !== void 0 ? { placement: this.placement } : {},
+        ...this.headline !== void 0 ? { headline: this.headline } : {},
+        ...this.text !== void 0 ? { text: this.text } : {},
+        ...this.icon !== void 0 ? { icon: this.icon } : {},
+        ...this.timeoutms !== void 0 ? { timeoutms: this.timeoutms } : {},
+        ...this.connotation !== void 0 ? { connotation: this.connotation } : {},
+        ...this.open !== void 0 ? { open: this.open } : {},
+        onClick: (t) => this.$emit("click", t),
+        onFocus: (t) => this.$emit("focus", t),
+        onBlur: (t) => this.$emit("blur", t),
+        onKeydown: (t) => this.$emit("keydown", t),
+        onKeyup: (t) => this.$emit("keyup", t),
+        onInput: (t) => this.$emit("input", t),
+        onOpen: (t) => this.$emit("open", t),
+        onClose: (t) => this.$emit("close", t)
+      },
+      [
+        // @slot action-items Add action items to alert using this slot.
+        r("action-items", this.$slots["action-items"]),
+        // @slot main The main content of the alert
+        r("main", this.$slots.main)
+      ]
+    );
+  }
+}), xt = l({
   name: "VAvatar",
   props: {
     /**
@@ -456,7 +629,7 @@ const $t = d({
     "input"
   ],
   setup(t, o) {
-    const s = l("avatar", k), e = r(null);
+    const s = h("avatar", g), e = d(null);
     return o.expose({}), { componentName: s, element: e };
   },
   render() {
@@ -485,7 +658,7 @@ const $t = d({
       },
       [
         // @slot graphic Assign nodes to the graphic slot to set a graphic media of any kind (e.g. image, illustration etc).
-        h("graphic", this.$slots.graphic)
+        r("graphic", this.$slots.graphic)
       ]
     ) : n(
       this.componentName,
@@ -508,11 +681,11 @@ const $t = d({
       },
       [
         // @slot graphic Assign nodes to the graphic slot to set a graphic media of any kind (e.g. image, illustration etc).
-        h("graphic", this.$slots.graphic)
+        r("graphic", this.$slots.graphic)
       ]
     );
   }
-}), kt = d({
+}), St = l({
   name: "VBadge",
   props: {
     /**
@@ -587,7 +760,7 @@ const $t = d({
     "input"
   ],
   setup(t, o) {
-    const s = l("badge", g), e = r(null);
+    const s = h("badge", b), e = d(null);
     return o.expose({}), { componentName: s, element: e };
   },
   render() {
@@ -637,7 +810,7 @@ const $t = d({
       []
     );
   }
-}), gt = d({
+}), wt = l({
   name: "VBanner",
   props: {
     /**
@@ -699,7 +872,7 @@ const $t = d({
     "input"
   ],
   setup(t, o) {
-    const s = l("banner", b), e = r(null);
+    const s = h("banner", C), e = d(null);
     return o.expose({
       remove() {
         var i;
@@ -735,7 +908,7 @@ const $t = d({
       },
       [
         // @slot action-items Add action items to banner using this slot.
-        h("action-items", this.$slots["action-items"])
+        r("action-items", this.$slots["action-items"])
       ]
     ) : n(
       this.componentName,
@@ -760,11 +933,11 @@ const $t = d({
       },
       [
         // @slot action-items Add action items to banner using this slot.
-        h("action-items", this.$slots["action-items"])
+        r("action-items", this.$slots["action-items"])
       ]
     );
   }
-}), bt = d({
+}), Vt = l({
   name: "VBreadcrumb",
   props: {
     /**
@@ -808,7 +981,7 @@ const $t = d({
     "input"
   ],
   setup(t, o) {
-    const s = l("breadcrumb", C), e = r(null);
+    const s = h("breadcrumb", x), e = d(null);
     return o.expose({}), { componentName: s, element: e };
   },
   render() {
@@ -847,7 +1020,7 @@ const $t = d({
       ]
     );
   }
-}), Ct = d({
+}), Nt = l({
   name: "VBreadcrumbItem",
   props: {
     /**
@@ -924,7 +1097,7 @@ const $t = d({
     "input"
   ],
   setup(t, o) {
-    const s = l("breadcrumb-item", S), e = r(null);
+    const s = h("breadcrumb-item", S), e = d(null);
     return o.expose({}), { componentName: s, element: e };
   },
   render() {
@@ -980,7 +1153,7 @@ const $t = d({
       []
     );
   }
-}), St = d({
+}), Bt = l({
   name: "VButton",
   props: {
     /**
@@ -1121,7 +1294,7 @@ const $t = d({
     "input"
   ],
   setup(t, o) {
-    const s = l("button", w), e = r(null);
+    const s = h("button", w), e = d(null);
     return o.expose({
       /**
        * {@inheritDoc (FormAssociated:interface).validate}
@@ -1211,7 +1384,7 @@ const $t = d({
       []
     );
   }
-}), wt = d({
+}), Tt = l({
   name: "VCalendar",
   props: {
     /**
@@ -1282,7 +1455,7 @@ const $t = d({
     "input"
   ],
   setup(t, o) {
-    const s = l("calendar", x), e = r(null);
+    const s = h("calendar", V), e = d(null);
     return o.expose({
       onKeydown(i) {
         var u;
@@ -1317,19 +1490,19 @@ const $t = d({
       [
         this.$slots.default,
         // @slot day-0 Assign elements to corresponding day column using this slot.
-        h("day-0", this.$slots["day-0"]),
+        r("day-0", this.$slots["day-0"]),
         // @slot day-1 Assign elements to corresponding day column using this slot.
-        h("day-1", this.$slots["day-1"]),
+        r("day-1", this.$slots["day-1"]),
         // @slot day-2 Assign elements to corresponding day column using this slot.
-        h("day-2", this.$slots["day-2"]),
+        r("day-2", this.$slots["day-2"]),
         // @slot day-3 Assign elements to corresponding day column using this slot.
-        h("day-3", this.$slots["day-3"]),
+        r("day-3", this.$slots["day-3"]),
         // @slot day-4 Assign elements to corresponding day column using this slot.
-        h("day-4", this.$slots["day-4"]),
+        r("day-4", this.$slots["day-4"]),
         // @slot day-5 Assign elements to corresponding day column using this slot.
-        h("day-5", this.$slots["day-5"]),
+        r("day-5", this.$slots["day-5"]),
         // @slot day-6 Assign elements to corresponding day column using this slot.
-        h("day-6", this.$slots["day-6"])
+        r("day-6", this.$slots["day-6"])
       ]
     ) : n(
       this.componentName,
@@ -1352,23 +1525,23 @@ const $t = d({
         // @ts-ignore
         this.$slots.default && this.$slots.default(),
         // @slot day-0 Assign elements to corresponding day column using this slot.
-        h("day-0", this.$slots["day-0"]),
+        r("day-0", this.$slots["day-0"]),
         // @slot day-1 Assign elements to corresponding day column using this slot.
-        h("day-1", this.$slots["day-1"]),
+        r("day-1", this.$slots["day-1"]),
         // @slot day-2 Assign elements to corresponding day column using this slot.
-        h("day-2", this.$slots["day-2"]),
+        r("day-2", this.$slots["day-2"]),
         // @slot day-3 Assign elements to corresponding day column using this slot.
-        h("day-3", this.$slots["day-3"]),
+        r("day-3", this.$slots["day-3"]),
         // @slot day-4 Assign elements to corresponding day column using this slot.
-        h("day-4", this.$slots["day-4"]),
+        r("day-4", this.$slots["day-4"]),
         // @slot day-5 Assign elements to corresponding day column using this slot.
-        h("day-5", this.$slots["day-5"]),
+        r("day-5", this.$slots["day-5"]),
         // @slot day-6 Assign elements to corresponding day column using this slot.
-        h("day-6", this.$slots["day-6"])
+        r("day-6", this.$slots["day-6"])
       ]
     );
   }
-}), xt = d({
+}), Kt = l({
   name: "VCalendarEvent",
   props: {
     /**
@@ -1443,7 +1616,7 @@ const $t = d({
     "input"
   ],
   setup(t, o) {
-    const s = l("calendar-event", V), e = r(null);
+    const s = h("calendar-event", N), e = d(null);
     return o.expose({}), { componentName: s, element: e };
   },
   render() {
@@ -1495,7 +1668,7 @@ const $t = d({
       []
     );
   }
-}), Vt = d({
+}), It = l({
   name: "VCard",
   props: {
     /**
@@ -1566,7 +1739,7 @@ const $t = d({
     "input"
   ],
   setup(t, o) {
-    const s = l("card", N), e = r(null);
+    const s = h("card", B), e = d(null);
     return o.expose({}), { componentName: s, element: e };
   },
   render() {
@@ -1594,15 +1767,15 @@ const $t = d({
       },
       [
         // @slot graphic The graphic slot overrides the icon property.
-        h("graphic", this.$slots.graphic),
+        r("graphic", this.$slots.graphic),
         // @slot media The media slot is mainly for images or video content above the card header.
-        h("media", this.$slots.media),
+        r("media", this.$slots.media),
         // @slot meta The meta slot is for action content in the card header.
-        h("meta", this.$slots.meta),
+        r("meta", this.$slots.meta),
         // @slot footer The footer slot is for content in the card footer.
-        h("footer", this.$slots.footer),
+        r("footer", this.$slots.footer),
         // @slot main Assign nodes to main slot to fully override a card's predefined flow and style with your own.
-        h("main", this.$slots.main)
+        r("main", this.$slots.main)
       ]
     ) : n(
       this.componentName,
@@ -1624,25 +1797,41 @@ const $t = d({
       },
       [
         // @slot graphic The graphic slot overrides the icon property.
-        h("graphic", this.$slots.graphic),
+        r("graphic", this.$slots.graphic),
         // @slot media The media slot is mainly for images or video content above the card header.
-        h("media", this.$slots.media),
+        r("media", this.$slots.media),
         // @slot meta The meta slot is for action content in the card header.
-        h("meta", this.$slots.meta),
+        r("meta", this.$slots.meta),
         // @slot footer The footer slot is for content in the card footer.
-        h("footer", this.$slots.footer),
+        r("footer", this.$slots.footer),
         // @slot main Assign nodes to main slot to fully override a card's predefined flow and style with your own.
-        h("main", this.$slots.main)
+        r("main", this.$slots.main)
       ]
     );
   }
-}), Nt = d({
+}), zt = l({
   name: "VCheckbox",
   model: a ? {
     prop: "modelValue",
     event: "update:modelValue"
   } : void 0,
   props: {
+    /**
+     * The success text for the form element.
+     */
+    successText: { type: String, default: void 0 },
+    /**
+     * The error text for the form element.
+     */
+    errorText: { type: String, default: void 0 },
+    /**
+     * The helper text for the form element.
+     */
+    helperText: { type: String, default: void 0 },
+    /**
+     * The label for the form element.
+     */
+    label: { type: String, default: void 0 },
     /**
      * Indicates the element that represents the current item within a container or set of related elements.
      */
@@ -1690,11 +1879,7 @@ const $t = d({
     /**
      * 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 },
-    /**
-     * Indicates the checkbox's label.
-     */
-    label: { type: String, default: void 0 }
+    readonly: { type: Boolean, default: void 0 }
   },
   emits: [
     /**
@@ -1734,7 +1919,7 @@ const $t = d({
     "update:modelValue"
   ],
   setup(t, o) {
-    const s = l("checkbox", B), e = r(null);
+    const s = h("checkbox", T), e = d(null);
     return o.expose({}), { componentName: s, element: e };
   },
   render() {
@@ -1743,6 +1928,10 @@ const $t = d({
       {
         ref: "element",
         attrs: {
+          ...this.successText !== void 0 ? { "success-text": this.successText } : {},
+          ...this.errorText !== void 0 ? { "error-text": this.errorText } : {},
+          ...this.helperText !== void 0 ? { "helper-text": this.helperText } : {},
+          ...this.label !== void 0 ? { label: this.label } : {},
           ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
           ...this.disabled !== void 0 ? { disabled: this.disabled } : {},
           ...this.value !== void 0 ? { value: this.value } : {},
@@ -1751,8 +1940,7 @@ const $t = d({
           ...this.required !== void 0 ? { required: this.required } : {},
           ...this.checked !== void 0 ? { checked: this.checked } : {},
           ...this.modelValue !== void 0 ? { "current-checked": this.modelValue } : {},
-          ...this.readonly !== void 0 ? { readonly: this.readonly } : {},
-          ...this.label !== void 0 ? { label: this.label } : {}
+          ...this.readonly !== void 0 ? { readonly: this.readonly } : {}
         },
         class: "vvd-root",
         on: {
@@ -1771,6 +1959,10 @@ const $t = d({
       {
         ref: "element",
         class: "vvd-root",
+        ...this.successText !== void 0 ? { "success-text": this.successText } : {},
+        ...this.errorText !== void 0 ? { "error-text": this.errorText } : {},
+        ...this.helperText !== void 0 ? { "helper-text": this.helperText } : {},
+        ...this.label !== void 0 ? { label: this.label } : {},
         ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
         ...this.disabled !== void 0 ? { disabled: this.disabled } : {},
         ...this.value !== void 0 ? { value: this.value } : {},
@@ -1780,7 +1972,6 @@ const $t = d({
         ...this.checked !== void 0 ? { checked: this.checked } : {},
         ...this.modelValue !== void 0 ? { "current-checked": this.modelValue } : {},
         ...this.readonly !== void 0 ? { readonly: this.readonly } : {},
-        ...this.label !== void 0 ? { label: this.label } : {},
         onClick: (t) => this.$emit("click", t),
         onFocus: (t) => this.$emit("focus", t),
         onBlur: (t) => this.$emit("blur", t),
@@ -1792,7 +1983,7 @@ const $t = d({
       []
     );
   }
-}), Bt = d({
+}), Ft = l({
   name: "VCombobox",
   model: a ? {
     prop: "modelValue",
@@ -1904,7 +2095,7 @@ const $t = d({
     "update:modelValue"
   ],
   setup(t, o) {
-    const s = l("combobox", T), e = r(null);
+    const s = h("combobox", K), e = d(null);
     return o.expose({
       /**
        * {@inheritDoc (FormAssociated:interface).validate}
@@ -2007,7 +2198,7 @@ const $t = d({
       ]
     );
   }
-}), Tt = d({
+}), qt = l({
   name: "VDataGrid",
   props: {
     /**
@@ -2052,8 +2243,13 @@ const $t = d({
     "input"
   ],
   setup(t, o) {
-    const s = l("data-grid", K), e = r(null);
-    return o.expose({}), { componentName: s, element: e };
+    const s = h("data-grid", I), e = d(null);
+    return o.expose({
+      selectionModeChanged(i) {
+        var u;
+        return (u = e.value) == null ? void 0 : u.selectionModeChanged(i);
+      }
+    }), { componentName: s, element: e };
   },
   render() {
     return a ? n(
@@ -2095,7 +2291,7 @@ const $t = d({
       ]
     );
   }
-}), Kt = d({
+}), Pt = l({
   name: "VDialog",
   props: {
     /**
@@ -2163,7 +2359,7 @@ const $t = d({
     "close"
   ],
   setup(t, o) {
-    const s = l("dialog", I), e = r(null);
+    const s = h("dialog", z), e = d(null);
     return o.expose({
       openChanged(i, u) {
         var c;
@@ -2213,13 +2409,13 @@ const $t = d({
       },
       [
         // @slot graphic Use the graphic slot in order to replace the icon.
-        h("graphic", this.$slots.graphic),
+        r("graphic", this.$slots.graphic),
         // @slot body Use the body slot in order to add custom HTML to the dialog.
-        h("body", this.$slots.body),
+        r("body", this.$slots.body),
         // @slot footer Use the footer slot in order to add action buttons to the bottom of the dialog.
-        h("footer", this.$slots.footer),
+        r("footer", this.$slots.footer),
         // @slot main Assign nodes to the main slot to fully override a dialog’s predefined flow and style with your own.
-        h("main", this.$slots.main)
+        r("main", this.$slots.main)
       ]
     ) : n(
       this.componentName,
@@ -2246,17 +2442,17 @@ const $t = d({
       },
       [
         // @slot graphic Use the graphic slot in order to replace the icon.
-        h("graphic", this.$slots.graphic),
+        r("graphic", this.$slots.graphic),
         // @slot body Use the body slot in order to add custom HTML to the dialog.
-        h("body", this.$slots.body),
+        r("body", this.$slots.body),
         // @slot footer Use the footer slot in order to add action buttons to the bottom of the dialog.
-        h("footer", this.$slots.footer),
+        r("footer", this.$slots.footer),
         // @slot main Assign nodes to the main slot to fully override a dialog’s predefined flow and style with your own.
-        h("main", this.$slots.main)
+        r("main", this.$slots.main)
       ]
     );
   }
-}), It = d({
+}), Lt = l({
   name: "VDivider",
   props: {
     /**
@@ -2308,7 +2504,7 @@ const $t = d({
     "input"
   ],
   setup(t, o) {
-    const s = l("divider", q), e = r(null);
+    const s = h("divider", F), e = d(null);
     return o.expose({}), { componentName: s, element: e };
   },
   render() {
@@ -2350,7 +2546,118 @@ const $t = d({
       []
     );
   }
-}), qt = d({
+}), Dt = l({
+  name: "VEmptyState",
+  props: {
+    /**
+     * Indicates the element that represents the current item within a container or set of related elements.
+     */
+    ariaCurrent: {
+      type: String,
+      default: void 0
+    },
+    /**
+     * An optional headline for the empty state.
+     */
+    headline: { type: String, default: void 0 },
+    /**
+     * Icon for the empty state.
+     * See the Vivid Icon Gallery for available icons: https://icons.vivid.vonage.com/
+     */
+    icon: {
+      type: String,
+      default: void 0
+    }
+  },
+  emits: [
+    /**
+     * 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 element loses focus.
+     * @type {FocusEvent}
+     */
+    "blur",
+    /**
+     * Fires when a key is pressed.
+     * @type {KeyboardEvent}
+     */
+    "keydown",
+    /**
+     * Fires when a key is released.
+     * @type {KeyboardEvent}
+     */
+    "keyup",
+    /**
+     * Fires when the value of an element has been changed.
+     * @type {Event}
+     */
+    "input"
+  ],
+  setup(t, o) {
+    const s = h("empty-state", q), e = d(null);
+    return o.expose({}), { componentName: s, element: e };
+  },
+  render() {
+    return a ? n(
+      this.componentName,
+      {
+        ref: "element",
+        attrs: {
+          ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
+          ...this.headline !== void 0 ? { headline: this.headline } : {},
+          ...this.icon !== void 0 ? { icon: this.icon } : {}
+        },
+        class: "vvd-root",
+        on: {
+          click: (t) => this.$emit("click", t),
+          focus: (t) => this.$emit("focus", t),
+          blur: (t) => this.$emit("blur", t),
+          keydown: (t) => this.$emit("keydown", t),
+          keyup: (t) => this.$emit("keyup", t),
+          input: (t) => this.$emit("input", t)
+        }
+      },
+      [
+        this.$slots.default,
+        // @slot graphic The graphic slot allows overriding the icon with a custom illustration
+        r("graphic", this.$slots.graphic),
+        // @slot action-items Slot to add action items to the empty state
+        r("action-items", this.$slots["action-items"])
+      ]
+    ) : n(
+      this.componentName,
+      {
+        ref: "element",
+        class: "vvd-root",
+        ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
+        ...this.headline !== void 0 ? { headline: this.headline } : {},
+        ...this.icon !== void 0 ? { icon: this.icon } : {},
+        onClick: (t) => this.$emit("click", t),
+        onFocus: (t) => this.$emit("focus", t),
+        onBlur: (t) => this.$emit("blur", t),
+        onKeydown: (t) => this.$emit("keydown", t),
+        onKeyup: (t) => this.$emit("keyup", t),
+        onInput: (t) => this.$emit("input", t)
+      },
+      [
+        // @ts-ignore
+        this.$slots.default && this.$slots.default(),
+        // @slot graphic The graphic slot allows overriding the icon with a custom illustration
+        r("graphic", this.$slots.graphic),
+        // @slot action-items Slot to add action items to the empty state
+        r("action-items", this.$slots["action-items"])
+      ]
+    );
+  }
+}), Mt = l({
   name: "VFab",
   props: {
     /**
@@ -2475,7 +2782,7 @@ const $t = d({
     "input"
   ],
   setup(t, o) {
-    const s = l("fab", z), e = r(null);
+    const s = h("fab", P), e = d(null);
     return o.expose({
       /**
        * {@inheritDoc (FormAssociated:interface).validate}
@@ -2557,7 +2864,7 @@ const $t = d({
       []
     );
   }
-}), zt = d({
+}), At = l({
   name: "VHeader",
   props: {
     /**
@@ -2609,7 +2916,7 @@ const $t = d({
     "input"
   ],
   setup(t, o) {
-    const s = l("header", F), e = r(null);
+    const s = h("header", L), e = d(null);
     return o.expose({}), { componentName: s, element: e };
   },
   render() {
@@ -2635,9 +2942,9 @@ const $t = d({
       [
         this.$slots.default,
         // @slot action-items Nodes assigned to action-items slot will be set at the end of the header.
-        h("action-items", this.$slots["action-items"]),
+        r("action-items", this.$slots["action-items"]),
         // @slot app-content Content vertically aligned with header.
-        h("app-content", this.$slots["app-content"])
+        r("app-content", this.$slots["app-content"])
       ]
     ) : n(
       this.componentName,
@@ -2658,13 +2965,13 @@ const $t = d({
         // @ts-ignore
         this.$slots.default && this.$slots.default(),
         // @slot action-items Nodes assigned to action-items slot will be set at the end of the header.
-        h("action-items", this.$slots["action-items"]),
+        r("action-items", this.$slots["action-items"]),
         // @slot app-content Content vertically aligned with header.
-        h("app-content", this.$slots["app-content"])
+        r("app-content", this.$slots["app-content"])
       ]
     );
   }
-}), Ft = d({
+}), Ot = l({
   name: "VIcon",
   props: {
     /**
@@ -2724,7 +3031,7 @@ const $t = d({
     "input"
   ],
   setup(t, o) {
-    const s = l("icon", P), e = r(null);
+    const s = h("icon", D), e = d(null);
     return o.expose({
       nameChanged() {
         var i;
@@ -2776,7 +3083,7 @@ const $t = d({
       ]
     );
   }
-}), Pt = d({
+}), Et = l({
   name: "VLayout",
   props: {
     /**
@@ -2840,7 +3147,7 @@ const $t = d({
     "input"
   ],
   setup(t, o) {
-    const s = l("layout", L), e = r(null);
+    const s = h("layout", M), e = d(null);
     return o.expose({}), { componentName: s, element: e };
   },
   render() {
@@ -2891,7 +3198,7 @@ const $t = d({
       ]
     );
   }
-}), Lt = d({
+}), Gt = l({
   name: "VMenu",
   props: {
     /**
@@ -2950,7 +3257,7 @@ const $t = d({
     "input"
   ],
   setup(t, o) {
-    const s = l("menu", D), e = r(null);
+    const s = h("menu", A), e = d(null);
     return o.expose({
       /**
        * Focuses the first item in the menu.
@@ -3016,7 +3323,7 @@ const $t = d({
       ]
     );
   }
-}), Dt = d({
+}), Ht = l({
   name: "VMenuItem",
   model: a ? {
     prop: "modelValue",
@@ -3106,7 +3413,7 @@ const $t = d({
     "update:modelValue"
   ],
   setup(t, o) {
-    const s = l("menu-item", M), e = r(null);
+    const s = h("menu-item", O), e = d(null);
     return o.expose({}), { componentName: s, element: e };
   },
   render() {
@@ -3162,7 +3469,7 @@ const $t = d({
       []
     );
   }
-}), Mt = d({
+}), Rt = l({
   name: "VNav",
   props: {
     /**
@@ -3206,7 +3513,7 @@ const $t = d({
     "input"
   ],
   setup(t, o) {
-    const s = l("nav", A), e = r(null);
+    const s = h("nav", E), e = d(null);
     return o.expose({}), { componentName: s, element: e };
   },
   render() {
@@ -3245,7 +3552,7 @@ const $t = d({
       ]
     );
   }
-}), At = d({
+}), Wt = l({
   name: "VNavDisclosure",
   props: {
     /**
@@ -3302,7 +3609,7 @@ const $t = d({
     "input"
   ],
   setup(t, o) {
-    const s = l("nav-disclosure", O), e = r(null);
+    const s = h("nav-disclosure", G), e = d(null);
     return o.expose({}), { componentName: s, element: e };
   },
   render() {
@@ -3349,7 +3656,7 @@ const $t = d({
       ]
     );
   }
-}), Ot = d({
+}), jt = l({
   name: "VNavItem",
   props: {
     /**
@@ -3437,7 +3744,7 @@ const $t = d({
     "input"
   ],
   setup(t, o) {
-    const s = l("nav-item", G), e = r(null);
+    const s = h("nav-item", H), e = d(null);
     return o.expose({}), { componentName: s, element: e };
   },
   render() {
@@ -3495,7 +3802,7 @@ const $t = d({
       []
     );
   }
-}), Gt = d({
+}), Ut = l({
   name: "VNote",
   props: {
     /**
@@ -3555,7 +3862,7 @@ const $t = d({
     "input"
   ],
   setup(t, o) {
-    const s = l("note", E), e = r(null);
+    const s = h("note", R), e = d(null);
     return o.expose({}), { componentName: s, element: e };
   },
   render() {
@@ -3602,7 +3909,7 @@ const $t = d({
       ]
     );
   }
-}), Et = d({
+}), Jt = l({
   name: "VNumberField",
   model: a ? {
     prop: "modelValue",
@@ -3751,7 +4058,7 @@ const $t = d({
     "change"
   ],
   setup(t, o) {
-    const s = l("number-field", H), e = r(null);
+    const s = h("number-field", W), e = d(null);
     return o.expose({
       /**
        * {@inheritDoc (FormAssociated:interface).validate}
@@ -3868,7 +4175,7 @@ const $t = d({
       []
     );
   }
-}), Ht = d({
+}), Qt = l({
   name: "VOption",
   props: {
     /**
@@ -3939,7 +4246,7 @@ const $t = d({
     "input"
   ],
   setup(t, o) {
-    const s = l("option", R), e = r(null);
+    const s = h("option", j), e = d(null);
     return o.expose({
       /**
        * Updates the ariaChecked property when the checked property changes.
@@ -4003,7 +4310,114 @@ const $t = d({
       []
     );
   }
-}), Rt = d({
+}), Xt = l({
+  name: "VPagination",
+  props: {
+    /**
+     * Indicates the element that represents the current item within a container or set of related elements.
+     */
+    ariaCurrent: {
+      type: String,
+      default: void 0
+    },
+    size: { type: String, default: void 0 },
+    navIcons: { type: Boolean, default: void 0 },
+    total: { type: Number, default: void 0 },
+    selectedIndex: { type: Number, default: void 0 }
+  },
+  emits: [
+    /**
+     * 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 element loses focus.
+     * @type {FocusEvent}
+     */
+    "blur",
+    /**
+     * Fires when a key is pressed.
+     * @type {KeyboardEvent}
+     */
+    "keydown",
+    /**
+     * Fires when a key is released.
+     * @type {KeyboardEvent}
+     */
+    "keyup",
+    /**
+     * Fires when the value of an element has been changed.
+     * @type {Event}
+     */
+    "input"
+  ],
+  setup(t, o) {
+    const s = h("pagination", U), e = d(null);
+    return o.expose({
+      totalChanged(i, u) {
+        var c;
+        return (c = e.value) == null ? void 0 : c.totalChanged(i, u);
+      },
+      selectedIndexChanged(i, u) {
+        var c;
+        return (c = e.value) == null ? void 0 : c.selectedIndexChanged(i, u);
+      },
+      paginationButtonsChanged(i, u) {
+        var c;
+        return (c = e.value) == null ? void 0 : c.paginationButtonsChanged(i, u);
+      }
+    }), { componentName: s, element: e };
+  },
+  render() {
+    return a ? n(
+      this.componentName,
+      {
+        ref: "element",
+        attrs: {
+          ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
+          ...this.size !== void 0 ? { size: this.size } : {},
+          ...this.navIcons !== void 0 ? { "nav-icons": this.navIcons } : {},
+          ...this.total !== void 0 ? { total: this.total } : {},
+          ...this.selectedIndex !== void 0 ? { "selected-index": this.selectedIndex } : {}
+        },
+        class: "vvd-root",
+        on: {
+          click: (t) => this.$emit("click", t),
+          focus: (t) => this.$emit("focus", t),
+          blur: (t) => this.$emit("blur", t),
+          keydown: (t) => this.$emit("keydown", t),
+          keyup: (t) => this.$emit("keyup", t),
+          input: (t) => this.$emit("input", t)
+        }
+      },
+      []
+    ) : n(
+      this.componentName,
+      {
+        ref: "element",
+        class: "vvd-root",
+        ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
+        ...this.size !== void 0 ? { size: this.size } : {},
+        ...this.navIcons !== void 0 ? { "nav-icons": this.navIcons } : {},
+        ...this.total !== void 0 ? { total: this.total } : {},
+        ...this.selectedIndex !== void 0 ? { "selected-index": this.selectedIndex } : {},
+        onClick: (t) => this.$emit("click", t),
+        onFocus: (t) => this.$emit("focus", t),
+        onBlur: (t) => this.$emit("blur", t),
+        onKeydown: (t) => this.$emit("keydown", t),
+        onKeyup: (t) => this.$emit("keyup", t),
+        onInput: (t) => this.$emit("input", t)
+      },
+      []
+    );
+  }
+}), Yt = l({
   name: "VPopup",
   props: {
     /**
@@ -4078,7 +4492,7 @@ const $t = d({
     "input"
   ],
   setup(t, o) {
-    const s = l("popup", W), e = r(null);
+    const s = h("popup", J), e = d(null);
     return o.expose({
       openChanged(i, u) {
         var c;
@@ -4153,7 +4567,7 @@ const $t = d({
       ]
     );
   }
-}), Wt = d({
+}), Zt = l({
   name: "VProgress",
   props: {
     /**
@@ -4216,7 +4630,7 @@ const $t = d({
     "input"
   ],
   setup(t, o) {
-    const s = l("progress", j), e = r(null);
+    const s = h("progress", Q), e = d(null);
     return o.expose({}), { componentName: s, element: e };
   },
   render() {
@@ -4268,7 +4682,7 @@ const $t = d({
       []
     );
   }
-}), jt = d({
+}), _t = l({
   name: "VProgressRing",
   props: {
     /**
@@ -4330,7 +4744,7 @@ const $t = d({
     "input"
   ],
   setup(t, o) {
-    const s = l("progress-ring", U), e = r(null);
+    const s = h("progress-ring", X), e = d(null);
     return o.expose({}), { componentName: s, element: e };
   },
   render() {
@@ -4380,7 +4794,7 @@ const $t = d({
       []
     );
   }
-}), Ut = d({
+}), te = l({
   name: "VRadio",
   props: {
     /**
@@ -4474,7 +4888,7 @@ const $t = d({
     "change"
   ],
   setup(t, o) {
-    const s = l("radio", J), e = r(null);
+    const s = h("radio", Y), e = d(null);
     return o.expose({}), { componentName: s, element: e };
   },
   render() {
@@ -4532,7 +4946,7 @@ const $t = d({
       []
     );
   }
-}), Jt = d({
+}), ee = l({
   name: "VRadioGroup",
   model: a ? {
     prop: "modelValue",
@@ -4613,7 +5027,7 @@ const $t = d({
     "update:modelValue"
   ],
   setup(t, o) {
-    const s = l("radio-group", Q), e = r(null);
+    const s = h("radio-group", Z), e = d(null);
     return o.expose({}), { componentName: s, element: e };
   },
   render() {
@@ -4668,13 +5082,21 @@ const $t = d({
       ]
     );
   }
-}), Qt = d({
+}), ie = l({
   name: "VSelect",
   model: a ? {
     prop: "modelValue",
     event: "update:modelValue"
   } : void 0,
   props: {
+    /**
+     * The success text for the form element.
+     */
+    successText: { type: String, default: void 0 },
+    /**
+     * The error text for the form element.
+     */
+    errorText: { type: String, default: void 0 },
     /**
      * The helper text for the form element.
      */
@@ -4780,7 +5202,7 @@ const $t = d({
     "change"
   ],
   setup(t, o) {
-    const s = l("select", X), e = r(null);
+    const s = h("select", _), e = d(null);
     return o.expose({
       /**
        * Calculate and apply listbox positioning based on available viewport space.
@@ -4818,6 +5240,8 @@ const $t = d({
       {
         ref: "element",
         attrs: {
+          ...this.successText !== void 0 ? { "success-text": this.successText } : {},
+          ...this.errorText !== void 0 ? { "error-text": this.errorText } : {},
           ...this.helperText !== void 0 ? { "helper-text": this.helperText } : {},
           ...this.label !== void 0 ? { label: this.label } : {},
           ...this.icon !== void 0 ? { icon: this.icon } : {},
@@ -4845,12 +5269,18 @@ const $t = d({
           change: (t) => this.$emit("change", t)
         }
       },
-      [this.$slots.default]
+      [
+        this.$slots.default,
+        // @slot meta Slot to add meta content to the select control.
+        r("meta", this.$slots.meta)
+      ]
     ) : n(
       this.componentName,
       {
         ref: "element",
         class: "vvd-root",
+        ...this.successText !== void 0 ? { "success-text": this.successText } : {},
+        ...this.errorText !== void 0 ? { "error-text": this.errorText } : {},
         ...this.helperText !== void 0 ? { "helper-text": this.helperText } : {},
         ...this.label !== void 0 ? { label: this.label } : {},
         ...this.icon !== void 0 ? { icon: this.icon } : {},
@@ -4876,11 +5306,13 @@ const $t = d({
       },
       [
         // @ts-ignore
-        this.$slots.default && this.$slots.default()
+        this.$slots.default && this.$slots.default(),
+        // @slot meta Slot to add meta content to the select control.
+        r("meta", this.$slots.meta)
       ]
     );
   }
-}), Xt = d({
+}), oe = l({
   name: "VSideDrawer",
   props: {
     /**
@@ -4940,7 +5372,7 @@ const $t = d({
     "input"
   ],
   setup(t, o) {
-    const s = l("side-drawer", Y), e = r(null);
+    const s = h("side-drawer", tt), e = d(null);
     return o.expose({}), { componentName: s, element: e };
   },
   render() {
@@ -4968,7 +5400,7 @@ const $t = d({
       [
         this.$slots.default,
         // @slot app-content Sets assigned nodes to the main application content, the side drawer is opened next to.
-        h("app-content", this.$slots["app-content"])
+        r("app-content", this.$slots["app-content"])
       ]
     ) : n(
       this.componentName,
@@ -4991,11 +5423,11 @@ const $t = d({
         // @ts-ignore
         this.$slots.default && this.$slots.default(),
         // @slot app-content Sets assigned nodes to the main application content, the side drawer is opened next to.
-        h("app-content", this.$slots["app-content"])
+        r("app-content", this.$slots["app-content"])
       ]
     );
   }
-}), Yt = d({
+}), se = l({
   name: "VSlider",
   model: a ? {
     prop: "modelValue",
@@ -5101,7 +5533,7 @@ const $t = d({
     "update:modelValue"
   ],
   setup(t, o) {
-    const s = l("slider", Z), e = r(null);
+    const s = h("slider", et), e = d(null);
     return o.expose({
       /**
        * Increment the value by the step
@@ -5187,7 +5619,7 @@ const $t = d({
       []
     );
   }
-}), Zt = d({
+}), ne = l({
   name: "VSwitch",
   props: {
     /**
@@ -5236,7 +5668,7 @@ const $t = d({
     "input"
   ],
   setup(t, o) {
-    const s = l("switch", _), e = r(null);
+    const s = h("switch", it), e = d(null);
     return o.expose({}), { componentName: s, element: e };
   },
   render() {
@@ -5278,7 +5710,7 @@ const $t = d({
       []
     );
   }
-}), _t = d({
+}), ae = l({
   name: "VTab",
   props: {
     /**
@@ -5344,7 +5776,7 @@ const $t = d({
     "input"
   ],
   setup(t, o) {
-    const s = l("tab", tt), e = r(null);
+    const s = h("tab", ot), e = d(null);
     return o.expose({}), { componentName: s, element: e };
   },
   render() {
@@ -5394,7 +5826,7 @@ const $t = d({
       []
     );
   }
-}), te = d({
+}), re = l({
   name: "VTabs",
   props: {
     /**
@@ -5455,7 +5887,7 @@ const $t = d({
     "change"
   ],
   setup(t, o) {
-    const s = l("tabs", et), e = r(null);
+    const s = h("tabs", st), e = d(null);
     return o.expose({
       /**
        * The adjust method for FASTTabs
@@ -5528,7 +5960,7 @@ const $t = d({
       ]
     );
   }
-}), ee = d({
+}), de = l({
   name: "VTabPanel",
   props: {
     /**
@@ -5572,7 +6004,7 @@ const $t = d({
     "input"
   ],
   setup(t, o) {
-    const s = l("tab-panel", it), e = r(null);
+    const s = h("tab-panel", nt), e = d(null);
     return o.expose({}), { componentName: s, element: e };
   },
   render() {
@@ -5611,7 +6043,7 @@ const $t = d({
       ]
     );
   }
-}), ie = d({
+}), le = l({
   name: "VTextArea",
   model: a ? {
     prop: "modelValue",
@@ -5656,7 +6088,7 @@ const $t = d({
     "update:modelValue"
   ],
   setup(t, o) {
-    const s = l("text-area", ot), e = r(null);
+    const s = h("text-area", at), e = d(null);
     return o.expose({}), { componentName: s, element: e };
   },
   render() {
@@ -5692,7 +6124,7 @@ const $t = d({
       []
     );
   }
-}), oe = d({
+}), he = l({
   name: "VTextField",
   model: a ? {
     prop: "modelValue",
@@ -5841,7 +6273,7 @@ const $t = d({
     "change"
   ],
   setup(t, o) {
-    const s = l("text-field", st), e = r(null);
+    const s = h("text-field", rt), e = d(null);
     return o.expose({
       /**
        * Selects all the text in the text field
@@ -5944,7 +6376,140 @@ const $t = d({
       []
     );
   }
-}), se = d({
+}), ue = l({
+  name: "VToggletip",
+  props: {
+    /**
+     * Indicates the element that represents the current item within a container or set of related elements.
+     */
+    ariaCurrent: {
+      type: String,
+      default: void 0
+    },
+    /**
+     * the optional title of the toggletip
+     */
+    headline: { type: String, default: void 0 },
+    /**
+     * toggle color scheme
+     */
+    alternate: { type: Boolean, default: void 0 },
+    /**
+     * placement of the toggletip
+     */
+    placement: {
+      type: String,
+      default: void 0
+    },
+    /**
+     * id or direct reference to the toggletip's anchor element
+     */
+    anchor: { type: [String, Object], default: void 0 },
+    /**
+     * indicates whether the toggletip is open
+     */
+    open: { type: Boolean, default: void 0 }
+  },
+  emits: [
+    /**
+     * 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 element loses focus.
+     * @type {FocusEvent}
+     */
+    "blur",
+    /**
+     * Fires when a key is pressed.
+     * @type {KeyboardEvent}
+     */
+    "keydown",
+    /**
+     * Fires when a key is released.
+     * @type {KeyboardEvent}
+     */
+    "keyup",
+    /**
+     * Fires when the value of an element has been changed.
+     * @type {Event}
+     */
+    "input"
+  ],
+  setup(t, o) {
+    const s = h("toggletip", dt), e = d(null);
+    return o.expose({
+      anchorChanged(i, u) {
+        var c;
+        return (c = e.value) == null ? void 0 : c.anchorChanged(i, u);
+      },
+      openChanged(i, u) {
+        var c;
+        return (c = e.value) == null ? void 0 : c.openChanged(i, u);
+      }
+    }), { componentName: s, element: e };
+  },
+  render() {
+    return a ? n(
+      this.componentName,
+      {
+        ref: "element",
+        attrs: {
+          ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
+          ...this.headline !== void 0 ? { headline: this.headline } : {},
+          ...this.alternate !== void 0 ? { alternate: this.alternate } : {},
+          ...this.placement !== void 0 ? { placement: this.placement } : {},
+          ...this.open !== void 0 ? { open: this.open } : {}
+        },
+        class: "vvd-root",
+        domProps: { ...this.anchor !== void 0 ? { anchor: this.anchor } : {} },
+        on: {
+          click: (t) => this.$emit("click", t),
+          focus: (t) => this.$emit("focus", t),
+          blur: (t) => this.$emit("blur", t),
+          keydown: (t) => this.$emit("keydown", t),
+          keyup: (t) => this.$emit("keyup", t),
+          input: (t) => this.$emit("input", t)
+        }
+      },
+      [
+        this.$slots.default,
+        // @slot action-items The content to display in the toggletip action items
+        r("action-items", this.$slots["action-items"])
+      ]
+    ) : n(
+      this.componentName,
+      {
+        ref: "element",
+        class: "vvd-root",
+        ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
+        ...this.headline !== void 0 ? { headline: this.headline } : {},
+        ...this.alternate !== void 0 ? { alternate: this.alternate } : {},
+        ...this.placement !== void 0 ? { placement: this.placement } : {},
+        ...this.anchor !== void 0 ? { anchor: this.anchor } : {},
+        ...this.open !== void 0 ? { open: this.open } : {},
+        onClick: (t) => this.$emit("click", t),
+        onFocus: (t) => this.$emit("focus", t),
+        onBlur: (t) => this.$emit("blur", t),
+        onKeydown: (t) => this.$emit("keydown", t),
+        onKeyup: (t) => this.$emit("keyup", t),
+        onInput: (t) => this.$emit("input", t)
+      },
+      [
+        // @ts-ignore
+        this.$slots.default && this.$slots.default(),
+        // @slot action-items The content to display in the toggletip action items
+        r("action-items", this.$slots["action-items"])
+      ]
+    );
+  }
+}), ce = l({
   name: "VTooltip",
   props: {
     /**
@@ -5999,7 +6564,7 @@ const $t = d({
     "input"
   ],
   setup(t, o) {
-    const s = l("tooltip", nt), e = r(null);
+    const s = h("tooltip", lt), e = d(null);
     return o.expose({
       anchorChanged(i, u) {
         var c;
@@ -6054,7 +6619,7 @@ const $t = d({
       []
     );
   }
-}), ne = d({
+}), pe = l({
   name: "VTreeItem",
   props: {
     /**
@@ -6132,7 +6697,7 @@ const $t = d({
     "selected-change"
   ],
   setup(t, o) {
-    const s = l("tree-item", at), e = r(null);
+    const s = h("tree-item", ht), e = d(null);
     return o.expose({}), { componentName: s, element: e };
   },
   render() {
@@ -6162,7 +6727,7 @@ const $t = d({
       },
       [
         // @slot item To specify a child tree item.
-        h("item", this.$slots.item)
+        r("item", this.$slots.item)
       ]
     ) : n(
       this.componentName,
@@ -6186,11 +6751,11 @@ const $t = d({
       },
       [
         // @slot item To specify a child tree item.
-        h("item", this.$slots.item)
+        r("item", this.$slots.item)
       ]
     );
   }
-}), ae = d({
+}), me = l({
   name: "VTreeView",
   props: {
     /**
@@ -6239,7 +6804,7 @@ const $t = d({
     "input"
   ],
   setup(t, o) {
-    const s = l("tree-view", rt), e = r(null);
+    const s = h("tree-view", ut), e = d(null);
     return o.expose({}), { componentName: s, element: e };
   },
   render() {
@@ -6282,7 +6847,7 @@ const $t = d({
       ]
     );
   }
-}), re = d({
+}), ve = l({
   name: "VTag",
   props: {
     /**
@@ -6366,7 +6931,7 @@ const $t = d({
     "input"
   ],
   setup(t, o) {
-    const s = l("tag", dt), e = r(null);
+    const s = h("tag", ct), e = d(null);
     return o.expose({
       remove() {
         var i;
@@ -6435,7 +7000,7 @@ const $t = d({
       []
     );
   }
-}), de = d({
+}), ye = l({
   name: "VTagGroup",
   props: {
     /**
@@ -6479,7 +7044,7 @@ const $t = d({
     "input"
   ],
   setup(t, o) {
-    const s = l("tag-group", lt), e = r(null);
+    const s = h("tag-group", pt), e = d(null);
     return o.expose({}), { componentName: s, element: e };
   },
   render() {
@@ -6520,53 +7085,57 @@ const $t = d({
   }
 });
 export {
-  vt as VAccordion,
-  yt as VAccordionItem,
-  ft as VActionGroup,
-  $t as VAvatar,
-  kt as VBadge,
-  gt as VBanner,
-  bt as VBreadcrumb,
-  Ct as VBreadcrumbItem,
-  St as VButton,
-  wt as VCalendar,
-  xt as VCalendarEvent,
-  Vt as VCard,
-  Nt as VCheckbox,
-  Bt as VCombobox,
-  Tt as VDataGrid,
-  Kt as VDialog,
-  It as VDivider,
-  qt as VFab,
-  zt as VHeader,
-  Ft as VIcon,
-  Pt as VLayout,
-  Lt as VMenu,
-  Dt as VMenuItem,
-  Mt as VNav,
-  At as VNavDisclosure,
-  Ot as VNavItem,
-  Gt as VNote,
-  Et as VNumberField,
-  Ht as VOption,
-  Rt as VPopup,
-  Wt as VProgress,
-  jt as VProgressRing,
-  Ut as VRadio,
-  Jt as VRadioGroup,
-  Qt as VSelect,
-  Xt as VSideDrawer,
-  Yt as VSlider,
-  Zt as VSwitch,
-  _t as VTab,
-  ee as VTabPanel,
-  te as VTabs,
-  re as VTag,
-  de as VTagGroup,
-  ie as VTextArea,
-  oe as VTextField,
-  se as VTooltip,
-  ne as VTreeItem,
-  ae as VTreeView,
-  mt as setCustomComponentPrefix
+  kt as VAccordion,
+  gt as VAccordionItem,
+  bt as VActionGroup,
+  Ct as VAlert,
+  xt as VAvatar,
+  St as VBadge,
+  wt as VBanner,
+  Vt as VBreadcrumb,
+  Nt as VBreadcrumbItem,
+  Bt as VButton,
+  Tt as VCalendar,
+  Kt as VCalendarEvent,
+  It as VCard,
+  zt as VCheckbox,
+  Ft as VCombobox,
+  qt as VDataGrid,
+  Pt as VDialog,
+  Lt as VDivider,
+  Dt as VEmptyState,
+  Mt as VFab,
+  At as VHeader,
+  Ot as VIcon,
+  Et as VLayout,
+  Gt as VMenu,
+  Ht as VMenuItem,
+  Rt as VNav,
+  Wt as VNavDisclosure,
+  jt as VNavItem,
+  Ut as VNote,
+  Jt as VNumberField,
+  Qt as VOption,
+  Xt as VPagination,
+  Yt as VPopup,
+  Zt as VProgress,
+  _t as VProgressRing,
+  te as VRadio,
+  ee as VRadioGroup,
+  ie as VSelect,
+  oe as VSideDrawer,
+  se as VSlider,
+  ne as VSwitch,
+  ae as VTab,
+  de as VTabPanel,
+  re as VTabs,
+  ve as VTag,
+  ye as VTagGroup,
+  le as VTextArea,
+  he as VTextField,
+  ue as VToggletip,
+  ce as VTooltip,
+  pe as VTreeItem,
+  me as VTreeView,
+  $t as setCustomComponentPrefix
 };