@groupteknology/vuno 2.0.0 → 4.0.0

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

@@ -1,70 +1,36 @@
 <script setup>
-import { cloneVNode, computed, nextTick, onBeforeUnmount, ref, useId } from "vue";
-import { useVunoAnchor } from "#vuno/composables/internal/useVunoAnchor";
-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";
-defineOptions({ name: "VunoMenu" });
+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: "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 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 portalTarget = usePortal(() => props.portal);
+const initialFocus = ref("panel");
 const menuId = useId();
-const active = ref(-1);
-const contentEl = ref(null);
-const itemEls = ref([]);
-const open = ref(false);
+const triggerId = useId();
 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) {
-  if (item.disabled) return;
-  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 +41,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") {
@@ -100,18 +52,14 @@ 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, {
-    /*
-     * 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.
-     */
+    id: triggerId,
     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 +70,10 @@ const Trigger = () => {
     }
   });
 };
-onBeforeUnmount(unfollow);
+watch(open, (value) => {
+  if (value) emit("open");
+  else emit("close");
+});
 </script>
 
 <template>
@@ -132,51 +83,20 @@ 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"
+        <MenuLevel
+            :ariaLabel="props.ariaLabel"
+            :backgroundToken="props.backgroundToken"
+            :border="props.border"
+            :initialFocus="initialFocus"
+            :labelledBy="props.ariaLabel ? void 0 : triggerId"
+            :menuId="menuId"
+            :placement="props.placement"
+            :reference="() => triggerEl ?? void 0"
+            :size="props.size"
+            :ui="props.ui"
+            @dismiss="hide"
         >
-            <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>
+            <slot />
+        </MenuLevel>
     </Teleport>
 </template>

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

@@ -1,30 +1,32 @@
-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 { 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<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
-    placement: VunoPlacement;
-    portal: 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

@@ -0,0 +1,56 @@
+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;
+    /**
+     * 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: Placement;
+    size: MenuSize;
+    ui?: ComponentUi<'menu'>;
+    reference?: () => HTMLElement | undefined;
+};
+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<{
+    onBack?: (() => any) | undefined;
+    onDismiss?: ((returnFocus?: boolean | undefined) => any) | undefined;
+}>, {
+    ui: ComponentUi<"menu">;
+    ariaLabel: string;
+    reference: () => HTMLElement | undefined;
+    distance: number;
+    depth: number;
+    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/Menu/internal/MenuLevel/MenuLevel.vue

@@ -0,0 +1,133 @@
+<script setup>
+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 { 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" },
+  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"]);
+defineSlots();
+const contentEl = ref(null);
+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 { 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();
+  item.element()?.focus();
+}
+function register(item) {
+  items.value.push(item);
+  return () => {
+    items.value = items.value.filter((candidate) => candidate !== 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) {
+  if (item.disabled()) return;
+  items.value.forEach((candidate) => candidate !== item && candidate.closeSubmenu());
+  item.element()?.focus();
+  if (item.hasSubmenu()) item.openSubmenu("none");
+}
+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 === "first") await focus(enabled()[0]);
+  if (props.initialFocus === "last") await focus(enabled().at(-1));
+});
+</script>
+
+<template>
+    <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="onKeydown"
+    >
+        <slot />
+    </ul>
+</template>

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

@@ -0,0 +1,56 @@
+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;
+    /**
+     * 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: Placement;
+    size: MenuSize;
+    ui?: ComponentUi<'menu'>;
+    reference?: () => HTMLElement | undefined;
+};
+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<{
+    onBack?: (() => any) | undefined;
+    onDismiss?: ((returnFocus?: boolean | undefined) => any) | undefined;
+}>, {
+    ui: ComponentUi<"menu">;
+    ariaLabel: string;
+    reference: () => HTMLElement | undefined;
+    distance: number;
+    depth: number;
+    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>