@groupteknology/vuno 3.0.0 → 4.0.0

package/dist/runtime/app/components/Loading/internal/LoadingOverlay/LoadingOverlay.vue.d.ts

@@ -0,0 +1,25 @@
+type Props = {
+    active: boolean;
+    description: string;
+    overlayClass?: string;
+    scopeClass?: string;
+    withOverlay: boolean;
+};
+declare var __VLS_1: {}, __VLS_3: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+} & {
+    default?: (props: typeof __VLS_3) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
+    overlayClass: string;
+    scopeClass: string;
+}, {}, {}, {}, 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/Loading/internal/focusTrap.d.ts

@@ -0,0 +1,14 @@
+import { type Ref } from 'vue';
+/**
+ * El foco mientras el overlay de carga bloquea la página.
+ *
+ * Vuno no deja escapar el foco de un overlay de carga: no hay nada que
+ * enfocar debajo —la tarea está en curso— y un Tab que saliera llevaría a
+ * controles inertes. El contenedor recibe el foco, `Tab` se cancela y al
+ * soltarlo se devuelve el foco a donde estaba.
+ *
+ * La excepción es una capa superior: un `<dialog>` modal o un `aria-modal`
+ * abierto por encima conserva su foco, porque el overlay no lo contiene. Sin
+ * esa comprobación, un `Modal` abierto sobre una carga quedaría inusable.
+ */
+export declare function useOverlayFocusTrap(target: Readonly<Ref<HTMLElement | null>>, active: () => boolean): void;

package/dist/runtime/app/components/Loading/internal/focusTrap.js

@@ -0,0 +1,81 @@
+import { onScopeDispose, watch } from "vue";
+export function useOverlayFocusTrap(target, active) {
+  let release;
+  const stop = () => {
+    release?.();
+    release = void 0;
+  };
+  watch(
+    [target, active],
+    ([element, engaged]) => {
+      stop();
+      if (!engaged || !element || typeof document === "undefined") return;
+      release = engage(element);
+    },
+    { flush: "post", immediate: true }
+  );
+  onScopeDispose(stop);
+}
+function isModalDialog(element) {
+  if (element.matches('[aria-modal="true"]')) return true;
+  if (!(element instanceof HTMLDialogElement) || !element.open) return false;
+  try {
+    return element.matches(":modal");
+  } catch {
+    return true;
+  }
+}
+function isLayeredOnTop(target, overlay) {
+  if (!(target instanceof Element)) return false;
+  for (let element = target; element; element = element.parentElement) {
+    if (isModalDialog(element)) return !element.contains(overlay);
+  }
+  return false;
+}
+function restoreFocus(overlay, previouslyFocused) {
+  const active = document.activeElement;
+  const overlayOwnsFocus = !active || active === document.body || overlay.contains(active);
+  if (!overlayOwnsFocus || !previouslyFocused?.isConnected) return;
+  previouslyFocused.focus();
+  if (document.activeElement === previouslyFocused) return;
+  const fallback = previouslyFocused.parentElement;
+  if (!fallback || fallback === document.body || fallback === document.documentElement) return;
+  const hadTabIndex = fallback.hasAttribute("tabindex");
+  if (!hadTabIndex) fallback.setAttribute("tabindex", "-1");
+  fallback.focus();
+  if (hadTabIndex) return;
+  if (document.activeElement === fallback) fallback.addEventListener("blur", () => fallback.removeAttribute("tabindex"), { once: true });
+  else fallback.removeAttribute("tabindex");
+}
+function engage(overlay) {
+  const previouslyFocused = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+  if (document.activeElement === document.body && !isLayeredOnTop(previouslyFocused, overlay)) overlay.focus();
+  let reclaiming = false;
+  const reclaim = () => {
+    if (reclaiming) return;
+    reclaiming = true;
+    try {
+      overlay.focus();
+    } finally {
+      reclaiming = false;
+    }
+  };
+  const onFocusIn = (event) => {
+    if (!(event.target instanceof Node) || overlay.contains(event.target)) return;
+    if (isLayeredOnTop(event.target, overlay)) return;
+    reclaim();
+  };
+  const onKeydown = (event) => {
+    if (event.key !== "Tab") return;
+    if (isLayeredOnTop(event.target, overlay)) return;
+    event.preventDefault();
+    reclaim();
+  };
+  document.addEventListener("focusin", onFocusIn, true);
+  document.addEventListener("keydown", onKeydown, true);
+  return () => {
+    document.removeEventListener("focusin", onFocusIn, true);
+    document.removeEventListener("keydown", onKeydown, true);
+    restoreFocus(overlay, previouslyFocused);
+  };
+}

