@groupteknology/vuno 1.0.1 → 3.0.0

package/dist/module.json

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

package/dist/module.mjs

@@ -1,49 +1,76 @@
-import { defineNuxtModule, createResolver, addComponentsDir, addImportsDir, addTemplate, addVitePlugin } from '@nuxt/kit';
-import { sep } from 'node:path';
+import { defineNuxtModule, createResolver, addComponent, resolveModule, addTypeTemplate, addComponentsDir, addImportsDir, addPlugin, addTemplate, addVitePlugin } from '@nuxt/kit';
 import tailwindcss from '@tailwindcss/vite';
+import { sep } from 'node:path';
 
 const module$1 = defineNuxtModule({
   defaults: {
     prefix: "V",
-    tailwind: true
+    tailwind: true,
+    vueQuery: true
   },
   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
         }
       }
+    },
+    "@nuxtjs/color-mode": {
+      defaults: {
+        storage: "cookie",
+        storageKey: "vuno-theme"
+      }
     }
   },
   setup(options, nuxt) {
     const resolver = createResolver(import.meta.url);
-    nuxt.options.alias["#vuno"] = resolver.resolve("./runtime/app");
+    const runtimeDir = resolver.resolve("./runtime/app");
+    addComponent({
+      name: "VunoIconRenderer",
+      filePath: resolveModule("@nuxt/icon/runtime/components/index", { url: new URL(import.meta.url) }),
+      global: true
+    });
+    nuxt.options.alias["#vuno"] = runtimeDir;
+    nuxt.hook("prepare:types", ({ nodeTsConfig }) => {
+      nodeTsConfig.compilerOptions ??= {};
+      nodeTsConfig.compilerOptions.paths ??= {};
+      nodeTsConfig.compilerOptions.paths["#vuno"] = [runtimeDir];
+      nodeTsConfig.compilerOptions.paths["#vuno/*"] = [`${runtimeDir}/*`];
+    });
+    addTypeTemplate({
+      filename: "types/vuno-page-meta.d.ts",
+      getContents: () => `declare module '#app' {
+    interface PageMeta {
+        /** T\xEDtulo de la p\xE1gina disponible tambi\xE9n mediante \`route.meta.title\`. */
+        title?: string
+        /** \xCDndice declarativo disponible durante el render del servidor. */
+        toc?: import('@groupteknology/vuno').VunoNavigationTocItem[]
+    }
+}
+
+export {}
+`
+    });
     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"],
+      ignore: ["**/internal/**"],
       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("/");
+        const path = component.filePath.replaceAll("\\", "/");
         if (path.includes("/components/modal/")) component.global = true;
       }
     });
     addImportsDir(resolver.resolve("./runtime/app/composables"));
+    if (options.vueQuery) addPlugin(resolver.resolve("./runtime/app/plugins/vue-query"));
     addTemplate({
       filename: "vuno.css",
       write: true,

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

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

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

@@ -1 +1 @@
-@import "tailwindcss";@import "#build/vuno.css";@import "./tokens.css";@import "./theme.css";@import "./dialog.css";@source "../../**/*";
+@import "tailwindcss";@import "#build/vuno.css";@import "./tokens.css";@import "./theme.css";@import "./dialog.css";@custom-variant dark (&:where(.dark, .dark *));@source "../../**/*";

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

@@ -0,0 +1 @@
+@import "tailwindcss";@import "./tokens.css";@import "./theme.css";

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

@@ -1 +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)}
+@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-brand:var(--vuno-brand);--color-vuno-brand-hover:var(--vuno-brand-hover);--color-vuno-brand-contrast:var(--vuno-brand-contrast);--color-vuno-control:var(--vuno-control);--color-vuno-tint:var(--vuno-tint);--color-vuno-line:var(--vuno-line);--color-vuno-focus:var(--vuno-focus);--color-vuno-danger-solid:var(--vuno-danger-solid);--color-vuno-danger-solid-hover:var(--vuno-danger-solid-hover);--color-vuno-danger-solid-contrast:var(--vuno-danger-solid-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);--container-8xl:96rem}

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

