@fastkit/vui 0.16.80 → 0.16.81

package/dist/vui.mjs

@@ -20,9 +20,9 @@ import { VAppContainer, VueAppLayout, VAppLayout, installVueAppLayout } from '@f
 export * from '@fastkit/vue-app-layout';
 import { colorSchemeProps, useColorClasses, useScopeColorClass, toScopeColorClass, useInjectTheme, VueColorSchemePlugin } from '@fastkit/vue-color-scheme';
 export * from '@fastkit/vue-color-scheme';
-import { createFormControlSettings, useFormControl, useParentFormNode, createFormSelectorItemSettings, useFormSelectorItemControl, createFormSelectorItemGroupProps, useFormSelectorItemGroupControl, createFormSelectorSettings, createFormControlProps, useFormSelectorControl, createTextInputSettings, useTextInputControl, createTextareaSettings, useTextareaControl, createFormSettings, useForm, installVueFormPlugin } from '@fastkit/vue-form-control';
+import { createFormControlSettings, useFormControl, useParentFormNode, createFormSelectorItemSettings, useFormSelectorItemControl, createFormSelectorItemGroupProps, useFormSelectorItemGroupControl, createFormSelectorSettings, createFormControlProps, useFormSelectorControl, createTextInputSettings, useTextInputControl, createTextareaSettings, useTextareaControl, createFormGroupSettings, useFormGroup, createFormSettings, useForm, installVueFormPlugin } from '@fastkit/vue-form-control';
 export * from '@fastkit/vue-form-control';
-import { getDocumentScroller, VScroller } from '@fastkit/vue-scroller';
+import { VScroller, getDocumentScroller } from '@fastkit/vue-scroller';
 export * from '@fastkit/vue-scroller';
 import { defineMenuComponent, defineDialogComponent, createStackActionProps, useStackAction, defineSnackbarComponent, createStackableDefine, useStackControl, VDynamicStacks, BUILTIN_ACTION_HANDLERS, installVueStackPlugin } from '@fastkit/vue-stack';
 export * from '@fastkit/vue-stack';
