@groupteknology/vuno 3.0.0 → 4.0.0

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

@@ -1,167 +1,133 @@
 <script setup>
-import { computed, nextTick, onMounted, ref, useId } from "vue";
-import { useVunoAnchor } from "#vuno/composables/internal/useVunoAnchor";
+import { offset } from "@floating-ui/dom";
+import { computed, nextTick, onMounted, provide, ref } from "vue";
+import { useAnchor } from "#vuno/composables/internal/useAnchor";
 import { useTheme } from "#vuno/composables/useTheme";
-import Icon from "#vuno/components/Icon/Icon.vue";
+import { menuLevelKey } from "#vuno/components/Menu/Menu.context";
 const props = defineProps({
+  ariaLabel: { type: String, required: false, default: void 0 },
+  backgroundToken: { type: String, required: true },
+  border: { type: Boolean, required: true },
   depth: { type: Number, required: false, default: 0 },
+  distance: { type: Number, required: false, default: 0 },
   initialFocus: { type: String, required: false, default: "none" },
-  items: { type: Array, required: true },
+  labelledBy: { type: String, required: false, default: void 0 },
   menuId: { type: String, required: true },
   placement: { type: String, required: true },
+  size: { type: String, required: true },
+  ui: { type: Object, required: false, default: void 0 },
   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 emit = defineEmits(["back", "dismiss"]);
+defineSlots();
 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 iconCount = ref(0);
+const items = ref([]);
+const selectionCount = ref(0);
+const hasIcons = computed(() => iconCount.value > 0);
+const hasSelection = computed(() => selectionCount.value > 0);
+const appearance = computed(() => ({ backgroundToken: props.backgroundToken, border: props.border, size: props.size }));
+const ui = useTheme(
+  "menu",
+  () => props.ui,
+  () => ({
+    backgroundToken: props.backgroundToken,
+    border: String(props.border),
+    withIcons: String(hasIcons.value),
+    withSelection: String(hasSelection.value)
+  })
 );
-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;
+const { anchor } = useAnchor({
+  distance: () => props.distance,
+  middleware: () => props.depth > 0 ? [offset({ crossAxis: -6 })] : [],
+  placement: () => props.placement
+});
+const enabled = () => items.value.filter((item) => !item.disabled());
+async function focus(item) {
+  if (!item) return;
+  items.value.forEach((candidate) => candidate !== item && candidate.closeSubmenu());
   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;
+  item.element()?.focus();
 }
-async function closeSubmenu(returnFocus = false) {
-  const index = openChild.value;
-  openChild.value = -1;
-  if (!returnFocus || index < 0) return;
-  await nextTick();
-  itemEls.value[index]?.focus();
+function register(item) {
+  items.value.push(item);
+  return () => {
+    items.value = items.value.filter((candidate) => candidate !== item);
+  };
 }
-function activate(item, index) {
-  if (item.disabled) return;
-  if (isSubmenu(item)) return openSubmenu(index, "first");
-  emit("select", item);
+function declare(traits) {
+  if (traits.icon) iconCount.value += 1;
+  if (traits.selection) selectionCount.value += 1;
+  return () => {
+    if (traits.icon) iconCount.value -= 1;
+    if (traits.selection) selectionCount.value -= 1;
+  };
 }
-function highlight(item, index) {
-  if (item.disabled) return;
-  active.value = index;
-  if (isSubmenu(item)) openSubmenu(index, "none");
-  else openChild.value = -1;
+function highlight(item) {
+  if (item.disabled()) return;
+  items.value.forEach((candidate) => candidate !== item && candidate.closeSubmenu());
+  item.element()?.focus();
+  if (item.hasSubmenu()) item.openSubmenu("none");
 }
-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();
+provide(menuLevelKey, {
+  appearance,
+  declare,
+  depth: props.depth,
+  hasIcons,
+  hasSelection,
+  highlight,
+  register,
+  activate: (item, event) => item.activate(event),
+  dismiss: (returnFocus = true) => emit("dismiss", returnFocus)
+});
+function onKeydown(event) {
+  const available = enabled();
+  const current = available.findIndex((item2) => item2.element() === document.activeElement);
+  const item = available[current];
+  const target = event.key === "Home" ? available[0] : event.key === "End" ? available.at(-1) : event.key === "ArrowDown" ? available[(current + 1 + available.length) % available.length] : event.key === "ArrowUp" ? available[(current - 1 + available.length) % available.length] : void 0;
+  if (target) {
+    event.preventDefault();
+    event.stopPropagation();
+    void focus(target);
+    return;
+  }
+  if (event.key === "ArrowRight" && item?.hasSubmenu()) {
+    event.preventDefault();
+    event.stopPropagation();
+    item.openSubmenu("first");
+  } else if (event.key === "ArrowLeft" && props.depth > 0) {
+    event.preventDefault();
+    event.stopPropagation();
+    emit("back");
+  } else if (event.key === "Escape") {
+    event.preventDefault();
+    event.stopPropagation();
+    if (props.depth > 0) emit("back");
+    else emit("dismiss");
+  } else if (event.key === "Tab") {
+    emit("dismiss", false);
+  }
 }
 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]);
+  if (props.initialFocus === "first") await focus(enabled()[0]);
+  if (props.initialFocus === "last") await focus(enabled().at(-1));
 });
 </script>
 
 <template>
-    <div
+    <ul
         :id="props.menuId"
         ref="contentEl"
+        :aria-label="props.ariaLabel"
+        :aria-labelledby="props.labelledBy"
         :class="ui.content"
         role="menu"
         style="position: fixed; top: 0; left: 0"
         tabindex="-1"
-        @keydown="onContentKeydown"
+        @keydown="onKeydown"
     >
-        <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>
+        <slot />
+    </ul>
 </template>

package/dist/runtime/app/components/Menu/internal/MenuLevel/MenuLevel.vue.d.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;
+    };
+};

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