@@ -1 +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}}
+@layer base{:root{color-scheme:light;--vuno-color-white:oklch(100% 0 0);--vuno-color-slate-50:oklch(98.75% 0 0);--vuno-color-slate-100:oklch(98% 0 0);--vuno-color-slate-200:oklch(96.5% 0 0);--vuno-color-slate-300:oklch(92.2% 0 0);--vuno-color-slate-400:oklch(70.8% 0 0);--vuno-color-slate-500:oklch(55.6% 0 0);--vuno-color-slate-600:oklch(43.9% 0 0);--vuno-color-slate-700:oklch(32% 0 0);--vuno-color-slate-800:oklch(26.9% 0 0);--vuno-color-slate-900:oklch(20.5% 0 0);--vuno-color-slate-925:oklch(17% 0 0);--vuno-color-slate-950:oklch(10% 0 0);--vuno-color-blue-400:oklch(75.668% 0.1242 263.014);--vuno-color-blue-600:oklch(53.463% 0.1595 261.622);--vuno-color-violet-400:oklch(78.263% 0.0571 279.398);--vuno-color-violet-600:oklch(50.733% 0.0826 278.816);--vuno-color-emerald-400:oklch(78.38% 0.0683 165.304);--vuno-color-emerald-700:oklch(51.266% 0.071 168.046);--vuno-color-cyan-400:oklch(78.873% 0.0666 223.957);--vuno-color-cyan-700:oklch(51.089% 0.0694 228.76);--vuno-color-red-400:oklch(76.599% 0.0951 15.392);--vuno-color-red-700:oklch(54.926% 0.1344 17.946);--vuno-color-amber-300:oklch(79.558% 0.1002 81.479);--vuno-color-amber-400:oklch(51.495% 0.0997 72.607);--vuno-font-sans:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;--vuno-font-mono:"JetBrains Mono",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-white);--vuno-error:var(--vuno-color-red-700);--vuno-error-contrast:var(--vuno-color-white);--vuno-brand:var(--vuno-color-blue-600);--vuno-brand-hover:oklch(47.771% 0.1444 262.217);--vuno-brand-contrast:var(--vuno-color-white);--vuno-control:var(--vuno-color-white);--vuno-tint:oklch(97% 0 0);--vuno-line:oklch(14.5% 0 0/10%);--vuno-focus:oklch(15% 0 0);--vuno-danger-solid:var(--vuno-color-red-700);--vuno-danger-solid-hover:oklch(47.974% 0.1224 17.032);--vuno-danger-solid-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-slate-950);--vuno-surface-1:var(--vuno-color-slate-925);--vuno-surface-2:var(--vuno-color-slate-800);--vuno-surface-inverse:var(--vuno-color-slate-100);--vuno-text-strong:var(--vuno-color-white);--vuno-text-body:var(--vuno-color-slate-300);--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-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);--vuno-control:oklch(21% 0.006 285.885);--vuno-tint:oklch(26.9% 0 0);--vuno-line:oklch(32% 0 0);--vuno-focus:oklch(93.5% 0 0)}html{scrollbar-gutter:stable}body{background-color:var(--vuno-surface);color:var(--vuno-text-body);font-family:var(--vuno-font-sans);font-optical-sizing:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}}

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

@@ -0,0 +1,20 @@
+import type { VunoColor } from '#vuno/types/base';
+import type { VunoAlertProps } from './Alert.types.js';
+type __VLS_Slots = {
+    /** Acciones relacionadas con el aviso. */
+    actions?: () => unknown;
+    /** Contenido que sustituye a `description`. */
+    default?: () => unknown;
+};
+declare const __VLS_base: import("vue").DefineComponent<VunoAlertProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<VunoAlertProps> & Readonly<{}>, {
+    color: VunoColor;
+    role: "alert" | "status" | null;
+}, {}, {}, {}, 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/Alert/Alert.theme.d.ts

@@ -0,0 +1,14 @@
+export declare const alertTheme: Record<"alert", {
+    readonly slots: {
+        readonly actions: "flex shrink-0 flex-wrap items-center gap-2 empty:hidden";
+        readonly body: "flex min-w-0 flex-1 flex-wrap items-center justify-between gap-3";
+        readonly content: "flex min-w-0 flex-1 flex-col gap-0.5";
+        readonly description: "text-sm leading-snug text-(--vuno-accent)";
+        readonly icon: "mt-0.5 size-4 shrink-0 text-(--vuno-accent)";
+        readonly root: "flex w-full items-start gap-3 rounded-lg bg-(--vuno-accent)/10 px-4 py-3";
+        readonly title: "text-sm leading-snug font-medium text-(--vuno-accent)";
+    };
+    readonly variants: {
+        readonly color: Record<import("../../types/base.js").VunoColor, Record<"root", string>>;
+    };
+}>;

