@groupteknology/vuno 2.0.0 → 4.0.0

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

@@ -1,47 +1,83 @@
-import { radiusByStep } from "#vuno/theme/shared";
 import { defineTheme } from "#vuno/utils/theme";
 export const modalTheme = defineTheme("modal", {
-  /**
-   * Diálogo propio sobre `<dialog>` nativo. El fondo se pinta con `::backdrop`,
-   * que no admite clases de utilidad, así que va en `assets/css/main.css`.
-   *
-   * Todo lo visible sale del tema de Nuxt UI —`bg-vuno-surface`, `border-vuno-border`,
-   * la escala de radios— para que siga mandando el proyecto que lo instala.
-   */
-  compoundVariants: [{ class: { root: "rounded-none" }, size: "full" }],
   slots: {
-    body: "flex-1 overflow-y-auto p-4 sm:p-6",
-    /*
-     * Solo lo que la tarjeta no da. La columna, el `divide-y` y su color
-     * salen de `card`, que es quien define la forma «tres regiones
-     * separadas por una línea»; aquí queda el alto máximo y nada más.
-     * Antes esto repetía las cinco clases, y repetidas no se mantienen
-     * juntas: un proyecto que cambiara el separador de sus tarjetas se
-     * encontraba con que sus modales no cambiaban.
+    /**
+     * `min-h-0` deja que la fila `1fr` se encoja: sin él la rejilla crece con
+     * el contenido y el pie sale del diálogo en vez de quedarse abajo.
      */
-    content: "max-h-[85vh]",
-    description: "mt-1 text-sm text-vuno-muted",
-    footer: "flex items-center justify-end gap-2 p-4 sm:px-6",
-    header: "p-4 sm:px-6",
-    root: "m-auto w-[calc(100dvw-2rem)] max-w-lg rounded-sm bg-vuno-surface-1 p-0 text-vuno-body shadow-lg ring ring-vuno-border",
-    title: "font-semibold text-vuno-strong"
+    body: "[grid-area:2/1/-2/-1] min-h-0 overflow-y-auto px-4 pt-2 pb-12 text-sm leading-5 tracking-[0.16px] text-(--vuno-text-primary) focus:outline-solid focus:outline-2 focus:-outline-offset-2 focus:outline-(--vuno-focus) [&>p]:pe-[calc(20%-2rem)]",
+    /**
+     * El cierre reserva el filete de 2 px en reposo y el foco solo le cambia
+     * el color, como en el origen. Sin reservarlo, el botón llega con el
+     * borde de 1 px de su base y el anillo sale de medio grosor; la sombra
+     * interior se apaga porque aquí el foco lo dibuja el borde.
+     */
+    close: "absolute end-0 top-0 border-2 hover:bg-(--vuno-layer-hover-01) focus:border-(--vuno-focus) focus:shadow-none",
+    closeIcon: "size-5 text-(--vuno-icon-primary)",
+    /* El pie mide 64 px y los botones llegan a los bordes: no hay relleno. */
+    footer: "[grid-area:-1/1/-1/-1] mt-auto flex h-16 shrink-0 justify-end",
+    /**
+     * Vuno reparte el pie en porcentajes del diálogo, no en columnas: un
+     * solo botón ocupa la mitad derecha, dos la mitad cada uno y tres un
+     * cuarto. El relleno inferior de 32 px es el que sube la etiqueta.
+     */
+    footerAction: "h-16 max-w-none shrink grow-0 pb-8",
+    header: "[grid-area:1/1/1/-1] relative mb-2 max-h-[50vh] overflow-y-auto pt-4 ps-4 pe-12",
+    /**
+     * `label-01`: 12/16 px. El interletrado se queda en la mitad del
+     * +0.32px que declara el token: esa corrección compensa el cierre de
+     * IBM Plex Sans a cuerpos pequeños e Inter ya abre el texto por sí
+     * misma, así que sumarla entera trocea la etiqueta frente al título de
+     * 20 px.
+     */
+    label: "mb-1 text-xs leading-4 tracking-[0.16px] text-(--vuno-text-secondary)",
+    root: "m-0 grid-cols-[100%] grid-rows-[auto_1fr_auto] h-dvh max-h-dvh w-dvw max-w-none overflow-hidden border border-(--vuno-border-subtle-01) bg-(--vuno-layer-01) text-(--vuno-text-primary) outline-solid outline-3 -outline-offset-3 outline-transparent open:grid min-[42rem]:m-auto min-[42rem]:h-auto min-[42rem]:max-h-[90%]",
+    /**
+     * `heading-03`: 20/28 px en peso normal, con el margen del 20 % de
+     * Vuno. La escala deja el titular a interletrado 0 porque IBM Plex Sans
+     * cierra el avance al subir de cuerpo; Inter no lo hace, así que se
+     * cierra a mano −0.01em para que no se lea suelto sobre el cuerpo de
+     * 14 px.
+     */
+    title: "text-xl leading-7 font-normal tracking-[-0.2px] text-(--vuno-text-primary) pe-[calc(20%-3rem)]"
   },
-  /**
-   * `size` controla la geometría, no el contenido. Los tamaños normales
-   * solo cambian el ancho máximo; `full` ocupa el viewport completo y
-   * deja el scroll dentro del cuerpo.
-   */
   variants: {
-    radius: radiusByStep("root"),
+    /** Un componente a ancho completo llega a los bordes del cuerpo. */
+    fullWidth: {
+      false: {},
+      true: { body: "p-0" }
+    },
+    /**
+     * El desvanecido del final del cuerpo es la señal de que queda contenido
+     * fuera de vista. Las tres capas de los bordes devuelven los 16 px del
+     * lado inicial y los 2 px de los otros dos, que es donde cabe el anillo
+     * de foco de un control pegado al borde; sin ellas la máscara lo recorta.
+     *
+     * El filete inferior de 2 px transparente reserva ese mismo hueco en el
+     * eje vertical: al llegar al final del desplazamiento, Chrome recorta el
+     * anillo de foco —que va con desplazamiento negativo— del último control
+     * si el borde no está ahí.
+     */
+    scrolling: {
+      false: {},
+      true: { body: "border-b-2 border-b-transparent [mask-image:linear-gradient(to_bottom,var(--vuno-layer-01)_calc(100%_-_80px),transparent_calc(100%_-_48px),transparent_100%),linear-gradient(to_left,var(--vuno-layer-01)_0,16px,transparent_16px),linear-gradient(to_right,var(--vuno-layer-01)_0,2px,transparent_2px),linear-gradient(to_top,var(--vuno-layer-01)_0,2px,transparent_2px)] [&>*:last-child]:mb-6" }
+    },
+    /**
+     * `size` controla la geometría, no el contenido. En los dos tamaños
+     * estrechos el texto ya no reserva el margen del 20 %: con 24 % o 32 %
+     * de ancho, las líneas quedarían demasiado cortas. Vuno lo devuelve a
+     * `sm` en cuanto la ventana pasa de 1056 px.
+     */
     size: {
-      sm: { root: "max-w-sm" },
-      md: { root: "max-w-md" },
-      lg: { root: "max-w-lg" },
-      xl: { root: "max-w-xl" },
-      "2xl": { root: "max-w-2xl" },
-      "3xl": { root: "max-w-3xl" },
-      "4xl": { root: "max-w-4xl" },
-      full: { content: "h-dvh max-h-dvh", root: "m-0 h-dvh max-h-dvh w-dvw max-w-none shadow-none ring-0" }
+      xs: { body: "[&>p]:pe-0", root: "min-[42rem]:w-[48%] min-[66rem]:max-h-[48%] min-[66rem]:w-[32%] min-[82rem]:w-[24%]" },
+      sm: { body: "[&>p]:pe-0 min-[66rem]:[&>p]:pe-[20%]", root: "min-[42rem]:w-[60%] min-[66rem]:max-h-[72%] min-[66rem]:w-[42%] min-[82rem]:w-[36%]" },
+      md: { root: "min-[42rem]:w-[84%] min-[66rem]:max-h-[84%] min-[66rem]:w-[60%] min-[82rem]:w-[48%]" },
+      lg: { root: "min-[42rem]:w-[96%] min-[66rem]:max-h-[96%] min-[66rem]:w-[84%] min-[82rem]:w-[72%]" }
+    },
+    /** Tres acciones: un cuarto cada una y alineadas a la derecha. */
+    threeButton: {
+      false: { footerAction: "basis-1/2 items-baseline" },
+      true: { footerAction: "basis-1/4 items-start" }
     }
   }
 });

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

