@groupteknology/vuno 2.0.0 → 3.0.0

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

@@ -1,26 +1,9 @@
-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;
+import type { VunoAvatarProps } from './Avatar.types.js';
+declare const __VLS_export: import("vue").DefineComponent<VunoAvatarProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<VunoAvatarProps> & Readonly<{}>, {
+    radius: import("../../types/base.js").VunoRadius;
+    size: import("./Avatar.types.js").VunoAvatarSize;
     alt: string;
-    ui: VunoUi<"avatar">;
+    ui: import("../../types/slots.js").VunoUi<"avatar">;
     src: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

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

@@ -1,34 +1,15 @@
-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;
-};
+import type { VunoBadgeProps } from './Badge.types.js';
 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;
+declare const __VLS_base: import("vue").DefineComponent<VunoBadgeProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<VunoBadgeProps> & Readonly<{}>, {
+    color: import("../../types/base.js").VunoColor;
+    radius: import("../../types/base.js").VunoRadius;
+    size: import("./Badge.types.js").VunoBadgeSize;
+    variant: import("./Badge.types.js").VunoBadgeVariant;
     label: string;
-    ui: VunoUi<"badge">;
+    ui: import("../../types/slots.js").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.types.d.ts

@@ -0,0 +1,12 @@
+import type { VunoColor, VunoRadius, VunoSize } from '#vuno/types/base';
+import type { VunoUi } from '#vuno/types/slots';
+export type VunoBadgeSize = Extract<VunoSize, 'lg' | 'md' | 'sm' | 'xl' | 'xs'>;
+export type VunoBadgeVariant = 'outline' | 'soft' | 'solid' | 'subtle';
+export type VunoBadgeProps = {
+    color?: VunoColor;
+    label?: string;
+    radius?: VunoRadius;
+    size?: VunoBadgeSize;
+    ui?: VunoUi<'badge'>;
+    variant?: VunoBadgeVariant;
+};

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

@@ -1,34 +1,15 @@
-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;
-};
+import type { VunoBadgeProps } from './Badge.types.js';
 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;
