@vonage/vivid-vue 3.14.0 → 3.16.0

package/dist/index.es.js

@@ -82,7 +82,7 @@ const ke = u({
           ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
           ...this.expandMode !== void 0 ? { "expand-mode": this.expandMode } : {}
         },
-        class: "vvd-root",
+        class: "vvd-component",
         on: {
           click: (e) => this.$emit("click", e),
           focus: (e) => this.$emit("focus", e),
@@ -98,7 +98,7 @@ const ke = u({
       this.componentName,
       {
         ref: "element",
-        class: "vvd-root",
+        class: "vvd-component",
         ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
         ...this.expandMode !== void 0 ? { "expand-mode": this.expandMode } : {},
         onClick: (e) => this.$emit("click", e),
@@ -216,7 +216,7 @@ const ke = u({
           ...this.meta !== void 0 ? { meta: this.meta } : {},
           ...this.size !== void 0 ? { size: this.size } : {}
         },
-        class: "vvd-root",
+        class: "vvd-component",
         on: {
           click: (e) => this.$emit("click", e),
           focus: (e) => this.$emit("focus", e),
@@ -232,7 +232,7 @@ const ke = u({
       this.componentName,
       {
         ref: "element",
-        class: "vvd-root",
+        class: "vvd-component",
         ...this.icon !== void 0 ? { icon: this.icon } : {},
         ...this.iconTrailing !== void 0 ? { "icon-trailing": this.iconTrailing } : {},
         ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
@@ -331,7 +331,7 @@ const ke = u({
           ...this.role !== void 0 ? { role: this.role } : {},
           ...this.ariaLabel !== void 0 ? { "aria-label": this.ariaLabel } : {}
         },
-        class: "vvd-root",
+        class: "vvd-component",
         on: {
           click: (e) => this.$emit("click", e),
           focus: (e) => this.$emit("focus", e),
@@ -346,7 +346,7 @@ const ke = u({
       this.componentName,
       {
         ref: "element",
-        class: "vvd-root",
+        class: "vvd-component",
         ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
         ...this.shape !== void 0 ? { shape: this.shape } : {},
         ...this.appearance !== void 0 ? { appearance: this.appearance } : {},
@@ -502,7 +502,7 @@ const $e = u({
           ...this.connotation !== void 0 ? { connotation: this.connotation } : {},
           ...this.open !== void 0 ? { open: this.open } : {}
         },
-        class: "vvd-root",
+        class: "vvd-component",
         on: {
           click: (e) => this.$emit("click", e),
           focus: (e) => this.$emit("focus", e),
@@ -524,7 +524,7 @@ const $e = u({
       this.componentName,
       {
         ref: "element",
-        class: "vvd-root",
+        class: "vvd-component",
         ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
         ...this.removable !== void 0 ? { removable: this.removable } : {},
         ...this.placement !== void 0 ? { placement: this.placement } : {},
@@ -637,7 +637,7 @@ const $e = u({
           ...this.icon !== void 0 ? { icon: this.icon } : {},
           ...this.initials !== void 0 ? { initials: this.initials } : {}
         },
-        class: "vvd-root",
+        class: "vvd-component",
         on: {
           click: (e) => this.$emit("click", e),
           focus: (e) => this.$emit("focus", e),
@@ -655,7 +655,7 @@ const $e = u({
       this.componentName,
       {
         ref: "element",
-        class: "vvd-root",
+        class: "vvd-component",
         ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
         ...this.connotation !== void 0 ? { connotation: this.connotation } : {},
         ...this.shape !== void 0 ? { shape: this.shape } : {},
@@ -765,7 +765,7 @@ const $e = u({
           ...this.appearance !== void 0 ? { appearance: this.appearance } : {},
           ...this.text !== void 0 ? { text: this.text } : {}
         },
-        class: "vvd-root",
+        class: "vvd-component",
         on: {
           click: (e) => this.$emit("click", e),
           focus: (e) => this.$emit("focus", e),
@@ -780,7 +780,7 @@ const $e = u({
       this.componentName,
       {
         ref: "element",
-        class: "vvd-root",
+        class: "vvd-component",
         ...this.icon !== void 0 ? { icon: this.icon } : {},
         ...this.iconTrailing !== void 0 ? { "icon-trailing": this.iconTrailing } : {},
         ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
@@ -881,7 +881,7 @@ const $e = u({
           ...this.text !== void 0 ? { text: this.text } : {},
           ...this.connotation !== void 0 ? { connotation: this.connotation } : {}
         },
-        class: "vvd-root",
+        class: "vvd-component",
         on: {
           click: (e) => this.$emit("click", e),
           focus: (e) => this.$emit("focus", e),
@@ -899,7 +899,7 @@ const $e = u({
       this.componentName,
       {
         ref: "element",
-        class: "vvd-root",
+        class: "vvd-component",
         ...this.icon !== void 0 ? { icon: this.icon } : {},
         ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
         ...this.role !== void 0 ? { role: this.role } : {},
@@ -975,7 +975,7 @@ const $e = u({
       {
         ref: "element",
         attrs: { ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {} },
-        class: "vvd-root",
+        class: "vvd-component",
         on: {
           click: (e) => this.$emit("click", e),
           focus: (e) => this.$emit("focus", e),
@@ -990,7 +990,7 @@ const $e = u({
       this.componentName,
       {
         ref: "element",
-        class: "vvd-root",
+        class: "vvd-component",
         ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
         onClick: (e) => this.$emit("click", e),
         onFocus: (e) => this.$emit("focus", e),
@@ -1102,7 +1102,7 @@ const $e = u({
           ...this.type !== void 0 ? { type: this.type } : {},
           ...this.text !== void 0 ? { text: this.text } : {}
         },
-        class: "vvd-root",
+        class: "vvd-component",
         on: {
           click: (e) => this.$emit("click", e),
           focus: (e) => this.$emit("focus", e),
@@ -1117,7 +1117,7 @@ const $e = u({
       this.componentName,
       {
         ref: "element",
-        class: "vvd-root",
+        class: "vvd-component",
         ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
         ...this.download !== void 0 ? { download: this.download } : {},
         ...this.href !== void 0 ? { href: this.href } : {},
@@ -1317,7 +1317,7 @@ const $e = u({
           ...this.pending !== void 0 ? { pending: this.pending } : {},
           ...this.label !== void 0 ? { label: this.label } : {}
         },
-        class: "vvd-root",
+        class: "vvd-component",
         on: {
           click: (e) => this.$emit("click", e),
           focus: (e) => this.$emit("focus", e),
@@ -1332,7 +1332,7 @@ const $e = u({
       this.componentName,
       {
         ref: "element",
-        class: "vvd-root",
+        class: "vvd-component",
         ...this.icon !== void 0 ? { icon: this.icon } : {},
         ...this.iconTrailing !== void 0 ? { "icon-trailing": this.iconTrailing } : {},
         ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
@@ -1455,7 +1455,7 @@ const $e = u({
           ...this.startDay !== void 0 ? { "start-day": this.startDay } : {},
           ...this.hour12 !== void 0 ? { hour12: this.hour12 } : {}
         },
-        class: "vvd-root",
+        class: "vvd-component",
         domProps: {
           ...this.datetime !== void 0 ? { datetime: this.datetime } : {},
           ...this.locales !== void 0 ? { locales: this.locales } : {}
@@ -1490,7 +1490,7 @@ const $e = u({
       this.componentName,
       {
         ref: "element",
-        class: "vvd-root",
+        class: "vvd-component",
         ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
         ...this.datetime !== void 0 ? { datetime: this.datetime } : {},
         ...this.startDay !== void 0 ? { "start-day": this.startDay } : {},
@@ -1616,7 +1616,7 @@ const $e = u({
           ...this.start !== void 0 ? { start: this.start } : {},
           ...this.duration !== void 0 ? { duration: this.duration } : {}
         },
-        class: "vvd-root",
+        class: "vvd-component",
         on: {
           click: (e) => this.$emit("click", e),
           focus: (e) => this.$emit("focus", e),
@@ -1631,7 +1631,7 @@ const $e = u({
       this.componentName,
       {
         ref: "element",
-        class: "vvd-root",
+        class: "vvd-component",
         ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
         ...this.heading !== void 0 ? { heading: this.heading } : {},
         ...this.description !== void 0 ? { description: this.description } : {},
@@ -1734,7 +1734,7 @@ const $e = u({
           ...this.icon !== void 0 ? { icon: this.icon } : {},
           ...this.elevation !== void 0 ? { elevation: this.elevation } : {}
         },
-        class: "vvd-root",
+        class: "vvd-component",
         on: {
           click: (e) => this.$emit("click", e),
           focus: (e) => this.$emit("focus", e),
@@ -1760,7 +1760,7 @@ const $e = u({
       this.componentName,
       {
         ref: "element",
-        class: "vvd-root",
+        class: "vvd-component",
         ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
         ...this.headline !== void 0 ? { headline: this.headline } : {},
         ...this.subtitle !== void 0 ? { subtitle: this.subtitle } : {},
@@ -1926,7 +1926,7 @@ const $e = u({
           ...this.readonly !== void 0 ? { readonly: this.readonly } : {},
           ...this.connotation !== void 0 ? { connotation: this.connotation } : {}
         },
-        class: "vvd-root",
+        class: "vvd-component",
         on: {
           click: (e) => this.$emit("click", e),
           focus: (e) => this.$emit("focus", e),
@@ -1942,7 +1942,7 @@ const $e = u({
       this.componentName,
       {
         ref: "element",
-        class: "vvd-root",
+        class: "vvd-component",
         ...this.successText !== void 0 ? { "success-text": this.successText } : {},
         ...this.errorText !== void 0 ? { "error-text": this.errorText } : {},
         ...this.helperText !== void 0 ? { "helper-text": this.helperText } : {},
@@ -2136,7 +2136,7 @@ const $e = u({
           ...this.disabled !== void 0 ? { disabled: this.disabled } : {},
           ...this.placement !== void 0 ? { placement: this.placement } : {}
         },
-        class: "vvd-root",
+        class: "vvd-component",
         on: {
           click: (e) => this.$emit("click", e),
           focus: (e) => this.$emit("focus", e),
@@ -2152,7 +2152,7 @@ const $e = u({
       this.componentName,
       {
         ref: "element",
-        class: "vvd-root",
+        class: "vvd-component",
         ...this.label !== void 0 ? { label: this.label } : {},
         ...this.icon !== void 0 ? { icon: this.icon } : {},
         ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
@@ -2265,7 +2265,7 @@ const $e = u({
           ...this.gridTemplateColumns !== void 0 ? { "grid-template-columns": this.gridTemplateColumns } : {},
           ...this.selectionMode !== void 0 ? { "selection-mode": this.selectionMode } : {}
         },
-        class: "vvd-root",
+        class: "vvd-component",
         domProps: { ...this.rowsData !== void 0 ? { rowsData: this.rowsData } : {} },
         on: {
           click: (e) => this.$emit("click", e),
@@ -2281,7 +2281,7 @@ const $e = u({
       this.componentName,
       {
         ref: "element",
-        class: "vvd-root",
+        class: "vvd-component",
         ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
         ...this.noTabbing !== void 0 ? { "no-tabbing": this.noTabbing } : {},
         ...this.generateHeader !== void 0 ? { "generate-header": this.generateHeader } : {},
@@ -2386,7 +2386,7 @@ const $e = u({
           ...this.rowType !== void 0 ? { "row-type": this.rowType } : {},
           ...this.ariaSelected !== void 0 ? { "aria-selected": this.ariaSelected } : {}
         },
-        class: "vvd-root",
+        class: "vvd-component",
         on: {
           click: (e) => this.$emit("click", e),
           focus: (e) => this.$emit("focus", e),
@@ -2402,7 +2402,7 @@ const $e = u({
       this.componentName,
       {
         ref: "element",
-        class: "vvd-root",
+        class: "vvd-component",
         ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
         ...this.gridTemplateColumns !== void 0 ? { "grid-template-columns": this.gridTemplateColumns } : {},
         ...this.rowType !== void 0 ? { "row-type": this.rowType } : {},
@@ -2519,7 +2519,7 @@ const $e = u({
           ...this.ariaSelected !== void 0 ? { "aria-selected": this.ariaSelected } : {},
           ...this.ariaSort !== void 0 ? { "aria-sort": this.ariaSort } : {}
         },
-        class: "vvd-root",
+        class: "vvd-component",
         on: {
           click: (e) => this.$emit("click", e),
           focus: (e) => this.$emit("focus", e),
@@ -2535,7 +2535,7 @@ const $e = u({
       this.componentName,
       {
         ref: "element",
-        class: "vvd-root",
+        class: "vvd-component",
         ...this.columnDefinition !== void 0 ? { columnDefinition: this.columnDefinition } : {},
         ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
         ...this.cellType !== void 0 ? { "cell-type": this.cellType } : {},
@@ -2658,7 +2658,7 @@ const $e = u({
           ...this.ariaLabel !== void 0 ? { "aria-label": this.ariaLabel } : {},
           ...this.ariaDescribedby !== void 0 ? { "aria-describedby": this.ariaDescribedby } : {}
         },
-        class: "vvd-root",
+        class: "vvd-component",
         on: {
           click: (e) => this.$emit("click", e),
           focus: (e) => this.$emit("focus", e),
@@ -2685,7 +2685,7 @@ const $e = u({
       this.componentName,
       {
         ref: "element",
-        class: "vvd-root",
+        class: "vvd-component",
         ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
         ...this.open !== void 0 ? { open: this.open } : {},
         ...this.icon !== void 0 ? { icon: this.icon } : {},
@@ -2783,7 +2783,7 @@ const $e = u({
           ...this.role !== void 0 ? { role: this.role } : {},
           ...this.orientation !== void 0 ? { orientation: this.orientation } : {}
         },
-        class: "vvd-root",
+        class: "vvd-component",
         on: {
           click: (e) => this.$emit("click", e),
           focus: (e) => this.$emit("focus", e),
@@ -2798,7 +2798,7 @@ const $e = u({
       this.componentName,
       {
         ref: "element",
-        class: "vvd-root",
+        class: "vvd-component",
         ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
         ...this.role !== void 0 ? { role: this.role } : {},
         ...this.orientation !== void 0 ? { orientation: this.orientation } : {},
@@ -2878,7 +2878,7 @@ const $e = u({
           ...this.headline !== void 0 ? { headline: this.headline } : {},
           ...this.icon !== void 0 ? { icon: this.icon } : {}
         },
-        class: "vvd-root",
+        class: "vvd-component",
         on: {
           click: (e) => this.$emit("click", e),
           focus: (e) => this.$emit("focus", e),
@@ -2899,7 +2899,7 @@ const $e = u({
       this.componentName,
       {
         ref: "element",
-        class: "vvd-root",
+        class: "vvd-component",
         ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
         ...this.headline !== void 0 ? { headline: this.headline } : {},
         ...this.icon !== void 0 ? { icon: this.icon } : {},
@@ -3079,7 +3079,7 @@ const $e = u({
           ...this.size !== void 0 ? { size: this.size } : {},
           ...this.label !== void 0 ? { label: this.label } : {}
         },
-        class: "vvd-root",
+        class: "vvd-component",
         on: {
           click: (e) => this.$emit("click", e),
           focus: (e) => this.$emit("focus", e),
@@ -3094,7 +3094,7 @@ const $e = u({
       this.componentName,
       {
         ref: "element",
-        class: "vvd-root",
+        class: "vvd-component",
         ...this.icon !== void 0 ? { icon: this.icon } : {},
         ...this.iconTrailing !== void 0 ? { "icon-trailing": this.iconTrailing } : {},
         ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
@@ -3189,7 +3189,7 @@ const $e = u({
           ...this.elevationShadow !== void 0 ? { "elevation-shadow": this.elevationShadow } : {},
           ...this.alternate !== void 0 ? { alternate: this.alternate } : {}
         },
-        class: "vvd-root",
+        class: "vvd-component",
         on: {
           click: (e) => this.$emit("click", e),
           focus: (e) => this.$emit("focus", e),
@@ -3210,7 +3210,7 @@ const $e = u({
       this.componentName,
       {
         ref: "element",
-        class: "vvd-root",
+        class: "vvd-component",
         ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
         ...this.elevationShadow !== void 0 ? { "elevation-shadow": this.elevationShadow } : {},
         ...this.alternate !== void 0 ? { alternate: this.alternate } : {},
@@ -3307,7 +3307,7 @@ const $e = u({
           ...this.size !== void 0 ? { size: this.size } : {},
           ...this.name !== void 0 ? { name: this.name } : {}
         },
-        class: "vvd-root",
+        class: "vvd-component",
         on: {
           click: (e) => this.$emit("click", e),
           focus: (e) => this.$emit("focus", e),
@@ -3322,7 +3322,7 @@ const $e = u({
       this.componentName,
       {
         ref: "element",
-        class: "vvd-root",
+        class: "vvd-component",
         ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
         ...this.connotation !== void 0 ? { connotation: this.connotation } : {},
         ...this.size !== void 0 ? { size: this.size } : {},
@@ -3420,7 +3420,7 @@ const $e = u({
           ...this.rowSpacing !== void 0 ? { "row-spacing": this.rowSpacing } : {},
           ...this.autoSizing !== void 0 ? { "auto-sizing": this.autoSizing } : {}
         },
-        class: "vvd-root",
+        class: "vvd-component",
         on: {
           click: (e) => this.$emit("click", e),
           focus: (e) => this.$emit("focus", e),
@@ -3435,7 +3435,7 @@ const $e = u({
       this.componentName,
       {
         ref: "element",
-        class: "vvd-root",
+        class: "vvd-component",
         ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
         ...this.gutters !== void 0 ? { gutters: this.gutters } : {},
         ...this.columnBasis !== void 0 ? { "column-basis": this.columnBasis } : {},
@@ -3516,7 +3516,17 @@ const $e = u({
      * Fires when the value of an element has been changed.
      * @type {Event}
      */
-    "input"
+    "input",
+    /**
+     * Fired when the menu is opened
+     * @type {unknown}
+     */
+    "open",
+    /**
+     * Fired when the menu is closed
+     * @type {unknown}
+     */
+    "close"
   ],
   setup(e, o) {
     const l = h("menu", A), i = d(null);
@@ -3543,9 +3553,9 @@ const $e = u({
         var p;
         return (p = i.value) == null ? void 0 : p.autoDismissChanged(t, n);
       },
-      openChanged() {
-        var t;
-        return (t = i.value) == null ? void 0 : t.openChanged();
+      openChanged(t, n) {
+        var p;
+        return (p = i.value) == null ? void 0 : p.openChanged(t, n);
       }
     }), { componentName: l, element: i };
   },
@@ -3560,7 +3570,7 @@ const $e = u({
           ...this.autoDismiss !== void 0 ? { "auto-dismiss": this.autoDismiss } : {},
           ...this.open !== void 0 ? { open: this.open } : {}
         },
-        class: "vvd-root",
+        class: "vvd-component",
         domProps: { ...this.anchor !== void 0 ? { anchor: this.anchor } : {} },
         on: {
           click: (e) => this.$emit("click", e),
@@ -3568,15 +3578,23 @@ const $e = u({
           blur: (e) => this.$emit("blur", e),
           keydown: (e) => this.$emit("keydown", e),
           keyup: (e) => this.$emit("keyup", e),
-          input: (e) => this.$emit("input", e)
+          input: (e) => this.$emit("input", e),
+          open: (e) => this.$emit("open", e),
+          close: (e) => this.$emit("close", e)
         }
       },
-      [this.$slots.default]
+      [
+        this.$slots.default,
+        // @slot header Used to add additional content to the top of the menu.
+        a("header", this.$slots.header),
+        // @slot action-items Used to add action items to the bottom of the menu.
+        a("action-items", this.$slots["action-items"])
+      ]
     ) : s(
       this.componentName,
       {
         ref: "element",
-        class: "vvd-root",
+        class: "vvd-component",
         ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
         ...this.placement !== void 0 ? { placement: this.placement } : {},
         ...this.anchor !== void 0 ? { anchor: this.anchor } : {},
@@ -3587,11 +3605,17 @@ const $e = u({
         onBlur: (e) => this.$emit("blur", e),
         onKeydown: (e) => this.$emit("keydown", e),
         onKeyup: (e) => this.$emit("keyup", e),
-        onInput: (e) => this.$emit("input", e)
+        onInput: (e) => this.$emit("input", e),
+        onOpen: (e) => this.$emit("open", e),
+        onClose: (e) => this.$emit("close", e)
       },
       [
         // @ts-ignore
-        this.$slots.default && this.$slots.default()
+        this.$slots.default && this.$slots.default(),
+        // @slot header Used to add additional content to the top of the menu.
+        a("header", this.$slots.header),
+        // @slot action-items Used to add action items to the bottom of the menu.
+        a("action-items", this.$slots["action-items"])
       ]
     );
   }
@@ -3700,7 +3724,7 @@ const $e = u({
           ...this.text !== void 0 ? { text: this.text } : {},
           ...this.textSecondary !== void 0 ? { "text-secondary": this.textSecondary } : {}
         },
-        class: "vvd-root",
+        class: "vvd-component",
         on: {
           click: (e) => this.$emit("click", e),
           focus: (e) => this.$emit("focus", e),
@@ -3720,7 +3744,7 @@ const $e = u({
       this.componentName,
       {
         ref: "element",
-        class: "vvd-root",
+        class: "vvd-component",
         ...this.icon !== void 0 ? { icon: this.icon } : {},
         ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
         ...this.disabled !== void 0 ? { disabled: this.disabled } : {},
@@ -3797,7 +3821,7 @@ const $e = u({
       {
         ref: "element",
         attrs: { ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {} },
-        class: "vvd-root",
+        class: "vvd-component",
         on: {
           click: (e) => this.$emit("click", e),
           focus: (e) => this.$emit("focus", e),
@@ -3812,7 +3836,7 @@ const $e = u({
       this.componentName,
       {
         ref: "element",
-        class: "vvd-root",
+        class: "vvd-component",
         ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
         onClick: (e) => this.$emit("click", e),
         onFocus: (e) => this.$emit("focus", e),
@@ -3835,18 +3859,12 @@ const $e = u({
      * 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
-    },
     label: { type: String, default: void 0 },
     /**
      * Indicates whether the nav-disclosure is open
      */
-    open: { type: Boolean, default: void 0 }
+    open: { type: Boolean, default: void 0 },
+    ariaCurrent: { type: String, default: void 0 }
   },
   emits: [
     /**
@@ -3896,11 +3914,11 @@ const $e = u({
         ref: "element",
         attrs: {
           ...this.icon !== void 0 ? { icon: this.icon } : {},
-          ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
           ...this.label !== void 0 ? { label: this.label } : {},
-          ...this.open !== void 0 ? { open: this.open } : {}
+          ...this.open !== void 0 ? { open: this.open } : {},
+          ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {}
         },
-        class: "vvd-root",
+        class: "vvd-component",
         on: {
           click: (e) => this.$emit("click", e),
           focus: (e) => this.$emit("focus", e),
@@ -3920,11 +3938,11 @@ const $e = u({
       this.componentName,
       {
         ref: "element",
-        class: "vvd-root",
+        class: "vvd-component",
         ...this.icon !== void 0 ? { icon: this.icon } : {},
-        ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
         ...this.label !== void 0 ? { label: this.label } : {},
         ...this.open !== void 0 ? { open: this.open } : {},
+        ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
         onClick: (e) => this.$emit("click", e),
         onFocus: (e) => this.$emit("focus", e),
         onBlur: (e) => this.$emit("blur", e),
@@ -4052,7 +4070,7 @@ const $e = u({
           ...this.type !== void 0 ? { type: this.type } : {},
           ...this.text !== void 0 ? { text: this.text } : {}
         },
-        class: "vvd-root",
+        class: "vvd-component",
         on: {
           click: (e) => this.$emit("click", e),
           focus: (e) => this.$emit("focus", e),
@@ -4070,7 +4088,7 @@ const $e = u({
       this.componentName,
       {
         ref: "element",
-        class: "vvd-root",
+        class: "vvd-component",
         ...this.icon !== void 0 ? { icon: this.icon } : {},
         ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
         ...this.download !== void 0 ? { download: this.download } : {},
@@ -4166,7 +4184,7 @@ const $e = u({
           ...this.headline !== void 0 ? { headline: this.headline } : {},
           ...this.connotation !== void 0 ? { connotation: this.connotation } : {}
         },
-        class: "vvd-root",
+        class: "vvd-component",
         on: {
           click: (e) => this.$emit("click", e),
           focus: (e) => this.$emit("focus", e),
@@ -4181,7 +4199,7 @@ const $e = u({
       this.componentName,
       {
         ref: "element",
-        class: "vvd-root",
+        class: "vvd-component",
         ...this.icon !== void 0 ? { icon: this.icon } : {},
         ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
         ...this.headline !== void 0 ? { headline: this.headline } : {},
@@ -4409,7 +4427,7 @@ const $e = u({
           ...this.shape !== void 0 ? { shape: this.shape } : {},
           ...this.autoComplete !== void 0 ? { autoComplete: this.autoComplete } : {}
         },
-        class: "vvd-root",
+        class: "vvd-component",
         on: {
           click: (e) => this.$emit("click", e),
           focus: (e) => this.$emit("focus", e),
@@ -4425,7 +4443,7 @@ const $e = u({
       this.componentName,
       {
         ref: "element",
-        class: "vvd-root",
+        class: "vvd-component",
         ...this.successText !== void 0 ? { "success-text": this.successText } : {},
         ...this.helperText !== void 0 ? { "helper-text": this.helperText } : {},
         ...this.charCount !== void 0 ? { "char-count": this.charCount } : {},
@@ -4560,7 +4578,7 @@ const $e = u({
           ...this.text !== void 0 ? { text: this.text } : {},
           ...this.label !== void 0 ? { label: this.label } : {}
         },
-        class: "vvd-root",
+        class: "vvd-component",
         on: {
           click: (e) => this.$emit("click", e),
           focus: (e) => this.$emit("focus", e),
@@ -4578,7 +4596,7 @@ const $e = u({
       this.componentName,
       {
         ref: "element",
-        class: "vvd-root",
+        class: "vvd-component",
         ...this.icon !== void 0 ? { icon: this.icon } : {},
         ...this.iconTrailing !== void 0 ? { "icon-trailing": this.iconTrailing } : {},
         ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
@@ -4610,7 +4628,14 @@ const $e = u({
       type: String,
       default: void 0
     },
+    /**
+     * The size the pagination should have.
+     */
     size: { type: String, default: void 0 },
+    /**
+     * The shape the pagination should have.
+     */
+    shape: { type: String, default: void 0 },
     navIcons: { type: Boolean, default: void 0 },
     total: { type: Number, default: void 0 },
     selectedIndex: { type: Number, default: void 0 }
@@ -4672,11 +4697,12 @@ const $e = u({
         attrs: {
           ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
           ...this.size !== void 0 ? { size: this.size } : {},
+          ...this.shape !== void 0 ? { shape: this.shape } : {},
           ...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",
+        class: "vvd-component",
         on: {
           click: (e) => this.$emit("click", e),
           focus: (e) => this.$emit("focus", e),
@@ -4691,9 +4717,10 @@ const $e = u({
       this.componentName,
       {
         ref: "element",
-        class: "vvd-root",
+        class: "vvd-component",
         ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
         ...this.size !== void 0 ? { size: this.size } : {},
+        ...this.shape !== void 0 ? { shape: this.shape } : {},
         ...this.navIcons !== void 0 ? { "nav-icons": this.navIcons } : {},
         ...this.total !== void 0 ? { total: this.total } : {},
         ...this.selectedIndex !== void 0 ? { "selected-index": this.selectedIndex } : {},
@@ -4788,7 +4815,7 @@ const $e = u({
           ...this.connotation !== void 0 ? { connotation: this.connotation } : {},
           ...this.reverse !== void 0 ? { reverse: this.reverse } : {}
         },
-        class: "vvd-root",
+        class: "vvd-component",
         on: {
           click: (e) => this.$emit("click", e),
           focus: (e) => this.$emit("focus", e),
@@ -4803,7 +4830,7 @@ const $e = u({
       this.componentName,
       {
         ref: "element",
-        class: "vvd-root",
+        class: "vvd-component",
         ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
         ...this.value !== void 0 ? { value: this.value } : {},
         ...this.min !== void 0 ? { min: this.min } : {},
@@ -4901,7 +4928,7 @@ const $e = u({
           ...this.connotation !== void 0 ? { connotation: this.connotation } : {},
           ...this.size !== void 0 ? { size: this.size } : {}
         },
-        class: "vvd-root",
+        class: "vvd-component",
         on: {
           click: (e) => this.$emit("click", e),
           focus: (e) => this.$emit("focus", e),
@@ -4916,7 +4943,7 @@ const $e = u({
       this.componentName,
       {
         ref: "element",
-        class: "vvd-root",
+        class: "vvd-component",
         ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
         ...this.value !== void 0 ? { value: this.value } : {},
         ...this.min !== void 0 ? { min: this.min } : {},
@@ -5053,7 +5080,7 @@ const $e = u({
           ...this.label !== void 0 ? { label: this.label } : {},
           ...this.connotation !== void 0 ? { connotation: this.connotation } : {}
         },
-        class: "vvd-root",
+        class: "vvd-component",
         on: {
           click: (e) => this.$emit("click", e),
           focus: (e) => this.$emit("focus", e),
@@ -5069,7 +5096,7 @@ const $e = u({
       this.componentName,
       {
         ref: "element",
-        class: "vvd-root",
+        class: "vvd-component",
         ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
         ...this.disabled !== void 0 ? { disabled: this.disabled } : {},
         ...this.value !== void 0 ? { value: this.value } : {},
@@ -5190,7 +5217,7 @@ const $e = u({
           ...this.orientation !== void 0 ? { orientation: this.orientation } : {},
           ...this.label !== void 0 ? { label: this.label } : {}
         },
-        class: "vvd-root",
+        class: "vvd-component",
         on: {
           click: (e) => this.$emit("click", e),
           focus: (e) => this.$emit("focus", e),
@@ -5206,7 +5233,7 @@ const $e = u({
       this.componentName,
       {
         ref: "element",
-        class: "vvd-root",
+        class: "vvd-component",
         ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
         ...this.readonly !== void 0 ? { readonly: this.readonly } : {},
         ...this.disabled !== void 0 ? { disabled: this.disabled } : {},
@@ -5403,7 +5430,7 @@ const $e = u({
           ...this.shape !== void 0 ? { shape: this.shape } : {},
           ...this.fixedDropdown !== void 0 ? { "fixed-dropdown": this.fixedDropdown } : {}
         },
-        class: "vvd-root",
+        class: "vvd-component",
         on: {
           click: (e) => this.$emit("click", e),
           focus: (e) => this.$emit("focus", e),
@@ -5425,7 +5452,7 @@ const $e = u({
       this.componentName,
       {
         ref: "element",
-        class: "vvd-root",
+        class: "vvd-component",
         ...this.successText !== void 0 ? { "success-text": this.successText } : {},
         ...this.errorText !== void 0 ? { "error-text": this.errorText } : {},
         ...this.helperText !== void 0 ? { "helper-text": this.helperText } : {},
@@ -5537,7 +5564,7 @@ const $e = u({
           ...this.open !== void 0 ? { open: this.open } : {},
           ...this.trailing !== void 0 ? { trailing: this.trailing } : {}
         },
-        class: "vvd-root",
+        class: "vvd-component",
         on: {
           click: (e) => this.$emit("click", e),
           focus: (e) => this.$emit("focus", e),
@@ -5556,7 +5583,7 @@ const $e = u({
       this.componentName,
       {
         ref: "element",
-        class: "vvd-root",
+        class: "vvd-component",
         ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
         ...this.alternate !== void 0 ? { alternate: this.alternate } : {},
         ...this.modal !== void 0 ? { modal: this.modal } : {},
@@ -5728,7 +5755,7 @@ const $e = u({
           ...this.mode !== void 0 ? { mode: this.mode } : {},
           ...this.markers !== void 0 ? { markers: this.markers } : {}
         },
-        class: "vvd-root",
+        class: "vvd-component",
         on: {
           click: (e) => this.$emit("click", e),
           focus: (e) => this.$emit("focus", e),
@@ -5744,7 +5771,7 @@ const $e = u({
       this.componentName,
       {
         ref: "element",
-        class: "vvd-root",
+        class: "vvd-component",
         ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
         ...this.disabled !== void 0 ? { disabled: this.disabled } : {},
         ...this.value !== void 0 ? { value: this.value } : {},
@@ -5831,7 +5858,7 @@ const $e = u({
           ...this.label !== void 0 ? { label: this.label } : {},
           ...this.connotation !== void 0 ? { connotation: this.connotation } : {}
         },
-        class: "vvd-root",
+        class: "vvd-component",
         on: {
           click: (e) => this.$emit("click", e),
           focus: (e) => this.$emit("focus", e),
@@ -5846,7 +5873,7 @@ const $e = u({
       this.componentName,
       {
         ref: "element",
-        class: "vvd-root",
+        class: "vvd-component",
         ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
         ...this.label !== void 0 ? { label: this.label } : {},
         ...this.connotation !== void 0 ? { connotation: this.connotation } : {},
@@ -5950,7 +5977,7 @@ const $e = u({
           ...this.tabIndex !== void 0 ? { tabIndex: this.tabIndex } : {},
           ...this.ariaSelected !== void 0 ? { "aria-selected": this.ariaSelected } : {}
         },
-        class: "vvd-root",
+        class: "vvd-component",
         on: {
           click: (e) => this.$emit("click", e),
           focus: (e) => this.$emit("focus", e),
@@ -5965,7 +5992,7 @@ const $e = u({
       this.componentName,
       {
         ref: "element",
-        class: "vvd-root",
+        class: "vvd-component",
         ...this.icon !== void 0 ? { icon: this.icon } : {},
         ...this.iconTrailing !== void 0 ? { "icon-trailing": this.iconTrailing } : {},
         ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
@@ -6097,7 +6124,7 @@ const $e = u({
           ...this.activeindicator !== void 0 ? { activeindicator: this.activeindicator } : {},
           ...this.connotation !== void 0 ? { connotation: this.connotation } : {}
         },
-        class: "vvd-root",
+        class: "vvd-component",
         on: {
           click: (e) => this.$emit("click", e),
           focus: (e) => this.$emit("focus", e),
@@ -6113,7 +6140,7 @@ const $e = u({
       this.componentName,
       {
         ref: "element",
-        class: "vvd-root",
+        class: "vvd-component",
         ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
         ...this.orientation !== void 0 ? { orientation: this.orientation } : {},
         ...this.activeid !== void 0 ? { activeid: this.activeid } : {},
@@ -6186,7 +6213,7 @@ const $e = u({
       {
         ref: "element",
         attrs: { ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {} },
-        class: "vvd-root",
+        class: "vvd-component",
         on: {
           click: (e) => this.$emit("click", e),
           focus: (e) => this.$emit("focus", e),
@@ -6201,7 +6228,7 @@ const $e = u({
       this.componentName,
       {
         ref: "element",
-        class: "vvd-root",
+        class: "vvd-component",
         ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
         onClick: (e) => this.$emit("click", e),
         onFocus: (e) => this.$emit("focus", e),
@@ -6270,7 +6297,7 @@ const $e = u({
       {
         ref: "element",
         attrs: { ...this.modelValue !== void 0 ? { "current-value": this.modelValue } : {} },
-        class: "vvd-root",
+        class: "vvd-component",
         on: {
           click: (e) => this.$emit("click", e),
           focus: (e) => this.$emit("focus", e),
@@ -6285,7 +6312,7 @@ const $e = u({
       this.componentName,
       {
         ref: "element",
-        class: "vvd-root",
+        class: "vvd-component",
         ...this.modelValue !== void 0 ? { "current-value": this.modelValue } : {},
         onClick: (e) => this.$emit("click", e),
         onFocus: (e) => this.$emit("focus", e),
@@ -6493,7 +6520,7 @@ const $e = u({
           ...this.shape !== void 0 ? { shape: this.shape } : {},
           ...this.autoComplete !== void 0 ? { autoComplete: this.autoComplete } : {}
         },
-        class: "vvd-root",
+        class: "vvd-component",
         on: {
           click: (e) => this.$emit("click", e),
           focus: (e) => this.$emit("focus", e),
@@ -6509,7 +6536,7 @@ const $e = u({
       this.componentName,
       {
         ref: "element",
-        class: "vvd-root",
+        class: "vvd-component",
         ...this.successText !== void 0 ? { "success-text": this.successText } : {},
         ...this.helperText !== void 0 ? { "helper-text": this.helperText } : {},
         ...this.charCount !== void 0 ? { "char-count": this.charCount } : {},
@@ -6637,7 +6664,7 @@ const $e = u({
           ...this.placement !== void 0 ? { placement: this.placement } : {},
           ...this.open !== void 0 ? { open: this.open } : {}
         },
-        class: "vvd-root",
+        class: "vvd-component",
         domProps: { ...this.anchor !== void 0 ? { anchor: this.anchor } : {} },
         on: {
           click: (e) => this.$emit("click", e),
@@ -6657,7 +6684,7 @@ const $e = u({
       this.componentName,
       {
         ref: "element",
-        class: "vvd-root",
+        class: "vvd-component",
         ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
         ...this.headline !== void 0 ? { headline: this.headline } : {},
         ...this.alternate !== void 0 ? { alternate: this.alternate } : {},
@@ -6757,7 +6784,7 @@ const $e = u({
           ...this.placement !== void 0 ? { placement: this.placement } : {},
           ...this.open !== void 0 ? { open: this.open } : {}
         },
-        class: "vvd-root",
+        class: "vvd-component",
         domProps: { ...this.anchor !== void 0 ? { anchor: this.anchor } : {} },
         on: {
           click: (e) => this.$emit("click", e),
@@ -6773,7 +6800,7 @@ const $e = u({
       this.componentName,
       {
         ref: "element",
-        class: "vvd-root",
+        class: "vvd-component",
         ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
         ...this.text !== void 0 ? { text: this.text } : {},
         ...this.placement !== void 0 ? { placement: this.placement } : {},
@@ -6880,7 +6907,7 @@ const $e = u({
           ...this.disabled !== void 0 ? { disabled: this.disabled } : {},
           ...this.text !== void 0 ? { text: this.text } : {}
         },
-        class: "vvd-root",
+        class: "vvd-component",
         on: {
           click: (e) => this.$emit("click", e),
           focus: (e) => this.$emit("focus", e),
@@ -6900,7 +6927,7 @@ const $e = u({
       this.componentName,
       {
         ref: "element",
-        class: "vvd-root",
+        class: "vvd-component",
         ...this.icon !== void 0 ? { icon: this.icon } : {},
         ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
         ...this.expanded !== void 0 ? { expanded: this.expanded } : {},
@@ -6983,7 +7010,7 @@ const $e = u({
           ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
           ...this.renderCollapsedNodes !== void 0 ? { "render-collapsed-nodes": this.renderCollapsedNodes } : {}
         },
-        class: "vvd-root",
+        class: "vvd-component",
         on: {
           click: (e) => this.$emit("click", e),
           focus: (e) => this.$emit("focus", e),
@@ -6998,7 +7025,7 @@ const $e = u({
       this.componentName,
       {
         ref: "element",
-        class: "vvd-root",
+        class: "vvd-component",
         ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
         ...this.renderCollapsedNodes !== void 0 ? { "render-collapsed-nodes": this.renderCollapsedNodes } : {},
         onClick: (e) => this.$emit("click", e),
@@ -7128,7 +7155,7 @@ const $e = u({
           ...this.selectable !== void 0 ? { selectable: this.selectable } : {},
           ...this.selected !== void 0 ? { selected: this.selected } : {}
         },
-        class: "vvd-root",
+        class: "vvd-component",
         on: {
           click: (e) => this.$emit("click", e),
           focus: (e) => this.$emit("focus", e),
@@ -7143,7 +7170,7 @@ const $e = u({
       this.componentName,
       {
         ref: "element",
-        class: "vvd-root",
+        class: "vvd-component",
         ...this.icon !== void 0 ? { icon: this.icon } : {},
         ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
         ...this.connotation !== void 0 ? { connotation: this.connotation } : {},
@@ -7217,7 +7244,7 @@ const $e = u({
       {
         ref: "element",
         attrs: { ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {} },
-        class: "vvd-root",
+        class: "vvd-component",
         on: {
           click: (e) => this.$emit("click", e),
           focus: (e) => this.$emit("focus", e),
@@ -7232,7 +7259,7 @@ const $e = u({
       this.componentName,
       {
         ref: "element",
-        class: "vvd-root",
+        class: "vvd-component",
         ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
         onClick: (e) => this.$emit("click", e),
         onFocus: (e) => this.$emit("focus", e),