@groupteknology/vuno 1.0.0 → 2.0.0

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

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

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

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

@@ -0,0 +1,40 @@
+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/Button/Button.d.vue.ts

@@ -0,0 +1,49 @@
+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;
+};
+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;
+    icon: string;
+    radius: VunoRadius;
+    size: VunoSize;
+    variant: VunoButtonVariant;
+    label: string;
+    type: "button" | "reset" | "submit";
+    ui: VunoUi<"button">;
+}, {}, {}, {}, 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,88 @@
+export declare const buttonTheme: Record<"button", {
+    /**
+     * El botón, y el primer componente propio del que todo lo demás cuelga.
+     *
+     * Las combinaciones no se escriben: la dimensión `color` solo asigna las
+     * variables de acento y la dimensión `variant` las consume, así que siete
+     * colores y cinco variantes son doce entradas en vez de treinta y cinco.
+     * `shape` no depende del tamaño porque un `aspect-square` ya cuadra la
+     * altura que haya puesto `size`.
+     */
+    readonly slots: {
+        readonly base: "inline-flex shrink-0 cursor-pointer items-center justify-center rounded-sm font-medium transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--vuno-accent) disabled:pointer-events-none disabled:opacity-50";
+        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 square: {
+                readonly base: "w-(--vuno-button-size) px-0";
+            };
+        };
+        readonly size: {
+            readonly xs: {
+                readonly base: "h-(--vuno-button-size) gap-1 px-2 text-xs [--vuno-button-size:1.5rem]";
+                readonly icon: "size-3.5";
+            };
+            readonly sm: {
+                readonly base: "h-(--vuno-button-size) gap-1.5 px-2.5 text-sm [--vuno-button-size:1.75rem]";
+                readonly icon: "size-4";
+            };
+            readonly md: {
+                readonly base: "h-(--vuno-button-size) gap-1.5 px-3 text-sm [--vuno-button-size:2rem]";
+                readonly icon: "size-4";
+            };
+            readonly lg: {
+                readonly base: "h-(--vuno-button-size) gap-2 px-3.5 text-base [--vuno-button-size:2.25rem]";
+                readonly icon: "size-5";
+            };
+            readonly xl: {
+                readonly base: "h-(--vuno-button-size) gap-2 px-4 text-base [--vuno-button-size:2.5rem]";
+                readonly icon: "size-5";
+            };
+        };
+        readonly variant: {
+            readonly ghost: {
+                readonly base: "text-(--vuno-accent) hover:bg-(--vuno-accent)/10";
+            };
+            readonly link: {
+                readonly base: "text-(--vuno-accent) hover:underline";
+            };
+            readonly outline: {
+                readonly base: "border border-(--vuno-accent) text-(--vuno-accent) hover:bg-(--vuno-accent)/10";
+            };
+            readonly soft: {
+                readonly base: "bg-(--vuno-accent)/10 text-(--vuno-accent) hover:bg-(--vuno-accent)/20";
+            };
+            readonly solid: {
+                readonly base: "bg-(--vuno-accent) text-(--vuno-accent-contrast) hover:bg-(--vuno-accent)/90";
+            };
+        };
+    };
+}>;

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

@@ -0,0 +1,59 @@
+import { accentByColor, radiusByStep } from "#vuno/theme/shared";
+import { defineTheme } from "#vuno/utils/theme";
+export const buttonTheme = defineTheme("button", {
+  /**
+   * El botón, y el primer componente propio del que todo lo demás cuelga.
+   *
+   * Las combinaciones no se escriben: la dimensión `color` solo asigna las
+   * variables de acento y la dimensión `variant` las consume, así que siete
+   * colores y cinco variantes son doce entradas en vez de treinta y cinco.
+   * `shape` no depende del tamaño porque un `aspect-square` ya cuadra la
+   * altura que haya puesto `size`.
+   */
+  slots: {
+    base: "inline-flex shrink-0 cursor-pointer items-center justify-center rounded-sm font-medium transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--vuno-accent) disabled:pointer-events-none disabled:opacity-50",
+    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: {
+      square: { base: "w-(--vuno-button-size) px-0" }
+    },
+    size: {
+      xs: { base: "h-(--vuno-button-size) gap-1 px-2 text-xs [--vuno-button-size:1.5rem]", icon: "size-3.5" },
+      sm: { base: "h-(--vuno-button-size) gap-1.5 px-2.5 text-sm [--vuno-button-size:1.75rem]", icon: "size-4" },
+      md: { base: "h-(--vuno-button-size) gap-1.5 px-3 text-sm [--vuno-button-size:2rem]", icon: "size-4" },
+      lg: { base: "h-(--vuno-button-size) gap-2 px-3.5 text-base [--vuno-button-size:2.25rem]", icon: "size-5" },
+      xl: { base: "h-(--vuno-button-size) gap-2 px-4 text-base [--vuno-button-size:2.5rem]", icon: "size-5" }
+    },
+    variant: {
+      ghost: { base: "text-(--vuno-accent) hover:bg-(--vuno-accent)/10" },
+      link: { base: "text-(--vuno-accent) hover:underline" },
+      outline: { base: "border border-(--vuno-accent) text-(--vuno-accent) hover:bg-(--vuno-accent)/10" },
+      soft: { base: "bg-(--vuno-accent)/10 text-(--vuno-accent) hover:bg-(--vuno-accent)/20" },
+      solid: { base: "bg-(--vuno-accent) text-(--vuno-accent-contrast) hover:bg-(--vuno-accent)/90" }
+    }
+  }
+});

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

@@ -0,0 +1,78 @@
+<script setup>
+import { computed } 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" },
+  disabled: { type: Boolean, required: false },
+  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 },
+  size: { type: String, 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" }
+});
+const slots = defineSlots();
+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 ui = useTheme(
+  "button",
+  () => props.ui,
+  () => ({
+    color: props.color,
+    groupOrientation: controlGroup.orientation.value,
+    radius: props.radius,
+    shape: hasContent.value ? void 0 : "square",
+    size: size.value,
+    variant: props.variant
+  })
+);
+</script>
+
+<template>
+    <button
+        :aria-busy="props.loading ? 'true' : void 0"
+        :class="ui.base"
+        :disabled="isDisabled"
+        :type="props.type"
+    >
+        <!--
+            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" />
+    </button>
+</template>

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

@@ -0,0 +1,49 @@
+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;
+};
+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;
+    icon: string;
+    radius: VunoRadius;
+    size: VunoSize;
+    variant: VunoButtonVariant;
+    label: string;
+    type: "button" | "reset" | "submit";
+    ui: VunoUi<"button">;
+}, {}, {}, {}, 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,94 @@
+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;
+    };
+};

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

@@ -0,0 +1,57 @@
+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.
+     *
+     * 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.
+     *
+     * **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 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.
+     */
+    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 variants: {
+        readonly radius: Record<import("../../types/base.js").VunoRadius, Record<"root", string>>;
+        readonly variant: {
+            readonly outline: {
+                readonly root: "border border-vuno-border bg-vuno-surface-1";
+            };
+            readonly plain: {};
+            readonly soft: {
+                readonly root: "bg-vuno-surface-2";
+            };
+        };
+    };
+}>;