@groupteknology/vuno 2.0.0 → 3.0.0

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

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

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

@@ -1,15 +1,4 @@
-import type { VunoRadius } from '#vuno/types/base';
-import type { VunoFormSection } from '#vuno/types/form';
-type Props = {
-    /**
-     * Sin marco ni título: es lo que se usa dentro de una pestaña, donde
-     * el rótulo ya lo pone la propia pestaña.
-     */
-    plain?: boolean;
-    /** La curvatura. Sin valor, la que traiga el tema. */
-    radius?: VunoRadius;
-    section: VunoFormSection;
-};
-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>;
+import type { VunoFormSectionProps } from './FormSection.types.js';
+declare const __VLS_export: import("vue").DefineComponent<VunoFormSectionProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<VunoFormSectionProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -0,0 +1,7 @@
+import type { VunoRadius } from '#vuno/types/base';
+import type { VunoFormSection } from '#vuno/types/form';
+export type VunoFormSectionProps = {
+    plain?: boolean;
+    radius?: VunoRadius;
+    section: VunoFormSection;
+};

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

@@ -3,6 +3,7 @@ import { computed } from "vue";
 import { useTheme } from "#vuno/composables/useTheme";
 import FormFieldRenderer from "#vuno/components/Form/internal/FormFieldRenderer/FormFieldRenderer.vue";
 import { getColumnSpanClass } from "#vuno/components/Form/internal/grid";
