@zeedhi/vuetify 3.0.11 → 3.1.0

package/dist/zd-vuetify.mjs

@@ -3,7 +3,7 @@ var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { en
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 import { Icons, AlertService, Alert, Badge, Breadcrumbs, ButtonGroup, Button, Card, Carousel as Carousel$1, Form, Input, CheckboxMultiple, Checkbox, Chip, CodeViewer, Col, CollapseCard, Container, TextInput, NumberInput, AutoNumeric, Currency, DateInput, DateRange, DialogService, Divider, Dropdown, Footer, ChildNotFoundError, Frame, FramePage, Grid, GridEditable, Toggleable, Header, Icon as Icon$1, Image, Increment, IterableComponentRender, IterableColumnsButton, IterablePageInfo, Select, IterablePageSize, IterablePagination, Search, Layout, List, ListItem, ListGroup, Loading, LoadingService, Login, LoginButton, Main, MasterDetail, Menu, MenuButton, MenuGroup, MenuLink, MenuSeparator, ModalService, ModalCloseButton, Month, Password, Progress, Radio, Row, SelectMultiple, SvgMap, Switch, Table, Tab, Tabs, Tag, Text, Textarea, Time, Tooltip, TreeGrid, Tree, initTheme } from "@zeedhi/common";
 import { Config, Event as Event$1, Mask, Utils, DateHelper, I18n, InstanceNotFoundError, FormatterParserProvider, KeyMap, Metadata, dayjs, ViewService } from "@zeedhi/core";
-import { defineComponent, h, ref, computed, onMounted, onBeforeUnmount, watchEffect, resolveComponent, createElementBlock, openBlock, normalizeClass, createElementVNode, withDirectives, createCommentVNode, Fragment, renderList, createBlock, normalizeStyle, withModifiers, renderSlot, toDisplayString, createTextVNode, withCtx, vShow, useTemplateRef, onUnmounted, resolveDynamicComponent, mergeProps, createVNode, getCurrentInstance, reactive, inject, provide, onBeforeMount, watch, nextTick, toHandlers, createSlots, shallowReactive, toRefs, useId, onUpdated, cloneVNode, withKeys, normalizeProps, guardReactiveProps, useSlots, isMemoSame, resolveDirective } from "vue";
+import { defineComponent, h, ref, computed, onMounted, onBeforeUnmount, watchEffect, resolveComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, Fragment, renderList, normalizeStyle, withModifiers, renderSlot, createCommentVNode, toDisplayString, createTextVNode, createBlock, withCtx, withDirectives, vShow, unref, resolveDynamicComponent, mergeProps, createVNode, render, useTemplateRef, getCurrentInstance, reactive, watch, inject, provide, onBeforeMount, onUnmounted, nextTick, toHandlers, createSlots, shallowReactive, toRefs, onUpdated, useId, cloneVNode, withKeys, normalizeProps, guardReactiveProps, useSlots, resolveDirective, isMemoSame } from "vue";
 import { useTheme, useDisplay, createVuetify } from "vuetify";
 import * as components$1 from "vuetify/components";
 import * as directives from "vuetify/directives";
@@ -168,8 +168,8 @@ var PrismEditor = /* @__PURE__ */ defineComponent({
         selectionEnd
       });
     },