package/dist/runtime/app/components/Alert/Alert.theme.js

@@ -0,0 +1,14 @@
+import { accentByColor } from "#vuno/theme/shared";
+import { defineTheme } from "#vuno/utils/theme";
+export const alertTheme = defineTheme("alert", {
+  slots: {
+    actions: "flex shrink-0 flex-wrap items-center gap-2 empty:hidden",
+    body: "flex min-w-0 flex-1 flex-wrap items-center justify-between gap-3",
+    content: "flex min-w-0 flex-1 flex-col gap-0.5",
+    description: "text-sm leading-snug text-(--vuno-accent)",
+    icon: "mt-0.5 size-4 shrink-0 text-(--vuno-accent)",
+    root: "flex w-full items-start gap-3 rounded-lg bg-(--vuno-accent)/10 px-4 py-3",
+    title: "text-sm leading-snug font-medium text-(--vuno-accent)"
+  },
+  variants: { color: accentByColor("root") }
+});

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

@@ -0,0 +1,10 @@
+import type { VunoColor } from '#vuno/types/base';
+import type { VunoUi } from '#vuno/types/slots';
+export type VunoAlertProps = {
+    color?: VunoColor;
+    description?: string;
+    icon?: null | string;
+    role?: 'alert' | 'status' | null;
+    title: string;
+    ui?: VunoUi<'alert'>;
+};

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

@@ -0,0 +1,68 @@
+<script setup>
+import { computed } from "vue";
+import { useIcons, useTheme } from "#vuno/composables/useTheme";
+import Icon from "#vuno/components/Icon/Icon.vue";
+import Text from "#vuno/components/Text/Text.vue";
+defineOptions({ name: "VunoAlert" });
+const props = defineProps({
+  color: { type: String, required: false, default: "info" },
+  description: { type: String, required: false },
+  icon: { type: [null, String], required: false },
+  role: { type: [String, null], required: false, default: "status" },
+  title: { type: String, required: true },
+  ui: { type: Object, required: false }
+});
+defineSlots();
+const icons = useIcons();
+const defaultIcons = {
+  error: icons.value.notifyError,
+  info: icons.value.notifyInfo,
+  neutral: icons.value.notifyInfo,
+  primary: icons.value.notifyInfo,
+  secondary: icons.value.notifyInfo,
+  success: icons.value.notifySuccess,
+  warning: icons.value.notifyWarning
+};
+const iconName = computed(() => props.icon === null ? void 0 : props.icon ?? defaultIcons[props.color]);
+const ui = useTheme(
+  "alert",
+  () => props.ui,
+  () => ({ color: props.color })
+);
+</script>
+
+<template>
+    <div
+        :class="ui.root"
+        :role="props.role ?? void 0"
+    >
+        <Icon
+            v-if="iconName"
+            :class="ui.icon"
+            :name="iconName"
+        />
+
+        <div :class="ui.body">
+            <div :class="ui.content">
+                <Text
+                    :class="ui.title"
+                    tag="p"
+                    tone="inherit"
+                    variant="inherit"
+                    >{{ props.title }}</Text
+                >
+
+                <div
+                    v-if="props.description || $slots.default"
+                    :class="ui.description"
+                >
+                    <slot>{{ props.description }}</slot>
+                </div>
+            </div>
+
+            <div :class="ui.actions">
+                <slot name="actions" />
+            </div>
+        </div>
+    </div>
+</template>

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

@@ -0,0 +1,20 @@
+import type { VunoColor } from '#vuno/types/base';
+import type { VunoAlertProps } from './Alert.types.js';
+type __VLS_Slots = {
+    /** Acciones relacionadas con el aviso. */
+    actions?: () => unknown;
+    /** Contenido que sustituye a `description`. */
+    default?: () => unknown;
+};
+declare const __VLS_base: import("vue").DefineComponent<VunoAlertProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<VunoAlertProps> & Readonly<{}>, {
+    color: VunoColor;
+    role: "alert" | "status" | null;
+}, {}, {}, {}, 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/{overlays → App}/App.d.vue.ts