@@ -33,7 +33,7 @@ import { createPropsOptions, defineSlots, renderSlotOrEmpty, isFragment, resolve
 export * from '@fastkit/vue-utils';
 import * as vue_loading_star from '@fastkit/vue-loading';
 export * from '@fastkit/vue-loading';
-import { defineComponent, computed, createVNode, mergeProps, ref, watch, onMounted, onBeforeUnmount, Fragment, isVNode, cloneVNode, withDirectives, vShow, onBeforeUpdate, vModelSelect, Transition, inject, provide, createTextVNode, reactive, nextTick } from 'vue';
+import { defineComponent, computed, createVNode, mergeProps, ref, watch, onMounted, onBeforeUnmount, Fragment, isVNode, cloneVNode, withDirectives, vShow, onBeforeUpdate, Transition, inject, provide, createTextVNode, reactive, nextTick, vModelSelect } from 'vue';
 import { loadImage } from '@fastkit/dom';
 import { useRouter, useRoute, RouterLink, useLink } from 'vue-router';
 import { resizeDirectiveArgument, installResizeDirective } from '@fastkit/vue-resize';
@@ -68,7 +68,7 @@ __export(src_exports, {
   CONTROL_LOADING_SPINNER_SIZES: () => CONTROL_LOADING_SPINNER_SIZES,
   CONTROL_SIZES: () => CONTROL_SIZES,
   ICON_NAMES: () => ICON_NAMES,
-  KEYBORD_EVENT_TYPES: () => KEYBORD_EVENT_TYPES,
+  KEYBOARD_EVENT_TYPES: () => KEYBOARD_EVENT_TYPES,
   PAGINATION_ALIGNS: () => PAGINATION_ALIGNS,
   VApp: () => VApp,
   VAvatar: () => VAvatar,
@@ -89,6 +89,7 @@ __export(src_exports, {
   VDrawerLayout: () => VDrawerLayout,
   VForm: () => VForm,
   VFormControl: () => VFormControl,
+  VFormGroup: () => VFormGroup,
   VGridContainer: () => VGridContainer,
   VGridItem: () => VGridItem,
   VHero: () => VHero,
@@ -122,6 +123,7 @@ __export(src_exports, {
   VTooltip: () => VTooltip,
   VUI_CHECKBOX_GROUP_SYMBOL: () => VUI_CHECKBOX_GROUP_SYMBOL,
   VUI_CHECKBOX_SYMBOL: () => VUI_CHECKBOX_SYMBOL,
+  VUI_FORM_GROUP_SYMBOL: () => VUI_FORM_GROUP_SYMBOL,
   VUI_FORM_SYMBOL: () => VUI_FORM_SYMBOL,
   VUI_OPTION_SYMBOL: () => VUI_OPTION_SYMBOL,
   VUI_RADIO_GROUP_SYMBOL: () => VUI_RADIO_GROUP_SYMBOL,
@@ -151,8 +153,10 @@ __export(src_exports, {
   createPaperBaseProps: () => createPaperBaseProps,
   createPaperProps: () => createPaperProps,
   createRequiredChipRenderer: () => createRequiredChipRenderer,
+  createVFormGroupProps: () => createVFormGroupProps,
   createVFormProps: () => createVFormProps,
   defineFormSelectorComponent: () => defineFormSelectorComponent,
+  formGroupSlots: () => formGroupSlots,
   formSlots: () => formSlots,
   iconProps: () => iconProps,
   installVuiPlugin: () => installVuiPlugin,
@@ -199,6 +203,7 @@ var VUI_RADIO_GROUP_SYMBOL = "vui-radio-group";
 var VUI_RADIO_SYMBOL = "vui-radio";
 var VUI_SWITCH_GROUP_SYMBOL = "vui-switch-group";
 var VUI_SWITCH_SYMBOL = "vui-switch";
+var VUI_FORM_GROUP_SYMBOL = "vui-form-group";
 var VUI_FORM_SYMBOL = "vui-form";
 function useVui() {
   const vui = inject(VuiInjectionKey);
@@ -241,11 +246,11 @@ function createControlProps() {
     loading: Boolean
   });
 }
-function useControl(props11, opts = {}) {
+function useControl(props12, opts = {}) {
   const { defaultSize = "md" } = opts;
   const parentControl = inject(VuiControlInjectionKey, null);
   const size = computed(() => {
-    const psize = props11.size;
+    const psize = props12.size;
     return psize ? psize : parentControl ? parentControl.size.value : defaultSize;
   });
   const classes = computed(() => {
@@ -271,11 +276,11 @@ function createControlFieldProviderProps() {
     }
   });
 }
-function useControlField(props11, opts = {}) {
+function useControlField(props12, opts = {}) {
   const { defaultVariant = "flat" } = opts;
   const parentControlField = inject(VuiControlFieldInjectionKey, null);
   const variant = computed(() => {
-    const pvariant = props11.variant;
+    const pvariant = props12.variant;
     return pvariant ? pvariant : parentControlField ? parentControlField.variant.value : defaultVariant;
   });
   const provider = {
@@ -311,8 +316,8 @@ var VIcon = defineComponent({
     ...iconProps
   },
   emits: {},
-  setup(props11, ctx) {
-    const iconName = computed(() => props11.name);
+  setup(props12, ctx) {
+    const iconName = computed(() => props12.name);
     const clickable = computed(() => typeof ctx.attrs.onClick !== "undefined");
     const classes = computed(() => [{
       "v-icon--clickable": clickable.value
@@ -321,7 +326,7 @@ var VIcon = defineComponent({
     const bodyStyles = computed(() => {
       const {
         rotate
-      } = props11;
+      } = props12;
       if (!rotate)
         return;
       return {
@@ -396,14 +401,14 @@ var {
   props,
   emits
 } = createFormControlSettings();
-function createRequiredChipRenderer(required, props11, vui = useVui()) {
+function createRequiredChipRenderer(required, props12, vui = useVui()) {
   return () => {
     if (!required())
       return;
     let chip;
     const {
       requiredChip
-    } = props11;
+    } = props12;
     if (requiredChip === false)
       return;
     if (requiredChip) {
@@ -429,9 +434,9 @@ var VFormControl = defineComponent({
   },
   slots,
   emits,
-  setup(props11, ctx) {
+  setup(props12, ctx) {
     const vui = useVui();
-    const control = useFormControl(props11, ctx, {
+    const control = useFormControl(props12, ctx, {
       hinttipPrepend: () => createVNode(VIcon, {
         "class": "v-form-control__label__hinttip__icon",
         "name": vui.icon("hinttip")
@@ -449,9 +454,11 @@ var VFormControl = defineComponent({
       }
       return hinttipDelay2;
     });
-    ctx.expose(control.expose());
+    ctx.expose({
+      control
+    });
     const colorProvider = useVuiColorProvider();
-    const classes = computed(() => [{
+    const classes = computed(() => ["v-form-control", {
       "v-form-control--validating": control.validating,
       "v-form-control--pending": control.pending,
       "v-form-control--focused": control.focused,
@@ -463,8 +470,8 @@ var VFormControl = defineComponent({
       "v-form-control--untouched": control.untouched,
       "v-form-control--invalid": control.invalid,
       "v-form-control--valid": control.valid
-    }, colorProvider.className(props11.error ? "error" : control.invalid && !control.readonly ? "error" : "primary")]);
-    const getRequiredChip = createRequiredChipRenderer(() => control.required, props11, vui);
+    }, colorProvider.className(props12.error ? "error" : control.invalid && !control.readonly ? "error" : "primary")]);
+    const getRequiredChip = createRequiredChipRenderer(() => control.required, props12, vui);
     const handleClick = (ev) => ctx.emit("clickLabel", ev, control);
     return () => {
       const label = control.renderLabel();
@@ -473,7 +480,7 @@ var VFormControl = defineComponent({
       const hinttip = control.renderHinttip();
       const _hinttipDelay = hinttipDelay.value;
       return createVNode("div", {
-        "class": ["v-form-control", classes.value]
+        "class": classes.value
       }, [label && createVNode("label", {
         "class": "v-form-control__label",
         "onClick": handleClick
@@ -485,13 +492,13 @@ var VFormControl = defineComponent({
         default: () => [createVNode("div", {
           "class": "v-form-control__label__hinttip__hint"
         }, [hinttip.hint])],
-        activator: (ctx2) => createVNode("a", mergeProps({
+        activator: (tooltip) => createVNode("a", mergeProps({
           "class": "v-form-control__label__hinttip",
           "href": "javascript:void(0)"
-        }, ctx2.attrs), [hinttip.tip])
+        }, tooltip.attrs), [hinttip.tip])
       })]), createVNode("div", {
         "class": "v-form-control__body"
-      }, [ctx.slots.default?.(control), !props11.hiddenInfo && createVNode("div", {
+      }, [ctx.slots.default?.(control), !props12.hiddenInfo && createVNode("div", {
         "class": "v-form-control__info"
       }, [!!message && createVNode("div", {
         "class": "v-form-control__message"
@@ -516,15 +523,15 @@ function defineFormSelectorComponent(opts) {
     className
   } = opts;
   const {
-    props: props11,
-    emits: emits11
+    props: props12,
+    emits: emits12
   } = createFormSelectorSettings({
     defaultMultiple
   });
   return defineComponent({
     name: opts.name,
     props: {
-      ...props11,
+      ...props12,
       ...createFormControlProps(),
       ...createControlProps(),
       stacked: {
@@ -538,61 +545,40 @@ function defineFormSelectorComponent(opts) {
       ...slots2()
     },
     slots: slots2,
-    emits: emits11,
-    setup(props12, ctx) {
-      const selectorControl = useFormSelectorControl(props12, ctx, {
+    emits: emits12,
+    setup(props13, ctx) {
+      const selectorControl = useFormSelectorControl(props13, ctx, {
         nodeType,
         defaultMultiple
       });
-      const control = useControl(props12);
+      const control = useControl(props13);
+      const classes = computed(() => ["v-form-selector", className, {
+        ...control.classes.value,
+        "v-form-selector--stacked": props13.stacked
+      }]);
       const vui = useVui();
       const loadingMessageRef = computed(() => {
-        const slot = resolveVNodeChildOrSlots(props12.loadingMessage, vui.setting("loadingMessage"), "Loading...");
+        const slot = resolveVNodeChildOrSlots(props13.loadingMessage, vui.setting("loadingMessage"), "Loading...");
         return slot && slot(vui);
       });
       const failedToLoadItemsMessageRef = computed(() => {
-        const slot = resolveVNodeChildOrSlots(props12.failedToLoadItemsMessage, vui.setting("failedToLoadDataMessage"), "Failed to load data.");
+        const slot = resolveVNodeChildOrSlots(props13.failedToLoadItemsMessage, vui.setting("failedToLoadDataMessage"), "Failed to load data.");
         return slot && slot(vui);
       });
-      return {
-        ...selectorControl.expose(),
-        ...control,
-        loadingMessageRef,
-        failedToLoadItemsMessageRef
-      };
-    },
-    render() {
-      const {
-        selectorControl
-      } = this;
-      return createVNode(VFormControl, {
-        "nodeControl": this.nodeControl,
-        "focused": this.nodeControl.focused,
-        "hiddenInfo": this.hiddenInfo,
-        "class": ["v-form-selector", className, {
-          ...this.classes,
-          "v-form-selector--stacked": this.stacked
-        }],
-        "label": this.label,
-        "hint": this.hint,
-        "hinttip": this.hinttip,
-        "requiredChip": this.requiredChip,
-        "error": selectorControl.itemsLoadFailed
-      }, {
-        ...this.$slots,
-        default: () => createVNode("div", {
+      const defaultSlot = () => {
+        return createVNode("div", {
           "class": "v-form-selector__body"
         }, [selectorControl.itemsLoadFailed && createVNode("div", {
           "key": "failed",
           "class": "v-form-selector__placeholder v-form-selector__placeholder--error"
-        }, [this.failedToLoadItemsMessageRef]), selectorControl.itemsLoading && createVNode("div", {
+        }, [failedToLoadItemsMessageRef.value]), selectorControl.itemsLoading && createVNode("div", {
           "key": "loading",
           "class": "v-form-selector__placeholder"
         }, [createVNode(loading_exports.VProgressCircular, {
           "indeterminate": true,
           "class": "mr-1",
-          "size": CONTROL_LOADING_SPINNER_SIZES[this.size || "md"]
-        }, null), this.loadingMessageRef]), this.propGroups.map((group) => {
+          "size": CONTROL_LOADING_SPINNER_SIZES[control.size.value || "md"]
+        }, null), loadingMessageRef.value]), selectorControl.propGroups.map((group) => {
           const {
             items
           } = group;
@@ -607,12 +593,31 @@ function defineFormSelectorComponent(opts) {
                 key: attrs.value
               },
               slots: {
-                default: () => attrs.label(this.selectorControl)
+                default: () => attrs.label(selectorControl)
               }
             });
           })]);
-        }), this.$slots.default?.()])
+        }), ctx.slots.default?.()]);
+      };
+      ctx.expose({
+        control: selectorControl
       });
+      return () => {
+        return createVNode(VFormControl, {
+          "nodeControl": selectorControl,
+          "focused": selectorControl.focused,
+          "hiddenInfo": props13.hiddenInfo,
+          "class": classes.value,
+          "label": props13.label,
+          "hint": props13.hint,
+          "hinttip": props13.hinttip,
+          "requiredChip": props13.requiredChip,
+          "error": selectorControl.itemsLoadFailed
+        }, {
+          ...ctx.slots,
+          default: defaultSlot
+        });
+      };
     }
   });
 }
@@ -621,9 +626,9 @@ function createElevationProps() {
     elevation: Number
   });
 }
-function useElevation(props11, opts = {}) {
+function useElevation(props12, opts = {}) {
   const elevationValue = computed(
-    () => props11.elevation == null ? opts.defaultValue : props11.elevation
+    () => props12.elevation == null ? opts.defaultValue : props12.elevation
   );
   const elevationClassName = computed(() => {
     const v = elevationValue.value;
@@ -644,7 +649,7 @@ __export(components_exports, {
   CHIP_SIZES: () => CHIP_SIZES,
   CHOICE_KEY_TYPES: () => CHOICE_KEY_TYPES,
   ICON_NAMES: () => ICON_NAMES,
-  KEYBORD_EVENT_TYPES: () => KEYBORD_EVENT_TYPES,
+  KEYBOARD_EVENT_TYPES: () => KEYBOARD_EVENT_TYPES,
   PAGINATION_ALIGNS: () => PAGINATION_ALIGNS,
   VApp: () => VApp,
   VAvatar: () => VAvatar,
@@ -665,6 +670,7 @@ __export(components_exports, {
   VDrawerLayout: () => VDrawerLayout,
   VForm: () => VForm,
   VFormControl: () => VFormControl,
+  VFormGroup: () => VFormGroup,
   VGridContainer: () => VGridContainer,
   VGridItem: () => VGridItem,
   VHero: () => VHero,
@@ -706,7 +712,9 @@ __export(components_exports, {
   createPaperBaseProps: () => createPaperBaseProps,
   createPaperProps: () => createPaperProps,
   createRequiredChipRenderer: () => createRequiredChipRenderer,
+  createVFormGroupProps: () => createVFormGroupProps,
   createVFormProps: () => createVFormProps,
+  formGroupSlots: () => formGroupSlots,
   formSlots: () => formSlots,
   iconProps: () => iconProps,
   listTileEmits: () => listTileEmits,
@@ -731,11 +739,11 @@ var VDialog = defineDialogComponent({
   },
   setup(ctx) {
     const {
-      props: props11,
+      props: props12,
       control
     } = ctx;
     const vui = useVui();
-    const actionControl = useStackAction(props11, control, {
+    const actionControl = useStackAction(props12, control, {
       resolver: (actions) => {
         if (actions.length === 0) {
           return [vui.stackAction("close")];
@@ -744,7 +752,7 @@ var VDialog = defineDialogComponent({
         }
       }
     });
-    const color = useColorClasses(props11, {
+    const color = useColorClasses(props12, {
       useRootThemeDefault: true
     });
     return (children) => {
@@ -752,7 +760,7 @@ var VDialog = defineDialogComponent({
         $actions
       } = actionControl;
       return createVNode("div", {
-        "class": ["v-dialog", color.colorClasses.value, props11.dense && "v-dialog--dense"]
+        "class": ["v-dialog", color.colorClasses.value, props12.dense && "v-dialog--dense"]
       }, [createVNode("div", {
         "class": "v-dialog__body"
       }, [children]), $actions.length > 0 && createVNode("div", {
@@ -770,11 +778,11 @@ var VSnackbar = defineSnackbarComponent({
   },
   setup(ctx) {
     const {
-      props: props11,
+      props: props12,
       control
     } = ctx;
     const vui = useVui();
-    const actionControl = useStackAction(props11, control, {
+    const actionControl = useStackAction(props12, control, {
       resolver: (actions) => {
         if (actions.length === 0) {
           return [vui.stackAction("close")];
@@ -783,7 +791,7 @@ var VSnackbar = defineSnackbarComponent({
         }
       }
     });
-    const color = useColorClasses(props11, {
+    const color = useColorClasses(props12, {
       useRootThemeDefault: true
     });
     return (children) => {
@@ -822,8 +830,8 @@ var VSheetModal = defineComponent({
   inheritAttrs: false,
   props: sheetModalProps,
   emits: emits2,
-  setup(props11, ctx) {
-    const stackControl = useStackControl(props11, ctx, {
+  setup(props12, ctx) {
+    const stackControl = useStackControl(props12, ctx, {
       stackType: SHEET_STACK_TYPE
     });
     const hasActiveChild = computed(() => {
@@ -869,9 +877,9 @@ var VSkeltonLoaderBone = defineComponent({
       default: "div"
     }
   },
-  setup(props11, ctx) {
+  setup(props12, ctx) {
     return () => {
-      const TagName = props11.tag;
+      const TagName = props12.tag;
       return createVNode(TagName, mergeProps(ctx.attrs, {
         "class": "v-skelton-loader-bone"
       }), {
@@ -920,15 +928,15 @@ var VBusyImage = defineComponent({
     error: (ev) => true
   },
   slots: slots3,
-  setup(props11, ctx) {
-    const loadStateRef = ref(props11.cover && isAvailableSrc(ctx.attrs.src) ? "loading" : "pending");
+  setup(props12, ctx) {
+    const loadStateRef = ref(props12.cover && isAvailableSrc(ctx.attrs.src) ? "loading" : "pending");
     const attrsRef = computed(() => splitAttrs(ctx.attrs));
     const isPendingRef = computed(() => loadStateRef.value === "pending");
     const isLoadingRef = computed(() => loadStateRef.value === "loading");
     const isLoadedRef = computed(() => loadStateRef.value === "loaded");
     const isErrorRef = computed(() => loadStateRef.value === "error");
     const classesRef = computed(() => [`v-busy-image--${loadStateRef.value}`, {
-      "v-busy-image--cover": props11.cover,
+      "v-busy-image--cover": props12.cover,
       "v-busy-image--clickable": typeof ctx.attrs.onClick === "function"
     }]);
     const nodeRef = ref();
@@ -938,11 +946,11 @@ var VBusyImage = defineComponent({
       const main = {};
       const {
         cover
-      } = props11;
+      } = props12;
       let {
         width,
         height
-      } = props11;
+      } = props12;
       if (height == null && cover) {
         height = DEFAULT_HEIGHT;
       }
@@ -985,7 +993,7 @@ var VBusyImage = defineComponent({
       coverImageRef.value = void 0;
       if (isAvailableSrc(value)) {
         loadStateRef.value = "loading";
-        if (props11.cover) {
+        if (props12.cover) {
           loadImage(value).then((image) => {
             coverImageRef.value = image;
             setManualState("load");
@@ -1009,7 +1017,7 @@ var VBusyImage = defineComponent({
       ctx.emit(loadType, ev);
     };
     onMounted(() => {
-      if (booted || props11.cover)
+      if (booted || props12.cover)
         return;
       const image = nodeRef.value;
       if (!image)
@@ -1050,7 +1058,7 @@ var VBusyImage = defineComponent({
         "class": ["v-busy-image", classesRef.value]
       }, elAttrs, {
         "style": styles
-      }), [!props11.cover && createVNode("img", mergeProps({
+      }), [!props12.cover && createVNode("img", mergeProps({
         "key": "img",
         "ref": nodeRef,
         "class": "v-busy-image__node"
@@ -1096,7 +1104,7 @@ var VGridItem = defineComponent({
     justify: void 0,
     order: void 0
   },
-  setup(props11, ctx) {
+  setup(props12, ctx) {
     const data = computed(() => {
       const classes = [];
       const attrs = {
@@ -1107,7 +1115,7 @@ var VGridItem = defineComponent({
         align,
         justify,
         order
-      } = props11;
+      } = props12;
       delete attrs.size;
       delete attrs.align;
       delete attrs.justify;
@@ -1122,7 +1130,7 @@ var VGridItem = defineComponent({
       };
     });
     return () => {
-      const TagName = props11.tag;
+      const TagName = props12.tag;
       const {
         classes,
         attrs
@@ -1156,7 +1164,7 @@ var VGridContainer = defineComponent({
     alignContent: void 0,
     justifyContent: void 0
   },
-  setup(props11, ctx) {
+  setup(props12, ctx) {
     const data = computed(() => {
       const classes = [];
       const attrs = {
@@ -1170,7 +1178,7 @@ var VGridContainer = defineComponent({
         wrap,
         alignContent,
         justifyContent
-      } = props11;
+      } = props12;
       const wrapperClass = attrs.class;
       const wrapperStyle = attrs.style;
       delete attrs.class;
@@ -1197,8 +1205,8 @@ var VGridContainer = defineComponent({
       };
     });
     return () => {
-      const WrapperTag = props11.wrapperTag;
-      const TagName = props11.tag;
+      const WrapperTag = props12.wrapperTag;
+      const TagName = props12.tag;
       const {
         wrapperClass,
         wrapperStyle,
@@ -1243,20 +1251,20 @@ var VPaper = defineComponent({
   inheritAttrs: false,
   props: createPaperProps(),
   slots: paperBaseSlots,
-  setup(props11, ctx) {
-    const tag = computed(() => props11.tag);
-    const elevation = useElevation(props11, {
+  setup(props12, ctx) {
+    const tag = computed(() => props12.tag);
+    const elevation = useElevation(props12, {
       defaultValue: 1
     });
-    const scope = useScopeColorClass(props11);
+    const scope = useScopeColorClass(props12);
     const classes = computed(() => [elevation.elevationClassName.value, scope.value.className, {
       "v-paper--plain": !scope.value.value,
       "v-paper--has-color": !!scope.value.value || !!ctx.attrs.disabled,
-      "v-paper--square": props11.square
+      "v-paper--square": props12.square
     }]);
-    const headerProps = computed(() => props11.headerProps);
-    const bodyProps = computed(() => props11.bodyProps);
-    const footerProps = computed(() => props11.footerProps);
+    const headerProps = computed(() => props12.headerProps);
+    const bodyProps = computed(() => props12.bodyProps);
+    const footerProps = computed(() => props12.footerProps);
     return () => {
       const TagName = tag.value;
       const header = renderSlotOrEmpty(ctx.slots, "header");
@@ -1265,7 +1273,7 @@ var VPaper = defineComponent({
         "class": ["v-paper", classes.value]
       }, ctx.attrs), {
         default: () => [createVNode("div", {
-          "class": ["v-paper__inner", props11.innerClass]
+          "class": ["v-paper__inner", props12.innerClass]
         }, [header && createVNode("div", mergeProps({
           "class": "v-paper__header"
         }, headerProps.value), [header]), createVNode("div", mergeProps({
@@ -1296,26 +1304,26 @@ var VAvatar = defineComponent({
   name: "VAvatar",
   inheritAttrs: false,
   props: createAvatarProps(),
-  setup(props11, ctx) {
+  setup(props12, ctx) {
     const vui = useVui();
     const defaults = vui.setting("buttonDefault");
     const color = useColorClasses({
-      color: () => props11.color || defaults.color,
-      variant: () => props11.variant || defaults.variant
+      color: () => props12.color || defaults.color,
+      variant: () => props12.variant || defaults.variant
     });
     const classes = computed(() => {
       const {
         size
-      } = props11;
+      } = props12;
       return [{
-        "v-avatar--tile": props11.tile,
-        "v-avatar--rounded": props11.rounded
+        "v-avatar--tile": props12.tile,
+        "v-avatar--rounded": props12.rounded
       }, typeof size === "string" && `v-avatar--${size}`];
     });
     const styles = computed(() => {
       const {
         size
-      } = props11;
+      } = props12;
       if (typeof size !== "number")
         return;
       return {
@@ -1333,7 +1341,7 @@ var VAvatar = defineComponent({
     return () => {
       const {
         src
-      } = props11;
+      } = props12;
       return actionable.render(!!src && createVNode(VBusyImage, {
         "class": "v-avatar__image",
         "src": src,
@@ -1379,27 +1387,27 @@ var VChip = defineComponent({
   name: "VChip",
   inheritAttrs: false,
   props: createChipProps(),
-  setup(props11, ctx) {
+  setup(props12, ctx) {
     const vui = useVui();
     const defaults = vui.setting("buttonDefault");
     const color = useColorClasses({
-      color: () => props11.color || defaults.color,
-      variant: () => props11.variant || defaults.variant
+      color: () => props12.color || defaults.color,
+      variant: () => props12.variant || defaults.variant
     });
     const startIcon = computed(() => {
-      const _icon = resolveRawVChipIcon(props11.startIcon, "start");
+      const _icon = resolveRawVChipIcon(props12.startIcon, "start");
       return _icon && _icon();
     });
     const endIcon = computed(() => {
-      const _icon = resolveRawVChipIcon(props11.endIcon, "end");
+      const _icon = resolveRawVChipIcon(props12.endIcon, "end");
       return _icon && _icon();
     });
     const classes = computed(() => {
       const {
         size
-      } = props11;
+      } = props12;
       return [{
-        "v-chip--label": props11.label
+        "v-chip--label": props12.label
       }, typeof size === "string" && `v-chip--${size}`];
     });
     const actionable = useActionable(ctx, {
@@ -1425,8 +1433,8 @@ var VCard = defineComponent({
   name: "VCard",
   inheritAttrs: false,
   props: createCardProps(),
-  setup(props11, ctx) {
-    const _props = computed(() => props11);
+  setup(props12, ctx) {
+    const _props = computed(() => props12);
     const data = computed(() => {
       const hasLink = !!ctx.attrs.href || !!ctx.attrs.to;
       const attrs = {
@@ -1435,7 +1443,7 @@ var VCard = defineComponent({
         class: ["v-card", ctx.attrs.class, typeof ctx.attrs.onClick === "function" && "clickable"],
         tag: hasLink ? VAction : "div"
       };
-      if (props11.disabled) {
+      if (props12.disabled) {
         attrs.disabled = "disabled";
         delete attrs.onClick;
         delete attrs.href;
@@ -1504,38 +1512,38 @@ var VButton = defineComponent({
   name: "VButton",
   inheritAttrs: false,
   props: vueButtonProps,
-  setup(props11, ctx) {
+  setup(props12, ctx) {
     const vui = useVui();
-    const control = useControl(props11);
+    const control = useControl(props12);
     const defaults = vui.setting("buttonDefault");
     const icon = computed(() => {
-      const _icon = resolveRawVButtonIcon(props11.icon);
+      const _icon = resolveRawVButtonIcon(props12.icon);
       return _icon && _icon();
     });
     const startIcon = computed(() => {
-      const _icon = resolveRawVButtonIcon(props11.startIcon, "start");
+      const _icon = resolveRawVButtonIcon(props12.startIcon, "start");
       return _icon && _icon();
     });
     const endIcon = computed(() => {
-      const _icon = resolveRawVButtonIcon(props11.endIcon, "end");
+      const _icon = resolveRawVButtonIcon(props12.endIcon, "end");
       return _icon && _icon();
     });
     const color = useColorClasses({
-      color: () => props11.color || defaults.color,
-      variant: () => props11.variant || (icon.value ? vui.setting("plainVariant") : defaults.variant)
+      color: () => props12.color || defaults.color,
+      variant: () => props12.variant || (icon.value ? vui.setting("plainVariant") : defaults.variant)
     });
     const isPlain = computed(() => color.variant.value.value === vui.setting("plainVariant") && color.color.value.value === defaults.color);
-    const isLoading = computed(() => props11.loading);
+    const isLoading = computed(() => props12.loading);
     const spacer = computed(() => {
-      const _spacer = props11.spacer;
+      const _spacer = props12.spacer;
       if (!_spacer)
         return;
       return _spacer === true ? "left" : _spacer;
     });
-    const classes = computed(() => [color.colorClasses.value, spacer.value ? `v-button--spacer-${spacer.value}` : void 0, `v-button--${control.size.value}`, `v-button--align-${props11.align}`, {
+    const classes = computed(() => [color.colorClasses.value, spacer.value ? `v-button--spacer-${spacer.value}` : void 0, `v-button--${control.size.value}`, `v-button--align-${props12.align}`, {
       "v-button--loading": isLoading.value,
       "v-button--icon": !!icon.value,
-      "v-button--rounded": props11.rounded,
+      "v-button--rounded": props12.rounded,
       "v-button--plain": isPlain.value
     }]);
     return () => {
@@ -1561,7 +1569,7 @@ var VButtonGroup = defineComponent({
     ...createControlProps(),
     disabled: Boolean
   },
-  setup(props11, ctx) {
+  setup(props12, ctx) {
     return () => {
       let hasIcon = false;
       let buttonLength = 0;
@@ -1593,7 +1601,7 @@ var VButtonGroup = defineComponent({
           const hasRight = buttonIndex < buttonLength;
           const childProps = child.node.props;
           return cloneVNode(child.node, {
-            ...props11,
+            ...props12,
             ...childProps,
             rouded: false,
             class: ["v-button-group__item", {
@@ -1661,7 +1669,7 @@ var VPagination = defineComponent({
     change: (page) => true,
     "update:modelValue": (page) => true
   },
-  setup(props11, ctx) {
+  setup(props12, ctx) {
     const vui = useVui();
     const elRef = ref(null);
     const router = useRouter();
@@ -1675,15 +1683,15 @@ var VPagination = defineComponent({
       return Math.floor(containerWidth.value / _itemSize);
     });
     const colorScope = useScopeColorClass({
-      color: () => props11.color || vui.setting("primaryScope")
+      color: () => props12.color || vui.setting("primaryScope")
     });
-    const computedLength = computed(() => resolveNumberish(props11.length));
-    const computedTotalVisible = computed(() => resolveNumberish(props11.totalVisible));
+    const computedLength = computed(() => resolveNumberish(props12.length));
+    const computedTotalVisible = computed(() => resolveNumberish(props12.totalVisible));
     const computedNumbersLength = computed(() => capacityLength.value - 2 - 2);
     const computedPage = computed(() => {
       const {
         routeQuery
-      } = props11;
+      } = props12;
       if (routeQuery) {
         return vui.location.getQuery(routeQuery, Number, 1);
       }
@@ -1727,14 +1735,14 @@ var VPagination = defineComponent({
     const isTransitioning = computed(() => {
       const {
         routeQuery
-      } = props11;
+      } = props12;
       return vui.location.isQueryOnlyTransitioning(routeQuery);
     });
-    const isDisabled = computed(() => props11.disabled || isTransitioning.value);
+    const isDisabled = computed(() => props12.disabled || isTransitioning.value);
     const classes = computed(() => [{
       "v-pagination--disabled": isDisabled.value,
-      "v-pagination--dense": props11.dense,
-      [`v-pagination--${props11.align}`]: true
+      "v-pagination--dense": props12.dense,
+      [`v-pagination--${props12.align}`]: true
     }, colorScope.value.className]);
     async function setPage(value) {
       if (isDisabled.value)
@@ -1742,7 +1750,7 @@ var VPagination = defineComponent({
       const {
         beforeChange,
         routeQuery
-      } = props11;
+      } = props12;
       const newPage = resolveNumberish(value);
       if (computedPage.value === newPage)
         return;
@@ -1835,7 +1843,7 @@ var VPagination = defineComponent({
       const key = `${source}-${index}`;
       const {
         routeQuery
-      } = props11;
+      } = props12;
       if (page !== void 0 && routeQuery) {
         const to = createRoutableLocationByPage(page, routeQuery);
         return createVNode(RouterLink, {
@@ -1855,7 +1863,7 @@ var VPagination = defineComponent({
         }, [children]);
       }
     }
-    watch(() => props11.modelValue, (modelValue) => {
+    watch(() => props12.modelValue, (modelValue) => {
       internalValue.value = resolveNumberish(modelValue);
     }, {
       immediate: true
@@ -1910,16 +1918,16 @@ var VListTile = defineComponent({
   emits: {
     ...listTileEmits
   },
-  setup(props11, ctx) {
+  setup(props12, ctx) {
     const vui = useVui();
     const startIcon = computed(() => {
-      let icon = resolveRawIconProp(false, props11.startIcon);
-      if (!icon && props11.startIconEmptySpace) {
+      let icon = resolveRawIconProp(false, props12.startIcon);
+      if (!icon && props12.startIconEmptySpace) {
         icon = resolveRawIconProp(false, "$empty");
       }
       return icon;
     });
-    const endIcon = computed(() => resolveRawIconProp(false, props11.endIcon));
+    const endIcon = computed(() => resolveRawIconProp(false, props12.endIcon));
     const hasTo = computed(() => !!ctx.attrs.to);
     const link = vui.useLink({
       to: ctx.attrs.to || ""
@@ -1927,9 +1935,9 @@ var VListTile = defineComponent({
     const isActive = computed(() => {
       if (!hasTo.value)
         return false;
-      return props11.exactMatch ? link.isExactActive.value : link.isActive.value;
+      return props12.exactMatch ? link.isExactActive.value : link.isActive.value;
     });
-    const color = useScopeColorClass(props11);
+    const color = useScopeColorClass(props12);
     const classes = computed(() => {
       const _color = color.value;
       const hasColor = !!_color.value;
@@ -1968,11 +1976,11 @@ var VDrawerLayout = defineComponent({
     ...createPaperBaseProps()
   },
   slots: paperBaseSlots,
-  setup(props11, ctx) {
+  setup(props12, ctx) {
     return () => {
       const paperProps = computed(() => ({
-        color: props11.color,
-        tag: props11.tag
+        color: props12.color,
+        tag: props12.tag
       }));
       return createVNode(VPaper, mergeProps({
         "class": "v-drawer-layout",
@@ -2011,16 +2019,16 @@ var VHero = defineComponent({
     ...slots4()
   },
   slots: slots4,
-  setup(props11, ctx) {
+  setup(props12, ctx) {
     return () => {
-      const TagName = props11.tag;
-      const HTagName = props11.hTag;
+      const TagName = props12.tag;
+      const HTagName = props12.hTag;
       const adornment = ctx.slots.adornment?.();
       return createVNode(VAppContainer, {
         "pulled": true
       }, {
         default: () => [createVNode(TagName, {
-          "class": ["v-hero", toScopeColorClass(props11.color)]
+          "class": ["v-hero", toScopeColorClass(props12.color)]
         }, {
           default: () => [createVNode(HTagName, {
             "class": "v-hero__title"
@@ -2055,25 +2063,25 @@ function createNavigationItemProps() {
 }
 function resolveNavigationItemInput(input) {
   let label = input.label;
-  const props11 = {
+  const props12 = {
     ...input
   };
   if (typeof label === "function") {
     label = label();
   }
-  delete props11.label;
+  delete props12.label;
   return {
     label,
-    props: props11
+    props: props12
   };
 }
 function renderNavigationItemInput(input, extraProps) {
   const {
     label,
-    props: props11
+    props: props12
   } = resolveNavigationItemInput(input);
   return createVNode(VNavigationItem, {
-    ...props11,
+    ...props12,
     ...extraProps
   }, _isSlot2(label) ? label : {
     default: () => [label]
@@ -2093,18 +2101,18 @@ var VNavigationItem = defineComponent({
   emits: {
     ...listTileEmits
   },
-  setup(props11, ctx) {
+  setup(props12, ctx) {
     const vui = useVui();
     const opened = ref(false);
     const children = computed(() => {
-      const c = props11.children;
+      const c = props12.children;
       return c && c.length ? c : void 0;
     });
     const to = computed(() => ctx.attrs.to);
     const match = computed(() => {
       const {
         match: match2
-      } = props11;
+      } = props12;
       const {
         to: to2
       } = ctx.attrs;
@@ -2120,7 +2128,7 @@ var VNavigationItem = defineComponent({
     });
     const classes = computed(() => [{
       "v-navigation-item--opened": opened.value,
-      [`v-navigation-item--depth-${props11.depth}`]: props11.depth > 0
+      [`v-navigation-item--depth-${props12.depth}`]: props12.depth > 0
     }]);
     const route = useRoute();
     watch(() => route.path, (newPath) => {
@@ -2142,7 +2150,7 @@ var VNavigationItem = defineComponent({
       const c = children.value;
       let {
         endIcon
-      } = props11;
+      } = props12;
       if (c && !endIcon) {
         endIcon = vui.icon("navigationExpand");
         if (typeof endIcon === "string") {
@@ -2156,7 +2164,7 @@ var VNavigationItem = defineComponent({
         }
       }
       const __props = {
-        ...props11,
+        ...props12,
         endIcon
       };
       delete __props.children;
@@ -2204,11 +2212,11 @@ var VNavigationItem = defineComponent({
         default: () => [withDirectives(createVNode("div", {
           "class": "v-navigation-item__expand"
         }, [_children.map((child) => renderNavigationItemInput({
-          color: props11.color,
+          color: props12.color,
           ...child
         }, {
           startIconEmptySpace: _props.value.startIconEmptySpace,
-          depth: props11.nested ? props11.depth + 1 : props11.depth
+          depth: props12.nested ? props12.depth + 1 : props12.depth
           // onClick,
           // onChangeActive,
         }))]), [[vShow, opened.value]])]
@@ -2233,13 +2241,13 @@ function createNavigationProps() {
 var VNavigation = defineComponent({
   name: "VNavigation",
   props: createNavigationProps(),
-  setup(props11, ctx) {
-    const items = computed(() => props11.items);
-    const color = useScopeColorClass(props11);
+  setup(props12, ctx) {
+    const items = computed(() => props12.items);
+    const color = useScopeColorClass(props12);
     const classes = computed(() => [color.value.className]);
-    const startIconEmptySpace = computed(() => props11.startIconEmptySpace);
+    const startIconEmptySpace = computed(() => props12.startIconEmptySpace);
     const caption = computed(() => {
-      const c = props11.caption;
+      const c = props12.caption;
       return typeof c === "function" ? c() : c;
     });
     const itemsRef = ref([]);
@@ -2312,40 +2320,40 @@ var VControlField = defineComponent({
   emits: {
     click: (ev) => true
   },
-  setup(props11, ctx) {
+  setup(props12, ctx) {
     const parentNode = useParentFormNode();
-    const control = useControl(props11);
-    const inputBox = useControlField(props11);
+    const control = useControl(props12);
+    const inputBox = useControlField(props12);
     const hostElRef = ref(null);
     const disabled = computed(() => !!parentNode && parentNode.isDisabled);
     const invalid = computed(() => !!parentNode && parentNode.invalid);
-    const autoHeight = computed(() => props11.autoHeight);
+    const autoHeight = computed(() => props12.autoHeight);
     const readonly = computed(() => !!parentNode && parentNode.isReadonly);
     const colorProvider = useVuiColorProvider();
     const classes = computed(() => {
       const classes2 = ["v-control-field", `v-control-field--${inputBox.variant.value}`, {
         "v-control-field--disabled": disabled.value,
-        "v-control-field--invalid": invalid.value || props11.error,
+        "v-control-field--invalid": invalid.value || props12.error,
         "v-control-field--readonly": readonly.value,
-        "v-control-field--focused": props11.focused,
+        "v-control-field--focused": props12.focused,
         "v-control-field--auto-height": autoHeight.value
-      }, control.classes.value, colorProvider.className(props11.error ? "error" : invalid.value && !readonly.value ? "error" : "primary")];
+      }, control.classes.value, colorProvider.className(props12.error ? "error" : invalid.value && !readonly.value ? "error" : "primary")];
       return classes2;
     });
     const resolvedSlots = computed(() => {
       const slots13 = {};
       ADORNMENT_POSITIONS.forEach((position) => {
         const key = `${position}Adornment`;
-        slots13[position] = resolveVNodeChildOrSlots(props11[key], ctx.slots[key]);
+        slots13[position] = resolveVNodeChildOrSlots(props12[key], ctx.slots[key]);
       });
       return slots13;
     });
     const renderAdornment = (position) => {
       let child;
-      if (position === "end" && props11.loading) {
+      if (position === "end" && props12.loading) {
         child = createVNode(loading_exports.VProgressCircular, {
           "indeterminate": true,
-          "size": CONTROL_LOADING_SPINNER_SIZES[props11.size || "md"]
+          "size": CONTROL_LOADING_SPINNER_SIZES[props12.size || "md"]
         }, null);
       } else {
         child = resolvedSlots.value[position]?.();
@@ -2398,12 +2406,12 @@ var VCheckable = defineComponent({
     // autoWidth: Boolean,
   },
   slots: slots6,
-  setup(props11, ctx) {
+  setup(props12, ctx) {
     const colorProvider = useVuiColorProvider();
-    const invalid = computed(() => props11.invalid);
-    const disabled = computed(() => props11.disabled);
-    const readonly = computed(() => props11.readonly);
-    const checked = computed(() => props11.checked);
+    const invalid = computed(() => props12.invalid);
+    const disabled = computed(() => props12.disabled);
+    const readonly = computed(() => props12.readonly);
+    const checked = computed(() => props12.checked);
     const classes = computed(() => {
       return [{
         "v-checkable--invalid": invalid.value,
@@ -2439,42 +2447,43 @@ var VCheckbox = defineComponent({
     indeterminate: Boolean
   },
   emits: emits3,
-  setup(props11, ctx) {
-    const nodeControl = useFormSelectorItemControl(props11, ctx, {
+  setup(props12, ctx) {
+    const nodeControl = useFormSelectorItemControl(props12, ctx, {
       nodeType: VUI_CHECKBOX_SYMBOL,
       parentNodeType: VUI_CHECKBOX_GROUP_SYMBOL
     });
-    const control = useControl(props11);
-    const isIndeterminate = computed(() => props11.indeterminate);
-    return {
-      ...nodeControl.expose(),
-      ...control,
-      isIndeterminate
-    };
-  },
-  render() {
-    const {
-      selectorItemControl,
-      isIndeterminate
-    } = this;
-    return createVNode(VCheckable, {
-      "class": ["v-checkbox", {
-        "v-checkbox--selected": selectorItemControl.selected,
-        "v-checkbox--indeterminate": isIndeterminate
-      }, this.classes],
-      "checked": this.selected || isIndeterminate,
-      "invalid": this.invalid,
-      "disabled": this.isDisabled,
-      "readonly": this.isReadonly
-    }, {
-      input: () => selectorItemControl.createInputElement({
+    const control = useControl(props12);
+    const isIndeterminate = computed(() => props12.indeterminate);
+    const classes = computed(() => ["v-checkbox", {
+      "v-checkbox--selected": nodeControl.selected,
+      "v-checkbox--indeterminate": isIndeterminate.value
+    }, control.classes.value]);
+    const api = nodeControl.extend({
+      get isIndeterminate() {
+        return isIndeterminate.value;
+      }
+    });
+    ctx.expose({
+      control: api
+    });
+    const slots13 = {
+      input: () => nodeControl.createInputElement({
         type: "checkbox"
       }),
       faux: () => createVNode("span", {
         "class": "v-checkbox__faux"
       }, null),
-      label: () => this.$slots.default?.()
-    });
+      label: () => ctx.slots.default?.()
+    };
+    return () => {
+      return createVNode(VCheckable, {
+        "class": classes.value,
+        "checked": nodeControl.selected || isIndeterminate.value,
+        "invalid": nodeControl.invalid,
+        "disabled": nodeControl.isDisabled,
+        "readonly": nodeControl.isReadonly
+      }, slots13);
+    };
   }
 });
 function _isSlot3(s) {
@@ -2503,38 +2512,33 @@ var VRadio = defineComponent({
     ...createControlProps()
   },
   emits: emits4,
-  setup(props11, ctx) {
-    const nodeControl = useFormSelectorItemControl(props11, ctx, {
+  setup(props12, ctx) {
+    const nodeControl = useFormSelectorItemControl(props12, ctx, {
       nodeType: VUI_RADIO_SYMBOL,
       parentNodeType: VUI_RADIO_GROUP_SYMBOL
     });
-    const control = useControl(props11);
-    return {
-      ...nodeControl.expose(),
-      ...control
-    };
-  },
-  render() {
-    const {
-      selectorItemControl
-    } = this;
-    return createVNode(VCheckable, {
-      "class": ["v-radio", {
-        "v-radio--selected": selectorItemControl.selected
-      }, this.classes],
-      "checked": this.selected,
-      "invalid": this.invalid,
-      "disabled": this.isDisabled,
-      "readonly": this.isReadonly
-    }, {
-      input: () => selectorItemControl.createInputElement({
+    const control = useControl(props12);
+    const classes = computed(() => ["v-radio", {
+      "v-radio--selected": nodeControl.selected
+    }, control.classes.value]);
+    const slots13 = {
+      input: () => nodeControl.createInputElement({
         type: "radio"
       }),
       faux: () => createVNode("span", {
         "class": "v-radio__faux"
       }, null),
-      label: () => this.$slots.default?.()
-    });
+      label: () => ctx.slots.default?.()
+    };
+    return () => {
+      return createVNode(VCheckable, {
+        "class": classes.value,
+        "checked": nodeControl.selected,
+        "invalid": nodeControl.invalid,
+        "disabled": nodeControl.isDisabled,
+        "readonly": nodeControl.isReadonly
+      }, slots13);
+    };
   }
 });
 function _isSlot4(s) {
@@ -2562,36 +2566,22 @@ var VSwitch = defineComponent({
     ...createControlProps()
   },
   emits: emits5,
-  setup(props11, ctx) {
-    const nodeControl = useFormSelectorItemControl(props11, ctx, {
+  setup(props12, ctx) {
+    const nodeControl = useFormSelectorItemControl(props12, ctx, {
       nodeType: VUI_SWITCH_SYMBOL,
       parentNodeType: VUI_SWITCH_GROUP_SYMBOL
     });
-    const control = useControl(props11);
+    const control = useControl(props12);
     if (typeof window !== "undefined") {
       window.yy = {};
       window.yy[String(Date.now())] = nodeControl;
     }
-    return {
-      ...nodeControl.expose(),
-      ...control
-    };
-  },
-  render() {
-    const {
-      selectorItemControl
-    } = this;
-    return createVNode(VCheckable, {
-      "class": ["v-switch", {
-        "v-switch--selected": selectorItemControl.selected,
-        "v-switch--disabled": selectorItemControl.isDisabled
-      }, this.classes],
-      "checked": this.selected,
-      "invalid": this.invalid,
-      "disabled": this.isDisabled,
-      "readonly": this.isReadonly
-    }, {
-      input: () => selectorItemControl.createInputElement({
+    const classes = computed(() => ["v-switch", {
+      "v-switch--selected": nodeControl.selected,
+      "v-switch--disabled": nodeControl.isDisabled
+    }, control.classes.value]);
+    const slots13 = {
+      input: () => nodeControl.createInputElement({
         type: "checkbox"
       }),
       icon: () => createVNode("span", {
@@ -2599,8 +2589,20 @@ var VSwitch = defineComponent({
       }, [createVNode("span", {
         "class": "v-switch__faux__pin"
       }, null)]),
-      label: () => this.$slots.default?.()
+      label: () => ctx.slots.default?.()
+    };
+    ctx.expose({
+      control: nodeControl
     });
+    return () => {
+      return createVNode(VCheckable, {
+        "class": classes.value,
+        "checked": nodeControl.selected,
+        "invalid": nodeControl.invalid,
+        "disabled": nodeControl.isDisabled,
+        "readonly": nodeControl.isReadonly
+      }, slots13);
+    };
   }
 });
 function _isSlot5(s) {
@@ -2629,12 +2631,12 @@ var VOption = defineComponent({
     ...createControlProps()
   },
   emits: emits6,
-  setup(props11, ctx) {
-    const nodeControl = useFormSelectorItemControl(props11, ctx, {
+  setup(props12, ctx) {
+    const nodeControl = useFormSelectorItemControl(props12, ctx, {
       nodeType: VUI_OPTION_SYMBOL,
       parentNodeType: VUI_SELECT_SYMBOL
     });
-    const control = useControl(props11);
+    const control = useControl(props12);
     const classes = computed(() => {
       return ["v-option", {
         "v-option--selected": nodeControl.selected,
@@ -2642,26 +2644,17 @@ var VOption = defineComponent({
         "v-option--disabled": nodeControl.isDisabled
       }, control.classes.value];
     });
-    return {
-      ...nodeControl.expose(),
-      classes
+    return () => {
+      return createVNode("label", {
+        "class": classes.value,
+        "onClick": nodeControl.handleClickElement,
+        "tabindex": nodeControl.tabindex,
+        "data-value": nodeControl.propValue,
+        "aria-disabled": nodeControl.isDisabled
+      }, [createVNode("span", {
+        "class": "v-option__label"
+      }, [ctx.slots.default?.()])]);
     };
-  },
-  render() {
-    const {
-      selectorItemControl,
-      classes
-    } = this;
-    return createVNode("label", mergeProps({
-      "class": classes,
-      "onClick": selectorItemControl.handleClickElement,
-      "tabindex": selectorItemControl.tabindex,
-      "data-value": selectorItemControl.propValue
-    }, {
-      "aria-disabled": selectorItemControl.isDisabled
-    }), [createVNode("span", {
-      "class": "v-option__label"
-    }, [this.$slots.default?.()])]);
   }
 });
 var slots7 = defineSlots();
@@ -2674,36 +2667,29 @@ var VOptionGroup = defineComponent({
     ...slots7()
   },
   slots: slots7,
-  setup(props11, ctx) {
-    const groupControl = useFormSelectorItemGroupControl(props11, ctx, {
+  setup(props12, ctx) {
+    const groupControl = useFormSelectorItemGroupControl(props12, ctx, {
       parentNodeType: VUI_SELECT_SYMBOL
     });
     const labelSlot = computed(() => {
-      return resolveVNodeChildOrSlots(props11.label, ctx.slots.label);
+      return resolveVNodeChildOrSlots(props12.label, ctx.slots.label);
     });
     const classes = computed(() => {
       return ["v-option-group", {
         "v-option-group--disabled": groupControl.isDisabled
       }];
     });
-    return {
-      ...groupControl.expose(),
-      classes,
-      labelSlot
+    ctx.expose({
+      control: groupControl
+    });
+    return () => {
+      const label = labelSlot.value?.(groupControl);
+      return createVNode("div", {
+        "class": classes
+      }, [!!label && createVNode("div", {
+        "class": "v-option-group__label"
+      }, [label]), ctx.slots.default?.()]);
     };
-  },
-  render() {
-    const {
-      labelSlot,
-      classes,
-      groupControl
-    } = this;
-    const label = labelSlot ? labelSlot(groupControl) : void 0;
-    return createVNode("div", {
-      "class": classes
-    }, [!!label && createVNode("div", {
-      "class": "v-option-group__label"
-    }, [label]), this.$slots.default?.()]);
   }
 });
 function _isSlot6(s) {
@@ -2711,11 +2697,13 @@ function _isSlot6(s) {
 }
 var ARROW_KEY_TYPES = useKeyboard.Key(["ArrowUp", "ArrowDown"]);
 var CHOICE_KEY_TYPES = useKeyboard.Key(["Enter", " "]);
-var KEYBORD_EVENT_TYPES = useKeyboard.Key([...ARROW_KEY_TYPES, ...CHOICE_KEY_TYPES]);
+var KEYBOARD_EVENT_TYPES = useKeyboard.Key([...ARROW_KEY_TYPES, ...CHOICE_KEY_TYPES]);
 var {
   props: props7,
   emits: emits7
-} = createFormSelectorSettings();
+} = createFormSelectorSettings({
+  defaultValidateTiming: "blur"
+});
 var slots8 = defineSlots();
 var VSelect = defineComponent({
   name: "VSelect",
@@ -2735,7 +2723,7 @@ var VSelect = defineComponent({
   },
   slots: slots8,
   emits: emits7,
-  setup(props11, ctx) {
+  setup(props12, ctx) {
     const menuRef = ref(null);
     const menuOpened = ref(false);
     const showMenu = () => {
@@ -2744,23 +2732,23 @@ var VSelect = defineComponent({
     const closeMenu = () => {
       menuOpened.value = false;
     };
-    const inputControl = useFormSelectorControl(props11, ctx, {
+    const inputControl = useFormSelectorControl(props12, ctx, {
       nodeType: VUI_SELECT_SYMBOL,
       onSelectItem: (item) => {
         closeMenu();
       }
     });
-    const control = useControl(props11);
-    useControlField(props11);
+    const control = useControl(props12);
+    useControlField(props12);
     const vui = useVui();
     const iconName = vui.icon("menuDown");
     const fieldRef = ref(null);
     const loadingMessageRef = computed(() => {
-      const slot = resolveVNodeChildOrSlots(props11.loadingMessage, vui.setting("loadingMessage"), "Loading...");
+      const slot = resolveVNodeChildOrSlots(props12.loadingMessage, vui.setting("loadingMessage"), "Loading...");
       return slot && slot(vui);
     });
     const failedToLoadItemsMessageRef = computed(() => {
-      const slot = resolveVNodeChildOrSlots(props11.failedToLoadItemsMessage, vui.setting("failedToLoadDataMessage"), "Failed to load data.");
+      const slot = resolveVNodeChildOrSlots(props12.failedToLoadItemsMessage, vui.setting("failedToLoadDataMessage"), "Failed to load data.");
       return slot && slot(vui);
     });
     const focus = (opts) => {
@@ -2788,10 +2776,10 @@ var VSelect = defineComponent({
           }) : item.renderDefaultSlot();
           children.push(child);
         });
-      } else if (props11.placeholder != null) {
+      } else if (props12.placeholder != null) {
         children.push(createVNode("span", {
           "class": "v-select__placeholder"
-        }, [props11.placeholder]));
+        }, [props12.placeholder]));
       }
       return children;
     };
@@ -2894,94 +2882,110 @@ var VSelect = defineComponent({
         return choiceKeyHandler(ev);
     };
     useKeyboard([{
-      key: KEYBORD_EVENT_TYPES,
+      key: KEYBOARD_EVENT_TYPES,
       handler: keyboardEventHandler
     }], {
       autorun: true
     });
-    return {
-      ...inputControl.expose(),
-      ...control,
-      iconName,
-      menuOpened,
-      fieldRef: () => fieldRef,
+    ctx.expose({
+      control: inputControl,
       focus,
       showMenu,
-      closeMenu,
-      renderSelections,
-      menuRef: () => menuRef,
-      clearKeyFocused
+      closeMenu
+    });
+    const handleClickLabel = (ev) => {
+      focus();
     };
-  },
-  render() {
-    const {
-      nodeControl,
-      selectorControl,
-      selectorItems,
-      selectedItems
-    } = this;
-    const children = this.$slots.default?.() || [];
-    const propGroups = this.propGroups.map((group) => {
-      let _slot;
-      return createVNode(VOptionGroup, {
-        "key": group.id,
-        "groupId": group.id,
-        "label": group.label(selectorControl),
-        "disabled": group.disabled
-      }, _isSlot6(_slot = group.items.map((item) => createVNode(VOption, {
-        "disabled": item.disabled,
-        "value": item.value,
-        "key": item.value
-      }, {
-        default: () => item.label(selectorControl)
-      }))) ? _slot : {
-        default: () => [_slot]
+    return () => {
+      const children = ctx.slots.default?.() || [];
+      const propGroups = inputControl.propGroups.map((group) => {
+        let _slot2;
+        return createVNode(VOptionGroup, {
+          "key": group.id,
+          "groupId": group.id,
+          "label": group.label(inputControl),
+          "disabled": group.disabled
+        }, _isSlot6(_slot2 = group.items.map((item) => {
+          let _slot;
+          return createVNode(VOption, {
+            "disabled": item.disabled,
+            "value": item.value,
+            "key": item.value
+          }, _isSlot6(_slot = item.label(inputControl)) ? _slot : {
+            default: () => [_slot]
+          });
+        })) ? _slot2 : {
+          default: () => [_slot2]
+        });
       });
-    });
-    return createVNode(VFormControl, {
-      "nodeControl": nodeControl,
-      "class": ["v-select", this.classes, {
-        "v-select--multiple": this.multiple
-      }],
-      "label": this.label,
-      "hint": this.hint,
-      "hinttip": this.hinttip,
-      "hiddenInfo": this.hiddenInfo,
-      "requiredChip": this.requiredChip,
-      "onClickLabel": (ev) => {
-        this.focus();
-      }
-    }, {
-      ...this.$slots,
-      default: () => createVNode(VMenu, {
-        "width": "fit",
-        "maxWidth": "fit",
-        "closeOnNavigation": this.closeOnNavigation,
-        "distance": 0,
-        "alwaysRender": true,
-        "modelValue": this.menuOpened,
-        "onUpdate:modelValue": ($event) => this.menuOpened = $event,
-        "ref": this.menuRef(),
-        "onClose": this.clearKeyFocused
-      }, {
-        default: () => [createVNode("div", {
-          "class": ["v-select__body", this.classes]
-        }, [children, propGroups])],
-        activator: ({
-          attrs,
-          control
-        }) => [createVNode(VControlField, {
+      const classes = computed(() => ["v-select", control.classes.value, {
+        "v-select--multiple": inputControl.multiple
+      }]);
+      const controlDefaultSlot = () => {
+        return [withDirectives(createVNode("select", {
+          "class": "v-select__input__element",
+          "name": inputControl.name,
+          "tabindex": inputControl.tabindex,
+          "disabled": inputControl.isDisabled,
+          "multiple": inputControl.multiple,
+          "onFocus": inputControl.focusHandler,
+          "onBlur": inputControl.blurHandler,
+          "onUpdate:modelValue": ($event) => inputControl.value = $event
+        }, [inputControl.items.map((item) => {
+          return createVNode("option", {
+            "value": item.propValue,
+            "key": item.propValue
+          }, [item.renderDefaultSlot()]);
+        })]), [[vModelSelect, inputControl.value]]), createVNode("div", {
+          "class": "v-select__selections"
+        }, [createVNode("div", {
+          "class": "v-select__selections__inner"
+        }, [renderSelections(inputControl.selectedItems)])])];
+      };
+      const endAdornmentSlot = () => {
+        if (inputControl.itemsLoadFailed) {
+          return createVNode(VButton, {
+            "key": "reload",
+            "icon": vui.icon("reload"),
+            "rounded": true,
+            "onClick": (ev) => {
+              ev.stopPropagation();
+              inputControl.loadItems();
+            }
+          }, null);
+        }
+        if (props12.clearable && inputControl.value != null) {
+          return createVNode(VButton, {
+            "key": "clear",
+            "icon": vui.icon("clear"),
+            "rounded": true,
+            "onClick": (ev) => {
+              ev.stopPropagation();
+              inputControl.clear();
+            }
+          }, null);
+        }
+        return createVNode(VIcon, {
+          "key": "icon",
+          "name": iconName,
+          "rotate": menuOpened.value ? 180 : 0
+        }, null);
+      };
+      const menuActivatorSlot = ({
+        control: menu
+      }) => {
+        return createVNode(VControlField, {
           "class": "v-select__input",
-          "ref": this.fieldRef(),
-          "loading": selectorControl.itemsLoading,
-          "error": selectorControl.itemsLoadFailed,
-          "startAdornment": this.startAdornment,
-          "endAdornment": this.endAdornment,
-          "size": this.size,
-          "focused": this.menuOpened,
-          "autoHeight": this.multiple,
+          "ref": fieldRef,
+          "loading": inputControl.itemsLoading,
+          "error": inputControl.itemsLoadFailed,
+          "startAdornment": props12.startAdornment,
+          "endAdornment": props12.endAdornment,
+          "size": control.size.value,
+          "focused": menuOpened.value,
+          "autoHeight": inputControl.multiple,
           "onClick": (ev) => {
-            if (this.canOperation && !control.isActive) {
+            if (inputControl.canOperation && !menu.isActive) {
               let t = ev.target;
               const count = 0;
               let hit = false;
@@ -2992,62 +2996,48 @@ var VSelect = defineComponent({
                 }
                 t = t.parentElement;
               }
-              control.setActivator(hit ? t : ev).show();
+              menu.setActivator(hit ? t : ev).show();
             }
           }
         }, {
-          ...this.$slots,
-          default: () => [withDirectives(createVNode("select", {
-            "class": "v-select__input__element",
-            "name": this.name,
-            "tabindex": this.computedTabindex,
-            "disabled": this.isDisabled,
-            "multiple": this.multiple,
-            "onFocus": nodeControl.focusHandler,
-            "onBlur": nodeControl.blurHandler,
-            "onUpdate:modelValue": ($event) => this.currentValue = $event
-          }, [selectorItems.map((item) => {
-            return createVNode("option", {
-              "value": item.propValue,
-              "key": item.propValue
-            }, [item.renderDefaultSlot()]);
-          })]), [[vModelSelect, this.currentValue]]), createVNode("div", {
-            "class": "v-select__selections"
-          }, [createVNode("div", {
-            "class": "v-select__selections__inner"
-          }, [this.renderSelections(selectedItems)])])],
-          endAdornment: () => {
-            if (selectorControl.itemsLoadFailed) {
-              return createVNode(VButton, {
-                "key": "reload",
-                "icon": this.$vui.icon("reload"),
-                "rounded": true,
-                "onClick": (ev) => {
-                  ev.stopPropagation();
-                  selectorControl.loadItems();
-                }
-              }, null);
-            }
-            if (this.clearable && this.nodeControl.value != null) {
-              return createVNode(VButton, {
-                "key": "clear",
-                "icon": this.$vui.icon("clear"),
-                "rounded": true,
-                "onClick": (ev) => {
-                  ev.stopPropagation();
-                  this.nodeControl.clear();
-                }
-              }, null);
-            }
-            return createVNode(VIcon, {
-              "key": "icon",
-              "name": this.iconName,
-              "rotate": this.menuOpened ? 180 : 0
-            }, null);
-          }
-        })]
-      })
-    });
+          ...ctx.slots,
+          default: controlDefaultSlot,
+          endAdornment: endAdornmentSlot
+        });
+      };
+      const menuSlots = {
+        activator: menuActivatorSlot,
+        default: () => createVNode("div", {
+          "class": ["v-select__body", control.classes.value]
+        }, [children, propGroups])
+      };
+      const defaultSlot = () => {
+        return createVNode(VMenu, {
+          "width": "fit",
+          "maxWidth": "fit",
+          "closeOnNavigation": props12.closeOnNavigation,
+          "distance": 0,
+          "alwaysRender": true,
+          "modelValue": menuOpened.value,
+          "onUpdate:modelValue": ($event) => menuOpened.value = $event,
+          "ref": menuRef,
+          "onClose": clearKeyFocused
+        }, menuSlots);
+      };
+      return createVNode(VFormControl, {
+        "nodeControl": inputControl,
+        "class": classes.value,
+        "label": props12.label,
+        "hint": props12.hint,
+        "hinttip": props12.hinttip,
+        "hiddenInfo": props12.hiddenInfo,
+        "requiredChip": props12.requiredChip,
+        "onClickLabel": handleClickLabel
+      }, {
+        ...ctx.slots,
+        default: defaultSlot
+      });
+    };
   }
 });
 var {
@@ -3070,52 +3060,57 @@ var VTextField = defineComponent({
   props: createTextFieldProps(),
   emits: emits8,
   slots: slots9,
-  setup(props11, ctx) {
-    const inputControl = useTextInputControl(props11, ctx, {
+  setup(props12, ctx) {
+    const inputControl = useTextInputControl(props12, ctx, {
       nodeType: VUI_TEXT_FIELD_SYMBOL
     });
-    const control = useControl(props11);
-    useControlField(props11);
-    return {
-      ...inputControl.expose(),
-      ...control
+    const control = useControl(props12);
+    useControlField(props12);
+    const classes = computed(() => ["v-text-field", control.classes.value]);
+    const handleClickLabel = (ev) => {
+      inputControl.focus();
     };
-  },
-  render() {
-    return createVNode(VFormControl, {
-      "nodeControl": this.nodeControl,
-      "focused": this.nodeControl.focused,
-      "hiddenInfo": this.hiddenInfo,
-      "class": ["v-text-field", this.classes],
-      "label": this.label,
-      "hint": this.hint,
-      "hinttip": this.hinttip,
-      "requiredChip": this.requiredChip,
-      "onClickLabel": (ev) => {
-        this.focus();
-      }
-    }, {
-      ...this.$slots,
-      default: () => createVNode(VControlField, {
+    const defaultSlot = () => {
+      return createVNode(VControlField, {
         "class": "v-text-field__input",
-        "startAdornment": this.startAdornment,
-        "endAdornment": this.endAdornment,
-        "size": this.size
+        "startAdornment": props12.startAdornment,
+        "endAdornment": props12.endAdornment,
+        "size": control.size.value
       }, {
-        ...this.$slots,
-        default: () => this.textInputControl.createInputElement({
+        ...ctx.slots,
+        default: () => inputControl.createInputElement({
           class: "v-text-field__input__element"
         })
-      }),
-      infoAppends: () => {
-        const {
-          counterResult
-        } = this;
-        if (!counterResult)
-          return;
-        return createVNode(VTextCounter, counterResult, null);
-      }
+      });
+    };
+    const infoAppendsSlot = () => {
+      const {
+        counterResult
+      } = inputControl;
+      if (!counterResult)
+        return;
+      return createVNode(VTextCounter, counterResult, null);
+    };
+    ctx.expose({
+      control: inputControl
     });
+    return () => {
+      return createVNode(VFormControl, {
+        "nodeControl": inputControl,
+        "focused": inputControl.focused,
+        "hiddenInfo": props12.hiddenInfo,
+        "class": classes.value,
+        "label": props12.label,
+        "hint": props12.hint,
+        "hinttip": props12.hinttip,
+        "requiredChip": props12.requiredChip,
+        "onClickLabel": handleClickLabel
+      }, {
+        ...ctx.slots,
+        default: defaultSlot,
+        infoAppends: infoAppendsSlot
+      });
+    };
   }
 });
 var toString = (value) => {
@@ -3146,7 +3141,7 @@ var VNumberField = defineComponent({
     "update:modelValue": (value) => true,
     change: (value) => true
   },
-  setup(props11, ctx) {
+  setup(props12, ctx) {
     const hasNumberMask = computed(() => {
       const {
         mask
@@ -3172,7 +3167,7 @@ var VNumberField = defineComponent({
         "type": hasNumberMask.value ? "text" : "number",
         "inputmode": inputmode.value,
         "maskModel": "typed",
-        "modelValue": toString(props11.modelValue),
+        "modelValue": toString(props12.modelValue),
         "onUpdate:modelValue": onUpdateModelValue,
         "onChange": onChange
       }), ctx.slots);
@@ -3195,87 +3190,111 @@ var VTextarea = defineComponent({
     ...slots10()
   },
   emits: emits9,
-  setup(props11, ctx) {
+  setup(props12, ctx) {
     const vui = useVui();
-    const inputControl = useTextareaControl(props11, ctx, {
+    const inputControl = useTextareaControl(props12, ctx, {
       nodeType: VUI_TEXTAREA_SYMBOL,
       defaultRows: vui.textareaRows
     });
-    const control = useControl(props11);
-    useControlField(props11);
-    return {
-      ...inputControl.expose(),
-      ...control
-    };
-  },
-  render() {
-    return createVNode(VFormControl, {
-      "nodeControl": this.nodeControl,
-      "focused": this.nodeControl.focused,
-      "class": ["v-textarea", this.classes],
-      "label": this.label,
-      "hint": this.hint,
-      "hinttip": this.hinttip,
-      "hiddenInfo": this.hiddenInfo,
-      "requiredChip": this.requiredChip,
-      "onClickLabel": (ev) => {
-        this.focus();
-      }
-    }, {
-      ...this.$slots,
-      default: () => createVNode(VControlField, {
+    const control = useControl(props12);
+    useControlField(props12);
+    ctx.expose({
+      control: inputControl
+    });
+    const defaultSlot = () => {
+      return createVNode(VControlField, {
         "class": "v-textarea__input",
-        "size": this.size,
+        "size": control.size.value,
         "autoHeight": true,
-        "startAdornment": this.startAdornment,
-        "endAdornment": this.endAdornment
+        "startAdornment": props12.startAdornment,
+        "endAdornment": props12.endAdornment
       }, {
-        ...this.$slots,
-        default: () => this.textareaControl.createInputElement({
+        ...ctx.slots,
+        default: () => inputControl.createInputElement({
           class: "v-textarea__input__element"
         })
-      }),
-      infoAppends: () => {
-        const {
-          counterResult
-        } = this;
-        if (!counterResult)
-          return;
-        return createVNode(VTextCounter, counterResult, null);
-      }
-    });
+      });
+    };
+    const infoAppendsSlot = () => {
+      const {
+        counterResult
+      } = inputControl;
+      if (!counterResult)
+        return;
+      return createVNode(VTextCounter, counterResult, null);
+    };
+    return () => {
+      return createVNode(VFormControl, {
+        "nodeControl": inputControl,
+        "focused": inputControl.focused,
+        "class": ["v-textarea", control.classes.value],
+        "label": props12.label,
+        "hint": props12.hint,
+        "hinttip": props12.hinttip,
+        "hiddenInfo": props12.hiddenInfo,
+        "requiredChip": props12.requiredChip,
+        "onClickLabel": (ev) => {
+          inputControl.focus();
+        }
+      }, {
+        ...ctx.slots,
+        default: defaultSlot,
+        infoAppends: infoAppendsSlot
+      });
+    };
   }
 });
 var {
   props: props10,
   emits: emits10
+} = createFormGroupSettings();
+var formGroupSlots = defineSlots();
+function createVFormGroupProps() {
+  return {
+    ...props10,
+    ...createControlProps(),
+    ...formGroupSlots()
+  };
+}
+var VFormGroup = defineComponent({
+  name: "VFormGroup",
+  inheritAttrs: false,
+  props: createVFormGroupProps(),
+  emits: emits10,
+  slots: formGroupSlots,
+  setup(props12, ctx) {
+    const nodeControl = useFormGroup(props12, ctx, {
+      nodeType: VUI_FORM_GROUP_SYMBOL
+    });
+    useControl(props12);
+    ctx.expose({
+      control: nodeControl
+    });
+    return () => ctx.slots.default?.(nodeControl);
+  }
+});
+var {
+  props: props11,
+  emits: emits11
 } = createFormSettings({
   nodeType: VUI_FORM_SYMBOL
 });
 var formSlots = defineSlots();
 function createVFormProps() {
   return {
-    ...props10,
+    ...props11,
     ...createControlProps(),
     ...formSlots()
-    // disableAutoScroll: Boolean,
   };
 }
 var VForm = defineComponent({
   name: "VForm",
   props: createVFormProps(),
-  emits: emits10,
+  emits: emits11,
   slots: formSlots,
-  setup(props11, ctx) {
-    const vui = useVui();
-    const nodeControl = useForm(props11, ctx, {
-      nodeType: VUI_FORM_SYMBOL,
-      scrollToElement: (el) => {
-        const scroller = getDocumentScroller();
-        return scroller.toElement(el, {
-          offset: vui.getAutoScrollToElementOffsetTop()
-        });
-      }
+  setup(props12, ctx) {
+    const nodeControl = useForm(props12, ctx, {
+      nodeType: VUI_FORM_SYMBOL
     });
     const classes = computed(() => {
       return ["v-form", {
@@ -3287,23 +3306,17 @@ var VForm = defineComponent({
         "v-form--sending": nodeControl.sending
       }];
     });
-    useControl(props11);
-    return {
-      ...nodeControl.expose(),
-      classes
-    };
-  },
-  render() {
-    const {
-      form
-    } = this;
-    return createVNode("form", {
-      "ref": this.formRef(),
-      "class": this.classes,
-      "action": this.nativeAction,
-      "spellcheck": this.spellcheck,
-      "onSubmit": form.handleSubmit
-    }, [this.$slots.default?.(form)]);
+    useControl(props12);
+    ctx.expose({
+      control: nodeControl
+    });
+    return () => createVNode("form", {
+      "ref": nodeControl.formRef(),
+      "class": classes.value,
+      "action": nodeControl.nativeAction,
+      "spellcheck": nodeControl.spellcheck,
+      "onSubmit": nodeControl.handleSubmit
+    }, [ctx.slots.default?.(nodeControl)]);
   }
 });
 function _isSlot7(s) {
@@ -3323,13 +3336,13 @@ var VTab = defineComponent({
   emits: {
     click: (ev) => true
   },
-  setup(props11, ctx) {
+  setup(props12, ctx) {
     const classesRef = computed(() => ({
-      "v-tab--active": props11.active
+      "v-tab--active": props12.active
     }));
     const exposeValues = {
-      value: props11.value,
-      active: props11.active
+      value: props12.value,
+      active: props12.active
     };
     ctx.expose(exposeValues);
     return () => {
@@ -3338,7 +3351,7 @@ var VTab = defineComponent({
         value,
         icon,
         active
-      } = props11;
+      } = props12;
       const classes = ["v-tab", classesRef.value];
       const children = createVNode("span", {
         "class": "v-tab__content"
@@ -3407,7 +3420,7 @@ var VTabs = defineComponent({
     change: (newValue) => true
   },
   slots: slots11,
-  setup(props11, ctx) {
+  setup(props12, ctx) {
     const vui = useVui();
     const internalValueRef = ref(null);
     const ScrollerRef = VScroller.$ref();
@@ -3425,15 +3438,15 @@ var VTabs = defineComponent({
       }
     });
     const colorScope = useScopeColorClass({
-      color: () => props11.color || vui.setting("tabDefault").color
+      color: () => props12.color || vui.setting("tabDefault").color
     });
     const classes = computed(() => [colorScope.value.className]);
     const computedItemsRef = computed(() => {
       const current = currentRef.value;
       const {
         router
-      } = props11;
-      return props11.items.map((item) => {
+      } = props12;
+      return props12.items.map((item) => {
         const {
           value
         } = item;
@@ -3458,9 +3471,9 @@ var VTabs = defineComponent({
       tabRefs.value.push(ref10);
     };
     function setupInternalValue(routable) {
-      let value = props11.modelValue;
+      let value = props12.modelValue;
       if (value == null || value === "") {
-        const firstItem = props11.items[0];
+        const firstItem = props12.items[0];
         if (!firstItem)
           return;
         value = firstItem.value;
@@ -3470,7 +3483,7 @@ var VTabs = defineComponent({
         if (routable) {
           const {
             router
-          } = props11;
+          } = props12;
           if (!router)
             return;
           const hit = computedItemsRef.value.find((item) => item.value === value);
@@ -3488,7 +3501,7 @@ var VTabs = defineComponent({
           if (route.fullPath === vui.location.currentRoute.fullPath)
             return;
           vui.router[to2.replace ? "replace" : "push"](to2);
-        } else if (!props11.router && props11.modelValue !== value) {
+        } else if (!props12.router && props12.modelValue !== value) {
           ctx.emit("update:modelValue", value);
           ctx.emit("change", value);
         }
@@ -3503,7 +3516,7 @@ var VTabs = defineComponent({
       }
       const {
         onBeforeChange
-      } = props11;
+      } = props12;
       if (onBeforeChange) {
         let result = onBeforeChange(value, currentRef.value);
         if (isPromise(result)) {
@@ -3531,15 +3544,15 @@ var VTabs = defineComponent({
       const $tab = tab.$el;
       if (!$tab)
         return;
-      const scroller = ScrollerRef.instance;
-      if (!scroller)
+      const scroller2 = ScrollerRef.instance;
+      if (!scroller2)
         return;
-      const container = scroller.scroller.element();
+      const container = scroller2.scroller.element();
       if (!container)
         return;
       const {
         autoScrollOffset
-      } = props11;
+      } = props12;
       const tabLeft = $tab.offsetLeft;
       const tabWidth = $tab.offsetWidth;
       const tabRight = tabLeft + tabWidth;
@@ -3564,22 +3577,22 @@ var VTabs = defineComponent({
       }
       if (Math.abs(scrollAmount) > 0) {
         cancelScroll();
-        scrollResult = scroller.scroller.by(scrollAmount, 0, {
+        scrollResult = scroller2.scroller.by(scrollAmount, 0, {
           duration: 150
         });
       }
     }
-    watch(() => props11.modelValue, () => setupInternalValue(true));
-    watch(() => props11.items, () => setupInternalValue(), {
+    watch(() => props12.modelValue, () => setupInternalValue(true));
+    watch(() => props12.items, () => setupInternalValue(), {
       deep: true
     });
     watch(() => internalValueRef.value, (newValue) => {
       scrollToTab(newValue);
     });
     vui.location.watchRoute((route) => {
-      if (!props11.router)
+      if (!props12.router)
         return;
-      const path = props11.withQuery ? route.fullPath : route.path;
+      const path = props12.withQuery ? route.fullPath : route.path;
       const hit = computedItemsRef.value.find(({
         location
       }) => {
@@ -3662,10 +3675,10 @@ var VBreadcrumbs = defineComponent({
     },
     divider: [String, Function]
   },
-  setup(props11, ctx) {
+  setup(props12, ctx) {
     const vui = useVui();
     const computedItemsRef = computed(() => {
-      const items = props11.items.map((rawItem) => {
+      const items = props12.items.map((rawItem) => {
         return typeof rawItem === "string" ? {
           text: rawItem
         } : rawItem;
@@ -3695,7 +3708,7 @@ var VBreadcrumbs = defineComponent({
       if (lengthRef.value < 1)
         return;
       let dividerSlot;
-      const propDivider = props11.divider;
+      const propDivider = props12.divider;
       if (propDivider) {
         dividerSlot = typeof propDivider === "function" ? propDivider : () => propDivider;
       } else {
@@ -3767,12 +3780,12 @@ var VContentSwitcher = defineComponent({
   emits: {
     "update:modelValue": (modelValue) => true
   },
-  setup(props11, ctx) {
+  setup(props12, ctx) {
     const internalValueRef = ref("");
     const transitionRef = ref("");
     const elRef = ref(null);
     const anchorRef = ref(null);
-    const computedOrderRef = computed(() => props11.order.map((row) => {
+    const computedOrderRef = computed(() => props12.order.map((row) => {
       return typeof row === "string" ? row : row.value;
     }));
     const currentRef = computed({
@@ -3787,7 +3800,7 @@ var VContentSwitcher = defineComponent({
     const autotopSettingsRef = computed(() => {
       let {
         autotop: settings
-      } = props11;
+      } = props12;
       if (settings === true)
         settings = {};
       if (!settings)
@@ -3812,7 +3825,7 @@ var VContentSwitcher = defineComponent({
       }
       return el;
     }
-    watch(() => props11.modelValue, (value, beforeValue) => {
+    watch(() => props12.modelValue, (value, beforeValue) => {
       if (value == null)
         return;
       internalValueRef.value = value;
@@ -3834,7 +3847,7 @@ var VContentSwitcher = defineComponent({
     });
     watch(currentRef, () => {
       const autotopSettings = autotopSettingsRef.value;
-      if (autotopSettings && props11.modelValue != null) {
+      if (autotopSettings && props12.modelValue != null) {
         seeTop(autotopSettings);
       }
     });
@@ -3993,27 +4006,27 @@ var VDataTable = defineComponent({
   emits: {
     input: (selectedValues) => true
   },
-  setup(props11, ctx) {
+  setup(props12, ctx) {
     const vui = useVui();
     const bootedRef = ref(false);
     const footerHeightRef = ref(0);
-    const internalValues = ref(props11.modelValue.slice());
+    const internalValues = ref(props12.modelValue.slice());
     const rowSettings = computed(() => {
       const {
         rowSettings: rowSettings2
-      } = props11;
+      } = props12;
       if (!rowSettings2)
         return () => ({});
       return typeof rowSettings2 === "function" ? rowSettings2 : () => rowSettings2;
     });
     const containedVariant = vui.setting("containedVariant");
-    const sortedItemKeysRef = computed(() => props11.items.map((item) => item[props11.itemKey]));
-    const isEmptyRef = computed(() => props11.items.length === 0);
+    const sortedItemKeysRef = computed(() => props12.items.map((item) => item[props12.itemKey]));
+    const isEmptyRef = computed(() => props12.items.length === 0);
     const headersRef = computed(() => {
       const {
         headers,
         selectable
-      } = props11;
+      } = props12;
       const ret = [];
       if (selectable) {
         ret.push({
@@ -4028,7 +4041,7 @@ var VDataTable = defineComponent({
     const searchQueryValues = computed(() => {
       let {
         searchQuery
-      } = props11;
+      } = props12;
       if (!searchQuery) {
         return [];
       }
@@ -4051,14 +4064,14 @@ var VDataTable = defineComponent({
     const emptyMessage = computed(() => {
       let message;
       if (searchQueryValues.value.length) {
-        message = props11.noResultsMessage || vui.setting("noResultsMessage") || "No search results found.";
+        message = props12.noResultsMessage || vui.setting("noResultsMessage") || "No search results found.";
       } else {
-        message = props11.noDataMessage || vui.setting("noDataMessage") || "No data was available.";
+        message = props12.noDataMessage || vui.setting("noDataMessage") || "No data was available.";
       }
       return typeof message === "function" ? message(vui) : message;
     });
     const classesRef = computed(() => [{
-      "v-data-table--fixed-header": props11.fixedHeader
+      "v-data-table--fixed-header": props12.fixedHeader
     }]);
     const layout = VueAppLayout.use();
     const bodyInnerStylesRef = computed(() => {
@@ -4067,7 +4080,7 @@ var VDataTable = defineComponent({
       const {
         fixedHeader,
         maxHeight
-      } = props11;
+      } = props12;
       const footerHeight = footerHeightRef.value;
       const _maxHeight = maxHeight || (fixedHeader ? "100%" : maxHeight);
       if (!_maxHeight) {
@@ -4077,28 +4090,28 @@ var VDataTable = defineComponent({
         maxHeight: layout.calculateViewHeight(_maxHeight, -footerHeight - 100, 200)
       };
     });
-    const defaultOrderQueryRef = computed(() => props11.defaultOrder === props11.ascQueryValue ? props11.ascQueryValue : props11.descQueryValue);
+    const defaultOrderQueryRef = computed(() => props12.defaultOrder === props12.ascQueryValue ? props12.ascQueryValue : props12.descQueryValue);
     const isTransitioningRef = computed(() => {
-      return vui.location.isQueryOnlyTransitioning([props11.pageQuery, props11.sortQuery, props11.orderQuery, props11.limitQuery]);
+      return vui.location.isQueryOnlyTransitioning([props12.pageQuery, props12.sortQuery, props12.orderQuery, props12.limitQuery]);
     });
-    const pageRef = computed(() => vui.location.getQuery(props11.pageQuery, Number, 1));
-    const needShowHeaderControlRef = computed(() => props11.items.length > props11.controlThreshold);
+    const pageRef = computed(() => vui.location.getQuery(props12.pageQuery, Number, 1));
+    const needShowHeaderControlRef = computed(() => props12.items.length > props12.controlThreshold);
     const sortByRef = computed({
       get: () => {
-        return vui.location.getQuery(props11.sortQuery);
+        return vui.location.getQuery(props12.sortQuery);
       },
       set(value) {
         vui.location.pushQuery({
-          [props11.sortQuery]: value || null,
-          [props11.pageQuery]: 1
+          [props12.sortQuery]: value || null,
+          [props12.pageQuery]: 1
         });
       }
     });
-    const ordersRef = computed(() => [props11.ascQueryValue, props11.descQueryValue]);
-    const usePagingRef = computed(() => props11.limits.length > 0);
+    const ordersRef = computed(() => [props12.ascQueryValue, props12.descQueryValue]);
+    const usePagingRef = computed(() => props12.limits.length > 0);
     const orderByRef = computed({
       get: () => {
-        const value = vui.location.getQuery(props11.orderQuery);
+        const value = vui.location.getQuery(props12.orderQuery);
         if (typeof value !== "string" || !ordersRef.value.includes(value)) {
           return;
         }
@@ -4106,33 +4119,33 @@ var VDataTable = defineComponent({
       },
       set(value) {
         vui.location.pushQuery({
-          [props11.orderQuery]: value || null,
-          [props11.pageQuery]: 1
+          [props12.orderQuery]: value || null,
+          [props12.pageQuery]: 1
         });
       }
     });
     const offsetRef = computed(() => (pageRef.value - 1) * limitRef.value);
     const limitRef = computed({
-      get: () => vui.location.getQuery(props11.limitQuery, Number, props11.limitDefault),
+      get: () => vui.location.getQuery(props12.limitQuery, Number, props12.limitDefault),
       set: (value) => {
         const page = Math.floor(offsetRef.value / value) + 1;
         vui.location.pushQuery({
-          [props11.limitQuery]: value,
-          [props11.pageQuery]: page
+          [props12.limitQuery]: value,
+          [props12.pageQuery]: page
         });
       }
     });
     const pageLengthRef = computed(() => {
       const {
         total
-      } = props11;
+      } = props12;
       const _limit = limitRef.value;
       if (!total)
         return 0;
       return Math.ceil(total / _limit);
     });
-    const lengthRef = computed(() => props11.items.length);
-    const isASCRef = computed(() => orderByRef.value === props11.ascQueryValue);
+    const lengthRef = computed(() => props12.items.length);
+    const isASCRef = computed(() => orderByRef.value === props12.ascQueryValue);
     const sortIconRef = computed(() => {
       let icon = vui.icon("sort");
       if (typeof icon === "string") {
@@ -4162,21 +4175,21 @@ var VDataTable = defineComponent({
         return;
       const queries = {};
       if (sort) {
-        queries[props11.sortQuery] = sort;
+        queries[props12.sortQuery] = sort;
       }
       if (order) {
-        queries[props11.orderQuery] = order;
+        queries[props12.orderQuery] = order;
       }
       vui.location.pushQuery({
         ...queries,
         ...usePagingRef.value ? {
-          [props11.pageQuery]: 1
+          [props12.pageQuery]: 1
         } : void 0
       });
     }
     function toggleOrderBy() {
       return setSort({
-        order: orderByRef.value === props11.ascQueryValue ? props11.descQueryValue : props11.ascQueryValue
+        order: orderByRef.value === props12.ascQueryValue ? props12.descQueryValue : props12.ascQueryValue
       });
     }
     function isSelected(key) {
@@ -4242,7 +4255,7 @@ var VDataTable = defineComponent({
         "class": "v-data-table__pagination",
         "dense": true,
         "align": "right",
-        "routeQuery": props11.pageQuery,
+        "routeQuery": props12.pageQuery,
         "modelValue": pageRef.value,
         "length": pageLengthRef.value
       }, null);
@@ -4250,7 +4263,7 @@ var VDataTable = defineComponent({
     function genControls() {
       const {
         total
-      } = props11;
+      } = props12;
       const offset = offsetRef.value;
       const length = lengthRef.value;
       return createVNode("div", {
@@ -4268,7 +4281,7 @@ var VDataTable = defineComponent({
         "size": "sm",
         "hiddenInfo": true,
         "disabled": isTransitioningRef.value,
-        "items": props11.limits.map((limit) => {
+        "items": props12.limits.map((limit) => {
           return {
             label: `${limit}\u4EF6`,
             value: limit
@@ -4287,7 +4300,7 @@ var VDataTable = defineComponent({
       const {
         defaultOrder,
         ascQueryValue
-      } = props11;
+      } = props12;
       const children = headersRef.value.map((header) => {
         const {
           label,
@@ -4436,7 +4449,7 @@ var VDataTable = defineComponent({
       const {
         items,
         itemKey
-      } = props11;
+      } = props12;
       const {
         item: itemSlot = defaultItemSlot
       } = ctx.slots;
@@ -4453,10 +4466,10 @@ var VDataTable = defineComponent({
         "class": "v-data-table__table__body"
       }, [children]);
     }
-    watch(() => props11.modelValue, (modelValue) => {
+    watch(() => props12.modelValue, (modelValue) => {
       internalValues.value = modelValue.slice();
     });
-    watch(() => props11.items, (items) => {
+    watch(() => props12.items, (items) => {
       internalValues.value = internalValues.value.filter((key) => {
         return sortedItemKeysRef.value.includes(key);
       });
@@ -4520,15 +4533,15 @@ var VToolbar = defineComponent({
     ...colorSchemeProps(),
     dense: Boolean
   },
-  setup(props11, ctx) {
+  setup(props12, ctx) {
     const vui = useVui();
-    const elevation = useElevation(props11, {
+    const elevation = useElevation(props12, {
       defaultValue: 4
     });
-    const dense = computed(() => props11.dense);
+    const dense = computed(() => props12.dense);
     const color = useColorClasses({
-      color: () => props11.color,
-      variant: () => props11.variant || vui.setting("containedVariant")
+      color: () => props12.color,
+      variant: () => props12.variant || vui.setting("containedVariant")
     });
     const classes = computed(() => {
       return [elevation.elevationClassName.value, color.colorClasses.value, {
@@ -4547,11 +4560,11 @@ var VToolbarMenu = defineComponent({
   name: "VToolbarMenu",
   inheritAttrs: false,
   props: {},
-  setup(props11, ctx) {
+  setup(props12, ctx) {
     const vui = useVui();
     const plain = vui.setting("plainVariant");
     return () => {
-      const variant = props11.variant || plain;
+      const variant = props12.variant || plain;
       return createVNode(VButton, mergeProps(ctx.attrs, {
         "variant": variant,
         "class": ["v-toolbar-menu"]
@@ -4569,8 +4582,8 @@ var VToolbarEdge = defineComponent({
       required: true
     }
   },
-  setup(props11, ctx) {
-    const edge = computed(() => props11.edge);
+  setup(props12, ctx) {
+    const edge = computed(() => props12.edge);
     return () => {
       const children = renderSlotOrEmpty(ctx.slots, "default");
       const hasChildren = !!children && children.length > 0;
@@ -4593,8 +4606,8 @@ var VToolbarTitle = defineComponent({
     ...slots12()
   },
   slots: slots12,
-  setup(props11, ctx) {
-    const _TagName = computed(() => props11.tag);
+  setup(props12, ctx) {
+    const _TagName = computed(() => props12.tag);
     return () => {
       const TagName = _TagName.value;
       return createVNode(TagName, {
@@ -4699,26 +4712,26 @@ var VuiService = class {
       })
     };
     this.dialog = stackService.createLauncher(VDialog);
-    this.alert = stackService.createLauncher(VDialog, (props11) => {
-      const actions = [...props11?.actions || []];
+    this.alert = stackService.createLauncher(VDialog, (props12) => {
+      const actions = [...props12?.actions || []];
       if (!actions.length) {
         actions.push(this.stackAction("ok"));
       }
-      const backdrop = props11?.backdrop == null ? true : props11?.backdrop;
+      const backdrop = props12?.backdrop == null ? true : props12?.backdrop;
       return {
-        ...props11,
+        ...props12,
         backdrop,
         actions
       };
     });
-    this.confirm = stackService.createLauncher(VDialog, (props11) => {
-      const actions = [...props11?.actions || []];
+    this.confirm = stackService.createLauncher(VDialog, (props12) => {
+      const actions = [...props12?.actions || []];
       if (!actions.length) {
         actions.push(this.stackAction("cancel"), this.stackAction("ok"));
       }
-      const backdrop = props11?.backdrop == null ? true : props11?.backdrop;
+      const backdrop = props12?.backdrop == null ? true : props12?.backdrop;
       return {
-        ...props11,
+        ...props12,
         backdrop,
         actions
       };
@@ -4855,6 +4868,7 @@ var VuiService = class {
     return action;
   }
 };
+var scroller = getDocumentScroller();
 function mergeVuiPluginOptions(base, override) {
   if (!override)
     return base;
@@ -4883,7 +4897,21 @@ var VuiPlugin = class {
     const vueColorSchemePlugin = new VueColorSchemePlugin(colorScheme);
     app.use(vueColorSchemePlugin);
     installVueStackPlugin(app, stack);
-    installVueFormPlugin(app, form);
+    installVueFormPlugin(app, {
+      scroll: {
+        options: {
+          behavior: "smooth"
+        },
+        fn: (el, opts2) => {
+          const duration = opts2?.behavior === "smooth" ? void 0 : 0;
+          return scroller.toElement(el, {
+            offset: $vui.getAutoScrollToElementOffsetTop(),
+            duration
+          });
+        }
+      },
+      ...form
+    });
     installVueAppLayout(app);
     installBodyScrollLockDirective(app);
     installClickOutsideDirective(app);
@@ -4900,6 +4928,6 @@ function installVuiPlugin(app, opts) {
   return app.use(VuiPlugin, opts);
 }
 
-export { ARROW_KEY_TYPES, AVATAR_SIZES, BUTTON_ALIGNS, CHIP_SIZES, CHOICE_KEY_TYPES, CONTROL_FIELD_VARIANTS, CONTROL_LOADING_SPINNER_SIZES, CONTROL_SIZES, KEYBORD_EVENT_TYPES, PAGINATION_ALIGNS, VApp, VAvatar, VBreadcrumbs, VBusyImage, VButton, VButtonGroup, VCard, VCardActions, VCardContent, VCheckbox, VCheckboxGroup, VChip, VContentSwitcher, VControlField, VDataTable, VDialog, VDrawerLayout, VForm, VFormControl, VGridContainer, VGridItem, VHero, VIcon, VListTile, VMenu, VNavigation, VNavigationItem, VNumberField, VOption, VOptionGroup, VPagination, VPaper, VRadio, VRadioGroup, VSelect, VSheetModal, VSkeltonLoaderBone, VSnackbar, VSwitch, VSwitchGroup, VTabs, VTextCounter, VTextField, VTextarea, VToolbar, VToolbarEdge, VToolbarMenu, VToolbarTitle, VTooltip, VUI_CHECKBOX_GROUP_SYMBOL, VUI_CHECKBOX_SYMBOL, VUI_FORM_SYMBOL, VUI_OPTION_SYMBOL, VUI_RADIO_GROUP_SYMBOL, VUI_RADIO_SYMBOL, VUI_SELECT_SYMBOL, VUI_SWITCH_GROUP_SYMBOL, VUI_SWITCH_SYMBOL, VUI_TEXTAREA_SYMBOL, VUI_TEXT_FIELD_SYMBOL, VuiColorProviderInjectionKey, VuiControlFieldInjectionKey, VuiControlInjectionKey, VuiInjectionKey, VuiPlugin, VuiService, configureDataTableDefaults, createAvatarProps, createCardProps, createChipProps, createControlFieldProps, createControlFieldProviderProps, createControlProps, createElevationProps, createListTileProps, createNavigationItemProps, createNavigationProps, createPaperBaseProps, createPaperProps, createRequiredChipRenderer, createVFormProps, defineFormSelectorComponent, formSlots, iconProps, installVuiPlugin, listTileEmits, mergeVuiPluginOptions, mergeVuiServiceIconSettings, mergeVuiServiceOptions, mergeVuiServiceUISettings, paginationProps, paperBaseSlots, rawIconProp, renderNavigationItemInput, resolveNavigationItemInput, resolveRawIconProp, sheetModalProps, splitAttrs, useControl, useControlField, useElevation, useVui, useVuiColorProvider, vueButtonProps };
+export { ARROW_KEY_TYPES, AVATAR_SIZES, BUTTON_ALIGNS, CHIP_SIZES, CHOICE_KEY_TYPES, CONTROL_FIELD_VARIANTS, CONTROL_LOADING_SPINNER_SIZES, CONTROL_SIZES, KEYBOARD_EVENT_TYPES, PAGINATION_ALIGNS, VApp, VAvatar, VBreadcrumbs, VBusyImage, VButton, VButtonGroup, VCard, VCardActions, VCardContent, VCheckbox, VCheckboxGroup, VChip, VContentSwitcher, VControlField, VDataTable, VDialog, VDrawerLayout, VForm, VFormControl, VFormGroup, VGridContainer, VGridItem, VHero, VIcon, VListTile, VMenu, VNavigation, VNavigationItem, VNumberField, VOption, VOptionGroup, VPagination, VPaper, VRadio, VRadioGroup, VSelect, VSheetModal, VSkeltonLoaderBone, VSnackbar, VSwitch, VSwitchGroup, VTabs, VTextCounter, VTextField, VTextarea, VToolbar, VToolbarEdge, VToolbarMenu, VToolbarTitle, VTooltip, VUI_CHECKBOX_GROUP_SYMBOL, VUI_CHECKBOX_SYMBOL, VUI_FORM_GROUP_SYMBOL, VUI_FORM_SYMBOL, VUI_OPTION_SYMBOL, VUI_RADIO_GROUP_SYMBOL, VUI_RADIO_SYMBOL, VUI_SELECT_SYMBOL, VUI_SWITCH_GROUP_SYMBOL, VUI_SWITCH_SYMBOL, VUI_TEXTAREA_SYMBOL, VUI_TEXT_FIELD_SYMBOL, VuiColorProviderInjectionKey, VuiControlFieldInjectionKey, VuiControlInjectionKey, VuiInjectionKey, VuiPlugin, VuiService, configureDataTableDefaults, createAvatarProps, createCardProps, createChipProps, createControlFieldProps, createControlFieldProviderProps, createControlProps, createElevationProps, createListTileProps, createNavigationItemProps, createNavigationProps, createPaperBaseProps, createPaperProps, createRequiredChipRenderer, createVFormGroupProps, createVFormProps, defineFormSelectorComponent, formGroupSlots, formSlots, iconProps, installVuiPlugin, listTileEmits, mergeVuiPluginOptions, mergeVuiServiceIconSettings, mergeVuiServiceOptions, mergeVuiServiceUISettings, paginationProps, paperBaseSlots, rawIconProp, renderNavigationItemInput, resolveNavigationItemInput, resolveRawIconProp, sheetModalProps, splitAttrs, useControl, useControlField, useElevation, useVui, useVuiColorProvider, vueButtonProps };
 //# sourceMappingURL=out.js.map
 //# sourceMappingURL=vui.mjs.map