@groupteknology/vuno 1.0.0 → 2.0.0

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

@@ -0,0 +1,52 @@
+import { type Component } from 'vue';
+import type { VunoAlertRequest, VunoConfirmRequest, VunoNotifyRequest } from '#vuno/types/app';
+/**
+ * Raíz del módulo: provee el contexto global, aloja los overlays y la pila
+ * de notificaciones.
+ *
+ * Monta directamente todo lo que necesitan las piezas del módulo.
+ */
+type Props = {
+    /**
+     * Dirección de lectura.
+     *
+     * Se provee a los componentes que la necesitan —hoy solo las
+     * pestañas, para invertir sus flechas— y se pone además en el
+     * elemento, que es de donde la lee el navegador para el texto y
+     * para las propiedades lógicas del CSS.
+     */
+    dir?: 'ltr' | 'rtl';
+};
+/**
+ * Monta un componente y espera a que emita `close`.
+ *
+ * Cerrar con Escape o pulsando fuera cuenta como cerrar sin resultado: un
+ * `update:open` en falso resuelve igual, porque si no la promesa se quedaría
+ * esperando para siempre a un diálogo que ya no está en pantalla.
+ */
+declare function open<TResult = unknown>(component: Component, props?: Record<string, unknown>): Promise<TResult | undefined>;
+declare function closeAll(): void;
+declare function dismiss(id: number): void;
+declare function notify(request: VunoNotifyRequest): number;
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<Props, {
+    alert: (request: VunoAlertRequest) => Promise<void>;
+    closeAll: typeof closeAll;
+    confirm: (request: VunoConfirmRequest) => Promise<boolean>;
+    dismiss: typeof dismiss;
+    notify: typeof notify;
+    open: typeof open;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
+    dir: "ltr" | "rtl";
+}, {}, {}, {}, 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/App/internal/Overlay/Overlay.d.vue.ts

@@ -0,0 +1,7 @@
+import type { VunoOverlayEntry } from '#vuno/types/app';
+type Props = {
+    overlays: readonly VunoOverlayEntry[];
+};
+declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,39 @@
+<script setup>
+import { computed } from "vue";
+import OverlayItem from "#vuno/components/App/internal/OverlayItem/OverlayItem.vue";
+defineOptions({ name: "VunoOverlay" });
+const props = defineProps({
+  overlays: { type: Array, required: true }
+});
+const topmost = computed(() => {
+  for (let index = props.overlays.length - 1; index >= 0; index -= 1) {
+    if (props.overlays[index]?.open) return index;
+  }
+  return -1;
+});
+const isTopmost = (index) => index === topmost.value;
+</script>
+
+<template>
+    <!--
+        Los overlays globales se pintan aquí y no donde se pidieron. Un diálogo
+        montado dentro de la pantalla que lo abre desaparece con ella —al navegar,
+        al cerrarse un modal que lo contenía— y su promesa se queda sin resolver.
+
+        No hay escalera de z-index, y no por olvido: se escribió una y resultó
+        inútil. Los diálogos de vuno son `<dialog>` nativos, que viven en la capa
+        superior del navegador y se apilan por orden de apertura, por encima de
+        cualquier z-index. Mientras todo sea nativo, el apilado ya es correcto;
+        en cuanto se mezcla con algo que no lo sea, ningún z-index lo arregla,
+        porque la capa superior siempre gana.
+
+        Tampoco lleva contenedor propio: cada diálogo se sale del flujo por su
+        cuenta, así que un elemento aquí solo añadiría un nodo vacío.
+    -->
+    <OverlayItem
+        v-for="(entry, index) in props.overlays"
+        :key="entry.id"
+        :behind="!isTopmost(index)"
+        :entry="entry"
+    />
+</template>

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

@@ -0,0 +1,7 @@
+import type { VunoOverlayEntry } from '#vuno/types/app';
+type Props = {
+    overlays: readonly VunoOverlayEntry[];
+};
+declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,8 @@
+import type { VunoOverlayEntry } from '#vuno/types/app';
+type Props = {
+    behind: boolean;
+    entry: VunoOverlayEntry;
+};
+declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,19 @@
+<script setup>
+import { provide } from "vue";
+import { vunoOverlayBehindInjectionKey } from "#vuno/internal/keys";
+defineOptions({ name: "VunoOverlayItem" });
+const props = defineProps({
+  behind: { type: Boolean, required: true },
+  entry: { type: Object, required: true }
+});
+provide(vunoOverlayBehindInjectionKey, () => props.behind);
+</script>
+
+<template>
+    <component
+        :is="props.entry.component"
+        v-bind="props.entry.props"
+        :open="props.entry.open"
+        v-on="props.entry.listeners"
+    />
+</template>

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

@@ -0,0 +1,8 @@
+import type { VunoOverlayEntry } from '#vuno/types/app';
+type Props = {
+    behind: boolean;
+    entry: VunoOverlayEntry;
+};
+declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

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

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

@@ -0,0 +1,13 @@
+/** El apilado lo añade `Overlay`; aquí solo lo que sea del proyecto. */
+export declare const toastTheme: Record<"toast", {
+    readonly slots: {
+        readonly body: "min-w-0 flex-1";
+        readonly description: "mt-1 text-sm text-vuno-muted";
+        readonly icon: "mt-0.5 size-5 shrink-0 text-(--vuno-accent)";
+        readonly root: "flex w-full items-start gap-3 rounded-sm bg-vuno-surface-1 p-3 shadow-lg ring ring-(--vuno-accent)/25";
+        readonly title: "text-sm font-medium text-vuno-strong";
+    };
+    readonly variants: {
+        readonly color: Record<import("../../../../types/base.js").VunoColor, Record<"root", string>>;
+    };
+}>;

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

@@ -0,0 +1,18 @@
+import { accentByColor } from "#vuno/theme/shared";
+import { defineTheme } from "#vuno/utils/theme";
+export const toastTheme = defineTheme("toast", {
+  slots: {
+    body: "min-w-0 flex-1",
+    description: "mt-1 text-sm text-vuno-muted",
+    /*
+     * La tarjeta declara el acento para que el icono lo herede y el
+     * anillo diferencie el estado sin teñir toda la superficie. Un
+     * nombre compuesto como `text-${color}` no serviría: Tailwind no
+     * genera una clase que nunca aparece literal en el código.
+     */
+    icon: "mt-0.5 size-5 shrink-0 text-(--vuno-accent)",
+    root: "flex w-full items-start gap-3 rounded-sm bg-vuno-surface-1 p-3 shadow-lg ring ring-(--vuno-accent)/25",
+    title: "text-sm font-medium text-vuno-strong"
+  },
+  variants: { color: accentByColor("root") }
+});

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -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;
+    };
+};