@groupteknology/vuno 2.0.0 → 4.0.0

package/dist/runtime/app/components/App/internal/Toast/Toast.vue

@@ -1,64 +0,0 @@
-<script setup>
-import { computed } from "vue";
-import { useIcons, useMessages, useTheme } from "#vuno/composables/useTheme";
-import Button from "#vuno/components/Button/Button.vue";
-import Icon from "#vuno/components/Icon/Icon.vue";
-defineOptions({ name: "VunoToast" });
-const props = defineProps({
-  notification: { type: Object, required: true }
-});
-const emit = defineEmits(["dismiss"]);
-const icons = useIcons();
-const messages = useMessages();
-const ui = useTheme("toast", void 0, () => ({ color: props.notification.color ?? "neutral" }));
-const defaultIcons = {
-  error: icons.value.notifyError,
-  info: icons.value.notifyInfo,
-  neutral: icons.value.notifyInfo,
-  success: icons.value.notifySuccess,
-  warning: icons.value.notifyWarning
-};
-const icon = computed(() => props.notification.icon ?? defaultIcons[props.notification.color]);
-</script>
-
-<template>
-    <!--
-        **Sin semántica de zona en vivo, y a propósito.**
-
-        Esto es la tarjeta; quien anuncia es `Toaster.vue`, que tiene dos
-        regiones permanentes y es el único que sabe cuándo llega un aviso. Si
-        además lo anunciara la tarjeta, un aviso normal se oiría **dos veces**, y
-        un anuncio duplicado es peor que uno tardío: quien lo oye no sabe si han
-        pasado dos cosas.
-
-        El hueco que deja: un `<VToast>` suelto, fuera del toaster, no se anuncia
-        solo. Queda dicho aquí y en su ficha para que sea un hueco conocido y no
-        un defecto futuro.
-    -->
-    <div :class="ui.root">
-        <Icon
-            :class="ui.icon"
-            :name="icon"
-        />
-
-        <div :class="ui.body">
-            <p :class="ui.title">{{ props.notification.title }}</p>
-
-            <p
-                v-if="props.notification.description"
-                :class="ui.description"
-            >
-                {{ props.notification.description }}
-            </p>
-        </div>
-
-        <Button
-            :aria-label="messages.close"
-            color="neutral"
-            :icon="icons.close"
-            size="xs"
-            variant="ghost"
-            @click="emit('dismiss')"
-        />
-    </div>
-</template>

package/dist/runtime/app/components/App/internal/Toast/Toast.vue.d.ts