@@ -0,0 +1,88 @@
+import type { ComponentUi } from '#vuno/types/slots';
+import type { InlineLoadingStatus } from '#vuno/components/InlineLoading/InlineLoading.types';
+/** Los cuatro tamaños de Vuno. El predeterminado es `md`, como en React. */
+export type ModalSize = 'lg' | 'md' | 'sm' | 'xs';
+/**
+ * Una acción secundaria del pie en la variante de tres botones.
+ *
+ * Vuno acepta como máximo dos y siempre a la izquierda de la primaria, que es
+ * la única que puede ser `primary` o `danger`.
+ */
+export type ModalSecondaryButton = {
+    onClick?: (event: MouseEvent) => void;
+    buttonText: string;
+    disabled?: boolean;
+};
+export type ModalProps = {
+    /**
+     * El diálogo comunica una alerta, un error o una advertencia. Vuno lo
+     * empareja con `danger`, pasa el rol a `alertdialog` y describe el diálogo
+     * con su propio cuerpo.
+     */
+    alert?: boolean;
+    /**
+     * Nombre accesible explícito. Sustituye al que se compone con la etiqueta y
+     * el encabezado, y es la única vía cuando ninguno de los dos existe.
+     */
+    ariaLabel?: string;
+    /** Nombre del botón de cierre. Por defecto, el mensaje `close` del módulo. */
+    closeButtonLabel?: string;
+    /** Acción destructiva: la primaria pasa a `danger` y el foco inicial va a la secundaria. */
+    danger?: boolean;
+    /**
+     * Lo que oye un lector de pantalla antes de la etiqueta de la acción
+     * destructiva. Solo llega al botón cuando `danger` está activo.
+     */
+    dangerDescription?: string;
+    /**
+     * Se puede abandonar sin resolver la tarea: muestra la **x** y deja que
+     * Escape cierre. No existe en el sistema de origen; Vuno lo conserva para los diálogos
+     * que el producto no permite abandonar.
+     */
+    dismissible?: boolean;
+    /**
+     * Declara que el cuerpo se desplaza. Vuno además lo detecta cuando el
+     * contenido desborda, así que la prop solo hace falta para forzarlo.
+     */
+    hasScrollingContent?: boolean;
+    /** El cuerpo pierde su relleno para que un componente llegue a los bordes. */
+    isFullWidth?: boolean;
+    /** Texto de estado del `InlineLoading` que ocupa la acción primaria. */
+    loadingDescription?: string;
+    /** Nombre accesible del indicador de carga. */
+    loadingIconDescription?: string;
+    /**
+     * Carga breve sobre la propia acción primaria. Mientras no sea `inactive`,
+     * la acción queda deshabilitada y el pie se anuncia como ocupado.
+     */
+    loadingStatus?: InlineLoadingStatus;
+    /** Título del diálogo: una frase verbal breve que describe la tarea. */
+    modalHeading?: string;
+    /** Etiqueta opcional sobre el título, para el contexto al que se aplica la tarea. */
+    modalLabel?: string;
+    /** Diálogo informativo: sin pie y sin acciones que resolver. */
+    passiveModal?: boolean;
+    /**
+     * Tres estados, como en Vuno: sin declarar, un diálogo `passive` cierra al
+     * pulsar fuera y uno transaccional no; `true` lo impide siempre y `false` lo
+     * permite también en el transaccional.
+     */
+    preventCloseOnClickOutside?: boolean;
+    primaryButtonDisabled?: boolean;
+    primaryButtonText?: string;
+    /**
+     * Hasta dos acciones secundarias. Cuando se declara, sustituye a
+     * `secondaryButtonText` y el pie reparte los botones al 25 %.
+     */
+    secondaryButtons?: readonly ModalSecondaryButton[];
+    secondaryButtonText?: string;
+    /**
+     * Qué recibe el foco al abrir. Vuno busca este selector dentro del
+     * diálogo antes de aplicar sus reglas por tipo de diálogo.
+     */
+    selectorPrimaryFocus?: string;
+    /** Enter envía el diálogo desde cualquier sitio que no sea un botón de cierre. */
+    shouldSubmitOnEnter?: boolean;
+    size?: ModalSize;
+    ui?: ComponentUi<'modal'>;
+};

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