@@ -0,0 +1,33 @@
+import type { MenuButtonProps } from './MenuButton.types.js';
+type __VLS_Props = MenuButtonProps;
+type __VLS_Slots = {
+    default?: () => unknown;
+};
+type __VLS_ModelProps = {
+    /** El estado viaja fuera para que la página pueda abrirlo o cerrarlo. */
+    'open'?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:open": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+}>, {
+    disabled: boolean;
+    size: import("./MenuButton.types.js").MenuButtonSize;
+    kind: import("./MenuButton.types.js").MenuButtonKind;
+    ui: import("../../types/slots.js").ComponentUi<"menu">;
+    portal: import("../../types/base.js").PortalTarget;
+    menuAlignment: import("./MenuButton.types.js").MenuAlignment;
+    tabIndex: number;
+    menuBackgroundToken: import("../Menu/Menu.types.js").MenuBackgroundToken;
+    menuBorder: boolean;
+}, {}, {}, {}, 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/MenuButton/MenuButton.types.d.ts

@@ -0,0 +1,41 @@
+import type { Placement, PortalTarget } from '#vuno/types/base';
+import type { ComponentUi } from '#vuno/types/slots';
+import type { ButtonKind, ButtonSize } from '#vuno/components/Button/Button.types';
+import type { MenuBackgroundToken } from '#vuno/components/Menu/Menu.types';
+/**
+ * Las seis alineaciones que Vuno admite para el menú de un disparador.
+ *
+ * Es el `menuAlignment` de Vuno y lo comparten `MenuButton` y `ComboButton`;
+ * `OverflowMenu` usa solo las cuatro de esquina. Vive aquí por la misma razón
+ * que en el sistema de origen vive en `MenuButton`: es quien lo estrena.
+ *
+ * `bottom` y `top` son las **centradas**, y son las únicas en las que el menú
+ * copia el ancho del disparador.
+ */
+export type MenuAlignment = Extract<Placement, 'bottom' | 'bottom-end' | 'bottom-start' | 'top' | 'top-end' | 'top-start'>;
+/** Los tres `kind` de botón que Vuno deja usar como disparador de menú. */
+export type MenuButtonKind = Extract<ButtonKind, 'ghost' | 'primary' | 'tertiary'>;
+/** Los cuatro tamaños de la familia: 24, 32, 40 y 48 px de alto. */
+export type MenuButtonSize = Extract<ButtonSize, 'lg' | 'md' | 'sm' | 'xs'>;
+export type MenuButtonProps = {
+    disabled?: boolean;
+    kind?: MenuButtonKind;
+    label: string;
+    menuAlignment?: MenuAlignment;
+    /** Token de fondo del panel. Vuno: `layer` por defecto. */
+    menuBackgroundToken?: MenuBackgroundToken;
+    /** Contorno del panel. Vuno lo dibuja siempre desde la v12. */
+    menuBorder?: boolean;
+    portal?: PortalTarget;
+    /** El tamaño manda a la vez sobre el botón y sobre las filas del menú. */
+    size?: MenuButtonSize;
+    /**
+     * Posición del disparador en el recorrido del tabulador.
+     *
+     * Existe como prop y no como atributo suelto porque los atributos caen en
+     * el contenedor, y quien quiere sacar el control del recorrido lo quiere
+     * sacar del botón.
+     */
+    tabIndex?: number;
+    ui?: ComponentUi<'menu'>;
+};

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