package/dist/runtime/app/components/Menu/Menu.context.d.ts

@@ -0,0 +1,51 @@
+import type { ComputedRef, InjectionKey } from 'vue';
+import type { MenuBackgroundToken, MenuSize } from './Menu.types.js';
+export type MenuInitialFocus = 'first' | 'last' | 'none' | 'panel';
+/**
+ * Lo que un submenú hereda del menú raíz.
+ *
+ * Vuno lo resuelve igual —`menuSize = isRoot ? size : context.state.size`—:
+ * la apariencia se declara una vez en el menú y la cascada entera la sigue. Un
+ * submenú con otro tamaño o sin el contorno del padre se leería como otro menú.
+ */
+export type MenuAppearance = {
+    backgroundToken: MenuBackgroundToken;
+    border: boolean;
+    size: MenuSize;
+};
+export type MenuItemRegistration = {
+    activate: (event: KeyboardEvent | MouseEvent) => void;
+    closeSubmenu: (returnFocus?: boolean) => void;
+    disabled: () => boolean;
+    element: () => HTMLElement | null;
+    hasSubmenu: () => boolean;
+    openSubmenu: (focus: MenuInitialFocus) => void;
+};
+/**
+ * Las columnas que abre una opción en la rejilla de su nivel.
+ *
+ * Vuno marca el **nivel** —`vuno--menu--with-icons`,
+ * `vuno--menu--with-selectable-items`— y no la opción, y por eso las etiquetas
+ * siguen alineadas cuando solo algunas opciones traen icono. Se cuentan en vez
+ * de encenderse: quitar la única opción con icono tiene que volver a cerrar su
+ * columna, y un booleano no se apaga.
+ */
+export type MenuItemTraits = {
+    icon?: boolean;
+    selection?: boolean;
+};
+export type MenuLevelContext = {
+    appearance: ComputedRef<MenuAppearance>;
+    depth: number;
+    /** ¿Alguna opción de este nivel trae icono? Abre la columna de 1rem inicial. */
+    hasIcons: ComputedRef<boolean>;
+    /** ¿Alguna es seleccionable? Abre la columna de la marca de selección. */
+    hasSelection: ComputedRef<boolean>;
+    activate: (item: MenuItemRegistration, event: KeyboardEvent | MouseEvent) => void;
+    /** Lo llama una opción al montarse; devuelve cómo deshacerlo. */
+    declare: (traits: MenuItemTraits) => () => void;
+    dismiss: (returnFocus?: boolean) => void;
+    highlight: (item: MenuItemRegistration) => void;
+    register: (item: MenuItemRegistration) => () => void;
+};
+export declare const menuLevelKey: InjectionKey<MenuLevelContext>;

package/dist/runtime/app/components/Menu/Menu.context.js

@@ -0,0 +1 @@
+export const menuLevelKey = Symbol("menu-level");

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