@@ -14,32 +14,81 @@ function releaseScrollLock() {
 </script>
 
 <script setup>
-import { inject, nextTick, onBeforeUnmount, useId, useTemplateRef, watch } from "vue";
-import { provideVunoPortal } from "#vuno/composables/internal/useVunoPortal";
-import { useTheme } from "#vuno/composables/useTheme";
-import { vunoOverlayBehindInjectionKey } from "#vuno/internal/keys";
-import Card from "#vuno/components/Card/Card.vue";
-defineOptions({ name: "VunoModal" });
+import { computed, nextTick, onBeforeUnmount, onUpdated, ref, useId, useTemplateRef, watch } from "vue";
+import { providePortal } from "#vuno/composables/internal/usePortal";
+import { useIcons, useMessages, useTheme } from "#vuno/composables/useTheme";
+import { filled } from "#vuno/utils/slots";
+import Button from "#vuno/components/Button/Button.vue";
+import InlineLoading from "#vuno/components/InlineLoading/InlineLoading.vue";
+defineOptions({ name: "Modal" });
 const open = defineModel("open", { type: Boolean, ...{ default: false } });
 const props = defineProps({
-  description: { type: String, required: false, default: void 0 },
+  alert: { type: Boolean, required: false, default: false },
+  ariaLabel: { type: String, required: false, default: void 0 },
+  closeButtonLabel: { type: String, required: false, default: void 0 },
+  danger: { type: Boolean, required: false, default: false },
+  dangerDescription: { type: String, required: false, default: void 0 },
   dismissible: { type: Boolean, required: false, default: true },
-  radius: { type: String, required: false, default: void 0 },
-  size: { type: String, required: false, default: "lg" },
-  title: { type: String, required: false, default: void 0 },
+  hasScrollingContent: { type: Boolean, required: false, default: false },
+  isFullWidth: { type: Boolean, required: false, default: false },
+  loadingDescription: { type: String, required: false, default: void 0 },
+  loadingIconDescription: { type: String, required: false, default: void 0 },
+  loadingStatus: { type: String, required: false, default: "inactive" },
+  modalHeading: { type: String, required: false, default: void 0 },
+  modalLabel: { type: String, required: false, default: void 0 },
+  passiveModal: { type: Boolean, required: false, default: false },
+  preventCloseOnClickOutside: { type: Boolean, required: false, default: void 0 },
+  primaryButtonDisabled: { type: Boolean, required: false, default: false },
+  primaryButtonText: { type: String, required: false, default: void 0 },
+  secondaryButtons: { type: Array, required: false, default: void 0 },
+  secondaryButtonText: { type: String, required: false, default: void 0 },
+  selectorPrimaryFocus: { type: String, required: false, default: "[data-modal-primary-focus]" },
+  shouldSubmitOnEnter: { type: Boolean, required: false, default: false },
+  size: { type: String, required: false, default: "md" },
   ui: { type: Object, required: false, default: void 0 }
 });
-const emit = defineEmits(["close"]);
-defineSlots();
-const isBehindOverlay = inject(vunoOverlayBehindInjectionKey, () => false);
+const emit = defineEmits(["close", "loadingSuccess", "secondary", "submit"]);
+const slots = defineSlots();
+const icons = useIcons();
+const messages = useMessages();
+const body = useTemplateRef("body");
+const dialog = useTemplateRef("dialog");
+const overflows = ref(false);
+const loadingActive = computed(() => props.loadingStatus !== "inactive");
+const secondaryActions = computed(() => props.secondaryButtons && props.secondaryButtons.length <= 2 ? props.secondaryButtons : void 0);
+const threeButton = computed(() => secondaryActions.value?.length === 2);
+const scrolling = computed(() => props.hasScrollingContent || overflows.value);
 const ui = useTheme(
   "modal",
   () => props.ui,
-  () => ({ radius: props.radius, size: props.size })
+  () => ({
+    fullWidth: props.isFullWidth ? "true" : "false",
+    scrolling: scrolling.value ? "true" : "false",
+    size: props.size,
+    threeButton: threeButton.value ? "true" : "false"
+  })
 );
-const dialog = useTemplateRef("dialog");
 const baseId = `vuno-${useId().replace(/[^\w-]/g, "")}`;
-provideVunoPortal(`#${baseId}`);
+const headingId = `${baseId}-heading`;
+const labelId = `${baseId}-label`;
+const bodyId = `${baseId}-body`;
+providePortal(`#${baseId}`);
+const isAlertDialog = computed(() => props.alert && !props.passiveModal);
+const labelledBy = computed(() => {
+  if (props.ariaLabel) return void 0;
+  return [props.modalLabel ? labelId : void 0, props.modalHeading ? headingId : void 0].filter(Boolean).join(" ") || void 0;
+});
+const regionLabelledBy = computed(() => {
+  if (props.modalLabel) return labelId;
+  return props.modalHeading ? headingId : void 0;
+});
+const hasHeader = computed(() => Boolean(props.modalHeading || props.modalLabel) || filled(slots.header) || props.dismissible);
+const hasFooter = computed(() => filled(slots.footer) || !props.passiveModal && Boolean(props.primaryButtonText || loadingActive.value || props.secondaryButtonText || secondaryActions.value?.length));
+const closesOnOutsideClick = computed(() => {
+  if (!props.dismissible) return false;
+  if (props.passiveModal) return props.preventCloseOnClickOutside !== true;
+  return props.preventCloseOnClickOutside === false;
+});
 let scrollLocked = false;
 function lockScroll(locked) {
   if (typeof document === "undefined" || locked === scrollLocked) return;
@@ -52,6 +101,17 @@ function requestClose() {
   lockScroll(false);
   emit("close");
 }
+function submit() {
+  emit("submit");
+  dialog.value?.querySelector("form")?.requestSubmit();
+}
+function secondary() {
+  emit("secondary");
+  requestClose();
+}
+function runSecondaryAction(action, event) {
+  action.onClick?.(event);
+}
 let closingFromModel = false;
 function onClose() {
   const shouldEmit = !closingFromModel;
@@ -61,7 +121,18 @@ function onClose() {
   if (shouldEmit) emit("close");
 }
 const openLayer = '[role="listbox"], [role="menu"], [role="dialog"], [role="tooltip"]';
+const bodyInput = 'input:not([type="hidden"]):not([disabled]), select:not([disabled]), textarea:not([disabled]), [contenteditable="true"]';
+const ownAction = "[data-vuno-modal-close], [data-vuno-modal-action]";
 let layerWasOpen = false;
+function submitOnEnter(event) {
+  if (event.key !== "Enter" || !props.shouldSubmitOnEnter || event.defaultPrevented) return;
+  const target = event.target;
+  if (!(target instanceof HTMLElement)) return;
+  if (target.closest(ownAction)) return;
+  if (target instanceof HTMLTextAreaElement || target.isContentEditable) return;
+  event.stopPropagation();
+  submit();
+}
 function onKeydown(event) {
   if (event.key !== "Escape") return;
   layerWasOpen = Boolean(dialog.value?.querySelector(openLayer));
@@ -81,10 +152,35 @@ function onPointerDown(event) {
 function onClick(event) {
   const pressed = pressedOnDialog;
   pressedOnDialog = false;
-  if (!props.dismissible) return;
+  if (!closesOnOutsideClick.value) return;
   if (!pressed || event.target !== dialog.value) return;
   requestClose();
 }
+function focusInitial() {
+  const element = dialog.value;
+  if (!element) return;
+  const requested = element.querySelector(props.selectorPrimaryFocus);
+  const primary = element.querySelector('[data-vuno-modal-action="primary"]:not([disabled])');
+  const cancel = element.querySelector('[data-vuno-modal-action="secondary"]:not([disabled])');
+  const field = body.value?.querySelector(bodyInput);
+  const close = element.querySelector("[data-vuno-modal-close]");
+  const target = requested ?? (props.danger ? cancel : void 0) ?? field ?? primary ?? close;
+  target?.focus();
+}
+function measureOverflow() {
+  const element = body.value;
+  overflows.value = element ? element.scrollHeight - element.clientHeight > 1 : false;
+}
+let overflowObserver;
+function watchOverflow() {
+  overflowObserver?.disconnect();
+  const element = body.value;
+  if (!element || typeof ResizeObserver === "undefined") return;
+  overflowObserver ??= new ResizeObserver(measureOverflow);
+  overflowObserver.observe(element);
+  for (const child of element.children) overflowObserver.observe(child);
+  measureOverflow();
+}
 watch(
   [open, dialog],
   async ([value, element]) => {
@@ -95,48 +191,51 @@ watch(
       closingFromModel = false;
       element.showModal();
       lockScroll(true);
+      watchOverflow();
+      focusInitial();
       return;
     }
     if (!value && element.open) {
       closingFromModel = true;
       element.close();
       lockScroll(false);
+      overflowObserver?.disconnect();
+      overflows.value = false;
     }
   },
   { immediate: true }
 );
-onBeforeUnmount(() => lockScroll(false));
+onUpdated(() => {
+  if (open.value) watchOverflow();
+});
+onBeforeUnmount(() => {
+  lockScroll(false);
+  overflowObserver?.disconnect();
+});
 </script>
 
 <template>
     <dialog
         :id="baseId"
         ref="dialog"
-        :aria-describedby="props.description ? `${baseId}-description` : void 0"
-        :aria-labelledby="props.title ? `${baseId}-title` : void 0"
-        :class="[ui.root, isBehindOverlay() ? 'vuno-overlay-behind' : void 0]"
+        :aria-describedby="isAlertDialog ? bodyId : void 0"
+        :aria-label="props.ariaLabel"
+        :aria-labelledby="labelledBy"
+        :class="ui.root"
         data-vuno-modal
+        :role="isAlertDialog ? 'alertdialog' : void 0"
         @cancel="onCancel"
         @click="onClick"
         @close="onClose"
+        @keydown="submitOnEnter"
         @keydown.capture="onKeydown"
         @mousedown="onPointerDown"
     >
-        <!--
-            El interior es una tarjeta, literalmente.
-            «Tres regiones apiladas y separadas por una línea» es lo que `VCard`
-            define, y el modal lo repetía clase por clase. Ahora lo reutiliza:
-            un proyecto que cambie el separador de sus tarjetas cambia también
-            sus modales, que es lo que uno espera y lo que no ocurría.
-            Va en la variante `plain` porque el marco —el anillo, la sombra y el
-            radio— lo pone el `<dialog>`, y pintarlo otra vez dentro dibujaría
-            una caja dentro de otra.
-        -->
         <!--
             **El contenido se monta al abrir y se desmonta al cerrar.**
 
             Antes vivía siempre, y eso convertía en mentira lo que este
-            componente promete: que un `VForm` de dentro se crea de nuevo cada
+            componente promete: que un `Form` de dentro se crea de nuevo cada
             vez y su `dirty` parte de cero. Medido, no deducido — con el diálogo
             cerrado los campos seguían montados y los errores del intento
             anterior seguían en sus zonas vivas, así que al reabrir el formulario
@@ -148,68 +247,153 @@ onBeforeUnmount(() => lockScroll(false));
             Desmontar no cuesta nada aquí. Un `<dialog>` sin `open` es
             `display: none`, así que lo de dentro no se veía de todos modos, y el
             destino del portal que heredan las capas de dentro es **el propio
-            `<dialog>`** —`#${baseId}` está en la etiqueta de arriba—, que sigue
-            existiendo cerrado. Eso se comprobó antes de tocarlo, porque la
-            sospecha de partida era la contraria.
+            `<dialog>`**, que sigue existiendo cerrado. Eso se comprobó antes de
+            tocarlo, porque la sospecha de partida era la contraria.
         -->
-        <Card
-            v-if="open"
-            :ui="{ body: ui.body, footer: ui.footer, header: ui.header, root: ui.content }"
-            variant="plain"
-        >
-            <template #header>
-                <template v-if="$slots.header">
+        <!--
+            Las tres zonas de Vuno —cabecera, cuerpo y pie— son las filas de la
+            rejilla `auto 1fr auto` del propio diálogo, y cada una declara su
+            fila: así el cuerpo se queda con el espacio que sobra y es lo único
+            que se desplaza, mientras la cabecera y el pie conservan su alto.
+            Tiene que ser el mismo elemento que limita la altura —un envoltorio
+            intermedio sin altura definida no acotaría la fila `1fr` y el pie
+            saldría del diálogo—, y por eso el `display` se aplica con la
+            variante `open`: declararlo siempre volvería visible un diálogo
+            cerrado, al que el navegador da `display: none`.
+        -->
+        <template v-if="open">
+            <div
+                v-if="hasHeader"
+                :class="ui.header"
+            >
+                <template v-if="filled(slots.header)">
                     <!-- El slot reemplaza lo visible, pero no los destinos ARIA. -->
                     <span
-                        v-if="props.title"
-                        :id="`${baseId}-title`"
+                        v-if="props.modalLabel"
+                        :id="labelId"
                         class="sr-only"
                     >
-                        {{ props.title }}
+                        {{ props.modalLabel }}
                     </span>
 
                     <span
-                        v-if="props.description"
-                        :id="`${baseId}-description`"
+                        v-if="props.modalHeading"
+                        :id="headingId"
                         class="sr-only"
                     >
-                        {{ props.description }}
+                        {{ props.modalHeading }}
                     </span>
 
                     <slot name="header" />
                 </template>
 
                 <template v-else>
-                    <template v-if="props.title || props.description">
-                        <h2
-                            v-if="props.title"
-                            :id="`${baseId}-title`"
-                            :class="ui.title"
-                        >
-                            {{ props.title }}
-                        </h2>
+                    <!--
+                        La etiqueta va **antes** del título, como en Vuno, y es
+                        un párrafo y no un segundo encabezado: dos `h2` con el
+                        mismo nivel en un diálogo describen dos secciones que no
+                        existen.
+                    -->
+                    <p
+                        v-if="props.modalLabel"
+                        :id="labelId"
+                        :class="ui.label"
+                    >
+                        {{ props.modalLabel }}
+                    </p>
 
-                        <p
-                            v-if="props.description"
-                            :id="`${baseId}-description`"
-                            :class="ui.description"
-                        >
-                            {{ props.description }}
-                        </p>
-                    </template>
+                    <h2
+                        v-if="props.modalHeading"
+                        :id="headingId"
+                        :class="ui.title"
+                    >
+                        {{ props.modalHeading }}
+                    </h2>
                 </template>
-            </template>
 
-            <slot name="body">
-                <slot />
-            </slot>
+                <Button
+                    v-if="props.dismissible"
+                    data-vuno-modal-close
+                    :icon="icons.close"
+                    :iconDescription="props.closeButtonLabel ?? messages.close"
+                    kind="ghost"
+                    size="lg"
+                    :ui="{ base: ui.close, icon: ui.closeIcon }"
+                    @click="requestClose"
+                />
+            </div>
+
+            <!--
+                La región solo aparece cuando el cuerpo se desplaza: así recibe
+                foco y se puede recorrer con el teclado. Se nombra con la
+                etiqueta o el título para no dejar una región anónima en el
+                árbol de accesibilidad.
+            -->
+            <div
+                :id="bodyId"
+                ref="body"
+                :aria-label="scrolling && !regionLabelledBy ? props.ariaLabel : void 0"
+                :aria-labelledby="scrolling ? regionLabelledBy : void 0"
+                :class="ui.body"
+                :role="scrolling ? 'region' : void 0"
+                :tabindex="scrolling ? 0 : void 0"
+            >
+                <slot name="body">
+                    <slot />
+                </slot>
+            </div>
 
-            <template
-                v-if="$slots.footer"
-                #footer
+            <div
+                v-if="hasFooter"
+                :aria-busy="loadingActive ? 'true' : void 0"
+                :class="ui.footer"
             >
-                <slot name="footer" />
-            </template>
-        </Card>
+                <slot name="footer">
+                    <Button
+                        v-for="(action, index) in secondaryActions"
+                        :key="`${action.buttonText}-${index}`"
+                        data-vuno-modal-action="secondary"
+                        :disabled="action.disabled || loadingActive"
+                        kind="secondary"
+                        :label="action.buttonText"
+                        size="xl"
+                        :ui="{ base: ui.footerAction }"
+                        @click="runSecondaryAction(action, $event)"
+                    />
+
+                    <Button
+                        v-if="!secondaryActions && props.secondaryButtonText"
+                        data-vuno-modal-action="secondary"
+                        :disabled="loadingActive"
+                        kind="secondary"
+                        :label="props.secondaryButtonText"
+                        size="xl"
+                        :ui="{ base: ui.footerAction }"
+                        @click="secondary"
+                    />
+
+                    <Button
+                        v-if="props.primaryButtonText || loadingActive"
+                        :dangerDescription="props.dangerDescription"
+                        data-vuno-modal-action="primary"
+                        :disabled="loadingActive || props.primaryButtonDisabled"
+                        :kind="props.danger ? 'danger' : 'primary'"
+                        size="xl"
+                        :ui="{ base: ui.footerAction }"
+                        @click="submit"
+                    >
+                        <InlineLoading
+                            v-if="loadingActive"
+                            :description="props.loadingDescription"
+                            :iconDescription="props.loadingIconDescription"
+                            :status="props.loadingStatus"
+                            @success="emit('loadingSuccess')"
+                        />
+
+                        <template v-else>{{ props.primaryButtonText }}</template>
+                    </Button>
+                </slot>
+            </div>
+        </template>
     </dialog>
 </template>