@@ -1,23 +1,6 @@
 import { type Component } from 'vue';
 import type { VunoAlertRequest, VunoConfirmRequest, VunoNotifyRequest } from '#vuno/types/app';
-/**
- * Raíz del módulo: provee el contexto global, aloja los overlays y la pila
- * de notificaciones.
- *
- * Ya no va dentro de nada: monta él mismo lo que necesitan las piezas de
- * Reka, que antes ponía `UApp`.
- */
-type __VLS_Props = {
-    /**
-     * Dirección de lectura.
-     *
-     * Se provee a los componentes que la necesitan —hoy solo las
-     * pestañas, para invertir sus flechas— y se pone además en el
-     * elemento, que es de donde la lee el navegador para el texto y
-     * para las propiedades lógicas del CSS.
-     */
-    dir?: 'ltr' | 'rtl';
-};
+import type { VunoAppProps } from './App.types.js';
 /**
  * Monta un componente y espera a que emita `close`.
  *
@@ -33,14 +16,14 @@ declare var __VLS_1: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;
 };
-declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
+declare const __VLS_base: import("vue").DefineComponent<VunoAppProps, {
     alert: (request: VunoAlertRequest) => Promise<void>;
     closeAll: typeof closeAll;
     confirm: (request: VunoConfirmRequest) => Promise<boolean>;
     dismiss: typeof dismiss;
     notify: typeof notify;
     open: typeof open;
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<VunoAppProps> & Readonly<{}>, {
     dir: "ltr" | "rtl";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

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

@@ -0,0 +1,4 @@
+export type VunoAppProps = {
+    /** Dirección de lectura que heredan los componentes. */
+    dir?: 'ltr' | 'rtl';
+};

package/dist/runtime/app/components/{overlays → App}/App.vue

@@ -1,35 +1,52 @@
 <script setup>
-import { markRaw, onBeforeUnmount, provide, reactive, shallowReactive } from "vue";
-import Confirm from "#vuno/components/overlays/Confirm.vue";
-import { vunoContextInjectionKey, vunoDirectionInjectionKey } from "#vuno/internal/keys";
-import Overlay from "#vuno/components/overlays/Overlay.vue";
-import Toaster from "#vuno/components/overlays/Toaster.vue";
+import { markRaw, onBeforeUnmount, reactive, shallowReactive } from "vue";
+import { provideVunoContext } from "#vuno/composables/internal/useVunoContext";
+import { provideVunoDirection } from "#vuno/composables/internal/useVunoDirection";
+import Overlay from "#vuno/components/App/internal/Overlay/Overlay.vue";
+import Toaster from "#vuno/components/App/internal/Toaster/Toaster.vue";
+import Confirm from "#vuno/components/Confirm/Confirm.vue";
+defineOptions({ name: "VunoApp" });
 const props = defineProps({
   dir: { type: String, required: false, default: "ltr" }
 });
-const overlays = reactive([]);
 const notifications = shallowReactive([]);
+const overlays = reactive([]);
 let nextId = 0;
+let unmounting = false;
 const EXIT_MS = 220;