@@ -1,11 +0,0 @@
-import type { VunoNotification } from '#vuno/types/app';
-type Props = {
-    notification: VunoNotification;
-};
-declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    dismiss: () => any;
-}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
-    onDismiss?: (() => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const _default: typeof __VLS_export;
-export default _default;

package/dist/runtime/app/components/App/internal/Toaster/Toaster.d.vue.ts

@@ -1,11 +0,0 @@
-import type { VunoNotification } from '#vuno/types/app';
-type Props = {
-    notifications: VunoNotification[];
-};
-declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    dismiss: (id: number) => any;
-}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
-    onDismiss?: ((id: number) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const _default: typeof __VLS_export;
-export default _default;

package/dist/runtime/app/components/App/internal/Toaster/Toaster.theme.d.ts

@@ -1,15 +0,0 @@
-export declare const toasterTheme: Record<"toaster", {
-    readonly slots: {
-        /** Entra deslizando desde la derecha; sale encogiendo. */
-        readonly enterActive: "transition duration-200 ease-out";
-        readonly enterFrom: "translate-x-4 opacity-0";
-        readonly item: "pointer-events-auto";
-        readonly leaveActive: "absolute inset-x-0 transition duration-150 ease-in";
-        readonly leaveTo: "translate-x-4 opacity-0";
-        readonly list: "flex flex-col gap-2";
-        /** Sin esto, al cerrar una de en medio las de abajo dan un salto. */
-        readonly move: "transition-transform duration-200 ease-out";
-        /** Fijo arriba a la derecha; en móvil ocupa el ancho con margen. */
-        readonly root: "pointer-events-none fixed inset-x-4 top-4 z-100 flex flex-col gap-2 sm:left-auto sm:w-96";
-    };
-}>;

package/dist/runtime/app/components/App/internal/Toaster/Toaster.theme.js

@@ -1,16 +0,0 @@
-import { defineTheme } from "#vuno/utils/theme";
-export const toasterTheme = defineTheme("toaster", {
-  slots: {
-    /** Entra deslizando desde la derecha; sale encogiendo. */
-    enterActive: "transition duration-200 ease-out",
-    enterFrom: "translate-x-4 opacity-0",
-    item: "pointer-events-auto",
-    leaveActive: "absolute inset-x-0 transition duration-150 ease-in",
-    leaveTo: "translate-x-4 opacity-0",
-    list: "flex flex-col gap-2",
-    /** Sin esto, al cerrar una de en medio las de abajo dan un salto. */
-    move: "transition-transform duration-200 ease-out",
-    /** Fijo arriba a la derecha; en móvil ocupa el ancho con margen. */
-    root: "pointer-events-none fixed inset-x-4 top-4 z-100 flex flex-col gap-2 sm:left-auto sm:w-96"
-  }
-});

package/dist/runtime/app/components/App/internal/Toaster/Toaster.vue

@@ -1,100 +0,0 @@
-<script setup>
-import { nextTick, ref, watch } from "vue";
-import { useTheme } from "#vuno/composables/useTheme";
-import Toast from "#vuno/components/App/internal/Toast/Toast.vue";
-defineOptions({ name: "VunoToaster" });
-const props = defineProps({
-  notifications: { type: Array, required: true }
-});
-const emit = defineEmits(["dismiss"]);
-const ui = useTheme("toaster");
-const assertive = ref("");
-const polite = ref("");
-const announced = /* @__PURE__ */ new Set();
-const owners = { assertive: null, polite: null };
-async function announce(region, text) {
-  region.value = "";
-  await nextTick();
-  region.value = text;
-}
-watch(
-  () => props.notifications,
-  (list) => {
-    for (const notification of list) {
-      if (announced.has(notification.id)) continue;
-      announced.add(notification.id);
-      const text = [notification.title, notification.description].filter(Boolean).join(". ");
-      const tone = notification.color === "error" ? "assertive" : "polite";
-      owners[tone] = notification.id;
-      void announce(tone === "assertive" ? assertive : polite, text);
-    }
-    for (const id of announced) if (!list.some((notification) => notification.id === id)) announced.delete(id);
-    for (const tone of ["assertive", "polite"]) {
-      if (owners[tone] === null || list.some((notification) => notification.id === owners[tone])) continue;
-      owners[tone] = null;
-      (tone === "assertive" ? assertive : polite).value = "";
-    }
-  },
-  { deep: true, immediate: true }
-);
-</script>
-
-<template>
-    <!--
-        La pila se porta a `body` para que no la recorte ningún `overflow` ni la
-        reordene ningún contexto de apilamiento de la pantalla que la abrió.
-
-        `pointer-events-none` en el contenedor y `auto` en cada aviso: si no, una
-        franja invisible a lo alto de la pantalla se come los clics de lo que hay
-        detrás aunque no haya ninguna notificación.
-    -->
-    <Teleport to="body">
-        <div :class="ui.root">
-            <!--
-                Las dos regiones, permanentes y solo para el lector. Un fallo se
-                anuncia de inmediato y lo demás espera a que termine la frase en
-                curso: interrumpir por un «guardado» es ruido. Son dos y no una
-                porque la urgencia es del aviso, y `aria-live` no se puede cambiar
-                sobre la marcha sin perder el anuncio.
-            -->
-            <div
-                aria-live="polite"
-                class="sr-only"
-                data-test="toaster-polite"
-            >
-                {{ polite }}
-            </div>
-
-            <div
-                aria-live="assertive"
-                class="sr-only"
-                data-test="toaster-assertive"
-            >
-                {{ assertive }}
-            </div>
-
-            <!--
-                `TransitionGroup` y no `Transition`: hay varias a la vez y al
-                quitar una de en medio las de abajo tienen que subir. `move`
-                anima justo eso, que si no da un salto.
-            -->
-            <TransitionGroup
-                :class="ui.list"
-                :enterActiveClass="ui.enterActive"
-                :enterFromClass="ui.enterFrom"
-                :leaveActiveClass="ui.leaveActive"
-                :leaveToClass="ui.leaveTo"
-                :moveClass="ui.move"
-                tag="div"
-            >
-                <Toast
-                    v-for="notification in props.notifications"
-                    :key="notification.id"
-                    :class="ui.item"
-                    :notification="notification"
-                    @dismiss="emit('dismiss', notification.id)"
-                />
-            </TransitionGroup>
-        </div>
-    </Teleport>
-</template>

package/dist/runtime/app/components/App/internal/Toaster/Toaster.vue.d.ts

@@ -1,11 +0,0 @@
-import type { VunoNotification } from '#vuno/types/app';
-type Props = {
-    notifications: VunoNotification[];
-};
-declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    dismiss: (id: number) => any;
-}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
-    onDismiss?: ((id: number) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const _default: typeof __VLS_export;
-export default _default;

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

@@ -1,27 +0,0 @@
-import type { VunoRadius, VunoSize } from '#vuno/types/base';
-import type { VunoUi } from '#vuno/types/slots';
-/**
- * La imagen redonda de una fila: una foto de producto, un logotipo, una
- * persona.
- *
- * El `alt` no es decoración: en un listado, la alternativa útil es el nombre
- * de la fila, y de ahí salen también las iniciales cuando no hay imagen que
- * enseñar.
- */
-type Props = {
-    alt?: string;
-    /** La curvatura. Sin valor, la que traiga el tema. */
-    radius?: VunoRadius;
-    size?: VunoSize;
-    src?: string;
-    ui?: VunoUi<'avatar'>;
-};
-declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
-    radius: VunoRadius;
-    size: VunoSize;
-    alt: string;
-    ui: VunoUi<"avatar">;
-    src: string;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const _default: typeof __VLS_export;
-export default _default;

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

@@ -1,30 +0,0 @@
-export declare const avatarTheme: Record<"avatar", {
-    /**
-     * La escala es la de Nuxt UI y no una propia, para que `size: 'sm'` siga
-     * midiendo los mismos 28 px que hoy en la columna de imagen.
-     */
-    readonly slots: {
-        readonly image: "size-full rounded-[inherit] object-cover";
-        readonly root: "inline-flex shrink-0 items-center justify-center rounded-sm bg-vuno-surface-1 align-middle font-medium text-vuno-muted select-none";
-    };
-    readonly variants: {
-        readonly radius: Record<import("../../types/base.js").VunoRadius, Record<"root", string>>;
-        readonly size: {
-            readonly xs: {
-                readonly root: "size-6 text-xs";
-            };
-            readonly sm: {
-                readonly root: "size-7 text-sm";
-            };
-            readonly md: {
-                readonly root: "size-8 text-sm";
-            };
-            readonly lg: {
-                readonly root: "size-9 text-sm";
-            };
-            readonly xl: {
-                readonly root: "size-10 text-base";
-            };
-        };
-    };
-}>;

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

@@ -1,22 +0,0 @@
-import { radiusByStep } from "#vuno/theme/shared";
-import { defineTheme } from "#vuno/utils/theme";
-export const avatarTheme = defineTheme("avatar", {
-  /**
-   * La escala es la de Nuxt UI y no una propia, para que `size: 'sm'` siga
-   * midiendo los mismos 28 px que hoy en la columna de imagen.
-   */
-  slots: {
-    image: "size-full rounded-[inherit] object-cover",
-    root: "inline-flex shrink-0 items-center justify-center rounded-sm bg-vuno-surface-1 align-middle font-medium text-vuno-muted select-none"
-  },
-  variants: {
-    radius: radiusByStep("root"),
-    size: {
-      xs: { root: "size-6 text-xs" },
-      sm: { root: "size-7 text-sm" },
-      md: { root: "size-8 text-sm" },
-      lg: { root: "size-9 text-sm" },
-      xl: { root: "size-10 text-base" }
-    }
-  }
-});

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

@@ -1,51 +0,0 @@
-<script setup>
-import { computed, ref, watch } from "vue";
-import { useTheme } from "#vuno/composables/useTheme";
-defineOptions({ name: "VunoAvatar" });
-const props = defineProps({
-  alt: { type: String, required: false, default: "" },
-  radius: { type: String, required: false, default: void 0 },
-  size: { type: String, required: false, default: "md" },
-  src: { type: String, required: false, default: void 0 },
-  ui: { type: Object, required: false, default: void 0 }
-});
-const ui = useTheme(
-  "avatar",
-  () => props.ui,
-  () => ({ radius: props.radius, size: props.size })
-);
-const failed = ref(false);
-const showImage = computed(() => Boolean(props.src) && !failed.value);
-const initials = computed(
-  () => props.alt.split(/\s+/).filter(Boolean).slice(0, 2).map((word) => [...word][0]?.toLocaleUpperCase() ?? "").join("")
-);
-watch(
-  () => props.src,
-  () => {
-    failed.value = false;
-  }
-);
-</script>
-
-<template>
-    <span :class="ui.root">
-        <img
-            v-if="showImage"
-            :alt="props.alt"
-            :class="ui.image"
-            :src="props.src"
-            @error="failed = true"
-        />
-
-        <!--
-            Sin imagen, las iniciales son decoración: el nombre de la fila ya
-            está escrito en la columna de al lado, y anunciarlo aquí otra vez
-            —peor, deletreado— solo alarga la lectura de cada fila.
-        -->
-        <span
-            v-else
-            aria-hidden="true"
-            >{{ initials }}</span
-        >
-    </span>
-</template>

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

@@ -1,27 +0,0 @@
-import type { VunoRadius, VunoSize } from '#vuno/types/base';
-import type { VunoUi } from '#vuno/types/slots';
-/**
- * La imagen redonda de una fila: una foto de producto, un logotipo, una
- * persona.
- *
- * El `alt` no es decoración: en un listado, la alternativa útil es el nombre
- * de la fila, y de ahí salen también las iniciales cuando no hay imagen que
- * enseñar.
- */
-type Props = {
-    alt?: string;
-    /** La curvatura. Sin valor, la que traiga el tema. */
-    radius?: VunoRadius;
-    size?: VunoSize;
-    src?: string;
-    ui?: VunoUi<'avatar'>;
-};
-declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
-    radius: VunoRadius;
-    size: VunoSize;
-    alt: string;
-    ui: VunoUi<"avatar">;
-    src: string;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const _default: typeof __VLS_export;
-export default _default;

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

@@ -1,40 +0,0 @@
-import type { VunoColor, VunoRadius, VunoSize } from '#vuno/types/base';
-import type { VunoUi } from '#vuno/types/slots';
-/**
- * Una etiqueta de estado: el estado de una fila, el contador de filtros
- * activos, el resumen de un filtro puesto.
- *
- * No es un botón ni lleva acción propia. Cuando algo dentro sí la lleva
- * —la cruz que quita un filtro— va en el slot, para que el elemento que se
- * pulsa sea ese y no la etiqueta entera.
- */
-type VunoBadgeVariant = 'outline' | 'soft' | 'solid' | 'subtle';
-type Props = {
-    color?: VunoColor;
-    label?: string;
-    /** La curvatura. Sin valor, la que traiga el tema. */
-    radius?: VunoRadius;
-    size?: VunoSize;
-    ui?: VunoUi<'badge'>;
-    variant?: VunoBadgeVariant;
-};
-declare var __VLS_1: {};
-type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_1) => any;
-};
-declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
-    color: VunoColor;
-    radius: VunoRadius;
-    size: VunoSize;
-    variant: VunoBadgeVariant;
-    label: string;
-    ui: VunoUi<"badge">;
-}, {}, {}, {}, 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/Badge/Badge.theme.d.ts

