@groupteknology/vuno 3.0.0 → 4.0.0

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

@@ -0,0 +1,191 @@
+<script setup>
+import { computed, inject, nextTick, onBeforeUnmount, onMounted, ref, useAttrs, useId, useSlots } from "vue";
+import { useTheme } from "#vuno/composables/useTheme";
+import MenuLevel from "#vuno/components/Menu/internal/MenuLevel/MenuLevel.vue";
+import { menuLevelKey } from "#vuno/components/Menu/Menu.context";
+import Icon from "#vuno/primitives/PrimitiveIcon/PrimitiveIcon.vue";
+defineOptions({ name: "MenuItem" });
+const props = defineProps({
+  dangerDescription: { type: String, required: false, default: void 0 },
+  disabled: { type: Boolean, required: false, default: false },
+  icon: { type: String, required: false, default: void 0 },
+  kind: { type: String, required: false, default: "default" },
+  label: { type: String, required: true },
+  shortcut: { type: String, required: false, default: void 0 },
+  ui: { type: Object, required: false, default: void 0 }
+});
+const emit = defineEmits(["click"]);
+const attrs = useAttrs();
+const slots = useSlots();
+const level = inject(menuLevelKey);
+if (!level) throw new Error("MenuItem debe usarse dentro de Menu");
+const childFocus = ref("none");
+const itemEl = ref(null);
+const open = ref(false);
+const childMenuId = useId();
+const descriptionId = useId();
+const hasSubmenu = computed(() => Boolean(slots.default));
+const selectable = computed(() => attrs["aria-checked"] !== void 0);
+const checked = computed(() => attrs["aria-checked"] === true || attrs["aria-checked"] === "true");
+const danger = computed(() => props.kind === "danger" && !hasSubmenu.value);
+const described = computed(() => danger.value && Boolean(props.dangerDescription));
+const ui = useTheme(
+  "menu",
+  () => props.ui,
+  () => ({
+    backgroundToken: level.appearance.value.backgroundToken,
+    disabled: String(props.disabled),
+    kind: danger.value ? "danger" : "default",
+    size: level.appearance.value.size,
+    withIcons: String(level.hasIcons.value),
+    withSelection: String(level.hasSelection.value)
+  })
+);
+function openSubmenu(focus) {
+  if (props.disabled || !hasSubmenu.value) return;
+  childFocus.value = focus;
+  open.value = true;
+}
+async function closeSubmenu(returnFocus = false) {
+  open.value = false;
+  if (returnFocus) {
+    await nextTick();
+    itemEl.value?.focus();
+  }
+}
+function activate(event) {
+  if (props.disabled) return;
+  if (hasSubmenu.value) return openSubmenu("first");
+  emit("click", event);
+  level.dismiss();
+}
+let pendingKeyboardClick = false;
+const keyboardActivation = (event) => event.key === "Enter" || event.key === " ";
+function onKeydown(event) {
+  if (!keyboardActivation(event)) return;
+  event.preventDefault();
+  pendingKeyboardClick = true;
+}
+function onKeyup(event) {
+  if (pendingKeyboardClick && keyboardActivation(event)) activate(event);
+  pendingKeyboardClick = false;
+}
+function onMousedown(event) {
+  if (props.disabled) event.preventDefault();
+}
+function onBlur(event) {
+  const target = event.currentTarget;
+  target.removeAttribute("data-highlighted");
+}
+function onFocus(event) {
+  const target = event.currentTarget;
+  target.setAttribute("data-highlighted", "");
+}
+const registration = {
+  activate,
+  closeSubmenu,
+  openSubmenu,
+  disabled: () => props.disabled,
+  element: () => itemEl.value,
+  hasSubmenu: () => hasSubmenu.value
+};
+let release;
+let unregister;
+onMounted(() => {
+  unregister = level.register(registration);
+  release = level.declare({ icon: Boolean(props.icon), selection: selectable.value });
+});
+onBeforeUnmount(() => {
+  release?.();
+  unregister?.();
+});
+</script>
+
+<template>
+    <li
+        ref="itemEl"
+        :aria-controls="hasSubmenu && open ? childMenuId : void 0"
+        :aria-describedby="described ? descriptionId : void 0"
+        :aria-disabled="props.disabled || void 0"
+        :aria-expanded="hasSubmenu ? open : void 0"
+        :aria-haspopup="hasSubmenu ? 'menu' : void 0"
+        :class="ui.item"
+        :data-disabled="props.disabled ? '' : void 0"
+        role="menuitem"
+        tabindex="-1"
+        :title="props.label"
+        @blur="onBlur"
+        @click="activate"
+        @focus="onFocus"
+        @keydown="onKeydown"
+        @keyup="onKeyup"
+        @mousedown="onMousedown"
+        @pointermove="level.highlight(registration)"
+    >
+        <span
+            v-if="level.hasSelection.value"
+            :class="ui.icon"
+        >
+            <Icon
+                v-if="checked"
+                name="carbon:checkmark"
+            />
+        </span>
+
+        <span
+            v-if="level.hasIcons.value"
+            :class="ui.icon"
+        >
+            <Icon
+                v-if="props.icon"
+                :name="props.icon"
+            />
+        </span>
+
+        <span :class="ui.label">{{ props.label }}</span>
+
+        <span
+            v-if="described"
+            :id="descriptionId"
+            :class="ui.description"
+        >
+            {{ props.dangerDescription }}
+        </span>
+
+        <span
+            v-if="props.shortcut && !hasSubmenu"
+            :class="ui.shortcut"
+        >
+            {{ props.shortcut }}
+        </span>
+
+        <span
+            v-else-if="hasSubmenu"
+            :class="ui.shortcut"
+        >
+            <Icon
+                :class="ui.icon"
+                name="carbon:caret-right"
+            />
+        </span>
+
+        <MenuLevel
+            v-if="hasSubmenu && open"
+            :ariaLabel="props.label"
+            :backgroundToken="level.appearance.value.backgroundToken"
+            :border="level.appearance.value.border"
+            :depth="level.depth + 1"
+            :distance="-6"
+            :initialFocus="childFocus"
+            :menuId="childMenuId"
+            placement="right-start"
+            :reference="() => itemEl ?? void 0"
+            :size="level.appearance.value.size"
+            :ui="props.ui"
+            @back="closeSubmenu(true)"
+            @dismiss="level.dismiss($event)"
+        >
+            <slot />
+        </MenuLevel>
+    </li>
+</template>