@@ -0,0 +1,67 @@
+<script setup>
+import { computed, ref } from "vue";
+import Button from "#vuno/components/Button/Button.vue";
+import Menu from "#vuno/components/Menu/Menu.vue";
+import { useMenuWidth } from "./useMenuWidth";
+defineOptions({ name: "MenuButton" });
+const open = defineModel("open", { type: Boolean, ...{ default: false } });
+const props = defineProps({
+  disabled: { type: Boolean, required: false, default: false },
+  kind: { type: String, required: false, default: "primary" },
+  label: { type: String, required: true },
+  menuAlignment: { type: String, required: false, default: "bottom" },
+  menuBackgroundToken: { type: String, required: false, default: "layer" },
+  menuBorder: { type: Boolean, required: false, default: true },
+  portal: { type: [String, Boolean], required: false, default: void 0 },
+  size: { type: String, required: false, default: "lg" },
+  tabIndex: { type: Number, required: false, default: void 0 },
+  ui: { type: Object, required: false, default: void 0 }
+});
+defineSlots();
+const root = ref(null);
+const trigger = () => root.value?.querySelector('[aria-haspopup="menu"]') ?? null;
+useMenuWidth({
+  measure: trigger,
+  trigger,
+  enabled: () => props.menuAlignment === "bottom" || props.menuAlignment === "top",
+  open: () => open.value
+});
+const triggerUi = computed(() => ({
+  /* Vuno: `.vuno--menu-button__trigger:not(.vuno--btn--ghost) { min-inline-size: 12rem }`. */
+  base: props.kind === "ghost" ? void 0 : "min-w-48",
+  /* El caret gira media vuelta al abrir, con la duración y la curva de Vuno. */
+  icon: ["transition-transform duration-(--vuno-duration-fast-02) ease-(--vuno-easing-standard-productive) motion-reduce:transition-none", open.value ? "rotate-180" : ""]
+}));
+</script>
+
+<template>
+    <!-- `inline-flex` es el `.vuno--menu-button__container` de Vuno: el contenedor mide lo que el botón. -->
+    <div
+        ref="root"
+        class="inline-flex"
+    >
+        <Menu
+            v-model:open="open"
+            :backgroundToken="props.menuBackgroundToken"
+            :border="props.menuBorder"
+            :placement="props.menuAlignment"
+            :portal="props.portal"
+            :size="props.size"
+            :ui="props.ui"
+        >
+            <template #trigger>
+                <Button
+                    :disabled="props.disabled"
+                    icon="carbon:chevron-down"
+                    :kind="props.kind"
+                    :label="props.label"
+                    :size="props.size"
+                    :tabindex="props.tabIndex"
+                    :ui="triggerUi"
+                />
+            </template>
+
+            <slot />
+        </Menu>
+    </div>
+</template>

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

@@ -0,0 +1,33 @@
+import type { MenuButtonProps } from './MenuButton.types.js';
+type __VLS_Props = MenuButtonProps;
+type __VLS_Slots = {
+    default?: () => unknown;
+};
+type __VLS_ModelProps = {
+    /** El estado viaja fuera para que la página pueda abrirlo o cerrarlo. */
+    'open'?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:open": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+}>, {
+    disabled: boolean;
+    size: import("./MenuButton.types.js").MenuButtonSize;
+    kind: import("./MenuButton.types.js").MenuButtonKind;
+    ui: import("../../types/slots.js").ComponentUi<"menu">;
+    portal: import("../../types/base.js").PortalTarget;
+    menuAlignment: import("./MenuButton.types.js").MenuAlignment;
+    tabIndex: number;
+    menuBackgroundToken: import("../Menu/Menu.types.js").MenuBackgroundToken;
+    menuBorder: boolean;
+}, {}, {}, {}, 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/MenuButton/useMenuWidth.d.ts