@@ -1,40 +0,0 @@
-export declare const badgeTheme: Record<"badge", {
-    readonly slots: {
-        readonly base: "inline-flex shrink-0 items-center rounded-sm font-medium";
-    };
-    readonly variants: {
-        readonly color: Record<import("../../types/base.js").VunoColor, Record<"base", string>>;
-        readonly radius: Record<import("../../types/base.js").VunoRadius, Record<"base", string>>;
-        readonly size: {
-            readonly xs: {
-                readonly base: "gap-0.5 px-1.5 py-0.5 text-xs";
-            };
-            readonly sm: {
-                readonly base: "gap-1 px-1.5 py-0.5 text-xs";
-            };
-            readonly md: {
-                readonly base: "gap-1 px-2 py-0.5 text-xs";
-            };
-            readonly lg: {
-                readonly base: "gap-1.5 px-2 py-1 text-sm";
-            };
-            readonly xl: {
-                readonly base: "gap-1.5 px-2.5 py-1 text-sm";
-            };
-        };
-        readonly variant: {
-            readonly outline: {
-                readonly base: "border border-(--vuno-accent) text-(--vuno-accent)";
-            };
-            readonly soft: {
-                readonly base: "bg-(--vuno-accent)/10 text-(--vuno-accent)";
-            };
-            readonly solid: {
-                readonly base: "bg-(--vuno-accent) text-(--vuno-accent-contrast)";
-            };
-            readonly subtle: {
-                readonly base: "bg-(--vuno-accent)/10 text-(--vuno-accent) ring-1 ring-(--vuno-accent)/25 ring-inset";
-            };
-        };
-    };
-}>;

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

