@groupteknology/vuno 1.0.1 → 3.0.0

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

@@ -0,0 +1,7 @@
+import type { VunoBreadcrumbProps } from './Breadcrumb.types.js';
+declare const __VLS_export: import("vue").DefineComponent<VunoBreadcrumbProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<VunoBreadcrumbProps> & Readonly<{}>, {
+    ui: import("../../types/slots.js").VunoUi<"breadcrumb">;
+    loading: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,29 @@
+import type { VunoButtonProps } from './Button.types.js';
+type __VLS_Slots = {
+    /** Contenido en lugar de la etiqueta. */
+    default?: () => unknown;
+    /** Va después de todo lo demás; la tabla mete ahí su contador. */
+    trailing?: () => unknown;
+};
+declare const __VLS_base: import("vue").DefineComponent<VunoButtonProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<VunoButtonProps> & Readonly<{}>, {
+    color: import("../../types/base.js").VunoColor;
+    icon: string;
+    radius: import("../../types/base.js").VunoRadius;
+    size: import("./Button.types.js").VunoButtonSize;
+    variant: import("./Button.types.js").VunoButtonVariant;
+    label: string;
+    shape: import("./Button.types.js").VunoButtonShape;
+    tag: import("vue").Component | string;
+    type: "button" | "reset" | "submit";
+    ui: import("../../types/slots.js").VunoUi<"button">;
+    href: string;
+    to: import("vue-router").RouteLocationRaw;
+}, {}, {}, {}, 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/Button/Button.theme.d.ts

@@ -0,0 +1,102 @@
+export declare const buttonTheme: Record<"button", {
+    readonly slots: {
+        readonly base: "group relative inline-flex shrink-0 cursor-pointer items-center justify-center overflow-hidden rounded-lg font-medium shadow-xs ring-1 ring-inset focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-vuno-focus disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 pointer-coarse:min-h-11 pointer-coarse:min-w-11";
+        readonly content: "relative inline-flex items-center justify-center gap-(--vuno-button-gap)";
+        readonly emphasis: "pointer-events-none absolute inset-0 rounded-[inherit] bg-linear-to-b from-(--vuno-button-emphasis-start) to-(--vuno-button-emphasis) shadow-[inset_0_1px_0_0_var(--vuno-button-emphasis-highlight)] group-hover:from-(--vuno-button-emphasis-hover)";
+        readonly icon: "shrink-0";
+        /**
+         * Caja y no texto suelto: el contenido del slot puede ser cualquier
+         * cosa —la muestra de color del campo es un `span` con `size-4`— y
+         * dentro de un envoltorio en línea el ancho y el alto no se aplican.
+         * Con una muestra de 16 px dio 2, que era solo su borde.
+         */
+        readonly label: "inline-flex items-center";
+        /** El giro se dibuja con un borde: un icono más sería otra descarga. */
+        readonly spinner: "shrink-0 animate-spin rounded-full border-2 border-current border-t-transparent";
+    };
+    readonly variants: {
+        readonly color: Record<import("../../types/base.js").VunoColor, Record<"base", string>>;
+        readonly groupOrientation: {
+            readonly horizontal: {
+                readonly base: "not-last:not-first:rounded-none not-only:first:rounded-e-none not-only:last:rounded-s-none focus-visible:z-1";
+            };
+            readonly vertical: {
+                readonly base: "not-last:not-first:rounded-none not-only:first:rounded-b-none not-only:last:rounded-t-none focus-visible:z-1";
+            };
+        };
+        readonly radius: Record<import("../../types/base.js").VunoRadius, Record<"base", string>>;
+        /**
+         * Sin etiqueta el botón es cuadrado, y eso sí combina con el
+         * tamaño: por eso `size` publica su altura en una variable y aquí
+         * se consume como ancho. Escribirlo con `aspect-square` parecía
+         * bastar y no basta —un `inline-flex` de ancho automático lo
+         * ensancha el relleno lateral—, y fijar el ancho por valor
+         * devolvería las cinco combinaciones.
+         */
+        readonly shape: {
+            readonly base: {};
+            readonly circle: {
+                readonly base: "w-(--vuno-button-size) rounded-full px-0";
+            };
+            readonly square: {
+                readonly base: "w-(--vuno-button-size) px-0";
+            };
+        };
+        readonly size: {
+            readonly xs: {
+                readonly base: "h-(--vuno-button-size) px-1.5 text-xs [--vuno-button-gap:0.25rem] [--vuno-button-size:1.25rem]";
+                readonly icon: "size-3";
+            };
+            readonly sm: {
+                readonly base: "h-(--vuno-button-size) px-2 text-xs [--vuno-button-gap:0.25rem] [--vuno-button-size:1.625rem]";
+                readonly icon: "size-3.5";
+            };
+            readonly md: {
+                readonly base: "h-(--vuno-button-size) px-3 text-sm [--vuno-button-gap:0.375rem] [--vuno-button-size:2.25rem]";
+                readonly icon: "size-4";
+            };
+            readonly lg: {
+                readonly base: "h-(--vuno-button-size) px-4 text-sm [--vuno-button-gap:0.5rem] [--vuno-button-size:2.5rem]";
+                readonly icon: "size-5";
+            };
+            readonly xl: {
+                readonly base: "h-(--vuno-button-size) px-4 text-base [--vuno-button-gap:0.5rem] [--vuno-button-size:2.75rem]";
+                readonly icon: "size-5";
+            };
+        };
+        readonly variant: {
+            readonly destructive: {
+                readonly base: "bg-vuno-danger-solid text-vuno-danger-solid-contrast ring-vuno-danger-solid hover:bg-vuno-danger-solid-hover";
+            };
+            readonly 'destructive-subtle': {
+                readonly base: "bg-vuno-control text-vuno-error ring-vuno-line hover:bg-vuno-tint hover:ring-vuno-error/30";
+            };
+            readonly ghost: {
+                readonly base: "bg-transparent text-vuno-body shadow-none ring-transparent hover:bg-vuno-tint hover:text-vuno-strong";
+            };
+            readonly link: {
+                readonly base: "bg-transparent text-(--vuno-accent) shadow-none ring-transparent hover:underline";
+            };
+            readonly outline: {
+                readonly base: "bg-transparent text-vuno-body shadow-none ring-vuno-line hover:bg-vuno-tint hover:text-vuno-strong";
+            };
+            readonly primary: {
+                readonly base: "bg-vuno-brand text-vuno-brand-contrast ring-vuno-brand hover:bg-vuno-brand-hover";
+            };
+            readonly secondary: {
+                readonly base: "bg-vuno-control text-vuno-body ring-vuno-line hover:bg-vuno-tint hover:text-vuno-strong";
+            };
+            readonly soft: {
+                readonly base: "bg-(--vuno-accent)/10 text-(--vuno-accent) ring-transparent hover:bg-(--vuno-accent)/20";
+            };
+            readonly solid: {
+                readonly base: "bg-(--vuno-accent) text-(--vuno-accent-contrast) ring-(--vuno-accent) [--vuno-button-emphasis:var(--vuno-accent)] [--vuno-button-emphasis-highlight:color-mix(in_oklch,var(--vuno-accent),white_30%)] [--vuno-button-emphasis-hover:var(--vuno-accent)] [--vuno-button-emphasis-start:color-mix(in_oklch,var(--vuno-accent),white_15%)]";
+            };
+        };
+        readonly variantAccent: {
+            readonly on: {
+                readonly base: "text-(--vuno-accent) ring-(--vuno-accent) hover:bg-(--vuno-accent)/10 hover:text-(--vuno-accent)";
+            };
+        };
+    };
+}>;

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

@@ -0,0 +1,67 @@
+import { accentByColor, radiusByStep } from "#vuno/theme/shared";
+import { defineTheme } from "#vuno/utils/theme";
+export const buttonTheme = defineTheme("button", {
+  slots: {
+    base: "group relative inline-flex shrink-0 cursor-pointer items-center justify-center overflow-hidden rounded-lg font-medium shadow-xs ring-1 ring-inset focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-vuno-focus disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 pointer-coarse:min-h-11 pointer-coarse:min-w-11",
+    content: "relative inline-flex items-center justify-center gap-(--vuno-button-gap)",
+    emphasis: "pointer-events-none absolute inset-0 rounded-[inherit] bg-linear-to-b from-(--vuno-button-emphasis-start) to-(--vuno-button-emphasis) shadow-[inset_0_1px_0_0_var(--vuno-button-emphasis-highlight)] group-hover:from-(--vuno-button-emphasis-hover)",
+    icon: "shrink-0",
+    /**
+     * Caja y no texto suelto: el contenido del slot puede ser cualquier
+     * cosa —la muestra de color del campo es un `span` con `size-4`— y
+     * dentro de un envoltorio en línea el ancho y el alto no se aplican.
+     * Con una muestra de 16 px dio 2, que era solo su borde.
+     */
+    label: "inline-flex items-center",
+    /** El giro se dibuja con un borde: un icono más sería otra descarga. */
+    spinner: "shrink-0 animate-spin rounded-full border-2 border-current border-t-transparent"
+  },
+  variants: {
+    color: accentByColor("base"),
+    groupOrientation: {
+      horizontal: { base: "not-last:not-first:rounded-none not-only:first:rounded-e-none not-only:last:rounded-s-none focus-visible:z-1" },
+      vertical: { base: "not-last:not-first:rounded-none not-only:first:rounded-b-none not-only:last:rounded-t-none focus-visible:z-1" }
+    },
+    radius: radiusByStep("base"),
+    /**
+     * Sin etiqueta el botón es cuadrado, y eso sí combina con el
+     * tamaño: por eso `size` publica su altura en una variable y aquí
+     * se consume como ancho. Escribirlo con `aspect-square` parecía
+     * bastar y no basta —un `inline-flex` de ancho automático lo
+     * ensancha el relleno lateral—, y fijar el ancho por valor
+     * devolvería las cinco combinaciones.
+     */
+    shape: {
+      base: {},
+      circle: { base: "w-(--vuno-button-size) rounded-full px-0" },
+      square: { base: "w-(--vuno-button-size) px-0" }
+    },
+    size: {
+      xs: { base: "h-(--vuno-button-size) px-1.5 text-xs [--vuno-button-gap:0.25rem] [--vuno-button-size:1.25rem]", icon: "size-3" },
+      sm: { base: "h-(--vuno-button-size) px-2 text-xs [--vuno-button-gap:0.25rem] [--vuno-button-size:1.625rem]", icon: "size-3.5" },
+      md: { base: "h-(--vuno-button-size) px-3 text-sm [--vuno-button-gap:0.375rem] [--vuno-button-size:2.25rem]", icon: "size-4" },
+      lg: { base: "h-(--vuno-button-size) px-4 text-sm [--vuno-button-gap:0.5rem] [--vuno-button-size:2.5rem]", icon: "size-5" },
+      xl: { base: "h-(--vuno-button-size) px-4 text-base [--vuno-button-gap:0.5rem] [--vuno-button-size:2.75rem]", icon: "size-5" }
+    },
+    variant: {
+      destructive: {
+        base: "bg-vuno-danger-solid text-vuno-danger-solid-contrast ring-vuno-danger-solid hover:bg-vuno-danger-solid-hover"
+      },
+      "destructive-subtle": { base: "bg-vuno-control text-vuno-error ring-vuno-line hover:bg-vuno-tint hover:ring-vuno-error/30" },
+      ghost: { base: "bg-transparent text-vuno-body shadow-none ring-transparent hover:bg-vuno-tint hover:text-vuno-strong" },
+      link: { base: "bg-transparent text-(--vuno-accent) shadow-none ring-transparent hover:underline" },
+      outline: { base: "bg-transparent text-vuno-body shadow-none ring-vuno-line hover:bg-vuno-tint hover:text-vuno-strong" },
+      primary: {
+        base: "bg-vuno-brand text-vuno-brand-contrast ring-vuno-brand hover:bg-vuno-brand-hover"
+      },
+      secondary: { base: "bg-vuno-control text-vuno-body ring-vuno-line hover:bg-vuno-tint hover:text-vuno-strong" },
+      soft: { base: "bg-(--vuno-accent)/10 text-(--vuno-accent) ring-transparent hover:bg-(--vuno-accent)/20" },
+      solid: {
+        base: "bg-(--vuno-accent) text-(--vuno-accent-contrast) ring-(--vuno-accent) [--vuno-button-emphasis:var(--vuno-accent)] [--vuno-button-emphasis-highlight:color-mix(in_oklch,var(--vuno-accent),white_30%)] [--vuno-button-emphasis-hover:var(--vuno-accent)] [--vuno-button-emphasis-start:color-mix(in_oklch,var(--vuno-accent),white_15%)]"
+      }
+    },
+    variantAccent: {
+      on: { base: "text-(--vuno-accent) ring-(--vuno-accent) hover:bg-(--vuno-accent)/10 hover:text-(--vuno-accent)" }
+    }
+  }
+});

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

@@ -0,0 +1,24 @@
+import type { Component } from 'vue';
+import type { RouteLocationRaw } from 'vue-router';
+import type { VunoColor, VunoRadius, VunoSize } from '#vuno/types/base';
+import type { VunoUi } from '#vuno/types/slots';
+export type VunoButtonShape = 'base' | 'circle' | 'square';
+export type VunoButtonSize = Extract<VunoSize, 'lg' | 'md' | 'sm' | 'xl' | 'xs'>;
+export type VunoButtonVariant = 'destructive' | 'destructive-subtle' | 'ghost' | 'link' | 'outline' | 'primary' | 'secondary' | 'soft' | 'solid';
+export type VunoButtonProps = {
+    color?: VunoColor;
+    disabled?: boolean;
+    href?: string;
+    icon?: string;
+    label?: string;
+    loading?: boolean;
+    radius?: VunoRadius;
+    shape?: VunoButtonShape;
+    size?: VunoButtonSize;
+    tag?: Component | string;
+    to?: RouteLocationRaw;
+    trailing?: boolean;
+    type?: 'button' | 'reset' | 'submit';
+    ui?: VunoUi<'button'>;
+    variant?: VunoButtonVariant;
+};

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

@@ -0,0 +1,129 @@
+<script setup>
+import { computed, defineComponent, h, onMounted, ref } from "vue";
+import { useVunoControlGroup } from "#vuno/composables/internal/useVunoControlGroup";
+import { useTheme } from "#vuno/composables/useTheme";
+import Icon from "#vuno/components/Icon/Icon.vue";
+defineOptions({ name: "VunoButton" });
+const props = defineProps({
+  color: { type: String, required: false, default: void 0 },
+  disabled: { type: Boolean, required: false },
+  href: { type: String, required: false, default: void 0 },
+  icon: { type: String, required: false, default: void 0 },
+  label: { type: String, required: false, default: void 0 },
+  loading: { type: Boolean, required: false },
+  radius: { type: String, required: false, default: void 0 },
+  shape: { type: String, required: false, default: void 0 },
+  size: { type: String, required: false, default: void 0 },
+  tag: { type: null, required: false, default: void 0 },
+  to: { type: null, required: false, default: void 0 },
+  trailing: { type: Boolean, required: false },
+  type: { type: String, required: false, default: "button" },
+  ui: { type: Object, required: false, default: void 0 },
+  variant: { type: String, required: false, default: "secondary" }
+});
+const slots = defineSlots();
+const NativeButton = defineComponent({
+  name: "VunoButtonRoot",
+  inheritAttrs: false,
+  setup(_, { attrs, slots: nativeSlots }) {
+    return () => h("button", attrs, nativeSlots.default?.());
+  }
+});
+const root = ref(null);
+const hasContent = computed(() => Boolean(props.label) || Boolean(slots.default));
+const controlGroup = useVunoControlGroup();
+const size = computed(() => props.size ?? controlGroup.size.value ?? "md");
+const isDisabled = computed(() => Boolean(props.disabled) || Boolean(props.loading));
+const isButton = computed(() => !props.tag || props.tag === "button");
+const rootTag = computed(() => isButton.value ? NativeButton : props.tag);
+const isEmphasis = computed(() => props.variant === "solid");
+const variantAccent = computed(() => {
+  if (!props.color) return void 0;
+  return ["ghost", "outline"].includes(props.variant) ? "on" : void 0;
+});
+const ui = useTheme(
+  "button",
+  () => props.ui,
+  () => ({
+    color: props.color ?? "primary",
+    groupOrientation: controlGroup.orientation.value,
+    radius: props.radius,
+    shape: props.shape ?? (hasContent.value ? "base" : "square"),
+    size: size.value,
+    variant: props.variant,
+    variantAccent: variantAccent.value
+  })
+);
+function captureRoot(target) {
+  const element = target?.$el ?? target;
+  root.value = element instanceof HTMLElement ? element : null;
+}
+function blockDisabledLink(event) {
+  if (isButton.value || !isDisabled.value) return;
+  event.preventDefault();
+  event.stopImmediatePropagation();
+}
+onMounted(() => {
+  if (!import.meta.env.DEV) return;
+  const element = root.value;
+  if (!element) return;
+  const accessibleName = element?.textContent?.trim() || element?.getAttribute("aria-label") || element?.getAttribute("aria-labelledby") || element?.title;
+  if (!accessibleName) console.warn("[VButton] Un bot\xF3n sin texto necesita aria-label o aria-labelledby.");
+});
+</script>
+
+<template>
+    <component
+        :is="rootTag"
+        :ref="captureRoot"
+        :aria-busy="props.loading ? 'true' : void 0"
+        :aria-disabled="!isButton && isDisabled ? 'true' : void 0"
+        :class="ui.base"
+        :disabled="isButton ? isDisabled : void 0"
+        :href="props.href"
+        :tabindex="!isButton && isDisabled ? -1 : void 0"
+        :to="props.to"
+        :type="isButton ? props.type : void 0"
+        @click.capture="blockDisabledLink"
+    >
+        <span
+            v-if="isEmphasis"
+            aria-hidden="true"
+            :class="ui.emphasis"
+        />
+
+        <span :class="ui.content">
+            <!--
+            El giro ocupa el sitio del icono en vez de añadirse: si se sumara, el
+            botón cambiaría de ancho al pulsarlo y el puntero acabaría sobre otra
+            cosa.
+        -->
+            <span
+                v-if="props.loading"
+                aria-hidden="true"
+                :class="[ui.icon, ui.spinner]"
+            />
+
+            <Icon
+                v-else-if="props.icon && !props.trailing"
+                :class="ui.icon"
+                :name="props.icon"
+            />
+
+            <span
+                v-if="hasContent"
+                :class="ui.label"
+            >
+                <slot>{{ props.label }}</slot>
+            </span>
+
+            <Icon
+                v-if="props.icon && props.trailing && !props.loading"
+                :class="ui.icon"
+                :name="props.icon"
+            />
+
+            <slot name="trailing" />
+        </span>
+    </component>
+</template>

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

@@ -0,0 +1,29 @@
+import type { VunoButtonProps } from './Button.types.js';
+type __VLS_Slots = {
+    /** Contenido en lugar de la etiqueta. */
+    default?: () => unknown;
+    /** Va después de todo lo demás; la tabla mete ahí su contador. */
+    trailing?: () => unknown;
+};
+declare const __VLS_base: import("vue").DefineComponent<VunoButtonProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<VunoButtonProps> & Readonly<{}>, {
+    color: import("../../types/base.js").VunoColor;
+    icon: string;
+    radius: import("../../types/base.js").VunoRadius;
+    size: import("./Button.types.js").VunoButtonSize;
+    variant: import("./Button.types.js").VunoButtonVariant;
+    label: string;
+    shape: import("./Button.types.js").VunoButtonShape;
+    tag: import("vue").Component | string;
+    type: "button" | "reset" | "submit";
+    ui: import("../../types/slots.js").VunoUi<"button">;
+    href: string;
+    to: import("vue-router").RouteLocationRaw;
+}, {}, {}, {}, 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

@@ -0,0 +1,32 @@
+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

@@ -0,0 +1,100 @@
+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

@@ -0,0 +1,82 @@
+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

@@ -0,0 +1,12 @@
+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';
+};