@groupteknology/vuno 3.0.0 → 4.0.0

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,10 +0,0 @@
-import type { VunoAvatarProps } from './Avatar.types.js';
-declare const __VLS_export: import("vue").DefineComponent<VunoAvatarProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<VunoAvatarProps> & Readonly<{}>, {
-    radius: import("../../types/base.js").VunoRadius;
-    size: import("./Avatar.types.js").VunoAvatarSize;
-    alt: string;
-    ui: import("../../types/slots.js").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.types.d.ts

@@ -1,10 +0,0 @@
-import type { VunoRadius, VunoSize } from '#vuno/types/base';
-import type { VunoUi } from '#vuno/types/slots';
-export type VunoAvatarSize = Extract<VunoSize, 'lg' | 'md' | 'sm' | 'xl' | 'xs'>;
-export type VunoAvatarProps = {
-    alt?: string;
-    radius?: VunoRadius;
-    size?: VunoAvatarSize;
-    src?: string;
-    ui?: VunoUi<'avatar'>;
-};

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,10 +0,0 @@
-import type { VunoAvatarProps } from './Avatar.types.js';
-declare const __VLS_export: import("vue").DefineComponent<VunoAvatarProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<VunoAvatarProps> & Readonly<{}>, {
-    radius: import("../../types/base.js").VunoRadius;
-    size: import("./Avatar.types.js").VunoAvatarSize;
-    alt: string;
-    ui: import("../../types/slots.js").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,21 +0,0 @@
-import type { VunoBadgeProps } from './Badge.types.js';
-declare var __VLS_1: {};
-type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_1) => any;
-};
-declare const __VLS_base: import("vue").DefineComponent<VunoBadgeProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<VunoBadgeProps> & Readonly<{}>, {
-    color: import("../../types/base.js").VunoColor;
-    radius: import("../../types/base.js").VunoRadius;
-    size: import("./Badge.types.js").VunoBadgeSize;
-    variant: import("./Badge.types.js").VunoBadgeVariant;
-    label: string;
-    ui: import("../../types/slots.js").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.types.d.ts

@@ -1,12 +0,0 @@
-import type { VunoColor, VunoRadius, VunoSize } from '#vuno/types/base';
-import type { VunoUi } from '#vuno/types/slots';
-export type VunoBadgeSize = Extract<VunoSize, 'lg' | 'md' | 'sm' | 'xl' | 'xs'>;
-export type VunoBadgeVariant = 'outline' | 'soft' | 'solid' | 'subtle';
-export type VunoBadgeProps = {
-    color?: VunoColor;
-    label?: string;
-    radius?: VunoRadius;
-    size?: VunoBadgeSize;
-    ui?: VunoUi<'badge'>;
-    variant?: VunoBadgeVariant;
-};

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,21 +0,0 @@
-import type { VunoBadgeProps } from './Badge.types.js';
-declare var __VLS_1: {};
-type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_1) => any;
-};
-declare const __VLS_base: import("vue").DefineComponent<VunoBadgeProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<VunoBadgeProps> & Readonly<{}>, {
-    color: import("../../types/base.js").VunoColor;
-    radius: import("../../types/base.js").VunoRadius;
-    size: import("./Badge.types.js").VunoBadgeSize;
-    variant: import("./Badge.types.js").VunoBadgeVariant;
-    label: string;
-    ui: import("../../types/slots.js").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,32 +0,0 @@
-import type { VunoCardProps } from './Card.types.js';
-/**
- * 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<VunoCardProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<VunoCardProps> & Readonly<{}>, {
-    color: import("../../types/base.js").VunoColor;
-    radius: import("./Card.types.js").VunoCardRadius;
-    variant: "outline" | "soft";
-    tag: import("vue").Component | string;
-    ui: import("../../types/slots.js").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;
-    };
-};

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

@@ -1,100 +0,0 @@
-export declare const cardTheme: Record<"card", {
-    /**
-     * La tarjeta. La cabecera queda en el plano secundario y cuerpo y pie
-     * forman juntos el plano principal. Un espacio corto separa ambos planos,
-     * de modo que la jerarquía se lee por superficies sin introducir una sombra
-     * ajena al sistema.
-     *
-     * El contenedor exterior lleva relleno en las variantes por capas, de modo
-     * que tanto la cabecera como el plano principal respiren dentro del marco.
-     *
-     * **La raíz lleva anillo de foco desde que existe `tag`.** Con `tag` la
-     * tarjeta puede **ser** un enlace o un botón, y entonces recibe el foco.
-     *
-     * Y aquí hay que decir qué pasaba de verdad, porque lo primero que se
-     * escribió en este mismo comentario era falso y lo desmintió la medición.
-     * **No se quedaba sin contorno**: quitando las tres clases con el elemento
-     * enfocado, el contorno calculado sigue siendo `1px auto` —el del navegador,
-     * que el preflight de Tailwind no neutraliza— y con las clases pasa a `2px
-     * solid` del acento, con 2px de separación. O sea que el defecto no era una
-     * tarjeta invisible al tabular, sino **la única superficie enfocable de vuno
-     * que no llevaba el anillo del sistema**: grosor, color y separación
-     * distintos de los del botón, el campo y el enlace de la miga, y a merced de
-     * lo que pinte cada navegador. Que ya lo era se ve en que el ejemplo de la
-     * ficha llevaba el anillo escrito a mano sobre el enlace que la envolvía.
-     *
-     * Va **siempre puesto y sin variante que lo encienda**, que es lo contrario
-     * de lo que pide el reflejo. El motivo es que la condición ya la impone
-     * `:focus-visible`: un elemento que no puede recibir el foco no la cumple
-     * nunca, así que sobre un `div` las tres clases no pintan nada —medido: con
-     * `tag` por defecto la tarjeta ni siquiera es parada del tabulador—. Una
-     * variante sería una segunda copia, más débil, de una condición que el CSS
-     * ya garantiza, y además tendría que **adivinar** si un `tag` cualquiera es
-     * enfocable; se equivocaría justo en el caso peligroso, el de un `div` con
-     * un `tabindex` llegado por atributos, dejando sin anillo algo que sí toma
-     * el foco.
-     *
-     * El color solo tiñe la capa exterior. El cuerpo conserva la superficie de
-     * lectura y el mismo acento alimenta el título y el anillo de foco.
-     */
-    readonly slots: {
-        readonly body: "p-4 text-vuno-body";
-        readonly footer: "p-4";
-        readonly header: "flex items-center gap-2 p-4 font-semibold text-(--vuno-accent)";
-        readonly primary: "relative flex min-h-0 flex-col divide-y divide-vuno-border overflow-hidden rounded-3xl border border-transparent";
-        readonly root: "flex w-full flex-col rounded-4xl border border-transparent focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--vuno-accent)";
-    };
-    readonly variants: {
-        readonly color: Record<import("../../types/base.js").VunoColor, Record<"root", string>>;
-        readonly radius: {
-            xs: {
-                primary: string;
-                root: string;
-            };
-            sm: {
-                primary: string;
-                root: string;
-            };
-            md: {
-                primary: string;
-                root: string;
-            };
-            lg: {
-                primary: string;
-                root: string;
-            };
-            xl: {
-                primary: string;
-                root: string;
-            };
-            '2xl': {
-                primary: string;
-                root: string;
-            };
-            '3xl': {
-                primary: string;
-                root: string;
-            };
-            '4xl': {
-                primary: string;
-                root: string;
-            };
-            none: {
-                primary: string;
-                root: string;
-            };
-        };
-        readonly variant: {
-            readonly outline: {
-                readonly header: "px-4 py-2";
-                readonly primary: "border-(--vuno-accent)/20 bg-vuno-surface";
-                readonly root: "gap-2 overflow-hidden border-(--vuno-accent)/20 bg-(--vuno-accent)/10 p-2";
-            };
-            readonly soft: {
-                readonly header: "px-4 py-2";
-                readonly primary: "bg-vuno-surface-1";
-                readonly root: "gap-2 overflow-hidden bg-(--vuno-accent)/10 p-2";
-            };
-        };
-    };
-}>;

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