@@ -1,22 +0,0 @@
-import { accentByColor, radiusByStep } from "#vuno/theme/shared";
-import { defineTheme } from "#vuno/utils/theme";
-export const badgeTheme = defineTheme("badge", {
-  slots: { base: "inline-flex shrink-0 items-center rounded-sm font-medium" },
-  variants: {
-    color: accentByColor("base"),
-    radius: radiusByStep("base"),
-    size: {
-      xs: { base: "gap-0.5 px-1.5 py-0.5 text-xs" },
-      sm: { base: "gap-1 px-1.5 py-0.5 text-xs" },
-      md: { base: "gap-1 px-2 py-0.5 text-xs" },
-      lg: { base: "gap-1.5 px-2 py-1 text-sm" },
-      xl: { base: "gap-1.5 px-2.5 py-1 text-sm" }
-    },
-    variant: {
-      outline: { base: "border border-(--vuno-accent) text-(--vuno-accent)" },
-      soft: { base: "bg-(--vuno-accent)/10 text-(--vuno-accent)" },
-      solid: { base: "bg-(--vuno-accent) text-(--vuno-accent-contrast)" },
-      subtle: { base: "bg-(--vuno-accent)/10 text-(--vuno-accent) ring-1 ring-(--vuno-accent)/25 ring-inset" }
-    }
-  }
-});

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