-    _getLines: function _getLines(text, position) {
-      return text.substring(0, position).split("\n");
+    _getLines: function _getLines(text2, position) {
+      return text2.substring(0, position).split("\n");
     },
     _applyEdits: function _applyEdits(record) {
       var input = this.$refs.textarea;
@@ -400,7 +400,7 @@ var PrismEditor = /* @__PURE__ */ defineComponent({
       }
     }
   },
-  render: function render() {
+  render: function render2() {
     var _this3 = this;
     var lineNumberWidthCalculator = h("div", {
       "class": "prism-editor__line-width-calc",
@@ -952,97 +952,35 @@ const He = (f, E) => {
     };
   }
 });
-const _sfc_main$v = defineComponent({
-  props: {
-    overflow: {
-      type: [String, Number]
-    },
-    value: {
-      type: [String, Number, Boolean]
-    },
-    classes: {
-      type: Array,
-      default: () => []
-    },
-    styles: {
-      type: Array,
-      default: () => []
-    },
-    tag: {
-      type: String,
-      default: "span"
-    }
-  },
-  emits: ["click"],
-  setup(props, { emit }) {
-    let observer;
-    const labelRef = useTemplateRef("value");
-    const clientWidth = ref(0);
-    onMounted(() => {
-      observer = new ResizeObserver(() => {
-        if (labelRef.value) {
-          clientWidth.value = labelRef.value.clientWidth;
-        }
-      });
-      if (labelRef.value) observer.observe(labelRef.value);
-    });
-    onUnmounted(() => {
-      if (observer) observer.disconnect();
-    });
-    const tooltipDisabled = computed(() => {
-      const labelEl = labelRef.value;
-      if (!labelEl) return true;
-      const overflow = clientWidth.value < labelEl.scrollWidth;
-      return !(overflow || Number.isInteger(props.overflow));
-    });
-    const click = (event) => {
-      emit("click", event);
-    };
-    const isNumber = (overflow) => {
-      return typeof overflow === "number" || !Number.isNaN(Number(overflow));
+const text = ref("");
+const targetElement = ref(null);
+function useTooltipManager() {
+  const showTooltip = (element, content2) => {
+    targetElement.value = element;
+    text.value = content2;
+  };
+  const hideTooltip = () => {
+    targetElement.value = null;
+  };
+  const isVisible = computed(() => targetElement.value !== null);
+  return { isVisible, text, targetElement, showTooltip, hideTooltip };
+}
+const _sfc_main$w = /* @__PURE__ */ defineComponent({
+  __name: "ZdTooltipOverflow",
+  setup(__props) {
+    const { isVisible, text: text2, targetElement: targetElement2 } = useTooltipManager();
+    return (_ctx, _cache) => {
+      const _component_v_tooltip = resolveComponent("v-tooltip");
+      return openBlock(), createBlock(_component_v_tooltip, {
+        "model-value": unref(isVisible),
+        activator: unref(targetElement2),
+        text: unref(text2),
+        location: "bottom",
+        openOnClick: false
+      }, null, 8, ["model-value", "activator", "text"]);
     };
-    return { tooltipDisabled, click, isNumber };
   }
 });
-const _export_sfc = (sfc, props) => {
-  const target = sfc.__vccOpts || sfc;
-  for (const [key, val] of props) {
-    target[key] = val;
-  }
-  return target;
-};
-function _sfc_render$1v(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_v_tooltip = resolveComponent("v-tooltip");
-  return openBlock(), createBlock(resolveDynamicComponent(_ctx.tag), mergeProps({
-    ref: "value"
-  }, {
-    class: [
-      "zd-tooltip-overflow",
-      {
-        "zd-tooltip-overflow--hidden": _ctx.overflow === "hidden",
-        "zd-tooltip-overflow--wrap": _ctx.overflow === "wrap",
-        "zd-tooltip-overflow--ellipsis": _ctx.overflow === "ellipsis"
-      },
-      _ctx.isNumber(_ctx.overflow) ? `zd-tooltip-overflow--clamp zd-tooltip-overflow--clamp-${_ctx.overflow}` : "",
-      ..._ctx.classes
-    ],
-    style: _ctx.styles,
-    onClick: _cache[0] || (_cache[0] = ($event) => _ctx.click($event))
-  }), {
-    default: withCtx(() => [
-      createVNode(_component_v_tooltip, {
-        location: "bottom",
-        openOnClick: false,
-        text: _ctx.$t(String(_ctx.value)),
-        disabled: _ctx.tooltipDisabled,
-        activator: "parent"
-      }, null, 8, ["text", "disabled"]),
-      renderSlot(_ctx.$slots, "default")
-    ]),
-    _: 3
-  }, 16, ["class", "style"]);
-}
-const ZdTooltipOverflow = /* @__PURE__ */ _export_sfc(_sfc_main$v, [["render", _sfc_render$1v]]);
 const component = defineComponent({
   props: {
     childProps: {
@@ -1067,7 +1005,14 @@ const component = defineComponent({
     };
   }
 });
-function _sfc_render$1u(_ctx, _cache, $props, $setup, $data, $options) {
+const _export_sfc = (sfc, props) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props) {
+    target[key] = val;
+  }
+  return target;
+};
+function _sfc_render$1v(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createBlock(resolveDynamicComponent(_ctx.childProps.component), mergeProps(_ctx.childProps, {
     parent: _ctx.parent,
     onMouseenter: _cache[0] || (_cache[0] = ($event) => _ctx.reemitEvent($event, "mouseenter")),
@@ -1079,7 +1024,7 @@ function _sfc_render$1u(_ctx, _cache, $props, $setup, $data, $options) {
     onBlur: _cache[6] || (_cache[6] = ($event) => _ctx.reemitEvent($event, "blur"))
   }), null, 16, ["parent"]);
 }
-const ZdActivatorWrapper = /* @__PURE__ */ _export_sfc(component, [["render", _sfc_render$1u]]);
+const ZdActivatorWrapper = /* @__PURE__ */ _export_sfc(component, [["render", _sfc_render$1v]]);
 const _IconRenderer = class _IconRenderer {
   static getIconHtml(iconName, vuetify) {
     const IconRender = {
@@ -1126,7 +1071,7 @@ function getIconPlugin(name) {
     return str.match(/[A-Z]{2,}(?=[A-Z][a-z]+[0-9]*|\b)|[A-Z]?[a-z]+[0-9]*|[A-Z]|[0-9]+/g).map((x) => x.toLowerCase()).join("-");
   };
   const toCamelCase = (str) => {
-    return str.toLowerCase().replace(/[^a-zA-Z0-9]+(.)/g, (_m, chr) => chr.toUpperCase());
+    return str.replace(/[^a-zA-Z0-9]+(.)/g, (_m, chr) => chr.toUpperCase()).replace(/^[A-Z]/, (m) => m.toLowerCase()).replace(/[^a-zA-Z0-9]/g, "");
   };
   const camelizedName = toCamelCase(name);
   const kebabName = toKebabCase(name);
@@ -1145,7 +1090,7 @@ function styleObjectPlugin(style) {
   }
   return objectStyle;
 }
-function setFillHeight(element) {
+function setFillHeight(element, fillHeight = false) {
   const parent = element.parentElement;
   if (parent) {
     parent.style.display = "flex";
@@ -1153,7 +1098,8 @@ function setFillHeight(element) {
     Array.from(parent.children).forEach((child) => {
       const childElement = child;
       if (childElement === element) {
-        childElement.style.flex = "1 1 0";
+        const flexBasis = typeof fillHeight === "string" ? fillHeight : "0";
+        childElement.style.flex = `1 1 ${flexBasis}`;
         childElement.style.overflowY = "auto";
       } else {
         childElement.style.flex = "0 0 auto";
@@ -1182,6 +1128,29 @@ const mergeDictionaries = (dictArray) => {
 function buildProps(props) {
   return props;
 }
+function installTooltipOverflow(app) {
+  const tooltipContainer = document.createElement("div");
+  tooltipContainer.id = "zeedhi-tooltip-container";
+  const tooltipVNode = createVNode(_sfc_main$w);
+  tooltipVNode.appContext = app._context;
+  render(tooltipVNode, tooltipContainer);
+  document.body.appendChild(tooltipContainer);
+  return {
+    container: tooltipContainer,
+    vNode: tooltipVNode
+  };
+}
+function setupTooltipOverflowCleanup(app, cleanupData) {
+  const { container } = cleanupData;
+  const originalUnmount = app.unmount;
+  app.unmount = () => {
+    render(null, container);
+    if (container.parentNode) {
+      container.parentNode.removeChild(container);
+    }
+    originalUnmount();
+  };
+}
 const ZdComponentProps = buildProps({
   allowDuplicate: {
     type: [String, Boolean],
@@ -1195,7 +1164,8 @@ const ZdComponentProps = buildProps({
     type: [String, Array],
     default() {
       return [];
-    }
+    },
+    watch: false
   },
   cssClass: {
     type: String,
@@ -1214,13 +1184,15 @@ const ZdComponentProps = buildProps({
     type: Object,
     default() {
       return {};
-    }
+    },
+    watch: false
   },
   events: {
     type: Object,
     default() {
       return {};
-    }
+    },
+    watch: false
   },
   instanceObject: {
     type: Object
@@ -1233,7 +1205,8 @@ const ZdComponentProps = buildProps({
     type: Object,
     default() {
       return {};
-    }
+    },
+    watch: false
   },
   light: {
     // deprecated
@@ -1245,7 +1218,8 @@ const ZdComponentProps = buildProps({
     required: true
   },
   parent: {
-    type: Object
+    type: Object,
+    watch: false
   },
   tabStop: {
     type: [String, Boolean],
@@ -1292,7 +1266,7 @@ function useComponentLifeCycles(instance, createdFromObject, root2) {
     if (!rootElement) {
       Logger.warn("root element not found");
     }
-    if (instance.fillHeight && rootElement.value) setFillHeight(rootElement.value);
+    if (instance.fillHeight && rootElement.value) setFillHeight(rootElement.value, instance.fillHeight);
     if (rootElement.value) assignViewFocusFn(rootElement.value, instance);
     if (instance.autofocus && !instance.isFocused) {
       instance.setFocus();
@@ -1312,7 +1286,7 @@ function useComponentLifeCycles(instance, createdFromObject, root2) {
     }
   });
 }
-function useCreateInstance(props, ctx, ObjectClass, checkParentTypeFn) {
+function useCreateInstance(props, ctx, ObjectClass, propsDefs = {}, checkParentTypeFn) {
   const { parents, addChild } = useVueParentComponent();
   const root2 = useTemplateRef("root");
   let instanceObj;
@@ -1366,6 +1340,17 @@ function useCreateInstance(props, ctx, ObjectClass, checkParentTypeFn) {
     });
   }
   const instance = reactive(instanceObj);
+  Object.keys(props).forEach((key) => {
+    if (!(key in instance)) return;
+    if (typeof props[key] === "function") return;
+    if (propsDefs[key] && !propsDefs[key].watch) return;
+    watch(
+      () => props[key],
+      (value) => {
+        instance[key] = value;
+      }
+    );
+  });
   addChild({ instance, props });
   if (!createdFromObject) instance.onCreated();
   useComponentLifeCycles(instance, createdFromObject, root2);
@@ -1424,10 +1409,12 @@ const ZdComponentRenderProps = buildProps({
     type: [String, Array],
     default() {
       return [];
-    }
+    },
+    watch: false
   },
   component: {
-    type: String
+    type: String,
+    watch: false
   }
 });
 const ZdAlertProps$1 = buildProps({
@@ -1441,7 +1428,7 @@ const alertComponent = defineComponent({
   props: ZdAlertProps$1,
   inheritAttrs: false,
   setup(props, ctx) {
-    const { instance, root: root2 } = useCreateInstance(props, ctx, Alert);
+    const { instance, root: root2 } = useCreateInstance(props, ctx, Alert, ZdAlertProps$1);
     const manager = AlertService.instantiateManager(props.multiple);
     const managerProxy = reactive(manager);
     AlertService.registerManager(managerProxy);
@@ -1528,7 +1515,7 @@ const alertComponent = defineComponent({
 });
 const _hoisted_1$F = { class: "zd-alert-wrapper" };
 const _hoisted_2$l = ["innerHTML"];
-function _sfc_render$1t(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$1u(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_v_btn = resolveComponent("v-btn");
   const _component_v_snackbar = resolveComponent("v-snackbar");
   return openBlock(), createElementBlock("div", _hoisted_1$F, [
@@ -1581,7 +1568,7 @@ function _sfc_render$1t(_ctx, _cache, $props, $setup, $data, $options) {
     }), 128))
   ]);
 }
-const ZdAlert = /* @__PURE__ */ _export_sfc(alertComponent, [["render", _sfc_render$1t]]);
+const ZdAlert = /* @__PURE__ */ _export_sfc(alertComponent, [["render", _sfc_render$1u]]);
 const ZdBadgeProps$1 = buildProps({
   ...ZdComponentRenderProps,
   badge: {
@@ -1597,7 +1584,7 @@ const badgeComponent = defineComponent({
   props: ZdBadgeProps$1,
   inheritAttrs: false,
   setup(props, ctx) {
-    const { instance, root: root2 } = useCreateInstance(props, ctx, Badge);
+    const { instance, root: root2 } = useCreateInstance(props, ctx, Badge, ZdBadgeProps$1);
     return {
       instance,
       root: root2
@@ -1605,7 +1592,7 @@ const badgeComponent = defineComponent({
   }
 });
 const _hoisted_1$E = { class: "zd-badge__wrapper" };
-function _sfc_render$1s(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$1t(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_v_badge = resolveComponent("v-badge");
   return openBlock(), createElementBlock("div", _hoisted_1$E, [
     withDirectives(createVNode(_component_v_badge, {
@@ -1639,7 +1626,7 @@ function _sfc_render$1s(_ctx, _cache, $props, $setup, $data, $options) {
     ])
   ]);
 }
-const ZdBadge = /* @__PURE__ */ _export_sfc(badgeComponent, [["render", _sfc_render$1s]]);
+const ZdBadge = /* @__PURE__ */ _export_sfc(badgeComponent, [["render", _sfc_render$1t]]);
 var slotPattern;
 function useTranslation() {
   const instance = currentInstance();
@@ -1696,7 +1683,8 @@ const ZdBreadcrumbsProps$1 = buildProps({
   },
   items: {
     type: [Array, String],
-    default: () => []
+    default: () => [],
+    watch: false
   },
   large: {
     type: [Boolean, String],
@@ -1711,7 +1699,7 @@ const breadcrumbsComponent = defineComponent({
   props: ZdBreadcrumbsProps$1,
   inheritAttrs: false,
   setup(props, ctx) {
-    const { instance, root: root2 } = useCreateInstance(props, ctx, Breadcrumbs);
+    const { instance, root: root2 } = useCreateInstance(props, ctx, Breadcrumbs, ZdBreadcrumbsProps$1);
     const { t } = useTranslation();
     const getTranslatedItems = () => {
       return instance.items.map((item) => {
@@ -1730,7 +1718,7 @@ const breadcrumbsComponent = defineComponent({
   }
 });
 const _hoisted_1$D = { key: 1 };
-function _sfc_render$1r(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$1s(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_v_icon = resolveComponent("v-icon");
   const _component_v_breadcrumbs = resolveComponent("v-breadcrumbs");
   return withDirectives((openBlock(), createBlock(_component_v_breadcrumbs, {
@@ -1762,7 +1750,7 @@ function _sfc_render$1r(_ctx, _cache, $props, $setup, $data, $options) {
     [vShow, _ctx.instance.isVisible]
   ]);
 }
-const ZdBreadcrumbs = /* @__PURE__ */ _export_sfc(breadcrumbsComponent, [["render", _sfc_render$1r]]);
+const ZdBreadcrumbs = /* @__PURE__ */ _export_sfc(breadcrumbsComponent, [["render", _sfc_render$1s]]);
 function useDensity({
   instance
 }) {
@@ -1844,12 +1832,12 @@ const ZdButtonGroupProps$1 = buildProps({
     default: () => []
   }
 });
-const _sfc_main$u = defineComponent({
+const _sfc_main$v = defineComponent({
   name: "ZdButtonGroup",
   props: ZdButtonGroupProps$1,
   inheritAttrs: false,
   setup(props, ctx) {
-    const { instance, root: root2 } = useCreateInstance(props, ctx, ButtonGroup);
+    const { instance, root: root2 } = useCreateInstance(props, ctx, ButtonGroup, ZdButtonGroupProps$1);
     const { density } = useDensity({ instance });
     const { click, mouseenter, mouseleave } = useGetMethods(instance, root2);
     function change() {
@@ -1874,7 +1862,7 @@ const _sfc_main$u = defineComponent({
     };
   }
 });
-function _sfc_render$1q(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$1r(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_v_btn_toggle = resolveComponent("v-btn-toggle");
   return openBlock(), createBlock(_component_v_btn_toggle, mergeProps({
     ref: "root",
@@ -1927,7 +1915,7 @@ function _sfc_render$1q(_ctx, _cache, $props, $setup, $data, $options) {
     _: 3
   }, 16, ["id", "modelValue", "class", "style", "divided", "rounded", "tile", "theme", "density", "onUpdate:modelValue"]);
 }
-const ZdButtonGroup = /* @__PURE__ */ _export_sfc(_sfc_main$u, [["render", _sfc_render$1q]]);
+const ZdButtonGroup = /* @__PURE__ */ _export_sfc(_sfc_main$v, [["render", _sfc_render$1r]]);
 const ZdButtonProps$1 = buildProps({
   ...ZdComponentRenderProps,
   absolute: {
@@ -2135,7 +2123,7 @@ const buttonComponent = defineComponent({
   props: ZdButtonProps$1,
   inheritAttrs: false,
   setup(props, ctx) {
-    const { instance, root: root2 } = useCreateInstance(props, ctx, Button);
+    const { instance, root: root2 } = useCreateInstance(props, ctx, Button, ZdButtonProps$1);
     const buttonScope = useButtonInstance$1({ instance, root: root2 });
     return {
       ...buttonScope,
@@ -2144,7 +2132,7 @@ const buttonComponent = defineComponent({
     };
   }
 });
-function _sfc_render$1p(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$1q(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_v_btn = resolveComponent("v-btn");
   return withDirectives((openBlock(), createBlock(_component_v_btn, mergeProps({
     "data-test": "button",
@@ -2206,7 +2194,7 @@ function _sfc_render$1p(_ctx, _cache, $props, $setup, $data, $options) {
     [vShow, _ctx.instance.isVisible]
   ]);
 }
-const ZdButton = /* @__PURE__ */ _export_sfc(buttonComponent, [["render", _sfc_render$1p]]);
+const ZdButton = /* @__PURE__ */ _export_sfc(buttonComponent, [["render", _sfc_render$1q]]);
 const HeightProps = {
   fillHeight: {
     type: [Boolean, String],
@@ -2344,7 +2332,7 @@ const cardComponent = defineComponent({
   props: ZdCardProps$1,
   inheritAttrs: false,
   setup(props, ctx) {
-    const { instance, root: root2 } = useCreateInstance(props, ctx, Card);
+    const { instance, root: root2 } = useCreateInstance(props, ctx, Card, ZdCardProps$1);
     const { click, focus, blur, mouseenter, mouseleave, mouseout, mouseover } = useGetMethods(instance, root2);
     const getVariant = () => instance.variant || instance.outlined && "outlined" || instance.flat && "flat" || "elevated";
     return {
@@ -2361,7 +2349,7 @@ const cardComponent = defineComponent({
     };
   }
 });
-function _sfc_render$1o(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$1p(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_v_card = resolveComponent("v-card");
   return withDirectives((openBlock(), createBlock(_component_v_card, {
     ref: "root",
@@ -2425,7 +2413,7 @@ function _sfc_render$1o(_ctx, _cache, $props, $setup, $data, $options) {
     [vShow, _ctx.instance.isVisible]
   ]);
 }
-const ZdCard = /* @__PURE__ */ _export_sfc(cardComponent, [["render", _sfc_render$1o]]);
+const ZdCard = /* @__PURE__ */ _export_sfc(cardComponent, [["render", _sfc_render$1p]]);
 /**
  * Vue 3 Carousel 0.17.0
  * (c) 2025
@@ -4045,7 +4033,8 @@ const ZdCarouselProps$1 = buildProps({
       iconName: "next",
       icon: true,
       large: true
-    })
+    }),
+    watch: false
   },
   prevButton: {
     type: Object,
@@ -4055,7 +4044,8 @@ const ZdCarouselProps$1 = buildProps({
       iconName: "prev",
       icon: true,
       large: true
-    })
+    }),
+    watch: false
   }
 });
 const carouselComponent = defineComponent({
@@ -4068,7 +4058,7 @@ const carouselComponent = defineComponent({
     Navigation
   },
   setup(props, ctx) {
-    const { instance, root: root2 } = useCreateInstance(props, ctx, Carousel$1);
+    const { instance, root: root2 } = useCreateInstance(props, ctx, Carousel$1, ZdCarouselProps$1);
     const carouselRef = ref(null);
     const resizeObserver = ref(null);
     const lastEvent = ref(void 0);
@@ -4181,7 +4171,7 @@ const _hoisted_4$5 = {
   key: 2,
   class: "progress-bar"
 };
-function _sfc_render$1n(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$1o(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_slide = resolveComponent("slide");
   const _component_Navigation = resolveComponent("Navigation");
   const _component_Pagination = resolveComponent("Pagination");
@@ -4293,7 +4283,7 @@ function _sfc_render$1n(_ctx, _cache, $props, $setup, $data, $options) {
     }, 16, ["items-to-show", "items-to-scroll", "wrap-around", "autoplay", "pause-autoplay-on-hover", "transition", "mouse-drag", "touch-drag", "wheel-control", "keys-control", "initial-slide", "modelValue"])
   ], 14, _hoisted_1$C)) : createCommentVNode("", true);
 }
-const ZdCarousel = /* @__PURE__ */ _export_sfc(carouselComponent, [["render", _sfc_render$1n]]);
+const ZdCarousel = /* @__PURE__ */ _export_sfc(carouselComponent, [["render", _sfc_render$1o]]);
 const ZdInputProps = buildProps({
   ...ZdComponentRenderProps,
   ...HeightProps,
@@ -4379,7 +4369,8 @@ const ZdInputProps = buildProps({
   },
   validations: {
     type: [Object, String],
-    default: {}
+    default: {},
+    watch: false
   },
   value: {
     default: null
@@ -4394,7 +4385,7 @@ defineComponent({
   props: ZdInputProps,
   inheritAttrs: false,
   setup(props, ctx) {
-    const { instance, root: root2 } = useCreateInputInstance(props, ctx, Input);
+    const { instance, root: root2 } = useCreateInputInstance(props, ctx, Input, ZdInputProps);
     const inputScope = useInput(instance, ctx, root2);
     return {
       ...inputScope,
@@ -4418,7 +4409,6 @@ function useInput(instance, ctx, root2) {
   const input = () => {
     const rootElement = getRootElement(root2);
     emit("update:value", instance.value);
-    emit("input", instance.value);
     instance.input(void 0, rootElement.value);
   };
   const change = () => {
@@ -4443,11 +4433,17 @@ function useInput(instance, ctx, root2) {
     root: root2
   };
 }
-function useCreateInputInstance(props, ctx, ObjectClass) {
+function useCreateInputInstance(props, ctx, ObjectClass, propsDefs) {
   const checkParentType = (parentInstance) => {
     return !!(parentInstance && parentInstance instanceof Form);
   };
-  return useCreateInstance(props, ctx, ObjectClass, checkParentType);
+  return useCreateInstance(
+    props,
+    ctx,
+    ObjectClass,
+    propsDefs,
+    checkParentType
+  );
 }
 const CheckboxMultipleProps$1 = buildProps({
   ...ZdInputProps,
@@ -4465,7 +4461,8 @@ const CheckboxMultipleProps$1 = buildProps({
   },
   datasource: {
     type: Object,
-    default: {}
+    default: {},
+    watch: false
   },
   returnObject: {
     type: [Boolean, String],
@@ -4473,19 +4470,20 @@ const CheckboxMultipleProps$1 = buildProps({
   },
   value: {
     type: [Array, String],
-    default: () => []
+    default: () => [],
+    watch: false
   },
   vertical: {
     type: [Boolean, String],
     default: true
   }
 });
-const _sfc_main$t = defineComponent({
+const _sfc_main$u = defineComponent({
   name: "ZdCheckboxMultiple",
   props: CheckboxMultipleProps$1,
   inheritAttrs: false,
   setup(props, ctx) {
-    const { instance, root: root2 } = useCreateInstance(props, ctx, CheckboxMultiple);
+    const { instance, root: root2 } = useCreateInstance(props, ctx, CheckboxMultiple, CheckboxMultipleProps$1);
     const { click, mouseenter, mouseleave } = useGetMethods(instance, root2);
     const checkboxHorizontalColumns = computed(() => {
       const columns = Number(instance.columns);
@@ -4508,7 +4506,7 @@ const _sfc_main$t = defineComponent({
 });
 const _hoisted_1$B = ["id"];
 const _hoisted_2$j = { class: "zd-checkbox-label" };
-function _sfc_render$1m(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$1n(_ctx, _cache, $props, $setup, $data, $options) {
   var _a;
   const _component_v_checkbox = resolveComponent("v-checkbox");
   return withDirectives((openBlock(), createElementBlock("div", {
@@ -4560,7 +4558,7 @@ function _sfc_render$1m(_ctx, _cache, $props, $setup, $data, $options) {
     [vShow, _ctx.instance.isVisible]
   ]);
 }
-const ZdCheckboxMultiple = /* @__PURE__ */ _export_sfc(_sfc_main$t, [["render", _sfc_render$1m]]);
+const ZdCheckboxMultiple = /* @__PURE__ */ _export_sfc(_sfc_main$u, [["render", _sfc_render$1n]]);
 const ZdToggleableProps = buildProps({
   ...ZdInputProps,
   falseValue: {
@@ -4579,7 +4577,7 @@ const checkboxComponent = defineComponent({
   props: ZdCheckboxProps$1,
   inheritAttrs: false,
   setup(props, ctx) {
-    const { instance, root: root2 } = useCreateInstance(props, ctx, Checkbox);
+    const { instance, root: root2 } = useCreateInstance(props, ctx, Checkbox, ZdCheckboxProps$1);
     const checkboxScope = useCheckbox$1(instance, ctx, root2);
     return {
       ...checkboxScope
@@ -4600,7 +4598,7 @@ function useCheckbox$1(instance, ctx, root2) {
     checkboxChange
   };
 }
-function _sfc_render$1l(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$1m(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_v_checkbox = resolveComponent("v-checkbox");
   return withDirectives((openBlock(), createBlock(_component_v_checkbox, mergeProps({
     ref: "root",
@@ -4640,7 +4638,7 @@ function _sfc_render$1l(_ctx, _cache, $props, $setup, $data, $options) {
     [vShow, _ctx.instance.isVisible]
   ]);
 }
-const ZdCheckbox = /* @__PURE__ */ _export_sfc(checkboxComponent, [["render", _sfc_render$1l]]);
+const ZdCheckbox = /* @__PURE__ */ _export_sfc(checkboxComponent, [["render", _sfc_render$1m]]);
 const ZdButtonProps = buildProps({
   ...ZdComponentRenderProps,
   absolute: {
@@ -4848,7 +4846,7 @@ defineComponent({
   props: ZdButtonProps,
   inheritAttrs: false,
   setup(props, ctx) {
-    const { instance, root: root2 } = useCreateInstance(props, ctx, Button);
+    const { instance, root: root2 } = useCreateInstance(props, ctx, Button, ZdButtonProps);
     const buttonScope = useButtonInstance({ instance, root: root2 });
     return {
       ...buttonScope,
@@ -4913,7 +4911,7 @@ const chipComponent = defineComponent({
   props: ZdChipProps$1,
   inheritAttrs: false,
   setup(props, ctx) {
-    const { instance, root: root2 } = useCreateInstance(props, ctx, Chip);
+    const { instance, root: root2 } = useCreateInstance(props, ctx, Chip, ZdChipProps$1);
     const { blur, focus, click, mouseenter, mouseleave } = useGetMethods(instance, root2);
     const variant = computed(() => {
       if (instance.outlined) return "outlined";
@@ -4944,7 +4942,7 @@ const _hoisted_1$A = {
   key: 1,
   class: "zd-chip__label"
 };
-function _sfc_render$1k(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$1l(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_v_icon = resolveComponent("v-icon");
   const _component_v_chip = resolveComponent("v-chip");
   return openBlock(), createBlock(_component_v_chip, mergeProps({
@@ -5003,7 +5001,7 @@ function _sfc_render$1k(_ctx, _cache, $props, $setup, $data, $options) {
     _: 3
   }, 16, ["id", "class", "ripple", "closable", "name", "rounded", "value", "size", "variant", "border", "elevation", "width"]);
 }
-const ZdChip = /* @__PURE__ */ _export_sfc(chipComponent, [["render", _sfc_render$1k]]);
+const ZdChip = /* @__PURE__ */ _export_sfc(chipComponent, [["render", _sfc_render$1l]]);
 var commonjsGlobal = typeof globalThis !== "undefined" ? globalThis : typeof window !== "undefined" ? window : typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : {};
 function getDefaultExportFromCjs(x) {
   return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, "default") ? x["default"] : x;
@@ -5582,9 +5580,9 @@ var prism = { exports: {} };
        * @example
        * Prism.highlight('var foo = true;', Prism.languages.javascript, 'javascript');
        */
-      highlight: function(text, grammar, language) {
+      highlight: function(text2, grammar, language) {
         var env = {
-          code: text,
+          code: text2,
           grammar,
           language
         };
@@ -5620,7 +5618,7 @@ var prism = { exports: {} };
        *     }
        * });
        */
-      tokenize: function(text, grammar) {
+      tokenize: function(text2, grammar) {
         var rest = grammar.rest;
         if (rest) {
           for (var token in rest) {
@@ -5629,8 +5627,8 @@ var prism = { exports: {} };
           delete grammar.rest;
         }
         var tokenList = new LinkedList();
-        addAfter(tokenList, tokenList.head, text);
-        matchGrammar(text, tokenList, grammar, tokenList.head, 0);
+        addAfter(tokenList, tokenList.head, text2);
+        matchGrammar(text2, tokenList, grammar, tokenList.head, 0);
         return toArray2(tokenList);
       },
       /**
@@ -5719,9 +5717,9 @@ var prism = { exports: {} };
       }
       return "<" + env.tag + ' class="' + env.classes.join(" ") + '"' + attributes + ">" + env.content + "</" + env.tag + ">";
     };
-    function matchPattern(pattern, pos, text, lookbehind) {
+    function matchPattern(pattern, pos, text2, lookbehind) {
       pattern.lastIndex = pos;
-      var match = pattern.exec(text);
+      var match = pattern.exec(text2);
       if (match && lookbehind && match[1]) {
         var lookbehindLength = match[1].length;
         match.index += lookbehindLength;
@@ -5729,7 +5727,7 @@ var prism = { exports: {} };
       }
       return match;
     }
-    function matchGrammar(text, tokenList, grammar, startNode, startPos, rematch) {
+    function matchGrammar(text2, tokenList, grammar, startNode, startPos, rematch) {
       for (var token in grammar) {
         if (!grammar.hasOwnProperty(token) || !grammar[token]) {
           continue;
@@ -5755,7 +5753,7 @@ var prism = { exports: {} };
               break;
             }
             var str = currentNode.value;
-            if (tokenList.length > text.length) {
+            if (tokenList.length > text2.length) {
               return;
             }
             if (str instanceof Token) {
@@ -5764,8 +5762,8 @@ var prism = { exports: {} };
             var removeCount = 1;
             var match;
             if (greedy) {
-              match = matchPattern(pattern, pos, text, lookbehind);
-              if (!match || match.index >= text.length) {
+              match = matchPattern(pattern, pos, text2, lookbehind);
+              if (!match || match.index >= text2.length) {
                 break;
               }
               var from = match.index;
@@ -5786,7 +5784,7 @@ var prism = { exports: {} };
                 p += k.value.length;
               }
               removeCount--;
-              str = text.slice(pos, p);
+              str = text2.slice(pos, p);
               match.index -= pos;
             } else {
               match = matchPattern(pattern, 0, str, lookbehind);
@@ -5818,7 +5816,7 @@ var prism = { exports: {} };
                 cause: token + "," + j,
                 reach
               };
-              matchGrammar(text, tokenList, grammar, currentNode.prev, pos, nestedRematch);
+              matchGrammar(text2, tokenList, grammar, currentNode.prev, pos, nestedRematch);
               if (rematch && nestedRematch.reach > rematch.reach) {
                 rematch.reach = nestedRematch.reach;
               }
@@ -6407,11 +6405,11 @@ var prism = { exports: {} };
         }
         loadFile(
           src,
-          function(text) {
+          function(text2) {
             pre.setAttribute(STATUS_ATTR, STATUS_LOADED);
             var range = parseRange(pre.getAttribute("data-range"));
             if (range) {
-              var lines = text.split(/\r\n?|\n/g);
+              var lines = text2.split(/\r\n?|\n/g);
               var start = range[0];
               var end = range[1] == null ? lines.length : range[1];
               if (start < 0) {
@@ -6422,12 +6420,12 @@ var prism = { exports: {} };
                 end += lines.length;
               }
               end = Math.max(0, Math.min(end, lines.length));
-              text = lines.slice(start, end).join("\n");
+              text2 = lines.slice(start, end).join("\n");
               if (!pre.hasAttribute("data-start")) {
                 pre.setAttribute("data-start", String(start + 1));
               }
             }
-            code.textContent = text;
+            code.textContent = text2;
             Prism2.highlightElement(code);
           },
           function(error) {
@@ -6560,7 +6558,7 @@ const codeViewerComponent = defineComponent({
   props: ZdCodeViewerProps$1,
   inheritAttrs: false,
   setup(props, ctx) {
-    const { instance, root: root2 } = useCreateInstance(props, ctx, CodeViewer);
+    const { instance, root: root2 } = useCreateInstance(props, ctx, CodeViewer, ZdCodeViewerProps$1);
     const { click, focus, blur, mouseenter, mouseleave } = useGetMethods(instance, root2);
     const highlight = (code, language) => Prism$1.highlight(code, Prism$1.languages[props.language], language);
     instance.setViewHighlight(highlight);
@@ -6590,7 +6588,7 @@ const _hoisted_2$i = {
 const _hoisted_3$8 = { class: "zd-code-viewer-code" };
 const _hoisted_4$4 = ["innerHTML"];
 const _hoisted_5$4 = { class: "zd-code-viewer-clipboard-button" };
-function _sfc_render$1j(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$1k(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_v_icon = resolveComponent("v-icon");
   const _component_v_tooltip = resolveComponent("v-tooltip");
   return withDirectives((openBlock(), createElementBlock("div", {
@@ -6659,7 +6657,7 @@ function _sfc_render$1j(_ctx, _cache, $props, $setup, $data, $options) {
     [vShow, _ctx.instance.isVisible]
   ]);
 }
-const ZdCodeViewer = /* @__PURE__ */ _export_sfc(codeViewerComponent, [["render", _sfc_render$1j]]);
+const ZdCodeViewer = /* @__PURE__ */ _export_sfc(codeViewerComponent, [["render", _sfc_render$1k]]);
 const ZdColProps$1 = buildProps({
   ...ZdComponentRenderProps,
   ...HeightProps,
@@ -6685,7 +6683,7 @@ const colComponent = defineComponent({
   props: ZdColProps$1,
   inheritAttrs: false,
   setup(props, ctx) {
-    const { instance, root: root2 } = useCreateInstance(props, ctx, Col);
+    const { instance, root: root2 } = useCreateInstance(props, ctx, Col, ZdColProps$1);
     const { click, focus, blur, mouseenter, mouseleave } = useGetMethods(instance, root2);
     return {
       instance,
@@ -6698,7 +6696,7 @@ const colComponent = defineComponent({
     };
   }
 });
-function _sfc_render$1i(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$1j(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_v_col = resolveComponent("v-col");
   return withDirectives((openBlock(), createBlock(_component_v_col, {
     id: _ctx.instance.name,
@@ -6726,7 +6724,7 @@ function _sfc_render$1i(_ctx, _cache, $props, $setup, $data, $options) {
     [vShow, _ctx.instance.isVisible]
   ]);
 }
-const ZdCol = /* @__PURE__ */ _export_sfc(colComponent, [["render", _sfc_render$1i]]);
+const ZdCol = /* @__PURE__ */ _export_sfc(colComponent, [["render", _sfc_render$1j]]);
 const ZdCardProps = buildProps({
   ...ZdComponentRenderProps,
   ...HeightProps,
@@ -6834,7 +6832,7 @@ defineComponent({
   props: ZdCardProps,
   inheritAttrs: false,
   setup(props, ctx) {
-    const { instance, root: root2 } = useCreateInstance(props, ctx, Card);
+    const { instance, root: root2 } = useCreateInstance(props, ctx, Card, ZdCardProps);
     const { click, focus, blur, mouseenter, mouseleave, mouseout, mouseover } = useGetMethods(instance, root2);
     const getVariant = () => instance.variant || instance.outlined && "outlined" || instance.flat && "flat" || "elevated";
     return {
@@ -6859,7 +6857,8 @@ const ZdCollapseCardProps$1 = {
   },
   expandButton: {
     type: [Object, String],
-    default: () => void 0
+    default: () => void 0,
+    watch: false
   },
   expanded: {
     type: [Boolean, String],
@@ -6867,7 +6866,8 @@ const ZdCollapseCardProps$1 = {
   },
   header: {
     type: [Array, String],
-    default: () => []
+    default: () => [],
+    watch: false
   },
   hideAction: {
     type: [Boolean, String],
@@ -6896,7 +6896,7 @@ const collapseCardComponent = defineComponent({
   inheritAttrs: false,
   setup(props, ctx) {
     var _a;
-    const { instance, root: root2 } = useCreateInstance(props, ctx, CollapseCard);
+    const { instance, root: root2 } = useCreateInstance(props, ctx, CollapseCard, ZdCollapseCardProps$1);
     const { click, mouseenter, mouseleave } = useGetMethods(instance, root2);
     const background = computed(() => ({
       background: `url(${instance.img}) center center / cover no-repeat`
@@ -6932,7 +6932,7 @@ const collapseCardComponent = defineComponent({
     };
   }
 });
-function _sfc_render$1h(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$1i(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_v_icon = resolveComponent("v-icon");
   const _component_v_expansion_panel_title = resolveComponent("v-expansion-panel-title");
   const _component_v_expansion_panel_text = resolveComponent("v-expansion-panel-text");
@@ -7033,7 +7033,7 @@ function _sfc_render$1h(_ctx, _cache, $props, $setup, $data, $options) {
     _: 3
   }, 8, ["id", "class", "dark", "light", "style", "model-value", "color"]);
 }
-const ZdCollapseCard = /* @__PURE__ */ _export_sfc(collapseCardComponent, [["render", _sfc_render$1h]]);
+const ZdCollapseCard = /* @__PURE__ */ _export_sfc(collapseCardComponent, [["render", _sfc_render$1i]]);
 const ZdContainerProps$1 = buildProps({
   ...ZdComponentRenderProps,
   ...HeightProps,
@@ -7055,7 +7055,7 @@ const containerComponent = defineComponent({
   props: ZdContainerProps$1,
   inheritAttrs: false,
   setup(props, ctx) {
-    const { instance, root: root2 } = useCreateInstance(props, ctx, Container);
+    const { instance, root: root2 } = useCreateInstance(props, ctx, Container, ZdContainerProps$1);
     const { click, focus, blur, mouseenter, mouseleave } = useGetMethods(instance, root2);
     return {
       instance,
@@ -7068,7 +7068,7 @@ const containerComponent = defineComponent({
     };
   }
 });
-function _sfc_render$1g(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$1h(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_v_container = resolveComponent("v-container");
   return withDirectives((openBlock(), createBlock(_component_v_container, {
     id: _ctx.instance.name,
@@ -7104,7 +7104,7 @@ function _sfc_render$1g(_ctx, _cache, $props, $setup, $data, $options) {
     [vShow, _ctx.instance.isVisible]
   ]);
 }
-const ZdContainer = /* @__PURE__ */ _export_sfc(containerComponent, [["render", _sfc_render$1g]]);
+const ZdContainer = /* @__PURE__ */ _export_sfc(containerComponent, [["render", _sfc_render$1h]]);
 function useMaska(instance, options) {
   const currentMask = ref("");
   const getCurrentMask = (value) => {
@@ -7185,7 +7185,7 @@ defineComponent({
   props: ZdTextInputProps$1,
   inheritAttrs: false,
   setup(props, ctx) {
-    const { instance, root: root2 } = useCreateInstance(props, ctx, TextInput);
+    const { instance, root: root2 } = useCreateInstance(props, ctx, TextInput, ZdTextInputProps$1);
     const textInputScope = useTextInput$1(instance, ctx, root2);
     const { maskOptions } = useMaska(instance, { disable: props.disableMaska });
     return {
@@ -7312,7 +7312,7 @@ defineComponent({
   props: ZdNumberInputProps$1,
   inheritAttrs: false,
   setup(props, ctx) {
-    const { instance, root: root2 } = useCreateInstance(props, ctx, NumberInput);
+    const { instance, root: root2 } = useCreateInstance(props, ctx, NumberInput, ZdNumberInputProps$1);
     const autoNumericInit = ref(false);
     onMounted(() => {
       var _a;
@@ -7380,14 +7380,14 @@ const ZdCurrencyProps$1 = buildProps({
 const currencyComponent = defineComponent({
   props: ZdCurrencyProps$1,
   setup(props, ctx) {
-    const { instance, root: root2 } = useCreateInstance(props, ctx, Currency);
+    const { instance, root: root2 } = useCreateInstance(props, ctx, Currency, ZdCurrencyProps$1);
     return {
       instance,
       root: root2
     };
   }
 });
-function _sfc_render$1f(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$1g(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_zd_number_input = resolveComponent("zd-number-input");
   return openBlock(), createBlock(_component_zd_number_input, {
     id: _ctx.instance.name,
@@ -7396,7 +7396,7 @@ function _sfc_render$1f(_ctx, _cache, $props, $setup, $data, $options) {
     "instance-object": _ctx.instance
   }, null, 8, ["id", "instance-object"]);
 }
-const ZdCurrency = /* @__PURE__ */ _export_sfc(currencyComponent, [["render", _sfc_render$1f]]);
+const ZdCurrency = /* @__PURE__ */ _export_sfc(currencyComponent, [["render", _sfc_render$1g]]);
 function useIsMobile() {
   const isMobile = computed(() => {
     return Utils.isMobile();
@@ -7621,7 +7621,7 @@ const dateInputComponent = defineComponent({
   props: ZdDateInputProps$1,
   inheritAttrs: false,
   setup(props, ctx) {
-    const { instance, root: root2 } = useCreateInputInstance(props, ctx, DateInput);
+    const { instance, root: root2 } = useCreateInputInstance(props, ctx, DateInput, ZdDateInputProps$1);
     const textInputScope = useTextInput$1(instance, ctx, root2);
     const picker = ref(null);
     const { isMobile } = useIsMobile();
@@ -7694,7 +7694,7 @@ const dateInputComponent = defineComponent({
     };
   }
 });
-function _sfc_render$1e(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$1f(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_zd_activator_wrapper = resolveComponent("zd-activator-wrapper");
   const _component_zd_button = resolveComponent("zd-button");
   const _component_v_date_picker = resolveComponent("v-date-picker");
@@ -7822,7 +7822,7 @@ function _sfc_render$1e(_ctx, _cache, $props, $setup, $data, $options) {
     _: 1
   }, 8, ["name", "grid"]);
 }
-const ZdDateInput = /* @__PURE__ */ _export_sfc(dateInputComponent, [["render", _sfc_render$1e]]);
+const ZdDateInput = /* @__PURE__ */ _export_sfc(dateInputComponent, [["render", _sfc_render$1f]]);
 const ZdDateRangeProps$1 = {
   ...ZdTextInputProps$1,
   allowedDates: {
@@ -7928,12 +7928,12 @@ const ZdDateRangeProps$1 = {
     default: "none"
   }
 };
-const _sfc_main$s = defineComponent({
+const _sfc_main$t = defineComponent({
   name: "ZdDateRange",
   props: ZdDateRangeProps$1,
   inheritAttrs: false,
   setup(props, ctx) {
-    const { instance, root: root2 } = useCreateInputInstance(props, ctx, DateRange);
+    const { instance, root: root2 } = useCreateInputInstance(props, ctx, DateRange, ZdDateRangeProps$1);
     const picker = ref(null);
     const { isMobile } = useIsMobile();
     const { pickerValue } = usePickerValue(instance);
@@ -7991,7 +7991,7 @@ const _sfc_main$s = defineComponent({
     };
   }
 });
-function _sfc_render$1d(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$1e(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_zd_activator_wrapper = resolveComponent("zd-activator-wrapper");
   const _component_zd_button = resolveComponent("zd-button");
   const _component_v_date_picker = resolveComponent("v-date-picker");
@@ -8110,7 +8110,7 @@ function _sfc_render$1d(_ctx, _cache, $props, $setup, $data, $options) {
     _: 1
   }, 8, ["name"]);
 }
-const ZdDateRange = /* @__PURE__ */ _export_sfc(_sfc_main$s, [["render", _sfc_render$1d]]);
+const ZdDateRange = /* @__PURE__ */ _export_sfc(_sfc_main$t, [["render", _sfc_render$1e]]);
 const ZdDialogProps$1 = buildProps({
   ...ZdComponentRenderProps
 });
@@ -8137,7 +8137,7 @@ const dialogComponent = defineComponent({
     };
   }
 });
-function _sfc_render$1c(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$1d(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_v_icon = resolveComponent("v-icon");
   const _component_v_spacer = resolveComponent("v-spacer");
   const _component_v_card_title = resolveComponent("v-card-title");
@@ -8213,7 +8213,7 @@ function _sfc_render$1c(_ctx, _cache, $props, $setup, $data, $options) {
     _: 1
   }, 8, ["id", "modelValue", "max-width", "persistent", "theme"]);
 }
-const ZdDialog = /* @__PURE__ */ _export_sfc(dialogComponent, [["render", _sfc_render$1c]]);
+const ZdDialog = /* @__PURE__ */ _export_sfc(dialogComponent, [["render", _sfc_render$1d]]);
 const ZdDividerProps$1 = buildProps({
   ...ZdComponentRenderProps,
   inset: {
@@ -8229,14 +8229,14 @@ const dividerComponent = defineComponent({
   props: ZdDividerProps$1,
   inheritAttrs: false,
   setup(props, ctx) {
-    const { instance, root: root2 } = useCreateInstance(props, ctx, Divider);
+    const { instance, root: root2 } = useCreateInstance(props, ctx, Divider, ZdDividerProps$1);
     return {
       instance,
       root: root2
     };
   }
 });
-function _sfc_render$1b(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$1c(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_v_divider = resolveComponent("v-divider");
   return withDirectives((openBlock(), createBlock(_component_v_divider, {
     id: _ctx.instance.name,
@@ -8251,7 +8251,7 @@ function _sfc_render$1b(_ctx, _cache, $props, $setup, $data, $options) {
     [vShow, _ctx.instance.isVisible]
   ]);
 }
-const ZdDivider = /* @__PURE__ */ _export_sfc(dividerComponent, [["render", _sfc_render$1b]]);
+const ZdDivider = /* @__PURE__ */ _export_sfc(dividerComponent, [["render", _sfc_render$1c]]);
 const ZdDropdownProps$1 = buildProps({
   ...ZdComponentRenderProps,
   absolute: {
@@ -8259,7 +8259,8 @@ const ZdDropdownProps$1 = buildProps({
     default: false
   },
   activator: {
-    type: [Object, String]
+    type: [Object, String],
+    watch: false
   },
   closeOnContentClick: {
     type: [Boolean, String],
@@ -8324,7 +8325,7 @@ const dropdown = defineComponent({
     ZdActivatorWrapper
   },
   setup(props, ctx) {
-    const { instance, root: root2 } = useCreateInstance(props, ctx, Dropdown);
+    const { instance, root: root2 } = useCreateInstance(props, ctx, Dropdown, ZdDropdownProps$1);
     const cssVars = computed(() => {
       return {
         "--cursor": instance.cursor
@@ -8338,7 +8339,7 @@ const dropdown = defineComponent({
     };
   }
 });
-function _sfc_render$1a(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$1b(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_zd_activator_wrapper = resolveComponent("zd-activator-wrapper");
   const _component_v_list_item = resolveComponent("v-list-item");
   const _component_v_list = resolveComponent("v-list");
@@ -8414,7 +8415,7 @@ function _sfc_render$1a(_ctx, _cache, $props, $setup, $data, $options) {
     _: 3
   }, 8, ["id", "name", "closeOnContentClick", "disabled", "max-height", "max-width", "min-height", "min-width", "openOnClick", "openOnHover", "location", "target", "persistent", "modelValue"]);
 }
-const ZdDropdown = /* @__PURE__ */ _export_sfc(dropdown, [["render", _sfc_render$1a]]);
+const ZdDropdown = /* @__PURE__ */ _export_sfc(dropdown, [["render", _sfc_render$1b]]);
 const ZdFooterProps$1 = buildProps({
   ...ZdComponentRenderProps,
   ...HeightProps,
@@ -8460,7 +8461,7 @@ const FooterComponent = defineComponent({
   props: ZdFooterProps$1,
   inheritAttrs: false,
   setup(props, ctx) {
-    const { instance, root: root2 } = useCreateInstance(props, ctx, Footer);
+    const { instance, root: root2 } = useCreateInstance(props, ctx, Footer, ZdFooterProps$1);
     const { click, mouseenter, mouseleave, mouseout, mouseover } = useGetMethods(instance, root2);
     return {
       instance,
@@ -8486,7 +8487,7 @@ const _hoisted_3$7 = {
   key: 2,
   class: "zd-footer-slot-right"
 };
-function _sfc_render$19(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$1a(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_v_col = resolveComponent("v-col");
   const _component_v_footer = resolveComponent("v-footer");
   return withDirectives((openBlock(), createBlock(_component_v_footer, {
@@ -8573,7 +8574,7 @@ function _sfc_render$19(_ctx, _cache, $props, $setup, $data, $options) {
     [vShow, _ctx.instance.isVisible]
   ]);
 }
-const ZdFooter = /* @__PURE__ */ _export_sfc(FooterComponent, [["render", _sfc_render$19]]);
+const ZdFooter = /* @__PURE__ */ _export_sfc(FooterComponent, [["render", _sfc_render$1a]]);
 const ZdFormProps$1 = buildProps({
   ...ZdComponentRenderProps,
   ...HeightProps,
@@ -8594,14 +8595,15 @@ const ZdFormProps$1 = buildProps({
     type: Object,
     default() {
       return {};
-    }
+    },
+    watch: false
   }
 });
 const formComponent = defineComponent({
   props: ZdFormProps$1,
   inheritAttrs: false,
   setup(props, ctx) {
-    const { instance, root: root2 } = useCreateInstance(props, ctx, Form);
+    const { instance, root: root2 } = useCreateInstance(props, ctx, Form, ZdFormProps$1);
     const { click, focus, blur, mouseenter, mouseleave } = useGetMethods(instance, root2);
     const submit = (event) => {
       const form = root2.value;
@@ -8650,7 +8652,7 @@ const formComponent = defineComponent({
     };
   }
 });
-function _sfc_render$18(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$19(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_v_col = resolveComponent("v-col");
   const _component_v_row = resolveComponent("v-row");
   const _component_v_form = resolveComponent("v-form");
@@ -8713,7 +8715,7 @@ function _sfc_render$18(_ctx, _cache, $props, $setup, $data, $options) {
     [vShow, _ctx.instance.isVisible]
   ]);
 }
-const ZdForm = /* @__PURE__ */ _export_sfc(formComponent, [["render", _sfc_render$18]]);
+const ZdForm = /* @__PURE__ */ _export_sfc(formComponent, [["render", _sfc_render$19]]);
 const ZdFrameProps$1 = buildProps({
   ...ZdComponentProps,
   path: {
@@ -8735,11 +8737,13 @@ const ZdFrameProps$1 = buildProps({
   },
   override: {
     type: Object,
-    default: () => ({})
+    default: () => ({}),
+    watch: false
   },
   overrideNamedProps: {
     type: Object,
-    default: () => ({})
+    default: () => ({}),
+    watch: false
   },
   cache: {
     type: [Boolean, String],
@@ -8783,7 +8787,7 @@ defineComponent({
   props: ZdFrameProps$1,
   inheritAttrs: false,
   setup(props, ctx) {
-    const { instance, root: root2 } = useCreateInstance(props, ctx, Frame);
+    const { instance, root: root2 } = useCreateInstance(props, ctx, Frame, ZdFrameProps$1);
     return { instance, root: root2 };
   }
 });
@@ -8798,21 +8802,21 @@ const framePageComponent = defineComponent({
   props: ZdFramePageProps$1,
   inheritAttrs: false,
   setup(props, ctx) {
-    const { instance, root: root2 } = useCreateInstance(props, ctx, FramePage);
+    const { instance, root: root2 } = useCreateInstance(props, ctx, FramePage, ZdFramePageProps$1);
     return { instance, root: root2 };
   }
 });
-function _sfc_render$17(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$18(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_zd_frame = resolveComponent("zd-frame");
   return openBlock(), createBlock(_component_zd_frame, {
     id: `${_ctx.instance.name}_frame_page`,
     name: `${_ctx.instance.name}_frame_page`,
     path: _ctx.instance.path,
     "instance-object": _ctx.instance,
-    class: "zd-frame-page"
-  }, null, 8, ["id", "name", "path", "instance-object"]);
+    cssClass: `zd-frame-page ${_ctx.instance.cssClass || ""}`
+  }, null, 8, ["id", "name", "path", "instance-object", "cssClass"]);
 }
-const ZdFramePage = /* @__PURE__ */ _export_sfc(framePageComponent, [["render", _sfc_render$17]]);
+const ZdFramePage = /* @__PURE__ */ _export_sfc(framePageComponent, [["render", _sfc_render$18]]);
 const ZdFrameProps = buildProps({
   ...ZdComponentProps,
   path: {
@@ -8834,11 +8838,13 @@ const ZdFrameProps = buildProps({
   },
   override: {
     type: Object,
-    default: () => ({})
+    default: () => ({}),
+    watch: false
   },
   overrideNamedProps: {
     type: Object,
-    default: () => ({})
+    default: () => ({}),
+    watch: false
   },
   cache: {
     type: [Boolean, String],
@@ -8882,12 +8888,12 @@ const frameComponent = defineComponent({
   props: ZdFrameProps,
   inheritAttrs: false,
   setup(props, ctx) {
-    const { instance, root: root2 } = useCreateInstance(props, ctx, Frame);
+    const { instance, root: root2 } = useCreateInstance(props, ctx, Frame, ZdFrameProps);
     return { instance, root: root2 };
   }
 });
 const _hoisted_1$x = ["id"];
-function _sfc_render$16(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$17(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_v_progress_circular = resolveComponent("v-progress-circular");
   return withDirectives((openBlock(), createElementBlock("div", {
     id: _ctx.instance.name,
@@ -8913,7 +8919,7 @@ function _sfc_render$16(_ctx, _cache, $props, $setup, $data, $options) {
     [vShow, _ctx.instance.isVisible]
   ]);
 }
-const ZdFrame = /* @__PURE__ */ _export_sfc(frameComponent, [["render", _sfc_render$16]]);
+const ZdFrame = /* @__PURE__ */ _export_sfc(frameComponent, [["render", _sfc_render$17]]);
 function useCellSelection({
   instance
 }) {
@@ -8945,109 +8951,90 @@ function useCellSelection({
   };
 }
 /**!
- * Sortable 1.15.6
+ * Sortable 1.15.7
  * @author	RubaXa   <trash@rubaxa.org>
  * @author	owenm    <owen23355@gmail.com>
  * @license MIT
  */
-function ownKeys(object, enumerableOnly) {
-  var keys = Object.keys(object);
-  if (Object.getOwnPropertySymbols) {
-    var symbols = Object.getOwnPropertySymbols(object);
-    if (enumerableOnly) {
-      symbols = symbols.filter(function(sym) {
-        return Object.getOwnPropertyDescriptor(object, sym).enumerable;
-      });
-    }
-    keys.push.apply(keys, symbols);
-  }
-  return keys;
+function _defineProperty(e, r, t) {
+  return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
+    value: t,
+    enumerable: true,
+    configurable: true,
+    writable: true
+  }) : e[r] = t, e;
 }
-function _objectSpread2(target) {
-  for (var i = 1; i < arguments.length; i++) {
-    var source = arguments[i] != null ? arguments[i] : {};
-    if (i % 2) {
-      ownKeys(Object(source), true).forEach(function(key) {
-        _defineProperty(target, key, source[key]);
-      });
-    } else if (Object.getOwnPropertyDescriptors) {
-      Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
-    } else {
-      ownKeys(Object(source)).forEach(function(key) {
-        Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
-      });
+function _extends() {
+  return _extends = Object.assign ? Object.assign.bind() : function(n) {
+    for (var e = 1; e < arguments.length; e++) {
+      var t = arguments[e];
+      for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
     }
-  }
-  return target;
+    return n;
+  }, _extends.apply(null, arguments);
 }
-function _typeof(obj) {
-  "@babel/helpers - typeof";
-  if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
-    _typeof = function(obj2) {
-      return typeof obj2;
-    };
-  } else {
-    _typeof = function(obj2) {
-      return obj2 && typeof Symbol === "function" && obj2.constructor === Symbol && obj2 !== Symbol.prototype ? "symbol" : typeof obj2;
-    };
+function ownKeys(e, r) {
+  var t = Object.keys(e);
+  if (Object.getOwnPropertySymbols) {
+    var o = Object.getOwnPropertySymbols(e);
+    r && (o = o.filter(function(r2) {
+      return Object.getOwnPropertyDescriptor(e, r2).enumerable;
+    })), t.push.apply(t, o);
   }
-  return _typeof(obj);
+  return t;
 }
-function _defineProperty(obj, key, value) {
-  if (key in obj) {
-    Object.defineProperty(obj, key, {
-      value,
-      enumerable: true,
-      configurable: true,
-      writable: true
+function _objectSpread2(e) {
+  for (var r = 1; r < arguments.length; r++) {
+    var t = null != arguments[r] ? arguments[r] : {};
+    r % 2 ? ownKeys(Object(t), true).forEach(function(r2) {
+      _defineProperty(e, r2, t[r2]);
+    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function(r2) {
+      Object.defineProperty(e, r2, Object.getOwnPropertyDescriptor(t, r2));
     });
-  } else {
-    obj[key] = value;
-  }
-  return obj;
-}
-function _extends() {
-  _extends = Object.assign || function(target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-    return target;
-  };
-  return _extends.apply(this, arguments);
-}
-function _objectWithoutPropertiesLoose(source, excluded) {
-  if (source == null) return {};
-  var target = {};
-  var sourceKeys = Object.keys(source);
-  var key, i;
-  for (i = 0; i < sourceKeys.length; i++) {
-    key = sourceKeys[i];
-    if (excluded.indexOf(key) >= 0) continue;
-    target[key] = source[key];
   }
-  return target;
+  return e;
 }
-function _objectWithoutProperties(source, excluded) {
-  if (source == null) return {};
-  var target = _objectWithoutPropertiesLoose(source, excluded);
-  var key, i;
+function _objectWithoutProperties(e, t) {
+  if (null == e) return {};
+  var o, r, i = _objectWithoutPropertiesLoose(e, t);
   if (Object.getOwnPropertySymbols) {
-    var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
-    for (i = 0; i < sourceSymbolKeys.length; i++) {
-      key = sourceSymbolKeys[i];
-      if (excluded.indexOf(key) >= 0) continue;
-      if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
-      target[key] = source[key];
-    }
+    var n = Object.getOwnPropertySymbols(e);
+    for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]);
   }
-  return target;
+  return i;
+}
+function _objectWithoutPropertiesLoose(r, e) {
+  if (null == r) return {};
+  var t = {};
+  for (var n in r) if ({}.hasOwnProperty.call(r, n)) {
+    if (-1 !== e.indexOf(n)) continue;
+    t[n] = r[n];
+  }
+  return t;
+}
+function _toPrimitive(t, r) {
+  if ("object" != typeof t || !t) return t;
+  var e = t[Symbol.toPrimitive];
+  if (void 0 !== e) {
+    var i = e.call(t, r);
+    if ("object" != typeof i) return i;
+    throw new TypeError("@@toPrimitive must return a primitive value.");
+  }
+  return ("string" === r ? String : Number)(t);
 }
-var version = "1.15.6";
+function _toPropertyKey(t) {
+  var i = _toPrimitive(t, "string");
+  return "symbol" == typeof i ? i : i + "";
+}
+function _typeof(o) {
+  "@babel/helpers - typeof";
+  return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(o2) {
+    return typeof o2;
+  } : function(o2) {
+    return o2 && "function" == typeof Symbol && o2.constructor === Symbol && o2 !== Symbol.prototype ? "symbol" : typeof o2;
+  }, _typeof(o);
+}
+var version = "1.15.7";
 function userAgent(pattern) {
   if (typeof window !== "undefined" && window.navigator) {
     return !!/* @__PURE__ */ navigator.userAgent.match(pattern);
@@ -9088,7 +9075,7 @@ function matches(el, selector) {
   return false;
 }
 function getParentOrHost(el) {
-  return el.host && el !== document && el.host.nodeType ? el.host : el.parentNode;
+  return el.host && el !== document && el.host.nodeType && el.host !== el ? el.host : el.parentNode;
 }
 function closest(el, selector, ctx, includeCTX) {
   if (el) {
@@ -10573,8 +10560,11 @@ Sortable.prototype = /** @lends Sortable.prototype */
   _nulling: function _nulling() {
     pluginEvent2("nulling", this);
     rootEl = dragEl = parentEl = ghostEl = nextEl = cloneEl = lastDownEl = cloneHidden = tapEvt = touchEvt = moved = newIndex = newDraggableIndex = oldIndex = oldDraggableIndex = lastTarget = lastDirection = putSortable = activeGroup = Sortable.dragged = Sortable.ghost = Sortable.clone = Sortable.active = null;
-    savedInputChecked.forEach(function(el) {
-      el.checked = true;
+    var el = this.el;
+    savedInputChecked.forEach(function(checkEl) {
+      if (el.contains(checkEl)) {
+        checkEl.checked = true;
+      }
     });
     savedInputChecked.length = lastDx = lastDy = 0;
   },
@@ -11123,11 +11113,12 @@ function useColumnDrag({
   const checkMove = (event) => {
     return event.related.classList.contains("sort-handle");
   };
+  let sortableInstance = null;
   const initDragColumns = () => {
     var _a;
     const tr = (_a = rootEl2.value) == null ? void 0 : _a.querySelector("thead tr");
     if (tr) {
-      Sortable.create(tr, {
+      sortableInstance = Sortable.create(tr, {
         onEnd: sortColumns,
         onMove: checkMove,
         handle: ".sort-handle",
@@ -11136,16 +11127,7 @@ function useColumnDrag({
     }
   };
   const destroyDragColumns = () => {
-    var _a;
-    const tr = (_a = rootEl2.value) == null ? void 0 : _a.querySelector("thead tr");
-    if (tr) {
-      Sortable.create(tr, {
-        onEnd: sortColumns,
-        onMove: checkMove,
-        handle: ".sort-handle",
-        scroll: false
-      }).destroy();
-    }
+    sortableInstance == null ? void 0 : sortableInstance.destroy();
   };
   const sortColumns = (event) => {
     var _a, _b;
@@ -11184,6 +11166,9 @@ function useColumnDrag({
   const getColumnsDOMOrder = () => {
     return orderHeaders(instance.columns);
   };
+  onUnmounted(() => {
+    destroyDragColumns();
+  });
   return {};
 }
 function useColumnResize({
@@ -11625,7 +11610,8 @@ function useHasSlot() {
 }
 function useTableNavigation({
   instance,
-  rootEl: rootEl2
+  rootEl: rootEl2,
+  isNavigableRow
 }) {
   const navigate = (direction, event) => {
     if (direction === "up" || direction === "down") {
@@ -11699,7 +11685,9 @@ function useTableNavigation({
     return getArrayFromElementTag("TD", node);
   };
   const getArrayFromTrElement = (node) => {
-    return getArrayFromElementTag("TR", node).filter(isElementVisible);
+    return getArrayFromElementTag("TR", node).filter(
+      (element) => isElementVisible(element) && ((isNavigableRow == null ? void 0 : isNavigableRow(element)) ?? true)
+    );
   };
   const findNextTd = (direction, trIndex, tdIndex, trCollection) => {
     const up = direction === "up";
@@ -11839,8 +11827,8 @@ class RowNotFoundError extends ZeedhiError {
 }
 class NotProvidedError extends ZeedhiError {
   constructor(provides) {
-    const text = Array.isArray(provides) ? provides.join(", ") : provides;
-    super(`component requires ${text} to be provided`);
+    const text2 = Array.isArray(provides) ? provides.join(", ") : provides;
+    super(`component requires ${text2} to be provided`);
     this.name = "NotProvidedError";
   }
 }
@@ -11850,13 +11838,15 @@ const ZdIterableProps = buildProps({
     type: Array,
     default() {
       return [];
-    }
+    },
+    watch: false
   },
   datasource: {
     type: Object,
     defaut() {
       return {};
-    }
+    },
+    watch: false
   },
   pageSizes: {
     type: [String, Array],
@@ -11901,7 +11891,8 @@ const ZdGridProps$1 = buildProps({
   },
   disableSelection: {
     type: [String, Function],
-    default: void 0
+    default: void 0,
+    watch: false
   },
   dragColumns: {
     type: [Boolean, String],
@@ -11909,7 +11900,8 @@ const ZdGridProps$1 = buildProps({
   },
   errorSlot: {
     type: Array,
-    default: () => []
+    default: () => [],
+    watch: false
   },
   fillHeight: {
     type: [Boolean, String],
@@ -11937,7 +11929,8 @@ const ZdGridProps$1 = buildProps({
           }
         ]
       }
-    ]
+    ],
+    watch: false
   },
   headerBackground: {
     type: String
@@ -11979,7 +11972,8 @@ const ZdGridProps$1 = buildProps({
         cssClass: "no-data",
         text: "NO_DATA"
       }
-    ]
+    ],
+    watch: false
   },
   noDataText: {
     type: String,
@@ -11994,7 +11988,8 @@ const ZdGridProps$1 = buildProps({
         cssClass: "no-result",
         text: "NO_RESULT"
       }
-    ]
+    ],
+    watch: false
   },
   noResultsText: {
     type: String,
@@ -12037,7 +12032,8 @@ const ZdGridProps$1 = buildProps({
         component: "ZdSearch",
         cssClass: "zd-grid-search"
       }
-    ]
+    ],
+    watch: false
   },
   width: {
     type: [Number, String],
@@ -12052,7 +12048,7 @@ defineComponent({
   props: ZdGridProps$1,
   inheritAttrs: false,
   setup(props, ctx) {
-    const { instance, root: root2 } = useCreateInstance(props, ctx, Grid);
+    const { instance, root: root2 } = useCreateInstance(props, ctx, Grid, ZdGridProps$1);
     const gridScope = useGridInstance$1({ instance, root: root2 });
     const cellClick = ({ row, column, event }) => {
       instance.cellClick(row, column, event, gridScope.rootEl.value);
@@ -12072,13 +12068,14 @@ defineComponent({
 function useGridInstance$1({
   instance,
   root: root2,
-  renderedData
+  renderedData,
+  isNavigableRow
 }) {
   var _a, _b;
   useWatchUrl(instance);
   const rootEl2 = getRootElement(root2);
   useColumnDrag({ instance, rootEl: rootEl2 });
-  useTableNavigation({ instance, rootEl: rootEl2 });
+  useTableNavigation({ instance, rootEl: rootEl2, isNavigableRow });
   const { updateFixedColumns, fixedLeft, fixedRight } = useFixedColumns({ instance, rootEl: rootEl2 });
   const { resizeMouseDownHandler, resizeClickHandler, calcWidth } = useColumnResize({
     instance,
@@ -12187,10 +12184,11 @@ const ZdGridEditableProps$1 = buildProps({
 function useGridEditableInstance$1({
   instance,
   root: root2,
-  renderedData
+  renderedData,
+  isNavigableRow
 }) {
   const rootEl2 = getRootElement(root2);
-  const gridScope = useGridInstance$1({ instance, root: root2, renderedData });
+  const gridScope = useGridInstance$1({ instance, root: root2, renderedData, isNavigableRow });
   const { doubleClick } = useDoubleClick();
   const editingCell = ref(null);
   const isEditing = ({ row, column }) => {
@@ -12321,7 +12319,12 @@ const gridEditableComponent = defineComponent({
   props: ZdGridEditableProps$1,
   inheritAttrs: false,
   setup(props, ctx) {
-    const { instance, root: root2 } = useCreateInstance(props, ctx, GridEditable);
+    const { instance, root: root2 } = useCreateInstance(
+      props,
+      ctx,
+      GridEditable,
+      ZdGridEditableProps$1
+    );
     const gridEditableScope = useGridEditableInstance$1({ instance, root: root2 });
     return {
       ...gridEditableScope,
@@ -12332,7 +12335,7 @@ const gridEditableComponent = defineComponent({
 });
 const _hoisted_1$w = ["colspan"];
 const _hoisted_2$g = ["colspan"];
-function _sfc_render$15(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$16(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_zd_grid_toolbar = resolveComponent("zd-grid-toolbar");
   const _component_zd_grid_header_row = resolveComponent("zd-grid-header-row");
   const _component_zd_grid_editable_row = resolveComponent("zd-grid-editable-row");
@@ -12492,8 +12495,8 @@ function _sfc_render$15(_ctx, _cache, $props, $setup, $data, $options) {
     [vShow, _ctx.instance.isVisible]
   ]);
 }
-const ZdGridEditable = /* @__PURE__ */ _export_sfc(gridEditableComponent, [["render", _sfc_render$15]]);
-const _sfc_main$r = defineComponent({
+const ZdGridEditable = /* @__PURE__ */ _export_sfc(gridEditableComponent, [["render", _sfc_render$16]]);
+const _sfc_main$s = defineComponent({
   props: {
     row: {
       type: Object,
@@ -12644,7 +12647,7 @@ const _hoisted_4$3 = {
   class: "zd-grid__cell-inline-edit"
 };
 const _hoisted_5$3 = { key: 3 };
-function _sfc_render$14(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$15(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_v_skeleton_loader = resolveComponent("v-skeleton-loader");
   const _component_v_icon = resolveComponent("v-icon");
   const _component_zd_grid_cell_content = resolveComponent("zd-grid-cell-content");
@@ -12734,8 +12737,8 @@ function _sfc_render$14(_ctx, _cache, $props, $setup, $data, $options) {
     }, null, 8, ["actions"]))
   ], 46, _hoisted_1$v);
 }
-const ZdGridEditableCell = /* @__PURE__ */ _export_sfc(_sfc_main$r, [["render", _sfc_render$14]]);
-const _sfc_main$q = defineComponent({
+const ZdGridEditableCell = /* @__PURE__ */ _export_sfc(_sfc_main$s, [["render", _sfc_render$15]]);
+const _sfc_main$r = defineComponent({
   props: {
     isSelected: {
       type: Boolean,
@@ -12832,7 +12835,7 @@ const _sfc_main$q = defineComponent({
     };
   }
 });
-function _sfc_render$13(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$14(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_zd_grid_checkbox = resolveComponent("zd-grid-checkbox");
   const _component_zd_grid_editable_cell = resolveComponent("zd-grid-editable-cell");
   const _component_table_row = resolveComponent("table-row");
@@ -12878,7 +12881,7 @@ function _sfc_render$13(_ctx, _cache, $props, $setup, $data, $options) {
     _: 3
   }, 8, ["isSelected", "isCurrentRow"]);
 }
-const ZdGridEditableRow = /* @__PURE__ */ _export_sfc(_sfc_main$q, [["render", _sfc_render$13]]);
+const ZdGridEditableRow = /* @__PURE__ */ _export_sfc(_sfc_main$r, [["render", _sfc_render$14]]);
 const ZdGridProps = buildProps({
   ...ZdIterableProps,
   cellSelection: {
@@ -12891,7 +12894,8 @@ const ZdGridProps = buildProps({
   },
   disableSelection: {
     type: [String, Function],
-    default: void 0
+    default: void 0,
+    watch: false
   },
   dragColumns: {
     type: [Boolean, String],
@@ -12899,7 +12903,8 @@ const ZdGridProps = buildProps({
   },
   errorSlot: {
     type: Array,
-    default: () => []
+    default: () => [],
+    watch: false
   },
   fillHeight: {
     type: [Boolean, String],
@@ -12927,7 +12932,8 @@ const ZdGridProps = buildProps({
           }
         ]
       }
-    ]
+    ],
+    watch: false
   },
   headerBackground: {
     type: String
@@ -12969,7 +12975,8 @@ const ZdGridProps = buildProps({
         cssClass: "no-data",
         text: "NO_DATA"
       }
-    ]
+    ],
+    watch: false
   },
   noDataText: {
     type: String,
@@ -12984,7 +12991,8 @@ const ZdGridProps = buildProps({
         cssClass: "no-result",
         text: "NO_RESULT"
       }
-    ]
+    ],
+    watch: false
   },
   noResultsText: {
     type: String,
@@ -13027,7 +13035,8 @@ const ZdGridProps = buildProps({
         component: "ZdSearch",
         cssClass: "zd-grid-search"
       }
-    ]
+    ],
+    watch: false
   },
   width: {
     type: [Number, String],
@@ -13042,7 +13051,7 @@ const gridComponent = defineComponent({
   props: ZdGridProps,
   inheritAttrs: false,
   setup(props, ctx) {
-    const { instance, root: root2 } = useCreateInstance(props, ctx, Grid);
+    const { instance, root: root2 } = useCreateInstance(props, ctx, Grid, ZdGridProps);
     const gridScope = useGridInstance({ instance, root: root2 });
     const cellClick = ({ row, column, event }) => {
       instance.cellClick(row, column, event, gridScope.rootEl.value);
@@ -13062,13 +13071,14 @@ const gridComponent = defineComponent({
 function useGridInstance({
   instance,
   root: root2,
-  renderedData
+  renderedData,
+  isNavigableRow
 }) {
   var _a, _b;
   useWatchUrl(instance);
   const rootEl2 = getRootElement(root2);
   useColumnDrag({ instance, rootEl: rootEl2 });
-  useTableNavigation({ instance, rootEl: rootEl2 });
+  useTableNavigation({ instance, rootEl: rootEl2, isNavigableRow });
   const { updateFixedColumns, fixedLeft, fixedRight } = useFixedColumns({ instance, rootEl: rootEl2 });
   const { resizeMouseDownHandler, resizeClickHandler, calcWidth } = useColumnResize({
     instance,
@@ -13154,7 +13164,7 @@ function useGridInstance({
 }
 const _hoisted_1$u = ["colspan"];
 const _hoisted_2$e = ["colspan"];
-function _sfc_render$12(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$13(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_zd_grid_toolbar = resolveComponent("zd-grid-toolbar");
   const _component_zd_grid_header_row = resolveComponent("zd-grid-header-row");
   const _component_zd_grid_row = resolveComponent("zd-grid-row");
@@ -13310,8 +13320,8 @@ function _sfc_render$12(_ctx, _cache, $props, $setup, $data, $options) {
     [vShow, _ctx.instance.isVisible]
   ]);
 }
-const ZdGrid = /* @__PURE__ */ _export_sfc(gridComponent, [["render", _sfc_render$12]]);
-const _sfc_main$p = defineComponent({
+const ZdGrid = /* @__PURE__ */ _export_sfc(gridComponent, [["render", _sfc_render$13]]);
+const _sfc_main$q = defineComponent({
   props: {
     actions: {
       type: Array,
@@ -13323,7 +13333,7 @@ const _sfc_main$p = defineComponent({
   }
 });
 const _hoisted_1$t = { class: "zd-grid__action-cell" };
-function _sfc_render$11(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$12(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("div", _hoisted_1$t, [
     (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.actions, (child) => {
       return openBlock(), createBlock(resolveDynamicComponent(child.component), mergeProps({
@@ -13332,8 +13342,8 @@ function _sfc_render$11(_ctx, _cache, $props, $setup, $data, $options) {
     }), 128))
   ]);
 }
-const ZdGridAction = /* @__PURE__ */ _export_sfc(_sfc_main$p, [["render", _sfc_render$11]]);
-const _sfc_main$o = defineComponent({
+const ZdGridAction = /* @__PURE__ */ _export_sfc(_sfc_main$q, [["render", _sfc_render$12]]);
+const _sfc_main$p = defineComponent({
   props: {
     row: {
       type: Object,
@@ -13391,7 +13401,7 @@ const _sfc_main$o = defineComponent({
   }
 });
 const _hoisted_1$s = ["tabindex"];
-function _sfc_render$10(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$11(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_v_skeleton_loader = resolveComponent("v-skeleton-loader");
   const _component_zd_grid_cell_content = resolveComponent("zd-grid-cell-content");
   const _component_zd_grid_action = resolveComponent("zd-grid-action");
@@ -13433,8 +13443,8 @@ function _sfc_render$10(_ctx, _cache, $props, $setup, $data, $options) {
     }, null, 8, ["actions"]))
   ], 46, _hoisted_1$s);
 }
-const ZdGridCell = /* @__PURE__ */ _export_sfc(_sfc_main$o, [["render", _sfc_render$10]]);
-const _sfc_main$n = defineComponent({
+const ZdGridCell = /* @__PURE__ */ _export_sfc(_sfc_main$p, [["render", _sfc_render$11]]);
+const _sfc_main$o = defineComponent({
   props: {
     column: {
       type: Object,
@@ -13494,33 +13504,29 @@ const _sfc_main$n = defineComponent({
     };
   }
 });
-function _sfc_render$$(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_zd_tooltip_overflow = resolveComponent("zd-tooltip-overflow");
-  return openBlock(), createBlock(_component_zd_tooltip_overflow, {
-    overflow: _ctx.column.overflow,
-    value: _ctx.value,
-    classes: [
+function _sfc_render$10(_ctx, _cache, $props, $setup, $data, $options) {
+  const _directive_tooltip_overflow = resolveDirective("tooltip-overflow");
+  return withDirectives((openBlock(), createElementBlock("span", {
+    class: normalizeClass([
       "zd-grid__cell-content",
       ..._ctx.cssClass
-    ],
-    styles: [{
-      ..._ctx.cssStyle,
-      width: _ctx.width
-    }]
-  }, {
-    default: withCtx(() => [
-      renderSlot(_ctx.$slots, "default", {
-        value: _ctx.value,
-        formattedValue: _ctx.formattedValue
-      }, () => [
-        createTextVNode(toDisplayString(_ctx.value), 1)
-      ])
     ]),
-    _: 3
-  }, 8, ["overflow", "value", "classes", "styles"]);
+    style: normalizeStyle([{
+      width: _ctx.width
+    }])
+  }, [
+    renderSlot(_ctx.$slots, "default", {
+      value: _ctx.value,
+      formattedValue: _ctx.formattedValue
+    }, () => [
+      createTextVNode(toDisplayString(_ctx.value), 1)
+    ])
+  ], 6)), [
+    [_directive_tooltip_overflow, _ctx.value]
+  ]);
 }
-const ZdGridCellContent = /* @__PURE__ */ _export_sfc(_sfc_main$n, [["render", _sfc_render$$]]);
-const _sfc_main$m = defineComponent({
+const ZdGridCellContent = /* @__PURE__ */ _export_sfc(_sfc_main$o, [["render", _sfc_render$10]]);
+const _sfc_main$n = defineComponent({
   props: {
     cellSelection: {
       type: Boolean,
@@ -13558,7 +13564,7 @@ const _sfc_main$m = defineComponent({
   }
 });
 const _hoisted_1$r = ["tabindex"];
-function _sfc_render$_(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$$(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_v_checkbox = resolveComponent("v-checkbox");
   return openBlock(), createElementBlock("td", {
     tabindex: _ctx.cellSelection ? 0 : "",
@@ -13587,8 +13593,8 @@ function _sfc_render$_(_ctx, _cache, $props, $setup, $data, $options) {
     }, null, 8, ["disabled", "true-icon", "false-icon", "indeterminate-icon", "model-value", "indeterminate", "onClick"])
   ], 42, _hoisted_1$r);
 }
-const ZdGridCheckbox = /* @__PURE__ */ _export_sfc(_sfc_main$m, [["render", _sfc_render$_]]);
-const _sfc_main$l = defineComponent({
+const ZdGridCheckbox = /* @__PURE__ */ _export_sfc(_sfc_main$n, [["render", _sfc_render$$]]);
+const _sfc_main$m = defineComponent({
   props: {
     action: {
       type: Boolean,
@@ -13656,12 +13662,12 @@ const _sfc_main$l = defineComponent({
   }
 });
 const _hoisted_1$q = { class: "zd-grid__header-name" };
-function _sfc_render$Z(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$_(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_v_spacer = resolveComponent("v-spacer");
   const _component_zd_grid_sort = resolveComponent("zd-grid-sort");
-  const _component_zd_tooltip_overflow = resolveComponent("zd-tooltip-overflow");
   const _component_zd_grid_helper = resolveComponent("zd-grid-helper");
   const _component_zd_grid_header_icon = resolveComponent("zd-grid-header-icon");
+  const _directive_tooltip_overflow = resolveDirective("tooltip-overflow");
   return openBlock(), createElementBlock("span", {
     ref: "headerCell",
     class: normalizeClass([
@@ -13686,20 +13692,20 @@ function _sfc_render$Z(_ctx, _cache, $props, $setup, $data, $options) {
           onClick: _cache[0] || (_cache[0] = ($event) => _ctx.click($event))
         }, null, 8, ["orderIndex", "icon", "hidden"])) : createCommentVNode("", true)
       ], 64)) : createCommentVNode("", true),
-      createVNode(_component_zd_tooltip_overflow, {
-        overflow: _ctx.overflow,
-        value: _ctx.label,
-        classes: [
-          "zd-grid__header-name"
-        ],
+      withDirectives((openBlock(), createElementBlock("span", {
+        class: "zd-grid__header-name",
         onClick: _cache[1] || (_cache[1] = ($event) => _ctx.click($event))
-      }, {
-        default: withCtx(() => [
-          createTextVNode(toDisplayString(_ctx.$t(_ctx.label)) + " ", 1),
-          renderSlot(_ctx.$slots, "label")
-        ]),
-        _: 3
-      }, 8, ["overflow", "value"]),
+      }, [
+        createTextVNode(toDisplayString(_ctx.$t(_ctx.label)) + " ", 1),
+        renderSlot(_ctx.$slots, "label")
+      ])), [
+        [
+          _directive_tooltip_overflow,
+          _ctx.label,
+          void 0,
+          { ellipsis: true }
+        ]
+      ]),
       _ctx.helperText ? (openBlock(), createBlock(_component_zd_grid_helper, {
         key: 1,
         "helper-text": _ctx.helperText
@@ -13734,8 +13740,8 @@ function _sfc_render$Z(_ctx, _cache, $props, $setup, $data, $options) {
     }, null, 8, ["hidden"])) : createCommentVNode("", true)
   ], 6);
 }
-const ZdGridColumnHeader = /* @__PURE__ */ _export_sfc(_sfc_main$l, [["render", _sfc_render$Z]]);
-const _sfc_main$k = defineComponent({
+const ZdGridColumnHeader = /* @__PURE__ */ _export_sfc(_sfc_main$m, [["render", _sfc_render$_]]);
+const _sfc_main$l = defineComponent({
   props: {
     icon: {
       type: String,
@@ -13765,7 +13771,7 @@ const _sfc_main$k = defineComponent({
     return { click, mousedown };
   }
 });
-function _sfc_render$Y(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$Z(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_v_icon = resolveComponent("v-icon");
   return openBlock(), createElementBlock("span", {
     class: normalizeClass([
@@ -13783,8 +13789,8 @@ function _sfc_render$Y(_ctx, _cache, $props, $setup, $data, $options) {
     }, null, 8, ["color", "icon"])
   ], 34);
 }
-const ZdGridHeaderIcon = /* @__PURE__ */ _export_sfc(_sfc_main$k, [["render", _sfc_render$Y]]);
-const _sfc_main$j = defineComponent({
+const ZdGridHeaderIcon = /* @__PURE__ */ _export_sfc(_sfc_main$l, [["render", _sfc_render$Z]]);
+const _sfc_main$k = defineComponent({
   props: {
     selectable: {
       type: Boolean,
@@ -13888,7 +13894,7 @@ const _sfc_main$j = defineComponent({
   }
 });
 const _hoisted_1$p = ["column-name", "index"];
-function _sfc_render$X(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$Y(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_v_checkbox = resolveComponent("v-checkbox");
   const _component_zd_grid_column_header = resolveComponent("zd-grid-column-header");
   const _component_v_hover = resolveComponent("v-hover");
@@ -13975,8 +13981,8 @@ function _sfc_render$X(_ctx, _cache, $props, $setup, $data, $options) {
     }), 128))
   ]);
 }
-const ZdGridHeaderRow = /* @__PURE__ */ _export_sfc(_sfc_main$j, [["render", _sfc_render$X]]);
-const _sfc_main$i = defineComponent({
+const ZdGridHeaderRow = /* @__PURE__ */ _export_sfc(_sfc_main$k, [["render", _sfc_render$Y]]);
+const _sfc_main$j = defineComponent({
   props: {
     orderIndex: {
       type: Number,
@@ -14011,7 +14017,7 @@ const _hoisted_1$o = {
   key: 0,
   class: "zd-grid__sort-order"
 };
-function _sfc_render$W(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$X(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_v_icon = resolveComponent("v-icon");
   return openBlock(), createElementBlock("span", {
     class: normalizeClass([
@@ -14031,8 +14037,8 @@ function _sfc_render$W(_ctx, _cache, $props, $setup, $data, $options) {
     _ctx.orderIndex >= 0 ? (openBlock(), createElementBlock("span", _hoisted_1$o, toDisplayString(_ctx.orderIndex + 1), 1)) : createCommentVNode("", true)
   ], 2);
 }
-const ZdGridSort = /* @__PURE__ */ _export_sfc(_sfc_main$i, [["render", _sfc_render$W]]);
-const _sfc_main$h = defineComponent({
+const ZdGridSort = /* @__PURE__ */ _export_sfc(_sfc_main$j, [["render", _sfc_render$X]]);
+const _sfc_main$i = defineComponent({
   props: {},
   setup(props) {
     var _a;
@@ -14047,7 +14053,7 @@ const _sfc_main$h = defineComponent({
   }
 });
 const _hoisted_1$n = ["id"];
-function _sfc_render$V(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$W(_ctx, _cache, $props, $setup, $data, $options) {
   return _ctx.instance.footerSlot.length || _ctx.hasDefaultSlot ? (openBlock(), createElementBlock("div", {
     key: 0,
     id: `${_ctx.instance.name}-footer`,
@@ -14062,7 +14068,7 @@ function _sfc_render$V(_ctx, _cache, $props, $setup, $data, $options) {
     renderSlot(_ctx.$slots, "default")
   ], 8, _hoisted_1$n)) : createCommentVNode("", true);
 }
-const ZdGridFooter = /* @__PURE__ */ _export_sfc(_sfc_main$h, [["render", _sfc_render$V]]);
+const ZdGridFooter = /* @__PURE__ */ _export_sfc(_sfc_main$i, [["render", _sfc_render$W]]);
 const gridHelper = defineComponent({
   props: {
     helperText: {
@@ -14073,7 +14079,7 @@ const gridHelper = defineComponent({
   },
   inheritAttrs: false
 });
-function _sfc_render$U(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$V(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_zd_grid_header_icon = resolveComponent("zd-grid-header-icon");
   const _component_v_tooltip = resolveComponent("v-tooltip");
   return openBlock(), createBlock(_component_v_tooltip, {
@@ -14090,8 +14096,8 @@ function _sfc_render$U(_ctx, _cache, $props, $setup, $data, $options) {
     _: 1
   }, 8, ["text"]);
 }
-const ZdGridHelper = /* @__PURE__ */ _export_sfc(gridHelper, [["render", _sfc_render$U]]);
-const _sfc_main$g = defineComponent({
+const ZdGridHelper = /* @__PURE__ */ _export_sfc(gridHelper, [["render", _sfc_render$V]]);
+const _sfc_main$h = defineComponent({
   props: {
     isSelected: {
       type: Boolean
@@ -14115,7 +14121,7 @@ const _sfc_main$g = defineComponent({
     };
   }
 });
-function _sfc_render$T(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$U(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("tr", {
     class: normalizeClass([
       "zd-grid__row",
@@ -14130,8 +14136,8 @@ function _sfc_render$T(_ctx, _cache, $props, $setup, $data, $options) {
     renderSlot(_ctx.$slots, "default")
   ], 2);
 }
-const TableRow = /* @__PURE__ */ _export_sfc(_sfc_main$g, [["render", _sfc_render$T]]);
-const _sfc_main$f = defineComponent({
+const TableRow = /* @__PURE__ */ _export_sfc(_sfc_main$h, [["render", _sfc_render$U]]);
+const _sfc_main$g = defineComponent({
   props: {
     isSelected: {
       type: Boolean,
@@ -14200,7 +14206,7 @@ const _sfc_main$f = defineComponent({
     };
   }
 });
-function _sfc_render$S(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$T(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_zd_grid_checkbox = resolveComponent("zd-grid-checkbox");
   const _component_zd_grid_cell = resolveComponent("zd-grid-cell");
   const _component_table_row = resolveComponent("table-row");
@@ -14221,7 +14227,7 @@ function _sfc_render$S(_ctx, _cache, $props, $setup, $data, $options) {
       }, null, 8, ["disabled", "isSelected", "cellSelection", "isCurrent"])) : createCommentVNode("", true),
       (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.columns, (column, index2, ___, _cached) => {
         const _memo = [_ctx.row, column, _ctx.fixedLeft, _ctx.fixedRight, _ctx.cellSelection, _ctx.isCurrent({ row: _ctx.row, column })];
-        if (_cached && _cached.key === column.name && isMemoSame(_cached, _memo)) return _cached;
+        if (_cached && _cached.el && _cached.key === column.name && isMemoSame(_cached, _memo)) return _cached;
         const _item = (openBlock(), createBlock(_component_zd_grid_cell, {
           key: column.name,
           row: _ctx.row,
@@ -14254,8 +14260,8 @@ function _sfc_render$S(_ctx, _cache, $props, $setup, $data, $options) {
     _: 3
   }, 8, ["isSelected", "isCurrentRow"]);
 }
-const ZdGridRow = /* @__PURE__ */ _export_sfc(_sfc_main$f, [["render", _sfc_render$S]]);
-const _sfc_main$e = defineComponent({
+const ZdGridRow = /* @__PURE__ */ _export_sfc(_sfc_main$g, [["render", _sfc_render$T]]);
+const _sfc_main$f = defineComponent({
   props: {},
   setup() {
     var _a;
@@ -14270,7 +14276,7 @@ const _sfc_main$e = defineComponent({
 });
 const _hoisted_1$m = ["id"];
 const _hoisted_2$d = { class: "zd-grid__toolbar-content" };
-function _sfc_render$R(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$S(_ctx, _cache, $props, $setup, $data, $options) {
   return _ctx.instance.toolbarSlot.length || _ctx.hasDefaultSlot ? (openBlock(), createElementBlock("div", {
     key: 0,
     id: _ctx.instance.name + "-top",
@@ -14288,7 +14294,7 @@ function _sfc_render$R(_ctx, _cache, $props, $setup, $data, $options) {
     ])
   ], 8, _hoisted_1$m)) : createCommentVNode("", true);
 }
-const ZdGridToolbar = /* @__PURE__ */ _export_sfc(_sfc_main$e, [["render", _sfc_render$R]]);
+const ZdGridToolbar = /* @__PURE__ */ _export_sfc(_sfc_main$f, [["render", _sfc_render$S]]);
 const ZdHeaderProps$1 = buildProps({
   ...ZdComponentRenderProps,
   ...HeightProps,
@@ -14303,7 +14309,8 @@ const ZdHeaderProps$1 = buildProps({
   },
   centerSlot: {
     type: Array,
-    default: () => []
+    default: () => [],
+    watch: false
   },
   color: {
     type: String,
@@ -14323,7 +14330,8 @@ const ZdHeaderProps$1 = buildProps({
   },
   leftSlot: {
     type: Array,
-    default: () => []
+    default: () => [],
+    watch: false
   },
   padless: {
     type: [Boolean, String],
@@ -14331,7 +14339,8 @@ const ZdHeaderProps$1 = buildProps({
   },
   rightSlot: {
     type: Array,
-    default: () => []
+    default: () => [],
+    watch: false
   },
   // Zeedhi 3.0
   image: {
@@ -14347,7 +14356,7 @@ const headerComponent = defineComponent({
   props: ZdHeaderProps$1,
   inheritAttrs: false,
   setup(props, ctx) {
-    const { instance, root: root2 } = useCreateInstance(props, ctx, Header);
+    const { instance, root: root2 } = useCreateInstance(props, ctx, Header, ZdHeaderProps$1);
     const { click, mouseenter, mouseleave } = useGetMethods(instance, root2);
     const centerSlot = ref(null);
     const getSlotsMinHeight = (height) => {
@@ -14387,7 +14396,7 @@ const _hoisted_3$5 = {
   key: 2,
   class: "zd-header-slot-right"
 };
-function _sfc_render$Q(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$R(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_v_col = resolveComponent("v-col");
   return withDirectives((openBlock(), createBlock(resolveDynamicComponent(_ctx.instance.app ? "v-app-bar" : "v-toolbar"), {
     ref: "root",
@@ -14484,7 +14493,7 @@ function _sfc_render$Q(_ctx, _cache, $props, $setup, $data, $options) {
     [vShow, _ctx.instance.isVisible]
   ]);
 }
-const ZdHeader = /* @__PURE__ */ _export_sfc(headerComponent, [["render", _sfc_render$Q]]);
+const ZdHeader = /* @__PURE__ */ _export_sfc(headerComponent, [["render", _sfc_render$R]]);
 const ZdIconProps$1 = buildProps({
   ...ZdComponentRenderProps,
   color: {
@@ -14531,7 +14540,7 @@ const iconComponent = defineComponent({
   props: ZdIconProps$1,
   inheritAttrs: false,
   setup(props, ctx) {
-    const { instance, root: root2 } = useCreateInstance(props, ctx, Icon$1);
+    const { instance, root: root2 } = useCreateInstance(props, ctx, Icon$1, ZdIconProps$1);
     const { click, mouseenter, mouseleave } = useGetMethods(instance, root2);
     return {
       instance,
@@ -14542,7 +14551,7 @@ const iconComponent = defineComponent({
     };
   }
 });
-function _sfc_render$P(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$Q(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_v_icon = resolveComponent("v-icon");
   return withDirectives((openBlock(), createBlock(_component_v_icon, mergeProps({
     id: _ctx.instance.name,
@@ -14571,7 +14580,7 @@ function _sfc_render$P(_ctx, _cache, $props, $setup, $data, $options) {
     [vShow, _ctx.instance.isVisible]
   ]);
 }
-const ZdIcon = /* @__PURE__ */ _export_sfc(iconComponent, [["render", _sfc_render$P]]);
+const ZdIcon = /* @__PURE__ */ _export_sfc(iconComponent, [["render", _sfc_render$Q]]);
 const ZdImageProps$1 = buildProps({
   ...ZdComponentProps,
   ...HeightProps,
@@ -14601,7 +14610,7 @@ const imageComponent = defineComponent({
   props: ZdImageProps$1,
   inheritAttrs: false,
   setup(props, ctx) {
-    const { instance, root: root2 } = useCreateInstance(props, ctx, Image);
+    const { instance, root: root2 } = useCreateInstance(props, ctx, Image, ZdImageProps$1);
     const { click, focus, blur, mouseenter, mouseleave } = useGetMethods(instance, root2);
     return {
       instance,
@@ -14615,7 +14624,7 @@ const imageComponent = defineComponent({
   }
 });
 const _hoisted_1$k = ["id", "name"];
-function _sfc_render$O(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$P(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_zd_text = resolveComponent("zd-text");
   return withDirectives((openBlock(), createElementBlock("span", {
     id: _ctx.instance.name,
@@ -14667,7 +14676,7 @@ function _sfc_render$O(_ctx, _cache, $props, $setup, $data, $options) {
     [vShow, _ctx.instance.isVisible]
   ]);
 }
-const ZdImage = /* @__PURE__ */ _export_sfc(imageComponent, [["render", _sfc_render$O]]);
+const ZdImage = /* @__PURE__ */ _export_sfc(imageComponent, [["render", _sfc_render$P]]);
 const ZdIncrementProps$1 = buildProps({
   ...ZdNumberInputProps$1,
   maxValue: {
@@ -14683,12 +14692,12 @@ const ZdIncrementProps$1 = buildProps({
     default: 1
   }
 });
-const _sfc_main$d = defineComponent({
+const _sfc_main$e = defineComponent({
   name: "ZdIncrement",
   props: ZdIncrementProps$1,
   inheritAttrs: false,
   setup(props, ctx) {
-    const { instance, root: root2 } = useCreateInstance(props, ctx, Increment);
+    const { instance, root: root2 } = useCreateInstance(props, ctx, Increment, ZdIncrementProps$1);
     const { click, focus, blur, mouseenter, mouseleave } = useGetMethods(instance, root2);
     return {
       instance,
@@ -14701,7 +14710,7 @@ const _sfc_main$d = defineComponent({
     };
   }
 });
-function _sfc_render$N(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$O(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_zd_number_input = resolveComponent("zd-number-input");
   return openBlock(), createBlock(_component_zd_number_input, {
     id: _ctx.instance.name,
@@ -14711,23 +14720,26 @@ function _sfc_render$N(_ctx, _cache, $props, $setup, $data, $options) {
     "instance-object": _ctx.instance
   }, null, 8, ["id", "instance-object"]);
 }
-const ZdIncrement = /* @__PURE__ */ _export_sfc(_sfc_main$d, [["render", _sfc_render$N]]);
+const ZdIncrement = /* @__PURE__ */ _export_sfc(_sfc_main$e, [["render", _sfc_render$O]]);
 const ZdIterableComponentRenderProps = buildProps({
   ...ZdIterableProps,
   footerSlot: {
     type: Array,
     default() {
       return [];
-    }
+    },
+    watch: false
   },
   toolbarSlot: {
     type: Array,
     default() {
       return [];
-    }
+    },
+    watch: false
   },
   componentMetadata: {
-    type: [Object, String]
+    type: [Object, String],
+    watch: false
   },
   rowPropName: {
     type: String,
@@ -14737,7 +14749,8 @@ const ZdIterableComponentRenderProps = buildProps({
     type: Array,
     default() {
       return [];
-    }
+    },
+    watch: false
   },
   noDataSlot: {
     type: Array,
@@ -14748,7 +14761,8 @@ const ZdIterableComponentRenderProps = buildProps({
         cssClass: "no-data",
         text: "NO_DATA"
       }
-    ]
+    ],
+    watch: false
   },
   noResultSlot: {
     type: Array,
@@ -14759,7 +14773,8 @@ const ZdIterableComponentRenderProps = buildProps({
         cssClass: "no-result",
         text: "NO_RESULT"
       }
-    ]
+    ],
+    watch: false
   },
   height: {
     type: [Number, String],
@@ -14794,7 +14809,12 @@ const iterableComponentRender = defineComponent({
   props: ZdIterableComponentRenderProps,
   inheritAttrs: false,
   setup(props, ctx) {
-    const { instance, root: root2 } = useCreateInstance(props, ctx, IterableComponentRender);
+    const { instance, root: root2 } = useCreateInstance(
+      props,
+      ctx,
+      IterableComponentRender,
+      ZdIterableComponentRenderProps
+    );
     const { click, focus, blur, mouseenter, mouseleave } = useGetMethods(instance, root2);
     onMounted(() => {
       var _a;
@@ -14830,7 +14850,7 @@ const _hoisted_7$2 = {
   key: 1,
   class: "zd-iterable-footer"
 };
-function _sfc_render$M(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$N(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_v_progress_circular = resolveComponent("v-progress-circular");
   return _ctx.instance.isVisible ? (openBlock(), createElementBlock("div", {
     key: 0,
@@ -14915,8 +14935,8 @@ function _sfc_render$M(_ctx, _cache, $props, $setup, $data, $options) {
     ])) : createCommentVNode("", true)
   ], 14, _hoisted_1$j)) : createCommentVNode("", true);
 }
-const ZdIterableComponentRender = /* @__PURE__ */ _export_sfc(iterableComponentRender, [["render", _sfc_render$M]]);
-const _sfc_main$c = defineComponent({
+const ZdIterableComponentRender = /* @__PURE__ */ _export_sfc(iterableComponentRender, [["render", _sfc_render$N]]);
+const _sfc_main$d = defineComponent({
   props: {},
   setup(props) {
     var _a, _b, _c;
@@ -14939,7 +14959,7 @@ const _hoisted_2$a = {
   key: 1,
   class: "error--text"
 };
-function _sfc_render$L(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$M(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("div", {
     id: _ctx.instance.name
   }, [
@@ -14973,7 +14993,7 @@ function _sfc_render$L(_ctx, _cache, $props, $setup, $data, $options) {
     ], 64)) : createCommentVNode("", true)
   ], 8, _hoisted_1$i);
 }
-const ZdIterableNoData = /* @__PURE__ */ _export_sfc(_sfc_main$c, [["render", _sfc_render$L]]);
+const ZdIterableNoData = /* @__PURE__ */ _export_sfc(_sfc_main$d, [["render", _sfc_render$M]]);
 const ZdIterableColumnsButtonProps$1 = {
   ...ZdButtonProps,
   iterableComponentName: {
@@ -14996,7 +15016,12 @@ const iterableColumnsButton = defineComponent({
   name: "ZdIterableColumnsButton",
   props: ZdIterableColumnsButtonProps$1,
   setup(props, ctx) {
-    const { instance } = useCreateInstance(props, ctx, IterableColumnsButton);
+    const { instance } = useCreateInstance(
+      props,
+      ctx,
+      IterableColumnsButton,
+      ZdIterableColumnsButtonProps$1
+    );
     const getEvents = (on2) => {
       const events = { ...instance.events };
       Object.keys(on2).forEach((eventName) => {
@@ -15016,7 +15041,7 @@ const iterableColumnsButton = defineComponent({
     };
   }
 });
-function _sfc_render$K(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$L(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_zd_activator_wrapper = resolveComponent("zd-activator-wrapper");
   const _component_zd_checkbox = resolveComponent("zd-checkbox");
   const _component_v_list_item = resolveComponent("v-list-item");
@@ -15067,7 +15092,7 @@ function _sfc_render$K(_ctx, _cache, $props, $setup, $data, $options) {
     _: 1
   }, 8, ["id", "class", "style"]);
 }
-const ZdIterableColumnsButton = /* @__PURE__ */ _export_sfc(iterableColumnsButton, [["render", _sfc_render$K]]);
+const ZdIterableColumnsButton = /* @__PURE__ */ _export_sfc(iterableColumnsButton, [["render", _sfc_render$L]]);
 const ZdIterablePageInfoProps = {
   ...ZdComponentRenderProps,
   iterableComponentName: {
@@ -15075,18 +15100,18 @@ const ZdIterablePageInfoProps = {
   }
   // Zeedhi 3.0
 };
-const _sfc_main$b = defineComponent({
+const _sfc_main$c = defineComponent({
   props: ZdIterablePageInfoProps,
   inheritAttrs: false,
   setup(props, ctx) {
-    const { instance } = useCreateInstance(props, ctx, IterablePageInfo);
+    const { instance } = useCreateInstance(props, ctx, IterablePageInfo, ZdIterablePageInfoProps);
     return {
       instance
     };
   }
 });
 const _hoisted_1$h = ["id"];
-function _sfc_render$J(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$K(_ctx, _cache, $props, $setup, $data, $options) {
   return withDirectives((openBlock(), createElementBlock("span", {
     id: _ctx.instance.name,
     class: normalizeClass([
@@ -15097,7 +15122,7 @@ function _sfc_render$J(_ctx, _cache, $props, $setup, $data, $options) {
     [vShow, _ctx.instance.isVisible]
   ]);
 }
-const ZdIterablePageInfo = /* @__PURE__ */ _export_sfc(_sfc_main$b, [["render", _sfc_render$J]]);
+const ZdIterablePageInfo = /* @__PURE__ */ _export_sfc(_sfc_main$c, [["render", _sfc_render$K]]);
 const ZdSelectProps$1 = buildProps({
   ...ZdTextInputProps$1,
   appendIcon: {
@@ -15146,7 +15171,8 @@ const ZdSelectProps$1 = buildProps({
   },
   datasource: {
     type: Object,
-    default: () => ({})
+    default: () => ({}),
+    watch: false
   },
   value: {
     type: [String, Number, Object],
@@ -15162,11 +15188,13 @@ const ZdSelectProps$1 = buildProps({
   },
   itemAfterSlot: {
     type: Array,
-    default: () => []
+    default: () => [],
+    watch: false
   },
   itemBeforeSlot: {
     type: Array,
-    default: () => []
+    default: () => [],
+    watch: false
   },
   manualMode: {
     type: [Boolean, String],
@@ -15190,7 +15218,12 @@ defineComponent({
   props: ZdSelectProps$1,
   inheritAttrs: false,
   setup(props, ctx) {
-    const { instance, root: root2 } = useCreateInputInstance(props, ctx, Select);
+    const { instance, root: root2 } = useCreateInputInstance(
+      props,
+      ctx,
+      Select,
+      ZdSelectProps$1
+    );
     const selectScope = useSelect$1(instance, ctx, root2);
     return {
       ...selectScope
@@ -15205,7 +15238,7 @@ function useSelect$1(instance, ctx, root2) {
   const hasItemBeforeSlot = !!slots.itemBeforeSlot;
   const hasItemAfterSlot = !!slots.itemAfterSlot;
   const items = computed(() => {
-    const data2 = instance.items;
+    const data2 = instance.items || [];
     const disabledValues = instance.disabledItems.map((item) => {
       if (item && typeof item === "object") {
         return item[instance.dataValue];
@@ -15228,11 +15261,11 @@ function useSelect$1(instance, ctx, root2) {
     if (!instance.dataTextDiscrete) {
       return formattedDataText(item);
     }
-    const text = selectFormatterFn(item, {
+    const text2 = selectFormatterFn(item, {
       dataText: instance.dataTextDiscrete,
       dataTextSeparator: instance.dataTextSeparator
     });
-    return text;
+    return text2;
   };
   const selectChange = (value) => {
     const rootElement = getRootElement(root2);
@@ -15307,15 +15340,16 @@ const ZdIterablePageSizeProps = {
     type: [Boolean, String]
   },
   validations: {
-    type: [Object, String]
+    type: [Object, String],
+    watch: false
   }
   // Zeedhi 3.0
 };
-const _sfc_main$a = defineComponent({
+const _sfc_main$b = defineComponent({
   props: ZdIterablePageSizeProps,
   inheritAttrs: false,
   setup(props, ctx) {
-    const { instance } = useCreateInstance(props, ctx, IterablePageSize);
+    const { instance } = useCreateInstance(props, ctx, IterablePageSize, ZdIterablePageSizeProps);
     onMounted(() => {
       const data2 = instance.iterableComponent.pageSizes.map((size) => ({ value: size }));
       instance.updateData(data2).then(() => {
@@ -15330,7 +15364,7 @@ const _sfc_main$a = defineComponent({
     };
   }
 });
-function _sfc_render$I(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$J(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_zd_select = resolveComponent("zd-select");
   return openBlock(), createBlock(_component_zd_select, {
     id: _ctx.instance.name,
@@ -15340,8 +15374,8 @@ function _sfc_render$I(_ctx, _cache, $props, $setup, $data, $options) {
     cssClass: `${_ctx.instance.cssClass} zd-iterable-page-size`
   }, null, 8, ["id", "instance-object", "cssClass"]);
 }
-const ZdIterablePageSize = /* @__PURE__ */ _export_sfc(_sfc_main$a, [["render", _sfc_render$I]]);
-const ZdSearchProps$1 = {
+const ZdIterablePageSize = /* @__PURE__ */ _export_sfc(_sfc_main$b, [["render", _sfc_render$J]]);
+const ZdIterablePaginationProps = {
   ...ZdTextInputProps$1,
   iterableComponentName: {
     type: String
@@ -15363,17 +15397,22 @@ const ZdSearchProps$1 = {
   }
   // Zeedhi 3.0
 };
-const _sfc_main$9 = defineComponent({
-  props: ZdSearchProps$1,
+const _sfc_main$a = defineComponent({
+  props: ZdIterablePaginationProps,
   inheritAttrs: false,
   setup(props, ctx) {
-    const { instance } = useCreateInstance(props, ctx, IterablePagination);
+    const { instance } = useCreateInstance(
+      props,
+      ctx,
+      IterablePagination,
+      ZdIterablePaginationProps
+    );
     return {
       instance
     };
   }
 });
-function _sfc_render$H(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$I(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_v_pagination = resolveComponent("v-pagination");
   return withDirectives((openBlock(), createBlock(_component_v_pagination, {
     id: _ctx.instance.name,
@@ -15398,7 +15437,7 @@ function _sfc_render$H(_ctx, _cache, $props, $setup, $data, $options) {
     [vShow, _ctx.instance.isVisible]
   ]);
 }
-const ZdIterablePagination = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["render", _sfc_render$H]]);
+const ZdIterablePagination = /* @__PURE__ */ _export_sfc(_sfc_main$a, [["render", _sfc_render$I]]);
 const ZdSearchProps = {
   ...ZdTextInputProps$1,
   iterableComponentName: {
@@ -15426,18 +15465,18 @@ const ZdSearchProps = {
   }
   // Zeedhi 3.0
 };
-const _sfc_main$8 = defineComponent({
+const _sfc_main$9 = defineComponent({
   props: ZdSearchProps,
   inheritAttrs: false,
   setup(props, ctx) {
-    const { instance, root: root2 } = useCreateInstance(props, ctx, Search);
+    const { instance, root: root2 } = useCreateInstance(props, ctx, Search, ZdSearchProps);
     const textInputScope = useTextInput$1(instance, ctx, root2);
     return {
       ...textInputScope
     };
   }
 });
-function _sfc_render$G(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$H(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_zd_text_input = resolveComponent("zd-text-input");
   return openBlock(), createBlock(_component_zd_text_input, {
     id: _ctx.instance.name,
@@ -15447,7 +15486,7 @@ function _sfc_render$G(_ctx, _cache, $props, $setup, $data, $options) {
     "instance-object": _ctx.instance
   }, null, 8, ["id", "cssClass", "instance-object"]);
 }
-const ZdSearch = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["render", _sfc_render$G]]);
+const ZdSearch = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["render", _sfc_render$H]]);
 const ZdLayoutProps$1 = buildProps({
   ...ZdComponentProps,
   fullHeight: {
@@ -15471,7 +15510,7 @@ const layoutComponent = defineComponent({
   props: ZdLayoutProps$1,
   inheritAttrs: false,
   setup(props, ctx) {
-    const { instance, root: root2 } = useCreateInstance(props, ctx, Layout);
+    const { instance, root: root2 } = useCreateInstance(props, ctx, Layout, ZdLayoutProps$1);
     const { click, focus, blur, mouseenter, mouseleave } = useGetMethods(instance, root2);
     return {
       instance,
@@ -15484,7 +15523,7 @@ const layoutComponent = defineComponent({
     };
   }
 });
-function _sfc_render$F(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$G(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_v_main = resolveComponent("v-main");
   const _component_v_layout = resolveComponent("v-layout");
   return openBlock(), createBlock(_component_v_layout, {
@@ -15508,7 +15547,7 @@ function _sfc_render$F(_ctx, _cache, $props, $setup, $data, $options) {
     _: 1
   }, 8, ["name", "full-height", "class"]);
 }
-const ZdLayout = /* @__PURE__ */ _export_sfc(layoutComponent, [["render", _sfc_render$F]]);
+const ZdLayout = /* @__PURE__ */ _export_sfc(layoutComponent, [["render", _sfc_render$G]]);
 const ZdListProps$1 = buildProps({
   ...ZdComponentRenderProps,
   dense: {
@@ -15569,14 +15608,15 @@ const ZdListProps$1 = buildProps({
   },
   items: {
     type: Array,
-    default: () => []
+    default: () => [],
+    watch: false
   }
 });
 const listComponent = defineComponent({
   props: ZdListProps$1,
   inheritAttrs: false,
   setup(props, ctx) {
-    const { instance, root: root2 } = useCreateInstance(props, ctx, List);
+    const { instance, root: root2 } = useCreateInstance(props, ctx, List, ZdListProps$1);
     const isLastItem = (index2) => {
       return index2 + 1 === instance.items.length;
     };
@@ -15587,7 +15627,7 @@ const listComponent = defineComponent({
     };
   }
 });
-function _sfc_render$E(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$F(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_v_divider = resolveComponent("v-divider");
   const _component_v_list = resolveComponent("v-list");
   return withDirectives((openBlock(), createBlock(_component_v_list, {
@@ -15629,7 +15669,7 @@ function _sfc_render$E(_ctx, _cache, $props, $setup, $data, $options) {
     [vShow, _ctx.instance.isVisible]
   ]);
 }
-const ZdList = /* @__PURE__ */ _export_sfc(listComponent, [["render", _sfc_render$E]]);
+const ZdList = /* @__PURE__ */ _export_sfc(listComponent, [["render", _sfc_render$F]]);
 const ZdListItemProps$1 = buildProps({
   ...ZdComponentRenderProps,
   appendIcon: {
@@ -15677,7 +15717,7 @@ defineComponent({
   props: ZdListItemProps$1,
   inheritAttrs: false,
   setup(props, ctx) {
-    const { instance, root: root2 } = useCreateInstance(props, ctx, ListItem);
+    const { instance, root: root2 } = useCreateInstance(props, ctx, ListItem, ZdListItemProps$1);
     const { click, focus, blur, mouseenter, mouseleave } = useGetMethods(instance, root2);
     return {
       instance,
@@ -15702,14 +15742,15 @@ const ZdListGroupProps = buildProps({
   },
   items: {
     type: [Array, String],
-    default: () => []
+    default: () => [],
+    watch: false
   }
 });
 const listGroupComponent = defineComponent({
   props: ZdListGroupProps,
   inheritAttrs: false,
   setup(props, ctx) {
-    const { instance, root: root2 } = useCreateInstance(props, ctx, ListGroup);
+    const { instance, root: root2 } = useCreateInstance(props, ctx, ListGroup, ZdListGroupProps);
     const { click, focus, blur, mouseenter, mouseleave } = useGetMethods(instance, root2);
     return {
       instance,
@@ -15722,7 +15763,7 @@ const listGroupComponent = defineComponent({
     };
   }
 });
-function _sfc_render$D(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$E(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_v_icon = resolveComponent("v-icon");
   const _component_v_list_item = resolveComponent("v-list-item");
   const _component_v_list = resolveComponent("v-list");
@@ -15731,7 +15772,7 @@ function _sfc_render$D(_ctx, _cache, $props, $setup, $data, $options) {
     ref: "root",
     id: _ctx.instance.name
   }, {
-    activator: withCtx(({ props }) => [
+    activator: withCtx(({ props, isOpen }) => [
       createVNode(_component_v_list_item, mergeProps(props, {
         class: "d-flex align-center",
         title: _ctx.instance.title,
@@ -15749,11 +15790,11 @@ function _sfc_render$D(_ctx, _cache, $props, $setup, $data, $options) {
             _: 1
           })) : createCommentVNode("", true)
         ]),
-        append: withCtx(({ isActive }) => [
+        append: withCtx(() => [
           renderSlot(_ctx.$slots, "rightField"),
           _ctx.instance.rightField && !_ctx.$slots.rightField ? (openBlock(), createBlock(resolveDynamicComponent(_ctx.instance.rightField.component), mergeProps({ key: 0 }, _ctx.instance.rightField, { parent: _ctx.instance }), null, 16, ["parent"])) : (openBlock(), createBlock(_component_v_icon, {
             key: 1,
-            class: normalizeClass(["ml-2 rotate-icon", { "rotate-180": isActive }])
+            class: normalizeClass(["ml-2 rotate-icon", { "rotate-180": isOpen }])
           }, {
             default: withCtx(() => [
               createTextVNode(toDisplayString(_ctx.$getIcon(_ctx.instance.appendIcon)), 1)
@@ -15761,8 +15802,8 @@ function _sfc_render$D(_ctx, _cache, $props, $setup, $data, $options) {
             _: 1
           }, 8, ["class"]))
         ]),
-        _: 3
-      }, 16, ["title", "subtitle"])
+        _: 2
+      }, 1040, ["title", "subtitle"])
     ]),
     default: withCtx(() => [
       createVNode(_component_v_list, {
@@ -15785,7 +15826,7 @@ function _sfc_render$D(_ctx, _cache, $props, $setup, $data, $options) {
     _: 3
   }, 8, ["id"]);
 }
-const ZdListGroup = /* @__PURE__ */ _export_sfc(listGroupComponent, [["render", _sfc_render$D]]);
+const ZdListGroup = /* @__PURE__ */ _export_sfc(listGroupComponent, [["render", _sfc_render$E]]);
 const ZdListItemProps = buildProps({
   ...ZdComponentRenderProps,
   appendIcon: {
@@ -15833,7 +15874,7 @@ const listItemComponent = defineComponent({
   props: ZdListItemProps,
   inheritAttrs: false,
   setup(props, ctx) {
-    const { instance, root: root2 } = useCreateInstance(props, ctx, ListItem);
+    const { instance, root: root2 } = useCreateInstance(props, ctx, ListItem, ZdListItemProps);
     const { click, focus, blur, mouseenter, mouseleave } = useGetMethods(instance, root2);
     return {
       instance,
@@ -15854,7 +15895,7 @@ const _hoisted_2$9 = {
   key: 0,
   class: "v-list-item__icon"
 };
-function _sfc_render$C(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$D(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_v_icon = resolveComponent("v-icon");
   const _component_v_list_item = resolveComponent("v-list-item");
   return withDirectives((openBlock(), createBlock(_component_v_list_item, {
@@ -15899,7 +15940,7 @@ function _sfc_render$C(_ctx, _cache, $props, $setup, $data, $options) {
     [vShow, _ctx.instance.isVisible]
   ]);
 }
-const ZdListItem = /* @__PURE__ */ _export_sfc(listItemComponent, [["render", _sfc_render$C]]);
+const ZdListItem = /* @__PURE__ */ _export_sfc(listItemComponent, [["render", _sfc_render$D]]);
 const ZdLoadingProps$1 = buildProps({
   ...ZdComponentProps,
   image: {
@@ -15939,7 +15980,7 @@ const loadingComponent = defineComponent({
   props: ZdLoadingProps$1,
   inheritAttrs: false,
   setup(props, ctx) {
-    const { root: root2 } = useCreateInstance(props, ctx, Loading);
+    const { root: root2 } = useCreateInstance(props, ctx, Loading, ZdLoadingProps$1);
     const loading = useLoading$1(Loading, props);
     LoadingService.loading = loading;
     const parseToPixel = (number) => {
@@ -15962,10 +16003,10 @@ const _hoisted_1$f = {
 };
 const _hoisted_2$8 = {
   key: 0,
-  class: "center-div zd-loading"
+  class: "center-div"
 };
 const _hoisted_3$3 = ["innerHTML"];
-function _sfc_render$B(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$C(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_v_progress_circular = resolveComponent("v-progress-circular");
   const _component_v_img = resolveComponent("v-img");
   const _component_v_overlay = resolveComponent("v-overlay");
@@ -15978,7 +16019,7 @@ function _sfc_render$B(_ctx, _cache, $props, $setup, $data, $options) {
       persistent: "",
       "z-index": _ctx.zIndex,
       style: normalizeStyle([_ctx.cssStyle]),
-      class: normalizeClass([_ctx.cssClass]),
+      class: normalizeClass([_ctx.cssClass, "zd-loading"]),
       theme: _ctx.loading.theme
     }, {
       default: withCtx(() => [
@@ -15997,7 +16038,7 @@ function _sfc_render$B(_ctx, _cache, $props, $setup, $data, $options) {
           }, null, 8, ["src", "width"])),
           createElementVNode("div", {
             innerHTML: _ctx.$sanitize(_ctx.$t(_ctx.loading.text)),
-            class: "h3 text",
+            class: "zd-loading__text",
             style: normalizeStyle("color: " + _ctx.textColor + ";")
           }, null, 12, _hoisted_3$3)
         ])) : createCommentVNode("", true)
@@ -16006,7 +16047,7 @@ function _sfc_render$B(_ctx, _cache, $props, $setup, $data, $options) {
     }, 8, ["id", "opacity", "modelValue", "z-index", "style", "class", "theme"])
   ], 512);
 }
-const ZdLoading = /* @__PURE__ */ _export_sfc(loadingComponent, [["render", _sfc_render$B]]);
+const ZdLoading = /* @__PURE__ */ _export_sfc(loadingComponent, [["render", _sfc_render$C]]);
 const ZdLoginProps$1 = buildProps({
   ...ZdComponentRenderProps,
   backgroundStyle: {
@@ -16015,7 +16056,8 @@ const ZdLoginProps$1 = buildProps({
   },
   bottomLink: {
     type: Array,
-    default: () => []
+    default: () => [],
+    watch: false
   },
   cardWidth: {
     type: [String, Number],
@@ -16055,14 +16097,15 @@ const ZdLoginProps$1 = buildProps({
   },
   socialLogin: {
     type: Array,
-    default: () => []
+    default: () => [],
+    watch: false
   }
 });
 const loginComponent = defineComponent({
   props: ZdLoginProps$1,
   inheritAttrs: false,
   setup(props, ctx) {
-    const { instance, root: root2 } = useCreateInstance(props, ctx, Login);
+    const { instance, root: root2 } = useCreateInstance(props, ctx, Login, ZdLoginProps$1);
     return {
       instance,
       root: root2
@@ -16084,7 +16127,7 @@ const _hoisted_7$1 = {
 };
 const _hoisted_8 = ["src"];
 const _hoisted_9 = ["src"];
-function _sfc_render$A(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$B(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_v_form = resolveComponent("v-form");
   const _component_v_card = resolveComponent("v-card");
   return withDirectives((openBlock(), createElementBlock("div", {
@@ -16190,7 +16233,7 @@ function _sfc_render$A(_ctx, _cache, $props, $setup, $data, $options) {
     [vShow, _ctx.instance.isVisible]
   ]);
 }
-const ZdLogin = /* @__PURE__ */ _export_sfc(loginComponent, [["render", _sfc_render$A]]);
+const ZdLogin = /* @__PURE__ */ _export_sfc(loginComponent, [["render", _sfc_render$B]]);
 const ZdLoginButtonProps$1 = buildProps({
   ...ZdButtonProps,
   authUrl: {
@@ -16206,14 +16249,14 @@ const loginButtonComponent = defineComponent({
   props: ZdLoginButtonProps$1,
   inheritAttrs: false,
   setup(props, ctx) {
-    const { instance, root: root2 } = useCreateInstance(props, ctx, LoginButton);
+    const { instance, root: root2 } = useCreateInstance(props, ctx, LoginButton, ZdLoginButtonProps$1);
     return {
       instance,
       root: root2
     };
   }
 });
-function _sfc_render$z(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$A(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_zd_button = resolveComponent("zd-button");
   return openBlock(), createBlock(_component_zd_button, {
     id: _ctx.instance.name,
@@ -16223,7 +16266,7 @@ function _sfc_render$z(_ctx, _cache, $props, $setup, $data, $options) {
     "instance-object": _ctx.instance
   }, null, 8, ["id", "instance-object"]);
 }
-const ZdLoginButton = /* @__PURE__ */ _export_sfc(loginButtonComponent, [["render", _sfc_render$z]]);
+const ZdLoginButton = /* @__PURE__ */ _export_sfc(loginButtonComponent, [["render", _sfc_render$A]]);
 const ZdMainProps$1 = buildProps({
   ...ZdComponentProps,
   scrollable: {
@@ -16239,7 +16282,7 @@ const mainComponent = defineComponent({
   props: ZdMainProps$1,
   inheritAttrs: false,
   setup(props, ctx) {
-    const { instance, root: root2 } = useCreateInstance(props, ctx, Main);
+    const { instance, root: root2 } = useCreateInstance(props, ctx, Main, ZdMainProps$1);
     const { click, focus, blur, mouseenter, mouseleave } = useGetMethods(instance, root2);
     return {
       instance,
@@ -16252,7 +16295,7 @@ const mainComponent = defineComponent({
     };
   }
 });
-function _sfc_render$y(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$z(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_v_main = resolveComponent("v-main");
   return openBlock(), createBlock(_component_v_main, {
     name: _ctx.instance.name,
@@ -16270,7 +16313,7 @@ function _sfc_render$y(_ctx, _cache, $props, $setup, $data, $options) {
     _: 1
   }, 8, ["name", "scrollable", "style"]);
 }
-const ZdMain = /* @__PURE__ */ _export_sfc(mainComponent, [["render", _sfc_render$y]]);
+const ZdMain = /* @__PURE__ */ _export_sfc(mainComponent, [["render", _sfc_render$z]]);
 const ZdMasterDetailProps$1 = buildProps({
   ...ZdComponentRenderProps,
   config: {
@@ -16302,7 +16345,7 @@ const masterDetailComponent = defineComponent({
   props: ZdMasterDetailProps$1,
   inheritAttrs: false,
   setup(props, ctx) {
-    const { instance, root: root2 } = useCreateInstance(props, ctx, MasterDetail);
+    const { instance, root: root2 } = useCreateInstance(props, ctx, MasterDetail, ZdMasterDetailProps$1);
     const { click, mouseenter, mouseleave } = useGetMethods(instance, root2);
     return {
       instance,
@@ -16314,7 +16357,7 @@ const masterDetailComponent = defineComponent({
   }
 });
 const _hoisted_1$d = ["id"];
-function _sfc_render$x(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$y(_ctx, _cache, $props, $setup, $data, $options) {
   return withDirectives((openBlock(), createElementBlock("div", {
     ref: "root",
     id: _ctx.instance.name,
@@ -16340,7 +16383,7 @@ function _sfc_render$x(_ctx, _cache, $props, $setup, $data, $options) {
     [vShow, _ctx.instance.isVisible]
   ]);
 }
-const ZdMasterDetail = /* @__PURE__ */ _export_sfc(masterDetailComponent, [["render", _sfc_render$x]]);
+const ZdMasterDetail = /* @__PURE__ */ _export_sfc(masterDetailComponent, [["render", _sfc_render$y]]);
 var FUNC_ERROR_TEXT = "Expected a function";
 var NAN = 0 / 0;
 var symbolTag = "[object Symbol]";
@@ -16508,7 +16551,7 @@ const ZdMenuProps$1 = buildProps({
   },
   miniWidth: {
     type: [Number, String],
-    default: 58
+    default: 50
   },
   temporary: {
     type: [Boolean, String],
@@ -16536,7 +16579,8 @@ const ZdMenuProps$1 = buildProps({
   },
   topSlot: {
     type: Array,
-    default: () => []
+    default: () => [],
+    watch: false
   },
   width: {
     type: [Number, String],
@@ -16552,7 +16596,8 @@ const ZdMenuProps$1 = buildProps({
   },
   items: {
     type: Array,
-    default: () => []
+    default: () => [],
+    watch: false
   },
   // Zeedhi 3.x
   permanent: {
@@ -16564,9 +16609,10 @@ const menuComponent = defineComponent({
   props: ZdMenuProps$1,
   inheritAttrs: false,
   setup(props, ctx) {
-    const { instance, root: root2 } = useCreateInstance(props, ctx, Menu);
+    const { instance, root: root2 } = useCreateInstance(props, ctx, Menu, ZdMenuProps$1);
     const { click, focus, blur, mouseenter, mouseleave } = useGetMethods(instance, root2);
     const { mobile } = useDisplay();
+    const menuTheme = computed(() => instance.theme);
     const checkMiniVariant = () => {
       return !!(!instance.opened && instance.mini || instance.miniState && !instance.mouseOver && instance.miniState && !mobile || instance.miniState && instance.mini);
     };
@@ -16726,6 +16772,7 @@ const menuComponent = defineComponent({
       mouseleave,
       searchInputProps,
       navigationKeyMapping,
+      menuTheme,
       // methods
       checkMiniVariant,
       showSlotOnHover
@@ -16737,7 +16784,7 @@ const _hoisted_2$6 = {
   key: 0,
   class: "zd-menu-top-slot"
 };
-function _sfc_render$w(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$x(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_v_tooltip = resolveComponent("v-tooltip");
   const _component_zd_text_input = resolveComponent("zd-text-input");
   const _component_v_list = resolveComponent("v-list");
@@ -16753,7 +16800,7 @@ function _sfc_render$w(_ctx, _cache, $props, $setup, $data, $options) {
       "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => _ctx.instance.showTooltip = $event),
       attach: _ctx.instance.tooltipAnchor,
       "content-props": _ctx.instance.tooltipContentProps,
-      theme: _ctx.instance.theme,
+      theme: _ctx.menuTheme,
       location: "end",
       class: "zd-menu-tooltip"
     }, {
@@ -16778,9 +16825,9 @@ function _sfc_render$w(_ctx, _cache, $props, $setup, $data, $options) {
       width: _ctx.instance.width,
       absolute: !!_ctx.instance.absolute,
       rail: _ctx.instance.miniState,
-      theme: _ctx.instance.theme,
+      theme: _ctx.menuTheme,
       "rail-width": _ctx.instance.miniWidth,
-      "expand-on-hover": true,
+      "expand-on-hover": !_ctx.instance.mini,
       permanent: !!_ctx.instance.permanent,
       "disable-route-watcher": _ctx.instance.disableRouteWatcher
     }), {
@@ -16789,7 +16836,7 @@ function _sfc_render$w(_ctx, _cache, $props, $setup, $data, $options) {
           nav: "",
           dense: _ctx.instance.dense,
           expand: "",
-          theme: _ctx.instance.theme
+          theme: _ctx.menuTheme
         }, {
           default: withCtx(() => [
             _ctx.instance.topSlot.length || _ctx.instance.showSearch || !!_ctx.$slots.topSlot ? withDirectives((openBlock(), createElementBlock("span", _hoisted_2$6, [
@@ -16823,7 +16870,7 @@ function _sfc_render$w(_ctx, _cache, $props, $setup, $data, $options) {
     [vShow, _ctx.instance.isVisible]
   ]);
 }
-const ZdMenu = /* @__PURE__ */ _export_sfc(menuComponent, [["render", _sfc_render$w]]);
+const ZdMenu = /* @__PURE__ */ _export_sfc(menuComponent, [["render", _sfc_render$x]]);
 const ZdMenuButtonProps$1 = buildProps({
   ...ZdButtonProps,
   menuName: {
@@ -16847,7 +16894,7 @@ const menuButtonComponent = defineComponent({
   props: ZdMenuButtonProps$1,
   inheritAttrs: false,
   setup(props, ctx) {
-    const { instance, root: root2 } = useCreateInstance(props, ctx, MenuButton);
+    const { instance, root: root2 } = useCreateInstance(props, ctx, MenuButton, ZdMenuButtonProps$1);
     const { click, focus, blur, mouseenter, mouseleave } = useGetMethods(instance, root2);
     return {
       instance,
@@ -16860,7 +16907,7 @@ const menuButtonComponent = defineComponent({
     };
   }
 });
-function _sfc_render$v(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$w(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_zd_button = resolveComponent("zd-button");
   return openBlock(), createBlock(_component_zd_button, {
     id: _ctx.instance.name,
@@ -16870,7 +16917,7 @@ function _sfc_render$v(_ctx, _cache, $props, $setup, $data, $options) {
     name: "menu-button"
   }, null, 8, ["id", "instance-object"]);
 }
-const ZdMenuButton = /* @__PURE__ */ _export_sfc(menuButtonComponent, [["render", _sfc_render$v]]);
+const ZdMenuButton = /* @__PURE__ */ _export_sfc(menuButtonComponent, [["render", _sfc_render$w]]);
 const ZdMenuProps = buildProps({
   ...ZdComponentRenderProps,
   app: {
@@ -16911,7 +16958,7 @@ const ZdMenuProps = buildProps({
   },
   miniWidth: {
     type: [Number, String],
-    default: 58
+    default: 50
   },
   temporary: {
     type: [Boolean, String],
@@ -16939,7 +16986,8 @@ const ZdMenuProps = buildProps({
   },
   topSlot: {
     type: Array,
-    default: () => []
+    default: () => [],
+    watch: false
   },
   width: {
     type: [Number, String],
@@ -16955,7 +17003,8 @@ const ZdMenuProps = buildProps({
   },
   items: {
     type: Array,
-    default: () => []
+    default: () => [],
+    watch: false
   },
   // Zeedhi 3.x
   permanent: {
@@ -16986,9 +17035,10 @@ defineComponent({
   props: ZdMenuProps,
   inheritAttrs: false,
   setup(props, ctx) {
-    const { instance, root: root2 } = useCreateInstance(props, ctx, Menu);
+    const { instance, root: root2 } = useCreateInstance(props, ctx, Menu, ZdMenuProps);
     const { click, focus, blur, mouseenter, mouseleave } = useGetMethods(instance, root2);
     const { mobile } = useDisplay();
+    const menuTheme = computed(() => instance.theme);
     const checkMiniVariant = () => {
       return !!(!instance.opened && instance.mini || instance.miniState && !instance.mouseOver && instance.miniState && !mobile || instance.miniState && instance.mini);
     };
@@ -17148,6 +17198,7 @@ defineComponent({
       mouseleave,
       searchInputProps,
       navigationKeyMapping,
+      menuTheme,
       // methods
       checkMiniVariant,
       showSlotOnHover
@@ -17170,7 +17221,8 @@ const ZdMenuGroupProps$1 = buildProps({
   },
   items: {
     type: Array,
-    default: () => []
+    default: () => [],
+    watch: false
   },
   menuLevel: {
     type: Number,
@@ -17194,7 +17246,7 @@ const menuGroupComponent = defineComponent({
   props: ZdMenuGroupProps$1,
   inheritAttrs: false,
   setup(props, ctx) {
-    const { instance, root: root2 } = useCreateInstance(props, ctx, MenuGroup);
+    const { instance, root: root2 } = useCreateInstance(props, ctx, MenuGroup, ZdMenuGroupProps$1);
     const { click, focus, blur, mouseenter, mouseleave } = useGetMethods(instance, root2);
     const mouseEnter = () => {
       const rootElement = getRootElement(root2);
@@ -17213,7 +17265,7 @@ const menuGroupComponent = defineComponent({
     };
   }
 });
-function _sfc_render$u(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$v(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_v_list_item = resolveComponent("v-list-item");
   const _component_v_list_group = resolveComponent("v-list-group");
   return withDirectives((openBlock(), createBlock(_component_v_list_group, {
@@ -17258,7 +17310,7 @@ function _sfc_render$u(_ctx, _cache, $props, $setup, $data, $options) {
     [vShow, _ctx.instance.isVisible && !(_ctx.miniVariant && _ctx.menuLevel !== 1)]
   ]);
 }
-const ZdMenuGroup = /* @__PURE__ */ _export_sfc(menuGroupComponent, [["render", _sfc_render$u]]);
+const ZdMenuGroup = /* @__PURE__ */ _export_sfc(menuGroupComponent, [["render", _sfc_render$v]]);
 const ZdMenuLinkProps$1 = buildProps({
   ...ZdComponentRenderProps,
   route: {
@@ -17291,7 +17343,7 @@ const menuLinkComponent = defineComponent({
   props: ZdMenuLinkProps$1,
   inheritAttrs: false,
   setup(props, ctx) {
-    const { instance, root: root2 } = useCreateInstance(props, ctx, MenuLink);
+    const { instance, root: root2 } = useCreateInstance(props, ctx, MenuLink, ZdMenuLinkProps$1);
     const { click, focus, blur, mouseenter, mouseleave } = useGetMethods(instance, root2);
     const mouseEnter = () => {
       const rootElement = getRootElement(root2);
@@ -17314,7 +17366,7 @@ const menuLinkComponent = defineComponent({
     };
   }
 });
-function _sfc_render$t(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$u(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_v_list_item = resolveComponent("v-list-item");
   return withDirectives((openBlock(), createBlock(_component_v_list_item, {
     id: _ctx.instance.name,
@@ -17335,7 +17387,7 @@ function _sfc_render$t(_ctx, _cache, $props, $setup, $data, $options) {
     [vShow, _ctx.instance.isVisible && !(_ctx.miniVariant && _ctx.menuLevel !== 1)]
   ]);
 }
-const ZdMenuLink = /* @__PURE__ */ _export_sfc(menuLinkComponent, [["render", _sfc_render$t]]);
+const ZdMenuLink = /* @__PURE__ */ _export_sfc(menuLinkComponent, [["render", _sfc_render$u]]);
 const ZdMenuSeparatorProps$1 = buildProps({
   ...ZdComponentRenderProps
 });
@@ -17343,7 +17395,7 @@ const menuSeparatorComponent = defineComponent({
   props: ZdMenuSeparatorProps$1,
   inheritAttrs: false,
   setup(props, ctx) {
-    const { instance, root: root2 } = useCreateInstance(props, ctx, MenuSeparator);
+    const { instance, root: root2 } = useCreateInstance(props, ctx, MenuSeparator, ZdMenuSeparatorProps$1);
     const { click, focus, blur, mouseenter, mouseleave } = useGetMethods(instance, root2);
     return {
       instance,
@@ -17356,7 +17408,7 @@ const menuSeparatorComponent = defineComponent({
     };
   }
 });
-function _sfc_render$s(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$t(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_v_divider = resolveComponent("v-divider");
   return withDirectives((openBlock(), createBlock(_component_v_divider, {
     id: _ctx.instance.name,
@@ -17366,8 +17418,8 @@ function _sfc_render$s(_ctx, _cache, $props, $setup, $data, $options) {
     [vShow, _ctx.instance.isVisible]
   ]);
 }
-const ZdMenuSeparator = /* @__PURE__ */ _export_sfc(menuSeparatorComponent, [["render", _sfc_render$s]]);
-const _sfc_main$7 = defineComponent({
+const ZdMenuSeparator = /* @__PURE__ */ _export_sfc(menuSeparatorComponent, [["render", _sfc_render$t]]);
+const _sfc_main$8 = defineComponent({
   inheritAttrs: false,
   setup() {
     ModalService.modals = reactive([]);
@@ -17377,10 +17429,6 @@ const _sfc_main$7 = defineComponent({
     let modalDragged;
     let elDragged = null;
     let dragHandle = null;
-    const getGridClasses = (grid) => Object.keys(grid).reduce((previous, key) => `${previous} zd-col-${key}-${grid[key]}`, "");
-    const getSizeClass = (modal) => {
-      return !modal.fullscreen ? getGridClasses(modal.grid) : "";
-    };
     const initializeModalPosition = (modalEl) => {
       const rect = modalEl.getBoundingClientRect();
       const computedStyle = window.getComputedStyle(modalEl);
@@ -17393,8 +17441,8 @@ const _sfc_main$7 = defineComponent({
       var _a;
       if (!modal) return;
       const dragHandleClass = (_a = modal.dragHandle) == null ? void 0 : _a.replace(".", "");
-      const targetElement = event.target;
-      if (dragHandleClass && !targetElement.classList.contains(dragHandleClass)) {
+      const targetElement2 = event.target;
+      if (dragHandleClass && !targetElement2.classList.contains(dragHandleClass)) {
         return;
       }
       const modalEl = el.parentElement;
@@ -17450,16 +17498,6 @@ const _sfc_main$7 = defineComponent({
         y: event.clientY
       };
     };
-    const getContentClass = (modal) => {
-      const classes = [
-        "zd-modal-content",
-        getSizeClass(modal),
-        modal.cssClass,
-        modal.draggable ? "zd-modal-draggable" : "",
-        modal.draggable && !modal.dragHandle ? "zd-modal-draggable-handle" : ""
-      ];
-      return classes.join(" ");
-    };
     const registerDragEvents = (modal, el) => {
       if (!el || !(el instanceof HTMLElement)) return;
       dragHandle = modal.dragHandle ? el.querySelector(modal.dragHandle) : el;
@@ -17474,8 +17512,6 @@ const _sfc_main$7 = defineComponent({
     };
     return {
       modals,
-      dragStart: dragStart2,
-      getContentClass,
       registerDragEvents,
       unregisterDragEvents
     };
@@ -17485,12 +17521,8 @@ const _hoisted_1$b = {
   class: "zd-modal",
   ref: "root"
 };
-function _sfc_render$r(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_v_card_title = resolveComponent("v-card-title");
-  const _component_v_layout = resolveComponent("v-layout");
-  const _component_v_container = resolveComponent("v-container");
-  const _component_v_card_text = resolveComponent("v-card-text");
-  const _component_v_card = resolveComponent("v-card");
+function _sfc_render$s(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_zd_modal_card = resolveComponent("zd-modal-card");
   const _component_v_dialog = resolveComponent("v-dialog");
   return openBlock(), createElementBlock("div", _hoisted_1$b, [
     (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.modals, (modal) => {
@@ -17505,66 +17537,182 @@ function _sfc_render$r(_ctx, _cache, $props, $setup, $data, $options) {
         theme: modal.theme
       }, {
         default: withCtx(() => [
-          createVNode(_component_v_card, {
-            class: normalizeClass([
-              "zd-modal-card",
-              "zd-modal-card-" + modal.name,
-              "zd-display-flex",
-              "zd-flex-column",
-              modal.cssClass,
-              _ctx.getContentClass(modal)
-            ]),
-            style: normalizeStyle(modal.cssStyle),
-            ref_for: true,
-            ref: "modalRef",
-            onVnodeMounted: ($event) => modal.draggable && _ctx.registerDragEvents(modal, $event.el),
-            onVnodeDestroyed: ($event) => _ctx.unregisterDragEvents(modal, $event.el)
+          createVNode(_component_zd_modal_card, {
+            name: modal.name,
+            title: modal.title,
+            children: modal.children,
+            "css-class": modal.cssClass,
+            "css-style": modal.cssStyle,
+            fullscreen: modal.fullscreen,
+            grid: modal.grid,
+            draggable: modal.draggable,
+            "drag-handle": modal.dragHandle,
+            parent: modal,
+            "register-drag-events": _ctx.registerDragEvents,
+            "unregister-drag-events": _ctx.unregisterDragEvents
           }, {
             default: withCtx(() => [
-              modal.title ? (openBlock(), createBlock(_component_v_card_title, {
-                key: 0,
-                class: "zd-theme-font-title zd-modal-title"
-              }, {
-                default: withCtx(() => [
-                  createTextVNode(toDisplayString(_ctx.$t(modal.title)), 1)
-                ]),
-                _: 2
-              }, 1024)) : createCommentVNode("", true),
-              createVNode(_component_v_card_text, { class: "zd-modal-card-text" }, {
-                default: withCtx(() => [
-                  createVNode(_component_v_container, {
-                    fluid: "",
-                    class: "zd-modal-container"
-                  }, {
-                    default: withCtx(() => [
-                      createVNode(_component_v_layout, { style: { "flex-direction": "column" } }, {
-                        default: withCtx(() => [
-                          (openBlock(true), createElementBlock(Fragment, null, renderList(modal.children, (child) => {
-                            return openBlock(), createBlock(resolveDynamicComponent(child.component), mergeProps({ ref_for: true }, child, {
-                              key: child.name,
-                              parent: modal
-                            }), null, 16, ["parent"]);
-                          }), 128)),
-                          renderSlot(_ctx.$slots, "default")
-                        ]),
-                        _: 2
-                      }, 1024)
-                    ]),
-                    _: 2
-                  }, 1024)
-                ]),
-                _: 2
-              }, 1024)
+              renderSlot(_ctx.$slots, "default")
             ]),
-            _: 2
-          }, 1032, ["class", "style", "onVnodeMounted", "onVnodeDestroyed"])
+            _: 3
+          }, 8, ["name", "title", "children", "css-class", "css-style", "fullscreen", "grid", "draggable", "drag-handle", "parent", "register-drag-events", "unregister-drag-events"])
         ]),
         _: 2
       }, 1032, ["modelValue", "onUpdate:modelValue", "id", "persistent", "fullscreen", "theme"]);
     }), 128))
   ], 512);
 }
-const ZdModal = /* @__PURE__ */ _export_sfc(_sfc_main$7, [["render", _sfc_render$r]]);
+const ZdModal = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["render", _sfc_render$s]]);
+const _sfc_main$7 = defineComponent({
+  inheritAttrs: false,
+  props: {
+    name: {
+      type: String,
+      required: true
+    },
+    title: {
+      type: String,
+      required: false
+    },
+    children: {
+      type: Array,
+      required: false,
+      default: () => []
+    },
+    cssClass: {
+      type: String,
+      required: false,
+      default: ""
+    },
+    cssStyle: {
+      type: String,
+      required: false,
+      default: ""
+    },
+    fullscreen: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    grid: {
+      type: Object,
+      required: false,
+      default: () => ({})
+    },
+    draggable: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    dragHandle: {
+      type: String,
+      required: false
+    },
+    parent: {
+      type: Object,
+      required: false
+    },
+    registerDragEvents: {
+      type: Function,
+      required: false
+    },
+    unregisterDragEvents: {
+      type: Function,
+      required: false
+    }
+  },
+  setup(props) {
+    const getGridClasses = (grid) => Object.keys(grid).reduce((previous, key) => `${previous} zd-col-${key}-${grid[key]}`, "");
+    const getSizeClass = () => {
+      return !props.fullscreen ? getGridClasses(props.grid) : "";
+    };
+    const getContentClass = () => {
+      const classes = [
+        getSizeClass(),
+        props.cssClass,
+        props.draggable ? "zd-modal-draggable" : "",
+        props.draggable && !props.dragHandle ? "zd-modal-draggable-handle" : ""
+      ];
+      return classes.join(" ");
+    };
+    const handleMounted = (modal, el) => {
+      modal.onMounted(el);
+      if (props.draggable && props.registerDragEvents) {
+        props.registerDragEvents(modal, el);
+      }
+    };
+    const handleDestroyed = (modal, el) => {
+      if (props.draggable && props.unregisterDragEvents) {
+        props.unregisterDragEvents(modal, el);
+      }
+    };
+    return {
+      getContentClass,
+      handleMounted,
+      handleDestroyed
+    };
+  }
+});
+function _sfc_render$r(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_v_card_title = resolveComponent("v-card-title");
+  const _component_v_layout = resolveComponent("v-layout");
+  const _component_v_container = resolveComponent("v-container");
+  const _component_v_card_text = resolveComponent("v-card-text");
+  const _component_v_card = resolveComponent("v-card");
+  return openBlock(), createBlock(_component_v_card, {
+    class: normalizeClass([
+      "zd-modal-card",
+      "zd-modal-card-" + _ctx.name,
+      "zd-display-flex",
+      "zd-flex-column",
+      _ctx.cssClass,
+      _ctx.getContentClass()
+    ]),
+    style: normalizeStyle(_ctx.cssStyle),
+    ref: "root",
+    onVnodeMounted: _cache[0] || (_cache[0] = ($event) => _ctx.parent && _ctx.handleMounted(_ctx.parent, $event.el)),
+    onVnodeDestroyed: _cache[1] || (_cache[1] = ($event) => _ctx.parent && _ctx.handleDestroyed(_ctx.parent, $event.el))
+  }, {
+    default: withCtx(() => [
+      _ctx.title ? (openBlock(), createBlock(_component_v_card_title, {
+        key: 0,
+        class: "zd-theme-font-title zd-modal-title"
+      }, {
+        default: withCtx(() => [
+          createTextVNode(toDisplayString(_ctx.$t(_ctx.title)), 1)
+        ]),
+        _: 1
+      })) : createCommentVNode("", true),
+      createVNode(_component_v_card_text, { class: "zd-modal-card-text" }, {
+        default: withCtx(() => [
+          createVNode(_component_v_container, {
+            fluid: "",
+            class: "zd-modal-container"
+          }, {
+            default: withCtx(() => [
+              createVNode(_component_v_layout, { style: { "flex-direction": "column" } }, {
+                default: withCtx(() => [
+                  (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.children, (child) => {
+                    return openBlock(), createBlock(resolveDynamicComponent(child.component), mergeProps({ ref_for: true }, child, {
+                      key: child.name,
+                      parent: _ctx.parent
+                    }), null, 16, ["parent"]);
+                  }), 128)),
+                  renderSlot(_ctx.$slots, "default")
+                ]),
+                _: 3
+              })
+            ]),
+            _: 3
+          })
+        ]),
+        _: 3
+      })
+    ]),
+    _: 3
+  }, 8, ["class", "style"]);
+}
+const ZdModalCard = /* @__PURE__ */ _export_sfc(_sfc_main$7, [["render", _sfc_render$r]]);
 const ZdModalCloseButtonProps$1 = buildProps({
   ...ZdButtonProps,
   modalName: {
@@ -17588,7 +17736,7 @@ const modalCloseButton = defineComponent({
   props: ZdModalCloseButtonProps$1,
   inheritAttrs: false,
   setup(props, ctx) {
-    const { instance, root: root2 } = useCreateInstance(props, ctx, ModalCloseButton);
+    const { instance, root: root2 } = useCreateInstance(props, ctx, ModalCloseButton, ZdModalCloseButtonProps$1);
     return {
       instance,
       root: root2
@@ -17698,7 +17846,7 @@ defineComponent({
   props: ZdDateInputProps,
   inheritAttrs: false,
   setup(props, ctx) {
-    const { instance, root: root2 } = useCreateInputInstance(props, ctx, DateInput);
+    const { instance, root: root2 } = useCreateInputInstance(props, ctx, DateInput, ZdDateInputProps);
     const textInputScope = useTextInput$1(instance, ctx, root2);
     const picker = ref(null);
     const { isMobile } = useIsMobile();
@@ -17785,7 +17933,7 @@ const _sfc_main$6 = defineComponent({
   props: ZdMonthProps$1,
   inheritAttrs: false,
   setup(props, ctx) {
-    const { instance, root: root2 } = useCreateInstance(props, ctx, Month);
+    const { instance, root: root2 } = useCreateInstance(props, ctx, Month, ZdMonthProps$1);
     watch(
       () => instance.viewMode,
       () => {
@@ -17829,7 +17977,7 @@ const numberInputComponent = defineComponent({
   props: ZdNumberInputProps,
   inheritAttrs: false,
   setup(props, ctx) {
-    const { instance, root: root2 } = useCreateInstance(props, ctx, NumberInput);
+    const { instance, root: root2 } = useCreateInstance(props, ctx, NumberInput, ZdNumberInputProps);
     const autoNumericInit = ref(false);
     onMounted(() => {
       var _a;
@@ -17912,7 +18060,7 @@ const passwordComponent = defineComponent({
   props: ZdPasswordProps$1,
   inheritAttrs: false,
   setup(props, ctx) {
-    const { instance, root: root2 } = useCreateInstance(props, ctx, Password);
+    const { instance, root: root2 } = useCreateInstance(props, ctx, Password, ZdPasswordProps$1);
     return {
       instance,
       root: root2
@@ -17953,7 +18101,8 @@ const ZdProgressProps$1 = buildProps({
   },
   centerSlot: {
     type: [Array, String],
-    default: () => []
+    default: () => [],
+    watch: false
   },
   value: {
     type: [Number, String],
@@ -17964,7 +18113,7 @@ const progressComponent = defineComponent({
   props: ZdProgressProps$1,
   inheritAttrs: false,
   setup(props, ctx) {
-    const { instance, root: root2 } = useCreateInstance(props, ctx, Progress);
+    const { instance, root: root2 } = useCreateInstance(props, ctx, Progress, ZdProgressProps$1);
     const { click, mouseenter, mouseleave } = useGetMethods(instance, root2);
     return {
       instance,
@@ -18023,7 +18172,8 @@ const ZdRadioProps$1 = buildProps({
     type: Object,
     defaut() {
       return {};
-    }
+    },
+    watch: false
   },
   dataValue: {
     type: String,
@@ -18038,7 +18188,7 @@ const radioComponent = defineComponent({
   props: ZdRadioProps$1,
   inheritAttrs: false,
   setup(props, ctx) {
-    const { instance, root: root2 } = useCreateInstance(props, ctx, Radio);
+    const { instance, root: root2 } = useCreateInstance(props, ctx, Radio, ZdRadioProps$1);
     const radioScope = useRadio$1(instance, ctx, root2);
     return {
       ...radioScope
@@ -18133,7 +18283,7 @@ const rowComponent = defineComponent({
   props: ZdRowProps$1,
   inheritAttrs: false,
   setup(props, ctx) {
-    const { instance, root: root2 } = useCreateInstance(props, ctx, Row);
+    const { instance, root: root2 } = useCreateInstance(props, ctx, Row, ZdRowProps$1);
     const { click, focus, blur, mouseenter, mouseleave } = useGetMethods(instance, root2);
     return {
       instance,
@@ -18209,7 +18359,12 @@ const selectMultipleComponent = defineComponent({
   props: ZdSelectMultipleProps$1,
   inheritAttrs: false,
   setup(props, ctx) {
-    const { instance, root: root2 } = useCreateInputInstance(props, ctx, SelectMultiple);
+    const { instance, root: root2 } = useCreateInputInstance(
+      props,
+      ctx,
+      SelectMultiple,
+      ZdSelectMultipleProps$1
+    );
     const selectScope = useSelect$1(instance, ctx, root2);
     const element = ref();
     const checkboxItem = ref([]);
@@ -18307,7 +18462,7 @@ const selectMultipleComponent = defineComponent({
         instance.onSelectAll(!allSelected.value, event, instance.value);
       });
     };
-    const checkOverflow = () => {
+    const checkOverflow2 = () => {
       const chips = getChips();
       if (chips.length > 0) {
         const firstChip = chips[0];
@@ -18373,7 +18528,7 @@ const selectMultipleComponent = defineComponent({
       expandedMode.value = true;
       nextTick(() => {
         expandedMode.value = false;
-        if (!checkOverflow()) {
+        if (!checkOverflow2()) {
           calcDisplay(true);
         }
       });
@@ -18417,7 +18572,7 @@ const selectMultipleComponent = defineComponent({
       if (!instance.limit && rows !== 1) {
         rows = 1;
         calcDisplay();
-        nextTick(() => checkOverflow());
+        nextTick(() => checkOverflow2());
       } else {
         refreshDisplay();
       }
@@ -18526,7 +18681,7 @@ function _sfc_render$j(_ctx, _cache, $props, $setup, $data, $options) {
         "zd-select-multiple",
         {
           "zd-no-label": !_ctx.instance.showLabel,
-          "zd-no-helper": !_ctx.instance.showHelper && !(_ctx.instance.alwaysShowError && _ctx.$refs.root && _ctx.$refs.root.errorBucket.length),
+          "zd-no-helper": !_ctx.instance.showHelper && !(_ctx.instance.alwaysShowError && _ctx.$refs.root && _ctx.$refs.root.errorMessages.length),
           "zd-no-border": !_ctx.instance.showBorder,
           "zd-dense": _ctx.instance.dense,
           "zd-select-multiple-autocomplete": _ctx.instance.autocomplete,
@@ -18809,7 +18964,8 @@ const ZdSelectProps = buildProps({
   },
   datasource: {
     type: Object,
-    default: () => ({})
+    default: () => ({}),
+    watch: false
   },
   value: {
     type: [String, Number, Object],
@@ -18825,11 +18981,13 @@ const ZdSelectProps = buildProps({
   },
   itemAfterSlot: {
     type: Array,
-    default: () => []
+    default: () => [],
+    watch: false
   },
   itemBeforeSlot: {
     type: Array,
-    default: () => []
+    default: () => [],
+    watch: false
   },
   manualMode: {
     type: [Boolean, String],
@@ -18853,7 +19011,12 @@ const selectComponent = defineComponent({
   props: ZdSelectProps,
   inheritAttrs: false,
   setup(props, ctx) {
-    const { instance, root: root2 } = useCreateInputInstance(props, ctx, Select);
+    const { instance, root: root2 } = useCreateInputInstance(
+      props,
+      ctx,
+      Select,
+      ZdSelectProps
+    );
     const selectScope = useSelect(instance, ctx, root2);
     return {
       ...selectScope
@@ -18868,7 +19031,7 @@ function useSelect(instance, ctx, root2) {
   const hasItemBeforeSlot = !!slots.itemBeforeSlot;
   const hasItemAfterSlot = !!slots.itemAfterSlot;
   const items = computed(() => {
-    const data2 = instance.items;
+    const data2 = instance.items || [];
     const disabledValues = instance.disabledItems.map((item) => {
       if (item && typeof item === "object") {
         return item[instance.dataValue];
@@ -18891,11 +19054,11 @@ function useSelect(instance, ctx, root2) {
     if (!instance.dataTextDiscrete) {
       return formattedDataText(item);
     }
-    const text = selectFormatterFn(item, {
+    const text2 = selectFormatterFn(item, {
       dataText: instance.dataTextDiscrete,
       dataTextSeparator: instance.dataTextSeparator
     });
-    return text;
+    return text2;
   };
   const selectChange = (value) => {
     const rootElement = getRootElement(root2);
@@ -18966,7 +19129,7 @@ function _sfc_render$i(_ctx, _cache, $props, $setup, $data, $options) {
       "zd-text-input",
       {
         "zd-no-label": !_ctx.instance.showLabel,
-        "zd-no-helper": !_ctx.instance.showHelper && !(_ctx.instance.alwaysShowError && _ctx.$refs.instance && _ctx.$refs.instance.errorBucket.length),
+        "zd-no-helper": !_ctx.instance.showHelper && !(_ctx.instance.alwaysShowError && _ctx.$refs.root && _ctx.$refs.root.errorMessages.length),
         "zd-no-border": !_ctx.instance.showBorder,
         "zd-dense": _ctx.instance.dense,
         "zd-select-autocomplete": _ctx.instance.autocomplete,
@@ -19159,7 +19322,7 @@ const _sfc_main$5 = defineComponent({
   inheritAttrs: false,
   setup(props, ctx) {
     const container = ref(null);
-    const { instance, root: root2 } = useCreateInputInstance(props, ctx, SvgMap);
+    const { instance, root: root2 } = useCreateInputInstance(props, ctx, SvgMap, ZdSvgMapProps$1);
     const componentScope = useGetMethods(instance, root2);
     const theme = useTheme();
     const showTooltip = ref(false);
@@ -19388,7 +19551,7 @@ const switchComponent = defineComponent({
   props: ZdSwitchProps$1,
   inheritAttrs: false,
   setup(props, ctx) {
-    const { instance, root: root2 } = useCreateInstance(props, ctx, Switch);
+    const { instance, root: root2 } = useCreateInstance(props, ctx, Switch, ZdSwitchProps$1);
     const { click, focus, blur, mouseenter, mouseleave } = useGetMethods(instance, root2);
     const switchChange = (value) => {
       const rootElement = getRootElement(root2);
@@ -19474,7 +19637,7 @@ const tableComponent = defineComponent({
   props: ZdTableProps$1,
   inheritAttrs: false,
   setup(props, ctx) {
-    const { instance, root: root2 } = useCreateInstance(props, ctx, Table);
+    const { instance, root: root2 } = useCreateInstance(props, ctx, Table, ZdTableProps$1);
     const { click, focus, blur, mouseenter, mouseleave } = useGetMethods(instance, root2);
     return {
       instance,
@@ -19606,7 +19769,7 @@ const tabComponent = defineComponent({
   props: ZdTabProps$1,
   inheritAttrs: false,
   setup(props, ctx) {
-    const { instance, root: root2 } = useCreateInstance(props, ctx, Tab);
+    const { instance, root: root2 } = useCreateInstance(props, ctx, Tab, ZdTabProps$1);
     const { density } = useDensity({ instance });
     const { click, focus, blur, mouseenter, mouseleave } = useGetMethods(instance, root2);
     const clickTab = (event) => {
@@ -19712,7 +19875,8 @@ const ZdTabsProps$1 = buildProps({
   },
   tabs: {
     type: [Array],
-    default: () => []
+    default: () => [],
+    watch: false
   },
   color: {
     type: [String],
@@ -19746,12 +19910,12 @@ const tabsComponent = defineComponent({
   props: ZdTabsProps$1,
   inheritAttrs: false,
   setup(props, ctx) {
-    const { instance, root: root2 } = useCreateInstance(props, ctx, Tabs);
+    const { instance, root: root2 } = useCreateInstance(props, ctx, Tabs, ZdTabsProps$1);
     const { density } = useDensity({ instance });
     const { click, focus, blur, mouseenter, mouseleave } = useGetMethods(instance, root2);
-    const change = (event) => {
+    const change = () => {
       const rootElement = getRootElement(root2);
-      instance.change(event, rootElement.value);
+      instance.change(new Event("change"), rootElement.value);
     };
     const keydown = (event, index2) => {
       const rootElement = getRootElement(root2);
@@ -19795,9 +19959,11 @@ function _sfc_render$c(_ctx, _cache, $props, $setup, $data, $options) {
   }, [
     createVNode(_component_v_tabs, {
       modelValue: _ctx.instance.activeTab,
-      "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => _ctx.instance.activeTab = $event),
+      "onUpdate:modelValue": [
+        _cache[0] || (_cache[0] = ($event) => _ctx.instance.activeTab = $event),
+        _ctx.change
+      ],
       "show-arrows": "",
-      onChange: _cache[1] || (_cache[1] = ($event) => _ctx.change($event)),
       theme: _ctx.instance.theme,
       color: _ctx.instance.color,
       "bg-color": _ctx.instance.backgroudColor,
@@ -19823,10 +19989,10 @@ function _sfc_render$c(_ctx, _cache, $props, $setup, $data, $options) {
         }), 128))
       ]),
       _: 1
-    }, 8, ["modelValue", "theme", "color", "bg-color", "density", "direction", "disabled", "grow", "max"]),
+    }, 8, ["modelValue", "onUpdate:modelValue", "theme", "color", "bg-color", "density", "direction", "disabled", "grow", "max"]),
     createVNode(_component_v_window, {
       modelValue: _ctx.instance.activeTab,
-      "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => _ctx.instance.activeTab = $event)
+      "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => _ctx.instance.activeTab = $event)
     }, {
       default: withCtx(() => [
         (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.instance.tabs, (tab, index2) => {
@@ -19866,7 +20032,7 @@ const tagComponent = defineComponent({
   props: ZdTagProps$1,
   inheritAttrs: false,
   setup(props, ctx) {
-    const { instance, root: root2 } = useCreateInstance(props, ctx, Tag);
+    const { instance, root: root2 } = useCreateInstance(props, ctx, Tag, ZdTagProps$1);
     const { click, focus, blur, mouseenter, mouseleave } = useGetMethods(instance, root2);
     return {
       instance,
@@ -19961,7 +20127,7 @@ const textInputComponent = defineComponent({
   props: ZdTextInputProps,
   inheritAttrs: false,
   setup(props, ctx) {
-    const { instance, root: root2 } = useCreateInstance(props, ctx, TextInput);
+    const { instance, root: root2 } = useCreateInstance(props, ctx, TextInput, ZdTextInputProps);
     const textInputScope = useTextInput(instance, ctx, root2);
     const { maskOptions } = useMaska(instance, { disable: props.disableMaska });
     return {
@@ -20087,7 +20253,7 @@ function _sfc_render$a(_ctx, _cache, $props, $setup, $data, $options) {
       {
         "zd-dense": _ctx.instance.dense,
         "zd-no-border": !_ctx.instance.showBorder,
-        "zd-no-helper": !_ctx.instance.showHelper && !(_ctx.instance.alwaysShowError && _ctx.$refs.instance && _ctx.$refs.instance.errorBucket.length),
+        "zd-no-helper": !_ctx.instance.showHelper && !(_ctx.instance.alwaysShowError && _ctx.$refs.root && _ctx.$refs.root.errorMessages.length),
         "zd-no-label": !_ctx.instance.showLabel,
         "zd-text-input--suffix": !!_ctx.instance.suffix,
         "zd-text-input--prepend-icon": !!_ctx.instance.prependIcon && !_ctx.instance.prefix,
@@ -20165,7 +20331,7 @@ const textComponent = defineComponent({
   props: ZdTextProps$1,
   inheritAttrs: false,
   setup(props, ctx) {
-    const { instance, root: root2 } = useCreateInstance(props, ctx, Text);
+    const { instance, root: root2 } = useCreateInstance(props, ctx, Text, ZdTextProps$1);
     const { click, mouseenter, mouseleave } = useGetMethods(instance, root2);
     return {
       instance,
@@ -20254,6 +20420,10 @@ const ZdTextareaProps$1 = buildProps({
     type: [Number, String],
     default: 5
   },
+  maxRows: {
+    type: [Number, String],
+    default: 10
+  },
   height: {
     type: [String, Number],
     default: "auto"
@@ -20267,7 +20437,7 @@ const textareaComponent = defineComponent({
   props: ZdTextareaProps$1,
   inheritAttrs: false,
   setup(props, ctx) {
-    const { instance, root: root2 } = useCreateInstance(props, ctx, Textarea);
+    const { instance, root: root2 } = useCreateInstance(props, ctx, Textarea, ZdTextareaProps$1);
     const { click, mouseenter, mouseleave, focus, blur } = useGetMethods(instance, root2);
     const textInputScope = useTextInput$1(instance, ctx, root2);
     return {
@@ -20298,7 +20468,7 @@ function _sfc_render$8(_ctx, _cache, $props, $setup, $data, $options) {
         "zd-clearable-append-icon": _ctx.instance.clearable && _ctx.instance.appendIcon,
         "zd-clearable": _ctx.instance.clearable,
         "zd-no-border": !_ctx.instance.showBorder,
-        "zd-no-helper": !_ctx.instance.showHelper && !(_ctx.instance.alwaysShowError && _ctx.$refs.instance && _ctx.$refs.instance.errorBucket.length),
+        "zd-no-helper": !_ctx.instance.showHelper && !(_ctx.instance.alwaysShowError && _ctx.$refs.root && _ctx.$refs.root.errorMessages.length),
         "zd-no-label": !_ctx.instance.showLabel,
         "zd-text-input--prepend-icon": !!_ctx.instance.prependIcon && !_ctx.instance.prefix,
         "v-textarea--no-resize": !_ctx.instance.resize,
@@ -20351,6 +20521,7 @@ function _sfc_render$8(_ctx, _cache, $props, $setup, $data, $options) {
     rounded: _ctx.instance.rounded,
     rowHeight: _ctx.instance.rowHeight,
     rows: _ctx.instance.rows,
+    maxRows: _ctx.instance.maxRows,
     rules: _ctx.instance.rules,
     singleLine: true,
     type: _ctx.instance.type,
@@ -20432,7 +20603,7 @@ const _sfc_main$4 = defineComponent({
   name: "ZdTime",
   props: ZdTimeProps$1,
   setup(props, ctx) {
-    const { instance, root: root2 } = useCreateInstance(props, ctx, Time);
+    const { instance, root: root2 } = useCreateInstance(props, ctx, Time, ZdTimeProps$1);
     const { isMobile } = useIsMobile();
     const textInputInstance = ref(null);
     const pickerRef = ref(null);
@@ -20668,7 +20839,7 @@ const tooltipComponent = defineComponent({
     ZdActivatorWrapper
   },
   setup(props, ctx) {
-    const { instance, root: root2 } = useCreateInstance(props, ctx, Tooltip);
+    const { instance, root: root2 } = useCreateInstance(props, ctx, Tooltip, ZdTooltipProps$1);
     const getLocation = () => {
       if (instance.right) return "right";
       if (instance.left) return "left";
@@ -20745,14 +20916,15 @@ const ZdTreeGridProps = buildProps({
   },
   footerSlot: {
     type: Array,
-    default: () => []
+    default: () => [],
+    watch: false
   }
 });
 const treeGridComponent = defineComponent({
   props: ZdTreeGridProps,
   inheritAttrs: false,
   setup(props, ctx) {
-    const { instance, root: root2 } = useCreateInstance(props, ctx, TreeGrid);
+    const { instance, root: root2 } = useCreateInstance(props, ctx, TreeGrid, ZdTreeGridProps);
     const gridScope = useGridInstance$1({ instance, root: root2 });
     const cellClick = ({ row, column, event }) => {
       instance.cellClick(row, column, event, gridScope.rootEl.value);
@@ -21030,13 +21202,13 @@ const _sfc_main$3 = defineComponent({
     const expandIconClick = (event) => {
       emit("expandIconClick", event);
     };
-    const highlightSearchResult = (text) => {
-      if (typeof text !== "string") return text;
+    const highlightSearchResult = (text2) => {
+      if (typeof text2 !== "string") return text2;
       if (gridInstance.datasource.search) {
         const reg = new RegExp(gridInstance.datasource.search, "gi");
-        return text.replace(reg, (value) => `<span class="search-result">${value}</span>`);
+        return text2.replace(reg, (value) => `<span class="search-result">${value}</span>`);
       }
-      return text;
+      return text2;
     };
     return {
       tabindex,
@@ -21241,7 +21413,7 @@ function _sfc_render$3(_ctx, _cache, $props, $setup, $data, $options) {
       }, null, 8, ["disabled", "isSelected", "cellSelection", "isCurrent", "indeterminate"])) : createCommentVNode("", true),
       (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.columns, (column, i, ___, _cached) => {
         const _memo = [_ctx.row, column, _ctx.fixedLeft, _ctx.fixedRight, _ctx.cellSelection, _ctx.isCurrent({ row: _ctx.row, column })];
-        if (_cached && _cached.key === column.name && isMemoSame(_cached, _memo)) return _cached;
+        if (_cached && _cached.el && _cached.key === column.name && isMemoSame(_cached, _memo)) return _cached;
         const _item = (openBlock(), createBlock(_component_zd_tree_grid_cell, {
           key: column.name,
           row: _ctx.row,
@@ -21449,19 +21621,23 @@ const ZdTreeProps$1 = buildProps({
   },
   afterTitleSlot: {
     type: [String, Object],
-    default: () => []
+    default: () => [],
+    watch: false
   },
   toolbarSlot: {
     type: Array,
-    default: () => []
+    default: () => [],
+    watch: false
   },
   titleSlot: {
     type: Array,
-    default: () => []
+    default: () => [],
+    watch: false
   },
   datasource: {
     type: Object,
-    default: () => ({})
+    default: () => ({}),
+    watch: false
   },
   parentField: {
     type: String,
@@ -21527,7 +21703,7 @@ const _sfc_main = defineComponent({
   setup(props, ctx) {
     var _a;
     const treeRef = ref();
-    const { instance, root: root2 } = useCreateInstance(props, ctx, Tree);
+    const { instance, root: root2 } = useCreateInstance(props, ctx, Tree, ZdTreeProps$1);
     const selectedNodesTitle = ref("");
     const beforeNodeState = ref({});
     const proxy = (_a = getCurrentInstance()) == null ? void 0 : _a.proxy;
@@ -21919,7 +22095,7 @@ defineComponent({
   props: ZdChipProps,
   inheritAttrs: false,
   setup(props, ctx) {
-    const { instance, root: root2 } = useCreateInstance(props, ctx, Chip);
+    const { instance, root: root2 } = useCreateInstance(props, ctx, Chip, ZdChipProps);
     const { blur, focus, click, mouseenter, mouseleave } = useGetMethods(instance, root2);
     const variant = computed(() => {
       if (instance.outlined) return "outlined";
@@ -21957,7 +22133,7 @@ defineComponent({
   props: ZdAlertProps,
   inheritAttrs: false,
   setup(props, ctx) {
-    const { instance, root: root2 } = useCreateInstance(props, ctx, Alert);
+    const { instance, root: root2 } = useCreateInstance(props, ctx, Alert, ZdAlertProps);
     const manager = AlertService.instantiateManager(props.multiple);
     const managerProxy = reactive(manager);
     AlertService.registerManager(managerProxy);
@@ -22078,7 +22254,8 @@ const ZdBreadcrumbsProps = buildProps({
   },
   items: {
     type: [Array, String],
-    default: () => []
+    default: () => [],
+    watch: false
   },
   large: {
     type: [Boolean, String],
@@ -22093,7 +22270,7 @@ defineComponent({
   props: ZdBreadcrumbsProps,
   inheritAttrs: false,
   setup(props, ctx) {
-    const { instance, root: root2 } = useCreateInstance(props, ctx, Breadcrumbs);
+    const { instance, root: root2 } = useCreateInstance(props, ctx, Breadcrumbs, ZdBreadcrumbsProps);
     const { t } = useTranslation();
     const getTranslatedItems = () => {
       return instance.items.map((item) => {
@@ -22126,7 +22303,7 @@ defineComponent({
   props: ZdBadgeProps,
   inheritAttrs: false,
   setup(props, ctx) {
-    const { instance, root: root2 } = useCreateInstance(props, ctx, Badge);
+    const { instance, root: root2 } = useCreateInstance(props, ctx, Badge, ZdBadgeProps);
     return {
       instance,
       root: root2
@@ -22209,7 +22386,7 @@ defineComponent({
   props: ZdButtonGroupProps,
   inheritAttrs: false,
   setup(props, ctx) {
-    const { instance, root: root2 } = useCreateInstance(props, ctx, ButtonGroup);
+    const { instance, root: root2 } = useCreateInstance(props, ctx, ButtonGroup, ZdButtonGroupProps);
     const { density } = useDensity({ instance });
     const { click, mouseenter, mouseleave } = useGetMethods(instance, root2);
     function change() {
@@ -22347,7 +22524,8 @@ const ZdCarouselProps = buildProps({
       iconName: "next",
       icon: true,
       large: true
-    })
+    }),
+    watch: false
   },
   prevButton: {
     type: Object,
@@ -22357,7 +22535,8 @@ const ZdCarouselProps = buildProps({
       iconName: "prev",
       icon: true,
       large: true
-    })
+    }),
+    watch: false
   }
 });
 defineComponent({
@@ -22370,7 +22549,7 @@ defineComponent({
     Navigation
   },
   setup(props, ctx) {
-    const { instance, root: root2 } = useCreateInstance(props, ctx, Carousel$1);
+    const { instance, root: root2 } = useCreateInstance(props, ctx, Carousel$1, ZdCarouselProps);
     const carouselRef = ref(null);
     const resizeObserver = ref(null);
     const lastEvent = ref(void 0);
@@ -22483,7 +22662,7 @@ defineComponent({
   props: ZdCheckboxProps,
   inheritAttrs: false,
   setup(props, ctx) {
-    const { instance, root: root2 } = useCreateInstance(props, ctx, Checkbox);
+    const { instance, root: root2 } = useCreateInstance(props, ctx, Checkbox, ZdCheckboxProps);
     const checkboxScope = useCheckbox(instance, ctx, root2);
     return {
       ...checkboxScope
@@ -22529,7 +22708,7 @@ defineComponent({
   props: ZdCodeViewerProps,
   inheritAttrs: false,
   setup(props, ctx) {
-    const { instance, root: root2 } = useCreateInstance(props, ctx, CodeViewer);
+    const { instance, root: root2 } = useCreateInstance(props, ctx, CodeViewer, ZdCodeViewerProps);
     const { click, focus, blur, mouseenter, mouseleave } = useGetMethods(instance, root2);
     const highlight = (code, language) => Prism$1.highlight(code, Prism$1.languages[props.language], language);
     instance.setViewHighlight(highlight);
@@ -22575,7 +22754,7 @@ defineComponent({
   props: ZdColProps,
   inheritAttrs: false,
   setup(props, ctx) {
-    const { instance, root: root2 } = useCreateInstance(props, ctx, Col);
+    const { instance, root: root2 } = useCreateInstance(props, ctx, Col, ZdColProps);
     const { click, focus, blur, mouseenter, mouseleave } = useGetMethods(instance, root2);
     return {
       instance,
@@ -22609,7 +22788,7 @@ defineComponent({
   props: ZdContainerProps,
   inheritAttrs: false,
   setup(props, ctx) {
-    const { instance, root: root2 } = useCreateInstance(props, ctx, Container);
+    const { instance, root: root2 } = useCreateInstance(props, ctx, Container, ZdContainerProps);
     const { click, focus, blur, mouseenter, mouseleave } = useGetMethods(instance, root2);
     return {
       instance,
@@ -22637,7 +22816,7 @@ defineComponent({
   props: ZdDividerProps,
   inheritAttrs: false,
   setup(props, ctx) {
-    const { instance, root: root2 } = useCreateInstance(props, ctx, Divider);
+    const { instance, root: root2 } = useCreateInstance(props, ctx, Divider, ZdDividerProps);
     return {
       instance,
       root: root2
@@ -22664,14 +22843,15 @@ const ZdFormProps = buildProps({
     type: Object,
     default() {
       return {};
-    }
+    },
+    watch: false
   }
 });
 defineComponent({
   props: ZdFormProps,
   inheritAttrs: false,
   setup(props, ctx) {
-    const { instance, root: root2 } = useCreateInstance(props, ctx, Form);
+    const { instance, root: root2 } = useCreateInstance(props, ctx, Form, ZdFormProps);
     const { click, focus, blur, mouseenter, mouseleave } = useGetMethods(instance, root2);
     const submit = (event) => {
       const form = root2.value;
@@ -22765,7 +22945,7 @@ defineComponent({
   props: ZdFooterProps,
   inheritAttrs: false,
   setup(props, ctx) {
-    const { instance, root: root2 } = useCreateInstance(props, ctx, Footer);
+    const { instance, root: root2 } = useCreateInstance(props, ctx, Footer, ZdFooterProps);
     const { click, mouseenter, mouseleave, mouseout, mouseover } = useGetMethods(instance, root2);
     return {
       instance,
@@ -22789,7 +22969,7 @@ defineComponent({
   props: ZdFramePageProps,
   inheritAttrs: false,
   setup(props, ctx) {
-    const { instance, root: root2 } = useCreateInstance(props, ctx, FramePage);
+    const { instance, root: root2 } = useCreateInstance(props, ctx, FramePage, ZdFramePageProps);
     return { instance, root: root2 };
   }
 });
@@ -22807,7 +22987,8 @@ const ZdHeaderProps = buildProps({
   },
   centerSlot: {
     type: Array,
-    default: () => []
+    default: () => [],
+    watch: false
   },
   color: {
     type: String,
@@ -22827,7 +23008,8 @@ const ZdHeaderProps = buildProps({
   },
   leftSlot: {
     type: Array,
-    default: () => []
+    default: () => [],
+    watch: false
   },
   padless: {
     type: [Boolean, String],
@@ -22835,7 +23017,8 @@ const ZdHeaderProps = buildProps({
   },
   rightSlot: {
     type: Array,
-    default: () => []
+    default: () => [],
+    watch: false
   },
   // Zeedhi 3.0
   image: {
@@ -22851,7 +23034,7 @@ defineComponent({
   props: ZdHeaderProps,
   inheritAttrs: false,
   setup(props, ctx) {
-    const { instance, root: root2 } = useCreateInstance(props, ctx, Header);
+    const { instance, root: root2 } = useCreateInstance(props, ctx, Header, ZdHeaderProps);
     const { click, mouseenter, mouseleave } = useGetMethods(instance, root2);
     const centerSlot = ref(null);
     const getSlotsMinHeight = (height) => {
@@ -22924,7 +23107,7 @@ defineComponent({
   props: ZdIconProps,
   inheritAttrs: false,
   setup(props, ctx) {
-    const { instance, root: root2 } = useCreateInstance(props, ctx, Icon$1);
+    const { instance, root: root2 } = useCreateInstance(props, ctx, Icon$1, ZdIconProps);
     const { click, mouseenter, mouseleave } = useGetMethods(instance, root2);
     return {
       instance,
@@ -22964,7 +23147,7 @@ defineComponent({
   props: ZdImageProps,
   inheritAttrs: false,
   setup(props, ctx) {
-    const { instance, root: root2 } = useCreateInstance(props, ctx, Image);
+    const { instance, root: root2 } = useCreateInstance(props, ctx, Image, ZdImageProps);
     const { click, focus, blur, mouseenter, mouseleave } = useGetMethods(instance, root2);
     return {
       instance,
@@ -23000,7 +23183,7 @@ defineComponent({
   props: ZdLayoutProps,
   inheritAttrs: false,
   setup(props, ctx) {
-    const { instance, root: root2 } = useCreateInstance(props, ctx, Layout);
+    const { instance, root: root2 } = useCreateInstance(props, ctx, Layout, ZdLayoutProps);
     const { click, focus, blur, mouseenter, mouseleave } = useGetMethods(instance, root2);
     return {
       instance,
@@ -23028,7 +23211,7 @@ defineComponent({
   props: ZdMainProps,
   inheritAttrs: false,
   setup(props, ctx) {
-    const { instance, root: root2 } = useCreateInstance(props, ctx, Main);
+    const { instance, root: root2 } = useCreateInstance(props, ctx, Main, ZdMainProps);
     const { click, focus, blur, mouseenter, mouseleave } = useGetMethods(instance, root2);
     return {
       instance,
@@ -23064,7 +23247,7 @@ defineComponent({
   props: ZdMenuButtonProps,
   inheritAttrs: false,
   setup(props, ctx) {
-    const { instance, root: root2 } = useCreateInstance(props, ctx, MenuButton);
+    const { instance, root: root2 } = useCreateInstance(props, ctx, MenuButton, ZdMenuButtonProps);
     const { click, focus, blur, mouseenter, mouseleave } = useGetMethods(instance, root2);
     return {
       instance,
@@ -23093,7 +23276,8 @@ const ZdMenuGroupProps = buildProps({
   },
   items: {
     type: Array,
-    default: () => []
+    default: () => [],
+    watch: false
   },
   menuLevel: {
     type: Number,
@@ -23117,7 +23301,7 @@ defineComponent({
   props: ZdMenuGroupProps,
   inheritAttrs: false,
   setup(props, ctx) {
-    const { instance, root: root2 } = useCreateInstance(props, ctx, MenuGroup);
+    const { instance, root: root2 } = useCreateInstance(props, ctx, MenuGroup, ZdMenuGroupProps);
     const { click, focus, blur, mouseenter, mouseleave } = useGetMethods(instance, root2);
     const mouseEnter = () => {
       const rootElement = getRootElement(root2);
@@ -23168,7 +23352,7 @@ defineComponent({
   props: ZdMenuLinkProps,
   inheritAttrs: false,
   setup(props, ctx) {
-    const { instance, root: root2 } = useCreateInstance(props, ctx, MenuLink);
+    const { instance, root: root2 } = useCreateInstance(props, ctx, MenuLink, ZdMenuLinkProps);
     const { click, focus, blur, mouseenter, mouseleave } = useGetMethods(instance, root2);
     const mouseEnter = () => {
       const rootElement = getRootElement(root2);
@@ -23198,7 +23382,7 @@ defineComponent({
   props: ZdMenuSeparatorProps,
   inheritAttrs: false,
   setup(props, ctx) {
-    const { instance, root: root2 } = useCreateInstance(props, ctx, MenuSeparator);
+    const { instance, root: root2 } = useCreateInstance(props, ctx, MenuSeparator, ZdMenuSeparatorProps);
     const { click, focus, blur, mouseenter, mouseleave } = useGetMethods(instance, root2);
     return {
       instance,
@@ -23225,7 +23409,8 @@ const ZdRadioProps = buildProps({
     type: Object,
     defaut() {
       return {};
-    }
+    },
+    watch: false
   },
   dataValue: {
     type: String,
@@ -23240,7 +23425,7 @@ defineComponent({
   props: ZdRadioProps,
   inheritAttrs: false,
   setup(props, ctx) {
-    const { instance, root: root2 } = useCreateInstance(props, ctx, Radio);
+    const { instance, root: root2 } = useCreateInstance(props, ctx, Radio, ZdRadioProps);
     const radioScope = useRadio(instance, ctx, root2);
     return {
       ...radioScope
@@ -23284,7 +23469,7 @@ defineComponent({
   props: ZdRowProps,
   inheritAttrs: false,
   setup(props, ctx) {
-    const { instance, root: root2 } = useCreateInstance(props, ctx, Row);
+    const { instance, root: root2 } = useCreateInstance(props, ctx, Row, ZdRowProps);
     const { click, focus, blur, mouseenter, mouseleave } = useGetMethods(instance, root2);
     return {
       instance,
@@ -23319,7 +23504,7 @@ defineComponent({
   props: ZdTableProps,
   inheritAttrs: false,
   setup(props, ctx) {
-    const { instance, root: root2 } = useCreateInstance(props, ctx, Table);
+    const { instance, root: root2 } = useCreateInstance(props, ctx, Table, ZdTableProps);
     const { click, focus, blur, mouseenter, mouseleave } = useGetMethods(instance, root2);
     return {
       instance,
@@ -23387,7 +23572,7 @@ defineComponent({
   props: ZdTabProps,
   inheritAttrs: false,
   setup(props, ctx) {
-    const { instance, root: root2 } = useCreateInstance(props, ctx, Tab);
+    const { instance, root: root2 } = useCreateInstance(props, ctx, Tab, ZdTabProps);
     const { density } = useDensity({ instance });
     const { click, focus, blur, mouseenter, mouseleave } = useGetMethods(instance, root2);
     const clickTab = (event) => {
@@ -23433,7 +23618,8 @@ const ZdTabsProps = buildProps({
   },
   tabs: {
     type: [Array],
-    default: () => []
+    default: () => [],
+    watch: false
   },
   color: {
     type: [String],
@@ -23467,12 +23653,12 @@ defineComponent({
   props: ZdTabsProps,
   inheritAttrs: false,
   setup(props, ctx) {
-    const { instance, root: root2 } = useCreateInstance(props, ctx, Tabs);
+    const { instance, root: root2 } = useCreateInstance(props, ctx, Tabs, ZdTabsProps);
     const { density } = useDensity({ instance });
     const { click, focus, blur, mouseenter, mouseleave } = useGetMethods(instance, root2);
-    const change = (event) => {
+    const change = () => {
       const rootElement = getRootElement(root2);
-      instance.change(event, rootElement.value);
+      instance.change(new Event("change"), rootElement.value);
     };
     const keydown = (event, index2) => {
       const rootElement = getRootElement(root2);
@@ -23512,7 +23698,7 @@ defineComponent({
   props: ZdTagProps,
   inheritAttrs: false,
   setup(props, ctx) {
-    const { instance, root: root2 } = useCreateInstance(props, ctx, Tag);
+    const { instance, root: root2 } = useCreateInstance(props, ctx, Tag, ZdTagProps);
     const { click, focus, blur, mouseenter, mouseleave } = useGetMethods(instance, root2);
     return {
       instance,
@@ -23544,7 +23730,7 @@ defineComponent({
   props: ZdTextProps,
   inheritAttrs: false,
   setup(props, ctx) {
-    const { instance, root: root2 } = useCreateInstance(props, ctx, Text);
+    const { instance, root: root2 } = useCreateInstance(props, ctx, Text, ZdTextProps);
     const { click, mouseenter, mouseleave } = useGetMethods(instance, root2);
     return {
       instance,
@@ -23594,7 +23780,7 @@ defineComponent({
   props: ZdLoadingProps,
   inheritAttrs: false,
   setup(props, ctx) {
-    const { root: root2 } = useCreateInstance(props, ctx, Loading);
+    const { root: root2 } = useCreateInstance(props, ctx, Loading, ZdLoadingProps);
     const loading = useLoading(Loading, props);
     LoadingService.loading = loading;
     const parseToPixel = (number) => {
@@ -23619,7 +23805,8 @@ const ZdLoginProps = buildProps({
   },
   bottomLink: {
     type: Array,
-    default: () => []
+    default: () => [],
+    watch: false
   },
   cardWidth: {
     type: [String, Number],
@@ -23659,14 +23846,15 @@ const ZdLoginProps = buildProps({
   },
   socialLogin: {
     type: Array,
-    default: () => []
+    default: () => [],
+    watch: false
   }
 });
 defineComponent({
   props: ZdLoginProps,
   inheritAttrs: false,
   setup(props, ctx) {
-    const { instance, root: root2 } = useCreateInstance(props, ctx, Login);
+    const { instance, root: root2 } = useCreateInstance(props, ctx, Login, ZdLoginProps);
     return {
       instance,
       root: root2
@@ -23688,7 +23876,7 @@ defineComponent({
   props: ZdLoginButtonProps,
   inheritAttrs: false,
   setup(props, ctx) {
-    const { instance, root: root2 } = useCreateInstance(props, ctx, LoginButton);
+    const { instance, root: root2 } = useCreateInstance(props, ctx, LoginButton, ZdLoginButtonProps);
     return {
       instance,
       root: root2
@@ -23706,7 +23894,7 @@ defineComponent({
   props: ZdSwitchProps,
   inheritAttrs: false,
   setup(props, ctx) {
-    const { instance, root: root2 } = useCreateInstance(props, ctx, Switch);
+    const { instance, root: root2 } = useCreateInstance(props, ctx, Switch, ZdSwitchProps);
     const { click, focus, blur, mouseenter, mouseleave } = useGetMethods(instance, root2);
     const switchChange = (value) => {
       const rootElement = getRootElement(root2);
@@ -23767,6 +23955,10 @@ const ZdTextareaProps = buildProps({
     type: [Number, String],
     default: 5
   },
+  maxRows: {
+    type: [Number, String],
+    default: 10
+  },
   height: {
     type: [String, Number],
     default: "auto"
@@ -23780,7 +23972,7 @@ defineComponent({
   props: ZdTextareaProps,
   inheritAttrs: false,
   setup(props, ctx) {
-    const { instance, root: root2 } = useCreateInstance(props, ctx, Textarea);
+    const { instance, root: root2 } = useCreateInstance(props, ctx, Textarea, ZdTextareaProps);
     const { click, mouseenter, mouseleave, focus, blur } = useGetMethods(instance, root2);
     const textInputScope = useTextInput$1(instance, ctx, root2);
     return {
@@ -23858,7 +24050,7 @@ defineComponent({
     ZdActivatorWrapper
   },
   setup(props, ctx) {
-    const { instance, root: root2 } = useCreateInstance(props, ctx, Tooltip);
+    const { instance, root: root2 } = useCreateInstance(props, ctx, Tooltip, ZdTooltipProps);
     const getLocation = () => {
       if (instance.right) return "right";
       if (instance.left) return "left";
@@ -23883,7 +24075,8 @@ const ZdDropdownProps = buildProps({
     default: false
   },
   activator: {
-    type: [Object, String]
+    type: [Object, String],
+    watch: false
   },
   closeOnContentClick: {
     type: [Boolean, String],
@@ -23948,7 +24141,7 @@ defineComponent({
     ZdActivatorWrapper
   },
   setup(props, ctx) {
-    const { instance, root: root2 } = useCreateInstance(props, ctx, Dropdown);
+    const { instance, root: root2 } = useCreateInstance(props, ctx, Dropdown, ZdDropdownProps);
     const cssVars = computed(() => {
       return {
         "--cursor": instance.cursor
@@ -23993,7 +24186,12 @@ defineComponent({
   props: ZdSelectMultipleProps,
   inheritAttrs: false,
   setup(props, ctx) {
-    const { instance, root: root2 } = useCreateInputInstance(props, ctx, SelectMultiple);
+    const { instance, root: root2 } = useCreateInputInstance(
+      props,
+      ctx,
+      SelectMultiple,
+      ZdSelectMultipleProps
+    );
     const selectScope = useSelect$1(instance, ctx, root2);
     const element = ref();
     const checkboxItem = ref([]);
@@ -24091,7 +24289,7 @@ defineComponent({
         instance.onSelectAll(!allSelected.value, event, instance.value);
       });
     };
-    const checkOverflow = () => {
+    const checkOverflow2 = () => {
       const chips = getChips();
       if (chips.length > 0) {
         const firstChip = chips[0];
@@ -24157,7 +24355,7 @@ defineComponent({
       expandedMode.value = true;
       nextTick(() => {
         expandedMode.value = false;
-        if (!checkOverflow()) {
+        if (!checkOverflow2()) {
           calcDisplay(true);
         }
       });
@@ -24201,7 +24399,7 @@ defineComponent({
       if (!instance.limit && rows !== 1) {
         rows = 1;
         calcDisplay();
-        nextTick(() => checkOverflow());
+        nextTick(() => checkOverflow2());
       } else {
         refreshDisplay();
       }
@@ -24308,7 +24506,7 @@ defineComponent({
   props: ZdPasswordProps,
   inheritAttrs: false,
   setup(props, ctx) {
-    const { instance, root: root2 } = useCreateInstance(props, ctx, Password);
+    const { instance, root: root2 } = useCreateInstance(props, ctx, Password, ZdPasswordProps);
     return {
       instance,
       root: root2
@@ -24325,10 +24523,6 @@ defineComponent({
     let modalDragged;
     let elDragged = null;
     let dragHandle = null;
-    const getGridClasses = (grid) => Object.keys(grid).reduce((previous, key) => `${previous} zd-col-${key}-${grid[key]}`, "");
-    const getSizeClass = (modal) => {
-      return !modal.fullscreen ? getGridClasses(modal.grid) : "";
-    };
     const initializeModalPosition = (modalEl) => {
       const rect = modalEl.getBoundingClientRect();
       const computedStyle = window.getComputedStyle(modalEl);
@@ -24341,8 +24535,8 @@ defineComponent({
       var _a;
       if (!modal) return;
       const dragHandleClass = (_a = modal.dragHandle) == null ? void 0 : _a.replace(".", "");
-      const targetElement = event.target;
-      if (dragHandleClass && !targetElement.classList.contains(dragHandleClass)) {
+      const targetElement2 = event.target;
+      if (dragHandleClass && !targetElement2.classList.contains(dragHandleClass)) {
         return;
       }
       const modalEl = el.parentElement;
@@ -24398,16 +24592,6 @@ defineComponent({
         y: event.clientY
       };
     };
-    const getContentClass = (modal) => {
-      const classes = [
-        "zd-modal-content",
-        getSizeClass(modal),
-        modal.cssClass,
-        modal.draggable ? "zd-modal-draggable" : "",
-        modal.draggable && !modal.dragHandle ? "zd-modal-draggable-handle" : ""
-      ];
-      return classes.join(" ");
-    };
     const registerDragEvents = (modal, el) => {
       if (!el || !(el instanceof HTMLElement)) return;
       dragHandle = modal.dragHandle ? el.querySelector(modal.dragHandle) : el;
@@ -24422,8 +24606,6 @@ defineComponent({
     };
     return {
       modals,
-      dragStart: dragStart2,
-      getContentClass,
       registerDragEvents,
       unregisterDragEvents
     };
@@ -24452,7 +24634,7 @@ defineComponent({
   props: ZdModalCloseButtonProps,
   inheritAttrs: false,
   setup(props, ctx) {
-    const { instance, root: root2 } = useCreateInstance(props, ctx, ModalCloseButton);
+    const { instance, root: root2 } = useCreateInstance(props, ctx, ModalCloseButton, ZdModalCloseButtonProps);
     return {
       instance,
       root: root2
@@ -24519,14 +24701,15 @@ const ZdListProps = buildProps({
   },
   items: {
     type: Array,
-    default: () => []
+    default: () => [],
+    watch: false
   }
 });
 defineComponent({
   props: ZdListProps,
   inheritAttrs: false,
   setup(props, ctx) {
-    const { instance, root: root2 } = useCreateInstance(props, ctx, List);
+    const { instance, root: root2 } = useCreateInstance(props, ctx, List, ZdListProps);
     const isLastItem = (index2) => {
       return index2 + 1 === instance.items.length;
     };
@@ -24545,7 +24728,8 @@ const ZdCollapseCardProps = {
   },
   expandButton: {
     type: [Object, String],
-    default: () => void 0
+    default: () => void 0,
+    watch: false
   },
   expanded: {
     type: [Boolean, String],
@@ -24553,7 +24737,8 @@ const ZdCollapseCardProps = {
   },
   header: {
     type: [Array, String],
-    default: () => []
+    default: () => [],
+    watch: false
   },
   hideAction: {
     type: [Boolean, String],
@@ -24582,7 +24767,7 @@ defineComponent({
   inheritAttrs: false,
   setup(props, ctx) {
     var _a;
-    const { instance, root: root2 } = useCreateInstance(props, ctx, CollapseCard);
+    const { instance, root: root2 } = useCreateInstance(props, ctx, CollapseCard, ZdCollapseCardProps);
     const { click, mouseenter, mouseleave } = useGetMethods(instance, root2);
     const background = computed(() => ({
       background: `url(${instance.img}) center center / cover no-repeat`
@@ -24643,10 +24828,11 @@ const ZdGridEditableProps = buildProps({
 function useGridEditableInstance({
   instance,
   root: root2,
-  renderedData
+  renderedData,
+  isNavigableRow
 }) {
   const rootEl2 = getRootElement(root2);
-  const gridScope = useGridInstance$1({ instance, root: root2, renderedData });
+  const gridScope = useGridInstance$1({ instance, root: root2, renderedData, isNavigableRow });
   const { doubleClick } = useDoubleClick();
   const editingCell = ref(null);
   const isEditing = ({ row, column }) => {
@@ -24777,7 +24963,12 @@ defineComponent({
   props: ZdGridEditableProps,
   inheritAttrs: false,
   setup(props, ctx) {
-    const { instance, root: root2 } = useCreateInstance(props, ctx, GridEditable);
+    const { instance, root: root2 } = useCreateInstance(
+      props,
+      ctx,
+      GridEditable,
+      ZdGridEditableProps
+    );
     const gridEditableScope = useGridEditableInstance({ instance, root: root2 });
     return {
       ...gridEditableScope,
@@ -24808,7 +24999,12 @@ defineComponent({
   name: "ZdIterableColumnsButton",
   props: ZdIterableColumnsButtonProps,
   setup(props, ctx) {
-    const { instance } = useCreateInstance(props, ctx, IterableColumnsButton);
+    const { instance } = useCreateInstance(
+      props,
+      ctx,
+      IterableColumnsButton,
+      ZdIterableColumnsButtonProps
+    );
     const getEvents = (on2) => {
       const events = { ...instance.events };
       Object.keys(on2).forEach((eventName) => {
@@ -24852,7 +25048,8 @@ const ZdProgressProps = buildProps({
   },
   centerSlot: {
     type: [Array, String],
-    default: () => []
+    default: () => [],
+    watch: false
   },
   value: {
     type: [Number, String],
@@ -24863,7 +25060,7 @@ defineComponent({
   props: ZdProgressProps,
   inheritAttrs: false,
   setup(props, ctx) {
-    const { instance, root: root2 } = useCreateInstance(props, ctx, Progress);
+    const { instance, root: root2 } = useCreateInstance(props, ctx, Progress, ZdProgressProps);
     const { click, mouseenter, mouseleave } = useGetMethods(instance, root2);
     return {
       instance,
@@ -24922,7 +25119,7 @@ defineComponent({
   inheritAttrs: false,
   setup(props, ctx) {
     const container = ref(null);
-    const { instance, root: root2 } = useCreateInputInstance(props, ctx, SvgMap);
+    const { instance, root: root2 } = useCreateInputInstance(props, ctx, SvgMap, ZdSvgMapProps);
     const componentScope = useGetMethods(instance, root2);
     const theme = useTheme();
     const showTooltip = ref(false);
@@ -25090,7 +25287,8 @@ const CheckboxMultipleProps = buildProps({
   },
   datasource: {
     type: Object,
-    default: {}
+    default: {},
+    watch: false
   },
   returnObject: {
     type: [Boolean, String],
@@ -25098,7 +25296,8 @@ const CheckboxMultipleProps = buildProps({
   },
   value: {
     type: [Array, String],
-    default: () => []
+    default: () => [],
+    watch: false
   },
   vertical: {
     type: [Boolean, String],
@@ -25110,7 +25309,7 @@ defineComponent({
   props: CheckboxMultipleProps,
   inheritAttrs: false,
   setup(props, ctx) {
-    const { instance, root: root2 } = useCreateInstance(props, ctx, CheckboxMultiple);
+    const { instance, root: root2 } = useCreateInstance(props, ctx, CheckboxMultiple, CheckboxMultipleProps);
     const { click, mouseenter, mouseleave } = useGetMethods(instance, root2);
     const checkboxHorizontalColumns = computed(() => {
       const columns = Number(instance.columns);
@@ -25162,7 +25361,7 @@ defineComponent({
   props: ZdMasterDetailProps,
   inheritAttrs: false,
   setup(props, ctx) {
-    const { instance, root: root2 } = useCreateInstance(props, ctx, MasterDetail);
+    const { instance, root: root2 } = useCreateInstance(props, ctx, MasterDetail, ZdMasterDetailProps);
     const { click, mouseenter, mouseleave } = useGetMethods(instance, root2);
     return {
       instance,
@@ -25183,7 +25382,7 @@ const ZdCurrencyProps = buildProps({
 defineComponent({
   props: ZdCurrencyProps,
   setup(props, ctx) {
-    const { instance, root: root2 } = useCreateInstance(props, ctx, Currency);
+    const { instance, root: root2 } = useCreateInstance(props, ctx, Currency, ZdCurrencyProps);
     return {
       instance,
       root: root2
@@ -25262,7 +25461,7 @@ defineComponent({
   name: "ZdTime",
   props: ZdTimeProps,
   setup(props, ctx) {
-    const { instance, root: root2 } = useCreateInstance(props, ctx, Time);
+    const { instance, root: root2 } = useCreateInstance(props, ctx, Time, ZdTimeProps);
     const { isMobile } = useIsMobile();
     const textInputInstance = ref(null);
     const pickerRef = ref(null);
@@ -25359,7 +25558,7 @@ defineComponent({
   props: ZdMonthProps,
   inheritAttrs: false,
   setup(props, ctx) {
-    const { instance, root: root2 } = useCreateInstance(props, ctx, Month);
+    const { instance, root: root2 } = useCreateInstance(props, ctx, Month, ZdMonthProps);
     watch(
       () => instance.viewMode,
       () => {
@@ -25406,19 +25605,23 @@ const ZdTreeProps = buildProps({
   },
   afterTitleSlot: {
     type: [String, Object],
-    default: () => []
+    default: () => [],
+    watch: false
   },
   toolbarSlot: {
     type: Array,
-    default: () => []
+    default: () => [],
+    watch: false
   },
   titleSlot: {
     type: Array,
-    default: () => []
+    default: () => [],
+    watch: false
   },
   datasource: {
     type: Object,
-    default: () => ({})
+    default: () => ({}),
+    watch: false
   },
   parentField: {
     type: String,
@@ -25484,7 +25687,7 @@ defineComponent({
   setup(props, ctx) {
     var _a;
     const treeRef = ref();
-    const { instance, root: root2 } = useCreateInstance(props, ctx, Tree);
+    const { instance, root: root2 } = useCreateInstance(props, ctx, Tree, ZdTreeProps);
     const selectedNodesTitle = ref("");
     const beforeNodeState = ref({});
     const proxy = (_a = getCurrentInstance()) == null ? void 0 : _a.proxy;
@@ -25817,7 +26020,7 @@ defineComponent({
   props: ZdIncrementProps,
   inheritAttrs: false,
   setup(props, ctx) {
-    const { instance, root: root2 } = useCreateInstance(props, ctx, Increment);
+    const { instance, root: root2 } = useCreateInstance(props, ctx, Increment, ZdIncrementProps);
     const { click, focus, blur, mouseenter, mouseleave } = useGetMethods(instance, root2);
     return {
       instance,
@@ -25940,7 +26143,7 @@ defineComponent({
   props: ZdDateRangeProps,
   inheritAttrs: false,
   setup(props, ctx) {
-    const { instance, root: root2 } = useCreateInputInstance(props, ctx, DateRange);
+    const { instance, root: root2 } = useCreateInputInstance(props, ctx, DateRange, ZdDateRangeProps);
     const picker = ref(null);
     const { isMobile } = useIsMobile();
     const { pickerValue } = usePickerValue(instance);
@@ -26050,6 +26253,7 @@ const components = {
   ZdSelectMultiple,
   ZdPassword,
   ZdModal,
+  ZdModalCard,
   ZdNumberInput,
   ZdModalCloseButton,
   ZdList,
@@ -26066,7 +26270,7 @@ const components = {
   ZdGridCell,
   ZdGridCellContent,
   ZdGridAction,
-  ZdTooltipOverflow,
+  ZdTooltipOverflow: _sfc_main$w,
   ZdGridHeaderIcon,
   ZdGridCheckbox,
   ZdSearch,
@@ -26101,6 +26305,64 @@ function RegisterComponents(app) {
     app.component(name, components[name]);
   }
 }
+const vTooltipOverflow = {
+  mounted(el, binding) {
+    const tooltipManager = useTooltipManager();
+    let overflowType = "ellipsis";
+    if (binding.modifiers.hidden) {
+      overflowType = "hidden";
+    } else if (binding.modifiers.wrap) {
+      overflowType = "wrap";
+    } else if (binding.modifiers.ellipsis) {
+      overflowType = "ellipsis";
+    } else if (binding.arg && !Number.isNaN(Number(binding.arg))) {
+      overflowType = Number(binding.arg);
+    }
+    applyOverflowStyles(el, overflowType);
+    const tooltipText = String(binding.value);
+    const onMouseEnter = () => {
+      const isOverflowing = checkOverflow(el, overflowType);
+      if (isOverflowing) {
+        tooltipManager.showTooltip(el, tooltipText);
+      }
+    };
+    const onMouseLeave = () => {
+      tooltipManager.hideTooltip();
+    };
+    el._tooltipOverflowHandlers = {
+      mouseenter: onMouseEnter,
+      mouseleave: onMouseLeave
+    };
+    el.addEventListener("mouseenter", onMouseEnter);
+    el.addEventListener("mouseleave", onMouseLeave);
+  },
+  unmounted(el) {
+    const handlers = el._tooltipOverflowHandlers;
+    if (handlers) {
+      el.removeEventListener("mouseenter", handlers.mouseenter);
+      el.removeEventListener("mouseleave", handlers.mouseleave);
+      delete el._tooltipOverflowHandlers;
+    }
+  }
+};
+function applyOverflowStyles(el, overflowType) {
+  el.classList.add("zd-tooltip-overflow");
+  if (overflowType === "hidden") {
+    el.classList.add("zd-tooltip-overflow--hidden");
+  } else if (overflowType === "wrap") {
+    el.classList.add("zd-tooltip-overflow--wrap");
+  } else if (overflowType === "ellipsis") {
+    el.classList.add("zd-tooltip-overflow--ellipsis");
+  } else if (typeof overflowType === "number") {
+    el.classList.add("zd-tooltip-overflow--clamp", `zd-tooltip-overflow--clamp-${overflowType}`);
+  }
+}
+function checkOverflow(el, overflowType) {
+  if (typeof overflowType === "number") {
+    return true;
+  }
+  return el.scrollWidth > el.clientWidth;
+}
 const ZeedhiVuetify = {
   install(app, { theme, icons: icons2, display } = {}) {
     const vuetify = createVuetify({
@@ -26120,15 +26382,20 @@ const ZeedhiVuetify = {
     app.config.globalProperties.$getIcon = getIconPlugin;
     app.config.globalProperties.$formatSize = formatSizePlugin;
     app.config.globalProperties.$styleObject = styleObjectPlugin;
+    app.directive("tooltip-overflow", vTooltipOverflow);
+    const tooltipData = installTooltipOverflow(app);
+    setupTooltipOverflowCleanup(app, tooltipData);
   }
 };
 export {
   CheckboxMultipleProps,
+  HeightProps,
   IconRenderer,
   Logger,
   NotProvidedError,
   RegisterComponents,
   RowNotFoundError,
+  WidthProps,
   ZdAlertProps,
   ZdBadgeProps,
   ZdBreadcrumbsProps,
@@ -26206,9 +26473,11 @@ export {
   formatSizePlugin,
   getIconPlugin,
   getRootElement,
+  installTooltipOverflow,
   mergeDictionaries,
   positionTooltip,
   setFillHeight,
+  setupTooltipOverflowCleanup,
   styleObjectPlugin,
   useButtonInstance,
   useCellSelection,