@@ -1,82 +0,0 @@
-import { accentByColor } from "#vuno/theme/shared";
-import { defineTheme } from "#vuno/utils/theme";
-const cardRadius = {
-  xs: { primary: "rounded-none", root: "rounded-xs" },
-  sm: { primary: "rounded-none", root: "rounded-sm" },
-  md: { primary: "rounded-none", root: "rounded-md" },
-  lg: { primary: "rounded-none", root: "rounded-lg" },
-  xl: { primary: "rounded-sm", root: "rounded-xl" },
-  "2xl": { primary: "rounded-lg", root: "rounded-2xl" },
-  "3xl": { primary: "rounded-2xl", root: "rounded-3xl" },
-  "4xl": { primary: "rounded-3xl", root: "rounded-4xl" },
-  none: { primary: "rounded-none", root: "rounded-none" }
-};
-export const cardTheme = defineTheme("card", {
-  /**
-   * La tarjeta. La cabecera queda en el plano secundario y cuerpo y pie
-   * forman juntos el plano principal. Un espacio corto separa ambos planos,
-   * de modo que la jerarquía se lee por superficies sin introducir una sombra
-   * ajena al sistema.
-   *
-   * El contenedor exterior lleva relleno en las variantes por capas, de modo
-   * que tanto la cabecera como el plano principal respiren dentro del marco.
-   *
-   * **La raíz lleva anillo de foco desde que existe `tag`.** Con `tag` la
-   * tarjeta puede **ser** un enlace o un botón, y entonces recibe el foco.
-   *
-   * Y aquí hay que decir qué pasaba de verdad, porque lo primero que se
-   * escribió en este mismo comentario era falso y lo desmintió la medición.
-   * **No se quedaba sin contorno**: quitando las tres clases con el elemento
-   * enfocado, el contorno calculado sigue siendo `1px auto` —el del navegador,
-   * que el preflight de Tailwind no neutraliza— y con las clases pasa a `2px
-   * solid` del acento, con 2px de separación. O sea que el defecto no era una
-   * tarjeta invisible al tabular, sino **la única superficie enfocable de vuno
-   * que no llevaba el anillo del sistema**: grosor, color y separación
-   * distintos de los del botón, el campo y el enlace de la miga, y a merced de
-   * lo que pinte cada navegador. Que ya lo era se ve en que el ejemplo de la
-   * ficha llevaba el anillo escrito a mano sobre el enlace que la envolvía.
-   *
-   * Va **siempre puesto y sin variante que lo encienda**, que es lo contrario
-   * de lo que pide el reflejo. El motivo es que la condición ya la impone
-   * `:focus-visible`: un elemento que no puede recibir el foco no la cumple
-   * nunca, así que sobre un `div` las tres clases no pintan nada —medido: con
-   * `tag` por defecto la tarjeta ni siquiera es parada del tabulador—. Una
-   * variante sería una segunda copia, más débil, de una condición que el CSS
-   * ya garantiza, y además tendría que **adivinar** si un `tag` cualquiera es
-   * enfocable; se equivocaría justo en el caso peligroso, el de un `div` con
-   * un `tabindex` llegado por atributos, dejando sin anillo algo que sí toma
-   * el foco.
-   *
-   * El color solo tiñe la capa exterior. El cuerpo conserva la superficie de
-   * lectura y el mismo acento alimenta el título y el anillo de foco.
-   */
-  slots: {
-    body: "p-4 text-vuno-body",
-    footer: "p-4",
-    header: "flex items-center gap-2 p-4 font-semibold text-(--vuno-accent)",
-    primary: "relative flex min-h-0 flex-col divide-y divide-vuno-border overflow-hidden rounded-3xl border border-transparent",
-    root: "flex w-full flex-col rounded-4xl border border-transparent focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--vuno-accent)"
-  },
-  variants: {
-    color: accentByColor("root"),
-    radius: cardRadius,
-    /*
-     * `outline` usa el papel blanco del sistema y se cierra con un borde:
-     * es la composición de tarjeta nítida sobre un fondo casi blanco.
-     * `soft` conserva la separación tonal y no lleva borde, porque va dentro
-     * de algo ya levantado y ahí otro borde no separa nada.
-     */
-    variant: {
-      outline: {
-        header: "px-4 py-2",
-        primary: "border-(--vuno-accent)/20 bg-vuno-surface",
-        root: "gap-2 overflow-hidden border-(--vuno-accent)/20 bg-(--vuno-accent)/10 p-2"
-      },
-      soft: {
-        header: "px-4 py-2",
-        primary: "bg-vuno-surface-1",
-        root: "gap-2 overflow-hidden bg-(--vuno-accent)/10 p-2"
-      }
-    }
-  }
-});

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

@@ -1,12 +0,0 @@
-import type { Component } from 'vue';
-import type { VunoColor, VunoRadius } from '#vuno/types/base';
-import type { VunoUi } from '#vuno/types/slots';
-/** Curvatura de una tarjeta: admite esquinas rectas, pero no forma de píldora. */
-export type VunoCardRadius = Exclude<VunoRadius, 'full'>;
-export type VunoCardProps = {
-    color?: VunoColor;
-    radius?: VunoCardRadius;
-    tag?: Component | string;
-    ui?: VunoUi<'card'>;
-    variant?: 'outline' | 'soft';
-};