@vonage/vivid-vue 3.1.1 → 3.2.1

package/dist/index.es.js

@@ -1,17 +1,17 @@
-import { ref as r, version as m, onBeforeMount as v, defineComponent as d, h as s } 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 B, registerCheckbox as V, 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 nt, registerTooltip as st, registerTreeItem as at, registerTreeView as rt } from "@vonage/vivid";
+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 B, registerCheckbox as V, 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 ct(t) {
+function mt(t) {
   p.value = t;
 }
 const a = m.startsWith("2");
-function h(t, o) {
-  const n = r(`${p.value}-${t}`);
+function l(t, o) {
+  const s = r(`${p.value}-${t}`);
   return v(() => {
     o(p.value);
-  }), n;
+  }), s;
 }
-const pt = d({
+const vt = d({
   props: {
     /**
      * Indicates the element that represents the current item within a container or set of related elements.
@@ -64,16 +64,16 @@ const pt = d({
     "change"
   ],
   setup(t, o) {
-    const n = h("accordion", y), e = r(null);
+    const s = l("accordion", y), e = r(null);
     return o.expose({
       closeAll() {
         var i;
         return (i = e.value) == null ? void 0 : i.closeAll();
       }
-    }), { componentName: n, element: e };
+    }), { componentName: s, element: e };
   },
   render() {
-    return a ? s(
+    return a ? n(
       this.componentName,
       {
         ref: "element",
@@ -81,6 +81,7 @@ const pt = d({
           ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
           ...this.expandMode !== void 0 ? { "expand-mode": this.expandMode } : {}
         },
+        class: "vvd-root",
         on: {
           click: (t) => this.$emit("click", t),
           focus: (t) => this.$emit("focus", t),
@@ -92,10 +93,11 @@ const pt = d({
         }
       },
       [this.$slots.default]
-    ) : s(
+    ) : n(
       this.componentName,
       {
         ref: "element",
+        class: "vvd-root",
         ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
         ...this.expandMode !== void 0 ? { "expand-mode": this.expandMode } : {},
         onClick: (t) => this.$emit("click", t),
@@ -112,7 +114,7 @@ const pt = d({
       ]
     );
   }
-}), mt = d({
+}), yt = d({
   props: {
     /**
      * A decorative icon the custom element should have.
@@ -195,11 +197,11 @@ const pt = d({
     "change"
   ],
   setup(t, o) {
-    const n = h("accordion-item", f), e = r(null);
-    return o.expose({}), { componentName: n, element: e };
+    const s = l("accordion-item", f), e = r(null);
+    return o.expose({}), { componentName: s, element: e };
   },
   render() {
-    return a ? s(
+    return a ? n(
       this.componentName,
       {
         ref: "element",
@@ -215,6 +217,7 @@ const pt = d({
           ...this.meta !== void 0 ? { meta: this.meta } : {},
           ...this.size !== void 0 ? { size: this.size } : {}
         },
+        class: "vvd-root",
         on: {
           click: (t) => this.$emit("click", t),
           focus: (t) => this.$emit("focus", t),
@@ -226,10 +229,11 @@ const pt = d({
         }
       },
       [this.$slots.default]
-    ) : s(
+    ) : n(
       this.componentName,
       {
         ref: "element",
+        class: "vvd-root",
         ...this.icon !== void 0 ? { icon: this.icon } : {},
         ...this.iconTrailing !== void 0 ? { "icon-trailing": this.iconTrailing } : {},
         ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
@@ -254,7 +258,7 @@ const pt = d({
       ]
     );
   }
-}), vt = d({
+}), ft = d({
   props: {
     /**
      * Indicates the element that represents the current item within a container or set of related elements.
@@ -311,11 +315,11 @@ const pt = d({
     "input"
   ],
   setup(t, o) {
-    const n = h("action-group", $), e = r(null);
-    return o.expose({}), { componentName: n, element: e };
+    const s = l("action-group", $), e = r(null);
+    return o.expose({}), { componentName: s, element: e };
   },
   render() {
-    return a ? s(
+    return a ? n(
       this.componentName,
       {
         ref: "element",
@@ -327,6 +331,7 @@ const pt = d({
           ...this.role !== void 0 ? { role: this.role } : {},
           ...this.ariaLabel !== void 0 ? { "aria-label": this.ariaLabel } : {}
         },
+        class: "vvd-root",
         on: {
           click: (t) => this.$emit("click", t),
           focus: (t) => this.$emit("focus", t),
@@ -337,10 +342,11 @@ const pt = d({
         }
       },
       [this.$slots.default]
-    ) : s(
+    ) : n(
       this.componentName,
       {
         ref: "element",
+        class: "vvd-root",
         ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
         ...this.shape !== void 0 ? { shape: this.shape } : {},
         ...this.appearance !== void 0 ? { appearance: this.appearance } : {},
@@ -361,21 +367,21 @@ const pt = d({
     );
   }
 });
-function dt(t, o) {
-  return o.forEach((n) => {
+function ht(t, o) {
+  return o.forEach((s) => {
     var e;
-    n.data || (n.data = {}), n.data.attrs = { ...(e = n.data) == null ? void 0 : e.attrs, slot: t };
+    s.data || (s.data = {}), s.data.attrs = { ...(e = s.data) == null ? void 0 : e.attrs, slot: t };
   }), o;
 }
-function ht(t, o) {
-  return o.forEach((n) => {
-    n.props || (n.props = {}), n.props = { ...n.props, slot: t };
+function ut(t, o) {
+  return o.forEach((s) => {
+    s.props || (s.props = {}), s.props = { ...s.props, slot: t };
   }), o;
 }
-function l(t, o) {
-  return o ? a ? dt(t, o) : ht(t, o()) : null;
+function h(t, o) {
+  return o ? a ? ht(t, o) : ut(t, o()) : null;
 }
-const yt = d({
+const $t = d({
   props: {
     /**
      * Indicates the element that represents the current item within a container or set of related elements.
@@ -446,11 +452,11 @@ const yt = d({
     "input"
   ],
   setup(t, o) {
-    const n = h("avatar", k), e = r(null);
-    return o.expose({}), { componentName: n, element: e };
+    const s = l("avatar", k), e = r(null);
+    return o.expose({}), { componentName: s, element: e };
   },
   render() {
-    return a ? s(
+    return a ? n(
       this.componentName,
       {
         ref: "element",
@@ -463,6 +469,7 @@ const yt = d({
           ...this.icon !== void 0 ? { icon: this.icon } : {},
           ...this.initials !== void 0 ? { initials: this.initials } : {}
         },
+        class: "vvd-root",
         on: {
           click: (t) => this.$emit("click", t),
           focus: (t) => this.$emit("focus", t),
@@ -474,12 +481,13 @@ const yt = d({
       },
       [
         // @slot graphic Assign nodes to the graphic slot to set a graphic media of any kind (e.g. image, illustration etc).
-        l("graphic", this.$slots.graphic)
+        h("graphic", this.$slots.graphic)
       ]
-    ) : s(
+    ) : n(
       this.componentName,
       {
         ref: "element",
+        class: "vvd-root",
         ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
         ...this.connotation !== void 0 ? { connotation: this.connotation } : {},
         ...this.shape !== void 0 ? { shape: this.shape } : {},
@@ -496,11 +504,11 @@ const yt = d({
       },
       [
         // @slot graphic Assign nodes to the graphic slot to set a graphic media of any kind (e.g. image, illustration etc).
-        l("graphic", this.$slots.graphic)
+        h("graphic", this.$slots.graphic)
       ]
     );
   }
-}), ft = d({
+}), kt = d({
   props: {
     /**
      * A decorative icon the custom element should have.
@@ -574,11 +582,11 @@ const yt = d({
     "input"
   ],
   setup(t, o) {
-    const n = h("badge", g), e = r(null);
-    return o.expose({}), { componentName: n, element: e };
+    const s = l("badge", g), e = r(null);
+    return o.expose({}), { componentName: s, element: e };
   },
   render() {
-    return a ? s(
+    return a ? n(
       this.componentName,
       {
         ref: "element",
@@ -591,6 +599,7 @@ const yt = d({
           ...this.appearance !== void 0 ? { appearance: this.appearance } : {},
           ...this.text !== void 0 ? { text: this.text } : {}
         },
+        class: "vvd-root",
         on: {
           click: (t) => this.$emit("click", t),
           focus: (t) => this.$emit("focus", t),
@@ -601,10 +610,11 @@ const yt = d({
         }
       },
       []
-    ) : s(
+    ) : n(
       this.componentName,
       {
         ref: "element",
+        class: "vvd-root",
         ...this.icon !== void 0 ? { icon: this.icon } : {},
         ...this.iconTrailing !== void 0 ? { "icon-trailing": this.iconTrailing } : {},
         ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
@@ -622,7 +632,7 @@ const yt = d({
       []
     );
   }
-}), $t = d({
+}), gt = d({
   props: {
     /**
      * A decorative icon the custom element should have.
@@ -683,16 +693,16 @@ const yt = d({
     "input"
   ],
   setup(t, o) {
-    const n = h("banner", b), e = r(null);
+    const s = l("banner", b), e = r(null);
     return o.expose({
       remove() {
         var i;
         return (i = e.value) == null ? void 0 : i.remove();
       }
-    }), { componentName: n, element: e };
+    }), { componentName: s, element: e };
   },
   render() {
-    return a ? s(
+    return a ? n(
       this.componentName,
       {
         ref: "element",
@@ -707,6 +717,7 @@ const yt = d({
           ...this.text !== void 0 ? { text: this.text } : {},
           ...this.connotation !== void 0 ? { connotation: this.connotation } : {}
         },
+        class: "vvd-root",
         on: {
           click: (t) => this.$emit("click", t),
           focus: (t) => this.$emit("focus", t),
@@ -718,12 +729,13 @@ const yt = d({
       },
       [
         // @slot action-items Add action items to banner using this slot.
-        l("action-items", this.$slots["action-items"])
+        h("action-items", this.$slots["action-items"])
       ]
-    ) : s(
+    ) : n(
       this.componentName,
       {
         ref: "element",
+        class: "vvd-root",
         ...this.icon !== void 0 ? { icon: this.icon } : {},
         ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
         ...this.actionHref !== void 0 ? { "action-href": this.actionHref } : {},
@@ -742,11 +754,11 @@ const yt = d({
       },
       [
         // @slot action-items Add action items to banner using this slot.
-        l("action-items", this.$slots["action-items"])
+        h("action-items", this.$slots["action-items"])
       ]
     );
   }
-}), kt = d({
+}), bt = d({
   props: {
     /**
      * Indicates the element that represents the current item within a container or set of related elements.
@@ -789,15 +801,16 @@ const yt = d({
     "input"
   ],
   setup(t, o) {
-    const n = h("breadcrumb", C), e = r(null);
-    return o.expose({}), { componentName: n, element: e };
+    const s = l("breadcrumb", C), e = r(null);
+    return o.expose({}), { componentName: s, element: e };
   },
   render() {
-    return a ? s(
+    return a ? n(
       this.componentName,
       {
         ref: "element",
         attrs: { ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {} },
+        class: "vvd-root",
         on: {
           click: (t) => this.$emit("click", t),
           focus: (t) => this.$emit("focus", t),
@@ -808,10 +821,11 @@ const yt = d({
         }
       },
       [this.$slots.default]
-    ) : s(
+    ) : n(
       this.componentName,
       {
         ref: "element",
+        class: "vvd-root",
         ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
         onClick: (t) => this.$emit("click", t),
         onFocus: (t) => this.$emit("focus", t),
@@ -826,7 +840,7 @@ const yt = d({
       ]
     );
   }
-}), gt = d({
+}), Ct = d({
   props: {
     /**
      * Indicates the element that represents the current item within a container or set of related elements.
@@ -902,11 +916,11 @@ const yt = d({
     "input"
   ],
   setup(t, o) {
-    const n = h("breadcrumb-item", w), e = r(null);
-    return o.expose({}), { componentName: n, element: e };
+    const s = l("breadcrumb-item", w), e = r(null);
+    return o.expose({}), { componentName: s, element: e };
   },
   render() {
-    return a ? s(
+    return a ? n(
       this.componentName,
       {
         ref: "element",
@@ -922,6 +936,7 @@ const yt = d({
           ...this.type !== void 0 ? { type: this.type } : {},
           ...this.text !== void 0 ? { text: this.text } : {}
         },
+        class: "vvd-root",
         on: {
           click: (t) => this.$emit("click", t),
           focus: (t) => this.$emit("focus", t),
@@ -932,10 +947,11 @@ const yt = d({
         }
       },
       []
-    ) : s(
+    ) : n(
       this.componentName,
       {
         ref: "element",
+        class: "vvd-root",
         ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
         ...this.download !== void 0 ? { download: this.download } : {},
         ...this.href !== void 0 ? { href: this.href } : {},
@@ -956,7 +972,7 @@ const yt = d({
       []
     );
   }
-}), bt = d({
+}), wt = d({
   props: {
     /**
      * A decorative icon the custom element should have.
@@ -1096,7 +1112,7 @@ const yt = d({
     "input"
   ],
   setup(t, o) {
-    const n = h("button", S), e = r(null);
+    const s = l("button", S), e = r(null);
     return o.expose({
       /**
        * {@inheritDoc (FormAssociated:interface).validate}
@@ -1105,10 +1121,10 @@ const yt = d({
         var i;
         return (i = e.value) == null ? void 0 : i.validate();
       }
-    }), { componentName: n, element: e };
+    }), { componentName: s, element: e };
   },
   render() {
-    return a ? s(
+    return a ? n(
       this.componentName,
       {
         ref: "element",
@@ -1137,6 +1153,7 @@ const yt = d({
           ...this.pending !== void 0 ? { pending: this.pending } : {},
           ...this.label !== void 0 ? { label: this.label } : {}
         },
+        class: "vvd-root",
         on: {
           click: (t) => this.$emit("click", t),
           focus: (t) => this.$emit("focus", t),
@@ -1147,10 +1164,11 @@ const yt = d({
         }
       },
       []
-    ) : s(
+    ) : n(
       this.componentName,
       {
         ref: "element",
+        class: "vvd-root",
         ...this.icon !== void 0 ? { icon: this.icon } : {},
         ...this.iconTrailing !== void 0 ? { "icon-trailing": this.iconTrailing } : {},
         ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
@@ -1184,7 +1202,7 @@ const yt = d({
       []
     );
   }
-}), Ct = d({
+}), St = d({
   props: {
     /**
      * Indicates the element that represents the current item within a container or set of related elements.
@@ -1254,16 +1272,16 @@ const yt = d({
     "input"
   ],
   setup(t, o) {
-    const n = h("calendar", x), e = r(null);
+    const s = l("calendar", x), e = r(null);
     return o.expose({
       onKeydown(i) {
         var u;
         return (u = e.value) == null ? void 0 : u.onKeydown(i);
       }
-    }), { componentName: n, element: e };
+    }), { componentName: s, element: e };
   },
   render() {
-    return a ? s(
+    return a ? n(
       this.componentName,
       {
         ref: "element",
@@ -1272,6 +1290,7 @@ const yt = d({
           ...this.startDay !== void 0 ? { "start-day": this.startDay } : {},
           ...this.hour12 !== void 0 ? { hour12: this.hour12 } : {}
         },
+        class: "vvd-root",
         domProps: {
           ...this.datetime !== void 0 ? { datetime: this.datetime } : {},
           ...this.locales !== void 0 ? { locales: this.locales } : {}
@@ -1288,24 +1307,25 @@ const yt = d({
       [
         this.$slots.default,
         // @slot day-0 Assign elements to corresponding day column using this slot.
-        l("day-0", this.$slots["day-0"]),
+        h("day-0", this.$slots["day-0"]),
         // @slot day-1 Assign elements to corresponding day column using this slot.
-        l("day-1", this.$slots["day-1"]),
+        h("day-1", this.$slots["day-1"]),
         // @slot day-2 Assign elements to corresponding day column using this slot.
-        l("day-2", this.$slots["day-2"]),
+        h("day-2", this.$slots["day-2"]),
         // @slot day-3 Assign elements to corresponding day column using this slot.
-        l("day-3", this.$slots["day-3"]),
+        h("day-3", this.$slots["day-3"]),
         // @slot day-4 Assign elements to corresponding day column using this slot.
-        l("day-4", this.$slots["day-4"]),
+        h("day-4", this.$slots["day-4"]),
         // @slot day-5 Assign elements to corresponding day column using this slot.
-        l("day-5", this.$slots["day-5"]),
+        h("day-5", this.$slots["day-5"]),
         // @slot day-6 Assign elements to corresponding day column using this slot.
-        l("day-6", this.$slots["day-6"])
+        h("day-6", this.$slots["day-6"])
       ]
-    ) : s(
+    ) : n(
       this.componentName,
       {
         ref: "element",
+        class: "vvd-root",
         ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
         ...this.datetime !== void 0 ? { datetime: this.datetime } : {},
         ...this.startDay !== void 0 ? { "start-day": this.startDay } : {},
@@ -1322,23 +1342,23 @@ const yt = d({
         // @ts-ignore
         this.$slots.default && this.$slots.default(),
         // @slot day-0 Assign elements to corresponding day column using this slot.
-        l("day-0", this.$slots["day-0"]),
+        h("day-0", this.$slots["day-0"]),
         // @slot day-1 Assign elements to corresponding day column using this slot.
-        l("day-1", this.$slots["day-1"]),
+        h("day-1", this.$slots["day-1"]),
         // @slot day-2 Assign elements to corresponding day column using this slot.
-        l("day-2", this.$slots["day-2"]),
+        h("day-2", this.$slots["day-2"]),
         // @slot day-3 Assign elements to corresponding day column using this slot.
-        l("day-3", this.$slots["day-3"]),
+        h("day-3", this.$slots["day-3"]),
         // @slot day-4 Assign elements to corresponding day column using this slot.
-        l("day-4", this.$slots["day-4"]),
+        h("day-4", this.$slots["day-4"]),
         // @slot day-5 Assign elements to corresponding day column using this slot.
-        l("day-5", this.$slots["day-5"]),
+        h("day-5", this.$slots["day-5"]),
         // @slot day-6 Assign elements to corresponding day column using this slot.
-        l("day-6", this.$slots["day-6"])
+        h("day-6", this.$slots["day-6"])
       ]
     );
   }
-}), wt = d({
+}), xt = d({
   props: {
     /**
      * Indicates the element that represents the current item within a container or set of related elements.
@@ -1412,11 +1432,11 @@ const yt = d({
     "input"
   ],
   setup(t, o) {
-    const n = h("calendar-event", N), e = r(null);
-    return o.expose({}), { componentName: n, element: e };
+    const s = l("calendar-event", N), e = r(null);
+    return o.expose({}), { componentName: s, element: e };
   },
   render() {
-    return a ? s(
+    return a ? n(
       this.componentName,
       {
         ref: "element",
@@ -1430,6 +1450,7 @@ const yt = d({
           ...this.start !== void 0 ? { start: this.start } : {},
           ...this.duration !== void 0 ? { duration: this.duration } : {}
         },
+        class: "vvd-root",
         on: {
           click: (t) => this.$emit("click", t),
           focus: (t) => this.$emit("focus", t),
@@ -1440,10 +1461,11 @@ const yt = d({
         }
       },
       []
-    ) : s(
+    ) : n(
       this.componentName,
       {
         ref: "element",
+        class: "vvd-root",
         ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
         ...this.heading !== void 0 ? { heading: this.heading } : {},
         ...this.description !== void 0 ? { description: this.description } : {},
@@ -1462,7 +1484,7 @@ const yt = d({
       []
     );
   }
-}), St = d({
+}), Nt = d({
   props: {
     /**
      * Indicates the element that represents the current item within a container or set of related elements.
@@ -1532,11 +1554,11 @@ const yt = d({
     "input"
   ],
   setup(t, o) {
-    const n = h("card", B), e = r(null);
-    return o.expose({}), { componentName: n, element: e };
+    const s = l("card", B), e = r(null);
+    return o.expose({}), { componentName: s, element: e };
   },
   render() {
-    return a ? s(
+    return a ? n(
       this.componentName,
       {
         ref: "element",
@@ -1548,6 +1570,7 @@ const yt = d({
           ...this.icon !== void 0 ? { icon: this.icon } : {},
           ...this.elevation !== void 0 ? { elevation: this.elevation } : {}
         },
+        class: "vvd-root",
         on: {
           click: (t) => this.$emit("click", t),
           focus: (t) => this.$emit("focus", t),
@@ -1559,20 +1582,21 @@ const yt = d({
       },
       [
         // @slot graphic The graphic slot overrides the icon property.
-        l("graphic", this.$slots.graphic),
+        h("graphic", this.$slots.graphic),
         // @slot media The media slot is mainly for images or video content above the card header.
-        l("media", this.$slots.media),
+        h("media", this.$slots.media),
         // @slot meta The meta slot is for action content in the card header.
-        l("meta", this.$slots.meta),
+        h("meta", this.$slots.meta),
         // @slot footer The footer slot is for content in the card footer.
-        l("footer", this.$slots.footer),
+        h("footer", this.$slots.footer),
         // @slot main Assign nodes to main slot to fully override a card's predefined flow and style with your own.
-        l("main", this.$slots.main)
+        h("main", this.$slots.main)
       ]
-    ) : s(
+    ) : n(
       this.componentName,
       {
         ref: "element",
+        class: "vvd-root",
         ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
         ...this.headline !== void 0 ? { headline: this.headline } : {},
         ...this.subtitle !== void 0 ? { subtitle: this.subtitle } : {},
@@ -1588,19 +1612,19 @@ const yt = d({
       },
       [
         // @slot graphic The graphic slot overrides the icon property.
-        l("graphic", this.$slots.graphic),
+        h("graphic", this.$slots.graphic),
         // @slot media The media slot is mainly for images or video content above the card header.
-        l("media", this.$slots.media),
+        h("media", this.$slots.media),
         // @slot meta The meta slot is for action content in the card header.
-        l("meta", this.$slots.meta),
+        h("meta", this.$slots.meta),
         // @slot footer The footer slot is for content in the card footer.
-        l("footer", this.$slots.footer),
+        h("footer", this.$slots.footer),
         // @slot main Assign nodes to main slot to fully override a card's predefined flow and style with your own.
-        l("main", this.$slots.main)
+        h("main", this.$slots.main)
       ]
     );
   }
-}), xt = d({
+}), Bt = d({
   model: a ? {
     prop: "modelValue",
     event: "update:modelValue"
@@ -1697,11 +1721,11 @@ const yt = d({
     "update:modelValue"
   ],
   setup(t, o) {
-    const n = h("checkbox", V), e = r(null);
-    return o.expose({}), { componentName: n, element: e };
+    const s = l("checkbox", V), e = r(null);
+    return o.expose({}), { componentName: s, element: e };
   },
   render() {
-    return a ? s(
+    return a ? n(
       this.componentName,
       {
         ref: "element",
@@ -1717,6 +1741,7 @@ const yt = d({
           ...this.readonly !== void 0 ? { readonly: this.readonly } : {},
           ...this.label !== void 0 ? { label: this.label } : {}
         },
+        class: "vvd-root",
         on: {
           click: (t) => this.$emit("click", t),
           focus: (t) => this.$emit("focus", t),
@@ -1728,10 +1753,11 @@ const yt = d({
         }
       },
       []
-    ) : s(
+    ) : n(
       this.componentName,
       {
         ref: "element",
+        class: "vvd-root",
         ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
         ...this.disabled !== void 0 ? { disabled: this.disabled } : {},
         ...this.value !== void 0 ? { value: this.value } : {},
@@ -1753,7 +1779,7 @@ const yt = d({
       []
     );
   }
-}), Nt = d({
+}), Vt = d({
   model: a ? {
     prop: "modelValue",
     event: "update:modelValue"
@@ -1864,7 +1890,7 @@ const yt = d({
     "update:modelValue"
   ],
   setup(t, o) {
-    const n = h("combobox", K), e = r(null);
+    const s = l("combobox", K), e = r(null);
     return o.expose({
       /**
        * {@inheritDoc (FormAssociated:interface).validate}
@@ -1901,10 +1927,10 @@ const yt = d({
         var i;
         return (i = e.value) == null ? void 0 : i.setSelectedOptions();
       }
-    }), { componentName: n, element: e };
+    }), { componentName: s, element: e };
   },
   render() {
-    return a ? s(
+    return a ? n(
       this.componentName,
       {
         ref: "element",
@@ -1923,6 +1949,7 @@ const yt = d({
           ...this.disabled !== void 0 ? { disabled: this.disabled } : {},
           ...this.placement !== void 0 ? { placement: this.placement } : {}
         },
+        class: "vvd-root",
         on: {
           click: (t) => this.$emit("click", t),
           focus: (t) => this.$emit("focus", t),
@@ -1934,10 +1961,11 @@ const yt = d({
         }
       },
       [this.$slots.default]
-    ) : s(
+    ) : n(
       this.componentName,
       {
         ref: "element",
+        class: "vvd-root",
         ...this.label !== void 0 ? { label: this.label } : {},
         ...this.icon !== void 0 ? { icon: this.icon } : {},
         ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
@@ -1965,7 +1993,7 @@ const yt = d({
       ]
     );
   }
-}), Bt = d({
+}), Kt = d({
   props: {
     /**
      * Indicates the element that represents the current item within a container or set of related elements.
@@ -2009,11 +2037,11 @@ const yt = d({
     "input"
   ],
   setup(t, o) {
-    const n = h("data-grid", T), e = r(null);
-    return o.expose({}), { componentName: n, element: e };
+    const s = l("data-grid", T), e = r(null);
+    return o.expose({}), { componentName: s, element: e };
   },
   render() {
-    return a ? s(
+    return a ? n(
       this.componentName,
       {
         ref: "element",
@@ -2021,6 +2049,7 @@ const yt = d({
           ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
           ...this.selectionMode !== void 0 ? { "selection-mode": this.selectionMode } : {}
         },
+        class: "vvd-root",
         on: {
           click: (t) => this.$emit("click", t),
           focus: (t) => this.$emit("focus", t),
@@ -2031,10 +2060,11 @@ const yt = d({
         }
       },
       [this.$slots.default]
-    ) : s(
+    ) : n(
       this.componentName,
       {
         ref: "element",
+        class: "vvd-root",
         ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
         ...this.selectionMode !== void 0 ? { "selection-mode": this.selectionMode } : {},
         onClick: (t) => this.$emit("click", t),
@@ -2050,7 +2080,7 @@ const yt = d({
       ]
     );
   }
-}), Vt = d({
+}), Tt = d({
   props: {
     /**
      * Indicates the element that represents the current item within a container or set of related elements.
@@ -2109,10 +2139,15 @@ const yt = d({
      * Fires when the value of an element has been changed.
      * @type {Event}
      */
-    "input"
+    "input",
+    /**
+     * Emitted when the dialog is closed
+     * @type {unknown}
+     */
+    "close"
   ],
   setup(t, o) {
-    const n = h("dialog", I), e = r(null);
+    const s = l("dialog", I), e = r(null);
     return o.expose({
       openChanged(i, u) {
         var c;
@@ -2130,10 +2165,10 @@ const yt = d({
         var i;
         return (i = e.value) == null ? void 0 : i.showModal();
       }
-    }), { componentName: n, element: e };
+    }), { componentName: s, element: e };
   },
   render() {
-    return a ? s(
+    return a ? n(
       this.componentName,
       {
         ref: "element",
@@ -2149,29 +2184,32 @@ const yt = d({
           ...this.ariaLabel !== void 0 ? { "aria-label": this.ariaLabel } : {},
           ...this.ariaDescribedby !== void 0 ? { "aria-describedby": this.ariaDescribedby } : {}
         },
+        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)
+          input: (t) => this.$emit("input", t),
+          close: (t) => this.$emit("close", t)
         }
       },
       [
         // @slot graphic Use the graphic slot in order to replace the icon.
-        l("graphic", this.$slots.graphic),
+        h("graphic", this.$slots.graphic),
         // @slot body Use the body slot in order to add custom HTML to the dialog.
-        l("body", this.$slots.body),
+        h("body", this.$slots.body),
         // @slot footer Use the footer slot in order to add action buttons to the bottom of the dialog.
-        l("footer", this.$slots.footer),
+        h("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.
-        l("main", this.$slots.main)
+        h("main", this.$slots.main)
       ]
-    ) : s(
+    ) : n(
       this.componentName,
       {
         ref: "element",
+        class: "vvd-root",
         ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
         ...this.open !== void 0 ? { open: this.open } : {},
         ...this.icon !== void 0 ? { icon: this.icon } : {},
@@ -2187,21 +2225,22 @@ const yt = d({
         onBlur: (t) => this.$emit("blur", t),
         onKeydown: (t) => this.$emit("keydown", t),
         onKeyup: (t) => this.$emit("keyup", t),
-        onInput: (t) => this.$emit("input", t)
+        onInput: (t) => this.$emit("input", t),
+        onClose: (t) => this.$emit("close", t)
       },
       [
         // @slot graphic Use the graphic slot in order to replace the icon.
-        l("graphic", this.$slots.graphic),
+        h("graphic", this.$slots.graphic),
         // @slot body Use the body slot in order to add custom HTML to the dialog.
-        l("body", this.$slots.body),
+        h("body", this.$slots.body),
         // @slot footer Use the footer slot in order to add action buttons to the bottom of the dialog.
-        l("footer", this.$slots.footer),
+        h("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.
-        l("main", this.$slots.main)
+        h("main", this.$slots.main)
       ]
     );
   }
-}), Kt = d({
+}), It = d({
   props: {
     /**
      * Indicates the element that represents the current item within a container or set of related elements.
@@ -2252,11 +2291,11 @@ const yt = d({
     "input"
   ],
   setup(t, o) {
-    const n = h("divider", q), e = r(null);
-    return o.expose({}), { componentName: n, element: e };
+    const s = l("divider", q), e = r(null);
+    return o.expose({}), { componentName: s, element: e };
   },
   render() {
-    return a ? s(
+    return a ? n(
       this.componentName,
       {
         ref: "element",
@@ -2265,6 +2304,7 @@ const yt = d({
           ...this.role !== void 0 ? { role: this.role } : {},
           ...this.orientation !== void 0 ? { orientation: this.orientation } : {}
         },
+        class: "vvd-root",
         on: {
           click: (t) => this.$emit("click", t),
           focus: (t) => this.$emit("focus", t),
@@ -2275,10 +2315,11 @@ const yt = d({
         }
       },
       []
-    ) : s(
+    ) : n(
       this.componentName,
       {
         ref: "element",
+        class: "vvd-root",
         ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
         ...this.role !== void 0 ? { role: this.role } : {},
         ...this.orientation !== void 0 ? { orientation: this.orientation } : {},
@@ -2292,7 +2333,7 @@ const yt = d({
       []
     );
   }
-}), Tt = d({
+}), qt = d({
   props: {
     /**
      * A decorative icon the custom element should have.
@@ -2416,7 +2457,7 @@ const yt = d({
     "input"
   ],
   setup(t, o) {
-    const n = h("fab", z), e = r(null);
+    const s = l("fab", z), e = r(null);
     return o.expose({
       /**
        * {@inheritDoc (FormAssociated:interface).validate}
@@ -2425,10 +2466,10 @@ const yt = d({
         var i;
         return (i = e.value) == null ? void 0 : i.validate();
       }
-    }), { componentName: n, element: e };
+    }), { componentName: s, element: e };
   },
   render() {
-    return a ? s(
+    return a ? n(
       this.componentName,
       {
         ref: "element",
@@ -2453,6 +2494,7 @@ const yt = d({
           ...this.size !== void 0 ? { size: this.size } : {},
           ...this.label !== void 0 ? { label: this.label } : {}
         },
+        class: "vvd-root",
         on: {
           click: (t) => this.$emit("click", t),
           focus: (t) => this.$emit("focus", t),
@@ -2463,10 +2505,11 @@ const yt = d({
         }
       },
       []
-    ) : s(
+    ) : n(
       this.componentName,
       {
         ref: "element",
+        class: "vvd-root",
         ...this.icon !== void 0 ? { icon: this.icon } : {},
         ...this.iconTrailing !== void 0 ? { "icon-trailing": this.iconTrailing } : {},
         ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
@@ -2496,7 +2539,7 @@ const yt = d({
       []
     );
   }
-}), It = d({
+}), zt = d({
   props: {
     /**
      * Indicates the element that represents the current item within a container or set of related elements.
@@ -2547,11 +2590,11 @@ const yt = d({
     "input"
   ],
   setup(t, o) {
-    const n = h("header", F), e = r(null);
-    return o.expose({}), { componentName: n, element: e };
+    const s = l("header", F), e = r(null);
+    return o.expose({}), { componentName: s, element: e };
   },
   render() {
-    return a ? s(
+    return a ? n(
       this.componentName,
       {
         ref: "element",
@@ -2560,6 +2603,7 @@ const yt = d({
           ...this.elevationShadow !== void 0 ? { "elevation-shadow": this.elevationShadow } : {},
           ...this.alternate !== void 0 ? { alternate: this.alternate } : {}
         },
+        class: "vvd-root",
         on: {
           click: (t) => this.$emit("click", t),
           focus: (t) => this.$emit("focus", t),
@@ -2572,14 +2616,15 @@ const yt = d({
       [
         this.$slots.default,
         // @slot action-items Nodes assigned to action-items slot will be set at the end of the header.
-        l("action-items", this.$slots["action-items"]),
+        h("action-items", this.$slots["action-items"]),
         // @slot app-content Content vertically aligned with header.
-        l("app-content", this.$slots["app-content"])
+        h("app-content", this.$slots["app-content"])
       ]
-    ) : s(
+    ) : n(
       this.componentName,
       {
         ref: "element",
+        class: "vvd-root",
         ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
         ...this.elevationShadow !== void 0 ? { "elevation-shadow": this.elevationShadow } : {},
         ...this.alternate !== void 0 ? { alternate: this.alternate } : {},
@@ -2594,13 +2639,13 @@ const yt = 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.
-        l("action-items", this.$slots["action-items"]),
+        h("action-items", this.$slots["action-items"]),
         // @slot app-content Content vertically aligned with header.
-        l("app-content", this.$slots["app-content"])
+        h("app-content", this.$slots["app-content"])
       ]
     );
   }
-}), qt = d({
+}), Ft = d({
   props: {
     /**
      * Indicates the element that represents the current item within a container or set of related elements.
@@ -2659,16 +2704,16 @@ const yt = d({
     "input"
   ],
   setup(t, o) {
-    const n = h("icon", L), e = r(null);
+    const s = l("icon", L), e = r(null);
     return o.expose({
       nameChanged() {
         var i;
         return (i = e.value) == null ? void 0 : i.nameChanged();
       }
-    }), { componentName: n, element: e };
+    }), { componentName: s, element: e };
   },
   render() {
-    return a ? s(
+    return a ? n(
       this.componentName,
       {
         ref: "element",
@@ -2678,6 +2723,7 @@ const yt = d({
           ...this.size !== void 0 ? { size: this.size } : {},
           ...this.name !== void 0 ? { name: this.name } : {}
         },
+        class: "vvd-root",
         on: {
           click: (t) => this.$emit("click", t),
           focus: (t) => this.$emit("focus", t),
@@ -2688,10 +2734,11 @@ const yt = d({
         }
       },
       [this.$slots.default]
-    ) : s(
+    ) : n(
       this.componentName,
       {
         ref: "element",
+        class: "vvd-root",
         ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
         ...this.connotation !== void 0 ? { connotation: this.connotation } : {},
         ...this.size !== void 0 ? { size: this.size } : {},
@@ -2709,7 +2756,7 @@ const yt = d({
       ]
     );
   }
-}), zt = d({
+}), Lt = d({
   props: {
     /**
      * Indicates the element that represents the current item within a container or set of related elements.
@@ -2768,11 +2815,11 @@ const yt = d({
     "input"
   ],
   setup(t, o) {
-    const n = h("layout", P), e = r(null);
-    return o.expose({}), { componentName: n, element: e };
+    const s = l("layout", P), e = r(null);
+    return o.expose({}), { componentName: s, element: e };
   },
   render() {
-    return a ? s(
+    return a ? n(
       this.componentName,
       {
         ref: "element",
@@ -2783,6 +2830,7 @@ const yt = d({
           ...this.columnSpacing !== void 0 ? { "column-spacing": this.columnSpacing } : {},
           ...this.autoSizing !== void 0 ? { "auto-sizing": this.autoSizing } : {}
         },
+        class: "vvd-root",
         on: {
           click: (t) => this.$emit("click", t),
           focus: (t) => this.$emit("focus", t),
@@ -2793,10 +2841,11 @@ const yt = d({
         }
       },
       [this.$slots.default]
-    ) : s(
+    ) : n(
       this.componentName,
       {
         ref: "element",
+        class: "vvd-root",
         ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
         ...this.gutters !== void 0 ? { gutters: this.gutters } : {},
         ...this.columnBasis !== void 0 ? { "column-basis": this.columnBasis } : {},
@@ -2815,7 +2864,7 @@ const yt = d({
       ]
     );
   }
-}), Ft = d({
+}), Pt = d({
   props: {
     /**
      * Indicates the element that represents the current item within a container or set of related elements.
@@ -2838,7 +2887,7 @@ const yt = d({
     /**
      * ID reference to element in the menu's owner document.
      */
-    anchor: { type: String, default: void 0 }
+    anchor: { type: [Object, String], default: void 0 }
   },
   emits: [
     /**
@@ -2873,7 +2922,7 @@ const yt = d({
     "input"
   ],
   setup(t, o) {
-    const n = h("menu", D), e = r(null);
+    const s = l("menu", D), e = r(null);
     return o.expose({
       /**
        * Focuses the first item in the menu.
@@ -2893,19 +2942,20 @@ const yt = d({
         var c;
         return (c = e.value) == null ? void 0 : c.anchorChanged(i, u);
       }
-    }), { componentName: n, element: e };
+    }), { componentName: s, element: e };
   },
   render() {
-    return a ? s(
+    return a ? n(
       this.componentName,
       {
         ref: "element",
         attrs: {
           ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
           ...this.open !== void 0 ? { open: this.open } : {},
-          ...this.placement !== void 0 ? { placement: this.placement } : {},
-          ...this.anchor !== void 0 ? { anchor: this.anchor } : {}
+          ...this.placement !== void 0 ? { placement: this.placement } : {}
         },
+        class: "vvd-root",
+        domProps: { ...this.anchor !== void 0 ? { anchor: this.anchor } : {} },
         on: {
           click: (t) => this.$emit("click", t),
           focus: (t) => this.$emit("focus", t),
@@ -2916,10 +2966,11 @@ const yt = d({
         }
       },
       [this.$slots.default]
-    ) : s(
+    ) : n(
       this.componentName,
       {
         ref: "element",
+        class: "vvd-root",
         ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
         ...this.open !== void 0 ? { open: this.open } : {},
         ...this.placement !== void 0 ? { placement: this.placement } : {},
@@ -2937,7 +2988,11 @@ const yt = d({
       ]
     );
   }
-}), Lt = d({
+}), Dt = d({
+  model: a ? {
+    prop: "modelValue",
+    event: "update:modelValue"
+  } : void 0,
   props: {
     /**
      * A decorative icon the custom element should have.
@@ -2969,7 +3024,7 @@ const yt = d({
     /**
      * The checked value of the element.
      */
-    checked: { type: Boolean, default: void 0 },
+    modelValue: { type: Boolean, default: void 0 },
     /**
      * Indicates the menu item's text.
      */
@@ -3017,16 +3072,16 @@ const yt = d({
     "expanded-change",
     /**
      * Fires a custom 'change' event when a non-submenu item with a role of `menuitemcheckbox`, `menuitemradio`, or `menuitem` is invoked
-     * @type {unknown}
+     * @type {boolean}
      */
-    "change"
+    "update:modelValue"
   ],
   setup(t, o) {
-    const n = h("menu-item", M), e = r(null);
-    return o.expose({}), { componentName: n, element: e };
+    const s = l("menu-item", M), e = r(null);
+    return o.expose({}), { componentName: s, element: e };
   },
   render() {
-    return a ? s(
+    return a ? n(
       this.componentName,
       {
         ref: "element",
@@ -3036,10 +3091,11 @@ const yt = d({
           ...this.disabled !== void 0 ? { disabled: this.disabled } : {},
           ...this.expanded !== void 0 ? { expanded: this.expanded } : {},
           ...this.role !== void 0 ? { role: this.role } : {},
-          ...this.checked !== void 0 ? { checked: this.checked } : {},
+          ...this.modelValue !== void 0 ? { checked: this.modelValue } : {},
           ...this.text !== void 0 ? { text: this.text } : {},
           ...this.textSecondary !== void 0 ? { "text-secondary": this.textSecondary } : {}
         },
+        class: "vvd-root",
         on: {
           click: (t) => this.$emit("click", t),
           focus: (t) => this.$emit("focus", t),
@@ -3048,20 +3104,21 @@ const yt = d({
           keyup: (t) => this.$emit("keyup", t),
           input: (t) => this.$emit("input", t),
           "expanded-change": (t) => this.$emit("expanded-change", t),
-          change: (t) => this.$emit("change", t)
+          change: (t) => this.$emit("update:modelValue", t.target.checked)
         }
       },
       []
-    ) : s(
+    ) : n(
       this.componentName,
       {
         ref: "element",
+        class: "vvd-root",
         ...this.icon !== void 0 ? { icon: this.icon } : {},
         ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
         ...this.disabled !== void 0 ? { disabled: this.disabled } : {},
         ...this.expanded !== void 0 ? { expanded: this.expanded } : {},
         ...this.role !== void 0 ? { role: this.role } : {},
-        ...this.checked !== void 0 ? { checked: this.checked } : {},
+        ...this.modelValue !== void 0 ? { checked: this.modelValue } : {},
         ...this.text !== void 0 ? { text: this.text } : {},
         ...this.textSecondary !== void 0 ? { "text-secondary": this.textSecondary } : {},
         onClick: (t) => this.$emit("click", t),
@@ -3071,12 +3128,12 @@ const yt = d({
         onKeyup: (t) => this.$emit("keyup", t),
         onInput: (t) => this.$emit("input", t),
         onExpandedChange: (t) => this.$emit("expanded-change", t),
-        onChange: (t) => this.$emit("change", t)
+        onChange: (t) => this.$emit("update:modelValue", t.target.checked)
       },
       []
     );
   }
-}), Pt = d({
+}), Mt = d({
   props: {
     /**
      * Indicates the element that represents the current item within a container or set of related elements.
@@ -3119,15 +3176,16 @@ const yt = d({
     "input"
   ],
   setup(t, o) {
-    const n = h("nav", O), e = r(null);
-    return o.expose({}), { componentName: n, element: e };
+    const s = l("nav", O), e = r(null);
+    return o.expose({}), { componentName: s, element: e };
   },
   render() {
-    return a ? s(
+    return a ? n(
       this.componentName,
       {
         ref: "element",
         attrs: { ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {} },
+        class: "vvd-root",
         on: {
           click: (t) => this.$emit("click", t),
           focus: (t) => this.$emit("focus", t),
@@ -3138,10 +3196,11 @@ const yt = d({
         }
       },
       [this.$slots.default]
-    ) : s(
+    ) : n(
       this.componentName,
       {
         ref: "element",
+        class: "vvd-root",
         ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
         onClick: (t) => this.$emit("click", t),
         onFocus: (t) => this.$emit("focus", t),
@@ -3156,7 +3215,7 @@ const yt = d({
       ]
     );
   }
-}), Dt = d({
+}), Ot = d({
   props: {
     /**
      * A decorative icon the custom element should have.
@@ -3212,11 +3271,11 @@ const yt = d({
     "input"
   ],
   setup(t, o) {
-    const n = h("nav-disclosure", A), e = r(null);
-    return o.expose({}), { componentName: n, element: e };
+    const s = l("nav-disclosure", A), e = r(null);
+    return o.expose({}), { componentName: s, element: e };
   },
   render() {
-    return a ? s(
+    return a ? n(
       this.componentName,
       {
         ref: "element",
@@ -3226,6 +3285,7 @@ const yt = d({
           ...this.label !== void 0 ? { label: this.label } : {},
           ...this.open !== void 0 ? { open: this.open } : {}
         },
+        class: "vvd-root",
         on: {
           click: (t) => this.$emit("click", t),
           focus: (t) => this.$emit("focus", t),
@@ -3236,10 +3296,11 @@ const yt = d({
         }
       },
       [this.$slots.default]
-    ) : s(
+    ) : n(
       this.componentName,
       {
         ref: "element",
+        class: "vvd-root",
         ...this.icon !== void 0 ? { icon: this.icon } : {},
         ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
         ...this.label !== void 0 ? { label: this.label } : {},
@@ -3257,7 +3318,7 @@ const yt = d({
       ]
     );
   }
-}), Mt = d({
+}), At = d({
   props: {
     /**
      * A decorative icon the custom element should have.
@@ -3344,11 +3405,11 @@ const yt = d({
     "input"
   ],
   setup(t, o) {
-    const n = h("nav-item", E), e = r(null);
-    return o.expose({}), { componentName: n, element: e };
+    const s = l("nav-item", E), e = r(null);
+    return o.expose({}), { componentName: s, element: e };
   },
   render() {
-    return a ? s(
+    return a ? n(
       this.componentName,
       {
         ref: "element",
@@ -3365,6 +3426,7 @@ const yt = d({
           ...this.type !== void 0 ? { type: this.type } : {},
           ...this.text !== void 0 ? { text: this.text } : {}
         },
+        class: "vvd-root",
         on: {
           click: (t) => this.$emit("click", t),
           focus: (t) => this.$emit("focus", t),
@@ -3375,10 +3437,11 @@ const yt = d({
         }
       },
       []
-    ) : s(
+    ) : n(
       this.componentName,
       {
         ref: "element",
+        class: "vvd-root",
         ...this.icon !== void 0 ? { icon: this.icon } : {},
         ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
         ...this.download !== void 0 ? { download: this.download } : {},
@@ -3400,7 +3463,7 @@ const yt = d({
       []
     );
   }
-}), Ot = d({
+}), Et = d({
   props: {
     /**
      * A decorative icon the custom element should have.
@@ -3459,11 +3522,11 @@ const yt = d({
     "input"
   ],
   setup(t, o) {
-    const n = h("note", H), e = r(null);
-    return o.expose({}), { componentName: n, element: e };
+    const s = l("note", H), e = r(null);
+    return o.expose({}), { componentName: s, element: e };
   },
   render() {
-    return a ? s(
+    return a ? n(
       this.componentName,
       {
         ref: "element",
@@ -3473,6 +3536,7 @@ const yt = d({
           ...this.headline !== void 0 ? { headline: this.headline } : {},
           ...this.connotation !== void 0 ? { connotation: this.connotation } : {}
         },
+        class: "vvd-root",
         on: {
           click: (t) => this.$emit("click", t),
           focus: (t) => this.$emit("focus", t),
@@ -3483,10 +3547,11 @@ const yt = d({
         }
       },
       [this.$slots.default]
-    ) : s(
+    ) : n(
       this.componentName,
       {
         ref: "element",
+        class: "vvd-root",
         ...this.icon !== void 0 ? { icon: this.icon } : {},
         ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
         ...this.headline !== void 0 ? { headline: this.headline } : {},
@@ -3504,7 +3569,7 @@ const yt = d({
       ]
     );
   }
-}), At = d({
+}), Ht = d({
   model: a ? {
     prop: "modelValue",
     event: "update:modelValue"
@@ -3652,7 +3717,7 @@ const yt = d({
     "change"
   ],
   setup(t, o) {
-    const n = h("number-field", G), e = r(null);
+    const s = l("number-field", G), e = r(null);
     return o.expose({
       /**
        * {@inheritDoc (FormAssociated:interface).validate}
@@ -3682,10 +3747,10 @@ const yt = d({
         var i;
         return (i = e.value) == null ? void 0 : i.select();
       }
-    }), { componentName: n, element: e };
+    }), { componentName: s, element: e };
   },
   render() {
-    return a ? s(
+    return a ? n(
       this.componentName,
       {
         ref: "element",
@@ -3716,6 +3781,7 @@ const yt = d({
           ...this.shape !== void 0 ? { shape: this.shape } : {},
           ...this.autoComplete !== void 0 ? { autoComplete: this.autoComplete } : {}
         },
+        class: "vvd-root",
         on: {
           click: (t) => this.$emit("click", t),
           focus: (t) => this.$emit("focus", t),
@@ -3727,10 +3793,11 @@ const yt = d({
         }
       },
       []
-    ) : s(
+    ) : n(
       this.componentName,
       {
         ref: "element",
+        class: "vvd-root",
         ...this.successText !== void 0 ? { "success-text": this.successText } : {},
         ...this.helperText !== void 0 ? { "helper-text": this.helperText } : {},
         ...this.charCount !== void 0 ? { "char-count": this.charCount } : {},
@@ -3767,7 +3834,7 @@ const yt = d({
       []
     );
   }
-}), Et = d({
+}), Gt = d({
   props: {
     /**
      * A decorative icon the custom element should have.
@@ -3837,7 +3904,7 @@ const yt = d({
     "input"
   ],
   setup(t, o) {
-    const n = h("option", R), e = r(null);
+    const s = l("option", R), e = r(null);
     return o.expose({
       /**
        * Updates the ariaChecked property when the checked property changes.
@@ -3850,10 +3917,10 @@ const yt = d({
         var c;
         return (c = e.value) == null ? void 0 : c.initialValueChanged(i, u);
       }
-    }), { componentName: n, element: e };
+    }), { componentName: s, element: e };
   },
   render() {
-    return a ? s(
+    return a ? n(
       this.componentName,
       {
         ref: "element",
@@ -3867,6 +3934,7 @@ const yt = d({
           ...this.text !== void 0 ? { text: this.text } : {},
           ...this.label !== void 0 ? { label: this.label } : {}
         },
+        class: "vvd-root",
         on: {
           click: (t) => this.$emit("click", t),
           focus: (t) => this.$emit("focus", t),
@@ -3877,10 +3945,11 @@ const yt = d({
         }
       },
       []
-    ) : s(
+    ) : n(
       this.componentName,
       {
         ref: "element",
+        class: "vvd-root",
         ...this.icon !== void 0 ? { icon: this.icon } : {},
         ...this.iconTrailing !== void 0 ? { "icon-trailing": this.iconTrailing } : {},
         ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
@@ -3899,7 +3968,7 @@ const yt = d({
       []
     );
   }
-}), Ht = d({
+}), Rt = d({
   props: {
     /**
      * Indicates the element that represents the current item within a container or set of related elements.
@@ -3973,7 +4042,7 @@ const yt = d({
     "input"
   ],
   setup(t, o) {
-    const n = h("popup", W), e = r(null);
+    const s = l("popup", W), e = r(null);
     return o.expose({
       openChanged(i, u) {
         var c;
@@ -3994,10 +4063,10 @@ const yt = d({
         var i;
         return (i = e.value) == null ? void 0 : i.hide();
       }
-    }), { componentName: n, element: e };
+    }), { componentName: s, element: e };
   },
   render() {
-    return a ? s(
+    return a ? n(
       this.componentName,
       {
         ref: "element",
@@ -4010,6 +4079,7 @@ const yt = d({
           ...this.placement !== void 0 ? { placement: this.placement } : {},
           ...this.strategy !== void 0 ? { strategy: this.strategy } : {}
         },
+        class: "vvd-root",
         domProps: { ...this.anchor !== void 0 ? { anchor: this.anchor } : {} },
         on: {
           click: (t) => this.$emit("click", t),
@@ -4021,10 +4091,11 @@ const yt = d({
         }
       },
       [this.$slots.default]
-    ) : s(
+    ) : n(
       this.componentName,
       {
         ref: "element",
+        class: "vvd-root",
         ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
         ...this.open !== void 0 ? { open: this.open } : {},
         ...this.dismissible !== void 0 ? { dismissible: this.dismissible } : {},
@@ -4046,7 +4117,7 @@ const yt = d({
       ]
     );
   }
-}), Gt = d({
+}), Wt = d({
   props: {
     /**
      * Indicates the element that represents the current item within a container or set of related elements.
@@ -4108,11 +4179,11 @@ const yt = d({
     "input"
   ],
   setup(t, o) {
-    const n = h("progress", j), e = r(null);
-    return o.expose({}), { componentName: n, element: e };
+    const s = l("progress", j), e = r(null);
+    return o.expose({}), { componentName: s, element: e };
   },
   render() {
-    return a ? s(
+    return a ? n(
       this.componentName,
       {
         ref: "element",
@@ -4126,6 +4197,7 @@ const yt = d({
           ...this.connotation !== void 0 ? { connotation: this.connotation } : {},
           ...this.reverse !== void 0 ? { reverse: this.reverse } : {}
         },
+        class: "vvd-root",
         on: {
           click: (t) => this.$emit("click", t),
           focus: (t) => this.$emit("focus", t),
@@ -4136,10 +4208,11 @@ const yt = d({
         }
       },
       []
-    ) : s(
+    ) : n(
       this.componentName,
       {
         ref: "element",
+        class: "vvd-root",
         ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
         ...this.value !== void 0 ? { value: this.value } : {},
         ...this.min !== void 0 ? { min: this.min } : {},
@@ -4158,7 +4231,7 @@ const yt = d({
       []
     );
   }
-}), Rt = d({
+}), jt = d({
   props: {
     /**
      * Indicates the element that represents the current item within a container or set of related elements.
@@ -4219,11 +4292,11 @@ const yt = d({
     "input"
   ],
   setup(t, o) {
-    const n = h("progress-ring", U), e = r(null);
-    return o.expose({}), { componentName: n, element: e };
+    const s = l("progress-ring", U), e = r(null);
+    return o.expose({}), { componentName: s, element: e };
   },
   render() {
-    return a ? s(
+    return a ? n(
       this.componentName,
       {
         ref: "element",
@@ -4236,6 +4309,7 @@ const yt = d({
           ...this.connotation !== void 0 ? { connotation: this.connotation } : {},
           ...this.size !== void 0 ? { size: this.size } : {}
         },
+        class: "vvd-root",
         on: {
           click: (t) => this.$emit("click", t),
           focus: (t) => this.$emit("focus", t),
@@ -4246,10 +4320,11 @@ const yt = d({
         }
       },
       []
-    ) : s(
+    ) : n(
       this.componentName,
       {
         ref: "element",
+        class: "vvd-root",
         ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
         ...this.value !== void 0 ? { value: this.value } : {},
         ...this.min !== void 0 ? { min: this.min } : {},
@@ -4267,7 +4342,7 @@ const yt = d({
       []
     );
   }
-}), Wt = d({
+}), Ut = d({
   props: {
     /**
      * Indicates the element that represents the current item within a container or set of related elements.
@@ -4360,11 +4435,11 @@ const yt = d({
     "change"
   ],
   setup(t, o) {
-    const n = h("radio", J), e = r(null);
-    return o.expose({}), { componentName: n, element: e };
+    const s = l("radio", J), e = r(null);
+    return o.expose({}), { componentName: s, element: e };
   },
   render() {
-    return a ? s(
+    return a ? n(
       this.componentName,
       {
         ref: "element",
@@ -4380,6 +4455,7 @@ const yt = d({
           ...this.readonly !== void 0 ? { readonly: this.readonly } : {},
           ...this.label !== void 0 ? { label: this.label } : {}
         },
+        class: "vvd-root",
         on: {
           click: (t) => this.$emit("click", t),
           focus: (t) => this.$emit("focus", t),
@@ -4391,10 +4467,11 @@ const yt = d({
         }
       },
       []
-    ) : s(
+    ) : n(
       this.componentName,
       {
         ref: "element",
+        class: "vvd-root",
         ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
         ...this.disabled !== void 0 ? { disabled: this.disabled } : {},
         ...this.value !== void 0 ? { value: this.value } : {},
@@ -4416,7 +4493,7 @@ const yt = d({
       []
     );
   }
-}), jt = d({
+}), Jt = d({
   model: a ? {
     prop: "modelValue",
     event: "update:modelValue"
@@ -4496,11 +4573,11 @@ const yt = d({
     "update:modelValue"
   ],
   setup(t, o) {
-    const n = h("radio-group", Q), e = r(null);
-    return o.expose({}), { componentName: n, element: e };
+    const s = l("radio-group", Q), e = r(null);
+    return o.expose({}), { componentName: s, element: e };
   },
   render() {
-    return a ? s(
+    return a ? n(
       this.componentName,
       {
         ref: "element",
@@ -4513,6 +4590,7 @@ const yt = d({
           ...this.orientation !== void 0 ? { orientation: this.orientation } : {},
           ...this.label !== void 0 ? { label: this.label } : {}
         },
+        class: "vvd-root",
         on: {
           click: (t) => this.$emit("click", t),
           focus: (t) => this.$emit("focus", t),
@@ -4524,10 +4602,11 @@ const yt = d({
         }
       },
       [this.$slots.default]
-    ) : s(
+    ) : n(
       this.componentName,
       {
         ref: "element",
+        class: "vvd-root",
         ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
         ...this.readonly !== void 0 ? { readonly: this.readonly } : {},
         ...this.disabled !== void 0 ? { disabled: this.disabled } : {},
@@ -4549,12 +4628,16 @@ const yt = d({
       ]
     );
   }
-}), Ut = d({
+}), Qt = d({
   model: a ? {
     prop: "modelValue",
     event: "update:modelValue"
   } : void 0,
   props: {
+    /**
+     * The helper text for the form element.
+     */
+    helperText: { type: String, default: void 0 },
     /**
      * The label for the form element.
      */
@@ -4656,7 +4739,7 @@ const yt = d({
     "change"
   ],
   setup(t, o) {
-    const n = h("select", X), e = r(null);
+    const s = l("select", X), e = r(null);
     return o.expose({
       /**
        * Calculate and apply listbox positioning based on available viewport space.
@@ -4686,14 +4769,15 @@ const yt = d({
         var i;
         return (i = e.value) == null ? void 0 : i.selectFirstOption();
       }
-    }), { componentName: n, element: e };
+    }), { componentName: s, element: e };
   },
   render() {
-    return a ? s(
+    return a ? n(
       this.componentName,
       {
         ref: "element",
         attrs: {
+          ...this.helperText !== void 0 ? { "helper-text": this.helperText } : {},
           ...this.label !== void 0 ? { label: this.label } : {},
           ...this.icon !== void 0 ? { icon: this.icon } : {},
           ...this.iconTrailing !== void 0 ? { "icon-trailing": this.iconTrailing } : {},
@@ -4709,6 +4793,7 @@ const yt = d({
           ...this.appearance !== void 0 ? { appearance: this.appearance } : {},
           ...this.shape !== void 0 ? { shape: this.shape } : {}
         },
+        class: "vvd-root",
         on: {
           click: (t) => this.$emit("click", t),
           focus: (t) => this.$emit("focus", t),
@@ -4720,10 +4805,12 @@ const yt = d({
         }
       },
       [this.$slots.default]
-    ) : s(
+    ) : n(
       this.componentName,
       {
         ref: "element",
+        class: "vvd-root",
+        ...this.helperText !== void 0 ? { "helper-text": this.helperText } : {},
         ...this.label !== void 0 ? { label: this.label } : {},
         ...this.icon !== void 0 ? { icon: this.icon } : {},
         ...this.iconTrailing !== void 0 ? { "icon-trailing": this.iconTrailing } : {},
@@ -4752,7 +4839,7 @@ const yt = d({
       ]
     );
   }
-}), Jt = d({
+}), Xt = d({
   props: {
     /**
      * Indicates the element that represents the current item within a container or set of related elements.
@@ -4811,11 +4898,11 @@ const yt = d({
     "input"
   ],
   setup(t, o) {
-    const n = h("side-drawer", Y), e = r(null);
-    return o.expose({}), { componentName: n, element: e };
+    const s = l("side-drawer", Y), e = r(null);
+    return o.expose({}), { componentName: s, element: e };
   },
   render() {
-    return a ? s(
+    return a ? n(
       this.componentName,
       {
         ref: "element",
@@ -4826,6 +4913,7 @@ const yt = d({
           ...this.open !== void 0 ? { open: this.open } : {},
           ...this.trailing !== void 0 ? { trailing: this.trailing } : {}
         },
+        class: "vvd-root",
         on: {
           click: (t) => this.$emit("click", t),
           focus: (t) => this.$emit("focus", t),
@@ -4838,12 +4926,13 @@ const yt = d({
       [
         this.$slots.default,
         // @slot app-content Sets assigned nodes to the main application content, the side drawer is opened next to.
-        l("app-content", this.$slots["app-content"])
+        h("app-content", this.$slots["app-content"])
       ]
-    ) : s(
+    ) : n(
       this.componentName,
       {
         ref: "element",
+        class: "vvd-root",
         ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
         ...this.alternate !== void 0 ? { alternate: this.alternate } : {},
         ...this.modal !== void 0 ? { modal: this.modal } : {},
@@ -4860,11 +4949,11 @@ const yt = 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.
-        l("app-content", this.$slots["app-content"])
+        h("app-content", this.$slots["app-content"])
       ]
     );
   }
-}), Qt = d({
+}), Yt = d({
   model: a ? {
     prop: "modelValue",
     event: "update:modelValue"
@@ -4969,7 +5058,7 @@ const yt = d({
     "update:modelValue"
   ],
   setup(t, o) {
-    const n = h("slider", Z), e = r(null);
+    const s = l("slider", Z), e = r(null);
     return o.expose({
       /**
        * Increment the value by the step
@@ -4992,10 +5081,10 @@ const yt = d({
         var u;
         return (u = e.value) == null ? void 0 : u.setThumbPositionForOrientation(i);
       }
-    }), { componentName: n, element: e };
+    }), { componentName: s, element: e };
   },
   render() {
-    return a ? s(
+    return a ? n(
       this.componentName,
       {
         ref: "element",
@@ -5014,6 +5103,7 @@ const yt = d({
           ...this.mode !== void 0 ? { mode: this.mode } : {},
           ...this.markers !== void 0 ? { markers: this.markers } : {}
         },
+        class: "vvd-root",
         on: {
           click: (t) => this.$emit("click", t),
           focus: (t) => this.$emit("focus", t),
@@ -5025,10 +5115,11 @@ const yt = d({
         }
       },
       []
-    ) : s(
+    ) : n(
       this.componentName,
       {
         ref: "element",
+        class: "vvd-root",
         ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
         ...this.disabled !== void 0 ? { disabled: this.disabled } : {},
         ...this.value !== void 0 ? { value: this.value } : {},
@@ -5053,7 +5144,7 @@ const yt = d({
       []
     );
   }
-}), Xt = d({
+}), Zt = d({
   props: {
     /**
      * Indicates the element that represents the current item within a container or set of related elements.
@@ -5101,11 +5192,11 @@ const yt = d({
     "input"
   ],
   setup(t, o) {
-    const n = h("switch", _), e = r(null);
-    return o.expose({}), { componentName: n, element: e };
+    const s = l("switch", _), e = r(null);
+    return o.expose({}), { componentName: s, element: e };
   },
   render() {
-    return a ? s(
+    return a ? n(
       this.componentName,
       {
         ref: "element",
@@ -5114,6 +5205,7 @@ const yt = d({
           ...this.label !== void 0 ? { label: this.label } : {},
           ...this.connotation !== void 0 ? { connotation: this.connotation } : {}
         },
+        class: "vvd-root",
         on: {
           click: (t) => this.$emit("click", t),
           focus: (t) => this.$emit("focus", t),
@@ -5124,10 +5216,11 @@ const yt = d({
         }
       },
       []
-    ) : s(
+    ) : n(
       this.componentName,
       {
         ref: "element",
+        class: "vvd-root",
         ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
         ...this.label !== void 0 ? { label: this.label } : {},
         ...this.connotation !== void 0 ? { connotation: this.connotation } : {},
@@ -5141,7 +5234,7 @@ const yt = d({
       []
     );
   }
-}), Yt = d({
+}), _t = d({
   props: {
     /**
      * A decorative icon the custom element should have.
@@ -5206,11 +5299,11 @@ const yt = d({
     "input"
   ],
   setup(t, o) {
-    const n = h("tab", tt), e = r(null);
-    return o.expose({}), { componentName: n, element: e };
+    const s = l("tab", tt), e = r(null);
+    return o.expose({}), { componentName: s, element: e };
   },
   render() {
-    return a ? s(
+    return a ? n(
       this.componentName,
       {
         ref: "element",
@@ -5223,6 +5316,7 @@ const yt = d({
           ...this.tabIndex !== void 0 ? { tabIndex: this.tabIndex } : {},
           ...this.ariaSelected !== void 0 ? { "aria-selected": this.ariaSelected } : {}
         },
+        class: "vvd-root",
         on: {
           click: (t) => this.$emit("click", t),
           focus: (t) => this.$emit("focus", t),
@@ -5233,10 +5327,11 @@ const yt = d({
         }
       },
       []
-    ) : s(
+    ) : n(
       this.componentName,
       {
         ref: "element",
+        class: "vvd-root",
         ...this.icon !== void 0 ? { icon: this.icon } : {},
         ...this.iconTrailing !== void 0 ? { "icon-trailing": this.iconTrailing } : {},
         ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
@@ -5254,7 +5349,7 @@ const yt = d({
       []
     );
   }
-}), Zt = d({
+}), te = d({
   props: {
     /**
      * Indicates the element that represents the current item within a container or set of related elements.
@@ -5314,7 +5409,7 @@ const yt = d({
     "change"
   ],
   setup(t, o) {
-    const n = h("tabs", et), e = r(null);
+    const s = l("tabs", et), e = r(null);
     return o.expose({
       /**
        * The adjust method for FASTTabs
@@ -5339,10 +5434,10 @@ const yt = d({
         var i;
         return (i = e.value) == null ? void 0 : i.tabpanelsChanged();
       }
-    }), { componentName: n, element: e };
+    }), { componentName: s, element: e };
   },
   render() {
-    return a ? s(
+    return a ? n(
       this.componentName,
       {
         ref: "element",
@@ -5352,6 +5447,7 @@ const yt = d({
           ...this.activeid !== void 0 ? { activeid: this.activeid } : {},
           ...this.activeindicator !== void 0 ? { activeindicator: this.activeindicator } : {}
         },
+        class: "vvd-root",
         on: {
           click: (t) => this.$emit("click", t),
           focus: (t) => this.$emit("focus", t),
@@ -5363,10 +5459,11 @@ const yt = d({
         }
       },
       [this.$slots.default]
-    ) : s(
+    ) : n(
       this.componentName,
       {
         ref: "element",
+        class: "vvd-root",
         ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
         ...this.orientation !== void 0 ? { orientation: this.orientation } : {},
         ...this.activeid !== void 0 ? { activeid: this.activeid } : {},
@@ -5385,7 +5482,7 @@ const yt = d({
       ]
     );
   }
-}), _t = d({
+}), ee = d({
   props: {
     /**
      * Indicates the element that represents the current item within a container or set of related elements.
@@ -5428,15 +5525,16 @@ const yt = d({
     "input"
   ],
   setup(t, o) {
-    const n = h("tab-panel", it), e = r(null);
-    return o.expose({}), { componentName: n, element: e };
+    const s = l("tab-panel", it), e = r(null);
+    return o.expose({}), { componentName: s, element: e };
   },
   render() {
-    return a ? s(
+    return a ? n(
       this.componentName,
       {
         ref: "element",
         attrs: { ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {} },
+        class: "vvd-root",
         on: {
           click: (t) => this.$emit("click", t),
           focus: (t) => this.$emit("focus", t),
@@ -5447,10 +5545,11 @@ const yt = d({
         }
       },
       [this.$slots.default]
-    ) : s(
+    ) : n(
       this.componentName,
       {
         ref: "element",
+        class: "vvd-root",
         ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
         onClick: (t) => this.$emit("click", t),
         onFocus: (t) => this.$emit("focus", t),
@@ -5465,7 +5564,7 @@ const yt = d({
       ]
     );
   }
-}), te = d({
+}), ie = d({
   props: {
     /**
      * The success text for the form element.
@@ -5525,11 +5624,11 @@ const yt = d({
     "input"
   ],
   setup(t, o) {
-    const n = h("text-area", ot), e = r(null);
-    return o.expose({}), { componentName: n, element: e };
+    const s = l("text-area", ot), e = r(null);
+    return o.expose({}), { componentName: s, element: e };
   },
   render() {
-    return a ? s(
+    return a ? n(
       this.componentName,
       {
         ref: "element",
@@ -5541,6 +5640,7 @@ const yt = d({
           ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
           ...this.wrap !== void 0 ? { wrap: this.wrap } : {}
         },
+        class: "vvd-root",
         on: {
           click: (t) => this.$emit("click", t),
           focus: (t) => this.$emit("focus", t),
@@ -5551,10 +5651,11 @@ const yt = d({
         }
       },
       []
-    ) : s(
+    ) : n(
       this.componentName,
       {
         ref: "element",
+        class: "vvd-root",
         ...this.successText !== void 0 ? { "success-text": this.successText } : {},
         ...this.helperText !== void 0 ? { "helper-text": this.helperText } : {},
         ...this.charCount !== void 0 ? { "char-count": this.charCount } : {},
@@ -5571,7 +5672,7 @@ const yt = d({
       []
     );
   }
-}), ee = d({
+}), oe = d({
   model: a ? {
     prop: "modelValue",
     event: "update:modelValue"
@@ -5715,7 +5816,7 @@ const yt = d({
     "change"
   ],
   setup(t, o) {
-    const n = h("text-field", nt), e = r(null);
+    const s = l("text-field", st), e = r(null);
     return o.expose({
       /**
        * Selects all the text in the text field
@@ -5731,10 +5832,10 @@ const yt = d({
         var i;
         return (i = e.value) == null ? void 0 : i.validate();
       }
-    }), { componentName: n, element: e };
+    }), { componentName: s, element: e };
   },
   render() {
-    return a ? s(
+    return a ? n(
       this.componentName,
       {
         ref: "element",
@@ -5764,6 +5865,7 @@ const yt = d({
           ...this.shape !== void 0 ? { shape: this.shape } : {},
           ...this.autoComplete !== void 0 ? { autoComplete: this.autoComplete } : {}
         },
+        class: "vvd-root",
         on: {
           click: (t) => this.$emit("click", t),
           focus: (t) => this.$emit("focus", t),
@@ -5775,10 +5877,11 @@ const yt = d({
         }
       },
       []
-    ) : s(
+    ) : n(
       this.componentName,
       {
         ref: "element",
+        class: "vvd-root",
         ...this.successText !== void 0 ? { "success-text": this.successText } : {},
         ...this.helperText !== void 0 ? { "helper-text": this.helperText } : {},
         ...this.charCount !== void 0 ? { "char-count": this.charCount } : {},
@@ -5814,7 +5917,7 @@ const yt = d({
       []
     );
   }
-}), ie = d({
+}), se = d({
   props: {
     /**
      * Indicates the element that represents the current item within a container or set of related elements.
@@ -5893,7 +5996,7 @@ const yt = d({
     "input"
   ],
   setup(t, o) {
-    const n = h("tooltip", st), e = r(null);
+    const s = l("tooltip", nt), e = r(null);
     return o.expose({
       openChanged(i, u) {
         var c;
@@ -5914,10 +6017,10 @@ const yt = d({
         var i;
         return (i = e.value) == null ? void 0 : i.hide();
       }
-    }), { componentName: n, element: e };
+    }), { componentName: s, element: e };
   },
   render() {
-    return a ? s(
+    return a ? n(
       this.componentName,
       {
         ref: "element",
@@ -5931,6 +6034,7 @@ const yt = d({
           ...this.text !== void 0 ? { text: this.text } : {},
           ...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),
@@ -5942,10 +6046,11 @@ const yt = d({
         }
       },
       []
-    ) : s(
+    ) : n(
       this.componentName,
       {
         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 } : {},
@@ -5965,7 +6070,7 @@ const yt = d({
       []
     );
   }
-}), oe = d({
+}), ne = d({
   props: {
     /**
      * A decorative icon the custom element should have.
@@ -6042,11 +6147,11 @@ const yt = d({
     "selected-change"
   ],
   setup(t, o) {
-    const n = h("tree-item", at), e = r(null);
-    return o.expose({}), { componentName: n, element: e };
+    const s = l("tree-item", at), e = r(null);
+    return o.expose({}), { componentName: s, element: e };
   },
   render() {
-    return a ? s(
+    return a ? n(
       this.componentName,
       {
         ref: "element",
@@ -6058,6 +6163,7 @@ const yt = d({
           ...this.disabled !== void 0 ? { disabled: this.disabled } : {},
           ...this.text !== void 0 ? { text: this.text } : {}
         },
+        class: "vvd-root",
         on: {
           click: (t) => this.$emit("click", t),
           focus: (t) => this.$emit("focus", t),
@@ -6071,12 +6177,13 @@ const yt = d({
       },
       [
         // @slot item To specify a child tree item.
-        l("item", this.$slots.item)
+        h("item", this.$slots.item)
       ]
-    ) : s(
+    ) : n(
       this.componentName,
       {
         ref: "element",
+        class: "vvd-root",
         ...this.icon !== void 0 ? { icon: this.icon } : {},
         ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
         ...this.expanded !== void 0 ? { expanded: this.expanded } : {},
@@ -6094,11 +6201,11 @@ const yt = d({
       },
       [
         // @slot item To specify a child tree item.
-        l("item", this.$slots.item)
+        h("item", this.$slots.item)
       ]
     );
   }
-}), ne = d({
+}), ae = d({
   props: {
     /**
      * Indicates the element that represents the current item within a container or set of related elements.
@@ -6146,11 +6253,11 @@ const yt = d({
     "input"
   ],
   setup(t, o) {
-    const n = h("tree-view", rt), e = r(null);
-    return o.expose({}), { componentName: n, element: e };
+    const s = l("tree-view", rt), e = r(null);
+    return o.expose({}), { componentName: s, element: e };
   },
   render() {
-    return a ? s(
+    return a ? n(
       this.componentName,
       {
         ref: "element",
@@ -6158,6 +6265,7 @@ const yt = d({
           ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
           ...this.renderCollapsedNodes !== void 0 ? { "render-collapsed-nodes": this.renderCollapsedNodes } : {}
         },
+        class: "vvd-root",
         on: {
           click: (t) => this.$emit("click", t),
           focus: (t) => this.$emit("focus", t),
@@ -6168,10 +6276,11 @@ const yt = d({
         }
       },
       [this.$slots.default]
-    ) : s(
+    ) : n(
       this.componentName,
       {
         ref: "element",
+        class: "vvd-root",
         ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
         ...this.renderCollapsedNodes !== void 0 ? { "render-collapsed-nodes": this.renderCollapsedNodes } : {},
         onClick: (t) => this.$emit("click", t),
@@ -6187,53 +6296,289 @@ const yt = d({
       ]
     );
   }
+}), re = d({
+  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 element that represents the current item within a container or set of related elements.
+     */
+    ariaCurrent: {
+      type: String,
+      default: void 0
+    },
+    /**
+     * The connotation the tag should have.
+     */
+    connotation: { type: String, default: void 0 },
+    /**
+     * The shape the tag should have.
+     */
+    shape: { type: String, default: void 0 },
+    /**
+     * The appearance the tag should have.
+     */
+    appearance: { type: String, default: void 0 },
+    /**
+     * Indicates the tag's label.
+     */
+    label: { type: String, default: void 0 },
+    /**
+     * indicates whether the tag is removable
+     */
+    removable: { type: Boolean, default: void 0 },
+    /**
+     * indicates whether the tag is disabled
+     */
+    disabled: { type: Boolean, default: void 0 },
+    /**
+     * indicates whether the tag is selectable
+     */
+    selectable: { type: Boolean, default: void 0 },
+    /**
+     * indicates whether the tag is selected
+     */
+    selected: { 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 = l("tag", dt), e = r(null);
+    return o.expose({
+      remove() {
+        var i;
+        return (i = e.value) == null ? void 0 : i.remove();
+      },
+      handleKeydown(i) {
+        var u;
+        return (u = e.value) == null ? void 0 : u.handleKeydown(i);
+      },
+      handleClick() {
+        var i;
+        return (i = e.value) == null ? void 0 : i.handleClick();
+      }
+    }), { componentName: s, element: e };
+  },
+  render() {
+    return a ? n(
+      this.componentName,
+      {
+        ref: "element",
+        attrs: {
+          ...this.icon !== void 0 ? { icon: this.icon } : {},
+          ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
+          ...this.connotation !== void 0 ? { connotation: this.connotation } : {},
+          ...this.shape !== void 0 ? { shape: this.shape } : {},
+          ...this.appearance !== void 0 ? { appearance: this.appearance } : {},
+          ...this.label !== void 0 ? { label: this.label } : {},
+          ...this.removable !== void 0 ? { removable: this.removable } : {},
+          ...this.disabled !== void 0 ? { disabled: this.disabled } : {},
+          ...this.selectable !== void 0 ? { selectable: this.selectable } : {},
+          ...this.selected !== void 0 ? { selected: this.selected } : {}
+        },
+        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.icon !== void 0 ? { icon: this.icon } : {},
+        ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
+        ...this.connotation !== void 0 ? { connotation: this.connotation } : {},
+        ...this.shape !== void 0 ? { shape: this.shape } : {},
+        ...this.appearance !== void 0 ? { appearance: this.appearance } : {},
+        ...this.label !== void 0 ? { label: this.label } : {},
+        ...this.removable !== void 0 ? { removable: this.removable } : {},
+        ...this.disabled !== void 0 ? { disabled: this.disabled } : {},
+        ...this.selectable !== void 0 ? { selectable: this.selectable } : {},
+        ...this.selected !== void 0 ? { selected: this.selected } : {},
+        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)
+      },
+      []
+    );
+  }
+}), de = d({
+  props: {
+    /**
+     * Indicates the element that represents the current item within a container or set of related elements.
+     */
+    ariaCurrent: {
+      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 = l("tag-group", lt), e = r(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 } : {} },
+        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]
+    ) : n(
+      this.componentName,
+      {
+        ref: "element",
+        class: "vvd-root",
+        ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
+        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()
+      ]
+    );
+  }
 });
 export {
-  pt as VAccordion,
-  mt as VAccordionItem,
-  vt as VActionGroup,
-  yt as VAvatar,
-  ft as VBadge,
-  $t as VBanner,
-  kt as VBreadcrumb,
-  gt as VBreadcrumbItem,
-  bt as VButton,
-  Ct as VCalendar,
-  wt as VCalendarEvent,
-  St as VCard,
-  xt as VCheckbox,
-  Nt as VCombobox,
-  Bt as VDataGrid,
-  Vt as VDialog,
-  Kt as VDivider,
-  Tt as VFab,
-  It as VHeader,
-  qt as VIcon,
-  zt as VLayout,
-  Ft as VMenu,
-  Lt as VMenuItem,
-  Pt as VNav,
-  Dt as VNavDisclosure,
-  Mt as VNavItem,
-  Ot as VNote,
-  At as VNumberField,
-  Et as VOption,
-  Ht as VPopup,
-  Gt as VProgress,
-  Rt as VProgressRing,
-  Wt as VRadio,
-  jt as VRadioGroup,
-  Ut as VSelect,
-  Jt as VSideDrawer,
-  Qt as VSlider,
-  Xt as VSwitch,
-  Yt as VTab,
-  _t as VTabPanel,
-  Zt as VTabs,
-  te as VTextArea,
-  ee as VTextField,
-  ie as VTooltip,
-  oe as VTreeItem,
-  ne as VTreeView,
-  ct as setCustomComponentPrefix
+  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,
+  Bt as VCheckbox,
+  Vt 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
 };