@groupteknology/vuno 2.0.0 → 3.0.0

package/dist/runtime/app/components/FieldTags/internal/TagsInput/TagsInput.vue

@@ -2,7 +2,8 @@
 import { computed, ref, useTemplateRef } from "vue";
 import { useIcons, useMessages, useTheme } from "#vuno/composables/useTheme";
 import Icon from "#vuno/components/Icon/Icon.vue";
-import ControlShell from "#vuno/components/internal/ControlShell/ControlShell.vue";
+import Text from "#vuno/components/Text/Text.vue";
+import PrimitiveControl from "#vuno/primitives/PrimitiveControl/PrimitiveControl.vue";
 defineOptions({ name: "VunoTagsInput", inheritAttrs: false });
 const model = defineModel({ type: null, ...{ default: void 0 } });
 const props = defineProps({
@@ -52,7 +53,7 @@ function onKeydown(event) {
 </script>
 
 <template>
-    <ControlShell
+    <PrimitiveControl
         :size="props.size"
         :ui="props.ui"
     >
@@ -60,12 +61,21 @@ function onKeydown(event) {
             :class="ui.content"
             @click="inputRef?.focus()"
         >
-            <span
+            <Text
                 v-for="(tag, index) in tags"
                 :key="tag"
                 :class="ui.tag"
+                tag="span"
+                tone="inherit"
+                variant="inherit"
             >
-                <span :class="ui.tagLabel">{{ tag }}</span>
+                <Text
+                    :class="ui.tagLabel"
+                    tag="span"
+                    tone="inherit"
+                    variant="inherit"
+                    >{{ tag }}</Text
+                >
 
                 <button
                     :aria-label="`${messages.removeItem}: ${tag}`"
@@ -79,7 +89,7 @@ function onKeydown(event) {
                         :name="icons.removeItem"
                     />
                 </button>
-            </span>
+            </Text>
 
             <input
                 ref="input"
@@ -93,5 +103,5 @@ function onKeydown(event) {
                 @keydown="onKeydown"
             />
         </div>
-    </ControlShell>
+    </PrimitiveControl>
 </template>

package/dist/runtime/app/components/FieldTags/internal/TagsInput/TagsInput.vue.d.ts

@@ -1,11 +1,11 @@
-import type { VunoSize } from '#vuno/types/base';
+import type { VunoFieldSize } from '#vuno/types/field';
 import type { VunoUi } from '#vuno/types/slots';
 type __VLS_Props = Props;
 type Props = {
     disabled?: boolean;
     max?: number;
     placeholder?: string;
-    size?: VunoSize;
+    size?: VunoFieldSize;
     ui?: VunoUi<'control' | 'tagsInput'>;
 };
 type __VLS_ModelProps = {
@@ -17,10 +17,10 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     "onUpdate:modelValue"?: ((value: string[] | undefined) => any) | undefined;
 }>, {
-    size: VunoSize;
+    size: VunoFieldSize;
     ui: VunoUi<"control" | "tagsInput">;
-    placeholder: string;
     max: number;
+    placeholder: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/app/components/FieldTextarea/FieldTextarea.d.vue.ts

@@ -1,4 +1,4 @@
-import type { VunoFieldTextarea } from '#vuno/types/field';
+import type { VunoFieldTextareaProps } from './FieldTextarea.types.js';
 /**
  * `autoresize` lleva `withDefaults` y no se deja al control, que también lo
  * trae en `true`.
@@ -10,7 +10,7 @@ import type { VunoFieldTextarea } from '#vuno/types/field';
  * `multiple` y `dropzone` en el campo de archivo, y por eso se arregla
  * igual.
  */
-type __VLS_Props = Omit<VunoFieldTextarea, 'columns'>;
+type __VLS_Props = VunoFieldTextareaProps;
 type __VLS_ModelProps = {
     modelValue?: string | undefined;
 };

package/dist/runtime/app/components/FieldTextarea/FieldTextarea.types.d.ts

@@ -0,0 +1,2 @@
+import type { VunoFieldTextarea } from '#vuno/types/field';
+export type VunoFieldTextareaProps = Omit<VunoFieldTextarea, 'columns'>;

package/dist/runtime/app/components/FieldTextarea/FieldTextarea.vue

@@ -2,7 +2,7 @@
 import { useField } from "#vuno/composables/useField";
 import { useTheme } from "#vuno/composables/useTheme";
 import Textarea from "#vuno/components/FieldTextarea/internal/Textarea/Textarea.vue";
-import FieldShell from "#vuno/components/internal/FieldShell/FieldShell.vue";
+import FieldShell from "#vuno/components/FormField/internal/FieldShell/FieldShell.vue";
 defineOptions({ name: "VunoFieldTextarea" });
 const model = defineModel({ type: null, ...{ default: void 0 } });
 const props = defineProps({

package/dist/runtime/app/components/FieldTextarea/FieldTextarea.vue.d.ts

@@ -1,4 +1,4 @@
-import type { VunoFieldTextarea } from '#vuno/types/field';
+import type { VunoFieldTextareaProps } from './FieldTextarea.types.js';
 /**
  * `autoresize` lleva `withDefaults` y no se deja al control, que también lo
  * trae en `true`.
@@ -10,7 +10,7 @@ import type { VunoFieldTextarea } from '#vuno/types/field';
  * `multiple` y `dropzone` en el campo de archivo, y por eso se arregla
  * igual.
  */
-type __VLS_Props = Omit<VunoFieldTextarea, 'columns'>;
+type __VLS_Props = VunoFieldTextareaProps;
 type __VLS_ModelProps = {
     modelValue?: string | undefined;
 };

package/dist/runtime/app/components/FieldTextarea/internal/Textarea/Textarea.d.vue.ts

@@ -1,4 +1,5 @@
-import type { VunoRadius, VunoSize } from '#vuno/types/base';
+import type { VunoRadius } from '#vuno/types/base';
+import type { VunoFieldSize } from '#vuno/types/field';
 import type { VunoUi } from '#vuno/types/slots';
 type __VLS_Props = Props;
 type Props = {
@@ -9,7 +10,7 @@ type Props = {
     /** La curvatura de la caja. Sin valor, la que traiga el tema. */
     radius?: VunoRadius;
     rows?: number;
-    size?: VunoSize;
+    size?: VunoFieldSize;
     ui?: VunoUi<'control' | 'textarea'>;
 };
 type __VLS_ModelProps = {
@@ -24,7 +25,7 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
     "onUpdate:modelValue"?: ((value: string | undefined) => any) | undefined;
 }>, {
     radius: VunoRadius;
-    size: VunoSize;
+    size: VunoFieldSize;
     autoresize: boolean;
     ui: VunoUi<"control" | "textarea">;
     maxrows: number;

package/dist/runtime/app/components/FieldTextarea/internal/Textarea/Textarea.vue

@@ -1,7 +1,7 @@
 <script setup>
 import { computed, useTemplateRef } from "vue";
 import { useTheme } from "#vuno/composables/useTheme";
-import ControlShell from "#vuno/components/internal/ControlShell/ControlShell.vue";
+import PrimitiveControl from "#vuno/primitives/PrimitiveControl/PrimitiveControl.vue";
 defineOptions({ name: "VunoTextarea", inheritAttrs: false });
 const model = defineModel({ type: null, ...{ default: void 0 } });
 const props = defineProps({
@@ -15,7 +15,7 @@ const props = defineProps({
 const ui = useTheme(
   "textarea",
   () => props.ui,
-  () => ({ autoresize: String(props.autoresize), size: props.size })
+  () => ({ autoresize: props.autoresize ? "true" : "false", size: props.size })
 );
 const area = useTemplateRef("area");
 const sizing = computed(() => ({
@@ -26,7 +26,7 @@ defineExpose({ textareaRef: area });
 </script>
 
 <template>
-    <ControlShell
+    <PrimitiveControl
         :radius="props.radius"
         :size="props.size"
         :ui="props.ui"
@@ -39,5 +39,5 @@ defineExpose({ textareaRef: area });
             :rows="props.rows"
             :style="sizing"
         />
-    </ControlShell>
+    </PrimitiveControl>
 </template>

package/dist/runtime/app/components/FieldTextarea/internal/Textarea/Textarea.vue.d.ts

@@ -1,4 +1,5 @@
-import type { VunoRadius, VunoSize } from '#vuno/types/base';
+import type { VunoRadius } from '#vuno/types/base';
+import type { VunoFieldSize } from '#vuno/types/field';
 import type { VunoUi } from '#vuno/types/slots';
 type __VLS_Props = Props;
 type Props = {
@@ -9,7 +10,7 @@ type Props = {
     /** La curvatura de la caja. Sin valor, la que traiga el tema. */
     radius?: VunoRadius;
     rows?: number;
-    size?: VunoSize;
+    size?: VunoFieldSize;
     ui?: VunoUi<'control' | 'textarea'>;
 };
 type __VLS_ModelProps = {
@@ -24,7 +25,7 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
     "onUpdate:modelValue"?: ((value: string | undefined) => any) | undefined;
 }>, {
     radius: VunoRadius;
-    size: VunoSize;
+    size: VunoFieldSize;
     autoresize: boolean;
     ui: VunoUi<"control" | "textarea">;
     maxrows: number;

package/dist/runtime/app/components/Form/Form.d.vue.ts

@@ -1,22 +1,6 @@
-import type { VunoFormDefinition, VunoFormState, VunoSchema } from '#vuno/types/form';
-import type { VunoUi } from '#vuno/types/slots';
-declare const __VLS_export: <TState extends VunoFormState>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
-    props: import("vue").PublicProps & __VLS_PrettifyLocal<({
-        /**
-         * Id del `<form>`. Permite enviarlo desde un botón que vive fuera de
-         * él —el pie de un modal, por ejemplo— con `<button form="...">`.
-         */
-        id?: string;
-        definition: VunoFormDefinition;
-        /**
-         * Opcional: un panel de filtros, por ejemplo, no necesita validación.
-         *
-         * Cualquier esquema que implemente Standard Schema —zod, valibot,
-         * arktype—, sin que el módulo dependa de ninguno.
-         */
-        schema?: VunoSchema;
-        ui?: VunoUi<"form">;
-    } & {
+import type { VunoFormProps } from './Form.types.js';
+declare const __VLS_export: <TState extends import("#vuno/types/form").VunoFormState>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<(VunoFormProps & {
         state: TState;
     }) & {
         onSubmit?: ((state: TState) => any) | undefined;

package/dist/runtime/app/components/Form/Form.types.d.ts

@@ -0,0 +1,8 @@
+import type { VunoFormDefinition, VunoSchema } from '#vuno/types/form';
+import type { VunoUi } from '#vuno/types/slots';
+export type VunoFormProps = {
+    id?: string;
+    definition: VunoFormDefinition;
+    schema?: VunoSchema;
+    ui?: VunoUi<'form'>;
+};

package/dist/runtime/app/components/Form/Form.vue

@@ -1,7 +1,7 @@
 <script setup>
-import { computed, nextTick, provide, useId, useTemplateRef } from "vue";
+import { computed, nextTick, useId, useTemplateRef } from "vue";
+import { provideVunoFormContext } from "#vuno/composables/internal/useVunoFormContext";
 import { useTheme } from "#vuno/composables/useTheme";
-import { vunoFormInjectionKey } from "#vuno/internal/keys";
 import FormSection from "#vuno/components/FormSection/FormSection.vue";
 import Tabs from "#vuno/components/Tabs/Tabs.vue";
 import { getColumnSpanClass } from "./internal/grid";
@@ -56,7 +56,7 @@ const context = {
   // el motor decide si toca avisar.
   setTouched: (name, value = true) => value ? form.blur(name) : delete form.touched[name]
 };
-provide(vunoFormInjectionKey, context);
+provideVunoFormContext(context);
 const formEl = useTemplateRef("formEl");
 async function focusFirstInvalid() {
   await nextTick();

package/dist/runtime/app/components/Form/Form.vue.d.ts

@@ -1,22 +1,6 @@
-import type { VunoFormDefinition, VunoFormState, VunoSchema } from '#vuno/types/form';
-import type { VunoUi } from '#vuno/types/slots';
-declare const __VLS_export: <TState extends VunoFormState>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
-    props: import("vue").PublicProps & __VLS_PrettifyLocal<({
-        /**
-         * Id del `<form>`. Permite enviarlo desde un botón que vive fuera de
-         * él —el pie de un modal, por ejemplo— con `<button form="...">`.
-         */
-        id?: string;
-        definition: VunoFormDefinition;
-        /**
-         * Opcional: un panel de filtros, por ejemplo, no necesita validación.
-         *
-         * Cualquier esquema que implemente Standard Schema —zod, valibot,
-         * arktype—, sin que el módulo dependa de ninguno.
-         */
-        schema?: VunoSchema;
-        ui?: VunoUi<"form">;
-    } & {
+import type { VunoFormProps } from './Form.types.js';
+declare const __VLS_export: <TState extends import("#vuno/types/form").VunoFormState>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<(VunoFormProps & {
         state: TState;
     }) & {
         onSubmit?: ((state: TState) => any) | undefined;

package/dist/runtime/app/components/FormField/FormField.d.vue.ts

@@ -1,19 +1,5 @@
-import type { VunoSize } from '#vuno/types/base';
-import type { VunoFieldOrientation } from '#vuno/types/field';
-import type { VunoUi } from '#vuno/types/slots';
-type Props = {
-    name?: string;
-    description?: string;
-    error?: string;
-    help?: string;
-    hint?: string;
-    label?: string;
-    orientation?: VunoFieldOrientation;
-    required?: boolean;
-    size?: VunoSize;
-    ui?: VunoUi<'formField'>;
-};
-declare var __VLS_1: {
+import type { VunoFormFieldProps } from './FormField.types.js';
+declare var __VLS_19: {
     id: string;
     name: string | undefined;
     'aria-describedby': string | undefined;
@@ -22,9 +8,9 @@ declare var __VLS_1: {
     required: boolean;
 };
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_1) => any;
+    default?: (props: typeof __VLS_19) => any;
 };
-declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_base: import("vue").DefineComponent<VunoFormFieldProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<VunoFormFieldProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/app/components/FormField/FormField.types.d.ts

@@ -0,0 +1,14 @@
+import type { VunoFieldOrientation, VunoFieldSize } from '#vuno/types/field';
+import type { VunoUi } from '#vuno/types/slots';
+export type VunoFormFieldProps = {
+    name?: string;
+    description?: string;
+    error?: string;
+    help?: string;
+    hint?: string;
+    label?: string;
+    orientation?: VunoFieldOrientation;
+    required?: boolean;
+    size?: VunoFieldSize;
+    ui?: VunoUi<'formField'>;
+};

package/dist/runtime/app/components/FormField/FormField.vue

@@ -1,6 +1,7 @@
 <script setup>
 import { computed, useId } from "vue";
 import { useTheme } from "#vuno/composables/useTheme";
+import Text from "#vuno/components/Text/Text.vue";
 defineOptions({ name: "VunoFormField" });
 const props = defineProps({
   name: { type: String, required: false },
@@ -65,29 +66,38 @@ const classes = useTheme(
                     `required` en el control, que es lo que el navegador y el
                     lector entienden. Anunciar «asterisco» no informa de nada.
                 -->
-                    <span
+                    <Text
                         v-if="props.required"
                         aria-hidden="true"
                         :class="classes.required"
-                        >*</span
+                        tag="span"
+                        tone="inherit"
+                        variant="inherit"
+                        >*</Text
                     >
                 </label>
 
-                <span
+                <Text
                     v-if="props.hint"
                     :id="hintId"
                     :class="classes.hint"
-                    >{{ props.hint }}</span
+                    tag="span"
+                    tone="inherit"
+                    variant="inherit"
+                    >{{ props.hint }}</Text
                 >
             </div>
 
-            <p
+            <Text
                 v-if="props.description"
                 :id="descriptionId"
                 :class="classes.description"
+                tag="p"
+                tone="inherit"
+                variant="inherit"
             >
                 {{ props.description }}
-            </p>
+            </Text>
         </div>
 
         <div :class="classes.control">
@@ -104,21 +114,27 @@ const classes = useTheme(
             enviar, y un aviso que interrumpe a mitad de frase cada vez que se
             tabula molesta más de lo que ayuda.
         -->
-            <p
+            <Text
                 :id="errorId"
                 aria-live="polite"
                 :class="[classes.error, !props.error && 'sr-only']"
+                tag="p"
+                tone="inherit"
+                variant="inherit"
             >
                 {{ props.error }}
-            </p>
+            </Text>
 
-            <p
+            <Text
                 v-if="props.help && !props.error"
                 :id="helpId"
                 :class="classes.help"
+                tag="p"
+                tone="inherit"
+                variant="inherit"
             >
                 {{ props.help }}
-            </p>
+            </Text>
         </div>
     </div>
 </template>

package/dist/runtime/app/components/FormField/FormField.vue.d.ts

@@ -1,19 +1,5 @@
-import type { VunoSize } from '#vuno/types/base';
-import type { VunoFieldOrientation } from '#vuno/types/field';
-import type { VunoUi } from '#vuno/types/slots';
-type Props = {
-    name?: string;
-    description?: string;
-    error?: string;
-    help?: string;
-    hint?: string;
-    label?: string;
-    orientation?: VunoFieldOrientation;
-    required?: boolean;
-    size?: VunoSize;
-    ui?: VunoUi<'formField'>;
-};
-declare var __VLS_1: {
+import type { VunoFormFieldProps } from './FormField.types.js';
+declare var __VLS_19: {
     id: string;
     name: string | undefined;
     'aria-describedby': string | undefined;
@@ -22,9 +8,9 @@ declare var __VLS_1: {
     required: boolean;
 };
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_1) => any;
+    default?: (props: typeof __VLS_19) => any;
 };
-declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_base: import("vue").DefineComponent<VunoFormFieldProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<VunoFormFieldProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/app/components/{internal → FormField/internal}/FieldShell/FieldShell.d.vue.ts

@@ -1,5 +1,4 @@
-import type { VunoSize } from '#vuno/types/base';
-import type { VunoFieldBase } from '#vuno/types/field';
+import type { VunoFieldBase, VunoFieldSize } from '#vuno/types/field';
 type __VLS_Props = Omit<VunoFieldBase, 'columns'>;
 type __VLS_Slots = {
     default: (props: {
@@ -9,7 +8,7 @@ type __VLS_Slots = {
         'aria-invalid'?: boolean;
         'aria-required'?: boolean;
         required?: boolean;
-        size?: VunoSize;
+        size?: VunoFieldSize;
     }) => unknown;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/app/components/{internal → FormField/internal}/FieldShell/FieldShell.vue.d.ts

@@ -1,5 +1,4 @@
-import type { VunoSize } from '#vuno/types/base';
-import type { VunoFieldBase } from '#vuno/types/field';
+import type { VunoFieldBase, VunoFieldSize } from '#vuno/types/field';
 type __VLS_Props = Omit<VunoFieldBase, 'columns'>;
 type __VLS_Slots = {
     default: (props: {
@@ -9,7 +8,7 @@ type __VLS_Slots = {
         'aria-invalid'?: boolean;
         'aria-required'?: boolean;
         required?: boolean;
-        size?: VunoSize;
+        size?: VunoFieldSize;
     }) => unknown;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/app/components/FormModal/FormModal.d.vue.ts

@@ -1,27 +1,6 @@
-import type { VunoModalSize } from '#vuno/types/base';
-import type { VunoFormDefinition, VunoFormState, VunoSchema } from '#vuno/types/form';
-import type { VunoUi } from '#vuno/types/slots';
-declare const __VLS_export: <TState extends VunoFormState>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
-    props: import("vue").PublicProps & __VLS_PrettifyLocal<({
-        /**
-         * Cierra el modal nada más enviar. Déjalo apagado si guardas contra una
-         * API: querrás cerrar tú al confirmar, y mientras tanto usar `loading`.
-         */
-        closeOnSubmit?: boolean;
-        definition: VunoFormDefinition;
-        description?: string;
-        /** Slots del formulario que va dentro. */
-        formUi?: VunoUi<"form">;
-        /** Marca el botón de guardar como ocupado y bloquea el cierre. */
-        loading?: boolean;
-        /** Opcional, igual que en `VForm`: cualquier esquema Standard Schema. */
-        schema?: VunoSchema;
-        /** Ancho del diálogo; el formulario usa `3xl` de forma predeterminada. */
-        size?: VunoModalSize;
-        title?: string;
-        /** Slots del modal (`content`, `body`, ...). */
-        ui?: VunoUi<"formModal">;
-    } & {
+import type { VunoFormModalProps } from './FormModal.types.js';
+declare const __VLS_export: <TState extends import("#vuno/types/form").VunoFormState>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<(VunoFormModalProps & {
         open?: boolean;
         state: TState;
     }) & {
@@ -48,7 +27,9 @@ declare const __VLS_export: <TState extends VunoFormState>(__VLS_props: NonNulla
             reset: () => void;
         }) => unknown;
         /** Elemento que abre el modal, si prefieres eso a controlar `open`. */
-        trigger?: () => unknown;
+        trigger?: (props: {
+            open: () => void;
+        }) => unknown;
     };
     emit: (((evt: "close") => void) & ((evt: "submit", state: TState) => void)) & (((event: "update:open", value: boolean) => void) & ((event: "update:state", value: TState) => void));
 }>) => import("vue").VNode & {

package/dist/runtime/app/components/FormModal/FormModal.types.d.ts

@@ -0,0 +1,14 @@
+import type { VunoFormDefinition, VunoSchema } from '#vuno/types/form';
+import type { VunoUi } from '#vuno/types/slots';
+import type { VunoModalSize } from '#vuno/components/Modal/Modal.types';
+export type VunoFormModalProps = {
+    closeOnSubmit?: boolean;
+    definition: VunoFormDefinition;
+    description?: string;
+    formUi?: VunoUi<'form'>;
+    loading?: boolean;
+    schema?: VunoSchema;
+    size?: VunoModalSize;
+    title?: string;
+    ui?: VunoUi<'formModal'>;
+};

package/dist/runtime/app/components/FormModal/FormModal.vue

@@ -30,6 +30,12 @@ function close() {
   open.value = false;
   emit("close");
 }
+function openModal() {
+  open.value = true;
+}
+function onModalClose() {
+  emit("close");
+}
 function onSubmit(validated) {
   emit("submit", validated);
   if (props.closeOnSubmit) open.value = false;
@@ -37,6 +43,11 @@ function onSubmit(validated) {
 </script>
 
 <template>
+    <slot
+        name="trigger"
+        :open="openModal"
+    />
+
     <!--
         Sobre `Modal`: un `<dialog>` nativo, no el de Nuxt UI. El navegador lo
         pone en su capa superior, que atrapa el foco, lo devuelve al cerrar y
@@ -54,9 +65,8 @@ function onSubmit(validated) {
         :size="props.size"
         :title="props.title"
         :ui="modalUi"
+        @close="onModalClose"
     >
-        <slot name="trigger" />
-
         <Form
             :id="formId"
             ref="form"