+import Text from "#vuno/components/Text/Text.vue";
 defineOptions({ name: "VunoFormSection" });
 const props = defineProps({
   plain: { type: Boolean, required: false },
@@ -20,18 +21,24 @@ const showHeader = computed(() => props.plain ? Boolean(props.section.descriptio
             v-if="showHeader"
             :class="ui.header"
         >
-            <p
+            <Text
                 v-if="props.section.title && !props.plain"
                 :class="ui.title"
+                tag="p"
+                tone="inherit"
+                variant="inherit"
             >
                 {{ props.section.title }}
-            </p>
-            <p
+            </Text>
+            <Text
                 v-if="props.section.description"
                 :class="ui.description"
+                tag="p"
+                tone="inherit"
+                variant="inherit"
             >
                 {{ props.section.description }}
-            </p>
+            </Text>
         </div>
 
         <div

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

@@ -1,15 +1,4 @@
-import type { VunoRadius } from '#vuno/types/base';
-import type { VunoFormSection } from '#vuno/types/form';
-type Props = {
-    /**
-     * Sin marco ni título: es lo que se usa dentro de una pestaña, donde
-     * el rótulo ya lo pone la propia pestaña.
-     */
-    plain?: boolean;
-    /** La curvatura. Sin valor, la que traiga el tema. */
-    radius?: VunoRadius;
-    section: VunoFormSection;
-};
-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>;
+import type { VunoFormSectionProps } from './FormSection.types.js';
+declare const __VLS_export: import("vue").DefineComponent<VunoFormSectionProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<VunoFormSectionProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -1,6 +1,4 @@
-type Props = {
-    name: string;
-};
-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>;
+import type { VunoIconProps } from './Icon.types.js';
+declare const __VLS_export: import("vue").DefineComponent<VunoIconProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<VunoIconProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -0,0 +1,3 @@
+export type VunoIconProps = {
+    name: string;
+};

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

@@ -1,6 +1,4 @@
-type Props = {
-    name: string;
-};
-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>;
+import type { VunoIconProps } from './Icon.types.js';
+declare const __VLS_export: import("vue").DefineComponent<VunoIconProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<VunoIconProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -1,30 +1,13 @@
-import type { VunoColor, VunoPlacement, VunoPortalTarget } from '#vuno/types/base';
-/** Una entrada del menú. Es la forma que ya tienen las acciones de fila. */
-type VunoMenuItem = {
-    onSelect: () => void;
-    color?: VunoColor;
-    disabled?: boolean;
-    icon?: string;
-    label: string;
-    /** Dibuja una línea encima, para separar lo destructivo del resto. */
-    separator?: boolean;
-};
-type Props = {
-    items: VunoMenuItem[];
-    /** Ubicación preferida; cambia automáticamente si no cabe. */
-    placement?: VunoPlacement;
-    /** Dónde montar el menú. Por defecto, lo que provea el modal que envuelva. */
-    portal?: VunoPortalTarget;
-};
+import type { VunoMenuProps } from './Menu.types.js';
 type __VLS_Slots = {
     /** El disparador. Recibe el estado abierto por si quiere pintarlo. */
     default?: (props: {
         open: boolean;
     }) => unknown;
 };
-declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
-    placement: VunoPlacement;
-    portal: VunoPortalTarget;
+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;
 }, {}, {}, {}, 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.types.d.ts

@@ -0,0 +1,7 @@
+import type { VunoPlacement, VunoPortalTarget } from '#vuno/types/base';
+import type { VunoMenuItem } from '#vuno/types/menu';
+export type VunoMenuProps = {
+    items: VunoMenuItem[];
+    placement?: VunoPlacement;
+    portal?: VunoPortalTarget;
+};

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

@@ -1,10 +1,8 @@
 <script setup>
-import { cloneVNode, computed, nextTick, onBeforeUnmount, ref, useId } from "vue";
-import { useVunoAnchor } from "#vuno/composables/internal/useVunoAnchor";
+import { cloneVNode, nextTick, onBeforeUnmount, ref, useId } from "vue";
 import { useVunoPortal } from "#vuno/composables/internal/useVunoPortal";
-import { useTheme } from "#vuno/composables/useTheme";
-import { firstElement } from "#vuno/internal/slots";
-import Icon from "#vuno/components/Icon/Icon.vue";
+import { firstElement } from "#vuno/utils/slots";
+import MenuLevel from "./internal/MenuLevel/MenuLevel.vue";
 defineOptions({ name: "VunoMenu" });
 const props = defineProps({
   items: { type: Array, required: true },
@@ -13,43 +11,18 @@ const props = defineProps({
 });
 const slots = defineSlots();
 const portalTarget = useVunoPortal(() => props.portal);
-const ui = useTheme("menu");
-const colors = ["error", "info", "neutral", "primary", "secondary", "success", "warning"];
-const themeByColor = colors.map((color) => [color, useTheme("menu", void 0, () => ({ color }))]);
-const itemByColor = computed(() => Object.fromEntries(themeByColor.map(([color, theme]) => [color, theme.value.item])));
+const initialFocus = ref("panel");
 const menuId = useId();
-const active = ref(-1);
-const contentEl = ref(null);
-const itemEls = ref([]);
 const open = ref(false);
 const triggerEl = ref(null);
-const enabled = computed(
-  () => props.items.map((item, index) => ({ index, usable: !item.disabled })).filter((entry) => entry.usable).map((entry) => entry.index)
-);
-const captureItem = (index, el) => {
-  itemEls.value[index] = el ?? null;
-};
-const { anchor, release } = useVunoAnchor({ placement: () => props.placement });
-const follow = () => anchor(triggerEl.value ?? void 0, contentEl.value ?? void 0);
-const unfollow = () => release();
-async function focusItem(index) {
-  active.value = index;
-  await nextTick();
-  itemEls.value[index]?.focus();
-}
-async function show(from) {
+async function show(focus) {
+  initialFocus.value = focus;
   open.value = true;
   await nextTick();
-  follow();
-  if (from === "none") return contentEl.value?.focus();
-  const order = from === "first" ? enabled.value : [...enabled.value].reverse();
-  if (order.length > 0) await focusItem(order[0]);
 }
 function hide(returnFocus = true) {
   if (!open.value) return;
   open.value = false;
-  active.value = -1;
-  unfollow();
   if (returnFocus) triggerEl.value?.focus();
 }
 function choose(item) {
@@ -57,14 +30,6 @@ function choose(item) {
   item.onSelect();
   hide();
 }
-function step(delta) {
-  const order = enabled.value;
-  if (order.length === 0) return;
-  const current = order.indexOf(active.value);
-  const entry = delta > 0 ? 0 : order.length - 1;
-  const next = current === -1 ? entry : (current + delta + order.length) % order.length;
-  void focusItem(order[next]);
-}
 function onTriggerKeydown(event) {
   if (event.key === "ArrowDown" || event.key === "Enter" || event.key === " ") {
     event.preventDefault();
@@ -75,24 +40,10 @@ function onTriggerKeydown(event) {
     return void show("last");
   }
 }
-function onContentKeydown(event) {
-  const keys = {
-    ArrowDown: () => step(1),
-    ArrowUp: () => step(-1),
-    End: () => void focusItem(enabled.value.at(-1) ?? -1),
-    Escape: () => hide(),
-    Home: () => void focusItem(enabled.value[0] ?? -1),
-    /* Tabular fuera cierra: dejarlo abierto deja un menú huérfano. */
-    Tab: () => hide(false)
-  };
-  const run = keys[event.key];
-  if (!run) return;
-  if (event.key !== "Tab") event.preventDefault();
-  run();
-}
 function onPointerDown(event) {
   const target = event.target;
-  if (!target || contentEl.value?.contains(target) || triggerEl.value?.contains(target)) return;
+  const content = typeof document === "undefined" ? null : document.getElementById(menuId);
+  if (!target || content?.contains(target) || triggerEl.value?.contains(target)) return;
   hide(false);
 }
 if (typeof document !== "undefined") {
@@ -103,15 +54,10 @@ const Trigger = () => {
   const node = firstElement(slots.default?.({ open: open.value }));
   if (!node) return null;
   return cloneVNode(node, {
-    /*
-     * El `stop` es de la tabla pero se queda aquí: sin él, abrir el
-     * menú dispara también el clic de la fila y se acaban abriendo dos
-     * cosas a la vez.
-     */
     onClick: (event) => {
       event.stopPropagation();
       if (open.value) hide();
-      else void show("none");
+      else void show("panel");
     },
     onKeydown: onTriggerKeydown,
     "aria-controls": open.value ? menuId : void 0,
@@ -122,7 +68,6 @@ const Trigger = () => {
     }
   });
 };
-onBeforeUnmount(unfollow);
 </script>
 
 <template>
@@ -132,51 +77,14 @@ onBeforeUnmount(unfollow);
         v-if="open"
         :to="portalTarget"
     >
-        <div
-            :id="menuId"
-            ref="contentEl"
-            :class="ui.content"
-            role="menu"
-            style="position: fixed; top: 0; left: 0"
-            tabindex="-1"
-            @keydown="onContentKeydown"
-        >
-            <template
-                v-for="(item, index) in props.items"
-                :key="`${item.label}-${index}`"
-            >
-                <!--
-                    `<hr>` y no un `<div role="separator">`: el elemento ya
-                    significa eso, así que la línea existe aunque el CSS no
-                    cargue y no depende de que el papel esté bien escrito.
-                -->
-                <hr
-                    v-if="item.separator && index > 0"
-                    :class="ui.separator"
-                />
-
-                <div
-                    :ref="(el) => captureItem(index, el)"
-                    :aria-disabled="item.disabled ? 'true' : void 0"
-                    :class="item.color ? itemByColor[item.color] : ui.item"
-                    :data-disabled="item.disabled ? '' : void 0"
-                    :data-highlighted="active === index ? '' : void 0"
-                    role="menuitem"
-                    :tabindex="active === index ? 0 : -1"
-                    @click="choose(item)"
-                    @keydown.enter.prevent="choose(item)"
-                    @keydown.space.prevent="choose(item)"
-                    @pointermove="!item.disabled && (active = index)"
-                >
-                    <Icon
-                        v-if="item.icon"
-                        :class="ui.icon"
-                        :name="item.icon"
-                    />
-
-                    <span class="truncate">{{ item.label }}</span>
-                </div>
-            </template>
-        </div>
+        <MenuLevel
+            :initialFocus="initialFocus"
+            :items="props.items"
+            :menuId="menuId"
+            :placement="props.placement"
+            :reference="() => triggerEl ?? void 0"
+            @dismiss="hide"
+            @select="choose"
+        />
     </Teleport>
 </template>

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

@@ -1,30 +1,13 @@
-import type { VunoColor, VunoPlacement, VunoPortalTarget } from '#vuno/types/base';
-/** Una entrada del menú. Es la forma que ya tienen las acciones de fila. */
-type VunoMenuItem = {
-    onSelect: () => void;
-    color?: VunoColor;
-    disabled?: boolean;
-    icon?: string;
-    label: string;
-    /** Dibuja una línea encima, para separar lo destructivo del resto. */
-    separator?: boolean;
-};
-type Props = {
-    items: VunoMenuItem[];
-    /** Ubicación preferida; cambia automáticamente si no cabe. */
-    placement?: VunoPlacement;
-    /** Dónde montar el menú. Por defecto, lo que provea el modal que envuelva. */
-    portal?: VunoPortalTarget;
-};
+import type { VunoMenuProps } from './Menu.types.js';
 type __VLS_Slots = {
     /** El disparador. Recibe el estado abierto por si quiere pintarlo. */
     default?: (props: {
         open: boolean;
     }) => unknown;
 };
-declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
-    placement: VunoPlacement;
-    portal: VunoPortalTarget;
+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;
 }, {}, {}, {}, 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

@@ -0,0 +1,26 @@
+import type { VunoPlacement } from '#vuno/types/base';
+import type { VunoMenuAction, VunoMenuItem } from '#vuno/types/menu';
+type InitialFocus = 'first' | 'last' | 'none' | 'panel';
+type Props = {
+    depth?: number;
+    initialFocus?: InitialFocus;
+    items: VunoMenuItem[];
+    menuId: string;
+    placement: VunoPlacement;
+    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;
+    back: () => any;
+}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
+    onSelect?: ((item: VunoMenuAction) => any) | undefined;
+    onDismiss?: ((returnFocus?: boolean | undefined) => any) | undefined;
+    onBack?: (() => any) | undefined;
+}>, {
+    reference: () => HTMLElement | undefined;
+    depth: number;
+    initialFocus: InitialFocus;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,167 @@
+<script setup>
+import { computed, nextTick, onMounted, ref, useId } from "vue";
+import { useVunoAnchor } from "#vuno/composables/internal/useVunoAnchor";
+import { useTheme } from "#vuno/composables/useTheme";
+import Icon from "#vuno/components/Icon/Icon.vue";
+const props = defineProps({
+  depth: { type: Number, required: false, default: 0 },
+  initialFocus: { type: String, required: false, default: "none" },
+  items: { type: Array, required: true },
+  menuId: { type: String, required: true },
+  placement: { type: String, required: true },
+  reference: { type: Function, required: false, default: void 0 }
+});
+const emit = defineEmits(["back", "dismiss", "select"]);
+const active = ref(-1);
+const childFocus = ref("none");
+const childMenuId = useId();
+const contentEl = ref(null);
+const itemEls = ref([]);
+const openChild = ref(-1);
+const ui = useTheme("menu");
+const colors = ["error", "info", "neutral", "primary", "secondary", "success", "warning"];
+const themeByColor = colors.map((color) => [color, useTheme("menu", void 0, () => ({ color }))]);
+const itemByColor = computed(() => Object.fromEntries(themeByColor.map(([color, theme]) => [color, theme.value.item])));
+const enabled = computed(
+  () => props.items.map((item, index) => ({ index, usable: !item.disabled })).filter((entry) => entry.usable).map((entry) => entry.index)
+);
+const isSubmenu = (item) => Array.isArray(item.children);
+const submenuId = (index) => `${childMenuId}-${index}`;
+const captureItem = (index, el) => {
+  itemEls.value[index] = el ?? null;
+};
+const { anchor } = useVunoAnchor({ placement: () => props.placement });
+async function focusItem(index) {
+  openChild.value = -1;
+  active.value = index;
+  await nextTick();
+  itemEls.value[index]?.focus();
+}
+function step(delta) {
+  const order = enabled.value;
+  if (order.length === 0) return;
+  const current = order.indexOf(active.value);
+  const entry = delta > 0 ? 0 : order.length - 1;
+  const next = current === -1 ? entry : (current + delta + order.length) % order.length;
+  void focusItem(order[next]);
+}
+function openSubmenu(index, focus) {
+  const item = props.items[index];
+  if (!item || item.disabled || !isSubmenu(item) || item.children.length === 0) return;
+  active.value = index;
+  childFocus.value = focus;
+  openChild.value = index;
+}
+async function closeSubmenu(returnFocus = false) {
+  const index = openChild.value;
+  openChild.value = -1;
+  if (!returnFocus || index < 0) return;
+  await nextTick();
+  itemEls.value[index]?.focus();
+}
+function activate(item, index) {
+  if (item.disabled) return;
+  if (isSubmenu(item)) return openSubmenu(index, "first");
+  emit("select", item);
+}
+function highlight(item, index) {
+  if (item.disabled) return;
+  active.value = index;
+  if (isSubmenu(item)) openSubmenu(index, "none");
+  else openChild.value = -1;
+}
+function onContentKeydown(event) {
+  const keys = {
+    ArrowDown: () => step(1),
+    ArrowLeft: () => props.depth > 0 && emit("back"),
+    ArrowRight: () => openSubmenu(active.value, "first"),
+    ArrowUp: () => step(-1),
+    End: () => void focusItem(enabled.value.at(-1) ?? -1),
+    Escape: () => props.depth > 0 ? emit("back") : emit("dismiss"),
+    Home: () => void focusItem(enabled.value[0] ?? -1),
+    Tab: () => emit("dismiss", false)
+  };
+  const run = keys[event.key];
+  if (!run) return;
+  event.stopPropagation();
+  if (event.key !== "Tab") event.preventDefault();
+  run();
+}
+onMounted(async () => {
+  anchor(props.reference?.(), contentEl.value ?? void 0);
+  if (props.initialFocus === "panel") return contentEl.value?.focus();
+  if (props.initialFocus === "none") return;
+  const order = props.initialFocus === "first" ? enabled.value : [...enabled.value].reverse();
+  if (order.length > 0) await focusItem(order[0]);
+});
+</script>
+
+<template>
+    <div
+        :id="props.menuId"
+        ref="contentEl"
+        :class="ui.content"
+        role="menu"
+        style="position: fixed; top: 0; left: 0"
+        tabindex="-1"
+        @keydown="onContentKeydown"
+    >
+        <template
+            v-for="(item, index) in props.items"
+            :key="`${item.label}-${index}`"
+        >
+            <hr
+                v-if="item.separator && index > 0"
+                :class="ui.separator"
+            />
+
+            <div role="presentation">
+                <div
+                    :ref="(el) => captureItem(index, el)"
+                    :aria-controls="isSubmenu(item) && openChild === index ? submenuId(index) : void 0"
+                    :aria-disabled="item.disabled ? 'true' : void 0"
+                    :aria-expanded="isSubmenu(item) ? openChild === index ? 'true' : 'false' : void 0"
+                    :aria-haspopup="isSubmenu(item) ? 'menu' : void 0"
+                    :class="item.color ? itemByColor[item.color] : ui.item"
+                    :data-disabled="item.disabled ? '' : void 0"
+                    :data-highlighted="active === index ? '' : void 0"
+                    role="menuitem"
+                    :tabindex="active === index ? 0 : -1"
+                    @click="activate(item, index)"
+                    @focus="active = index"
+                    @keydown.enter.prevent.stop="activate(item, index)"
+                    @keydown.space.prevent.stop="activate(item, index)"
+                    @pointermove="highlight(item, index)"
+                >
+                    <Icon
+                        v-if="item.icon"
+                        :class="ui.icon"
+                        :name="item.icon"
+                    />
+
+                    <span class="truncate">{{ item.label }}</span>
+
+                    <Icon
+                        v-if="isSubmenu(item)"
+                        aria-hidden="true"
+                        :class="[ui.icon, 'ml-auto']"
+                        name="lucide:chevron-right"
+                    />
+                </div>
+
+                <MenuLevel
+                    v-if="isSubmenu(item) && item.children.length > 0 && openChild === index"
+                    :depth="props.depth + 1"
+                    :initialFocus="childFocus"
+                    :items="item.children"
+                    :menuId="submenuId(index)"
+                    placement="right-start"
+                    :reference="() => itemEls[index] ?? void 0"
+                    @back="closeSubmenu(true)"
+                    @dismiss="emit('dismiss', $event)"
+                    @select="emit('select', $event)"
+                />
+            </div>
+        </template>
+    </div>
+</template>

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

@@ -0,0 +1,26 @@
+import type { VunoPlacement } from '#vuno/types/base';
+import type { VunoMenuAction, VunoMenuItem } from '#vuno/types/menu';
+type InitialFocus = 'first' | 'last' | 'none' | 'panel';
+type Props = {
+    depth?: number;
+    initialFocus?: InitialFocus;
+    items: VunoMenuItem[];
+    menuId: string;
+    placement: VunoPlacement;
+    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;
+    back: () => any;
+}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
+    onSelect?: ((item: VunoMenuAction) => any) | undefined;
+    onDismiss?: ((returnFocus?: boolean | undefined) => any) | undefined;
+    onBack?: (() => any) | undefined;
+}>, {
+    reference: () => HTMLElement | undefined;
+    depth: number;
+    initialFocus: InitialFocus;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;