@@ -1,13 +1,32 @@
-import type { VunoMenuProps } from './Menu.types.js';
+import type { MenuProps } from './Menu.types.js';
+type __VLS_Props = MenuProps;
 type __VLS_Slots = {
+    default?: () => unknown;
     /** El disparador. Recibe el estado abierto por si quiere pintarlo. */
-    default?: (props: {
+    trigger?: (props: {
         open: boolean;
     }) => unknown;
 };
-declare const __VLS_base: import("vue").DefineComponent<VunoMenuProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<VunoMenuProps> & Readonly<{}>, {
-    placement: import("../../types/base.js").VunoPlacement;
-    portal: import("../../types/base.js").VunoPortalTarget;
+type __VLS_ModelProps = {
+    'open'?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    open: () => any;
+    close: () => any;
+    "update:open": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onOpen?: (() => any) | undefined;
+    onClose?: (() => any) | undefined;
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+}>, {
+    size: import("./Menu.types.js").MenuSize;
+    placement: import("../../types/base.js").Placement;
+    backgroundToken: import("./Menu.types.js").MenuBackgroundToken;
+    border: boolean;
+    ui: import("../../types/slots.js").ComponentUi<"menu">;
+    ariaLabel: string;
+    portal: import("../../types/base.js").PortalTarget;
 }, {}, {}, {}, 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/Menu/Menu.theme.d.ts

@@ -1,17 +1,108 @@
 export declare const menuTheme: Record<"menu", {
-    /**
-     * El color del texto pasa por la variable de acento aunque por defecto sea
-     * el del cuerpo. Escrito como `text-vuno-body`, la variante de color
-     * asignaba `--vuno-accent` y **nadie la consumía**: una acción destructiva
-     * se veía igual que las demás, sin que nada fallara.
-     */
+    readonly compoundVariants: [{
+        readonly class: {
+            readonly item: "grid-cols-[1fr_max-content]";
+        };
+        readonly withIcons: "false";
+        readonly withSelection: "false";
+    }, {
+        readonly class: {
+            readonly item: "grid-cols-[1rem_1fr_max-content]";
+        };
+        readonly withIcons: "true";
+        readonly withSelection: "false";
+    }, {
+        readonly class: {
+            readonly item: "grid-cols-[1rem_1fr_max-content]";
+        };
+        readonly withIcons: "false";
+        readonly withSelection: "true";
+    }, {
+        readonly class: {
+            readonly item: "grid-cols-[1rem_1rem_1fr_max-content]";
+        };
+        readonly withIcons: "true";
+        readonly withSelection: "true";
+    }, {
+        readonly class: {
+            readonly item: "hover:bg-transparent hover:text-(--vuno-text-disabled) focus:bg-transparent focus:text-(--vuno-text-disabled) focus:shadow-none";
+        };
+        readonly disabled: "true";
+        readonly kind: "danger";
+    }];
     readonly slots: {
-        readonly content: "z-50 min-w-40 rounded-sm border border-vuno-border bg-vuno-surface-1 p-1 shadow-lg";
-        readonly icon: "size-4 shrink-0";
-        readonly item: "flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm text-(--vuno-accent) outline-none [--vuno-accent:var(--color-vuno-body)] data-disabled:cursor-not-allowed data-disabled:opacity-50 data-highlighted:bg-(--vuno-accent)/10";
-        readonly separator: "-mx-1 my-1 h-px bg-vuno-border";
+        readonly content: "z-modal max-w-72 min-w-40 py-1 shadow-[0_2px_6px_var(--vuno-shadow)] outline-none focus-visible:outline-solid focus-visible:outline-1 focus-visible:outline-(--vuno-focus)";
+        /** El texto oculto que describe una acción destructiva a un lector de pantalla. */
+        readonly description: "sr-only";
+        /** La celda del icono. Existe aunque esté vacía: es una columna de la rejilla. */
+        readonly icon: "flex size-4 shrink-0 items-center justify-center";
+        readonly item: "grid cursor-pointer items-center gap-x-2 px-4 text-sm leading-[1.125rem] tracking-[0.16px] text-(--vuno-text-secondary) outline-none transition-colors duration-(--vuno-duration-fast-01) ease-(--vuno-easing-standard-productive) hover:bg-(--vuno-layer-hover-01) hover:text-(--vuno-text-primary) focus:outline-solid focus:outline-2 focus:-outline-offset-2 focus:outline-(--vuno-focus) data-highlighted:bg-(--vuno-layer-hover-01) data-highlighted:text-(--vuno-text-primary) motion-reduce:transition-none";
+        /**
+         * La etiqueta se recorta con puntos suspensivos; el atributo `title` la
+         * completa. `min-w-0` es lo que deja que se recorte: una pista `1fr` de
+         * rejilla mide como mínimo su contenido, así que sin esto el texto largo
+         * no encoge y desborda el ancho máximo del panel en vez de cortarse.
+         */
+        readonly label: "min-w-0 overflow-hidden text-ellipsis whitespace-nowrap";
+        readonly separator: "my-1 block h-px w-full bg-(--vuno-border-subtle-00)";
+        /**
+         * La celda final: el atajo de teclado o el caret del submenú. **No
+         * declara color**: el sistema de origen solo le da `display: flex`, así
+         * que hereda el de la opción y se aclara con ella al apuntarla. Fijarlo
+         * aquí dejaba la opción apuntada a dos tonos.
+         */
+        readonly shortcut: "flex items-center justify-end rtl:[&_svg]:-scale-x-100";
     };
     readonly variants: {
-        readonly color: Record<import("../../types/base.js").VunoColor, Record<"item", string>>;
+        readonly backgroundToken: {
+            readonly background: {
+                readonly content: "bg-(--vuno-background)";
+            };
+            readonly layer: {
+                readonly content: "bg-(--vuno-layer-01)";
+            };
+        };
+        readonly border: {
+            readonly false: {};
+            readonly true: {
+                readonly content: "outline-solid outline-1 outline-(--vuno-border-subtle-00)";
+            };
+        };
+        readonly disabled: {
+            readonly false: {};
+            readonly true: {
+                readonly item: "cursor-not-allowed text-(--vuno-text-disabled) hover:bg-transparent hover:text-(--vuno-text-disabled)";
+            };
+        };
+        readonly kind: {
+            readonly danger: {
+                readonly item: "hover:bg-(--vuno-button-danger-primary) hover:text-(--vuno-text-on-color) focus:bg-(--vuno-button-danger-primary) focus:text-(--vuno-text-on-color) focus:shadow-[inset_0_0_0_3px_var(--vuno-background)] data-highlighted:bg-(--vuno-button-danger-primary) data-highlighted:text-(--vuno-text-on-color)";
+            };
+            readonly default: {};
+        };
+        readonly size: {
+            readonly xs: {
+                readonly item: "h-6";
+            };
+            readonly sm: {
+                readonly item: "h-8";
+            };
+            readonly md: {
+                readonly item: "h-10";
+            };
+            readonly lg: {
+                readonly item: "h-12";
+            };
+        };
+        readonly withIcons: {
+            readonly false: {};
+            readonly true: {
+                readonly content: "min-w-48";
+            };
+        };
+        readonly withSelection: {
+            readonly false: {};
+            readonly true: {};
+        };
     };
 }>;

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

@@ -1,20 +1,68 @@
-import { accentByColor } from "#vuno/theme/shared";
 import { defineTheme } from "#vuno/utils/theme";
 export const menuTheme = defineTheme("menu", {
-  /**
-   * El color del texto pasa por la variable de acento aunque por defecto sea
-   * el del cuerpo. Escrito como `text-vuno-body`, la variante de color
-   * asignaba `--vuno-accent` y **nadie la consumía**: una acción destructiva
-   * se veía igual que las demás, sin que nada fallara.
-   */
+  compoundVariants: [
+    /* Las columnas de la rejilla: selección, icono, etiqueta y atajo o caret. */
+    { class: { item: "grid-cols-[1fr_max-content]" }, withIcons: "false", withSelection: "false" },
+    { class: { item: "grid-cols-[1rem_1fr_max-content]" }, withIcons: "true", withSelection: "false" },
+    { class: { item: "grid-cols-[1rem_1fr_max-content]" }, withIcons: "false", withSelection: "true" },
+    { class: { item: "grid-cols-[1rem_1rem_1fr_max-content]" }, withIcons: "true", withSelection: "true" },
+    /* Vuno apaga el estado de una opción inhabilitada, también la de peligro. */
+    { class: { item: "hover:bg-transparent hover:text-(--vuno-text-disabled) focus:bg-transparent focus:text-(--vuno-text-disabled) focus:shadow-none" }, disabled: "true", kind: "danger" }
+  ],
   slots: {
-    content: "z-50 min-w-40 rounded-sm border border-vuno-border bg-vuno-surface-1 p-1 shadow-lg",
-    /* El tamaño del icono es del tema, como en las pestañas y el botón. */
-    icon: "size-4 shrink-0",
-    item: "flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm text-(--vuno-accent) outline-none [--vuno-accent:var(--color-vuno-body)] data-disabled:cursor-not-allowed data-disabled:opacity-50 data-highlighted:bg-(--vuno-accent)/10",
-    separator: "-mx-1 my-1 h-px bg-vuno-border"
+    /*
+     * `top` y `left` los escribe `useAnchor` en el estilo inline; aquí solo
+     * va lo que no depende de la posición.
+     */
+    content: "z-modal max-w-72 min-w-40 py-1 shadow-[0_2px_6px_var(--vuno-shadow)] outline-none focus-visible:outline-solid focus-visible:outline-1 focus-visible:outline-(--vuno-focus)",
+    /** El texto oculto que describe una acción destructiva a un lector de pantalla. */
+    description: "sr-only",
+    /** La celda del icono. Existe aunque esté vacía: es una columna de la rejilla. */
+    icon: "flex size-4 shrink-0 items-center justify-center",
+    item: "grid cursor-pointer items-center gap-x-2 px-4 text-sm leading-[1.125rem] tracking-[0.16px] text-(--vuno-text-secondary) outline-none transition-colors duration-(--vuno-duration-fast-01) ease-(--vuno-easing-standard-productive) hover:bg-(--vuno-layer-hover-01) hover:text-(--vuno-text-primary) focus:outline-solid focus:outline-2 focus:-outline-offset-2 focus:outline-(--vuno-focus) data-highlighted:bg-(--vuno-layer-hover-01) data-highlighted:text-(--vuno-text-primary) motion-reduce:transition-none",
+    /**
+     * La etiqueta se recorta con puntos suspensivos; el atributo `title` la
+     * completa. `min-w-0` es lo que deja que se recorte: una pista `1fr` de
+     * rejilla mide como mínimo su contenido, así que sin esto el texto largo
+     * no encoge y desborda el ancho máximo del panel en vez de cortarse.
+     */
+    label: "min-w-0 overflow-hidden text-ellipsis whitespace-nowrap",
+    separator: "my-1 block h-px w-full bg-(--vuno-border-subtle-00)",
+    /**
+     * La celda final: el atajo de teclado o el caret del submenú. **No
+     * declara color**: el sistema de origen solo le da `display: flex`, así
+     * que hereda el de la opción y se aclara con ella al apuntarla. Fijarlo
+     * aquí dejaba la opción apuntada a dos tonos.
+     */
+    shortcut: "flex items-center justify-end rtl:[&_svg]:-scale-x-100"
   },
   variants: {
-    color: accentByColor("item")
+    backgroundToken: {
+      background: { content: "bg-(--vuno-background)" },
+      layer: { content: "bg-(--vuno-layer-01)" }
+    },
+    border: {
+      false: {},
+      true: { content: "outline-solid outline-1 outline-(--vuno-border-subtle-00)" }
+    },
+    disabled: {
+      false: {},
+      true: { item: "cursor-not-allowed text-(--vuno-text-disabled) hover:bg-transparent hover:text-(--vuno-text-disabled)" }
+    },
+    kind: {
+      danger: { item: "hover:bg-(--vuno-button-danger-primary) hover:text-(--vuno-text-on-color) focus:bg-(--vuno-button-danger-primary) focus:text-(--vuno-text-on-color) focus:shadow-[inset_0_0_0_3px_var(--vuno-background)] data-highlighted:bg-(--vuno-button-danger-primary) data-highlighted:text-(--vuno-text-on-color)" },
+      default: {}
+    },
+    size: {
+      xs: { item: "h-6" },
+      sm: { item: "h-8" },
+      md: { item: "h-10" },
+      lg: { item: "h-12" }
+    },
+    withIcons: {
+      false: {},
+      true: { content: "min-w-48" }
+    },
+    withSelection: { false: {}, true: {} }
   }
 });

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

@@ -1,7 +1,16 @@
-import type { VunoPlacement, VunoPortalTarget } from '#vuno/types/base';
-import type { VunoMenuItem } from '#vuno/types/menu';
-export type VunoMenuProps = {
-    items: VunoMenuItem[];
-    placement?: VunoPlacement;
-    portal?: VunoPortalTarget;
+import type { Placement, PortalTarget } from '#vuno/types/base';
+import type { ComponentUi } from '#vuno/types/slots';
+/** Token de fondo del panel. Vuno: `layer` por defecto, `background` sobre una capa propia. */
+export type MenuBackgroundToken = 'background' | 'layer';
+/** Altura de fila de Vuno: 24, 32, 40 y 48 px. */
+export type MenuSize = 'lg' | 'md' | 'sm' | 'xs';
+export type MenuProps = {
+    ariaLabel?: string;
+    backgroundToken?: MenuBackgroundToken;
+    /** Contorno del panel. Vuno lo dibuja siempre desde la v12. */
+    border?: boolean;
+    placement?: Placement;
+    portal?: PortalTarget;
+    size?: MenuSize;
+    ui?: ComponentUi<'menu'>;
 };

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

@@ -1,19 +1,25 @@
 <script setup>
-import { cloneVNode, nextTick, onBeforeUnmount, ref, useId } from "vue";
-import { useVunoPortal } from "#vuno/composables/internal/useVunoPortal";
+import { cloneVNode, nextTick, onBeforeUnmount, ref, useId, watch } from "vue";
+import { usePortal } from "#vuno/composables/internal/usePortal";
 import { firstElement } from "#vuno/utils/slots";
 import MenuLevel from "./internal/MenuLevel/MenuLevel.vue";
-defineOptions({ name: "VunoMenu" });
+defineOptions({ name: "Menu" });
+const open = defineModel("open", { type: Boolean, ...{ default: false } });
 const props = defineProps({
-  items: { type: Array, required: true },
+  ariaLabel: { type: String, required: false, default: void 0 },
+  backgroundToken: { type: String, required: false, default: "layer" },
+  border: { type: Boolean, required: false, default: true },
   placement: { type: String, required: false, default: "bottom-end" },
-  portal: { type: [String, Boolean], required: false, default: void 0 }
+  portal: { type: [String, Boolean], required: false, default: void 0 },
+  size: { type: String, required: false, default: "sm" },
+  ui: { type: Object, required: false, default: void 0 }
 });
+const emit = defineEmits(["close", "open"]);
 const slots = defineSlots();
-const portalTarget = useVunoPortal(() => props.portal);
+const portalTarget = usePortal(() => props.portal);
 const initialFocus = ref("panel");
 const menuId = useId();
-const open = ref(false);
+const triggerId = useId();
 const triggerEl = ref(null);
 async function show(focus) {
   initialFocus.value = focus;
@@ -25,11 +31,6 @@ function hide(returnFocus = true) {
   open.value = false;
   if (returnFocus) triggerEl.value?.focus();
 }
-function choose(item) {
-  if (item.disabled) return;
-  item.onSelect();
-  hide();
-}
 function onTriggerKeydown(event) {
   if (event.key === "ArrowDown" || event.key === "Enter" || event.key === " ") {
     event.preventDefault();
@@ -51,9 +52,10 @@ if (typeof document !== "undefined") {
   onBeforeUnmount(() => document.removeEventListener("pointerdown", onPointerDown, true));
 }
 const Trigger = () => {
-  const node = firstElement(slots.default?.({ open: open.value }));
+  const node = firstElement(slots.trigger?.({ open: open.value }));
   if (!node) return null;
   return cloneVNode(node, {
+    id: triggerId,
     onClick: (event) => {
       event.stopPropagation();
       if (open.value) hide();
@@ -68,6 +70,10 @@ const Trigger = () => {
     }
   });
 };
+watch(open, (value) => {
+  if (value) emit("open");
+  else emit("close");
+});
 </script>
 
 <template>
@@ -78,13 +84,19 @@ const Trigger = () => {
         :to="portalTarget"
     >
         <MenuLevel
+            :ariaLabel="props.ariaLabel"
+            :backgroundToken="props.backgroundToken"
+            :border="props.border"
             :initialFocus="initialFocus"
-            :items="props.items"
+            :labelledBy="props.ariaLabel ? void 0 : triggerId"
             :menuId="menuId"
             :placement="props.placement"
             :reference="() => triggerEl ?? void 0"
+            :size="props.size"
+            :ui="props.ui"
             @dismiss="hide"
-            @select="choose"
-        />
+        >
+            <slot />
+        </MenuLevel>
     </Teleport>
 </template>

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

@@ -1,13 +1,32 @@
-import type { VunoMenuProps } from './Menu.types.js';
+import type { MenuProps } from './Menu.types.js';
+type __VLS_Props = MenuProps;
 type __VLS_Slots = {
+    default?: () => unknown;
     /** El disparador. Recibe el estado abierto por si quiere pintarlo. */
-    default?: (props: {
+    trigger?: (props: {
         open: boolean;
     }) => unknown;
 };
-declare const __VLS_base: import("vue").DefineComponent<VunoMenuProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<VunoMenuProps> & Readonly<{}>, {
-    placement: import("../../types/base.js").VunoPlacement;
-    portal: import("../../types/base.js").VunoPortalTarget;
+type __VLS_ModelProps = {
+    'open'?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    open: () => any;
+    close: () => any;
+    "update:open": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onOpen?: (() => any) | undefined;
+    onClose?: (() => any) | undefined;
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+}>, {
+    size: import("./Menu.types.js").MenuSize;
+    placement: import("../../types/base.js").Placement;
+    backgroundToken: import("./Menu.types.js").MenuBackgroundToken;
+    border: boolean;
+    ui: import("../../types/slots.js").ComponentUi<"menu">;
+    ariaLabel: string;
+    portal: import("../../types/base.js").PortalTarget;
 }, {}, {}, {}, 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/Menu/internal/MenuLevel/MenuLevel.d.vue.ts

@@ -1,26 +1,56 @@
-import type { VunoPlacement } from '#vuno/types/base';
-import type { VunoMenuAction, VunoMenuItem } from '#vuno/types/menu';
-type InitialFocus = 'first' | 'last' | 'none' | 'panel';
+import type { Placement } from '#vuno/types/base';
+import type { ComponentUi } from '#vuno/types/slots';
+import type { MenuInitialFocus } from '#vuno/components/Menu/Menu.context';
+import type { MenuBackgroundToken, MenuSize } from '#vuno/components/Menu/Menu.types';
+/**
+ * Un nivel de la cascada: el panel `role="menu"` con su recorrido de teclado.
+ *
+ * Lo comparten el menú raíz y cada submenú, y por eso la apariencia entra por
+ * props y se vuelve a proveer: un submenú la hereda del nivel que lo abre, como
+ * en Vuno, y no la vuelve a decidir.
+ */
 type Props = {
+    ariaLabel?: string;
+    backgroundToken: MenuBackgroundToken;
+    border: boolean;
     depth?: number;
-    initialFocus?: InitialFocus;
-    items: VunoMenuItem[];
+    /**
+     * Separación contra el ancla. El menú raíz va pegado al disparador (0) y un
+     * submenú se solapa 6 px con el panel que lo abre, que es lo que alinea su
+     * primera opción con la opción padre.
+     */
+    distance?: number;
+    initialFocus?: MenuInitialFocus;
+    labelledBy?: string;
     menuId: string;
-    placement: VunoPlacement;
+    placement: Placement;
+    size: MenuSize;
+    ui?: ComponentUi<'menu'>;
     reference?: () => HTMLElement | undefined;
 };
-declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    select: (item: VunoMenuAction) => any;
-    dismiss: (returnFocus?: boolean | undefined) => any;
+type __VLS_Slots = {
+    default?: () => unknown;
+};
+declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     back: () => any;
+    dismiss: (returnFocus?: boolean | undefined) => any;
 }, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
-    onSelect?: ((item: VunoMenuAction) => any) | undefined;
-    onDismiss?: ((returnFocus?: boolean | undefined) => any) | undefined;
     onBack?: (() => any) | undefined;
+    onDismiss?: ((returnFocus?: boolean | undefined) => any) | undefined;
 }>, {
+    ui: ComponentUi<"menu">;
+    ariaLabel: string;
     reference: () => HTMLElement | undefined;
+    distance: number;
     depth: number;
-    initialFocus: InitialFocus;
+    initialFocus: MenuInitialFocus;
+    labelledBy: string;
 }, {}, {}, {}, 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;
+    };
+};