@@ -1,28 +0,0 @@
-<script setup>
-import { useTheme } from "#vuno/composables/useTheme";
-defineOptions({ name: "VunoBadge" });
-const props = defineProps({
-  color: { type: String, required: false, default: "primary" },
-  label: { type: String, required: false, default: void 0 },
-  radius: { type: String, required: false, default: void 0 },
-  size: { type: String, required: false, default: "md" },
-  ui: { type: Object, required: false, default: void 0 },
-  variant: { type: String, required: false, default: "solid" }
-});
-const ui = useTheme(
-  "badge",
-  () => props.ui,
-  () => ({
-    color: props.color,
-    radius: props.radius,
-    size: props.size,
-    variant: props.variant
-  })
-);
-</script>
-
-<template>
-    <span :class="ui.base">
-        <slot>{{ props.label }}</slot>
-    </span>
-</template>

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

@@ -1,40 +0,0 @@
-import type { VunoColor, VunoRadius, VunoSize } from '#vuno/types/base';
-import type { VunoUi } from '#vuno/types/slots';
-/**
- * Una etiqueta de estado: el estado de una fila, el contador de filtros
- * activos, el resumen de un filtro puesto.
- *
- * No es un botón ni lleva acción propia. Cuando algo dentro sí la lleva
- * —la cruz que quita un filtro— va en el slot, para que el elemento que se
- * pulsa sea ese y no la etiqueta entera.
- */
-type VunoBadgeVariant = 'outline' | 'soft' | 'solid' | 'subtle';
-type Props = {
-    color?: VunoColor;
-    label?: string;
-    /** La curvatura. Sin valor, la que traiga el tema. */
-    radius?: VunoRadius;
-    size?: VunoSize;
-    ui?: VunoUi<'badge'>;
-    variant?: VunoBadgeVariant;
-};
-declare var __VLS_1: {};
-type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_1) => any;
-};
-declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
-    color: VunoColor;
-    radius: VunoRadius;
-    size: VunoSize;
-    variant: VunoBadgeVariant;
-    label: string;
-    ui: VunoUi<"badge">;
-}, {}, {}, {}, 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/Card/Card.d.vue.ts

