@groupteknology/vuno 2.0.0 → 3.0.0

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-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-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)}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}}
+@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

@@ -1,5 +1,5 @@
-import type { VunoAlertProps } from '#vuno/types/alert';
 import type { VunoColor } from '#vuno/types/base';
+import type { VunoAlertProps } from './Alert.types.js';
 type __VLS_Slots = {
     /** Acciones relacionadas con el aviso. */
     actions?: () => unknown;
@@ -8,7 +8,7 @@ type __VLS_Slots = {
 };
 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";
+    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;

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

@@ -1,11 +1,12 @@
 export declare const alertTheme: Record<"alert", {
     readonly slots: {
-        readonly actions: "mt-3 flex flex-wrap items-center gap-2 empty:hidden";
-        readonly body: "min-w-0 flex-1";
-        readonly description: "mt-1 text-sm text-vuno-body";
-        readonly icon: "size-5 shrink-0 self-center text-(--vuno-accent)";
-        readonly root: "flex w-full items-start gap-3 rounded-sm bg-(--vuno-accent)/10 p-4 ring-1 ring-(--vuno-accent)/25 ring-inset";
-        readonly title: "font-medium text-vuno-strong";
+        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

@@ -2,12 +2,13 @@ import { accentByColor } from "#vuno/theme/shared";
 import { defineTheme } from "#vuno/utils/theme";
 export const alertTheme = defineTheme("alert", {
   slots: {
-    actions: "mt-3 flex flex-wrap items-center gap-2 empty:hidden",
-    body: "min-w-0 flex-1",
-    description: "mt-1 text-sm text-vuno-body",
-    icon: "size-5 shrink-0 self-center text-(--vuno-accent)",
-    root: "flex w-full items-start gap-3 rounded-sm bg-(--vuno-accent)/10 p-4 ring-1 ring-(--vuno-accent)/25 ring-inset",
-    title: "font-medium text-vuno-strong"
+    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

@@ -2,12 +2,13 @@
 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, required: false, default: "status" },
+  role: { type: [String, null], required: false, default: "status" },
   title: { type: String, required: true },
   ui: { type: Object, required: false }
 });
@@ -33,7 +34,7 @@ const ui = useTheme(
 <template>
     <div
         :class="ui.root"
-        :role="props.role"
+        :role="props.role ?? void 0"
     >
         <Icon
             v-if="iconName"
@@ -42,13 +43,21 @@ const ui = useTheme(
         />
 
         <div :class="ui.body">
-            <p :class="ui.title">{{ props.title }}</p>
+            <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
+                    v-if="props.description || $slots.default"
+                    :class="ui.description"
+                >
+                    <slot>{{ props.description }}</slot>
+                </div>
             </div>
 
             <div :class="ui.actions">

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

@@ -1,5 +1,5 @@
-import type { VunoAlertProps } from '#vuno/types/alert';
 import type { VunoColor } from '#vuno/types/base';
+import type { VunoAlertProps } from './Alert.types.js';
 type __VLS_Slots = {
     /** Acciones relacionadas con el aviso. */
     actions?: () => unknown;
@@ -8,7 +8,7 @@ type __VLS_Slots = {
 };
 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";
+    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;

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

@@ -1,22 +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.
- *
- * Monta directamente todo lo que necesitan las piezas del módulo.
- */
-type 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`.
  *
@@ -32,14 +16,14 @@ declare var __VLS_1: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;
 };
-declare const __VLS_base: import("vue").DefineComponent<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<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/App/App.vue

@@ -1,6 +1,7 @@
 <script setup>
-import { markRaw, onBeforeUnmount, provide, reactive, shallowReactive } from "vue";
-import { vunoContextInjectionKey, vunoDirectionInjectionKey } from "#vuno/internal/keys";
+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";
@@ -11,26 +12,41 @@ const props = defineProps({
 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
@@ -65,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),
@@ -94,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);
@@ -111,19 +124,25 @@ 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>
 
@@ -134,8 +153,8 @@ defineExpose({ alert, closeAll, confirm, dismiss, notify, open });
         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/App/App.vue.d.ts

@@ -1,22 +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.
- *
- * Monta directamente todo lo que necesitan las piezas del módulo.
- */
-type 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`.
  *
@@ -32,14 +16,14 @@ declare var __VLS_1: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;
 };
-declare const __VLS_base: import("vue").DefineComponent<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<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/OverlayItem/OverlayItem.vue

@@ -1,12 +1,11 @@
 <script setup>
-import { provide } from "vue";
-import { vunoOverlayBehindInjectionKey } from "#vuno/internal/keys";
+import { provideVunoOverlayBehind } from "#vuno/composables/internal/useVunoOverlayBehind";
 defineOptions({ name: "VunoOverlayItem" });
 const props = defineProps({
   behind: { type: Boolean, required: true },
   entry: { type: Object, required: true }
 });
-provide(vunoOverlayBehindInjectionKey, () => props.behind);
+provideVunoOverlayBehind(() => props.behind);
 </script>
 
 <template>

package/dist/runtime/app/components/App/internal/Toast/Toast.theme.d.ts

@@ -1,11 +1,11 @@
 /** El apilado lo añade `Overlay`; aquí solo lo que sea del proyecto. */
 export declare const toastTheme: Record<"toast", {
     readonly slots: {
-        readonly body: "min-w-0 flex-1";
-        readonly description: "mt-1 text-sm text-vuno-muted";
-        readonly icon: "mt-0.5 size-5 shrink-0 text-(--vuno-accent)";
-        readonly root: "flex w-full items-start gap-3 rounded-sm bg-vuno-surface-1 p-3 shadow-lg ring ring-(--vuno-accent)/25";
-        readonly title: "text-sm font-medium text-vuno-strong";
+        readonly actions: "absolute top-2 right-2";
+        readonly close: "rounded text-(--vuno-accent) shadow-none ring-transparent hover:bg-(--vuno-accent)/15 hover:text-(--vuno-accent)";
+        readonly content: "pr-5";
+        readonly description: "text-vuno-muted";
+        readonly root: "relative rounded-xl p-4 shadow-lg ring ring-(--vuno-accent)/25";
     };
     readonly variants: {
         readonly color: Record<import("../../../../types/base.js").VunoColor, Record<"root", string>>;

package/dist/runtime/app/components/App/internal/Toast/Toast.theme.js

@@ -2,17 +2,15 @@ import { accentByColor } from "#vuno/theme/shared";
 import { defineTheme } from "#vuno/utils/theme";
 export const toastTheme = defineTheme("toast", {
   slots: {
-    body: "min-w-0 flex-1",
-    description: "mt-1 text-sm text-vuno-muted",
+    actions: "absolute top-2 right-2",
+    close: "rounded text-(--vuno-accent) shadow-none ring-transparent hover:bg-(--vuno-accent)/15 hover:text-(--vuno-accent)",
+    content: "pr-5",
+    description: "text-vuno-muted",
     /*
-     * La tarjeta declara el acento para que el icono lo herede y el
-     * anillo diferencie el estado sin teñir toda la superficie. Un
-     * nombre compuesto como `text-${color}` no serviría: Tailwind no
-     * genera una clase que nunca aparece literal en el código.
+     * `Alert` aporta el layout, el icono y el tinte semántico. El toast
+     * solo lo eleva sobre la página y reserva sitio para cerrarlo.
      */
-    icon: "mt-0.5 size-5 shrink-0 text-(--vuno-accent)",
-    root: "flex w-full items-start gap-3 rounded-sm bg-vuno-surface-1 p-3 shadow-lg ring ring-(--vuno-accent)/25",
-    title: "text-sm font-medium text-vuno-strong"
+    root: "relative rounded-xl p-4 shadow-lg ring ring-(--vuno-accent)/25"
   },
   variants: { color: accentByColor("root") }
 });

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

@@ -1,8 +1,7 @@
 <script setup>
-import { computed } from "vue";
 import { useIcons, useMessages, useTheme } from "#vuno/composables/useTheme";
+import Alert from "#vuno/components/Alert/Alert.vue";
 import Button from "#vuno/components/Button/Button.vue";
-import Icon from "#vuno/components/Icon/Icon.vue";
 defineOptions({ name: "VunoToast" });
 const props = defineProps({
   notification: { type: Object, required: true }
@@ -11,14 +10,6 @@ const emit = defineEmits(["dismiss"]);
 const icons = useIcons();
 const messages = useMessages();
 const ui = useTheme("toast", void 0, () => ({ color: props.notification.color ?? "neutral" }));
-const defaultIcons = {
-  error: icons.value.notifyError,
-  info: icons.value.notifyInfo,
-  neutral: icons.value.notifyInfo,
-  success: icons.value.notifySuccess,
-  warning: icons.value.notifyWarning
-};
-const icon = computed(() => props.notification.icon ?? defaultIcons[props.notification.color]);
 </script>
 
 <template>
@@ -35,30 +26,30 @@ const icon = computed(() => props.notification.icon ?? defaultIcons[props.notifi
         solo. Queda dicho aquí y en su ficha para que sea un hueco conocido y no
         un defecto futuro.
     -->
-    <div :class="ui.root">
-        <Icon
-            :class="ui.icon"
-            :name="icon"
-        />
-
-        <div :class="ui.body">
-            <p :class="ui.title">{{ props.notification.title }}</p>
-
-            <p
-                v-if="props.notification.description"
-                :class="ui.description"
-            >
-                {{ props.notification.description }}
-            </p>
-        </div>
-
-        <Button
-            :aria-label="messages.close"
-            color="neutral"
-            :icon="icons.close"
-            size="xs"
-            variant="ghost"
-            @click="emit('dismiss')"
-        />
-    </div>
+    <Alert
+        :color="props.notification.color"
+        :description="props.notification.description"
+        :icon="props.notification.icon"
+        :role="null"
+        :title="props.notification.title"
+        :ui="{
+  actions: ui.actions,
+  content: ui.content,
+  description: ui.description,
+  root: ui.root
+}"
+    >
+        <template #actions>
+            <Button
+                :aria-label="messages.close"
+                color="neutral"
+                :icon="icons.close"
+                shape="square"
+                size="xs"
+                :ui="{ base: ui.close }"
+                variant="ghost"
+                @click="emit('dismiss')"
+            />
+        </template>
+    </Alert>
 </template>

package/dist/runtime/app/components/App/internal/Toaster/Toaster.theme.d.ts

@@ -6,10 +6,10 @@ export declare const toasterTheme: Record<"toaster", {
         readonly item: "pointer-events-auto";
         readonly leaveActive: "absolute inset-x-0 transition duration-150 ease-in";
         readonly leaveTo: "translate-x-4 opacity-0";
-        readonly list: "flex flex-col gap-2";
+        readonly list: "flex flex-col gap-3";
         /** Sin esto, al cerrar una de en medio las de abajo dan un salto. */
         readonly move: "transition-transform duration-200 ease-out";
-        /** Fijo arriba a la derecha; en móvil ocupa el ancho con margen. */
-        readonly root: "pointer-events-none fixed inset-x-4 top-4 z-100 flex flex-col gap-2 sm:left-auto sm:w-96";
+        /** Fijo abajo a la derecha; en móvil ocupa el ancho con margen. */
+        readonly root: "pointer-events-none fixed inset-x-4 bottom-4 z-100 flex flex-col gap-3 sm:inset-x-auto sm:right-8 sm:bottom-8 sm:w-85";
     };
 }>;

package/dist/runtime/app/components/App/internal/Toaster/Toaster.theme.js

@@ -7,10 +7,10 @@ export const toasterTheme = defineTheme("toaster", {
     item: "pointer-events-auto",
     leaveActive: "absolute inset-x-0 transition duration-150 ease-in",
     leaveTo: "translate-x-4 opacity-0",
-    list: "flex flex-col gap-2",
+    list: "flex flex-col gap-3",
     /** Sin esto, al cerrar una de en medio las de abajo dan un salto. */
     move: "transition-transform duration-200 ease-out",
-    /** Fijo arriba a la derecha; en móvil ocupa el ancho con margen. */
-    root: "pointer-events-none fixed inset-x-4 top-4 z-100 flex flex-col gap-2 sm:left-auto sm:w-96"
+    /** Fijo abajo a la derecha; en móvil ocupa el ancho con margen. */
+    root: "pointer-events-none fixed inset-x-4 bottom-4 z-100 flex flex-col gap-3 sm:inset-x-auto sm:right-8 sm:bottom-8 sm:w-85"
   }
 });

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

@@ -1,26 +1,9 @@
-import type { VunoRadius, VunoSize } from '#vuno/types/base';
-import type { VunoUi } from '#vuno/types/slots';
-/**
- * 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 Props = {
-    alt?: string;
-    /** La curvatura. Sin valor, la que traiga el tema. */
-    radius?: VunoRadius;
-    size?: VunoSize;
-    src?: string;
-    ui?: VunoUi<'avatar'>;
-};
-declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
-    radius: VunoRadius;
-    size: VunoSize;
+import type { VunoAvatarProps } from './Avatar.types.js';
+declare const __VLS_export: import("vue").DefineComponent<VunoAvatarProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<VunoAvatarProps> & Readonly<{}>, {
+    radius: import("../../types/base.js").VunoRadius;
+    size: import("./Avatar.types.js").VunoAvatarSize;
     alt: string;
-    ui: VunoUi<"avatar">;
+    ui: import("../../types/slots.js").VunoUi<"avatar">;
     src: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

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

@@ -0,0 +1,10 @@
+import type { VunoRadius, VunoSize } from '#vuno/types/base';
+import type { VunoUi } from '#vuno/types/slots';
+export type VunoAvatarSize = Extract<VunoSize, 'lg' | 'md' | 'sm' | 'xl' | 'xs'>;
+export type VunoAvatarProps = {
+    alt?: string;
+    radius?: VunoRadius;
+    size?: VunoAvatarSize;
+    src?: string;
+    ui?: VunoUi<'avatar'>;
+};