@groupteknology/vuno 1.0.1 → 2.0.0

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/{overlays → App/internal/Toast}/Toast.vue

@@ -1,8 +1,9 @@
 <script setup>
 import { computed } from "vue";
-import Button from "#vuno/components/actions/Button.vue";
-import Icon from "#vuno/components/actions/Icon.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 }
 });

package/dist/runtime/app/components/{overlays → App/internal/Toast}/Toast.vue.d.ts

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

package/dist/runtime/app/components/{overlays → App/internal/Toaster}/Toaster.d.vue.ts

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

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/{overlays → App/internal/Toaster}/Toaster.vue

@@ -1,14 +1,15 @@
 <script setup>
 import { nextTick, ref, watch } from "vue";
-import Toast from "#vuno/components/overlays/Toast.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 polite = ref("");
 const assertive = ref("");
+const polite = ref("");
 const announced = /* @__PURE__ */ new Set();
 const owners = { assertive: null, polite: null };
 async function announce(region, text) {

package/dist/runtime/app/components/{overlays → App/internal/Toaster}/Toaster.vue.d.ts

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

package/dist/runtime/app/components/{actions → Avatar}/Avatar.d.vue.ts

@@ -1,4 +1,5 @@
-import type { VunoSize, VunoSlots } from '#vuno/types/base';
+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.
@@ -7,17 +8,20 @@ import type { VunoSize, VunoSlots } from '#vuno/types/base';
  * de la fila, y de ahí salen también las iniciales cuando no hay imagen que
  * enseñar.
  */
-type __VLS_Props = {
+type Props = {
     alt?: string;
+    /** La curvatura. Sin valor, la que traiga el tema. */
+    radius?: VunoRadius;
     size?: VunoSize;
     src?: string;
-    ui?: VunoSlots;
+    ui?: VunoUi<'avatar'>;
 };
-declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+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;
-    ui: VunoSlots;
 }, {}, {}, {}, 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/{actions → Avatar}/Avatar.vue

@@ -1,8 +1,10 @@
 <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 }
@@ -10,19 +12,19 @@ const props = defineProps({
 const ui = useTheme(
   "avatar",
   () => props.ui,
-  () => ({ size: props.size })
+  () => ({ 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;
   }
 );
-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("")
-);
 </script>
 
 <template>

package/dist/runtime/app/components/{actions → Avatar}/Avatar.vue.d.ts

@@ -1,4 +1,5 @@
-import type { VunoSize, VunoSlots } from '#vuno/types/base';
+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.
@@ -7,17 +8,20 @@ import type { VunoSize, VunoSlots } from '#vuno/types/base';
  * de la fila, y de ahí salen también las iniciales cuando no hay imagen que
  * enseñar.
  */
-type __VLS_Props = {
+type Props = {
     alt?: string;
+    /** La curvatura. Sin valor, la que traiga el tema. */
+    radius?: VunoRadius;
     size?: VunoSize;
     src?: string;
-    ui?: VunoSlots;
+    ui?: VunoUi<'avatar'>;
 };
-declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+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;
-    ui: VunoSlots;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/app/components/{actions → Badge}/Badge.d.vue.ts

@@ -1,4 +1,5 @@
-import type { VunoColor, VunoSize, VunoSlots } from '#vuno/types/base';
+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.
@@ -8,23 +9,26 @@ import type { VunoColor, VunoSize, VunoSlots } from '#vuno/types/base';
  * pulsa sea ese y no la etiqueta entera.
  */
 type VunoBadgeVariant = 'outline' | 'soft' | 'solid' | 'subtle';
-type __VLS_Props = {
+type Props = {
     color?: VunoColor;
     label?: string;
+    /** La curvatura. Sin valor, la que traiga el tema. */
+    radius?: VunoRadius;
     size?: VunoSize;
-    ui?: VunoSlots;
+    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<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+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: VunoSlots;
+    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;

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/{actions → Badge}/Badge.vue

@@ -1,8 +1,10 @@
 <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" }
@@ -12,6 +14,7 @@ const ui = useTheme(
   () => props.ui,
   () => ({
     color: props.color,
+    radius: props.radius,
     size: props.size,
     variant: props.variant
   })

package/dist/runtime/app/components/{actions → Badge}/Badge.vue.d.ts

@@ -1,4 +1,5 @@
-import type { VunoColor, VunoSize, VunoSlots } from '#vuno/types/base';
+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.
@@ -8,23 +9,26 @@ import type { VunoColor, VunoSize, VunoSlots } from '#vuno/types/base';
  * pulsa sea ese y no la etiqueta entera.
  */
 type VunoBadgeVariant = 'outline' | 'soft' | 'solid' | 'subtle';
-type __VLS_Props = {
+type Props = {
     color?: VunoColor;
     label?: string;
+    /** La curvatura. Sin valor, la que traiga el tema. */
+    radius?: VunoRadius;
     size?: VunoSize;
-    ui?: VunoSlots;
+    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<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+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: VunoSlots;
+    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;

package/dist/runtime/app/components/{actions → Button}/Button.d.vue.ts

@@ -1,6 +1,7 @@
-import type { VunoColor, VunoSize, VunoSlots } from '#vuno/types/base';
+import type { VunoColor, VunoRadius, VunoSize } from '#vuno/types/base';
+import type { VunoUi } from '#vuno/types/slots';
 type VunoButtonVariant = 'ghost' | 'link' | 'outline' | 'soft' | 'solid';
-type __VLS_Props = {
+type Props = {
     color?: VunoColor;
     disabled?: boolean;
     /** Nombre Iconify, como los de `useIcons`. */
@@ -8,6 +9,8 @@ type __VLS_Props = {
     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;
@@ -17,7 +20,7 @@ type __VLS_Props = {
      * convierte cualquier acción secundaria en un envío accidental.
      */
     type?: 'button' | 'reset' | 'submit';
-    ui?: VunoSlots;
+    ui?: VunoUi<'button'>;
     variant?: VunoButtonVariant;
 };
 type __VLS_Slots = {
@@ -26,14 +29,15 @@ type __VLS_Slots = {
     /** Va después de todo lo demás; la tabla mete ahí su contador. */
     trailing?: () => unknown;
 };
-declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+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;
-    type: "button" | "reset" | "submit";
+    radius: VunoRadius;
     size: VunoSize;
     variant: VunoButtonVariant;
     label: string;
-    ui: VunoSlots;
+    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;

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