+declare const __VLS_base: import("vue").DefineComponent<VunoBadgeProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<VunoBadgeProps> & Readonly<{}>, {
+    color: import("../../types/base.js").VunoColor;
+    radius: import("../../types/base.js").VunoRadius;
+    size: import("./Badge.types.js").VunoBadgeSize;
+    variant: import("./Badge.types.js").VunoBadgeVariant;
     label: string;
-    ui: VunoUi<"badge">;
+    ui: import("../../types/slots.js").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/Breadcrumb/Breadcrumb.d.vue.ts

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

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

@@ -0,0 +1,15 @@
+export declare const breadcrumbTheme: Record<"breadcrumb", {
+    readonly slots: {
+        readonly collapsedItem: "hidden sm:flex";
+        readonly collapseIndicator: "shrink-0 text-sm font-medium text-vuno-muted sm:hidden";
+        readonly current: "flex min-w-0 items-center gap-1.5 truncate text-sm font-semibold text-vuno-strong";
+        readonly icon: "size-4 shrink-0";
+        readonly item: "flex min-w-0 items-center gap-1.5";
+        readonly link: "flex min-w-0 items-center gap-1.5 truncate rounded-sm text-sm font-medium text-vuno-muted transition-colors [--vuno-accent:var(--color-vuno-primary)] hover:text-vuno-body focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--vuno-accent)";
+        readonly list: "flex min-w-0 items-center gap-1.5 whitespace-nowrap";
+        readonly root: "min-w-0";
+        readonly separator: "size-4 shrink-0 text-vuno-subtle rtl:rotate-180";
+        readonly skeleton: "h-4 w-24 max-w-[35vw] animate-pulse rounded-full bg-vuno-surface-2 motion-reduce:animate-none";
+        readonly text: "flex min-w-0 items-center gap-1.5 truncate text-sm font-medium text-vuno-muted";
+    };
+}>;

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

@@ -0,0 +1,16 @@
+import { defineTheme } from "#vuno/utils/theme";
+export const breadcrumbTheme = defineTheme("breadcrumb", {
+  slots: {
+    collapsedItem: "hidden sm:flex",
+    collapseIndicator: "shrink-0 text-sm font-medium text-vuno-muted sm:hidden",
+    current: "flex min-w-0 items-center gap-1.5 truncate text-sm font-semibold text-vuno-strong",
+    icon: "size-4 shrink-0",
+    item: "flex min-w-0 items-center gap-1.5",
+    link: "flex min-w-0 items-center gap-1.5 truncate rounded-sm text-sm font-medium text-vuno-muted transition-colors [--vuno-accent:var(--color-vuno-primary)] hover:text-vuno-body focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--vuno-accent)",
+    list: "flex min-w-0 items-center gap-1.5 whitespace-nowrap",
+    root: "min-w-0",
+    separator: "size-4 shrink-0 text-vuno-subtle rtl:rotate-180",
+    skeleton: "h-4 w-24 max-w-[35vw] animate-pulse rounded-full bg-vuno-surface-2 motion-reduce:animate-none",
+    text: "flex min-w-0 items-center gap-1.5 truncate text-sm font-medium text-vuno-muted"
+  }
+});

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

@@ -0,0 +1,7 @@
+import type { VunoBreadcrumbItem } from '#vuno/types/page';
+import type { VunoUi } from '#vuno/types/slots';
+export type VunoBreadcrumbProps = {
+    items: VunoBreadcrumbItem[];
+    loading?: boolean;
+    ui?: VunoUi<'breadcrumb'>;
+};

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

@@ -0,0 +1,109 @@
+<script setup>
+import { useIcons, useMessages, useTheme } from "#vuno/composables/useTheme";
+import Icon from "#vuno/components/Icon/Icon.vue";
+import Text from "#vuno/components/Text/Text.vue";
+defineOptions({ name: "VunoBreadcrumb" });
+const props = defineProps({
+  items: { type: Array, required: true },
+  loading: { type: Boolean, required: false, default: false },
+  ui: { type: Object, required: false, default: void 0 }
+});
+const icons = useIcons();
+const messages = useMessages();
+const ui = useTheme("breadcrumb", () => props.ui);
+function isCollapsedItem(index) {
+  return props.items.length > 3 && index < props.items.length - 2;
+}
+</script>
+
+<template>
+    <nav
+        v-if="props.items.length"
+        :aria-busy="props.loading ? 'true' : void 0"
+        :aria-label="messages.breadcrumb"
+        :class="ui.root"
+    >
+        <ol :class="ui.list">
+            <li
+                v-if="props.items.length > 3"
+                aria-hidden="true"
+                :class="[ui.item, ui.collapseIndicator]"
+            >
+                …
+            </li>
+
+            <li
+                v-for="(item, index) in props.items"
+                :key="`${index}:${item.to ?? ''}:${item.label}`"
+                :class="[ui.item, isCollapsedItem(index) ? ui.collapsedItem : void 0]"
+            >
+                <Icon
+                    v-if="index > 0"
+                    aria-hidden="true"
+                    :class="ui.separator"
+                    :name="icons.breadcrumbSeparator"
+                />
+
+                <Text
+                    v-if="index === props.items.length - 1"
+                    :aria-busy="props.loading ? 'true' : void 0"
+                    aria-current="page"
+                    :aria-label="props.loading ? item.label : void 0"
+                    :class="ui.current"
+                    tag="span"
+                    tone="inherit"
+                    variant="inherit"
+                >
+                    <Text
+                        v-if="props.loading"
+                        aria-hidden="true"
+                        :class="ui.skeleton"
+                        tag="span"
+                        tone="inherit"
+                        variant="inherit"
+                    />
+
+                    <template v-else>
+                        <Icon
+                            v-if="item.icon"
+                            aria-hidden="true"
+                            :class="ui.icon"
+                            :name="item.icon"
+                        />
+                        {{ item.label }}
+                    </template>
+                </Text>
+
+                <NuxtLink
+                    v-else-if="item.to"
+                    :class="ui.link"
+                    :to="item.to"
+                >
+                    <Icon
+                        v-if="item.icon"
+                        aria-hidden="true"
+                        :class="ui.icon"
+                        :name="item.icon"
+                    />
+                    {{ item.label }}
+                </NuxtLink>
+
+                <Text
+                    v-else
+                    :class="ui.text"
+                    tag="span"
+                    tone="inherit"
+                    variant="inherit"
+                >
+                    <Icon
+                        v-if="item.icon"
+                        aria-hidden="true"
+                        :class="ui.icon"
+                        :name="item.icon"
+                    />
+                    {{ item.label }}
+                </Text>
+            </li>
+        </ol>
+    </nav>
+</template>

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

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

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

@@ -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/Button/Button.theme.d.ts

@@ -1,15 +1,8 @@
 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 base: "group relative inline-flex shrink-0 cursor-pointer items-center justify-center overflow-hidden rounded-lg font-medium shadow-xs ring-1 ring-inset focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-vuno-focus disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 pointer-coarse:min-h-11 pointer-coarse:min-w-11";
+        readonly content: "relative inline-flex items-center justify-center gap-(--vuno-button-gap)";
+        readonly emphasis: "pointer-events-none absolute inset-0 rounded-[inherit] bg-linear-to-b from-(--vuno-button-emphasis-start) to-(--vuno-button-emphasis) shadow-[inset_0_1px_0_0_var(--vuno-button-emphasis-highlight)] group-hover:from-(--vuno-button-emphasis-hover)";
         readonly icon: "shrink-0";
         /**
          * Caja y no texto suelto: el contenido del slot puede ser cualquier
@@ -41,47 +34,68 @@ export declare const buttonTheme: Record<"button", {
          * devolvería las cinco combinaciones.
          */
         readonly shape: {
+            readonly base: {};
+            readonly circle: {
+                readonly base: "w-(--vuno-button-size) rounded-full px-0";
+            };
             readonly square: {
                 readonly base: "w-(--vuno-button-size) px-0";
             };
         };
         readonly size: {
             readonly xs: {
-                readonly base: "h-(--vuno-button-size) gap-1 px-2 text-xs [--vuno-button-size:1.5rem]";
-                readonly icon: "size-3.5";
+                readonly base: "h-(--vuno-button-size) px-1.5 text-xs [--vuno-button-gap:0.25rem] [--vuno-button-size:1.25rem]";
+                readonly icon: "size-3";
             };
             readonly sm: {
-                readonly base: "h-(--vuno-button-size) gap-1.5 px-2.5 text-sm [--vuno-button-size:1.75rem]";
-                readonly icon: "size-4";
+                readonly base: "h-(--vuno-button-size) px-2 text-xs [--vuno-button-gap:0.25rem] [--vuno-button-size:1.625rem]";
+                readonly icon: "size-3.5";
             };
             readonly md: {
-                readonly base: "h-(--vuno-button-size) gap-1.5 px-3 text-sm [--vuno-button-size:2rem]";
+                readonly base: "h-(--vuno-button-size) px-3 text-sm [--vuno-button-gap:0.375rem] [--vuno-button-size:2.25rem]";
                 readonly icon: "size-4";
             };
             readonly lg: {
-                readonly base: "h-(--vuno-button-size) gap-2 px-3.5 text-base [--vuno-button-size:2.25rem]";
+                readonly base: "h-(--vuno-button-size) px-4 text-sm [--vuno-button-gap:0.5rem] [--vuno-button-size:2.5rem]";
                 readonly icon: "size-5";
             };
             readonly xl: {
-                readonly base: "h-(--vuno-button-size) gap-2 px-4 text-base [--vuno-button-size:2.5rem]";
+                readonly base: "h-(--vuno-button-size) px-4 text-base [--vuno-button-gap:0.5rem] [--vuno-button-size:2.75rem]";
                 readonly icon: "size-5";
             };
         };
         readonly variant: {
+            readonly destructive: {
+                readonly base: "bg-vuno-danger-solid text-vuno-danger-solid-contrast ring-vuno-danger-solid hover:bg-vuno-danger-solid-hover";
+            };
+            readonly 'destructive-subtle': {
+                readonly base: "bg-vuno-control text-vuno-error ring-vuno-line hover:bg-vuno-tint hover:ring-vuno-error/30";
+            };
             readonly ghost: {
-                readonly base: "text-(--vuno-accent) hover:bg-(--vuno-accent)/10";
+                readonly base: "bg-transparent text-vuno-body shadow-none ring-transparent hover:bg-vuno-tint hover:text-vuno-strong";
             };
             readonly link: {
-                readonly base: "text-(--vuno-accent) hover:underline";
+                readonly base: "bg-transparent text-(--vuno-accent) shadow-none ring-transparent hover:underline";
             };
             readonly outline: {
-                readonly base: "border border-(--vuno-accent) text-(--vuno-accent) hover:bg-(--vuno-accent)/10";
+                readonly base: "bg-transparent text-vuno-body shadow-none ring-vuno-line hover:bg-vuno-tint hover:text-vuno-strong";
+            };
+            readonly primary: {
+                readonly base: "bg-vuno-brand text-vuno-brand-contrast ring-vuno-brand hover:bg-vuno-brand-hover";
+            };
+            readonly secondary: {
+                readonly base: "bg-vuno-control text-vuno-body ring-vuno-line hover:bg-vuno-tint hover:text-vuno-strong";
             };
             readonly soft: {
-                readonly base: "bg-(--vuno-accent)/10 text-(--vuno-accent) hover:bg-(--vuno-accent)/20";
+                readonly base: "bg-(--vuno-accent)/10 text-(--vuno-accent) ring-transparent hover:bg-(--vuno-accent)/20";
             };
             readonly solid: {
-                readonly base: "bg-(--vuno-accent) text-(--vuno-accent-contrast) hover:bg-(--vuno-accent)/90";
+                readonly base: "bg-(--vuno-accent) text-(--vuno-accent-contrast) ring-(--vuno-accent) [--vuno-button-emphasis:var(--vuno-accent)] [--vuno-button-emphasis-highlight:color-mix(in_oklch,var(--vuno-accent),white_30%)] [--vuno-button-emphasis-hover:var(--vuno-accent)] [--vuno-button-emphasis-start:color-mix(in_oklch,var(--vuno-accent),white_15%)]";
+            };
+        };
+        readonly variantAccent: {
+            readonly on: {
+                readonly base: "text-(--vuno-accent) ring-(--vuno-accent) hover:bg-(--vuno-accent)/10 hover:text-(--vuno-accent)";
             };
         };
     };

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

