@vonage/vivid-vue 3.2.3 → 3.4.0

package/dist/index.es.js

@@ -1,17 +1,18 @@
-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 w, registerButton as S, registerCalendar as x, registerCalendarEvent as N, registerCard as V, registerCheckbox as B, registerCombobox as K, registerDataGrid as T, registerDialog as I, registerDivider as q, registerFab as z, registerHeader as F, registerIcon as L, registerLayout as P, registerMenu as D, registerMenuItem as M, registerNav as O, registerNavDisclosure as A, registerNavItem as E, registerNote as H, registerNumberField as G, 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: {
     /**
      * Indicates the element that represents the current item within a container or set of related elements.
@@ -64,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;
@@ -114,7 +115,8 @@ const vt = d({
       ]
     );
   }
-}), yt = d({
+}), gt = l({
+  name: "VAccordionItem",
   props: {
     /**
      * A decorative icon the custom element should have.
@@ -197,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() {
@@ -258,7 +260,8 @@ const vt = d({
       ]
     );
   }
-}), ft = d({
+}), bt = l({
+  name: "VActionGroup",
   props: {
     /**
      * Indicates the element that represents the current item within a container or set of related elements.
@@ -315,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() {
@@ -367,21 +370,195 @@ 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: {
     /**
      * Indicates the element that represents the current item within a container or set of related elements.
@@ -452,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() {
@@ -481,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,
@@ -504,11 +681,12 @@ 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: {
     /**
      * A decorative icon the custom element should have.
@@ -582,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() {
@@ -632,7 +810,8 @@ const $t = d({
       []
     );
   }
-}), gt = d({
+}), wt = l({
+  name: "VBanner",
   props: {
     /**
      * A decorative icon the custom element should have.
@@ -693,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;
@@ -729,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,
@@ -754,11 +933,12 @@ 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: {
     /**
      * Indicates the element that represents the current item within a container or set of related elements.
@@ -801,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() {
@@ -840,7 +1020,8 @@ const $t = d({
       ]
     );
   }
-}), Ct = d({
+}), Nt = l({
+  name: "VBreadcrumbItem",
   props: {
     /**
      * Indicates the element that represents the current item within a container or set of related elements.
@@ -916,7 +1097,7 @@ const $t = d({
     "input"
   ],
   setup(t, o) {
-    const s = l("breadcrumb-item", w), e = r(null);
+    const s = h("breadcrumb-item", S), e = d(null);
     return o.expose({}), { componentName: s, element: e };
   },
   render() {
@@ -972,7 +1153,8 @@ const $t = d({
       []
     );
   }
-}), wt = d({
+}), Bt = l({
+  name: "VButton",
   props: {
     /**
      * A decorative icon the custom element should have.
@@ -1112,7 +1294,7 @@ const $t = d({
     "input"
   ],
   setup(t, o) {
-    const s = l("button", S), e = r(null);
+    const s = h("button", w), e = d(null);
     return o.expose({
       /**
        * {@inheritDoc (FormAssociated:interface).validate}
@@ -1202,7 +1384,8 @@ const $t = d({
       []
     );
   }
-}), St = d({
+}), Tt = l({
+  name: "VCalendar",
   props: {
     /**
      * Indicates the element that represents the current item within a container or set of related elements.
@@ -1272,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;
@@ -1307,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,
@@ -1342,23 +1525,24 @@ 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: {
     /**
      * Indicates the element that represents the current item within a container or set of related elements.
@@ -1432,7 +1616,7 @@ const $t = d({
     "input"
   ],
   setup(t, o) {
-    const s = l("calendar-event", N), e = r(null);
+    const s = h("calendar-event", N), e = d(null);
     return o.expose({}), { componentName: s, element: e };
   },
   render() {
@@ -1484,7 +1668,8 @@ const $t = d({
       []
     );
   }
-}), Nt = d({
+}), It = l({
+  name: "VCard",
   props: {
     /**
      * Indicates the element that represents the current item within a container or set of related elements.
@@ -1554,7 +1739,7 @@ const $t = d({
     "input"
   ],
   setup(t, o) {
-    const s = l("card", V), e = r(null);
+    const s = h("card", B), e = d(null);
     return o.expose({}), { componentName: s, element: e };
   },
   render() {
@@ -1582,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,
@@ -1612,24 +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)
       ]
     );
   }
-}), Vt = 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.
      */
@@ -1677,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: [
     /**
@@ -1721,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() {
@@ -1730,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 } : {},
@@ -1738,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: {
@@ -1758,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 } : {},
@@ -1767,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),
@@ -1779,7 +1983,8 @@ const $t = d({
       []
     );
   }
-}), Bt = d({
+}), Ft = l({
+  name: "VCombobox",
   model: a ? {
     prop: "modelValue",
     event: "update:modelValue"
@@ -1890,7 +2095,7 @@ const $t = d({
     "update:modelValue"
   ],
   setup(t, o) {
-    const s = l("combobox", K), e = r(null);
+    const s = h("combobox", K), e = d(null);
     return o.expose({
       /**
        * {@inheritDoc (FormAssociated:interface).validate}
@@ -1993,7 +2198,8 @@ const $t = d({
       ]
     );
   }
-}), Kt = d({
+}), qt = l({
+  name: "VDataGrid",
   props: {
     /**
      * Indicates the element that represents the current item within a container or set of related elements.
@@ -2037,8 +2243,13 @@ const $t = d({
     "input"
   ],
   setup(t, o) {
-    const s = l("data-grid", T), 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(
@@ -2080,7 +2291,8 @@ const $t = d({
       ]
     );
   }
-}), Tt = d({
+}), Pt = l({
+  name: "VDialog",
   props: {
     /**
      * Indicates the element that represents the current item within a container or set of related elements.
@@ -2147,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;
@@ -2197,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,
@@ -2230,17 +2442,18 @@ 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: {
     /**
      * Indicates the element that represents the current item within a container or set of related elements.
@@ -2291,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() {
@@ -2333,20 +2546,9 @@ const $t = d({
       []
     );
   }
-}), qt = d({
+}), Dt = l({
+  name: "VEmptyState",
   props: {
-    /**
-     * 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 element that represents the current item within a container or set of related elements.
      */
@@ -2355,58 +2557,181 @@ const $t = d({
       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 initial value of the form. This value sets the `value` property
-     * only when the `value` property has not been explicitly set.
-     */
-    value: { type: String, default: void 0 },
-    /**
-     * The current value of the element. This property serves as a mechanism
-     * to set the `value` property through both property assignment and the
-     * .setAttribute() method. This is useful for setting the field's value
-     * in UI libraries that bind data through the .setAttribute() API
-     * and don't support IDL attribute binding.
-     */
-    currentValue: { 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 },
-    /**
-     * Require the field to be completed prior to form submission.
+     * An optional headline for the empty state.
      */
-    required: { type: Boolean, default: void 0 },
+    headline: { type: String, default: void 0 },
     /**
-     * Determines if the element should receive document focus on page load.
+     * Icon for the empty state.
+     * See the Vivid Icon Gallery for available icons: https://icons.vivid.vonage.com/
      */
-    autofocus: { type: Boolean, default: void 0 },
+    icon: {
+      type: String,
+      default: void 0
+    }
+  },
+  emits: [
     /**
-     * The id of a form to associate the element to.
+     * 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}
      */
-    form: { type: String, default: void 0 },
+    "click",
     /**
-     * See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button | <button> element for more details.
+     * Fires when the element receives focus.
+     * @type {FocusEvent}
      */
-    formaction: { type: String, default: void 0 },
+    "focus",
     /**
-     * See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button | <button> element for more details.
+     * Fires when the element loses focus.
+     * @type {FocusEvent}
      */
-    formenctype: { type: String, default: void 0 },
+    "blur",
     /**
-     * See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button | <button> element for more details.
+     * Fires when a key is pressed.
+     * @type {KeyboardEvent}
      */
-    formmethod: { type: String, default: void 0 },
+    "keydown",
     /**
-     * See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button | <button> element for more details.
+     * Fires when a key is released.
+     * @type {KeyboardEvent}
      */
-    formnovalidate: { type: Boolean, default: void 0 },
+    "keyup",
     /**
-     * See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button | <button> element for more details.
+     * Fires when the value of an element has been changed.
+     * @type {Event}
      */
-    formtarget: { type: String, default: void 0 },
+    "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: {
+    /**
+     * 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 element that represents the current item within a container or set of related elements.
+     */
+    ariaCurrent: {
+      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 },
+    /**
+     * The initial value of the form. This value sets the `value` property
+     * only when the `value` property has not been explicitly set.
+     */
+    value: { type: String, default: void 0 },
+    /**
+     * The current value of the element. This property serves as a mechanism
+     * to set the `value` property through both property assignment and the
+     * .setAttribute() method. This is useful for setting the field's value
+     * in UI libraries that bind data through the .setAttribute() API
+     * and don't support IDL attribute binding.
+     */
+    currentValue: { 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 },
+    /**
+     * Require the field to be completed prior to form submission.
+     */
+    required: { type: Boolean, default: void 0 },
+    /**
+     * Determines if the element should receive document focus on page load.
+     */
+    autofocus: { type: Boolean, default: void 0 },
+    /**
+     * The id of a form to associate the element to.
+     */
+    form: { type: String, default: void 0 },
+    /**
+     * See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button | <button> element for more details.
+     */
+    formaction: { type: String, default: void 0 },
+    /**
+     * See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button | <button> element for more details.
+     */
+    formenctype: { type: String, default: void 0 },
+    /**
+     * See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button | <button> element for more details.
+     */
+    formmethod: { type: String, default: void 0 },
+    /**
+     * See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button | <button> element for more details.
+     */
+    formnovalidate: { type: Boolean, default: void 0 },
+    /**
+     * See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button | <button> element for more details.
+     */
+    formtarget: { type: String, default: void 0 },
     /**
      * The button type.
      */
@@ -2457,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}
@@ -2539,7 +2864,8 @@ const $t = d({
       []
     );
   }
-}), zt = d({
+}), At = l({
+  name: "VHeader",
   props: {
     /**
      * Indicates the element that represents the current item within a container or set of related elements.
@@ -2590,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() {
@@ -2616,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,
@@ -2639,13 +2965,14 @@ 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: {
     /**
      * Indicates the element that represents the current item within a container or set of related elements.
@@ -2704,7 +3031,7 @@ const $t = d({
     "input"
   ],
   setup(t, o) {
-    const s = l("icon", L), e = r(null);
+    const s = h("icon", D), e = d(null);
     return o.expose({
       nameChanged() {
         var i;
@@ -2756,7 +3083,8 @@ const $t = d({
       ]
     );
   }
-}), Lt = d({
+}), Et = l({
+  name: "VLayout",
   props: {
     /**
      * Indicates the element that represents the current item within a container or set of related elements.
@@ -2777,6 +3105,10 @@ const $t = d({
      * sets the initial preferred spacing of a column from predefined available options
      */
     columnSpacing: { type: String, default: void 0 },
+    /**
+     * sets the initial preferred spacing of a row from predefined available options
+     */
+    rowSpacing: { type: String, default: void 0 },
     /**
      * sets the initial preferred auto-sizing from predefined available options
      */
@@ -2815,7 +3147,7 @@ const $t = d({
     "input"
   ],
   setup(t, o) {
-    const s = l("layout", P), e = r(null);
+    const s = h("layout", M), e = d(null);
     return o.expose({}), { componentName: s, element: e };
   },
   render() {
@@ -2828,6 +3160,7 @@ const $t = d({
           ...this.gutters !== void 0 ? { gutters: this.gutters } : {},
           ...this.columnBasis !== void 0 ? { "column-basis": this.columnBasis } : {},
           ...this.columnSpacing !== void 0 ? { "column-spacing": this.columnSpacing } : {},
+          ...this.rowSpacing !== void 0 ? { "row-spacing": this.rowSpacing } : {},
           ...this.autoSizing !== void 0 ? { "auto-sizing": this.autoSizing } : {}
         },
         class: "vvd-root",
@@ -2850,6 +3183,7 @@ const $t = d({
         ...this.gutters !== void 0 ? { gutters: this.gutters } : {},
         ...this.columnBasis !== void 0 ? { "column-basis": this.columnBasis } : {},
         ...this.columnSpacing !== void 0 ? { "column-spacing": this.columnSpacing } : {},
+        ...this.rowSpacing !== void 0 ? { "row-spacing": this.rowSpacing } : {},
         ...this.autoSizing !== void 0 ? { "auto-sizing": this.autoSizing } : {},
         onClick: (t) => this.$emit("click", t),
         onFocus: (t) => this.$emit("focus", t),
@@ -2864,7 +3198,8 @@ const $t = d({
       ]
     );
   }
-}), Pt = d({
+}), Gt = l({
+  name: "VMenu",
   props: {
     /**
      * Indicates the element that represents the current item within a container or set of related elements.
@@ -2922,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.
@@ -2988,7 +3323,8 @@ const $t = d({
       ]
     );
   }
-}), Dt = d({
+}), Ht = l({
+  name: "VMenuItem",
   model: a ? {
     prop: "modelValue",
     event: "update:modelValue"
@@ -3077,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() {
@@ -3133,7 +3469,8 @@ const $t = d({
       []
     );
   }
-}), Mt = d({
+}), Rt = l({
+  name: "VNav",
   props: {
     /**
      * Indicates the element that represents the current item within a container or set of related elements.
@@ -3176,7 +3513,7 @@ const $t = d({
     "input"
   ],
   setup(t, o) {
-    const s = l("nav", O), e = r(null);
+    const s = h("nav", E), e = d(null);
     return o.expose({}), { componentName: s, element: e };
   },
   render() {
@@ -3215,7 +3552,8 @@ const $t = d({
       ]
     );
   }
-}), Ot = d({
+}), Wt = l({
+  name: "VNavDisclosure",
   props: {
     /**
      * A decorative icon the custom element should have.
@@ -3271,7 +3609,7 @@ const $t = d({
     "input"
   ],
   setup(t, o) {
-    const s = l("nav-disclosure", A), e = r(null);
+    const s = h("nav-disclosure", G), e = d(null);
     return o.expose({}), { componentName: s, element: e };
   },
   render() {
@@ -3318,7 +3656,8 @@ const $t = d({
       ]
     );
   }
-}), At = d({
+}), jt = l({
+  name: "VNavItem",
   props: {
     /**
      * A decorative icon the custom element should have.
@@ -3405,7 +3744,7 @@ const $t = d({
     "input"
   ],
   setup(t, o) {
-    const s = l("nav-item", E), e = r(null);
+    const s = h("nav-item", H), e = d(null);
     return o.expose({}), { componentName: s, element: e };
   },
   render() {
@@ -3463,7 +3802,8 @@ const $t = d({
       []
     );
   }
-}), Et = d({
+}), Ut = l({
+  name: "VNote",
   props: {
     /**
      * A decorative icon the custom element should have.
@@ -3522,7 +3862,7 @@ const $t = d({
     "input"
   ],
   setup(t, o) {
-    const s = l("note", H), e = r(null);
+    const s = h("note", R), e = d(null);
     return o.expose({}), { componentName: s, element: e };
   },
   render() {
@@ -3569,7 +3909,8 @@ const $t = d({
       ]
     );
   }
-}), Ht = d({
+}), Jt = l({
+  name: "VNumberField",
   model: a ? {
     prop: "modelValue",
     event: "update:modelValue"
@@ -3717,7 +4058,7 @@ const $t = d({
     "change"
   ],
   setup(t, o) {
-    const s = l("number-field", G), e = r(null);
+    const s = h("number-field", W), e = d(null);
     return o.expose({
       /**
        * {@inheritDoc (FormAssociated:interface).validate}
@@ -3834,7 +4175,8 @@ const $t = d({
       []
     );
   }
-}), Gt = d({
+}), Qt = l({
+  name: "VOption",
   props: {
     /**
      * A decorative icon the custom element should have.
@@ -3904,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.
@@ -3968,7 +4310,115 @@ 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: {
     /**
      * Indicates the element that represents the current item within a container or set of related elements.
@@ -4042,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;
@@ -4117,7 +4567,8 @@ const $t = d({
       ]
     );
   }
-}), Wt = d({
+}), Zt = l({
+  name: "VProgress",
   props: {
     /**
      * Indicates the element that represents the current item within a container or set of related elements.
@@ -4179,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() {
@@ -4231,7 +4682,8 @@ const $t = d({
       []
     );
   }
-}), jt = d({
+}), _t = l({
+  name: "VProgressRing",
   props: {
     /**
      * Indicates the element that represents the current item within a container or set of related elements.
@@ -4292,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() {
@@ -4342,7 +4794,8 @@ const $t = d({
       []
     );
   }
-}), Ut = d({
+}), te = l({
+  name: "VRadio",
   props: {
     /**
      * Indicates the element that represents the current item within a container or set of related elements.
@@ -4435,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() {
@@ -4493,7 +4946,8 @@ const $t = d({
       []
     );
   }
-}), Jt = d({
+}), ee = l({
+  name: "VRadioGroup",
   model: a ? {
     prop: "modelValue",
     event: "update:modelValue"
@@ -4573,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() {
@@ -4628,12 +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.
      */
@@ -4739,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.
@@ -4777,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 } : {},
@@ -4804,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 } : {},
@@ -4835,11 +5306,14 @@ 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: {
     /**
      * Indicates the element that represents the current item within a container or set of related elements.
@@ -4898,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() {
@@ -4926,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,
@@ -4949,11 +5423,12 @@ 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",
     event: "update:modelValue"
@@ -5058,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
@@ -5144,7 +5619,8 @@ const $t = d({
       []
     );
   }
-}), Zt = d({
+}), ne = l({
+  name: "VSwitch",
   props: {
     /**
      * Indicates the element that represents the current item within a container or set of related elements.
@@ -5192,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() {
@@ -5234,7 +5710,8 @@ const $t = d({
       []
     );
   }
-}), _t = d({
+}), ae = l({
+  name: "VTab",
   props: {
     /**
      * A decorative icon the custom element should have.
@@ -5299,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() {
@@ -5349,7 +5826,8 @@ const $t = d({
       []
     );
   }
-}), te = d({
+}), re = l({
+  name: "VTabs",
   props: {
     /**
      * Indicates the element that represents the current item within a container or set of related elements.
@@ -5409,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
@@ -5482,7 +5960,8 @@ const $t = d({
       ]
     );
   }
-}), ee = d({
+}), de = l({
+  name: "VTabPanel",
   props: {
     /**
      * Indicates the element that represents the current item within a container or set of related elements.
@@ -5525,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() {
@@ -5564,7 +6043,8 @@ const $t = d({
       ]
     );
   }
-}), ie = d({
+}), le = l({
+  name: "VTextArea",
   model: a ? {
     prop: "modelValue",
     event: "update:modelValue"
@@ -5608,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() {
@@ -5644,7 +6124,8 @@ const $t = d({
       []
     );
   }
-}), oe = d({
+}), he = l({
+  name: "VTextField",
   model: a ? {
     prop: "modelValue",
     event: "update:modelValue"
@@ -5792,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
@@ -5895,7 +6376,8 @@ 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.
@@ -5905,41 +6387,149 @@ const $t = d({
       default: void 0
     },
     /**
-     * adds close button to the popup
-     */
-    dismissible: { type: Boolean, default: void 0 },
-    /**
-     * adds small triangle to indicate the trigger element
+     * the optional title of the toggletip
      */
-    arrow: { type: Boolean, default: void 0 },
+    headline: { type: String, default: void 0 },
     /**
-     * set the color-scheme to dark
+     * toggle color scheme
      */
     alternate: { type: Boolean, default: void 0 },
     /**
-     * the placement of the popup
+     * placement of the toggletip
      */
     placement: {
       type: String,
       default: void 0
     },
     /**
-     * the strategy of the popup
+     * id or direct reference to the toggletip's anchor element
      */
-    strategy: { type: String, default: void 0 },
+    anchor: { type: [String, Object], default: void 0 },
     /**
-     * the text of the tooltip
-     * accepts string
+     * indicates whether the toggletip is open
      */
-    text: { type: String, default: void 0 },
+    open: { type: Boolean, default: void 0 }
+  },
+  emits: [
     /**
-     * indicates whether the popup is open
+     * 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}
      */
-    open: { type: String, default: void 0 },
+    "click",
     /**
-     * ID reference to element in the popup’s owner document or HTMLElement.
+     * Fires when the element receives focus.
+     * @type {FocusEvent}
      */
-    anchor: { type: [String, HTMLElement], default: void 0 }
+    "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: {
+    /**
+     * Indicates the element that represents the current item within a container or set of related elements.
+     */
+    ariaCurrent: {
+      type: String,
+      default: void 0
+    },
+    /**
+     * the text of the tooltip
+     * accepts string
+     */
+    text: { type: String, default: void 0 },
+    placement: {
+      type: String,
+      default: void 0
+    },
+    open: { type: Boolean, default: void 0 },
+    anchor: { type: [String, Object], default: void 0 }
   },
   emits: [
     /**
@@ -5974,26 +6564,15 @@ 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;
+        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);
-      },
-      /**
-       * Updates popup's position
-       */
-      updatePosition() {
-        var i;
-        return (i = e.value) == null ? void 0 : i.updatePosition();
-      },
-      show() {
-        var i;
-        return (i = e.value) == null ? void 0 : i.show();
-      },
-      hide() {
-        var i;
-        return (i = e.value) == null ? void 0 : i.hide();
       }
     }), { componentName: s, element: e };
   },
@@ -6004,12 +6583,8 @@ const $t = d({
         ref: "element",
         attrs: {
           ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
-          ...this.dismissible !== void 0 ? { dismissible: this.dismissible } : {},
-          ...this.arrow !== void 0 ? { arrow: this.arrow } : {},
-          ...this.alternate !== void 0 ? { alternate: this.alternate } : {},
-          ...this.placement !== void 0 ? { placement: this.placement } : {},
-          ...this.strategy !== void 0 ? { strategy: this.strategy } : {},
           ...this.text !== void 0 ? { text: this.text } : {},
+          ...this.placement !== void 0 ? { placement: this.placement } : {},
           ...this.open !== void 0 ? { open: this.open } : {}
         },
         class: "vvd-root",
@@ -6030,12 +6605,8 @@ const $t = d({
         ref: "element",
         class: "vvd-root",
         ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
-        ...this.dismissible !== void 0 ? { dismissible: this.dismissible } : {},
-        ...this.arrow !== void 0 ? { arrow: this.arrow } : {},
-        ...this.alternate !== void 0 ? { alternate: this.alternate } : {},
-        ...this.placement !== void 0 ? { placement: this.placement } : {},
-        ...this.strategy !== void 0 ? { strategy: this.strategy } : {},
         ...this.text !== void 0 ? { text: this.text } : {},
+        ...this.placement !== void 0 ? { placement: this.placement } : {},
         ...this.open !== void 0 ? { open: this.open } : {},
         ...this.anchor !== void 0 ? { anchor: this.anchor } : {},
         onClick: (t) => this.$emit("click", t),
@@ -6048,7 +6619,8 @@ const $t = d({
       []
     );
   }
-}), ne = d({
+}), pe = l({
+  name: "VTreeItem",
   props: {
     /**
      * A decorative icon the custom element should have.
@@ -6125,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() {
@@ -6155,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,
@@ -6179,11 +6751,12 @@ 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: {
     /**
      * Indicates the element that represents the current item within a container or set of related elements.
@@ -6231,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() {
@@ -6274,7 +6847,8 @@ const $t = d({
       ]
     );
   }
-}), re = d({
+}), ve = l({
+  name: "VTag",
   props: {
     /**
      * A decorative icon the custom element should have.
@@ -6357,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;
@@ -6426,7 +7000,8 @@ const $t = d({
       []
     );
   }
-}), de = d({
+}), ye = l({
+  name: "VTagGroup",
   props: {
     /**
      * Indicates the element that represents the current item within a container or set of related elements.
@@ -6469,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() {
@@ -6510,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,
-  wt as VButton,
-  St as VCalendar,
-  xt as VCalendarEvent,
-  Nt as VCard,
-  Vt as VCheckbox,
-  Bt as VCombobox,
-  Kt as VDataGrid,
-  Tt as VDialog,
-  It as VDivider,
-  qt as VFab,
-  zt as VHeader,
-  Ft as VIcon,
-  Lt as VLayout,
-  Pt as VMenu,
-  Dt as VMenuItem,
-  Mt as VNav,
-  Ot as VNavDisclosure,
-  At as VNavItem,
-  Et as VNote,
-  Ht as VNumberField,
-  Gt 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
 };