+const overlayRemovalTimers = /* @__PURE__ */ new Map();
 function removeOverlay(id) {
+  const timer = overlayRemovalTimers.get(id);
+  if (timer) {
+    clearTimeout(timer);
+    overlayRemovalTimers.delete(id);
+  }
   const index = overlays.findIndex((entry) => entry.id === id);
   if (index !== -1) overlays.splice(index, 1);
 }
 function dismissOverlay(id) {
   const entry = overlays.find((item) => item.id === id);
-  if (entry) entry.open = false;
-  setTimeout(() => removeOverlay(id), EXIT_MS);
+  if (!entry) return;
+  entry.open = false;
+  if (unmounting) {
+    removeOverlay(id);
+    return;
+  }
+  overlayRemovalTimers.set(id, setTimeout(() => removeOverlay(id), EXIT_MS));
+}
+function createOverlayResolver(id, resolve) {
+  let settled = false;
+  return (value) => {
+    if (settled) return;
+    settled = true;
+    resolve(value);
+    dismissOverlay(id);
+  };
 }
 function open(component, props2 = {}) {
   return new Promise((resolve) => {
     const id = nextId++;
-    let settled = false;
-    const settle = (value) => {
-      if (settled) return;
-      settled = true;
-      resolve(value);
-      dismissOverlay(id);
-    };
+    const settle = createOverlayResolver(id, resolve);
     overlays.push({
       id,
       // El registro es reactivo en profundidad para poder animar la
@@ -64,13 +81,7 @@ function open(component, props2 = {}) {
 function askConfirm(request, dismissed) {
   return new Promise((resolve) => {
     const id = nextId++;
-    let settled = false;
-    const settle = (value) => {
-      if (settled) return;
-      settled = true;
-      resolve(value);
-      dismissOverlay(id);
-    };
+    const settle = createOverlayResolver(id, resolve);
     overlays.push({
       id,
       component: markRaw(Confirm),
@@ -93,14 +104,17 @@ const alert = async (request) => {
   await askConfirm({ ...request, alert: true }, true);
 };
 function closeAll() {
-  for (const entry of [...overlays]) (entry.listeners.cancel ?? entry.listeners.close)?.();
+  for (let index = overlays.length - 1; index >= 0; index--) {
+    const entry = overlays[index];
+    (entry.listeners.cancel ?? entry.listeners.close)?.();
+  }
 }
-const timers = /* @__PURE__ */ new Map();
+const notificationTimers = /* @__PURE__ */ new Map();
 function dismiss(id) {
-  const timer = timers.get(id);
+  const timer = notificationTimers.get(id);
   if (timer) {
     clearTimeout(timer);
-    timers.delete(id);
+    notificationTimers.delete(id);
   }
   const index = notifications.findIndex((entry) => entry.id === id);
   if (index !== -1) notifications.splice(index, 1);
@@ -110,36 +124,37 @@ function notify(request) {
   const duration = request.duration ?? 5e3;
   notifications.push({ ...request, id, color: request.color ?? "neutral", duration });
   if (duration > 0)
-    timers.set(
+    notificationTimers.set(
       id,
       setTimeout(() => dismiss(id), duration)
     );
   return id;
 }
 onBeforeUnmount(() => {
-  for (const timer of timers.values()) clearTimeout(timer);
-  timers.clear();
+  unmounting = true;
+  closeAll();
+  for (const timer of overlayRemovalTimers.values()) clearTimeout(timer);
+  for (const timer of notificationTimers.values()) clearTimeout(timer);
+  overlayRemovalTimers.clear();
+  notificationTimers.clear();
+  overlays.splice(0);
+  notifications.splice(0);
 });
 const context = { alert, closeAll, confirm, dismiss, notifications, notify, open, overlays };
-provide(vunoDirectionInjectionKey, () => props.dir);
-provide(vunoContextInjectionKey, context);
+provideVunoDirection(() => props.dir);
+provideVunoContext(context);
 defineExpose({ alert, closeAll, confirm, dismiss, notify, open });
 </script>
 
 <template>
     <!--
-        Aquí vivía el `ConfigProvider` de Reka, y de lo que aportaba queda una
-        cosa: la dirección de lectura. Se pone en el elemento —de donde la lee
-        el navegador— y se provee además a los componentes que la necesitan.
-
-        Lo otro que daba era una fuente estable de `useId` para las piezas de
-        Reka. Eso lo resuelve ahora Vue: el `useId` de Nuxt coincide entre
-        servidor y cliente por sí solo, y es el que usan los componentes del
-        módulo desde que no hay ninguna pieza de Reka que dependa del contexto.
+        La dirección de lectura se pone en el elemento —de donde la lee el
+        navegador— y se provee además a los componentes que la necesitan.
+        Vue aporta un `useId` estable que Nuxt conserva entre servidor y cliente.
 
         El `div` es la única forma de llevar el `dir` sin pedirle nada al
-        proyecto. No pinta: no tiene clase ni estilo, así que el hijo se
-        comporta igual que si colgara del padre.
+        proyecto. No tiene estilos propios, pero sí forma parte del contrato:
+        es una caja de bloque alrededor de la aplicación.
     -->
     <div :dir="props.dir">
         <slot />

package/dist/runtime/app/components/{overlays → App}/App.vue.d.ts

@@ -1,23 +1,6 @@
 import { type Component } from 'vue';
 import type { VunoAlertRequest, VunoConfirmRequest, VunoNotifyRequest } from '#vuno/types/app';
-/**
- * Raíz del módulo: provee el contexto global, aloja los overlays y la pila
- * de notificaciones.
- *
- * Ya no va dentro de nada: monta él mismo lo que necesitan las piezas de
- * Reka, que antes ponía `UApp`.
- */
-type __VLS_Props = {
-    /**
-     * Dirección de lectura.
-     *
-     * Se provee a los componentes que la necesitan —hoy solo las
-     * pestañas, para invertir sus flechas— y se pone además en el
-     * elemento, que es de donde la lee el navegador para el texto y
-     * para las propiedades lógicas del CSS.
-     */
-    dir?: 'ltr' | 'rtl';
-};
+import type { VunoAppProps } from './App.types.js';
 /**
  * Monta un componente y espera a que emita `close`.
  *
@@ -33,14 +16,14 @@ declare var __VLS_1: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;
 };
-declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
+declare const __VLS_base: import("vue").DefineComponent<VunoAppProps, {
     alert: (request: VunoAlertRequest) => Promise<void>;
     closeAll: typeof closeAll;
     confirm: (request: VunoConfirmRequest) => Promise<boolean>;
     dismiss: typeof dismiss;
     notify: typeof notify;
     open: typeof open;
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<VunoAppProps> & Readonly<{}>, {
     dir: "ltr" | "rtl";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/runtime/app/components/App/internal/Overlay/Overlay.d.vue.ts

@@ -0,0 +1,7 @@
+import type { VunoOverlayEntry } from '#vuno/types/app';
+type Props = {
+    overlays: readonly VunoOverlayEntry[];
+};
+declare const __VLS_export: 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 _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/app/components/{overlays → App/internal/Overlay}/Overlay.vue

@@ -1,5 +1,7 @@
 <script setup>
 import { computed } from "vue";
+import OverlayItem from "#vuno/components/App/internal/OverlayItem/OverlayItem.vue";
+defineOptions({ name: "VunoOverlay" });
 const props = defineProps({
   overlays: { type: Array, required: true }
 });
@@ -28,13 +30,10 @@ const isTopmost = (index) => index === topmost.value;
         Tampoco lleva contenedor propio: cada diálogo se sale del flujo por su
         cuenta, así que un elemento aquí solo añadiría un nodo vacío.
     -->
-    <component
-        :is="entry.component"
+    <OverlayItem
         v-for="(entry, index) in props.overlays"
         :key="entry.id"
-        v-bind="entry.props"
-        :class="isTopmost(index) ? void 0 : 'vuno-overlay-behind'"
-        :open="entry.open"
-        v-on="entry.listeners"
+        :behind="!isTopmost(index)"
+        :entry="entry"
     />
 </template>

package/dist/runtime/app/components/App/internal/Overlay/Overlay.vue.d.ts

@@ -0,0 +1,7 @@
+import type { VunoOverlayEntry } from '#vuno/types/app';
+type Props = {
+    overlays: readonly VunoOverlayEntry[];
+};
+declare const __VLS_export: 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 _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/app/components/App/internal/OverlayItem/OverlayItem.d.vue.ts

@@ -0,0 +1,8 @@
+import type { VunoOverlayEntry } from '#vuno/types/app';
+type Props = {
+    behind: boolean;
+    entry: VunoOverlayEntry;
+};
+declare const __VLS_export: 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 _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/app/components/App/internal/OverlayItem/OverlayItem.vue

@@ -0,0 +1,18 @@
+<script setup>
+import { provideVunoOverlayBehind } from "#vuno/composables/internal/useVunoOverlayBehind";
+defineOptions({ name: "VunoOverlayItem" });
+const props = defineProps({
+  behind: { type: Boolean, required: true },
+  entry: { type: Object, required: true }
+});
+provideVunoOverlayBehind(() => props.behind);
+</script>
+
+<template>
+    <component
+        :is="props.entry.component"
+        v-bind="props.entry.props"
+        :open="props.entry.open"
+        v-on="props.entry.listeners"
+    />
+</template>

package/dist/runtime/app/components/App/internal/OverlayItem/OverlayItem.vue.d.ts

@@ -0,0 +1,8 @@
+import type { VunoOverlayEntry } from '#vuno/types/app';
+type Props = {
+    behind: boolean;
+    entry: VunoOverlayEntry;
+};
+declare const __VLS_export: 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 _default: typeof __VLS_export;
+export default _default;