@@ -1,17 +1,10 @@
 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",
+    base: "group relative inline-flex shrink-0 cursor-pointer items-center justify-center overflow-hidden rounded-lg font-medium shadow-xs ring-1 ring-inset focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-vuno-focus disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 pointer-coarse:min-h-11 pointer-coarse:min-w-11",
+    content: "relative inline-flex items-center justify-center gap-(--vuno-button-gap)",
+    emphasis: "pointer-events-none absolute inset-0 rounded-[inherit] bg-linear-to-b from-(--vuno-button-emphasis-start) to-(--vuno-button-emphasis) shadow-[inset_0_1px_0_0_var(--vuno-button-emphasis-highlight)] group-hover:from-(--vuno-button-emphasis-hover)",
     icon: "shrink-0",
     /**
      * Caja y no texto suelto: el contenido del slot puede ser cualquier
@@ -39,21 +32,36 @@ export const buttonTheme = defineTheme("button", {
      * devolvería las cinco combinaciones.
      */
     shape: {
+      base: {},
+      circle: { base: "w-(--vuno-button-size) rounded-full px-0" },
       square: { base: "w-(--vuno-button-size) px-0" }
     },
     size: {
-      xs: { base: "h-(--vuno-button-size) 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" }
+      xs: { base: "h-(--vuno-button-size) px-1.5 text-xs [--vuno-button-gap:0.25rem] [--vuno-button-size:1.25rem]", icon: "size-3" },
+      sm: { base: "h-(--vuno-button-size) px-2 text-xs [--vuno-button-gap:0.25rem] [--vuno-button-size:1.625rem]", icon: "size-3.5" },
+      md: { base: "h-(--vuno-button-size) px-3 text-sm [--vuno-button-gap:0.375rem] [--vuno-button-size:2.25rem]", icon: "size-4" },
+      lg: { base: "h-(--vuno-button-size) px-4 text-sm [--vuno-button-gap:0.5rem] [--vuno-button-size:2.5rem]", icon: "size-5" },
+      xl: { base: "h-(--vuno-button-size) px-4 text-base [--vuno-button-gap:0.5rem] [--vuno-button-size:2.75rem]", icon: "size-5" }
     },
     variant: {
-      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" }
+      destructive: {
+        base: "bg-vuno-danger-solid text-vuno-danger-solid-contrast ring-vuno-danger-solid hover:bg-vuno-danger-solid-hover"
+      },
+      "destructive-subtle": { base: "bg-vuno-control text-vuno-error ring-vuno-line hover:bg-vuno-tint hover:ring-vuno-error/30" },
+      ghost: { base: "bg-transparent text-vuno-body shadow-none ring-transparent hover:bg-vuno-tint hover:text-vuno-strong" },
+      link: { base: "bg-transparent text-(--vuno-accent) shadow-none ring-transparent hover:underline" },
+      outline: { base: "bg-transparent text-vuno-body shadow-none ring-vuno-line hover:bg-vuno-tint hover:text-vuno-strong" },
+      primary: {
+        base: "bg-vuno-brand text-vuno-brand-contrast ring-vuno-brand hover:bg-vuno-brand-hover"
+      },
+      secondary: { base: "bg-vuno-control text-vuno-body ring-vuno-line hover:bg-vuno-tint hover:text-vuno-strong" },
+      soft: { base: "bg-(--vuno-accent)/10 text-(--vuno-accent) ring-transparent hover:bg-(--vuno-accent)/20" },
+      solid: {
+        base: "bg-(--vuno-accent) text-(--vuno-accent-contrast) ring-(--vuno-accent) [--vuno-button-emphasis:var(--vuno-accent)] [--vuno-button-emphasis-highlight:color-mix(in_oklch,var(--vuno-accent),white_30%)] [--vuno-button-emphasis-hover:var(--vuno-accent)] [--vuno-button-emphasis-start:color-mix(in_oklch,var(--vuno-accent),white_15%)]"
+      }
+    },
+    variantAccent: {
+      on: { base: "text-(--vuno-accent) ring-(--vuno-accent) hover:bg-(--vuno-accent)/10 hover:text-(--vuno-accent)" }
     }
   }
 });

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

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