@@ -0,0 +1,32 @@
+/**
+ * Iguala el ancho del menú al del disparador cuando la alineación es centrada.
+ *
+ * No es un adorno: la guía de Vuno lo pide con un «do» y un «dont» —«if the
+ * button labels become longer, the menu component should not appear narrower
+ * but should extend to match the width of the menu buttons»— y en React lo
+ * resuelve el middleware `size` de Floating UI, que escribe
+ * `elements.floating.style.width = rects.reference.width` **solo** cuando
+ * `menuAlignment` es `bottom` o `top`. Con las alineaciones `-start` y `-end` el
+ * menú conserva su ancho natural.
+ *
+ * El ancho se escribe en línea y no como clase porque es una medida, no una
+ * decisión de diseño: Tailwind necesita literales en el código fuente y aquí el
+ * valor sale de medir la página. El mínimo de 10rem y el máximo de 18rem del
+ * panel siguen mandando, que es justo lo que hace Vuno: `min-inline-size` y
+ * `max-inline-size` ganan a `inline-size` en CSS.
+ *
+ * El panel se localiza por `aria-controls`, que es contrato público del
+ * disparador y no interior de `Menu`: mientras está abierto, el botón publica
+ * ahí el identificador de su panel.
+ *
+ * @param options.enabled ¿Toca copiar el ancho? Falso con alineaciones laterales.
+ * @param options.measure Qué se mide. En `ComboButton` es el contenedor entero.
+ * @param options.open Estado del menú.
+ * @param options.trigger El control que publica `aria-controls`.
+ */
+export declare function useMenuWidth(options: {
+    enabled: () => boolean;
+    measure: () => HTMLElement | null | undefined;
+    open: () => boolean;
+    trigger: () => HTMLElement | null | undefined;
+}): void;

package/dist/runtime/app/components/MenuButton/useMenuWidth.js

@@ -0,0 +1,34 @@
+import { nextTick, onScopeDispose, watch } from "vue";
+export function useMenuWidth(options) {
+  let observer;
+  function panel() {
+    const id = options.trigger()?.getAttribute("aria-controls");
+    if (!id || typeof document === "undefined") return null;
+    return document.getElementById(id);
+  }
+  function apply() {
+    const reference = options.measure();
+    const content = panel();
+    if (!reference || !content) return;
+    content.style.width = `${reference.getBoundingClientRect().width}px`;
+  }
+  function release() {
+    observer?.disconnect();
+    observer = void 0;
+  }
+  watch(
+    () => options.open() && options.enabled(),
+    async (active) => {
+      release();
+      if (!active) return;
+      await nextTick();
+      apply();
+      const reference = options.measure();
+      if (!reference || typeof ResizeObserver === "undefined") return;
+      observer = new ResizeObserver(apply);
+      observer.observe(reference);
+    },
+    { flush: "post" }
+  );
+  onScopeDispose(release);
+}

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

@@ -0,0 +1,25 @@
+import type { MenuItemProps } from './MenuItem.types.js';
+declare var __VLS_25: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_25) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<MenuItemProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    click: (event: KeyboardEvent | MouseEvent) => any;
+}, string, import("vue").PublicProps, Readonly<MenuItemProps> & Readonly<{
+    onClick?: ((event: KeyboardEvent | MouseEvent) => any) | undefined;
+}>, {
+    disabled: boolean;
+    kind: import("./MenuItem.types.js").MenuItemKind;
+    icon: string;
+    shortcut: string;
+    ui: import("../../types/slots.js").ComponentUi<"menu">;
+    dangerDescription: 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/MenuItem/MenuItem.types.d.ts

@@ -0,0 +1,19 @@
+import type { ComponentUi } from '#vuno/types/slots';
+export type MenuItemKind = 'danger' | 'default';
+export type MenuItemProps = {
+    /**
+     * Lo que un lector de pantalla añade a una acción destructiva. Sin texto no
+     * se anuncia nada: el color no es la única señal, pero tampoco se inventa una.
+     */
+    dangerDescription?: string;
+    disabled?: boolean;
+    icon?: string;
+    kind?: MenuItemKind;
+    label: string;
+    /**
+     * El atajo de teclado de esta acción, como pista. No lo registra: quien lo
+     * anuncia aquí tiene que seguir atendiéndolo donde corresponda.
+     */
+    shortcut?: string;
+    ui?: ComponentUi<'menu'>;
+};