@groupteknology/vuno 2.0.0 → 4.0.0

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'>;
+};

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,35 +1,46 @@
-import type { VunoModalSize, VunoRadius } from '#vuno/types/base';
-import type { VunoUi } from '#vuno/types/slots';
-type Props = {
-    description?: string;
-    /** Cerrar con Escape o pulsando el fondo. */
-    dismissible?: boolean;
-    /** La curvatura. Sin valor, la que traiga el tema. */
-    radius?: VunoRadius;
-    /** Ancho máximo; `full` ocupa todo el viewport. */
-    size?: VunoModalSize;
-    title?: string;
-    ui?: VunoUi<'modal'>;
-};
+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<Props & {
+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<Props & {
+    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: VunoRadius;
-    size: VunoModalSize;
-    ui: 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,58 +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: "flex-1 overflow-y-auto p-4 sm:p-6";
-        readonly content: "max-h-[85vh]";
-        readonly description: "mt-1 text-sm text-vuno-muted";
-        readonly footer: "flex items-center justify-end gap-2 p-4 sm:px-6";
-        readonly header: "p-4 sm:px-6";
-        readonly 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";
-        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: "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: "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: "max-w-lg";
-            };
-            readonly xl: {
-                readonly root: "max-w-xl";
-            };
-            readonly '2xl': {
-                readonly root: "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: "max-w-3xl";
-            };
-            readonly '4xl': {
-                readonly root: "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-dvh max-h-dvh";
-                readonly root: "m-0 h-dvh max-h-dvh w-dvw max-w-none shadow-none ring-0";
+            readonly true: {
+                readonly footerAction: "basis-1/4 items-start";
             };
         };
     };