@groupteknology/vuno 2.0.0 → 3.0.0

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

@@ -1,78 +1,129 @@
 <script setup>
-import { computed } from "vue";
+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: "primary" },
+  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: "solid" }
+  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,
+    color: props.color ?? "primary",
     groupOrientation: controlGroup.orientation.value,
     radius: props.radius,
-    shape: hasContent.value ? void 0 : "square",
+    shape: props.shape ?? (hasContent.value ? "base" : "square"),
     size: size.value,
-    variant: props.variant
+    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>
-    <button
+    <component
+        :is="rootTag"
+        :ref="captureRoot"
         :aria-busy="props.loading ? 'true' : void 0"
+        :aria-disabled="!isButton && isDisabled ? 'true' : void 0"
         :class="ui.base"
-        :disabled="isDisabled"
-        :type="props.type"
+        :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]"
-        />
+            <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"
-        />
+            <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>
+            <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"
-        />
+            <Icon
+                v-if="props.icon && props.trailing && !props.loading"
+                :class="ui.icon"
+                :name="props.icon"
+            />
 
-        <slot name="trailing" />
-    </button>
+            <slot name="trailing" />
+        </span>
+    </component>
 </template>

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

@@ -1,43 +1,23 @@
-import type { VunoColor, VunoRadius, VunoSize } from '#vuno/types/base';
-import type { VunoUi } from '#vuno/types/slots';
-type VunoButtonVariant = 'ghost' | 'link' | 'outline' | 'soft' | 'solid';
-type Props = {
-    color?: VunoColor;
-    disabled?: boolean;
-    /** Nombre Iconify, como los de `useIcons`. */
-    icon?: string;
-    label?: string;
-    /** Bloquea el botón y sustituye el icono por un giro. */
-    loading?: boolean;
-    /** La curvatura. Sin valor, la que traiga el tema. */
-    radius?: VunoRadius;
-    size?: VunoSize;
-    /** El icono va detrás de la etiqueta en vez de delante. */
-    trailing?: boolean;
-    /**
-     * `button` a propósito, y no `submit`: un botón dentro de un
-     * formulario que no diga lo que es lo envía al pulsarlo, y eso
-     * convierte cualquier acción secundaria en un envío accidental.
-     */
-    type?: 'button' | 'reset' | 'submit';
-    ui?: VunoUi<'button'>;
-    variant?: VunoButtonVariant;
-};
+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<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
-    color: VunoColor;
+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: VunoRadius;
-    size: VunoSize;
-    variant: VunoButtonVariant;
+    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: VunoUi<"button">;
+    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;

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