package/dist/runtime/app/components/MenuItem/MenuItem.vue.d.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/MenuItemDivider/MenuItemDivider.d.vue.ts

@@ -0,0 +1,9 @@
+import type { ComponentUi } from '#vuno/types/slots';
+type __VLS_Props = {
+    ui?: ComponentUi<'menu'>;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    ui: ComponentUi<"menu">;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,15 @@
+<script setup>
+import { useTheme } from "#vuno/composables/useTheme";
+defineOptions({ name: "MenuItemDivider" });
+const props = defineProps({
+  ui: { type: Object, required: false, default: void 0 }
+});
+const ui = useTheme("menu", () => props.ui);
+</script>
+
+<template>
+    <li
+        :class="ui.separator"
+        role="separator"
+    />
+</template>

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

@@ -0,0 +1,9 @@
+import type { ComponentUi } from '#vuno/types/slots';
+type __VLS_Props = {
+    ui?: ComponentUi<'menu'>;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    ui: ComponentUi<"menu">;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -1,23 +1,46 @@
-import type { VunoModalProps } from './Modal.types.js';
+import type { ModalProps, ModalSecondaryButton } from './Modal.types.js';
 declare const _default: typeof __VLS_export;
 export default _default;
-declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<VunoModalProps & {
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ModalProps & {
     open?: boolean;
 }, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    secondary: () => any;
     close: () => any;
+    submit: () => any;
     "update:open": (value: boolean) => any;
-}, string, import("vue").PublicProps, Readonly<VunoModalProps & {
+    loadingSuccess: () => any;
+}, string, import("vue").PublicProps, Readonly<ModalProps & {
     open?: boolean;
 }> & Readonly<{
+    onSecondary?: (() => any) | undefined;
     onClose?: (() => any) | undefined;
+    onSubmit?: (() => any) | undefined;
     "onUpdate:open"?: ((value: boolean) => any) | undefined;
+    onLoadingSuccess?: (() => any) | undefined;
 }>, {
-    description: string;
-    title: string;
-    radius: import("../../types/base.js").VunoRadius;
-    size: import("./Modal.types.js").VunoModalSize;
-    ui: import("../../types/slots.js").VunoUi<"modal">;
+    size: import("./Modal.types.js").ModalSize;
+    danger: boolean;
     dismissible: boolean;
+    ui: import("../../types/slots.js").ComponentUi<"modal">;
+    ariaLabel: string;
+    alert: boolean;
+    closeButtonLabel: string;
+    dangerDescription: string;
+    hasScrollingContent: boolean;
+    isFullWidth: boolean;
+    loadingDescription: string;
+    loadingIconDescription: string;
+    loadingStatus: import("../InlineLoading/InlineLoading.types.js").InlineLoadingStatus;
+    modalHeading: string;
+    modalLabel: string;
+    passiveModal: boolean;
+    preventCloseOnClickOutside: boolean;
+    primaryButtonDisabled: boolean;
+    primaryButtonText: string;
+    secondaryButtons: readonly ModalSecondaryButton[];
+    secondaryButtonText: string;
+    selectorPrimaryFocus: string;
+    shouldSubmitOnEnter: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
     body?: () => unknown;
     default?: () => unknown;

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

@@ -1,62 +1,98 @@
 export declare const modalTheme: Record<"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.
-     */
-    readonly compoundVariants: [{
-        readonly class: {
-            readonly root: "rounded-none";
-        };
-        readonly size: "full";
-    }];
     readonly slots: {
-        readonly body: "min-h-0 flex-1 overflow-y-auto p-4 pt-0";
-        readonly bodyStandalone: "pt-4";
-        readonly close: "-me-2 -mt-2 shrink-0";
-        readonly content: "flex max-h-[calc(85dvh-0.75rem)] min-h-0 flex-col sm:max-h-[calc(100dvh-3.75rem)]";
-        readonly description: "mt-1 text-sm text-vuno-muted";
-        readonly footer: "flex shrink-0 items-center justify-end gap-2 pt-1.5";
-        readonly frame: "flex min-h-0 flex-1 flex-col overflow-hidden rounded-lg bg-vuno-surface ring ring-vuno-border";
-        readonly header: "flex shrink-0 items-start justify-between gap-4 p-4";
-        readonly heading: "flex min-w-0 flex-col";
-        readonly root: "m-auto mb-0 max-h-[85dvh] w-dvw max-w-none overflow-hidden rounded-none border-0 bg-vuno-surface-1 p-1.5 text-vuno-body shadow-lg ring-0 sm:mb-auto sm:max-h-[calc(100dvh-3rem)] sm:w-[calc(100dvw-2rem)] sm:max-w-lg sm:rounded-sm sm:ring sm:ring-vuno-border";
-        readonly title: "font-semibold text-vuno-strong";
+        /**
+         * `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.
+         */
+        readonly 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.
+         */
+        readonly close: "absolute end-0 top-0 border-2 hover:bg-(--vuno-layer-hover-01) focus:border-(--vuno-focus) focus:shadow-none";
+        readonly closeIcon: "size-5 text-(--vuno-icon-primary)";
+        readonly 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.
+         */
+        readonly footerAction: "h-16 max-w-none shrink grow-0 pb-8";
+        readonly 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.
+         */
+        readonly label: "mb-1 text-xs leading-4 tracking-[0.16px] text-(--vuno-text-secondary)";
+        readonly 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.
+         */
+        readonly 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.
-     */
     readonly variants: {
-        readonly radius: Record<import("../../types/base.js").VunoRadius, Record<"root", string>>;
+        /** Un componente a ancho completo llega a los bordes del cuerpo. */
+        readonly fullWidth: {
+            readonly false: {};
+            readonly true: {
+                readonly 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í.
+         */
+        readonly scrolling: {
+            readonly false: {};
+            readonly true: {
+                readonly 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.
+         */
         readonly size: {
+            readonly xs: {
+                readonly body: "[&>p]:pe-0";
+                readonly root: "min-[42rem]:w-[48%] min-[66rem]:max-h-[48%] min-[66rem]:w-[32%] min-[82rem]:w-[24%]";
+            };
             readonly sm: {
-                readonly root: "sm:max-w-sm";
+                readonly body: "[&>p]:pe-0 min-[66rem]:[&>p]:pe-[20%]";
+                readonly root: "min-[42rem]:w-[60%] min-[66rem]:max-h-[72%] min-[66rem]:w-[42%] min-[82rem]:w-[36%]";
             };
             readonly md: {
-                readonly root: "sm:max-w-md";
+                readonly root: "min-[42rem]:w-[84%] min-[66rem]:max-h-[84%] min-[66rem]:w-[60%] min-[82rem]:w-[48%]";
             };
             readonly lg: {
-                readonly root: "sm:max-w-lg";
-            };
-            readonly xl: {
-                readonly root: "sm:max-w-xl";
-            };
-            readonly '2xl': {
-                readonly root: "sm:max-w-2xl";
+                readonly root: "min-[42rem]:w-[96%] min-[66rem]:max-h-[96%] min-[66rem]:w-[84%] min-[82rem]:w-[72%]";
             };
-            readonly '3xl': {
-                readonly root: "sm:max-w-3xl";
-            };
-            readonly '4xl': {
-                readonly root: "sm:max-w-4xl";
+        };
+        /** Tres acciones: un cuarto cada una y alineadas a la derecha. */
+        readonly threeButton: {
+            readonly false: {
+                readonly footerAction: "basis-1/2 items-baseline";
             };
-            readonly full: {
-                readonly content: "h-[calc(100dvh-0.75rem)] max-h-[calc(100dvh-0.75rem)]";
-                readonly root: "m-0 h-dvh max-h-dvh w-dvw max-w-none shadow-none ring-0 sm:rounded-none";
+            readonly true: {
+                readonly footerAction: "basis-1/4 items-start";
             };
         };
     };

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

@@ -1,43 +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: "min-h-0 flex-1 overflow-y-auto p-4 pt-0",
-    bodyStandalone: "pt-4",
-    close: "-me-2 -mt-2 shrink-0",
-    content: "flex max-h-[calc(85dvh-0.75rem)] min-h-0 flex-col sm:max-h-[calc(100dvh-3.75rem)]",
-    description: "mt-1 text-sm text-vuno-muted",
-    footer: "flex shrink-0 items-center justify-end gap-2 pt-1.5",
-    frame: "flex min-h-0 flex-1 flex-col overflow-hidden rounded-lg bg-vuno-surface ring ring-vuno-border",
-    header: "flex shrink-0 items-start justify-between gap-4 p-4",
-    heading: "flex min-w-0 flex-col",
-    root: "m-auto mb-0 max-h-[85dvh] w-dvw max-w-none overflow-hidden rounded-none border-0 bg-vuno-surface-1 p-1.5 text-vuno-body shadow-lg ring-0 sm:mb-auto sm:max-h-[calc(100dvh-3rem)] sm:w-[calc(100dvw-2rem)] sm:max-w-lg sm:rounded-sm sm:ring sm:ring-vuno-border",
-    title: "font-semibold text-vuno-strong"
+    /**
+     * `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.
+     */
+    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: "sm:max-w-sm" },
-      md: { root: "sm:max-w-md" },
-      lg: { root: "sm:max-w-lg" },
-      xl: { root: "sm:max-w-xl" },
-      "2xl": { root: "sm:max-w-2xl" },
-      "3xl": { root: "sm:max-w-3xl" },
-      "4xl": { root: "sm:max-w-4xl" },
-      full: { content: "h-[calc(100dvh-0.75rem)] max-h-[calc(100dvh-0.75rem)]", root: "m-0 h-dvh max-h-dvh w-dvw max-w-none shadow-none ring-0 sm:rounded-none" }
+      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" }
     }
   }
 });