@groupteknology/vuno 1.0.0 → 1.0.1

package/dist/module.d.mts

@@ -1,2 +1,12 @@
-export * from "/woodpecker/src/github.com/groupteknology/vuno/packages/core/src/module.js";
-export { default } from "/woodpecker/src/github.com/groupteknology/vuno/packages/core/src/module.js";
+import { NuxtModule } from '@nuxt/schema';
+export * from '../dist/runtime/app/types/index.js';
+
+interface ModuleOptions {
+    prefix?: string;
+    /** Registrar el compilador de Tailwind. Ponlo en `false` si ya lo monta el proyecto. */
+    tailwind?: boolean;
+}
+declare const module$1: NuxtModule<ModuleOptions>;
+
+export { module$1 as default };
+export type { ModuleOptions };

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "vuno",
   "configKey": "vuno",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "builder": {
     "@nuxt/module-builder": "1.0.3",
     "unbuild": "unknown"

package/dist/module.mjs

@@ -1,18 +1,64 @@
-import { createJiti } from "file:///woodpecker/src/github.com/groupteknology/vuno/node_modules/.pnpm/jiti@2.7.0/node_modules/jiti/lib/jiti.mjs";
+import { defineNuxtModule, createResolver, addComponentsDir, addImportsDir, addTemplate, addVitePlugin } from '@nuxt/kit';
+import { sep } from 'node:path';
+import tailwindcss from '@tailwindcss/vite';
 
-const jiti = createJiti(import.meta.url, {
-  "interopDefault": true,
-  "alias": {
-    "@groupteknology/vuno": "/woodpecker/src/github.com/groupteknology/vuno/packages/core"
+const module$1 = defineNuxtModule({
+  defaults: {
+    prefix: "V",
+    tailwind: true
   },
-  "transformOptions": {
-    "babel": {
-      "plugins": []
+  meta: {
+    name: "vuno",
+    configKey: "vuno"
+  },
+  moduleDependencies: {
+    /*
+     * Los iconos del módulo se pintan con el componente global `Icon`, que
+     * trae `@nuxt/icon`. Hoy llega de rebote porque lo instala Nuxt UI, y
+     * eso no basta: `Base/Icon.vue` cae en un `<span>` vacío cuando el
+     * global no está registrado —que es lo correcto— y por tanto quedarse
+     * sin él no rompe nada, solo deja la interfaz sin iconos.
+     */
+    "@nuxt/icon": {
+      defaults: {
+        clientBundle: {
+          scan: true
+        }
+      }
     }
+  },
+  setup(options, nuxt) {
+    const resolver = createResolver(import.meta.url);
+    nuxt.options.alias["#vuno"] = resolver.resolve("./runtime/app");
+    addComponentsDir({
+      global: true,
+      ignore: ["forms/fields/**", "structure/cells/**", "overlays/Context.vue", "overlays/Overlay.vue", "overlays/Toast.vue", "overlays/Toaster.vue", "forms/ControlShell.vue", "forms/FormFieldRenderer.vue", "structure/TableCell.vue", "layouts/dashboard/DashboardAside.vue"],
+      path: resolver.resolve("./runtime/app/components"),
+      pathPrefix: false,
+      prefix: options.prefix
+    });
+    nuxt.hook("components:extend", (components) => {
+      for (const component of components) {
+        const path = component.filePath.split("\\").join("/");
+        if (path.includes("/components/modal/")) component.global = true;
+      }
+    });
+    addImportsDir(resolver.resolve("./runtime/app/composables"));
+    addTemplate({
+      filename: "vuno.css",
+      write: true,
+      // `sep` en vez de un literal: en Windows `srcDir` llega con barras
+      // invertidas y Tailwind no las interpreta como separador; fuera de
+      // Windows la sustitución no hace nada.
+      getContents: () => `@source '${nuxt.options.srcDir.replaceAll(sep, "/")}/**/*';`
+    });
+    if (options.tailwind && !hasTailwindPlugin(nuxt.options.vite.plugins)) addVitePlugin(tailwindcss());
+    nuxt.options.css.push(resolver.resolve("./runtime/app/assets/css/main.css"));
   }
-})
-
-/** @type {import("/woodpecker/src/github.com/groupteknology/vuno/packages/core/src/module.js")} */
-const _module = await jiti.import("/woodpecker/src/github.com/groupteknology/vuno/packages/core/src/module.ts");
+});
+function hasTailwindPlugin(plugins) {
+  const flat = Array.isArray(plugins) ? plugins.flat(Infinity) : [];
+  return flat.some((plugin) => typeof plugin?.name === "string" && plugin.name.startsWith("@tailwindcss/vite"));
+}
 
-export default _module?.default ?? _module;
+export { module$1 as default };

package/dist/runtime/app/assets/css/dialog.css

@@ -0,0 +1 @@
+:root{--vuno-modal-duration:180ms;--vuno-modal-ease:cubic-bezier(0.32,0.72,0,1);--vuno-backdrop:rgba(0,0,0,.5)}dialog{opacity:0;transform:scale(.97) translateY(.5rem);transition:opacity var(--vuno-modal-duration) var(--vuno-modal-ease),transform var(--vuno-modal-duration) var(--vuno-modal-ease),display var(--vuno-modal-duration) allow-discrete,overlay var(--vuno-modal-duration) allow-discrete}dialog[open]{opacity:1;transform:scale(1) translateY(0)}@starting-style{dialog[open]{opacity:0;transform:scale(.97) translateY(.5rem)}}dialog::backdrop{background-color:transparent;transition:background-color var(--vuno-modal-duration) var(--vuno-modal-ease),display var(--vuno-modal-duration) allow-discrete,overlay var(--vuno-modal-duration) allow-discrete}dialog[open]::backdrop{background-color:var(--vuno-backdrop)}@starting-style{dialog[open]::backdrop{background-color:transparent}}dialog[data-position=end],dialog[data-position=start]{transform:translateX(var(--vuno-panel-from))}dialog[data-position=end]{--vuno-panel-from:100%}[dir=rtl] dialog[data-position=end],dialog[data-position=start]{--vuno-panel-from:-100%}[dir=rtl] dialog[data-position=start]{--vuno-panel-from:100%}dialog[data-position=end][open],dialog[data-position=start][open]{transform:translateX(0)}@starting-style{dialog[data-position=end][open],dialog[data-position=start][open]{transform:translateX(var(--vuno-panel-from))}}dialog.vuno-overlay-behind::backdrop,dialog.vuno-overlay-behind[open]::backdrop{background-color:transparent}@media (prefers-reduced-motion:reduce){dialog,dialog::backdrop{transition-duration:1ms}dialog,dialog[data-position=end],dialog[data-position=end][open],dialog[data-position=start],dialog[data-position=start][open]{transform:none}}

package/dist/runtime/app/assets/css/main.css

@@ -0,0 +1 @@
+@import "tailwindcss";@import "#build/vuno.css";@import "./tokens.css";@import "./theme.css";@import "./dialog.css";@source "../../**/*";

package/dist/runtime/app/assets/css/theme.css

@@ -0,0 +1 @@
+@theme inline{--color-vuno-primary:var(--vuno-primary);--color-vuno-primary-contrast:var(--vuno-primary-contrast);--color-vuno-secondary:var(--vuno-secondary);--color-vuno-secondary-contrast:var(--vuno-secondary-contrast);--color-vuno-neutral:var(--vuno-neutral);--color-vuno-neutral-contrast:var(--vuno-neutral-contrast);--color-vuno-surface:var(--vuno-surface);--color-vuno-surface-1:var(--vuno-surface-1);--color-vuno-surface-2:var(--vuno-surface-2);--color-vuno-surface-inverse:var(--vuno-surface-inverse);--color-vuno-strong:var(--vuno-text-strong);--color-vuno-body:var(--vuno-text-body);--color-vuno-muted:var(--vuno-text-muted);--color-vuno-subtle:var(--vuno-text-subtle);--color-vuno-inverse:var(--vuno-text-inverse);--font-sans:var(--vuno-font-sans);--font-mono:var(--vuno-font-mono);--color-vuno-border:var(--vuno-border);--color-vuno-border-strong:var(--vuno-border-strong);--color-vuno-success:var(--vuno-success);--color-vuno-success-contrast:var(--vuno-success-contrast);--color-vuno-info:var(--vuno-info);--color-vuno-info-contrast:var(--vuno-info-contrast);--color-vuno-warning:var(--vuno-warning);--color-vuno-warning-contrast:var(--vuno-warning-contrast);--color-vuno-error:var(--vuno-error);--color-vuno-error-contrast:var(--vuno-error-contrast);--radius-vuno:var(--vuno-radius);--radius-vuno-control:var(--vuno-radius-control)}

package/dist/runtime/app/assets/css/tokens.css

@@ -0,0 +1 @@
+@layer base{:root{color-scheme:light;--vuno-color-white:oklch(100% 0 0);--vuno-color-slate-50:oklch(98.4% 0.003 247.858);--vuno-color-slate-100:oklch(96.8% 0.007 247.896);--vuno-color-slate-200:oklch(92.9% 0.013 255.508);--vuno-color-slate-300:oklch(86.9% 0.022 252.894);--vuno-color-slate-400:oklch(70.4% 0.04 256.788);--vuno-color-slate-500:oklch(55.4% 0.046 257.417);--vuno-color-slate-600:oklch(44.6% 0.043 257.281);--vuno-color-slate-700:oklch(37.2% 0.044 257.287);--vuno-color-slate-800:oklch(27.9% 0.041 260.031);--vuno-color-slate-900:oklch(20.8% 0.042 265.755);--vuno-color-slate-950:oklch(12.9% 0.042 264.695);--vuno-color-black:oklch(0% 0 0);--vuno-color-blue-400:oklch(70.7% 0.165 254.624);--vuno-color-blue-600:oklch(54.6% 0.245 262.881);--vuno-color-violet-400:oklch(70.2% 0.183 293.541);--vuno-color-violet-600:oklch(54.1% 0.281 293.009);--vuno-color-emerald-400:oklch(76.5% 0.177 163.223);--vuno-color-emerald-700:oklch(50.8% 0.118 165.612);--vuno-color-cyan-400:oklch(78.9% 0.154 211.53);--vuno-color-cyan-700:oklch(52% 0.105 223.128);--vuno-color-red-400:oklch(70.4% 0.191 22.216);--vuno-color-red-700:oklch(50.5% 0.213 27.518);--vuno-color-amber-300:oklch(87.9% 0.169 91.605);--vuno-color-amber-400:oklch(82.8% 0.189 84.429);--dashboard-navbar-height:64px;--dashboard-aside-width:384px;--vuno-radius:0.25rem;--vuno-radius-control:0.25rem;--vuno-font-sans:"Google Sans","Google Sans Text",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;--vuno-font-mono:"Google Sans Code",ui-monospace,"Cascadia Code","Source Code Pro",Menlo,monospace;--vuno-primary:var(--vuno-color-blue-600);--vuno-primary-contrast:var(--vuno-color-white);--vuno-secondary:var(--vuno-color-violet-600);--vuno-secondary-contrast:var(--vuno-color-white);--vuno-neutral:var(--vuno-color-slate-600);--vuno-neutral-contrast:var(--vuno-color-white);--vuno-surface:var(--vuno-color-white);--vuno-surface-1:var(--vuno-color-slate-100);--vuno-surface-2:var(--vuno-color-slate-200);--vuno-surface-inverse:var(--vuno-color-slate-900);--vuno-text-strong:var(--vuno-color-slate-900);--vuno-text-body:var(--vuno-color-slate-700);--vuno-text-muted:var(--vuno-color-slate-600);--vuno-text-subtle:var(--vuno-color-slate-400);--vuno-text-inverse:var(--vuno-color-slate-50);--vuno-border:var(--vuno-color-slate-300);--vuno-border-strong:var(--vuno-color-slate-500);--vuno-success:var(--vuno-color-emerald-700);--vuno-success-contrast:var(--vuno-color-white);--vuno-info:var(--vuno-color-cyan-700);--vuno-info-contrast:var(--vuno-color-white);--vuno-warning:var(--vuno-color-amber-400);--vuno-warning-contrast:var(--vuno-color-slate-900);--vuno-error:var(--vuno-color-red-700);--vuno-error-contrast:var(--vuno-color-white)}.dark{color-scheme:dark;--vuno-primary:var(--vuno-color-blue-400);--vuno-primary-contrast:var(--vuno-color-slate-950);--vuno-secondary:var(--vuno-color-violet-400);--vuno-secondary-contrast:var(--vuno-color-slate-950);--vuno-neutral:var(--vuno-color-slate-400);--vuno-neutral-contrast:var(--vuno-color-slate-950);--vuno-surface:var(--vuno-color-black);--vuno-surface-1:var(--vuno-color-slate-900);--vuno-surface-2:var(--vuno-color-slate-800);--vuno-surface-inverse:var(--vuno-color-slate-50);--vuno-text-strong:var(--vuno-color-white);--vuno-text-body:var(--vuno-color-slate-200);--vuno-text-muted:var(--vuno-color-slate-400);--vuno-text-subtle:var(--vuno-color-slate-500);--vuno-text-inverse:var(--vuno-color-slate-900);--vuno-border:var(--vuno-color-slate-700);--vuno-border-strong:var(--vuno-color-slate-500);--vuno-success:var(--vuno-color-emerald-400);--vuno-success-contrast:var(--vuno-color-slate-950);--vuno-info:var(--vuno-color-cyan-400);--vuno-info-contrast:var(--vuno-color-slate-950);--vuno-warning:var(--vuno-color-amber-300);--vuno-warning-contrast:var(--vuno-color-slate-950);--vuno-error:var(--vuno-color-red-400);--vuno-error-contrast:var(--vuno-color-slate-950)}body{background-color:var(--vuno-surface);color:var(--vuno-text-body);font-family:var(--vuno-font-sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}}

package/dist/runtime/app/components/actions/Avatar.d.vue.ts

@@ -0,0 +1,23 @@
+import type { VunoSize, VunoSlots } from '#vuno/types/base';
+/**
+ * La imagen redonda de una fila: una foto de producto, un logotipo, una
+ * persona.
+ *
+ * El `alt` no es decoración: en un listado, la alternativa útil es el nombre
+ * de la fila, y de ahí salen también las iniciales cuando no hay imagen que
+ * enseñar.
+ */
+type __VLS_Props = {
+    alt?: string;
+    size?: VunoSize;
+    src?: string;
+    ui?: VunoSlots;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    size: VunoSize;
+    alt: string;
+    src: string;
+    ui: VunoSlots;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/app/components/actions/Avatar.vue

@@ -0,0 +1,49 @@
+<script setup>
+import { computed, ref, watch } from "vue";
+import { useTheme } from "#vuno/composables/useTheme";
+const props = defineProps({
+  alt: { type: String, required: false, default: "" },
+  size: { type: String, required: false, default: "md" },
+  src: { type: String, required: false, default: void 0 },
+  ui: { type: Object, required: false, default: void 0 }
+});
+const ui = useTheme(
+  "avatar",
+  () => props.ui,
+  () => ({ size: props.size })
+);
+const failed = ref(false);
+watch(
+  () => props.src,
+  () => {
+    failed.value = false;
+  }
+);
+const showImage = computed(() => Boolean(props.src) && !failed.value);
+const initials = computed(
+  () => props.alt.split(/\s+/).filter(Boolean).slice(0, 2).map((word) => [...word][0]?.toLocaleUpperCase() ?? "").join("")
+);
+</script>
+
+<template>
+    <span :class="ui.root">
+        <img
+            v-if="showImage"
+            :alt="props.alt"
+            :class="ui.image"
+            :src="props.src"
+            @error="failed = true"
+        />
+
+        <!--
+            Sin imagen, las iniciales son decoración: el nombre de la fila ya
+            está escrito en la columna de al lado, y anunciarlo aquí otra vez
+            —peor, deletreado— solo alarga la lectura de cada fila.
+        -->
+        <span
+            v-else
+            aria-hidden="true"
+            >{{ initials }}</span
+        >
+    </span>
+</template>

package/dist/runtime/app/components/actions/Avatar.vue.d.ts

@@ -0,0 +1,23 @@
+import type { VunoSize, VunoSlots } from '#vuno/types/base';
+/**
+ * La imagen redonda de una fila: una foto de producto, un logotipo, una
+ * persona.
+ *
+ * El `alt` no es decoración: en un listado, la alternativa útil es el nombre
+ * de la fila, y de ahí salen también las iniciales cuando no hay imagen que
+ * enseñar.
+ */
+type __VLS_Props = {
+    alt?: string;
+    size?: VunoSize;
+    src?: string;
+    ui?: VunoSlots;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    size: VunoSize;
+    alt: string;
+    src: string;
+    ui: VunoSlots;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/app/components/actions/Badge.d.vue.ts

@@ -0,0 +1,36 @@
+import type { VunoColor, VunoSize, VunoSlots } from '#vuno/types/base';
+/**
+ * Una etiqueta de estado: el estado de una fila, el contador de filtros
+ * activos, el resumen de un filtro puesto.
+ *
+ * No es un botón ni lleva acción propia. Cuando algo dentro sí la lleva
+ * —la cruz que quita un filtro— va en el slot, para que el elemento que se
+ * pulsa sea ese y no la etiqueta entera.
+ */
+type VunoBadgeVariant = 'outline' | 'soft' | 'solid' | 'subtle';
+type __VLS_Props = {
+    color?: VunoColor;
+    label?: string;
+    size?: VunoSize;
+    ui?: VunoSlots;
+    variant?: VunoBadgeVariant;
+};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    color: VunoColor;
+    size: VunoSize;
+    variant: VunoBadgeVariant;
+    label: string;
+    ui: VunoSlots;
+}, {}, {}, {}, 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;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/app/components/actions/Badge.vue

@@ -0,0 +1,25 @@
+<script setup>
+import { useTheme } from "#vuno/composables/useTheme";
+const props = defineProps({
+  color: { type: String, required: false, default: "primary" },
+  label: { type: String, required: false, default: void 0 },
+  size: { type: String, required: false, default: "md" },
+  ui: { type: Object, required: false, default: void 0 },
+  variant: { type: String, required: false, default: "solid" }
+});
+const ui = useTheme(
+  "badge",
+  () => props.ui,
+  () => ({
+    color: props.color,
+    size: props.size,
+    variant: props.variant
+  })
+);
+</script>
+
+<template>
+    <span :class="ui.base">
+        <slot>{{ props.label }}</slot>
+    </span>
+</template>

package/dist/runtime/app/components/actions/Badge.vue.d.ts

@@ -0,0 +1,36 @@
+import type { VunoColor, VunoSize, VunoSlots } from '#vuno/types/base';
+/**
+ * Una etiqueta de estado: el estado de una fila, el contador de filtros
+ * activos, el resumen de un filtro puesto.
+ *
+ * No es un botón ni lleva acción propia. Cuando algo dentro sí la lleva
+ * —la cruz que quita un filtro— va en el slot, para que el elemento que se
+ * pulsa sea ese y no la etiqueta entera.
+ */
+type VunoBadgeVariant = 'outline' | 'soft' | 'solid' | 'subtle';
+type __VLS_Props = {
+    color?: VunoColor;
+    label?: string;
+    size?: VunoSize;
+    ui?: VunoSlots;
+    variant?: VunoBadgeVariant;
+};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    color: VunoColor;
+    size: VunoSize;
+    variant: VunoBadgeVariant;
+    label: string;
+    ui: VunoSlots;
+}, {}, {}, {}, 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;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/app/components/actions/Button.d.vue.ts

@@ -0,0 +1,45 @@
+import type { VunoColor, VunoSize, VunoSlots } from '#vuno/types/base';
+type VunoButtonVariant = 'ghost' | 'link' | 'outline' | 'soft' | 'solid';
+type __VLS_Props = {
+    color?: VunoColor;
+    disabled?: boolean;
+    /** Nombre Iconify, como los de `useIcons`. */
+    icon?: string;
+    label?: string;
+    /** Bloquea el botón y sustituye el icono por un giro. */
+    loading?: boolean;
+    size?: VunoSize;
+    /** El icono va detrás de la etiqueta en vez de delante. */
+    trailing?: boolean;
+    /**
+     * `button` a propósito, y no `submit`: un botón dentro de un
+     * formulario que no diga lo que es lo envía al pulsarlo, y eso
+     * convierte cualquier acción secundaria en un envío accidental.
+     */
+    type?: 'button' | 'reset' | 'submit';
+    ui?: VunoSlots;
+    variant?: VunoButtonVariant;
+};
+type __VLS_Slots = {
+    /** Contenido en lugar de la etiqueta. */
+    default?: () => unknown;
+    /** Va después de todo lo demás; la tabla mete ahí su contador. */
+    trailing?: () => unknown;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    color: VunoColor;
+    icon: string;
+    type: "button" | "reset" | "submit";
+    size: VunoSize;
+    variant: VunoButtonVariant;
+    label: string;
+    ui: VunoSlots;
+}, {}, {}, {}, 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;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/app/components/actions/Button.vue

@@ -0,0 +1,71 @@
+<script setup>
+import { computed } from "vue";
+import { useTheme } from "#vuno/composables/useTheme";
+import Icon from "#vuno/components/actions/Icon.vue";
+const props = defineProps({
+  color: { type: String, required: false, default: "primary" },
+  disabled: { type: Boolean, required: false },
+  icon: { type: String, required: false, default: void 0 },
+  label: { type: String, required: false, default: void 0 },
+  loading: { type: Boolean, required: false },
+  size: { type: String, required: false, default: "md" },
+  trailing: { type: Boolean, required: false },
+  type: { type: String, required: false, default: "button" },
+  ui: { type: Object, required: false, default: void 0 },
+  variant: { type: String, required: false, default: "solid" }
+});
+const slots = defineSlots();
+const hasContent = computed(() => Boolean(props.label) || Boolean(slots.default));
+const isDisabled = computed(() => Boolean(props.disabled) || Boolean(props.loading));
+const ui = useTheme(
+  "button",
+  () => props.ui,
+  () => ({
+    color: props.color,
+    shape: hasContent.value ? void 0 : "square",
+    size: props.size,
+    variant: props.variant
+  })
+);
+</script>
+
+<template>
+    <button
+        :aria-busy="props.loading ? 'true' : void 0"
+        :class="ui.base"
+        :disabled="isDisabled"
+        :type="props.type"
+    >
+        <!--
+            El giro ocupa el sitio del icono en vez de añadirse: si se sumara, el
+            botón cambiaría de ancho al pulsarlo y el puntero acabaría sobre otra
+            cosa.
+        -->
+        <span
+            v-if="props.loading"
+            aria-hidden="true"
+            :class="[ui.icon, ui.spinner]"
+        />
+
+        <Icon
+            v-else-if="props.icon && !props.trailing"
+            :class="ui.icon"
+            :name="props.icon"
+        />
+
+        <span
+            v-if="hasContent"
+            :class="ui.label"
+        >
+            <slot>{{ props.label }}</slot>
+        </span>
+
+        <Icon
+            v-if="props.icon && props.trailing && !props.loading"
+            :class="ui.icon"
+            :name="props.icon"
+        />
+
+        <slot name="trailing" />
+    </button>
+</template>

package/dist/runtime/app/components/actions/Button.vue.d.ts

@@ -0,0 +1,45 @@
+import type { VunoColor, VunoSize, VunoSlots } from '#vuno/types/base';
+type VunoButtonVariant = 'ghost' | 'link' | 'outline' | 'soft' | 'solid';
+type __VLS_Props = {
+    color?: VunoColor;
+    disabled?: boolean;
+    /** Nombre Iconify, como los de `useIcons`. */
+    icon?: string;
+    label?: string;
+    /** Bloquea el botón y sustituye el icono por un giro. */
+    loading?: boolean;
+    size?: VunoSize;
+    /** El icono va detrás de la etiqueta en vez de delante. */
+    trailing?: boolean;
+    /**
+     * `button` a propósito, y no `submit`: un botón dentro de un
+     * formulario que no diga lo que es lo envía al pulsarlo, y eso
+     * convierte cualquier acción secundaria en un envío accidental.
+     */
+    type?: 'button' | 'reset' | 'submit';
+    ui?: VunoSlots;
+    variant?: VunoButtonVariant;
+};
+type __VLS_Slots = {
+    /** Contenido en lugar de la etiqueta. */
+    default?: () => unknown;
+    /** Va después de todo lo demás; la tabla mete ahí su contador. */
+    trailing?: () => unknown;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    color: VunoColor;
+    icon: string;
+    type: "button" | "reset" | "submit";
+    size: VunoSize;
+    variant: VunoButtonVariant;
+    label: string;
+    ui: VunoSlots;
+}, {}, {}, {}, 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;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/app/components/actions/Icon.d.vue.ts

@@ -0,0 +1,6 @@
+type __VLS_Props = {
+    name: string;
+};
+declare const __VLS_export: 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>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/app/components/actions/Icon.vue

@@ -0,0 +1,32 @@
+<script setup>
+import { computed, resolveComponent } from "vue";
+defineOptions({
+  /**
+   * El nombre importa. Sin él, el componente se llama `Icon` por su
+   * fichero, y entonces el `<Icon>` de su propia plantilla **se resuelve a
+   * sí mismo**: fuera de Nuxt se monta en bucle hasta agotar la pila, y el
+   * error que sale —«Maximum call stack size exceeded»— no menciona el
+   * icono por ninguna parte.
+   */
+  name: "VunoIcon"
+});
+const props = defineProps({
+  name: { type: String, required: true }
+});
+const iconComponent = resolveComponent("Icon");
+const is = computed(() => typeof iconComponent === "string" ? "span" : iconComponent);
+</script>
+
+<template>
+    <!--
+        Decorativo por defecto: en todos los usos del módulo el icono acompaña a
+        un texto o a un `aria-label` del elemento que lo contiene, así que
+        anunciarlo repetiría lo que ya se lee. Quien necesite lo contrario lo
+        sobreescribe, porque los atributos de quien lo usa ganan al llegar aquí.
+    -->
+    <component
+        :is="is"
+        aria-hidden="true"
+        :name="props.name"
+    />
+</template>

package/dist/runtime/app/components/actions/Icon.vue.d.ts

@@ -0,0 +1,6 @@
+type __VLS_Props = {
+    name: string;
+};
+declare const __VLS_export: 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>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/app/components/actions/Menu.d.vue.ts

@@ -0,0 +1,34 @@
+import { type VunoPortalTarget } from '#vuno/internal/useVunoPortal';
+import type { VunoColor } from '#vuno/types/base';
+/** Una entrada del menú. Es la forma que ya tienen las acciones de fila. */
+type VunoMenuItem = {
+    onSelect: () => void;
+    color?: VunoColor;
+    disabled?: boolean;
+    icon?: string;
+    label: string;
+    /** Dibuja una línea encima, para separar lo destructivo del resto. */
+    separator?: boolean;
+};
+type __VLS_Props = {
+    items: VunoMenuItem[];
+    /** Dónde montar el menú. Por defecto, lo que provea el modal que envuelva. */
+    portal?: VunoPortalTarget;
+};
+type __VLS_Slots = {
+    /** El disparador. Recibe el estado abierto por si quiere pintarlo. */
+    default?: (props: {
+        open: boolean;
+    }) => unknown;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    portal: VunoPortalTarget;
+}, {}, {}, {}, 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;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};