@@ -1,67 +1,4 @@
-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';
-};
+import type { VunoCardProps } from './Card.types.js';
 /**
  * Las tres regiones se pintan solo si se rellenan.
  *
@@ -78,11 +15,12 @@ type __VLS_Slots = {
     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">;
+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;

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

@@ -1,10 +1,12 @@
 export declare const cardTheme: Record<"card", {
     /**
-     * La tarjeta. Tres regiones apiladas y separadas por una línea, que es la
-     * forma que tenía el caso real escrito a mano antes de que existiera.
+     * 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 relleno va en cada región y no en la raíz: con él en la raíz, la línea
-     * divisoria no llegaría a los bordes y quedaría flotando en medio.
+     * 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.
@@ -32,25 +34,66 @@ export declare const cardTheme: Record<"card", {
      * un `tabindex` llegado por atributos, dejando sin anillo algo que sí toma
      * el foco.
      *
-     * El acento se declara aquí, como en `breadcrumbLink` y en la pestaña: la
-     * tarjeta no tiene variantes de color de las que sacarlo, y sin declararlo
-     * `outline-(--vuno-accent)` se quedaría con lo que hubiera heredado.
+     * 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: "p-4 font-semibold text-vuno-strong";
-        readonly root: "flex w-full flex-col divide-y divide-vuno-border rounded-sm [--vuno-accent:var(--color-vuno-primary)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--vuno-accent)";
+        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 radius: Record<import("../../types/base.js").VunoRadius, Record<"root", string>>;
+        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 root: "border border-vuno-border bg-vuno-surface-1";
+                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 plain: {};
             readonly soft: {
-                readonly root: "bg-vuno-surface-2";
+                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,12 +1,25 @@
-import { radiusByStep } from "#vuno/theme/shared";
+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. Tres regiones apiladas y separadas por una línea, que es la
-   * forma que tenía el caso real escrito a mano antes de que existiera.
+   * 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 relleno va en cada región y no en la raíz: con él en la raíz, la línea
-   * divisoria no llegaría a los bordes y quedaría flotando en medio.
+   * 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.
@@ -34,29 +47,36 @@ export const cardTheme = defineTheme("card", {
    * un `tabindex` llegado por atributos, dejando sin anillo algo que sí toma
    * el foco.
    *
-   * El acento se declara aquí, como en `breadcrumbLink` y en la pestaña: la
-   * tarjeta no tiene variantes de color de las que sacarlo, y sin declararlo
-   * `outline-(--vuno-accent)` se quedaría con lo que hubiera heredado.
+   * 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: "p-4 font-semibold text-vuno-strong",
-    root: "flex w-full flex-col divide-y divide-vuno-border rounded-sm [--vuno-accent:var(--color-vuno-primary)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--vuno-accent)"
+    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: {
-    radius: radiusByStep("root"),
+    color: accentByColor("root"),
+    radius: cardRadius,
     /*
-     * `outline` sube un escalón sobre la página y se cierra con un borde.
-     * `soft` sube dos y no lleva borde, porque va dentro de algo que ya
-     * está levantado y ahí otro borde no separa nada: lo que distingue es
-     * la elevación.
+     * `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: { root: "border border-vuno-border bg-vuno-surface-1" },
-      /* Sin contenedor: el marco lo pone quien la envuelve. */
-      plain: {},
-      soft: { root: "bg-vuno-surface-2" }
+      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';
+};

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

@@ -1,8 +1,9 @@
 <script setup>
 import { useTheme } from "#vuno/composables/useTheme";
-import { filled } from "#vuno/internal/slots";
+import { filled } from "#vuno/utils/slots";
 defineOptions({ name: "VunoCard" });
 const props = defineProps({
+  color: { type: String, required: false, default: "neutral" },
   radius: { type: String, required: false, default: void 0 },
   tag: { type: null, required: false, default: "div" },
   ui: { type: Object, required: false, default: void 0 },
@@ -12,7 +13,7 @@ const slots = defineSlots();
 const ui = useTheme(
   "card",
   () => props.ui,
-  () => ({ radius: props.radius, variant: props.variant })
+  () => ({ color: props.color, radius: props.radius, variant: props.variant })
 );
 </script>
 
@@ -29,17 +30,22 @@ const ui = useTheme(
         </div>
 
         <div
-            v-if="filled(slots.default)"
-            :class="ui.body"
+            v-if="filled(slots.default) || filled(slots.footer)"
+            :class="ui.primary"
         >
-            <slot />
-        </div>
+            <div
+                v-if="filled(slots.default)"
+                :class="ui.body"
+            >
+                <slot />
+            </div>
 
-        <div
-            v-if="filled(slots.footer)"
-            :class="ui.footer"
-        >
-            <slot name="footer" />
+            <div
+                v-if="filled(slots.footer)"
+                :class="ui.footer"
+            >
+                <slot name="footer" />
+            </div>
         </div>
     </component>
 </template>

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

@@ -1,67 +1,4 @@
-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';
-};
+import type { VunoCardProps } from './Card.types.js';
 /**
  * Las tres regiones se pintan solo si se rellenan.
  *
@@ -78,11 +15,12 @@ type __VLS_Slots = {
     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">;
+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;