@vonage/vivid-vue 3.11.1 → 3.13.0

package/dist/index.es.js

@@ -1,17 +1,17 @@
-import { ref as d, version as m, onBeforeMount as v, defineComponent as l, h as n } from "vue";
-import { registerAccordion as y, registerAccordionItem as f, registerActionGroup as $, registerAlert as g, registerAvatar as k, registerBadge as b, registerBanner as C, registerBreadcrumb as x, registerBreadcrumbItem as S, registerButton as w, registerCalendar as V, registerCalendarEvent as N, registerCard as B, registerCheckbox as T, registerCombobox as K, registerDataGrid as I, registerDialog as z, registerDivider as F, registerEmptyState as q, registerFab as D, registerHeader as P, registerIcon as L, registerLayout as M, registerMenu as A, registerMenuItem as O, registerNav as H, registerNavDisclosure as E, registerNavItem as G, registerNote as R, registerNumberField as W, registerOption as j, registerPagination as U, registerPopup as J, registerProgress as Q, registerProgressRing as X, registerRadio as Y, registerRadioGroup as Z, registerSelect as _, registerSideDrawer as tt, registerSlider as et, registerSwitch as it, registerTab as ot, registerTabs as st, registerTabPanel as nt, registerTextArea as at, registerTextField as rt, registerToggletip as dt, registerTooltip as lt, registerTreeItem as ht, registerTreeView as ut, registerTag as ct, registerTagGroup as pt } from "@vonage/vivid";
-const p = d("vvd3");
-function $t(t) {
+import { ref as l, version as v, onBeforeMount as y, defineComponent as h, h as n } from "vue";
+import { registerAccordion as f, registerAccordionItem as $, registerActionGroup as g, registerAlert as k, registerAvatar as b, registerBadge as C, registerBanner as S, registerBreadcrumb as w, registerBreadcrumbItem as x, registerButton as V, registerCalendar as N, registerCalendarEvent as B, registerCard as T, registerCheckbox as K, registerCombobox as I, registerDataGrid as m, registerDialog as F, registerDivider as z, registerEmptyState as q, registerFab as D, registerHeader as P, registerIcon as L, registerLayout as A, registerMenu as M, registerMenuItem as O, registerNav as G, registerNavDisclosure as H, registerNavItem as E, registerNote as R, registerNumberField as W, registerOption as j, registerPagination as U, registerProgress as J, registerProgressRing as Q, registerRadio as X, registerRadioGroup as Y, registerSelect as Z, registerSideDrawer as _, registerSlider as tt, registerSwitch as et, registerTab as it, registerTabs as ot, registerTabPanel as st, registerTextArea as nt, registerTextField as at, registerToggletip as rt, registerTooltip as dt, registerTreeItem as lt, registerTreeView as ht, registerTag as ut, registerTagGroup as ct } from "@vonage/vivid";
+const p = l("vvd3");
+function ft(t) {
   p.value = t;
 }
-const r = m.startsWith("2");
-function h(t, o) {
-  const s = d(`${p.value}-${t}`);
-  return v(() => {
+const d = v.startsWith("2");
+function u(t, o) {
+  const s = l(`${p.value}-${t}`);
+  return y(() => {
     o(p.value);
   }), s;
 }
-const gt = l({
+const $t = h({
   name: "VAccordion",
   props: {
     /**
@@ -65,7 +65,7 @@ const gt = l({
     "change"
   ],
   setup(t, o) {
-    const s = h("accordion", y), e = d(null);
+    const s = u("accordion", f), e = l(null);
     return o.expose({
       closeAll() {
         var i;
@@ -74,7 +74,7 @@ const gt = l({
     }), { componentName: s, element: e };
   },
   render() {
-    return r ? n(
+    return d ? n(
       this.componentName,
       {
         ref: "element",
@@ -115,7 +115,7 @@ const gt = l({
       ]
     );
   }
-}), kt = l({
+}), gt = h({
   name: "VAccordionItem",
   props: {
     /**
@@ -199,11 +199,11 @@ const gt = l({
     "change"
   ],
   setup(t, o) {
-    const s = h("accordion-item", f), e = d(null);
+    const s = u("accordion-item", $), e = l(null);
     return o.expose({}), { componentName: s, element: e };
   },
   render() {
-    return r ? n(
+    return d ? n(
       this.componentName,
       {
         ref: "element",
@@ -260,7 +260,7 @@ const gt = l({
       ]
     );
   }
-}), bt = l({
+}), kt = h({
   name: "VActionGroup",
   props: {
     /**
@@ -318,11 +318,11 @@ const gt = l({
     "input"
   ],
   setup(t, o) {
-    const s = h("action-group", $), e = d(null);
+    const s = u("action-group", g), e = l(null);
     return o.expose({}), { componentName: s, element: e };
   },
   render() {
-    return r ? n(
+    return d ? n(
       this.componentName,
       {
         ref: "element",
@@ -370,21 +370,21 @@ const gt = l({
     );
   }
 });
-function mt(t, o) {
+function pt(t, o) {
   return o.forEach((s) => {
     var e;
     s.data || (s.data = {}), s.data.attrs = { ...(e = s.data) == null ? void 0 : e.attrs, slot: t };
   }), o;
 }
-function vt(t, o) {
+function mt(t, o) {
   return o.forEach((s) => {
     s.props || (s.props = {}), s.props = { ...s.props, slot: t };
   }), o;
 }
 function a(t, o) {
-  return o ? r ? mt(t, o) : vt(t, o()) : null;
+  return o ? d ? pt(t, o) : mt(t, o()) : null;
 }
-const Ct = l({
+const bt = h({
   name: "VAlert",
   props: {
     /**
@@ -484,16 +484,16 @@ const Ct = l({
     "close"
   ],
   setup(t, o) {
-    const s = h("alert", g), e = d(null);
+    const s = u("alert", k), e = l(null);
     return o.expose({
-      openChanged(i, u) {
+      openChanged(i, r) {
         var c;
-        return (c = e.value) == null ? void 0 : c.openChanged(i, u);
+        return (c = e.value) == null ? void 0 : c.openChanged(i, r);
       }
     }), { componentName: s, element: e };
   },
   render() {
-    return r ? n(
+    return d ? n(
       this.componentName,
       {
         ref: "element",
@@ -557,7 +557,7 @@ const Ct = l({
       ]
     );
   }
-}), xt = l({
+}), Ct = h({
   name: "VAvatar",
   props: {
     /**
@@ -629,11 +629,11 @@ const Ct = l({
     "input"
   ],
   setup(t, o) {
-    const s = h("avatar", k), e = d(null);
+    const s = u("avatar", b), e = l(null);
     return o.expose({}), { componentName: s, element: e };
   },
   render() {
-    return r ? n(
+    return d ? n(
       this.componentName,
       {
         ref: "element",
@@ -685,7 +685,7 @@ const Ct = l({
       ]
     );
   }
-}), St = l({
+}), St = h({
   name: "VBadge",
   props: {
     /**
@@ -760,11 +760,11 @@ const Ct = l({
     "input"
   ],
   setup(t, o) {
-    const s = h("badge", b), e = d(null);
+    const s = u("badge", C), e = l(null);
     return o.expose({}), { componentName: s, element: e };
   },
   render() {
-    return r ? n(
+    return d ? n(
       this.componentName,
       {
         ref: "element",
@@ -810,7 +810,7 @@ const Ct = l({
       []
     );
   }
-}), wt = l({
+}), wt = h({
   name: "VBanner",
   props: {
     /**
@@ -872,7 +872,7 @@ const Ct = l({
     "input"
   ],
   setup(t, o) {
-    const s = h("banner", C), e = d(null);
+    const s = u("banner", S), e = l(null);
     return o.expose({
       remove() {
         var i;
@@ -881,7 +881,7 @@ const Ct = l({
     }), { componentName: s, element: e };
   },
   render() {
-    return r ? n(
+    return d ? n(
       this.componentName,
       {
         ref: "element",
@@ -937,7 +937,7 @@ const Ct = l({
       ]
     );
   }
-}), Vt = l({
+}), xt = h({
   name: "VBreadcrumb",
   props: {
     /**
@@ -981,11 +981,11 @@ const Ct = l({
     "input"
   ],
   setup(t, o) {
-    const s = h("breadcrumb", x), e = d(null);
+    const s = u("breadcrumb", w), e = l(null);
     return o.expose({}), { componentName: s, element: e };
   },
   render() {
-    return r ? n(
+    return d ? n(
       this.componentName,
       {
         ref: "element",
@@ -1020,7 +1020,7 @@ const Ct = l({
       ]
     );
   }
-}), Nt = l({
+}), Vt = h({
   name: "VBreadcrumbItem",
   props: {
     /**
@@ -1097,11 +1097,11 @@ const Ct = l({
     "input"
   ],
   setup(t, o) {
-    const s = h("breadcrumb-item", S), e = d(null);
+    const s = u("breadcrumb-item", x), e = l(null);
     return o.expose({}), { componentName: s, element: e };
   },
   render() {
-    return r ? n(
+    return d ? n(
       this.componentName,
       {
         ref: "element",
@@ -1153,7 +1153,7 @@ const Ct = l({
       []
     );
   }
-}), Bt = l({
+}), Nt = h({
   name: "VButton",
   props: {
     /**
@@ -1294,7 +1294,7 @@ const Ct = l({
     "input"
   ],
   setup(t, o) {
-    const s = h("button", w), e = d(null);
+    const s = u("button", V), e = l(null);
     return o.expose({
       /**
        * {@inheritDoc (FormAssociated:interface).validate}
@@ -1306,7 +1306,7 @@ const Ct = l({
     }), { componentName: s, element: e };
   },
   render() {
-    return r ? n(
+    return d ? n(
       this.componentName,
       {
         ref: "element",
@@ -1384,7 +1384,7 @@ const Ct = l({
       []
     );
   }
-}), Tt = l({
+}), Bt = h({
   name: "VCalendar",
   props: {
     /**
@@ -1455,16 +1455,16 @@ const Ct = l({
     "input"
   ],
   setup(t, o) {
-    const s = h("calendar", V), e = d(null);
+    const s = u("calendar", N), e = l(null);
     return o.expose({
       onKeydown(i) {
-        var u;
-        return (u = e.value) == null ? void 0 : u.onKeydown(i);
+        var r;
+        return (r = e.value) == null ? void 0 : r.onKeydown(i);
       }
     }), { componentName: s, element: e };
   },
   render() {
-    return r ? n(
+    return d ? n(
       this.componentName,
       {
         ref: "element",
@@ -1541,7 +1541,7 @@ const Ct = l({
       ]
     );
   }
-}), Kt = l({
+}), Tt = h({
   name: "VCalendarEvent",
   props: {
     /**
@@ -1616,11 +1616,11 @@ const Ct = l({
     "input"
   ],
   setup(t, o) {
-    const s = h("calendar-event", N), e = d(null);
+    const s = u("calendar-event", B), e = l(null);
     return o.expose({}), { componentName: s, element: e };
   },
   render() {
-    return r ? n(
+    return d ? n(
       this.componentName,
       {
         ref: "element",
@@ -1668,7 +1668,7 @@ const Ct = l({
       []
     );
   }
-}), It = l({
+}), Kt = h({
   name: "VCard",
   props: {
     /**
@@ -1739,11 +1739,11 @@ const Ct = l({
     "input"
   ],
   setup(t, o) {
-    const s = h("card", B), e = d(null);
+    const s = u("card", T), e = l(null);
     return o.expose({}), { componentName: s, element: e };
   },
   render() {
-    return r ? n(
+    return d ? n(
       this.componentName,
       {
         ref: "element",
@@ -1809,9 +1809,9 @@ const Ct = l({
       ]
     );
   }
-}), zt = l({
+}), It = h({
   name: "VCheckbox",
-  model: r ? {
+  model: d ? {
     prop: "modelValue",
     event: "update:modelValue"
   } : void 0,
@@ -1923,11 +1923,11 @@ const Ct = l({
     "update:modelValue"
   ],
   setup(t, o) {
-    const s = h("checkbox", T), e = d(null);
+    const s = u("checkbox", K), e = l(null);
     return o.expose({}), { componentName: s, element: e };
   },
   render() {
-    return r ? n(
+    return d ? n(
       this.componentName,
       {
         ref: "element",
@@ -1989,9 +1989,9 @@ const Ct = l({
       []
     );
   }
-}), Ft = l({
+}), Ft = h({
   name: "VCombobox",
-  model: r ? {
+  model: d ? {
     prop: "modelValue",
     event: "update:modelValue"
   } : void 0,
@@ -2101,7 +2101,7 @@ const Ct = l({
     "update:modelValue"
   ],
   setup(t, o) {
-    const s = h("combobox", K), e = d(null);
+    const s = u("combobox", I), e = l(null);
     return o.expose({
       /**
        * {@inheritDoc (FormAssociated:interface).validate}
@@ -2121,8 +2121,8 @@ const Ct = l({
        * Calculate and apply listbox positioning based on available viewport space.
        */
       setPositioning(i) {
-        var u;
-        return (u = e.value) == null ? void 0 : u.setPositioning(i);
+        var r;
+        return (r = e.value) == null ? void 0 : r.setPositioning(i);
       },
       /**
        * Moves focus to the first selectable option.
@@ -2141,7 +2141,7 @@ const Ct = l({
     }), { componentName: s, element: e };
   },
   render() {
-    return r ? n(
+    return d ? n(
       this.componentName,
       {
         ref: "element",
@@ -2204,7 +2204,7 @@ const Ct = l({
       ]
     );
   }
-}), qt = l({
+}), zt = h({
   name: "VDataGrid",
   props: {
     /**
@@ -2227,7 +2227,14 @@ const Ct = l({
      * String that gets applied to the the css gridTemplateColumns attribute of child rows
      */
     gridTemplateColumns: { type: String, default: void 0 },
-    selectionMode: { type: String, default: void 0 }
+    selectionMode: {
+      type: String,
+      default: void 0
+    },
+    /**
+     * Array of objects representing the rows of the grid.
+     */
+    rowsData: { type: Array, default: void 0 }
   },
   emits: [
     /**
@@ -2262,16 +2269,16 @@ const Ct = l({
     "input"
   ],
   setup(t, o) {
-    const s = h("data-grid", I), e = d(null);
+    const s = u("data-grid", m), e = l(null);
     return o.expose({
       selectionModeChanged(i) {
-        var u;
-        return (u = e.value) == null ? void 0 : u.selectionModeChanged(i);
+        var r;
+        return (r = e.value) == null ? void 0 : r.selectionModeChanged(i);
       }
     }), { componentName: s, element: e };
   },
   render() {
-    return r ? n(
+    return d ? n(
       this.componentName,
       {
         ref: "element",
@@ -2283,6 +2290,7 @@ const Ct = l({
           ...this.selectionMode !== void 0 ? { "selection-mode": this.selectionMode } : {}
         },
         class: "vvd-root",
+        domProps: { ...this.rowsData !== void 0 ? { rowsData: this.rowsData } : {} },
         on: {
           click: (t) => this.$emit("click", t),
           focus: (t) => this.$emit("focus", t),
@@ -2303,6 +2311,7 @@ const Ct = l({
         ...this.generateHeader !== void 0 ? { "generate-header": this.generateHeader } : {},
         ...this.gridTemplateColumns !== void 0 ? { "grid-template-columns": this.gridTemplateColumns } : {},
         ...this.selectionMode !== void 0 ? { "selection-mode": this.selectionMode } : {},
+        ...this.rowsData !== void 0 ? { rowsData: this.rowsData } : {},
         onClick: (t) => this.$emit("click", t),
         onFocus: (t) => this.$emit("focus", t),
         onBlur: (t) => this.$emit("blur", t),
@@ -2316,7 +2325,262 @@ const Ct = l({
       ]
     );
   }
-}), Dt = l({
+}), qt = h({
+  name: "VDataGridRow",
+  props: {
+    /**
+     * Indicates the element that represents the current item within a container or set of related elements.
+     */
+    ariaCurrent: {
+      type: String,
+      default: void 0
+    },
+    /**
+     * String that gets applied to the the css gridTemplateColumns attribute for the row
+     */
+    gridTemplateColumns: { type: String, default: void 0 },
+    /**
+     * The type of row
+     */
+    rowType: { type: String, default: void 0 },
+    ariaSelected: { 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",
+    /**
+     * Fires a custom 'row-focused' event when focus is on an element (usually a cell or its contents) in the row
+     * @type {unknown}
+     */
+    "row-focused"
+  ],
+  setup(t, o) {
+    const s = u("data-grid-row", m), e = l(null);
+    return o.expose({
+      handleFocusout(i) {
+        var r;
+        return (r = e.value) == null ? void 0 : r.handleFocusout(i);
+      },
+      handleCellFocus(i) {
+        var r;
+        return (r = e.value) == null ? void 0 : r.handleCellFocus(i);
+      },
+      handleKeydown(i) {
+        var r;
+        return (r = e.value) == null ? void 0 : r.handleKeydown(i);
+      }
+    }), { componentName: s, element: e };
+  },
+  render() {
+    return d ? n(
+      this.componentName,
+      {
+        ref: "element",
+        attrs: {
+          ...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 } : {},
+          ...this.ariaSelected !== void 0 ? { "aria-selected": this.ariaSelected } : {}
+        },
+        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),
+          "row-focused": (t) => this.$emit("row-focused", t)
+        }
+      },
+      [this.$slots.default]
+    ) : n(
+      this.componentName,
+      {
+        ref: "element",
+        class: "vvd-root",
+        ...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 } : {},
+        ...this.ariaSelected !== void 0 ? { "aria-selected": this.ariaSelected } : {},
+        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),
+        onRowFocused: (t) => this.$emit("row-focused", t)
+      },
+      [
+        // @ts-ignore
+        this.$slots.default && this.$slots.default()
+      ]
+    );
+  }
+}), Dt = h({
+  name: "VDataGridCell",
+  props: {
+    /**
+     * Extends the data grid cell definition to hold more options.
+     */
+    columnDefinition: { type: null, 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 type of cell
+     */
+    cellType: { type: String, default: void 0 },
+    /**
+     * The column index of the cell.
+     * This will be applied to the css grid-column-index value
+     * applied to the cell
+     */
+    gridColumn: { type: String, default: void 0 },
+    ariaSelected: { type: String, default: void 0 },
+    ariaSort: { 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",
+    /**
+     * Fires a custom 'cell-focused' event when focus is on the cell or its contents
+     * @type {unknown}
+     */
+    "cell-focused"
+  ],
+  setup(t, o) {
+    const s = u("data-grid-cell", m), e = l(null);
+    return o.expose({
+      handleKeydown(i) {
+        var r;
+        return (r = e.value) == null ? void 0 : r.handleKeydown(i);
+      },
+      ariaSelectedChanged(i, r) {
+        var c;
+        return (c = e.value) == null ? void 0 : c.ariaSelectedChanged(i, r);
+      },
+      handleFocusin(i) {
+        var r;
+        return (r = e.value) == null ? void 0 : r.handleFocusin(i);
+      },
+      handleFocusout(i) {
+        var r;
+        return (r = e.value) == null ? void 0 : r.handleFocusout(i);
+      }
+    }), { componentName: s, element: e };
+  },
+  render() {
+    return d ? n(
+      this.componentName,
+      {
+        ref: "element",
+        attrs: {
+          ...this.columnDefinition !== void 0 ? { columnDefinition: this.columnDefinition } : {},
+          ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
+          ...this.cellType !== void 0 ? { "cell-type": this.cellType } : {},
+          ...this.gridColumn !== void 0 ? { "grid-column": this.gridColumn } : {},
+          ...this.ariaSelected !== void 0 ? { "aria-selected": this.ariaSelected } : {},
+          ...this.ariaSort !== void 0 ? { "aria-sort": this.ariaSort } : {}
+        },
+        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),
+          "cell-focused": (t) => this.$emit("cell-focused", t)
+        }
+      },
+      [this.$slots.default]
+    ) : n(
+      this.componentName,
+      {
+        ref: "element",
+        class: "vvd-root",
+        ...this.columnDefinition !== void 0 ? { columnDefinition: this.columnDefinition } : {},
+        ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
+        ...this.cellType !== void 0 ? { "cell-type": this.cellType } : {},
+        ...this.gridColumn !== void 0 ? { "grid-column": this.gridColumn } : {},
+        ...this.ariaSelected !== void 0 ? { "aria-selected": this.ariaSelected } : {},
+        ...this.ariaSort !== void 0 ? { "aria-sort": this.ariaSort } : {},
+        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),
+        onCellFocused: (t) => this.$emit("cell-focused", t)
+      },
+      [
+        // @ts-ignore
+        this.$slots.default && this.$slots.default()
+      ]
+    );
+  }
+}), Pt = h({
   name: "VDialog",
   props: {
     /**
@@ -2384,11 +2648,11 @@ const Ct = l({
     "close"
   ],
   setup(t, o) {
-    const s = h("dialog", z), e = d(null);
+    const s = u("dialog", F), e = l(null);
     return o.expose({
-      openChanged(i, u) {
+      openChanged(i, r) {
         var c;
-        return (c = e.value) == null ? void 0 : c.openChanged(i, u);
+        return (c = e.value) == null ? void 0 : c.openChanged(i, r);
       },
       close() {
         var i;
@@ -2405,7 +2669,7 @@ const Ct = l({
     }), { componentName: s, element: e };
   },
   render() {
-    return r ? n(
+    return d ? n(
       this.componentName,
       {
         ref: "element",
@@ -2440,7 +2704,9 @@ const Ct = l({
         // @slot footer Use the footer slot in order to add action buttons to the bottom of the dialog.
         a("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.
-        a("main", this.$slots.main)
+        a("main", this.$slots.main),
+        // @slot action-items Use the action-items slot in order to add action buttons to the bottom of the dialog.
+        a("action-items", this.$slots["action-items"])
       ]
     ) : n(
       this.componentName,
@@ -2473,11 +2739,13 @@ const Ct = l({
         // @slot footer Use the footer slot in order to add action buttons to the bottom of the dialog.
         a("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.
-        a("main", this.$slots.main)
+        a("main", this.$slots.main),
+        // @slot action-items Use the action-items slot in order to add action buttons to the bottom of the dialog.
+        a("action-items", this.$slots["action-items"])
       ]
     );
   }
-}), Pt = l({
+}), Lt = h({
   name: "VDivider",
   props: {
     /**
@@ -2529,11 +2797,11 @@ const Ct = l({
     "input"
   ],
   setup(t, o) {
-    const s = h("divider", F), e = d(null);
+    const s = u("divider", z), e = l(null);
     return o.expose({}), { componentName: s, element: e };
   },
   render() {
-    return r ? n(
+    return d ? n(
       this.componentName,
       {
         ref: "element",
@@ -2571,7 +2839,7 @@ const Ct = l({
       []
     );
   }
-}), Lt = l({
+}), At = h({
   name: "VEmptyState",
   props: {
     /**
@@ -2627,11 +2895,11 @@ const Ct = l({
     "input"
   ],
   setup(t, o) {
-    const s = h("empty-state", q), e = d(null);
+    const s = u("empty-state", q), e = l(null);
     return o.expose({}), { componentName: s, element: e };
   },
   render() {
-    return r ? n(
+    return d ? n(
       this.componentName,
       {
         ref: "element",
@@ -2682,7 +2950,7 @@ const Ct = l({
       ]
     );
   }
-}), Mt = l({
+}), Mt = h({
   name: "VFab",
   props: {
     /**
@@ -2807,7 +3075,7 @@ const Ct = l({
     "input"
   ],
   setup(t, o) {
-    const s = h("fab", D), e = d(null);
+    const s = u("fab", D), e = l(null);
     return o.expose({
       /**
        * {@inheritDoc (FormAssociated:interface).validate}
@@ -2819,7 +3087,7 @@ const Ct = l({
     }), { componentName: s, element: e };
   },
   render() {
-    return r ? n(
+    return d ? n(
       this.componentName,
       {
         ref: "element",
@@ -2889,7 +3157,7 @@ const Ct = l({
       []
     );
   }
-}), At = l({
+}), Ot = h({
   name: "VHeader",
   props: {
     /**
@@ -2941,11 +3209,11 @@ const Ct = l({
     "input"
   ],
   setup(t, o) {
-    const s = h("header", P), e = d(null);
+    const s = u("header", P), e = l(null);
     return o.expose({}), { componentName: s, element: e };
   },
   render() {
-    return r ? n(
+    return d ? n(
       this.componentName,
       {
         ref: "element",
@@ -2996,7 +3264,7 @@ const Ct = l({
       ]
     );
   }
-}), Ot = l({
+}), Gt = h({
   name: "VIcon",
   props: {
     /**
@@ -3056,7 +3324,7 @@ const Ct = l({
     "input"
   ],
   setup(t, o) {
-    const s = h("icon", L), e = d(null);
+    const s = u("icon", L), e = l(null);
     return o.expose({
       nameChanged() {
         var i;
@@ -3065,7 +3333,7 @@ const Ct = l({
     }), { componentName: s, element: e };
   },
   render() {
-    return r ? n(
+    return d ? n(
       this.componentName,
       {
         ref: "element",
@@ -3108,7 +3376,7 @@ const Ct = l({
       ]
     );
   }
-}), Ht = l({
+}), Ht = h({
   name: "VLayout",
   props: {
     /**
@@ -3172,11 +3440,11 @@ const Ct = l({
     "input"
   ],
   setup(t, o) {
-    const s = h("layout", M), e = d(null);
+    const s = u("layout", A), e = l(null);
     return o.expose({}), { componentName: s, element: e };
   },
   render() {
-    return r ? n(
+    return d ? n(
       this.componentName,
       {
         ref: "element",
@@ -3223,7 +3491,7 @@ const Ct = l({
       ]
     );
   }
-}), Et = l({
+}), Et = h({
   name: "VMenu",
   props: {
     /**
@@ -3287,7 +3555,7 @@ const Ct = l({
     "input"
   ],
   setup(t, o) {
-    const s = h("menu", A), e = d(null);
+    const s = u("menu", M), e = l(null);
     return o.expose({
       /**
        * Focuses the first item in the menu.
@@ -3303,9 +3571,9 @@ const Ct = l({
         var i;
         return (i = e.value) == null ? void 0 : i.collapseExpandedItem();
       },
-      anchorChanged(i, u) {
+      anchorChanged(i, r) {
         var c;
-        return (c = e.value) == null ? void 0 : c.anchorChanged(i, u);
+        return (c = e.value) == null ? void 0 : c.anchorChanged(i, r);
       },
       autoDismissChanged() {
         var i;
@@ -3314,7 +3582,7 @@ const Ct = l({
     }), { componentName: s, element: e };
   },
   render() {
-    return r ? n(
+    return d ? n(
       this.componentName,
       {
         ref: "element",
@@ -3359,9 +3627,9 @@ const Ct = l({
       ]
     );
   }
-}), Gt = l({
+}), Rt = h({
   name: "VMenuItem",
-  model: r ? {
+  model: d ? {
     prop: "modelValue",
     event: "update:modelValue"
   } : void 0,
@@ -3449,11 +3717,11 @@ const Ct = l({
     "update:modelValue"
   ],
   setup(t, o) {
-    const s = h("menu-item", O), e = d(null);
+    const s = u("menu-item", O), e = l(null);
     return o.expose({}), { componentName: s, element: e };
   },
   render() {
-    return r ? n(
+    return d ? n(
       this.componentName,
       {
         ref: "element",
@@ -3505,7 +3773,7 @@ const Ct = l({
       []
     );
   }
-}), Rt = l({
+}), Wt = h({
   name: "VNav",
   props: {
     /**
@@ -3549,11 +3817,11 @@ const Ct = l({
     "input"
   ],
   setup(t, o) {
-    const s = h("nav", H), e = d(null);
+    const s = u("nav", G), e = l(null);
     return o.expose({}), { componentName: s, element: e };
   },
   render() {
-    return r ? n(
+    return d ? n(
       this.componentName,
       {
         ref: "element",
@@ -3588,7 +3856,7 @@ const Ct = l({
       ]
     );
   }
-}), Wt = l({
+}), jt = h({
   name: "VNavDisclosure",
   props: {
     /**
@@ -3642,14 +3910,19 @@ const Ct = l({
      * Fires when the value of an element has been changed.
      * @type {Event}
      */
-    "input"
+    "input",
+    /**
+     * Event emitted when the nav disclosure is toggled.
+     * @type {unknown}
+     */
+    "toggle"
   ],
   setup(t, o) {
-    const s = h("nav-disclosure", E), e = d(null);
+    const s = u("nav-disclosure", H), e = l(null);
     return o.expose({}), { componentName: s, element: e };
   },
   render() {
-    return r ? n(
+    return d ? n(
       this.componentName,
       {
         ref: "element",
@@ -3666,7 +3939,8 @@ const Ct = l({
           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),
+          toggle: (t) => this.$emit("toggle", t)
         }
       },
       [
@@ -3688,7 +3962,8 @@ const Ct = l({
         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),
+        onToggle: (t) => this.$emit("toggle", t)
       },
       [
         // @ts-ignore
@@ -3698,7 +3973,7 @@ const Ct = l({
       ]
     );
   }
-}), jt = l({
+}), Ut = h({
   name: "VNavItem",
   props: {
     /**
@@ -3786,7 +4061,7 @@ const Ct = l({
     "input"
   ],
   setup(t, o) {
-    const s = h("nav-item", G), e = d(null);
+    const s = u("nav-item", E), e = l(null);
     return o.expose({
       getBodyTemplate() {
         var i;
@@ -3795,7 +4070,7 @@ const Ct = l({
     }), { componentName: s, element: e };
   },
   render() {
-    return r ? n(
+    return d ? n(
       this.componentName,
       {
         ref: "element",
@@ -3855,7 +4130,7 @@ const Ct = l({
       ]
     );
   }
-}), Ut = l({
+}), Jt = h({
   name: "VNote",
   props: {
     /**
@@ -3915,11 +4190,11 @@ const Ct = l({
     "input"
   ],
   setup(t, o) {
-    const s = h("note", R), e = d(null);
+    const s = u("note", R), e = l(null);
     return o.expose({}), { componentName: s, element: e };
   },
   render() {
-    return r ? n(
+    return d ? n(
       this.componentName,
       {
         ref: "element",
@@ -3962,9 +4237,9 @@ const Ct = l({
       ]
     );
   }
-}), Jt = l({
+}), Qt = h({
   name: "VNumberField",
-  model: r ? {
+  model: d ? {
     prop: "modelValue",
     event: "update:modelValue"
   } : void 0,
@@ -4111,7 +4386,7 @@ const Ct = l({
     "change"
   ],
   setup(t, o) {
-    const s = h("number-field", W), e = d(null);
+    const s = u("number-field", W), e = l(null);
     return o.expose({
       /**
        * {@inheritDoc (FormAssociated:interface).validate}
@@ -4144,7 +4419,7 @@ const Ct = l({
     }), { componentName: s, element: e };
   },
   render() {
-    return r ? n(
+    return d ? n(
       this.componentName,
       {
         ref: "element",
@@ -4228,7 +4503,7 @@ const Ct = l({
       []
     );
   }
-}), Qt = l({
+}), Xt = h({
   name: "VOption",
   props: {
     /**
@@ -4299,23 +4574,23 @@ const Ct = l({
     "input"
   ],
   setup(t, o) {
-    const s = h("option", j), e = d(null);
+    const s = u("option", j), e = l(null);
     return o.expose({
       /**
        * Updates the ariaChecked property when the checked property changes.
        */
-      checkedChanged(i, u) {
+      checkedChanged(i, r) {
         var c;
-        return (c = e.value) == null ? void 0 : c.checkedChanged(i, u);
+        return (c = e.value) == null ? void 0 : c.checkedChanged(i, r);
       },
-      initialValueChanged(i, u) {
+      initialValueChanged(i, r) {
         var c;
-        return (c = e.value) == null ? void 0 : c.initialValueChanged(i, u);
+        return (c = e.value) == null ? void 0 : c.initialValueChanged(i, r);
       }
     }), { componentName: s, element: e };
   },
   render() {
-    return r ? n(
+    return d ? n(
       this.componentName,
       {
         ref: "element",
@@ -4369,7 +4644,7 @@ const Ct = l({
       ]
     );
   }
-}), Xt = l({
+}), Yt = h({
   name: "VPagination",
   props: {
     /**
@@ -4417,24 +4692,24 @@ const Ct = l({
     "input"
   ],
   setup(t, o) {
-    const s = h("pagination", U), e = d(null);
+    const s = u("pagination", U), e = l(null);
     return o.expose({
-      totalChanged(i, u) {
+      totalChanged(i, r) {
         var c;
-        return (c = e.value) == null ? void 0 : c.totalChanged(i, u);
+        return (c = e.value) == null ? void 0 : c.totalChanged(i, r);
       },
-      selectedIndexChanged(i, u) {
+      selectedIndexChanged(i, r) {
         var c;
-        return (c = e.value) == null ? void 0 : c.selectedIndexChanged(i, u);
+        return (c = e.value) == null ? void 0 : c.selectedIndexChanged(i, r);
       },
-      paginationButtonsChanged(i, u) {
+      paginationButtonsChanged(i, r) {
         var c;
-        return (c = e.value) == null ? void 0 : c.paginationButtonsChanged(i, u);
+        return (c = e.value) == null ? void 0 : c.paginationButtonsChanged(i, r);
       }
     }), { componentName: s, element: e };
   },
   render() {
-    return r ? n(
+    return d ? n(
       this.componentName,
       {
         ref: "element",
@@ -4476,157 +4751,7 @@ const Ct = l({
       []
     );
   }
-}), Yt = l({
-  name: "VPopup",
-  props: {
-    /**
-     * Indicates the element that represents the current item within a container or set of related elements.
-     */
-    ariaCurrent: {
-      type: String,
-      default: void 0
-    },
-    /**
-     * indicates whether the popup is open
-     */
-    open: { type: Boolean, default: void 0 },
-    /**
-     * adds close button to the popup
-     */
-    dismissible: { type: Boolean, default: void 0 },
-    /**
-     * adds small triangle to indicate the trigger element
-     */
-    arrow: { type: Boolean, default: void 0 },
-    /**
-     * set the color-scheme to dark
-     */
-    alternate: { type: Boolean, default: void 0 },
-    /**
-     * the placement of the popup
-     */
-    placement: {
-      type: String,
-      default: void 0
-    },
-    /**
-     * the strategy of the popup
-     */
-    strategy: { type: String, default: void 0 },
-    /**
-     * ID reference to element in the popup’s owner document or HTMLElement.
-     */
-    anchor: { type: [String, HTMLElement], default: void 0 }
-  },
-  emits: [
-    /**
-     * Fires when a pointing device button (such as a mouse's primary mouse button) is both pressed and released while the pointer is located inside the element.
-     * @type {MouseEvent}
-     */
-    "click",
-    /**
-     * Fires when the element receives focus.
-     * @type {FocusEvent}
-     */
-    "focus",
-    /**
-     * Fires when the element loses focus.
-     * @type {FocusEvent}
-     */
-    "blur",
-    /**
-     * Fires when a key is pressed.
-     * @type {KeyboardEvent}
-     */
-    "keydown",
-    /**
-     * Fires when a key is released.
-     * @type {KeyboardEvent}
-     */
-    "keyup",
-    /**
-     * Fires when the value of an element has been changed.
-     * @type {Event}
-     */
-    "input"
-  ],
-  setup(t, o) {
-    const s = h("popup", J), e = d(null);
-    return o.expose({
-      openChanged(i, u) {
-        var c;
-        return (c = e.value) == null ? void 0 : c.openChanged(i, u);
-      },
-      /**
-       * Updates popup's position
-       */
-      updatePosition() {
-        var i;
-        return (i = e.value) == null ? void 0 : i.updatePosition();
-      },
-      show() {
-        var i;
-        return (i = e.value) == null ? void 0 : i.show();
-      },
-      hide() {
-        var i;
-        return (i = e.value) == null ? void 0 : i.hide();
-      }
-    }), { componentName: s, element: e };
-  },
-  render() {
-    return r ? n(
-      this.componentName,
-      {
-        ref: "element",
-        attrs: {
-          ...this.ariaCurrent !== void 0 ? { "aria-current": this.ariaCurrent } : {},
-          ...this.open !== void 0 ? { open: this.open } : {},
-          ...this.dismissible !== void 0 ? { dismissible: this.dismissible } : {},
-          ...this.arrow !== void 0 ? { arrow: this.arrow } : {},
-          ...this.alternate !== void 0 ? { alternate: this.alternate } : {},
-          ...this.placement !== void 0 ? { placement: this.placement } : {},
-          ...this.strategy !== void 0 ? { strategy: this.strategy } : {}
-        },
-        class: "vvd-root",
-        domProps: { ...this.anchor !== void 0 ? { anchor: this.anchor } : {} },
-        on: {
-          click: (t) => this.$emit("click", t),
-          focus: (t) => this.$emit("focus", t),
-          blur: (t) => this.$emit("blur", t),
-          keydown: (t) => this.$emit("keydown", t),
-          keyup: (t) => this.$emit("keyup", t),
-          input: (t) => this.$emit("input", t)
-        }
-      },
-      [this.$slots.default]
-    ) : 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 } : {},
-        ...this.arrow !== void 0 ? { arrow: this.arrow } : {},
-        ...this.alternate !== void 0 ? { alternate: this.alternate } : {},
-        ...this.placement !== void 0 ? { placement: this.placement } : {},
-        ...this.strategy !== void 0 ? { strategy: this.strategy } : {},
-        ...this.anchor !== void 0 ? { anchor: this.anchor } : {},
-        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()
-      ]
-    );
-  }
-}), Zt = l({
+}), Zt = h({
   name: "VProgress",
   props: {
     /**
@@ -4689,11 +4814,11 @@ const Ct = l({
     "input"
   ],
   setup(t, o) {
-    const s = h("progress", Q), e = d(null);
+    const s = u("progress", J), e = l(null);
     return o.expose({}), { componentName: s, element: e };
   },
   render() {
-    return r ? n(
+    return d ? n(
       this.componentName,
       {
         ref: "element",
@@ -4741,7 +4866,7 @@ const Ct = l({
       []
     );
   }
-}), _t = l({
+}), _t = h({
   name: "VProgressRing",
   props: {
     /**
@@ -4803,11 +4928,11 @@ const Ct = l({
     "input"
   ],
   setup(t, o) {
-    const s = h("progress-ring", X), e = d(null);
+    const s = u("progress-ring", Q), e = l(null);
     return o.expose({}), { componentName: s, element: e };
   },
   render() {
-    return r ? n(
+    return d ? n(
       this.componentName,
       {
         ref: "element",
@@ -4853,7 +4978,7 @@ const Ct = l({
       []
     );
   }
-}), te = l({
+}), te = h({
   name: "VRadio",
   props: {
     /**
@@ -4951,11 +5076,11 @@ const Ct = l({
     "change"
   ],
   setup(t, o) {
-    const s = h("radio", Y), e = d(null);
+    const s = u("radio", X), e = l(null);
     return o.expose({}), { componentName: s, element: e };
   },
   render() {
-    return r ? n(
+    return d ? n(
       this.componentName,
       {
         ref: "element",
@@ -5011,9 +5136,9 @@ const Ct = l({
       []
     );
   }
-}), ee = l({
+}), ee = h({
   name: "VRadioGroup",
-  model: r ? {
+  model: d ? {
     prop: "modelValue",
     event: "update:modelValue"
   } : void 0,
@@ -5092,11 +5217,11 @@ const Ct = l({
     "update:modelValue"
   ],
   setup(t, o) {
-    const s = h("radio-group", Z), e = d(null);
+    const s = u("radio-group", Y), e = l(null);
     return o.expose({}), { componentName: s, element: e };
   },
   render() {
-    return r ? n(
+    return d ? n(
       this.componentName,
       {
         ref: "element",
@@ -5147,9 +5272,9 @@ const Ct = l({
       ]
     );
   }
-}), ie = l({
+}), ie = h({
   name: "VSelect",
-  model: r ? {
+  model: d ? {
     prop: "modelValue",
     event: "update:modelValue"
   } : void 0,
@@ -5268,7 +5393,7 @@ const Ct = l({
     "change"
   ],
   setup(t, o) {
-    const s = h("select", _), e = d(null);
+    const s = u("select", Z), e = l(null);
     return o.expose({
       /**
        * Calculate and apply listbox positioning based on available viewport space.
@@ -5280,9 +5405,9 @@ const Ct = l({
       /**
        * Sets the multiple property on the proxy element.
        */
-      multipleChanged(i, u) {
+      multipleChanged(i, r) {
         var c;
-        return (c = e.value) == null ? void 0 : c.multipleChanged(i, u);
+        return (c = e.value) == null ? void 0 : c.multipleChanged(i, r);
       },
       /**
        * Sets an option as selected and gives it focus.
@@ -5301,7 +5426,7 @@ const Ct = l({
     }), { componentName: s, element: e };
   },
   render() {
-    return r ? n(
+    return d ? n(
       this.componentName,
       {
         ref: "element",
@@ -5384,7 +5509,7 @@ const Ct = l({
       ]
     );
   }
-}), oe = l({
+}), oe = h({
   name: "VSideDrawer",
   props: {
     /**
@@ -5444,11 +5569,11 @@ const Ct = l({
     "input"
   ],
   setup(t, o) {
-    const s = h("side-drawer", tt), e = d(null);
+    const s = u("side-drawer", _), e = l(null);
     return o.expose({}), { componentName: s, element: e };
   },
   render() {
-    return r ? n(
+    return d ? n(
       this.componentName,
       {
         ref: "element",
@@ -5499,9 +5624,9 @@ const Ct = l({
       ]
     );
   }
-}), se = l({
+}), se = h({
   name: "VSlider",
-  model: r ? {
+  model: d ? {
     prop: "modelValue",
     event: "update:modelValue"
   } : void 0,
@@ -5605,7 +5730,7 @@ const Ct = l({
     "update:modelValue"
   ],
   setup(t, o) {
-    const s = h("slider", et), e = d(null);
+    const s = u("slider", tt), e = l(null);
     return o.expose({
       /**
        * Increment the value by the step
@@ -5625,13 +5750,13 @@ const Ct = l({
        * Places the thumb based on the current value
        */
       setThumbPositionForOrientation(i) {
-        var u;
-        return (u = e.value) == null ? void 0 : u.setThumbPositionForOrientation(i);
+        var r;
+        return (r = e.value) == null ? void 0 : r.setThumbPositionForOrientation(i);
       }
     }), { componentName: s, element: e };
   },
   render() {
-    return r ? n(
+    return d ? n(
       this.componentName,
       {
         ref: "element",
@@ -5691,7 +5816,7 @@ const Ct = l({
       []
     );
   }
-}), ne = l({
+}), ne = h({
   name: "VSwitch",
   props: {
     /**
@@ -5740,11 +5865,11 @@ const Ct = l({
     "input"
   ],
   setup(t, o) {
-    const s = h("switch", it), e = d(null);
+    const s = u("switch", et), e = l(null);
     return o.expose({}), { componentName: s, element: e };
   },
   render() {
-    return r ? n(
+    return d ? n(
       this.componentName,
       {
         ref: "element",
@@ -5782,7 +5907,7 @@ const Ct = l({
       []
     );
   }
-}), ae = l({
+}), ae = h({
   name: "VTab",
   props: {
     /**
@@ -5856,11 +5981,11 @@ const Ct = l({
     "input"
   ],
   setup(t, o) {
-    const s = h("tab", ot), e = d(null);
+    const s = u("tab", it), e = l(null);
     return o.expose({}), { componentName: s, element: e };
   },
   render() {
-    return r ? n(
+    return d ? n(
       this.componentName,
       {
         ref: "element",
@@ -5910,7 +6035,7 @@ const Ct = l({
       []
     );
   }
-}), re = l({
+}), re = h({
   name: "VTabs",
   props: {
     /**
@@ -5975,14 +6100,14 @@ const Ct = l({
     "change"
   ],
   setup(t, o) {
-    const s = h("tabs", st), e = d(null);
+    const s = u("tabs", ot), e = l(null);
     return o.expose({
       /**
        * The adjust method for FASTTabs
        */
       adjust(i) {
-        var u;
-        return (u = e.value) == null ? void 0 : u.adjust(i);
+        var r;
+        return (r = e.value) == null ? void 0 : r.adjust(i);
       },
       connotationChanged() {
         var i;
@@ -5992,9 +6117,9 @@ const Ct = l({
         var i;
         return (i = e.value) == null ? void 0 : i.orientationChanged();
       },
-      activeidChanged(i, u) {
+      activeidChanged(i, r) {
         var c;
-        return (c = e.value) == null ? void 0 : c.activeidChanged(i, u);
+        return (c = e.value) == null ? void 0 : c.activeidChanged(i, r);
       },
       tabsChanged() {
         var i;
@@ -6011,7 +6136,7 @@ const Ct = l({
     }), { componentName: s, element: e };
   },
   render() {
-    return r ? n(
+    return d ? n(
       this.componentName,
       {
         ref: "element",
@@ -6058,7 +6183,7 @@ const Ct = l({
       ]
     );
   }
-}), de = l({
+}), de = h({
   name: "VTabPanel",
   props: {
     /**
@@ -6102,11 +6227,11 @@ const Ct = l({
     "input"
   ],
   setup(t, o) {
-    const s = h("tab-panel", nt), e = d(null);
+    const s = u("tab-panel", st), e = l(null);
     return o.expose({}), { componentName: s, element: e };
   },
   render() {
-    return r ? n(
+    return d ? n(
       this.componentName,
       {
         ref: "element",
@@ -6141,9 +6266,9 @@ const Ct = l({
       ]
     );
   }
-}), le = l({
+}), le = h({
   name: "VTextArea",
-  model: r ? {
+  model: d ? {
     prop: "modelValue",
     event: "update:modelValue"
   } : void 0,
@@ -6186,11 +6311,11 @@ const Ct = l({
     "update:modelValue"
   ],
   setup(t, o) {
-    const s = h("text-area", at), e = d(null);
+    const s = u("text-area", nt), e = l(null);
     return o.expose({}), { componentName: s, element: e };
   },
   render() {
-    return r ? n(
+    return d ? n(
       this.componentName,
       {
         ref: "element",
@@ -6222,9 +6347,9 @@ const Ct = l({
       []
     );
   }
-}), he = l({
+}), he = h({
   name: "VTextField",
-  model: r ? {
+  model: d ? {
     prop: "modelValue",
     event: "update:modelValue"
   } : void 0,
@@ -6371,7 +6496,7 @@ const Ct = l({
     "change"
   ],
   setup(t, o) {
-    const s = h("text-field", rt), e = d(null);
+    const s = u("text-field", at), e = l(null);
     return o.expose({
       /**
        * Selects all the text in the text field
@@ -6390,7 +6515,7 @@ const Ct = l({
     }), { componentName: s, element: e };
   },
   render() {
-    return r ? n(
+    return d ? n(
       this.componentName,
       {
         ref: "element",
@@ -6474,7 +6599,7 @@ const Ct = l({
       []
     );
   }
-}), ue = l({
+}), ue = h({
   name: "VToggletip",
   props: {
     /**
@@ -6541,20 +6666,20 @@ const Ct = l({
     "input"
   ],
   setup(t, o) {
-    const s = h("toggletip", dt), e = d(null);
+    const s = u("toggletip", rt), e = l(null);
     return o.expose({
-      anchorChanged(i, u) {
+      anchorChanged(i, r) {
         var c;
-        return (c = e.value) == null ? void 0 : c.anchorChanged(i, u);
+        return (c = e.value) == null ? void 0 : c.anchorChanged(i, r);
       },
-      openChanged(i, u) {
+      openChanged(i, r) {
         var c;
-        return (c = e.value) == null ? void 0 : c.openChanged(i, u);
+        return (c = e.value) == null ? void 0 : c.openChanged(i, r);
       }
     }), { componentName: s, element: e };
   },
   render() {
-    return r ? n(
+    return d ? n(
       this.componentName,
       {
         ref: "element",
@@ -6607,7 +6732,7 @@ const Ct = l({
       ]
     );
   }
-}), ce = l({
+}), ce = h({
   name: "VTooltip",
   props: {
     /**
@@ -6662,20 +6787,20 @@ const Ct = l({
     "input"
   ],
   setup(t, o) {
-    const s = h("tooltip", lt), e = d(null);
+    const s = u("tooltip", dt), e = l(null);
     return o.expose({
-      anchorChanged(i, u) {
+      anchorChanged(i, r) {
         var c;
-        return (c = e.value) == null ? void 0 : c.anchorChanged(i, u);
+        return (c = e.value) == null ? void 0 : c.anchorChanged(i, r);
       },
-      openChanged(i, u) {
+      openChanged(i, r) {
         var c;
-        return (c = e.value) == null ? void 0 : c.openChanged(i, u);
+        return (c = e.value) == null ? void 0 : c.openChanged(i, r);
       }
     }), { componentName: s, element: e };
   },
   render() {
-    return r ? n(
+    return d ? n(
       this.componentName,
       {
         ref: "element",
@@ -6717,7 +6842,7 @@ const Ct = l({
       []
     );
   }
-}), pe = l({
+}), pe = h({
   name: "VTreeItem",
   props: {
     /**
@@ -6795,11 +6920,11 @@ const Ct = l({
     "selected-change"
   ],
   setup(t, o) {
-    const s = h("tree-item", ht), e = d(null);
+    const s = u("tree-item", lt), e = l(null);
     return o.expose({}), { componentName: s, element: e };
   },
   render() {
-    return r ? n(
+    return d ? n(
       this.componentName,
       {
         ref: "element",
@@ -6853,7 +6978,7 @@ const Ct = l({
       ]
     );
   }
-}), me = l({
+}), me = h({
   name: "VTreeView",
   props: {
     /**
@@ -6902,11 +7027,11 @@ const Ct = l({
     "input"
   ],
   setup(t, o) {
-    const s = h("tree-view", ut), e = d(null);
+    const s = u("tree-view", ht), e = l(null);
     return o.expose({}), { componentName: s, element: e };
   },
   render() {
-    return r ? n(
+    return d ? n(
       this.componentName,
       {
         ref: "element",
@@ -6945,7 +7070,7 @@ const Ct = l({
       ]
     );
   }
-}), ve = l({
+}), ve = h({
   name: "VTag",
   props: {
     /**
@@ -7029,15 +7154,15 @@ const Ct = l({
     "input"
   ],
   setup(t, o) {
-    const s = h("tag", ct), e = d(null);
+    const s = u("tag", ut), e = l(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);
+        var r;
+        return (r = e.value) == null ? void 0 : r.handleKeydown(i);
       },
       handleClick() {
         var i;
@@ -7046,7 +7171,7 @@ const Ct = l({
     }), { componentName: s, element: e };
   },
   render() {
-    return r ? n(
+    return d ? n(
       this.componentName,
       {
         ref: "element",
@@ -7098,7 +7223,7 @@ const Ct = l({
       []
     );
   }
-}), ye = l({
+}), ye = h({
   name: "VTagGroup",
   props: {
     /**
@@ -7142,11 +7267,11 @@ const Ct = l({
     "input"
   ],
   setup(t, o) {
-    const s = h("tag-group", pt), e = d(null);
+    const s = u("tag-group", ct), e = l(null);
     return o.expose({}), { componentName: s, element: e };
   },
   render() {
-    return r ? n(
+    return d ? n(
       this.componentName,
       {
         ref: "element",
@@ -7183,39 +7308,40 @@ const Ct = l({
   }
 });
 export {
-  gt as VAccordion,
-  kt as VAccordionItem,
-  bt as VActionGroup,
-  Ct as VAlert,
-  xt as VAvatar,
+  $t as VAccordion,
+  gt as VAccordionItem,
+  kt as VActionGroup,
+  bt as VAlert,
+  Ct as VAvatar,
   St as VBadge,
   wt as VBanner,
-  Vt as VBreadcrumb,
-  Nt as VBreadcrumbItem,
-  Bt as VButton,
-  Tt as VCalendar,
-  Kt as VCalendarEvent,
-  It as VCard,
-  zt as VCheckbox,
+  xt as VBreadcrumb,
+  Vt as VBreadcrumbItem,
+  Nt as VButton,
+  Bt as VCalendar,
+  Tt as VCalendarEvent,
+  Kt as VCard,
+  It as VCheckbox,
   Ft as VCombobox,
-  qt as VDataGrid,
-  Dt as VDialog,
-  Pt as VDivider,
-  Lt as VEmptyState,
+  zt as VDataGrid,
+  Dt as VDataGridCell,
+  qt as VDataGridRow,
+  Pt as VDialog,
+  Lt as VDivider,
+  At as VEmptyState,
   Mt as VFab,
-  At as VHeader,
-  Ot as VIcon,
+  Ot as VHeader,
+  Gt as VIcon,
   Ht as VLayout,
   Et as VMenu,
-  Gt as VMenuItem,
-  Rt as VNav,
-  Wt as VNavDisclosure,
-  jt as VNavItem,
-  Ut as VNote,
-  Jt as VNumberField,
-  Qt as VOption,
-  Xt as VPagination,
-  Yt as VPopup,
+  Rt as VMenuItem,
+  Wt as VNav,
+  jt as VNavDisclosure,
+  Ut as VNavItem,
+  Jt as VNote,
+  Qt as VNumberField,
+  Xt as VOption,
+  Yt as VPagination,
   Zt as VProgress,
   _t as VProgressRing,
   te as VRadio,
@@ -7235,5 +7361,5 @@ export {
   ce as VTooltip,
   pe as VTreeItem,
   me as VTreeView,
-  $t as setCustomComponentPrefix
+  ft as setCustomComponentPrefix
 };