@@ -1,94 +0,0 @@
-import type { Component } from 'vue';
-import type { VunoRadius } from '#vuno/types/base';
-import type { VunoUi } from '#vuno/types/slots';
-/**
- * Una caja que agrupa contenido, con cabecera y pie opcionales.
- *
- * No estaba y se decidió a propósito que no estuviera: el playground se
- * escribió la suya a mano y el argumento fue que «si algún día vuno ofrece
- * una tarjeta, que sea porque alguien la pida, no porque el banco de pruebas
- * la necesitara». Entra ahora porque la han pedido, y con la forma que el
- * caso real ya tenía: tres regiones apiladas y separadas por una línea.
- *
- * **No es pulsable, y eso es deliberado.** Una tarjeta que se pulsa entera es
- * un botón o un enlace, y disfrazarla deja de serlo para el teclado y para el
- * lector de pantalla. Si hace falta navegar, se envuelve en un `NuxtLink` o
- * se pone un botón dentro, que es lo que hace el playground.
- */
-type Props = {
-    /** La curvatura. Sin valor, la que traiga el tema. */
-    radius?: VunoRadius;
-    /**
-     * El elemento que pinta. `div` de serie; `form` para una tarjeta que
-     * se envía, `NuxtLink` para una que navega, `article` o `section`
-     * cuando el contenido lo pida.
-     *
-     * Es la forma correcta de una tarjeta pulsable, y por eso existe.
-     * Antes esto decía que una tarjeta que se pulsa entera «es un botón o
-     * un enlace, y disfrazarla deja de serlo para el teclado y para el
-     * lector de pantalla», con la salida de envolverla en un `NuxtLink`.
-     * El aviso sigue siendo cierto sobre el disfraz —un `div` con
-     * `@click` no lo arregla ningún `role`—, pero envolver no era la
-     * mejor salida: **siéndolo** no hay elemento de más, el foco cae
-     * donde debe y el navegador da gratis abrir en otra pestaña, copiar
-     * el enlace y anunciarlo como lo que es.
-     *
-     * Los atributos caen en él: `to` para un enlace, `action` y `method`
-     * para un formulario, sin declararlos aquí.
-     *
-     * **La cadena solo vale para etiquetas nativas.** Para un componente
-     * hay que pasar el componente, no su nombre: `:tag="NuxtLink"` con
-     * `import { NuxtLink } from '#components'`, nunca `tag="NuxtLink"`.
-     * Los componentes de Nuxt se auto-importan en **tiempo de
-     * compilación**, así que al resolver una cadena no hay nada
-     * registrado que encontrar — y lo que no resuelve se pinta como
-     * etiqueta nativa: sale un `<nuxtlink to="…">` literal en el DOM,
-     * con todas las clases puestas, sin `href`, sin navegación, sin
-     * foco y **sin un solo aviso**. Se ve exactamente igual que una
-     * tarjeta enlazada.
-     */
-    tag?: Component | string;
-    ui?: VunoUi<'card'>;
-    /**
-     * `outline` para una tarjeta sobre la página: borde y un escalón de
-     * elevación. `soft` para una que ya está dentro de algo levantado —un
-     * diálogo, un panel—, donde otro borde sobra y lo que distingue es
-     * subir otro escalón.
-     *
-     * `plain` no pinta contenedor: ni fondo ni borde, solo las tres
-     * regiones y la línea que las separa. Es para cuando el marco ya lo
-     * pone otro —un `<dialog>` con su anillo y su sombra— y repetirlo
-     * dentro dibujaría una caja dentro de otra.
-     */
-    variant?: 'outline' | 'plain' | 'soft';
-};
-/**
- * Las tres regiones se pintan solo si se rellenan.
- *
- * Sin esto, una tarjeta con solo cuerpo arrastraría una cabecera vacía con su
- * relleno y su línea divisoria: un hueco y una raya que no separan nada. Se
- * ve raro y no falla, que es el peor modo de fallar.
- *
- * «Rellenada» es que produzca algo y no que esté declarada; lo decide
- * `filled`, que vive en `internal/` porque los layouts necesitan la misma
- * regla y dos copias de una regla divergen.
- */
-type __VLS_Slots = {
-    default?: () => unknown;
-    footer?: () => unknown;
-    header?: () => unknown;
-};
-declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
-    radius: VunoRadius;
-    variant: "outline" | "plain" | "soft";
-    tag: Component | string;
-    ui: VunoUi<"card">;
-}, {}, {}, {}, 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;
-    };
-};